admin/39357-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Autosave: 20260328-091022

Browse Source
This commit is contained in:
Flatlogic Bot 2026-03-28 09:10:22 +00:00
parent b60f4a1c0e
commit de96e0cfc2
23 changed files with 188 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/pasted-20260328-052034-76e61f64.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 960 KiB

BIN
assets/pasted-20260328-052613-0e0e2c33.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 109 KiB

BIN
assets/pasted-20260328-080040-133ede7f.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
assets/pasted-20260328-090924-08e1b476.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 127 KiB

BIN
frontend/public/assets/vm-shot-2026-03-28T07-59-44-940Z.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 664 KiB

34
frontend/src/components/marketing/InquiryForm.tsx
View File

@ -105,18 +105,18 @@ export default function InquiryForm({ initialInquiryType }: Props) {
}; };
return ( return (
<div className="rounded-[2rem] border border-[#3E2723]/10 bg-white p-6 shadow-[0_24px_80px_rgba(35,24,18,0.08)] md:p-8"> <div className="rounded-[2rem] border border-[#1F3A2D]/10 bg-white p-6 shadow-[0_24px_80px_rgba(20,38,29,0.08)] md:p-8">
<div className="mb-6"> <div className="mb-6">
<p className="text-sm font-semibold uppercase tracking-[0.35em] text-[#C8A165]">Buyer inquiry</p> <p className="text-sm font-semibold uppercase tracking-[0.35em] text-[#9FB06F]">Buyer inquiry</p>
<h3 className="font-brand-display mt-3 text-3xl text-[#3E2723]">{title}</h3> <h3 className="font-brand-display mt-3 text-3xl text-[#1F3A2D]">{title}</h3>
<p className="mt-3 max-w-2xl text-sm leading-7 text-[#5B4A43]"> <p className="mt-3 max-w-2xl text-sm leading-7 text-[#556257]">
Share your sourcing goals and we will tailor a response around origins, order size, process, and export handling. Share your sourcing goals and we will tailor a response around origins, order size, process, and export handling.
</p> </p>
</div> </div>
<form className="space-y-4" onSubmit={onSubmit}> <form className="space-y-4" onSubmit={onSubmit}>
<div className="grid gap-4 md:grid-cols-2"> <div className="grid gap-4 md:grid-cols-2">
<label className="space-y-2 text-sm font-medium text-[#3E2723]"> <label className="space-y-2 text-sm font-medium text-[#1F3A2D]">
Inquiry type Inquiry type
<select className="coffee-input" name="inquiry_type" value={form.inquiry_type} onChange={onChange}> <select className="coffee-input" name="inquiry_type" value={form.inquiry_type} onChange={onChange}>
{inquiryTypes.map((item) => ( {inquiryTypes.map((item) => (
@ -126,7 +126,7 @@ export default function InquiryForm({ initialInquiryType }: Props) {
))} ))}
</select> </select>
</label> </label>
<label className="space-y-2 text-sm font-medium text-[#3E2723]"> <label className="space-y-2 text-sm font-medium text-[#1F3A2D]">
Buyer type Buyer type
<select className="coffee-input" name="buyer_type" value={form.buyer_type} onChange={onChange}> <select className="coffee-input" name="buyer_type" value={form.buyer_type} onChange={onChange}>
{buyerTypes.map((item) => ( {buyerTypes.map((item) => (
@ -139,22 +139,22 @@ export default function InquiryForm({ initialInquiryType }: Props) {
</div> </div>
<div className="grid gap-4 md:grid-cols-2"> <div className="grid gap-4 md:grid-cols-2">
<label className="space-y-2 text-sm font-medium text-[#3E2723]"> <label className="space-y-2 text-sm font-medium text-[#1F3A2D]">
Full name Full name
<input className="coffee-input" name="full_name" placeholder="Your name" value={form.full_name} onChange={onChange} /> <input className="coffee-input" name="full_name" placeholder="Your name" value={form.full_name} onChange={onChange} />
</label> </label>
<label className="space-y-2 text-sm font-medium text-[#3E2723]"> <label className="space-y-2 text-sm font-medium text-[#1F3A2D]">
Email Email
<input className="coffee-input" name="email" type="email" placeholder="you@company.com" value={form.email} onChange={onChange} /> <input className="coffee-input" name="email" type="email" placeholder="you@company.com" value={form.email} onChange={onChange} />
</label> </label>
</div> </div>
<div className="grid gap-4 md:grid-cols-2"> <div className="grid gap-4 md:grid-cols-2">
<label className="space-y-2 text-sm font-medium text-[#3E2723]"> <label className="space-y-2 text-sm font-medium text-[#1F3A2D]">
Phone / WhatsApp Phone / WhatsApp
<input className="coffee-input" name="phone" placeholder="Contact number" value={form.phone} onChange={onChange} /> <input className="coffee-input" name="phone" placeholder="Contact number" value={form.phone} onChange={onChange} />
</label> </label>
<label className="space-y-2 text-sm font-medium text-[#3E2723]"> <label className="space-y-2 text-sm font-medium text-[#1F3A2D]">
Preferred contact method Preferred contact method
<select className="coffee-input" name="preferred_contact_method" value={form.preferred_contact_method} onChange={onChange}> <select className="coffee-input" name="preferred_contact_method" value={form.preferred_contact_method} onChange={onChange}>
{contactMethods.map((item) => ( {contactMethods.map((item) => (
@ -167,18 +167,18 @@ export default function InquiryForm({ initialInquiryType }: Props) {
</div> </div>
<div className="grid gap-4 md:grid-cols-2"> <div className="grid gap-4 md:grid-cols-2">
<label className="space-y-2 text-sm font-medium text-[#3E2723]"> <label className="space-y-2 text-sm font-medium text-[#1F3A2D]">
Company name Company name
<input className="coffee-input" name="company_name" placeholder="Company" value={form.company_name} onChange={onChange} /> <input className="coffee-input" name="company_name" placeholder="Company" value={form.company_name} onChange={onChange} />
</label> </label>
<label className="space-y-2 text-sm font-medium text-[#3E2723]"> <label className="space-y-2 text-sm font-medium text-[#1F3A2D]">
Country Country
<input className="coffee-input" name="country" placeholder="Country" value={form.country} onChange={onChange} /> <input className="coffee-input" name="country" placeholder="Country" value={form.country} onChange={onChange} />
</label> </label>
</div> </div>
<div className="grid gap-4 md:grid-cols-2"> <div className="grid gap-4 md:grid-cols-2">
<label className="space-y-2 text-sm font-medium text-[#3E2723]"> <label className="space-y-2 text-sm font-medium text-[#1F3A2D]">
Target volume (kg) Target volume (kg)
<input <input
className="coffee-input" className="coffee-input"
@ -190,7 +190,7 @@ export default function InquiryForm({ initialInquiryType }: Props) {
onChange={onChange} onChange={onChange}
/> />
</label> </label>
<label className="space-y-2 text-sm font-medium text-[#3E2723]"> <label className="space-y-2 text-sm font-medium text-[#1F3A2D]">
Preferred Incoterm Preferred Incoterm
<select className="coffee-input" name="incoterm" value={form.incoterm} onChange={onChange}> <select className="coffee-input" name="incoterm" value={form.incoterm} onChange={onChange}>
{incoterms.map((item) => ( {incoterms.map((item) => (
@ -202,7 +202,7 @@ export default function InquiryForm({ initialInquiryType }: Props) {
</label> </label>
</div> </div>
<label className="space-y-2 text-sm font-medium text-[#3E2723]"> <label className="space-y-2 text-sm font-medium text-[#1F3A2D]">
Message Message
<textarea <textarea
className="coffee-input min-h-[160px] resize-y pt-3" className="coffee-input min-h-[160px] resize-y pt-3"
@ -214,7 +214,7 @@ export default function InquiryForm({ initialInquiryType }: Props) {
</label> </label>
<div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between"> <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
<p className="text-sm text-[#6B5B54]">Submissions are routed to the admin inquiry queue for follow-up.</p> <p className="text-sm text-[#667367]">Submissions are routed to the admin inquiry queue for follow-up.</p>
<MarketingButton className="w-full md:w-auto" type="submit"> <MarketingButton className="w-full md:w-auto" type="submit">
{isSubmitting ? 'Sending request...' : 'Submit inquiry'} {isSubmitting ? 'Sending request...' : 'Submit inquiry'}
</MarketingButton> </MarketingButton>
@ -222,7 +222,7 @@ export default function InquiryForm({ initialInquiryType }: Props) {
{errorMessage ? <p className="text-sm text-red-600">{errorMessage}</p> : null} {errorMessage ? <p className="text-sm text-red-600">{errorMessage}</p> : null}
{successMessage ? ( {successMessage ? (
<div className="rounded-2xl border border-[#C8A165]/30 bg-[#F8F1E7] px-4 py-3 text-sm text-[#3E2723]">{successMessage}</div> <div className="rounded-2xl border border-[#9FB06F]/30 bg-[#EEF3E7] px-4 py-3 text-sm text-[#1F3A2D]">{successMessage}</div>
) : null} ) : null}
</form> </form>
</div> </div>

8
frontend/src/components/marketing/MarketingButton.tsx
View File

@ -11,15 +11,15 @@ type Props = {
}; };
const baseClassName = const baseClassName =
'inline-flex items-center justify-center rounded-full px-5 py-3 text-sm font-semibold transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-[#C8A165] focus:ring-offset-2'; 'inline-flex items-center justify-center rounded-full px-5 py-3 text-sm font-semibold transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-[#9FB06F] focus:ring-offset-2';
const variantMap = { const variantMap = {
primary: primary:
'bg-[#C8A165] text-[#2A1B18] shadow-[0_16px_40px_rgba(200,161,101,0.25)] hover:-translate-y-0.5 hover:bg-[#d5b37d]', 'bg-[#9FB06F] text-[#18271F] shadow-[0_16px_40px_rgba(159,176,111,0.25)] hover:-translate-y-0.5 hover:bg-[#B0C482]',
secondary: secondary:
'border border-[#C8A165]/60 bg-white/10 text-white backdrop-blur hover:border-[#C8A165] hover:bg-white/20', 'border border-[#B9C88D]/55 bg-white/12 text-white backdrop-blur hover:border-[#C5D39A] hover:bg-white/24',
ghost: ghost:
'border border-[#3E2723]/15 bg-white text-[#3E2723] hover:border-[#3E2723]/30 hover:bg-[#F5E9DA]', 'border border-[#1F3A2D]/15 bg-white text-[#1F3A2D] hover:border-[#1F3A2D]/30 hover:bg-[#F4F1E6]',
}; };
export default function MarketingButton({ export default function MarketingButton({

72
frontend/src/components/marketing/MarketingLayout.tsx
View File

@ -45,17 +45,17 @@ const getCurrentLabel = (pathname: string) => {
const getDesktopNavClasses = (isActive: boolean, isHomeHeroMode: boolean) => { const getDesktopNavClasses = (isActive: boolean, isHomeHeroMode: boolean) => {
if (isHomeHeroMode) { if (isHomeHeroMode) {
return isActive return isActive
? 'bg-white/14 text-white shadow-[0_16px_45px_rgba(0,0,0,0.14)]' ? 'border border-white/15 bg-white/16 text-white shadow-[0_16px_45px_rgba(0,0,0,0.18)] backdrop-blur-md'
: 'text-white/88 hover:bg-white/10'; : 'border border-white/10 bg-[#173125]/58 text-[#F4F1E6] shadow-[0_14px_35px_rgba(0,0,0,0.18)] backdrop-blur-md hover:bg-[#224032]/74 hover:text-white';
} }
return isActive ? 'bg-[#3E2723] text-[#F5E9DA]' : 'text-[#4d3c35] hover:bg-[#F5E9DA]'; return isActive ? 'bg-[#1F3A2D] text-[#F4F1E6]' : 'text-[#32453A] hover:bg-[#F4F1E6]';
}; };
const getDesktopDropdownClasses = (isHomeHeroMode: boolean) => { const getDesktopDropdownClasses = (isHomeHeroMode: boolean) => {
return isHomeHeroMode return isHomeHeroMode
? 'border-white/10 bg-[#241816]/96 text-white shadow-[0_26px_80px_rgba(0,0,0,0.32)]' ? 'border-white/10 bg-[#14261D]/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)]'; : 'border-[#1F3A2D]/10 bg-white text-[#22332B] shadow-[0_26px_80px_rgba(20,38,29,0.14)]';
}; };
const getDesktopDropdownItemClasses = (pathname: string, item: NavigationChild, isHomeHeroMode: boolean) => { const getDesktopDropdownItemClasses = (pathname: string, item: NavigationChild, isHomeHeroMode: boolean) => {
@ -67,7 +67,7 @@ const getDesktopDropdownItemClasses = (pathname: string, item: NavigationChild,
: 'text-white/78 hover:bg-white/8 hover:text-white'; : 'text-white/78 hover:bg-white/8 hover:text-white';
} }
return isActive ? 'bg-[#F5E9DA] text-[#3E2723]' : 'text-[#4d3c35] hover:bg-[#F5E9DA]/70'; return isActive ? 'bg-[#F4F1E6] text-[#1F3A2D]' : 'text-[#32453A] hover:bg-[#F4F1E6]/70';
}; };
export default function MarketingLayout({ children }: Props) { export default function MarketingLayout({ children }: Props) {
@ -96,12 +96,12 @@ export default function MarketingLayout({ children }: Props) {
const isHomeHeroMode = router.pathname === '/' && !isScrolled && !isMenuOpen; const isHomeHeroMode = router.pathname === '/' && !isScrolled && !isMenuOpen;
return ( return (
<div className="font-brand-body min-h-screen bg-[#fcfaf6] text-[#2c221f]"> <div className="font-brand-body min-h-screen bg-[#FBF9F1] text-[#22332B]">
<header <header
className={`sticky top-0 z-50 transition-all duration-300 ${ className={`sticky top-0 z-50 transition-all duration-300 ${
isHomeHeroMode isHomeHeroMode
? 'border-b border-transparent bg-transparent' ? 'border-b border-white/10 bg-[#102118]/62 shadow-[0_18px_50px_rgba(0,0,0,0.18)] backdrop-blur-xl'
: 'border-b border-[#3E2723]/10 bg-[#fcfaf6]/92 shadow-[0_18px_50px_rgba(35,24,18,0.08)] backdrop-blur-xl' : 'border-b border-[#1F3A2D]/10 bg-[#FBF9F1]/92 shadow-[0_18px_50px_rgba(20,38,29,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"> <div className="mx-auto flex max-w-7xl items-center justify-between gap-4 px-5 py-4 lg:px-8">
@ -109,17 +109,17 @@ export default function MarketingLayout({ children }: Props) {
<div <div
className={`flex h-12 w-12 items-center justify-center rounded-full border text-sm font-semibold shadow-lg transition-colors duration-300 ${ className={`flex h-12 w-12 items-center justify-center rounded-full border text-sm font-semibold shadow-lg transition-colors duration-300 ${
isHomeHeroMode isHomeHeroMode
? 'border-white/25 bg-white/10 text-[#F5E9DA] backdrop-blur-md' ? 'border-white/28 bg-white/12 text-[#F4F1E6] backdrop-blur-md'
: 'border-[#C8A165]/50 bg-[#3E2723] text-[#F5E9DA]' : 'border-[#9FB06F]/50 bg-[#1F3A2D] text-[#F4F1E6]'
}`} }`}
> >
AD AD
</div> </div>
<div> <div>
<p className={`font-brand-display text-lg font-bold transition-colors duration-300 ${isHomeHeroMode ? 'text-[#F5E9DA]' : 'text-[#3E2723]'}`}> <p className={`font-brand-display text-lg font-bold transition-colors duration-300 ${isHomeHeroMode ? 'text-[#F4F1E6]' : 'text-[#1F3A2D]'}`}>
Alem Desta Alem Desta
</p> </p>
<p className={`text-xs uppercase tracking-[0.28em] transition-colors duration-300 ${isHomeHeroMode ? 'text-white/60' : 'text-[#8a6f59]'}`}> <p className={`text-xs uppercase tracking-[0.28em] transition-colors duration-300 ${isHomeHeroMode ? 'text-white/60' : 'text-[#72816F]'}`}>
Coffee Export Coffee Export
</p> </p>
</div> </div>
@ -160,7 +160,7 @@ export default function MarketingLayout({ children }: Props) {
)}`} )}`}
> >
<p className="text-sm font-semibold">{child.label}</p> <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> <p className={`mt-1 text-xs leading-6 ${isHomeHeroMode ? 'text-white/58' : 'text-[#68766A]'}`}>{child.description}</p>
</Link> </Link>
))} ))}
</div> </div>
@ -181,8 +181,8 @@ export default function MarketingLayout({ children }: Props) {
onClick={() => setIsMenuOpen((current) => !current)} onClick={() => setIsMenuOpen((current) => !current)}
className={`inline-flex h-12 w-12 items-center justify-center rounded-full border transition-all duration-300 xl:hidden ${ className={`inline-flex h-12 w-12 items-center justify-center rounded-full border transition-all duration-300 xl:hidden ${
isHomeHeroMode isHomeHeroMode
? 'border-white/20 bg-white/10 text-[#F5E9DA] backdrop-blur-md' ? 'border-white/20 bg-white/10 text-[#F4F1E6] backdrop-blur-md'
: 'border-[#3E2723]/10 bg-white text-[#3E2723]' : 'border-[#1F3A2D]/10 bg-white text-[#1F3A2D]'
}`} }`}
aria-label="Toggle navigation" aria-label="Toggle navigation"
> >
@ -191,9 +191,9 @@ export default function MarketingLayout({ children }: Props) {
</div> </div>
{isMenuOpen ? ( {isMenuOpen ? (
<div className="border-t border-[#3E2723]/10 bg-[#fcfaf6] px-5 py-4 xl:hidden"> <div className="border-t border-[#1F3A2D]/10 bg-[#FBF9F1] 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]"> <div className="mb-4 rounded-2xl border border-[#9FB06F]/30 bg-[#F4F1E6] px-4 py-3 text-sm text-[#5F6C61]">
Currently viewing: <span className="font-semibold text-[#3E2723]">{currentLabel}</span> Currently viewing: <span className="font-semibold text-[#1F3A2D]">{currentLabel}</span>
</div> </div>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
{navigationItems.map((item) => { {navigationItems.map((item) => {
@ -203,7 +203,7 @@ export default function MarketingLayout({ children }: Props) {
key={item.href} key={item.href}
href={item.href} href={item.href}
className={`rounded-2xl px-4 py-3 text-sm font-medium ${ className={`rounded-2xl px-4 py-3 text-sm font-medium ${
isNavItemActive(router.pathname, item) ? 'bg-[#3E2723] text-[#F5E9DA]' : 'bg-white text-[#3E2723]' isNavItemActive(router.pathname, item) ? 'bg-[#1F3A2D] text-[#F4F1E6]' : 'bg-white text-[#1F3A2D]'
}`} }`}
onClick={() => setIsMenuOpen(false)} onClick={() => setIsMenuOpen(false)}
> >
@ -213,12 +213,12 @@ export default function MarketingLayout({ children }: Props) {
} }
return ( return (
<div key={item.href} className="overflow-hidden rounded-[1.5rem] border border-[#3E2723]/10 bg-white"> <div key={item.href} className="overflow-hidden rounded-[1.5rem] border border-[#1F3A2D]/10 bg-white">
<div className="flex items-center"> <div className="flex items-center">
<Link <Link
href={item.href} href={item.href}
className={`flex-1 px-4 py-3 text-sm font-medium ${ className={`flex-1 px-4 py-3 text-sm font-medium ${
isNavItemActive(router.pathname, item) ? 'text-[#3E2723]' : 'text-[#4d3c35]' isNavItemActive(router.pathname, item) ? 'text-[#1F3A2D]' : 'text-[#32453A]'
}`} }`}
onClick={() => setIsMenuOpen(false)} onClick={() => setIsMenuOpen(false)}
> >
@ -227,7 +227,7 @@ export default function MarketingLayout({ children }: Props) {
<button <button
type="button" type="button"
onClick={() => setIsExportMenuOpen((current) => !current)} onClick={() => setIsExportMenuOpen((current) => !current)}
className="px-4 py-3 text-[#3E2723]" className="px-4 py-3 text-[#1F3A2D]"
aria-label="Toggle export services submenu" aria-label="Toggle export services submenu"
> >
<BaseIcon <BaseIcon
@ -237,18 +237,18 @@ export default function MarketingLayout({ children }: Props) {
</button> </button>
</div> </div>
{isExportMenuOpen ? ( {isExportMenuOpen ? (
<div className="border-t border-[#3E2723]/10 bg-[#fcfaf6] p-2"> <div className="border-t border-[#1F3A2D]/10 bg-[#FBF9F1] p-2">
{item.children.map((child) => ( {item.children.map((child) => (
<Link <Link
key={child.href} key={child.href}
href={child.href} href={child.href}
className={`block rounded-2xl px-4 py-3 ${ className={`block rounded-2xl px-4 py-3 ${
isActivePath(router.pathname, child.href) ? 'bg-[#3E2723] text-[#F5E9DA]' : 'text-[#3E2723]' isActivePath(router.pathname, child.href) ? 'bg-[#1F3A2D] text-[#F4F1E6]' : 'text-[#1F3A2D]'
}`} }`}
onClick={() => setIsMenuOpen(false)} onClick={() => setIsMenuOpen(false)}
> >
<p className="text-sm font-medium">{child.label}</p> <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]'}`}> <p className={`mt-1 text-xs leading-6 ${isActivePath(router.pathname, child.href) ? 'text-white/70' : 'text-[#68766A]'}`}>
{child.description} {child.description}
</p> </p>
</Link> </Link>
@ -271,11 +271,11 @@ export default function MarketingLayout({ children }: Props) {
<main>{children}</main> <main>{children}</main>
<section className="border-y border-[#3E2723]/10 bg-[#3E2723] px-5 py-16 text-white lg:px-8"> <section className="border-y border-[#1F3A2D]/10 bg-[#1F3A2D] 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="mx-auto flex max-w-7xl flex-col gap-10 lg:flex-row lg:items-center lg:justify-between">
<div className="max-w-3xl"> <div className="max-w-3xl">
<p className="text-sm uppercase tracking-[0.35em] text-[#d7b47a]">Ready to source with confidence?</p> <p className="text-sm uppercase tracking-[0.35em] text-[#B7C78B]">Ready to source with confidence?</p>
<h2 className="font-brand-display mt-4 text-4xl leading-tight text-[#F5E9DA] md:text-5xl"> <h2 className="font-brand-display mt-4 text-4xl leading-tight text-[#F4F1E6] md:text-5xl">
Discover Ethiopian coffee backed by heritage, clear communication, and export discipline. Discover Ethiopian coffee backed by heritage, clear communication, and export discipline.
</h2> </h2>
</div> </div>
@ -288,10 +288,10 @@ export default function MarketingLayout({ children }: Props) {
</div> </div>
</section> </section>
<footer className="bg-[#241816] px-5 py-16 text-white lg:px-8"> <footer className="bg-[#14261D] 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 className="mx-auto grid max-w-7xl gap-10 lg:grid-cols-[1.1fr_0.7fr_0.95fr_1fr]">
<div> <div>
<p className="font-brand-display text-3xl text-[#F5E9DA]">{brand.name}</p> <p className="font-brand-display text-3xl text-[#F4F1E6]">{brand.name}</p>
<p className="mt-4 max-w-xl text-sm leading-7 text-white/72">{brand.tagline}</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"> <div className="mt-8 flex flex-wrap gap-3">
<MarketingButton href="/contact?type=partner_with_us">Partner With Us</MarketingButton> <MarketingButton href="/contact?type=partner_with_us">Partner With Us</MarketingButton>
@ -302,11 +302,11 @@ export default function MarketingLayout({ children }: Props) {
</div> </div>
<div> <div>
<p className="text-sm font-semibold uppercase tracking-[0.28em] text-[#C8A165]">Main pages</p> <p className="text-sm font-semibold uppercase tracking-[0.28em] text-[#9FB06F]">Main pages</p>
<div className="mt-5 grid gap-3"> <div className="mt-5 grid gap-3">
{navigationItems.map((item) => ( {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"> <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]" /> <BaseIcon path={mdiArrowRight} className="text-[#9FB06F]" />
{item.label} {item.label}
</Link> </Link>
))} ))}
@ -314,11 +314,11 @@ export default function MarketingLayout({ children }: Props) {
</div> </div>
<div> <div>
<p className="text-sm font-semibold uppercase tracking-[0.28em] text-[#C8A165]">Export services</p> <p className="text-sm font-semibold uppercase tracking-[0.28em] text-[#9FB06F]">Export services</p>
<div className="mt-5 grid gap-3"> <div className="mt-5 grid gap-3">
{exportServiceItems.map((item) => ( {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"> <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]" /> <BaseIcon path={mdiArrowRight} className="text-[#9FB06F]" />
{item.label} {item.label}
</Link> </Link>
))} ))}
@ -333,7 +333,7 @@ export default function MarketingLayout({ children }: Props) {
</div> </div>
<div> <div>
<p className="text-sm font-semibold uppercase tracking-[0.28em] text-[#C8A165]">Newsletter subscription</p> <p className="text-sm font-semibold uppercase tracking-[0.28em] text-[#9FB06F]">Newsletter subscription</p>
<p className="mt-4 text-sm leading-7 text-white/72"> <p className="mt-4 text-sm leading-7 text-white/72">
Receive market-ready updates, sourcing availability, and company news tailored for international buyers. Receive market-ready updates, sourcing availability, and company news tailored for international buyers.
</p> </p>

13
frontend/src/components/marketing/MarketingPageHero.tsx
View File

@ -10,15 +10,16 @@ type Props = {
export default function MarketingPageHero({ eyebrow, title, description, image }: Props) { export default function MarketingPageHero({ eyebrow, title, description, image }: Props) {
return ( return (
<section className="px-5 pb-8 pt-12 lg:px-8 lg:pb-12 lg:pt-16"> <section className="px-5 pb-8 pt-12 lg:px-8 lg:pb-12 lg:pt-16">
<div className="mx-auto grid max-w-7xl gap-8 overflow-hidden rounded-[2rem] bg-[#F5E9DA] p-6 shadow-[0_28px_90px_rgba(62,39,35,0.08)] lg:grid-cols-[1.05fr_0.95fr] lg:p-10"> <div className="mx-auto grid max-w-7xl gap-8 overflow-hidden rounded-[2rem] bg-[#F4F1E6] p-6 shadow-[0_28px_90px_rgba(31,58,45,0.08)] lg:grid-cols-[1.05fr_0.95fr] lg:p-10">
<div className="flex flex-col justify-center"> <div className="flex flex-col justify-center">
<p className="text-sm font-semibold uppercase tracking-[0.35em] text-[#C8A165]">{eyebrow}</p> <p className="text-sm font-semibold uppercase tracking-[0.35em] text-[#9FB06F]">{eyebrow}</p>
<h1 className="font-brand-display mt-4 text-4xl leading-tight text-[#3E2723] md:text-6xl">{title}</h1> <h1 className="font-brand-display mt-4 text-4xl leading-tight text-[#1F3A2D] md:text-6xl">{title}</h1>
<p className="mt-6 max-w-2xl text-base leading-8 text-[#5B4A43]">{description}</p> <p className="mt-6 max-w-2xl text-base leading-8 text-[#556257]">{description}</p>
</div> </div>
<div className="relative min-h-[320px] overflow-hidden rounded-[1.75rem]"> <div className="relative min-h-[320px] overflow-hidden rounded-[1.75rem]">
<img className="absolute inset-0 h-full w-full object-cover" loading="eager" src={image} alt={title} /> <img className="absolute inset-0 h-full w-full object-cover saturate-[0.88]" loading="eager" src={image} alt={title} />
<div className="absolute inset-0 bg-gradient-to-t from-[#2c1f1b]/50 via-transparent to-transparent" /> <div className="absolute inset-0 bg-[linear-gradient(160deg,rgba(16,33,24,0.08),rgba(36,63,48,0.22),rgba(16,33,24,0.42))]" />
<div className="absolute inset-0 bg-gradient-to-t from-[#102118]/54 via-transparent to-transparent" />
</div> </div>
</div> </div>
</section> </section>

6
frontend/src/components/marketing/MarketingSection.tsx
View File

@ -21,9 +21,9 @@ export default function MarketingSection({
<section className={`px-5 py-16 lg:px-8 lg:py-24 ${className}`}> <section className={`px-5 py-16 lg:px-8 lg:py-24 ${className}`}>
<div className="mx-auto max-w-7xl"> <div className="mx-auto max-w-7xl">
<div className={centered ? 'mx-auto max-w-3xl text-center' : 'max-w-3xl'}> <div className={centered ? 'mx-auto max-w-3xl text-center' : 'max-w-3xl'}>
{eyebrow ? <p className="text-sm font-semibold uppercase tracking-[0.35em] text-[#C8A165]">{eyebrow}</p> : null} {eyebrow ? <p className="text-sm font-semibold uppercase tracking-[0.35em] text-[#9FB06F]">{eyebrow}</p> : null}
<h2 className="font-brand-display mt-4 text-4xl leading-tight text-[#3E2723] md:text-5xl">{title}</h2> <h2 className="font-brand-display mt-4 text-4xl leading-tight text-[#1F3A2D] md:text-5xl">{title}</h2>
{description ? <p className="mt-5 text-base leading-8 text-[#5B4A43]">{description}</p> : null} {description ? <p className="mt-5 text-base leading-8 text-[#556257]">{description}</p> : null}
</div> </div>
{children ? <div className="mt-12">{children}</div> : null} {children ? <div className="mt-12">{children}</div> : null}
</div> </div>

8
frontend/src/components/marketing/NewsletterForm.tsx
View File

@ -69,14 +69,14 @@ export default function NewsletterForm({ source = 'home_footer', compact = false
{!compact && ( {!compact && (
<div className="grid gap-3 md:grid-cols-2"> <div className="grid gap-3 md:grid-cols-2">
<input <input
className="h-12 rounded-2xl border border-white/15 bg-white/10 px-4 text-sm text-white placeholder:text-white/55 focus:outline-none focus:ring-2 focus:ring-[#C8A165]" className="h-12 rounded-2xl border border-white/15 bg-white/10 px-4 text-sm text-white placeholder:text-white/55 focus:outline-none focus:ring-2 focus:ring-[#9FB06F]"
name="full_name" name="full_name"
placeholder="Name" placeholder="Name"
value={form.full_name} value={form.full_name}
onChange={onChange} onChange={onChange}
/> />
<input <input
className="h-12 rounded-2xl border border-white/15 bg-white/10 px-4 text-sm text-white placeholder:text-white/55 focus:outline-none focus:ring-2 focus:ring-[#C8A165]" className="h-12 rounded-2xl border border-white/15 bg-white/10 px-4 text-sm text-white placeholder:text-white/55 focus:outline-none focus:ring-2 focus:ring-[#9FB06F]"
name="company_name" name="company_name"
placeholder="Company" placeholder="Company"
value={form.company_name} value={form.company_name}
@ -86,7 +86,7 @@ export default function NewsletterForm({ source = 'home_footer', compact = false
)} )}
<div className={`grid gap-3 ${compact ? 'md:grid-cols-[minmax(0,1fr)_auto]' : 'md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]'}`}> <div className={`grid gap-3 ${compact ? 'md:grid-cols-[minmax(0,1fr)_auto]' : 'md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]'}`}>
<input <input
className="h-12 rounded-2xl border border-white/15 bg-white/10 px-4 text-sm text-white placeholder:text-white/55 focus:outline-none focus:ring-2 focus:ring-[#C8A165]" className="h-12 rounded-2xl border border-white/15 bg-white/10 px-4 text-sm text-white placeholder:text-white/55 focus:outline-none focus:ring-2 focus:ring-[#9FB06F]"
name="email" name="email"
placeholder="Email address" placeholder="Email address"
type="email" type="email"
@ -99,7 +99,7 @@ export default function NewsletterForm({ source = 'home_footer', compact = false
</MarketingButton> </MarketingButton>
) : ( ) : (
<input <input
className="h-12 rounded-2xl border border-white/15 bg-white/10 px-4 text-sm text-white placeholder:text-white/55 focus:outline-none focus:ring-2 focus:ring-[#C8A165]" className="h-12 rounded-2xl border border-white/15 bg-white/10 px-4 text-sm text-white placeholder:text-white/55 focus:outline-none focus:ring-2 focus:ring-[#9FB06F]"
name="country" name="country"
placeholder="Country" placeholder="Country"
value={form.country} value={form.country}

18
frontend/src/components/marketing/marketingData.ts
View File

@ -1,6 +1,6 @@
export const brand = { export const brand = {
name: 'Alem Desta Coffee Export', name: 'Alem Desta Coffee Export',
tagline: 'Exported with heritage, tradition, integrity, and pride.', tagline: 'Premium Ethiopian green coffee sourced with heritage, integrity, and export discipline.',
email: 'info@alemdesta.com', email: 'info@alemdesta.com',
phones: ['+251 930105914', '+251 904186868'], phones: ['+251 930105914', '+251 904186868'],
address: 'Kirkos Sub-city, Wereda 01, Addis Ababa, Ethiopia', address: 'Kirkos Sub-city, Wereda 01, Addis Ababa, Ethiopia',
@ -61,26 +61,26 @@ export const featureHighlights = [
export const galleryItems = [ export const galleryItems = [
{ {
title: 'Highland farms', title: 'Green coffee landscapes',
caption: 'Elevated terroir and patient cultivation shape distinctive cup character.', caption: 'Highland farms and careful cultivation create the foundation for exceptional green coffee lots.',
image: image:
'https://images.unsplash.com/photo-1447933601403-0c6688de566e?auto=format&fit=crop&w=1200&q=80', 'https://images.unsplash.com/photo-1447933601403-0c6688de566e?auto=format&fit=crop&w=1200&q=80',
}, },
{ {
title: 'Processing stations', title: 'Washing station discipline',
caption: 'Washed, natural, and honey processes are managed with discipline and care.', caption: 'Lot separation, drying control, and station handling protect specialty green coffee quality before export.',
image: image:
'https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?auto=format&fit=crop&w=1200&q=80', 'https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?auto=format&fit=crop&w=1200&q=80',
}, },
{ {
title: 'Cupping sessions', title: 'Lot evaluation',
caption: 'Sensory evaluation supports lot selection, consistency, and buyer confidence.', caption: 'Cupping, moisture review, and sample assessment help buyers select green coffee with confidence.',
image: image:
'https://images.unsplash.com/photo-1511920170033-f8396924c348?auto=format&fit=crop&w=1200&q=80', 'https://images.unsplash.com/photo-1511920170033-f8396924c348?auto=format&fit=crop&w=1200&q=80',
}, },
{ {
title: 'Export logistics', title: 'Export-ready preparation',
caption: 'A disciplined export chain moves coffee from Addis Ababa to Djibouti and global markets.', caption: 'Packaging, documentation, and shipment coordination move export-ready green coffee toward global buyers.',
image: image:
'https://images.unsplash.com/photo-1520607162513-77705c0f0d4a?auto=format&fit=crop&w=1200&q=80', 'https://images.unsplash.com/photo-1520607162513-77705c0f0d4a?auto=format&fit=crop&w=1200&q=80',
}, },

18
frontend/src/css/main.css
View File

@ -67,9 +67,9 @@ font-family: 'Ubuntu', sans-serif !important;
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700;800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700;800&display=swap');
:root { :root {
--coffee-brown: #3E2723; --coffee-brown: #1F3A2D;
--coffee-beige: #F5E9DA; --coffee-beige: #F4F1E6;
--coffee-gold: #C8A165; --coffee-gold: #9FB06F;
} }
html { html {
@ -88,23 +88,23 @@ html {
width: 100%; width: 100%;
height: 3.25rem; height: 3.25rem;
border-radius: 1rem; border-radius: 1rem;
border: 1px solid rgba(62, 39, 35, 0.12); border: 1px solid rgba(31, 58, 45, 0.14);
background: #fffdf9; background: #F8FAF4;
padding: 0 1rem; padding: 0 1rem;
font-size: 0.95rem; font-size: 0.95rem;
color: #2c221f; color: #22332B;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
} }
.coffee-input:focus { .coffee-input:focus {
outline: none; outline: none;
border-color: rgba(200, 161, 101, 0.8); border-color: rgba(159, 176, 111, 0.82);
box-shadow: 0 0 0 3px rgba(200, 161, 101, 0.16); box-shadow: 0 0 0 3px rgba(159, 176, 111, 0.18);
background: #ffffff; background: #ffffff;
} }
.coffee-input::placeholder { .coffee-input::placeholder {
color: #9a8578; color: #869488;
} }
@keyframes coffeeFadeIn { @keyframes coffeeFadeIn {

8
frontend/src/pages/about.tsx
View File

@ -29,8 +29,8 @@ export default function AboutPage() {
description="The company story is personal, emotional, and practical — exactly the mix international buyers often trust most when choosing who to work with." description="The company story is personal, emotional, and practical — exactly the mix international buyers often trust most when choosing who to work with."
> >
<div className="grid gap-6 lg:grid-cols-[0.8fr_1.2fr]"> <div className="grid gap-6 lg:grid-cols-[0.8fr_1.2fr]">
<div className="rounded-[2rem] bg-[#3E2723] p-8 text-white shadow-[0_24px_80px_rgba(35,24,18,0.14)]"> <div className="rounded-[2rem] bg-[#1F3A2D] p-8 text-white shadow-[0_24px_80px_rgba(20,38,29,0.14)]">
<p className="text-sm uppercase tracking-[0.32em] text-[#d8bb8a]">What shapes the company</p> <p className="text-sm uppercase tracking-[0.32em] text-[#B7C78B]">What shapes the company</p>
<ul className="mt-6 space-y-4 text-sm leading-7 text-white/78"> <ul className="mt-6 space-y-4 text-sm leading-7 text-white/78">
<li>• Ethiopian coffee culture upbringing</li> <li>• Ethiopian coffee culture upbringing</li>
<li>• Family coffee tradition</li> <li>• Family coffee tradition</li>
@ -41,8 +41,8 @@ export default function AboutPage() {
</div> </div>
<div className="space-y-6"> <div className="space-y-6">
{founderStory.map((paragraph) => ( {founderStory.map((paragraph) => (
<div key={paragraph} className="rounded-[1.75rem] border border-[#3E2723]/8 bg-white p-7 shadow-[0_18px_60px_rgba(35,24,18,0.06)]"> <div key={paragraph} className="rounded-[1.75rem] border border-[#1F3A2D]/8 bg-white p-7 shadow-[0_18px_60px_rgba(20,38,29,0.06)]">
<p className="text-base leading-8 text-[#5B4A43]">{paragraph}</p> <p className="text-base leading-8 text-[#556257]">{paragraph}</p>
</div> </div>
))} ))}
</div> </div>

15
frontend/src/pages/coffee-origins.tsx
View File

@ -30,13 +30,16 @@ export default function CoffeeOriginsPage() {
> >
<div className="grid gap-6 lg:grid-cols-2 xl:grid-cols-3"> <div className="grid gap-6 lg:grid-cols-2 xl:grid-cols-3">
{origins.map((item) => ( {origins.map((item) => (
<article key={item.name} className="overflow-hidden rounded-[2rem] bg-white shadow-[0_24px_70px_rgba(35,24,18,0.08)]"> <article key={item.name} className="overflow-hidden rounded-[2rem] bg-white shadow-[0_24px_70px_rgba(20,38,29,0.08)]">
<img className="h-64 w-full object-cover" loading="lazy" src={item.image} alt={item.name} /> <div className="relative">
<img className="h-64 w-full object-cover saturate-[0.9]" loading="lazy" src={item.image} alt={item.name} />
<div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(18,38,29,0.05),rgba(18,38,29,0),rgba(18,38,29,0.25))]" />
</div>
<div className="p-6"> <div className="p-6">
<p className="text-sm uppercase tracking-[0.28em] text-[#C8A165]">{item.altitude}</p> <p className="text-sm uppercase tracking-[0.28em] text-[#9FB06F]">{item.altitude}</p>
<h2 className="font-brand-display mt-3 text-3xl text-[#3E2723]">{item.name}</h2> <h2 className="font-brand-display mt-3 text-3xl text-[#1F3A2D]">{item.name}</h2>
<p className="mt-4 text-sm leading-7 text-[#5B4A43]">{item.profile}</p> <p className="mt-4 text-sm leading-7 text-[#556257]">{item.profile}</p>
<div className="mt-5 rounded-2xl bg-[#F5E9DA] px-4 py-3 text-sm text-[#5B4A43]">Rainfall: {item.rainfall}</div> <div className="mt-5 rounded-2xl bg-[#F4F1E6] px-4 py-3 text-sm text-[#556257]">Rainfall: {item.rainfall}</div>
</div> </div>
</article> </article>
))} ))}

8
frontend/src/pages/coffee-philosophy.tsx
View File

@ -35,12 +35,12 @@ export default function CoffeePhilosophyPage() {
> >
<div className="grid gap-6 md:grid-cols-2 xl:grid-cols-4"> <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-4">
{philosophyPillars.map((item, index) => ( {philosophyPillars.map((item, index) => (
<div key={item.title} className="rounded-[1.75rem] border border-[#3E2723]/8 bg-white p-7 shadow-[0_20px_65px_rgba(35,24,18,0.06)]"> <div key={item.title} className="rounded-[1.75rem] border border-[#1F3A2D]/8 bg-white p-7 shadow-[0_20px_65px_rgba(20,38,29,0.06)]">
<div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[#F5E9DA] text-[#3E2723]"> <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[#F4F1E6] text-[#1F3A2D]">
<BaseIcon path={icons[index]} /> <BaseIcon path={icons[index]} />
</div> </div>
<h3 className="font-brand-display mt-5 text-2xl text-[#3E2723]">{item.title}</h3> <h3 className="font-brand-display mt-5 text-2xl text-[#1F3A2D]">{item.title}</h3>
<p className="mt-4 text-sm leading-7 text-[#5B4A43]">{item.description}</p> <p className="mt-4 text-sm leading-7 text-[#556257]">{item.description}</p>
</div> </div>
))} ))}
</div> </div>

24
frontend/src/pages/contact.tsx
View File

@ -51,36 +51,36 @@ export default function ContactPage() {
</div> </div>
<div className="mt-10 grid gap-8 lg:grid-cols-[0.75fr_1.25fr]"> <div className="mt-10 grid gap-8 lg:grid-cols-[0.75fr_1.25fr]">
<div className="space-y-5"> <div className="space-y-5">
<div className="rounded-[1.75rem] border border-[#3E2723]/8 bg-white p-6 shadow-[0_20px_65px_rgba(35,24,18,0.06)]"> <div className="rounded-[1.75rem] border border-[#1F3A2D]/8 bg-white p-6 shadow-[0_20px_65px_rgba(20,38,29,0.06)]">
<div className="flex items-start gap-4"> <div className="flex items-start gap-4">
<div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[#F5E9DA] text-[#3E2723]"> <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[#F4F1E6] text-[#1F3A2D]">
<BaseIcon path={mdiMapMarkerOutline} /> <BaseIcon path={mdiMapMarkerOutline} />
</div> </div>
<div> <div>
<p className="text-sm font-semibold uppercase tracking-[0.28em] text-[#C8A165]">Location</p> <p className="text-sm font-semibold uppercase tracking-[0.28em] text-[#9FB06F]">Location</p>
<p className="mt-3 text-sm leading-7 text-[#5B4A43]">{brand.address}</p> <p className="mt-3 text-sm leading-7 text-[#556257]">{brand.address}</p>
</div> </div>
</div> </div>
</div> </div>
<div className="rounded-[1.75rem] border border-[#3E2723]/8 bg-white p-6 shadow-[0_20px_65px_rgba(35,24,18,0.06)]"> <div className="rounded-[1.75rem] border border-[#1F3A2D]/8 bg-white p-6 shadow-[0_20px_65px_rgba(20,38,29,0.06)]">
<div className="flex items-start gap-4"> <div className="flex items-start gap-4">
<div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[#F5E9DA] text-[#3E2723]"> <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[#F4F1E6] text-[#1F3A2D]">
<BaseIcon path={mdiEmailOutline} /> <BaseIcon path={mdiEmailOutline} />
</div> </div>
<div> <div>
<p className="text-sm font-semibold uppercase tracking-[0.28em] text-[#C8A165]">Email</p> <p className="text-sm font-semibold uppercase tracking-[0.28em] text-[#9FB06F]">Email</p>
<p className="mt-3 text-sm leading-7 text-[#5B4A43]">{brand.email}</p> <p className="mt-3 text-sm leading-7 text-[#556257]">{brand.email}</p>
</div> </div>
</div> </div>
</div> </div>
<div className="rounded-[1.75rem] border border-[#3E2723]/8 bg-white p-6 shadow-[0_20px_65px_rgba(35,24,18,0.06)]"> <div className="rounded-[1.75rem] border border-[#1F3A2D]/8 bg-white p-6 shadow-[0_20px_65px_rgba(20,38,29,0.06)]">
<div className="flex items-start gap-4"> <div className="flex items-start gap-4">
<div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[#F5E9DA] text-[#3E2723]"> <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[#F4F1E6] text-[#1F3A2D]">
<BaseIcon path={mdiPhoneOutline} /> <BaseIcon path={mdiPhoneOutline} />
</div> </div>
<div> <div>
<p className="text-sm font-semibold uppercase tracking-[0.28em] text-[#C8A165]">Phone</p> <p className="text-sm font-semibold uppercase tracking-[0.28em] text-[#9FB06F]">Phone</p>
<div className="mt-3 space-y-1 text-sm leading-7 text-[#5B4A43]"> <div className="mt-3 space-y-1 text-sm leading-7 text-[#556257]">
{brand.phones.map((phone) => ( {brand.phones.map((phone) => (
<p key={phone}>{phone}</p> <p key={phone}>{phone}</p>
))} ))}

18
frontend/src/pages/export-services.tsx
View File

@ -65,13 +65,13 @@ export default function ExportServicesPage() {
{exportServiceItems.map((item) => ( {exportServiceItems.map((item) => (
<article <article
key={item.href} key={item.href}
className="rounded-[2rem] border border-[#3E2723]/8 bg-white p-7 shadow-[0_20px_65px_rgba(35,24,18,0.06)]" className="rounded-[2rem] border border-[#1F3A2D]/8 bg-white p-7 shadow-[0_20px_65px_rgba(20,38,29,0.06)]"
> >
<div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-[#F5E9DA] text-[#3E2723]"> <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-[#F4F1E6] text-[#1F3A2D]">
<BaseIcon path={iconByHref[item.href as keyof typeof iconByHref]} /> <BaseIcon path={iconByHref[item.href as keyof typeof iconByHref]} />
</div> </div>
<h2 className="font-brand-display mt-6 text-3xl text-[#3E2723]">{item.label}</h2> <h2 className="font-brand-display mt-6 text-3xl text-[#1F3A2D]">{item.label}</h2>
<p className="mt-4 text-sm leading-7 text-[#5B4A43]">{item.description}</p> <p className="mt-4 text-sm leading-7 text-[#556257]">{item.description}</p>
<div className="mt-6"> <div className="mt-6">
<MarketingButton href={item.href} variant="ghost"> <MarketingButton href={item.href} variant="ghost">
View details View details
@ -86,19 +86,19 @@ export default function ExportServicesPage() {
eyebrow="Buyer workflow" eyebrow="Buyer workflow"
title="How the export relationship is structured" title="How the export relationship is structured"
description="International buyers need more than storytelling. They need a process that feels organized, transparent, and commercially dependable." description="International buyers need more than storytelling. They need a process that feels organized, transparent, and commercially dependable."
className="bg-[#fffdf9]" className="bg-[#F8FAF4]"
> >
<div className="grid gap-6 lg:grid-cols-3"> <div className="grid gap-6 lg:grid-cols-3">
{workflowSteps.map((step, index) => ( {workflowSteps.map((step, index) => (
<div <div
key={step.title} key={step.title}
className="rounded-[1.75rem] border border-[#3E2723]/8 bg-white p-7 shadow-[0_18px_55px_rgba(35,24,18,0.05)]" className="rounded-[1.75rem] border border-[#1F3A2D]/8 bg-white p-7 shadow-[0_18px_55px_rgba(20,38,29,0.05)]"
> >
<div className="flex h-11 w-11 items-center justify-center rounded-full bg-[#3E2723] text-sm font-semibold text-[#F5E9DA]"> <div className="flex h-11 w-11 items-center justify-center rounded-full bg-[#1F3A2D] text-sm font-semibold text-[#F4F1E6]">
{index + 1} {index + 1}
</div> </div>
<h3 className="font-brand-display mt-6 text-2xl text-[#3E2723]">{step.title}</h3> <h3 className="font-brand-display mt-6 text-2xl text-[#1F3A2D]">{step.title}</h3>
<p className="mt-4 text-sm leading-7 text-[#5B4A43]">{step.description}</p> <p className="mt-4 text-sm leading-7 text-[#556257]">{step.description}</p>
</div> </div>
))} ))}
</div> </div>

72
frontend/src/pages/index.tsx
View File

@ -61,21 +61,21 @@ export default function HomePage() {
description="Premium Ethiopian coffee exporter connecting origin, traceability, and global buyer confidence with elegant, professional service." description="Premium Ethiopian coffee exporter connecting origin, traceability, and global buyer confidence with elegant, professional service."
/> />
<MarketingLayout> <MarketingLayout>
<section className="relative -mt-[88px] overflow-hidden bg-[#231815] px-5 pb-16 pt-36 text-white lg:px-8 lg:pb-24 lg:pt-44"> <section className="relative -mt-[88px] overflow-hidden bg-[#16271F] px-5 pb-16 pt-36 text-white lg:px-8 lg:pb-24 lg:pt-44">
<div className="absolute inset-0"> <div className="absolute inset-0">
<img <img
className="h-full w-full object-cover opacity-25" className="h-full w-full scale-[1.02] object-cover opacity-32 saturate-[0.82]"
loading="eager" loading="eager"
src="https://images.unsplash.com/photo-1447933601403-0c6688de566e?auto=format&fit=crop&w=1600&q=80" src="https://images.unsplash.com/photo-1447933601403-0c6688de566e?auto=format&fit=crop&w=1600&q=80"
alt="Ethiopian coffee farm" alt="Ethiopian coffee farm"
/> />
<div className="absolute inset-0 bg-[linear-gradient(135deg,rgba(24,15,13,0.88),rgba(62,39,35,0.72),rgba(24,15,13,0.9))]" /> <div className="absolute inset-0 bg-[linear-gradient(135deg,rgba(18,38,29,0.88),rgba(31,58,45,0.72),rgba(18,38,29,0.9))]" />
</div> </div>
<div className="coffee-fade-in relative mx-auto grid max-w-7xl gap-10 lg:grid-cols-[1.05fr_0.95fr] lg:items-end"> <div className="coffee-fade-in relative mx-auto grid max-w-7xl gap-10 lg:grid-cols-[1.05fr_0.95fr] lg:items-end">
<div> <div>
<p className="text-sm font-semibold uppercase tracking-[0.38em] text-[#d8bb8a]">Luxury Ethiopian coffee export</p> <p className="text-sm font-semibold uppercase tracking-[0.38em] text-[#B7C78B]">Specialty green coffee export</p>
<h1 className="font-brand-display mt-6 max-w-4xl text-5xl leading-[1.05] text-[#F5E9DA] md:text-7xl"> <h1 className="font-brand-display mt-6 max-w-4xl text-5xl leading-[1.05] text-[#F4F1E6] md:text-7xl">
Ethiopian Premium Coffee – Sourced with Experience, Exported with Integrity Ethiopian Premium Coffee – Sourced with Experience, Exported with Integrity
</h1> </h1>
<p className="mt-6 max-w-3xl text-lg leading-8 text-white/78"> <p className="mt-6 max-w-3xl text-lg leading-8 text-white/78">
@ -83,7 +83,7 @@ export default function HomePage() {
</p> </p>
<p className="mt-6 max-w-3xl text-base leading-8 text-white/72"> <p className="mt-6 max-w-3xl text-base leading-8 text-white/72">
{brand.name} bridges Ethiopian premium coffee producers with global buyers, focusing on traceability, {brand.name} bridges Ethiopian premium coffee producers with global buyers, focusing on traceability,
single-origin sourcing, and uncompromising quality. single-origin green coffee sourcing, export-ready preparation, and uncompromising quality.
</p> </p>
<div className="mt-10 flex flex-col gap-4 sm:flex-row"> <div className="mt-10 flex flex-col gap-4 sm:flex-row">
<MarketingButton href="/contact?type=request_samples">Request Samples</MarketingButton> <MarketingButton href="/contact?type=request_samples">Request Samples</MarketingButton>
@ -94,7 +94,7 @@ export default function HomePage() {
</div> </div>
<div className="rounded-[2rem] border border-white/10 bg-white/10 p-6 backdrop-blur-md shadow-[0_30px_80px_rgba(0,0,0,0.25)] md:p-8"> <div className="rounded-[2rem] border border-white/10 bg-white/10 p-6 backdrop-blur-md shadow-[0_30px_80px_rgba(0,0,0,0.25)] md:p-8">
<p className="text-sm font-semibold uppercase tracking-[0.28em] text-[#d8bb8a]">Why buyers trust us</p> <p className="text-sm font-semibold uppercase tracking-[0.28em] text-[#B7C78B]">Why buyers trust us</p>
<div className="mt-8 space-y-5"> <div className="mt-8 space-y-5">
{statItems.map((item) => ( {statItems.map((item) => (
<div key={item.label} className="border-b border-white/10 pb-5 last:border-b-0 last:pb-0"> <div key={item.label} className="border-b border-white/10 pb-5 last:border-b-0 last:pb-0">
@ -114,12 +114,12 @@ export default function HomePage() {
> >
<div className="grid gap-6 md:grid-cols-2 xl:grid-cols-4"> <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-4">
{trustPillars.map((item) => ( {trustPillars.map((item) => (
<div key={item.title} className="rounded-[1.75rem] border border-[#3E2723]/8 bg-white p-6 shadow-[0_20px_65px_rgba(35,24,18,0.06)]"> <div key={item.title} className="rounded-[1.75rem] border border-[#1F3A2D]/8 bg-white p-6 shadow-[0_20px_65px_rgba(20,38,29,0.06)]">
<div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[#F5E9DA] text-[#3E2723]"> <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[#F4F1E6] text-[#1F3A2D]">
<BaseIcon path={item.icon} /> <BaseIcon path={item.icon} />
</div> </div>
<h3 className="font-brand-display mt-5 text-2xl text-[#3E2723]">{item.title}</h3> <h3 className="font-brand-display mt-5 text-2xl text-[#1F3A2D]">{item.title}</h3>
<p className="mt-3 text-sm leading-7 text-[#5B4A43]">{item.description}</p> <p className="mt-3 text-sm leading-7 text-[#556257]">{item.description}</p>
</div> </div>
))} ))}
</div> </div>
@ -130,13 +130,13 @@ export default function HomePage() {
title="Built around traceability, premium handling, and long-term export partnerships" title="Built around traceability, premium handling, and long-term export partnerships"
description="Each highlight below mirrors the core buying questions of roasters, green coffee importers, and wholesale partners evaluating a supplier relationship." description="Each highlight below mirrors the core buying questions of roasters, green coffee importers, and wholesale partners evaluating a supplier relationship."
centered centered
className="bg-[#fffdf9]" className="bg-[#F8FAF4]"
> >
<div className="grid gap-6 lg:grid-cols-2 xl:grid-cols-4"> <div className="grid gap-6 lg:grid-cols-2 xl:grid-cols-4">
{featureHighlights.map((item) => ( {featureHighlights.map((item) => (
<div key={item.title} className="rounded-[1.75rem] border border-[#3E2723]/8 bg-white p-7 shadow-[0_20px_70px_rgba(35,24,18,0.07)]"> <div key={item.title} className="rounded-[1.75rem] border border-[#1F3A2D]/8 bg-white p-7 shadow-[0_20px_70px_rgba(20,38,29,0.07)]">
<h3 className="font-brand-display text-2xl text-[#3E2723]">{item.title}</h3> <h3 className="font-brand-display text-2xl text-[#1F3A2D]">{item.title}</h3>
<p className="mt-4 text-sm leading-7 text-[#5B4A43]">{item.description}</p> <p className="mt-4 text-sm leading-7 text-[#556257]">{item.description}</p>
</div> </div>
))} ))}
</div> </div>
@ -149,18 +149,19 @@ export default function HomePage() {
> >
<div className="grid gap-6 md:grid-cols-2"> <div className="grid gap-6 md:grid-cols-2">
{galleryItems.map((item) => ( {galleryItems.map((item) => (
<article key={item.title} className="group overflow-hidden rounded-[2rem] bg-white shadow-[0_24px_70px_rgba(35,24,18,0.08)]"> <article key={item.title} className="group overflow-hidden rounded-[2rem] bg-white shadow-[0_24px_70px_rgba(20,38,29,0.08)]">
<div className="relative h-72 overflow-hidden"> <div className="relative h-72 overflow-hidden">
<img <img
className="h-full w-full object-cover transition duration-700 group-hover:scale-105" className="h-full w-full object-cover saturate-[0.88] transition duration-700 group-hover:scale-105"
loading="lazy" loading="lazy"
src={item.image} src={item.image}
alt={item.title} alt={item.title}
/> />
<div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(18,38,29,0.08),rgba(18,38,29,0),rgba(18,38,29,0.28))]" />
</div> </div>
<div className="p-6"> <div className="p-6">
<h3 className="font-brand-display text-2xl text-[#3E2723]">{item.title}</h3> <h3 className="font-brand-display text-2xl text-[#1F3A2D]">{item.title}</h3>
<p className="mt-3 text-sm leading-7 text-[#5B4A43]">{item.caption}</p> <p className="mt-3 text-sm leading-7 text-[#556257]">{item.caption}</p>
</div> </div>
</article> </article>
))} ))}
@ -171,16 +172,19 @@ export default function HomePage() {
eyebrow="Origin snapshots" eyebrow="Origin snapshots"
title="Distinctive Ethiopian regions, each with its own flavor narrative" title="Distinctive Ethiopian regions, each with its own flavor narrative"
description="A quick regional preview gives buyers a sense of sourcing depth before they request samples or a tailored quote." description="A quick regional preview gives buyers a sense of sourcing depth before they request samples or a tailored quote."
className="bg-[#F5E9DA]/45" className="bg-[#F4F1E6]/45"
> >
<div className="grid gap-6 lg:grid-cols-3"> <div className="grid gap-6 lg:grid-cols-3">
{origins.slice(0, 3).map((item) => ( {origins.slice(0, 3).map((item) => (
<div key={item.name} className="overflow-hidden rounded-[2rem] bg-white shadow-[0_24px_70px_rgba(35,24,18,0.08)]"> <div key={item.name} className="overflow-hidden rounded-[2rem] bg-white shadow-[0_24px_70px_rgba(20,38,29,0.08)]">
<img className="h-56 w-full object-cover" loading="lazy" src={item.image} alt={item.name} /> <div className="relative">
<img className="h-56 w-full object-cover saturate-[0.9]" loading="lazy" src={item.image} alt={item.name} />
<div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(18,38,29,0.05),rgba(18,38,29,0),rgba(18,38,29,0.24))]" />
</div>
<div className="p-6"> <div className="p-6">
<p className="text-sm uppercase tracking-[0.28em] text-[#C8A165]">{item.altitude}</p> <p className="text-sm uppercase tracking-[0.28em] text-[#9FB06F]">{item.altitude}</p>
<h3 className="font-brand-display mt-3 text-2xl text-[#3E2723]">{item.name}</h3> <h3 className="font-brand-display mt-3 text-2xl text-[#1F3A2D]">{item.name}</h3>
<p className="mt-3 text-sm leading-7 text-[#5B4A43]">{item.profile}</p> <p className="mt-3 text-sm leading-7 text-[#556257]">{item.profile}</p>
</div> </div>
</div> </div>
))} ))}
@ -199,11 +203,11 @@ export default function HomePage() {
> >
<div className="grid gap-4 md:grid-cols-2"> <div className="grid gap-4 md:grid-cols-2">
{exportServices.slice(0, 4).map((item) => ( {exportServices.slice(0, 4).map((item) => (
<div key={item} className="flex gap-4 rounded-[1.5rem] border border-[#3E2723]/8 bg-white p-5 shadow-[0_18px_60px_rgba(35,24,18,0.06)]"> <div key={item} className="flex gap-4 rounded-[1.5rem] border border-[#1F3A2D]/8 bg-white p-5 shadow-[0_18px_60px_rgba(20,38,29,0.06)]">
<div className="mt-1 text-[#C8A165]"> <div className="mt-1 text-[#9FB06F]">
<BaseIcon path={mdiEarth} /> <BaseIcon path={mdiEarth} />
</div> </div>
<p className="text-sm leading-7 text-[#5B4A43]">{item}</p> <p className="text-sm leading-7 text-[#556257]">{item}</p>
</div> </div>
))} ))}
</div> </div>
@ -214,13 +218,13 @@ export default function HomePage() {
title="Commercial credibility, with room to grow into buyer proof" title="Commercial credibility, with room to grow into buyer proof"
description="These premium placeholders establish the intended testimonial zone so future buyer feedback can be added without redesigning the site." description="These premium placeholders establish the intended testimonial zone so future buyer feedback can be added without redesigning the site."
centered centered
className="bg-[#fffdf9]" className="bg-[#F8FAF4]"
> >
<div className="grid gap-6 lg:grid-cols-2"> <div className="grid gap-6 lg:grid-cols-2">
{testimonials.map((item) => ( {testimonials.map((item) => (
<blockquote key={item.author} className="rounded-[1.75rem] border border-[#3E2723]/8 bg-white p-7 shadow-[0_18px_60px_rgba(35,24,18,0.06)]"> <blockquote key={item.author} className="rounded-[1.75rem] border border-[#1F3A2D]/8 bg-white p-7 shadow-[0_18px_60px_rgba(20,38,29,0.06)]">
<p className="font-brand-display text-2xl leading-10 text-[#3E2723]">“{item.quote}”</p> <p className="font-brand-display text-2xl leading-10 text-[#1F3A2D]">“{item.quote}”</p>
<footer className="mt-6 text-sm font-medium uppercase tracking-[0.24em] text-[#8a6f59]">{item.author}</footer> <footer className="mt-6 text-sm font-medium uppercase tracking-[0.24em] text-[#72816F]">{item.author}</footer>
</blockquote> </blockquote>
))} ))}
</div> </div>
@ -230,11 +234,11 @@ export default function HomePage() {
eyebrow="Stay informed" eyebrow="Stay informed"
title="Subscribe for sourcing updates" title="Subscribe for sourcing updates"
description="Newsletter sign-up is already connected to the admin subscriber list, giving your team a real conversion path from day one." description="Newsletter sign-up is already connected to the admin subscriber list, giving your team a real conversion path from day one."
className="bg-[#3E2723] text-white" className="bg-[#1F3A2D] text-white"
> >
<div className="grid gap-10 lg:grid-cols-[1fr_0.9fr] lg:items-center"> <div className="grid gap-10 lg:grid-cols-[1fr_0.9fr] lg:items-center">
<div> <div>
<h3 className="font-brand-display text-4xl text-[#F5E9DA]">Receive buyer-focused coffee updates</h3> <h3 className="font-brand-display text-4xl text-[#F4F1E6]">Receive buyer-focused green coffee updates</h3>
<p className="mt-5 max-w-2xl text-base leading-8 text-white/72"> <p className="mt-5 max-w-2xl text-base leading-8 text-white/72">
Join the list for availability updates, new origin highlights, and company announcements shaped for professional buyers. Join the list for availability updates, new origin highlights, and company announcements shaped for professional buyers.
</p> </p>

16
frontend/src/pages/logistics-export.tsx
View File

@ -67,13 +67,13 @@ export default function LogisticsExportPage() {
{logisticsPillars.map((item) => ( {logisticsPillars.map((item) => (
<div <div
key={item.title} key={item.title}
className="rounded-[1.75rem] border border-[#3E2723]/8 bg-white p-6 shadow-[0_20px_65px_rgba(35,24,18,0.06)]" className="rounded-[1.75rem] border border-[#1F3A2D]/8 bg-white p-6 shadow-[0_20px_65px_rgba(20,38,29,0.06)]"
> >
<div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[#F5E9DA] text-[#3E2723]"> <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[#F4F1E6] text-[#1F3A2D]">
<BaseIcon path={item.icon} /> <BaseIcon path={item.icon} />
</div> </div>
<h2 className="font-brand-display mt-5 text-2xl text-[#3E2723]">{item.title}</h2> <h2 className="font-brand-display mt-5 text-2xl text-[#1F3A2D]">{item.title}</h2>
<p className="mt-4 text-sm leading-7 text-[#5B4A43]">{item.description}</p> <p className="mt-4 text-sm leading-7 text-[#556257]">{item.description}</p>
</div> </div>
))} ))}
</div> </div>
@ -83,18 +83,18 @@ export default function LogisticsExportPage() {
eyebrow="Export flow" eyebrow="Export flow"
title="A simple view of how the shipment process is organized" title="A simple view of how the shipment process is organized"
description="The sequence below reinforces a premium message: disciplined coffee handling, timely coordination, and dependable communication." description="The sequence below reinforces a premium message: disciplined coffee handling, timely coordination, and dependable communication."
className="bg-[#fffdf9]" className="bg-[#F8FAF4]"
> >
<div className="grid gap-4 lg:grid-cols-2"> <div className="grid gap-4 lg:grid-cols-2">
{timeline.map((step, index) => ( {timeline.map((step, index) => (
<div <div
key={step} key={step}
className="flex items-center gap-4 rounded-[1.5rem] border border-[#3E2723]/8 bg-white px-5 py-4 shadow-[0_18px_55px_rgba(35,24,18,0.05)]" className="flex items-center gap-4 rounded-[1.5rem] border border-[#1F3A2D]/8 bg-white px-5 py-4 shadow-[0_18px_55px_rgba(20,38,29,0.05)]"
> >
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-[#3E2723] text-sm font-semibold text-[#F5E9DA]"> <div className="flex h-10 w-10 items-center justify-center rounded-full bg-[#1F3A2D] text-sm font-semibold text-[#F4F1E6]">
{index + 1} {index + 1}
</div> </div>
<p className="text-sm leading-7 text-[#5B4A43]">{step}</p> <p className="text-sm leading-7 text-[#556257]">{step}</p>
</div> </div>
))} ))}
</div> </div>

16
frontend/src/pages/quality-control.tsx
View File

@ -34,16 +34,16 @@ export default function QualityControlPage() {
> >
<div className="grid gap-6 lg:grid-cols-3"> <div className="grid gap-6 lg:grid-cols-3">
{qualityProcesses.map((item, index) => ( {qualityProcesses.map((item, index) => (
<div key={item.title} className="rounded-[1.85rem] border border-[#3E2723]/8 bg-white p-7 shadow-[0_24px_70px_rgba(35,24,18,0.06)]"> <div key={item.title} className="rounded-[1.85rem] border border-[#1F3A2D]/8 bg-white p-7 shadow-[0_24px_70px_rgba(20,38,29,0.06)]">
<div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[#F5E9DA] text-[#3E2723]"> <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[#F4F1E6] text-[#1F3A2D]">
<BaseIcon path={processIcons[index]} /> <BaseIcon path={processIcons[index]} />
</div> </div>
<h3 className="font-brand-display mt-5 text-3xl text-[#3E2723]">{item.title}</h3> <h3 className="font-brand-display mt-5 text-3xl text-[#1F3A2D]">{item.title}</h3>
<p className="mt-4 text-sm leading-7 text-[#5B4A43]">{item.highlight}</p> <p className="mt-4 text-sm leading-7 text-[#556257]">{item.highlight}</p>
<div className="mt-6 space-y-3"> <div className="mt-6 space-y-3">
{item.steps.map((step, stepIndex) => ( {item.steps.map((step, stepIndex) => (
<div key={step} className="flex items-center gap-3 rounded-2xl bg-[#F8F1E7] px-4 py-3 text-sm text-[#4f403a]"> <div key={step} className="flex items-center gap-3 rounded-2xl bg-[#EEF3E7] px-4 py-3 text-sm text-[#4F5E53]">
<span className="flex h-8 w-8 items-center justify-center rounded-full bg-[#3E2723] text-xs font-semibold text-[#F5E9DA]"> <span className="flex h-8 w-8 items-center justify-center rounded-full bg-[#1F3A2D] text-xs font-semibold text-[#F4F1E6]">
{stepIndex + 1} {stepIndex + 1}
</span> </span>
{step} {step}
@ -59,11 +59,11 @@ export default function QualityControlPage() {
eyebrow="Quality system" eyebrow="Quality system"
title="Measured, tasted, and reviewed before export" title="Measured, tasted, and reviewed before export"
description="Moisture control and cupping evaluation help translate process discipline into export confidence." description="Moisture control and cupping evaluation help translate process discipline into export confidence."
className="bg-[#fffdf9]" className="bg-[#F8FAF4]"
> >
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3"> <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
{qualityMetrics.map((item) => ( {qualityMetrics.map((item) => (
<div key={item} className="rounded-[1.5rem] border border-[#3E2723]/8 bg-white px-5 py-4 text-sm leading-7 text-[#5B4A43] shadow-[0_18px_55px_rgba(35,24,18,0.05)]"> <div key={item} className="rounded-[1.5rem] border border-[#1F3A2D]/8 bg-white px-5 py-4 text-sm leading-7 text-[#556257] shadow-[0_18px_55px_rgba(20,38,29,0.05)]">
{item} {item}
</div> </div>
))} ))}

2
frontend/src/pages/sustainability.tsx
View File

@ -31,7 +31,7 @@ export default function SustainabilityPage() {
> >
<div className="grid gap-6 md:grid-cols-2"> <div className="grid gap-6 md:grid-cols-2">
{sustainabilityPoints.map((item) => ( {sustainabilityPoints.map((item) => (
<div key={item} className="rounded-[1.75rem] border border-[#3E2723]/8 bg-white p-7 text-sm leading-7 text-[#5B4A43] shadow-[0_20px_65px_rgba(35,24,18,0.06)]"> <div key={item} className="rounded-[1.75rem] border border-[#1F3A2D]/8 bg-white p-7 text-sm leading-7 text-[#556257] shadow-[0_20px_65px_rgba(20,38,29,0.06)]">
{item} {item}
</div> </div>
))} ))}

12
frontend/src/pages/vision-mission-values.tsx
View File

@ -34,16 +34,16 @@ export default function VisionMissionValuesPage() {
eyebrow="Core values" eyebrow="Core values"
title="The values that guide how we source, communicate, and deliver" title="The values that guide how we source, communicate, and deliver"
centered centered
className="bg-[#fffdf9]" className="bg-[#F8FAF4]"
> >
<div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3"> <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
{values.map((item, index) => ( {values.map((item, index) => (
<div key={item.title} className="rounded-[1.75rem] border border-[#3E2723]/8 bg-white p-7 shadow-[0_20px_65px_rgba(35,24,18,0.06)]"> <div key={item.title} className="rounded-[1.75rem] border border-[#1F3A2D]/8 bg-white p-7 shadow-[0_20px_65px_rgba(20,38,29,0.06)]">
<div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[#F5E9DA] text-[#3E2723]"> <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[#F4F1E6] text-[#1F3A2D]">
<BaseIcon path={icons[index]} /> <BaseIcon path={icons[index]} />
</div> </div>
<h3 className="font-brand-display mt-5 text-2xl text-[#3E2723]">{item.title}</h3> <h3 className="font-brand-display mt-5 text-2xl text-[#1F3A2D]">{item.title}</h3>
<p className="mt-4 text-sm leading-7 text-[#5B4A43]">{item.description}</p> <p className="mt-4 text-sm leading-7 text-[#556257]">{item.description}</p>
</div> </div>
))} ))}
</div> </div>
@ -56,7 +56,7 @@ export default function VisionMissionValuesPage() {
> >
<div className="grid gap-4 md:grid-cols-2"> <div className="grid gap-4 md:grid-cols-2">
{principles.map((item) => ( {principles.map((item) => (
<div key={item} className="rounded-[1.5rem] border border-[#3E2723]/8 bg-white px-5 py-4 text-sm font-medium text-[#3E2723] shadow-[0_18px_60px_rgba(35,24,18,0.05)]"> <div key={item} className="rounded-[1.5rem] border border-[#1F3A2D]/8 bg-white px-5 py-4 text-sm font-medium text-[#1F3A2D] shadow-[0_18px_60px_rgba(20,38,29,0.05)]">
{item} {item}
</div> </div>
))} ))}