Marketing Website
This commit is contained in:
Desktop
158
frontend/src/marketing/layout/MarketingLayout.tsx
Normal file
158
frontend/src/marketing/layout/MarketingLayout.tsx
Normal file
@@ -0,0 +1,158 @@
|
||||
import React, { useState } from "react";
|
||||
import { Link, useLocation } from "react-router-dom";
|
||||
import { primaryNav, footerNavGroups } from "../data/navLinks";
|
||||
import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
|
||||
|
||||
interface MarketingLayoutProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children }) => {
|
||||
const [mobileOpen, setMobileOpen] = useState(false);
|
||||
const location = useLocation();
|
||||
|
||||
const toggleMobile = () => setMobileOpen((prev) => !prev);
|
||||
const closeMobile = () => setMobileOpen(false);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col bg-[#090E1A] text-white">
|
||||
<header className="sticky top-0 z-[1100] backdrop-blur-xl bg-slate-950/70 border-b border-white/10">
|
||||
<div className="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||
<Link to="/" className="flex items-center gap-3" onClick={closeMobile}>
|
||||
<span className="h-10 w-10 rounded-xl bg-gradient-to-br from-brand-400 to-brand-600 flex items-center justify-center text-lg font-bold">
|
||||
IG
|
||||
</span>
|
||||
<div className="flex flex-col leading-tight">
|
||||
<span className="font-semibold tracking-wide text-white uppercase">
|
||||
Igny8
|
||||
</span>
|
||||
<span className="text-xs text-white/60">AI growth engine</span>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<nav className="hidden lg:flex items-center gap-8 text-sm font-medium">
|
||||
{primaryNav.map((link) => {
|
||||
const isActive = location.pathname === link.path;
|
||||
return (
|
||||
<Link
|
||||
key={link.name}
|
||||
to={link.path}
|
||||
className={`transition hover:text-brand-200 ${isActive ? "text-brand-200" : "text-white/70"}`}
|
||||
>
|
||||
{link.name}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
<div className="hidden lg:flex items-center gap-4">
|
||||
<a
|
||||
href="https://app.igny8.com/login"
|
||||
className="text-sm font-medium text-white/70 hover:text-white transition"
|
||||
>
|
||||
Log in
|
||||
</a>
|
||||
<a
|
||||
href="https://app.igny8.com/signup"
|
||||
className="inline-flex items-center justify-center rounded-full bg-brand-500 hover:bg-brand-400 px-5 py-2 text-sm font-semibold transition"
|
||||
>
|
||||
Start Free
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="lg:hidden inline-flex items-center justify-center rounded-lg border border-white/10 p-2 text-white/80"
|
||||
onClick={toggleMobile}
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
{mobileOpen ? <XMarkIcon className="h-6 w-6" /> : <Bars3Icon className="h-6 w-6" />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{mobileOpen && (
|
||||
<div className="lg:hidden border-t border-white/10 bg-slate-950/95 backdrop-blur-xl">
|
||||
<nav className="px-6 py-4 flex flex-col gap-3">
|
||||
{primaryNav.map((link) => (
|
||||
<Link
|
||||
key={link.name}
|
||||
to={link.path}
|
||||
onClick={closeMobile}
|
||||
className="text-sm font-medium text-white/80 hover:text-white transition"
|
||||
>
|
||||
{link.name}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
<div className="px-6 pb-6 flex flex-col gap-3">
|
||||
<a
|
||||
href="https://app.igny8.com/login"
|
||||
className="text-sm font-medium text-white/70 hover:text-white transition"
|
||||
onClick={closeMobile}
|
||||
>
|
||||
Log in
|
||||
</a>
|
||||
<a
|
||||
href="https://app.igny8.com/signup"
|
||||
className="inline-flex items-center justify-center rounded-full bg-brand-500 hover:bg-brand-400 px-5 py-2 text-sm font-semibold transition"
|
||||
onClick={closeMobile}
|
||||
>
|
||||
Start Free
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
|
||||
<main className="flex-1">{children}</main>
|
||||
|
||||
<footer className="bg-slate-950 border-t border-white/10">
|
||||
<div className="max-w-6xl mx-auto px-6 py-16 grid grid-cols-1 md:grid-cols-4 gap-12">
|
||||
<div className="space-y-4">
|
||||
<Link to="/" className="inline-flex items-center gap-3">
|
||||
<span className="h-10 w-10 rounded-xl bg-gradient-to-br from-brand-400 to-brand-600 flex items-center justify-center text-lg font-bold">
|
||||
IG
|
||||
</span>
|
||||
<div className="flex flex-col leading-tight">
|
||||
<span className="font-semibold tracking-wide text-white uppercase">
|
||||
Igny8
|
||||
</span>
|
||||
<span className="text-xs text-white/60">
|
||||
AI + SEO automation suite
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
<p className="text-sm text-white/60 max-w-xs">
|
||||
Automate keyword intelligence, clustering, content production, and image creation in one unified growth engine.
|
||||
</p>
|
||||
<div className="text-xs text-white/40">
|
||||
© {new Date().getFullYear()} Igny8 Labs. All rights reserved.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{footerNavGroups.map((group) => (
|
||||
<div key={group.title}>
|
||||
<h4 className="text-sm font-semibold text-white uppercase tracking-wide mb-4">
|
||||
{group.title}
|
||||
</h4>
|
||||
<ul className="space-y-3 text-sm text-white/60">
|
||||
{group.links.map((link) => (
|
||||
<li key={link.name}>
|
||||
<Link to={link.path} className="hover:text-white transition">
|
||||
{link.name}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="border-t border-white/10 py-6 px-6 text-center text-xs text-white/30">
|
||||
Built for marketers who automate growth with AI.
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MarketingLayout;
|
||||
|
||||
Reference in New Issue
Block a user