349 lines
15 KiB
TypeScript
349 lines
15 KiB
TypeScript
import { mdiArrowRight, mdiChevronDown, mdiClose, mdiMenu } from '@mdi/js';
|
|
import Link from 'next/link';
|
|
import { useRouter } from 'next/router';
|
|
import React, { useEffect, useMemo, useState } from 'react';
|
|
|
|
import BaseIcon from '../BaseIcon';
|
|
import MarketingButton from './MarketingButton';
|
|
import NewsletterForm from './NewsletterForm';
|
|
import { brand, exportServiceItems, navigationItems } from './marketingData';
|
|
|
|
type Props = {
|
|
children: React.ReactNode;
|
|
};
|
|
|
|
type NavigationItem = (typeof navigationItems)[number];
|
|
type NavigationChild = (typeof exportServiceItems)[number];
|
|
|
|
const isActivePath = (pathname: string, href: string) => {
|
|
if (href === '/') {
|
|
return pathname === '/';
|
|
}
|
|
|
|
return pathname === href;
|
|
};
|
|
|
|
const isNavItemActive = (pathname: string, item: NavigationItem) => {
|
|
if (isActivePath(pathname, item.href)) {
|
|
return true;
|
|
}
|
|
|
|
return item.children?.some((child) => isActivePath(pathname, child.href)) ?? false;
|
|
};
|
|
|
|
const getCurrentLabel = (pathname: string) => {
|
|
const currentChild = exportServiceItems.find((item) => item.href === pathname);
|
|
|
|
if (currentChild) {
|
|
return currentChild.label;
|
|
}
|
|
|
|
const currentItem = navigationItems.find((item) => item.href === pathname);
|
|
return currentItem ? currentItem.label : 'Discover';
|
|
};
|
|
|
|
const getDesktopNavClasses = (isActive: boolean, isHomeHeroMode: boolean) => {
|
|
if (isHomeHeroMode) {
|
|
return isActive
|
|
? 'bg-white/14 text-white shadow-[0_16px_45px_rgba(0,0,0,0.14)]'
|
|
: 'text-white/88 hover:bg-white/10';
|
|
}
|
|
|
|
return isActive ? 'bg-[#3E2723] text-[#F5E9DA]' : 'text-[#4d3c35] hover:bg-[#F5E9DA]';
|
|
};
|
|
|
|
const getDesktopDropdownClasses = (isHomeHeroMode: boolean) => {
|
|
return isHomeHeroMode
|
|
? 'border-white/10 bg-[#241816]/96 text-white shadow-[0_26px_80px_rgba(0,0,0,0.32)]'
|
|
: 'border-[#3E2723]/10 bg-white text-[#2c221f] shadow-[0_26px_80px_rgba(35,24,18,0.14)]';
|
|
};
|
|
|
|
const getDesktopDropdownItemClasses = (pathname: string, item: NavigationChild, isHomeHeroMode: boolean) => {
|
|
const isActive = isActivePath(pathname, item.href);
|
|
|
|
if (isHomeHeroMode) {
|
|
return isActive
|
|
? 'bg-white/12 text-white'
|
|
: 'text-white/78 hover:bg-white/8 hover:text-white';
|
|
}
|
|
|
|
return isActive ? 'bg-[#F5E9DA] text-[#3E2723]' : 'text-[#4d3c35] hover:bg-[#F5E9DA]/70';
|
|
};
|
|
|
|
export default function MarketingLayout({ children }: Props) {
|
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
const [isExportMenuOpen, setIsExportMenuOpen] = useState(false);
|
|
const [isScrolled, setIsScrolled] = useState(false);
|
|
const router = useRouter();
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
setIsScrolled(window.scrollY > 24);
|
|
};
|
|
|
|
handleScroll();
|
|
window.addEventListener('scroll', handleScroll, { passive: true });
|
|
|
|
return () => window.removeEventListener('scroll', handleScroll);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
setIsMenuOpen(false);
|
|
setIsExportMenuOpen(false);
|
|
}, [router.pathname]);
|
|
|
|
const currentLabel = useMemo(() => getCurrentLabel(router.pathname), [router.pathname]);
|
|
const isHomeHeroMode = router.pathname === '/' && !isScrolled && !isMenuOpen;
|
|
|
|
return (
|
|
<div className="font-brand-body min-h-screen bg-[#fcfaf6] text-[#2c221f]">
|
|
<header
|
|
className={`sticky top-0 z-50 transition-all duration-300 ${
|
|
isHomeHeroMode
|
|
? 'border-b border-transparent bg-transparent'
|
|
: 'border-b border-[#3E2723]/10 bg-[#fcfaf6]/92 shadow-[0_18px_50px_rgba(35,24,18,0.08)] backdrop-blur-xl'
|
|
}`}
|
|
>
|
|
<div className="mx-auto flex max-w-7xl items-center justify-between gap-4 px-5 py-4 lg:px-8">
|
|
<Link href="/" className="flex items-center gap-3">
|
|
<div
|
|
className={`flex h-12 w-12 items-center justify-center rounded-full border text-sm font-semibold shadow-lg transition-colors duration-300 ${
|
|
isHomeHeroMode
|
|
? 'border-white/25 bg-white/10 text-[#F5E9DA] backdrop-blur-md'
|
|
: 'border-[#C8A165]/50 bg-[#3E2723] text-[#F5E9DA]'
|
|
}`}
|
|
>
|
|
AD
|
|
</div>
|
|
<div>
|
|
<p className={`font-brand-display text-lg font-bold transition-colors duration-300 ${isHomeHeroMode ? 'text-[#F5E9DA]' : 'text-[#3E2723]'}`}>
|
|
Alem Desta
|
|
</p>
|
|
<p className={`text-xs uppercase tracking-[0.28em] transition-colors duration-300 ${isHomeHeroMode ? 'text-white/60' : 'text-[#8a6f59]'}`}>
|
|
Coffee Export
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
|
|
<nav className="hidden items-center gap-1 xl:flex">
|
|
{navigationItems.map((item) => {
|
|
const isActive = isNavItemActive(router.pathname, item);
|
|
const classes = getDesktopNavClasses(isActive, isHomeHeroMode);
|
|
|
|
if (!item.children) {
|
|
return (
|
|
<Link key={item.href} href={item.href} className={`rounded-full px-4 py-2 text-sm font-medium transition-all duration-300 ${classes}`}>
|
|
{item.label}
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div key={item.href} className="group relative">
|
|
<Link href={item.href} className={`inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium transition-all duration-300 ${classes}`}>
|
|
{item.label}
|
|
<BaseIcon path={mdiChevronDown} className="transition-transform duration-300 group-hover:rotate-180 group-focus-within:rotate-180" />
|
|
</Link>
|
|
<div
|
|
className={`invisible absolute left-0 top-full mt-3 w-[22rem] translate-y-2 rounded-[1.75rem] border p-3 opacity-0 transition-all duration-300 group-hover:visible group-hover:translate-y-0 group-hover:opacity-100 group-hover:pointer-events-auto group-focus-within:visible group-focus-within:translate-y-0 group-focus-within:opacity-100 ${getDesktopDropdownClasses(
|
|
isHomeHeroMode,
|
|
)}`}
|
|
>
|
|
{item.children.map((child) => (
|
|
<Link
|
|
key={child.href}
|
|
href={child.href}
|
|
className={`block rounded-[1.25rem] px-4 py-3 transition-all duration-300 ${getDesktopDropdownItemClasses(
|
|
router.pathname,
|
|
child,
|
|
isHomeHeroMode,
|
|
)}`}
|
|
>
|
|
<p className="text-sm font-semibold">{child.label}</p>
|
|
<p className={`mt-1 text-xs leading-6 ${isHomeHeroMode ? 'text-white/58' : 'text-[#7a6458]'}`}>{child.description}</p>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
<div className="hidden items-center gap-3 xl:flex">
|
|
<MarketingButton href="/login" variant={isHomeHeroMode ? 'secondary' : 'ghost'}>
|
|
Admin Login
|
|
</MarketingButton>
|
|
<MarketingButton href="/contact?type=get_a_quote">Get a Quote</MarketingButton>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsMenuOpen((current) => !current)}
|
|
className={`inline-flex h-12 w-12 items-center justify-center rounded-full border transition-all duration-300 xl:hidden ${
|
|
isHomeHeroMode
|
|
? 'border-white/20 bg-white/10 text-[#F5E9DA] backdrop-blur-md'
|
|
: 'border-[#3E2723]/10 bg-white text-[#3E2723]'
|
|
}`}
|
|
aria-label="Toggle navigation"
|
|
>
|
|
<BaseIcon path={isMenuOpen ? mdiClose : mdiMenu} />
|
|
</button>
|
|
</div>
|
|
|
|
{isMenuOpen ? (
|
|
<div className="border-t border-[#3E2723]/10 bg-[#fcfaf6] px-5 py-4 xl:hidden">
|
|
<div className="mb-4 rounded-2xl border border-[#C8A165]/30 bg-[#F5E9DA] px-4 py-3 text-sm text-[#5d4a42]">
|
|
Currently viewing: <span className="font-semibold text-[#3E2723]">{currentLabel}</span>
|
|
</div>
|
|
<div className="flex flex-col gap-2">
|
|
{navigationItems.map((item) => {
|
|
if (!item.children) {
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={`rounded-2xl px-4 py-3 text-sm font-medium ${
|
|
isNavItemActive(router.pathname, item) ? 'bg-[#3E2723] text-[#F5E9DA]' : 'bg-white text-[#3E2723]'
|
|
}`}
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div key={item.href} className="overflow-hidden rounded-[1.5rem] border border-[#3E2723]/10 bg-white">
|
|
<div className="flex items-center">
|
|
<Link
|
|
href={item.href}
|
|
className={`flex-1 px-4 py-3 text-sm font-medium ${
|
|
isNavItemActive(router.pathname, item) ? 'text-[#3E2723]' : 'text-[#4d3c35]'
|
|
}`}
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsExportMenuOpen((current) => !current)}
|
|
className="px-4 py-3 text-[#3E2723]"
|
|
aria-label="Toggle export services submenu"
|
|
>
|
|
<BaseIcon
|
|
path={mdiChevronDown}
|
|
className={`transition-transform duration-300 ${isExportMenuOpen ? 'rotate-180' : ''}`}
|
|
/>
|
|
</button>
|
|
</div>
|
|
{isExportMenuOpen ? (
|
|
<div className="border-t border-[#3E2723]/10 bg-[#fcfaf6] p-2">
|
|
{item.children.map((child) => (
|
|
<Link
|
|
key={child.href}
|
|
href={child.href}
|
|
className={`block rounded-2xl px-4 py-3 ${
|
|
isActivePath(router.pathname, child.href) ? 'bg-[#3E2723] text-[#F5E9DA]' : 'text-[#3E2723]'
|
|
}`}
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
<p className="text-sm font-medium">{child.label}</p>
|
|
<p className={`mt-1 text-xs leading-6 ${isActivePath(router.pathname, child.href) ? 'text-white/70' : 'text-[#7a6458]'}`}>
|
|
{child.description}
|
|
</p>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
<div className="mt-4 grid gap-3 sm:grid-cols-2">
|
|
<MarketingButton href="/login" variant="ghost">
|
|
Admin Login
|
|
</MarketingButton>
|
|
<MarketingButton href="/contact?type=request_samples">Request Samples</MarketingButton>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</header>
|
|
|
|
<main>{children}</main>
|
|
|
|
<section className="border-y border-[#3E2723]/10 bg-[#3E2723] px-5 py-16 text-white lg:px-8">
|
|
<div className="mx-auto flex max-w-7xl flex-col gap-10 lg:flex-row lg:items-center lg:justify-between">
|
|
<div className="max-w-3xl">
|
|
<p className="text-sm uppercase tracking-[0.35em] text-[#d7b47a]">Ready to source with confidence?</p>
|
|
<h2 className="font-brand-display mt-4 text-4xl leading-tight text-[#F5E9DA] md:text-5xl">
|
|
Discover Ethiopian coffee backed by heritage, clear communication, and export discipline.
|
|
</h2>
|
|
</div>
|
|
<div className="flex flex-col gap-3 sm:flex-row">
|
|
<MarketingButton href="/contact?type=request_samples">Request Samples</MarketingButton>
|
|
<MarketingButton href="/contact?type=get_a_quote" variant="secondary">
|
|
Get a Quote
|
|
</MarketingButton>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer className="bg-[#241816] px-5 py-16 text-white lg:px-8">
|
|
<div className="mx-auto grid max-w-7xl gap-10 lg:grid-cols-[1.1fr_0.7fr_0.95fr_1fr]">
|
|
<div>
|
|
<p className="font-brand-display text-3xl text-[#F5E9DA]">{brand.name}</p>
|
|
<p className="mt-4 max-w-xl text-sm leading-7 text-white/72">{brand.tagline}</p>
|
|
<div className="mt-8 flex flex-wrap gap-3">
|
|
<MarketingButton href="/contact?type=partner_with_us">Partner With Us</MarketingButton>
|
|
<MarketingButton href="/login" variant="secondary">
|
|
Admin Interface
|
|
</MarketingButton>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<p className="text-sm font-semibold uppercase tracking-[0.28em] text-[#C8A165]">Main pages</p>
|
|
<div className="mt-5 grid gap-3">
|
|
{navigationItems.map((item) => (
|
|
<Link key={item.href} href={item.href} className="inline-flex items-center gap-2 text-sm text-white/75 transition hover:text-white">
|
|
<BaseIcon path={mdiArrowRight} className="text-[#C8A165]" />
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<p className="text-sm font-semibold uppercase tracking-[0.28em] text-[#C8A165]">Export services</p>
|
|
<div className="mt-5 grid gap-3">
|
|
{exportServiceItems.map((item) => (
|
|
<Link key={item.href} href={item.href} className="inline-flex items-center gap-2 text-sm text-white/75 transition hover:text-white">
|
|
<BaseIcon path={mdiArrowRight} className="text-[#C8A165]" />
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
<div className="mt-8 space-y-2 text-sm text-white/75">
|
|
<p>{brand.address}</p>
|
|
<p>{brand.email}</p>
|
|
{brand.phones.map((phone) => (
|
|
<p key={phone}>{phone}</p>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<p className="text-sm font-semibold uppercase tracking-[0.28em] text-[#C8A165]">Newsletter subscription</p>
|
|
<p className="mt-4 text-sm leading-7 text-white/72">
|
|
Receive market-ready updates, sourcing availability, and company news tailored for international buyers.
|
|
</p>
|
|
<div className="mt-5">
|
|
<NewsletterForm compact source="home_footer" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|