259 lines
12 KiB
TypeScript
259 lines
12 KiB
TypeScript
import {
|
||
mdiEarth,
|
||
mdiLeaf,
|
||
mdiMapMarker,
|
||
mdiShieldCheck,
|
||
mdiTruckFastOutline,
|
||
} from '@mdi/js';
|
||
import type { ReactElement } from 'react';
|
||
import React from 'react';
|
||
|
||
import BaseIcon from '../components/BaseIcon';
|
||
import MarketingButton from '../components/marketing/MarketingButton';
|
||
import MarketingLayout from '../components/marketing/MarketingLayout';
|
||
import MarketingSection from '../components/marketing/MarketingSection';
|
||
import MarketingSeo from '../components/marketing/MarketingSeo';
|
||
import NewsletterForm from '../components/marketing/NewsletterForm';
|
||
import {
|
||
brand,
|
||
exportServices,
|
||
featureHighlights,
|
||
galleryItems,
|
||
origins,
|
||
testimonials,
|
||
} from '../components/marketing/marketingData';
|
||
import LayoutGuest from '../layouts/Guest';
|
||
|
||
const statItems = [
|
||
{ label: 'Origin-driven sourcing', value: 'Ethiopia first' },
|
||
{ label: 'Export route', value: 'Addis Ababa → Djibouti → Global markets' },
|
||
{ label: 'Buyer focus', value: 'Roasters, importers, distributors, wholesalers' },
|
||
];
|
||
|
||
const trustPillars = [
|
||
{
|
||
icon: mdiShieldCheck,
|
||
title: 'Trust & transparency',
|
||
description: 'Clear communication, honest documentation, and disciplined follow-through for international buyers.',
|
||
},
|
||
{
|
||
icon: mdiMapMarker,
|
||
title: 'Origin expertise',
|
||
description: 'Regional understanding supports lot selection aligned with buyer taste profiles and sourcing goals.',
|
||
},
|
||
{
|
||
icon: mdiTruckFastOutline,
|
||
title: 'Export reliability',
|
||
description: 'A structured logistics chain supports timely movement from origin to destination.',
|
||
},
|
||
{
|
||
icon: mdiLeaf,
|
||
title: 'Responsible sourcing',
|
||
description: 'Sustainability is treated as a business responsibility, not a campaign message.',
|
||
},
|
||
];
|
||
|
||
export default function HomePage() {
|
||
return (
|
||
<>
|
||
<MarketingSeo
|
||
title="Ethiopian Premium Coffee Export"
|
||
description="Premium Ethiopian coffee exporter connecting origin, traceability, and global buyer confidence with elegant, professional service."
|
||
/>
|
||
<MarketingLayout>
|
||
<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">
|
||
<img
|
||
className="h-full w-full scale-[1.02] object-cover opacity-32 saturate-[0.82]"
|
||
loading="eager"
|
||
src="https://images.unsplash.com/photo-1447933601403-0c6688de566e?auto=format&fit=crop&w=1600&q=80"
|
||
alt="Ethiopian coffee farm"
|
||
/>
|
||
<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 className="coffee-fade-in relative mx-auto grid max-w-7xl gap-10 lg:grid-cols-[1.05fr_0.95fr] lg:items-end">
|
||
<div>
|
||
<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-[#F4F1E6] md:text-7xl">
|
||
Ethiopian Premium Coffee – Sourced with Experience, Exported with Integrity
|
||
</h1>
|
||
<p className="mt-6 max-w-3xl text-lg leading-8 text-white/78">
|
||
Achieving premium coffee excellence from its origin.
|
||
</p>
|
||
<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,
|
||
single-origin green coffee sourcing, export-ready preparation, and uncompromising quality.
|
||
</p>
|
||
<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=get_a_quote" variant="secondary">
|
||
Get a Quote
|
||
</MarketingButton>
|
||
</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">
|
||
<p className="text-sm font-semibold uppercase tracking-[0.28em] text-[#B7C78B]">Why buyers trust us</p>
|
||
<div className="mt-8 space-y-5">
|
||
{statItems.map((item) => (
|
||
<div key={item.label} className="border-b border-white/10 pb-5 last:border-b-0 last:pb-0">
|
||
<p className="text-sm uppercase tracking-[0.28em] text-white/48">{item.label}</p>
|
||
<p className="mt-2 text-lg font-medium text-white">{item.value}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<MarketingSection
|
||
eyebrow="Immediate confidence"
|
||
title="A refined sourcing experience for global coffee buyers"
|
||
description="The first impression international buyers need is clarity: where coffee comes from, how quality is protected, and whether export communication will be dependable. This website presents that trust story with elegance and precision."
|
||
>
|
||
<div className="grid gap-6 md:grid-cols-2 xl:grid-cols-4">
|
||
{trustPillars.map((item) => (
|
||
<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-[#F4F1E6] text-[#1F3A2D]">
|
||
<BaseIcon path={item.icon} />
|
||
</div>
|
||
<h3 className="font-brand-display mt-5 text-2xl text-[#1F3A2D]">{item.title}</h3>
|
||
<p className="mt-3 text-sm leading-7 text-[#556257]">{item.description}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</MarketingSection>
|
||
|
||
<MarketingSection
|
||
eyebrow="Feature highlights"
|
||
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."
|
||
centered
|
||
className="bg-[#F8FAF4]"
|
||
>
|
||
<div className="grid gap-6 lg:grid-cols-2 xl:grid-cols-4">
|
||
{featureHighlights.map((item) => (
|
||
<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-[#1F3A2D]">{item.title}</h3>
|
||
<p className="mt-4 text-sm leading-7 text-[#556257]">{item.description}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</MarketingSection>
|
||
|
||
<MarketingSection
|
||
eyebrow="Visual origin story"
|
||
title="From farms to cupping tables to export readiness"
|
||
description="The buyer journey starts with visual confidence: clean origin imagery, disciplined processing, and a clear sense of how coffee moves professionally toward shipment."
|
||
>
|
||
<div className="grid gap-6 md:grid-cols-2">
|
||
{galleryItems.map((item) => (
|
||
<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">
|
||
<img
|
||
className="h-full w-full object-cover saturate-[0.88] transition duration-700 group-hover:scale-105"
|
||
loading="lazy"
|
||
src={item.image}
|
||
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 className="p-6">
|
||
<h3 className="font-brand-display text-2xl text-[#1F3A2D]">{item.title}</h3>
|
||
<p className="mt-3 text-sm leading-7 text-[#556257]">{item.caption}</p>
|
||
</div>
|
||
</article>
|
||
))}
|
||
</div>
|
||
</MarketingSection>
|
||
|
||
<MarketingSection
|
||
eyebrow="Origin snapshots"
|
||
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."
|
||
className="bg-[#F4F1E6]/45"
|
||
>
|
||
<div className="grid gap-6 lg:grid-cols-3">
|
||
{origins.slice(0, 3).map((item) => (
|
||
<div key={item.name} className="overflow-hidden rounded-[2rem] bg-white shadow-[0_24px_70px_rgba(20,38,29,0.08)]">
|
||
<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">
|
||
<p className="text-sm uppercase tracking-[0.28em] text-[#9FB06F]">{item.altitude}</p>
|
||
<h3 className="font-brand-display mt-3 text-2xl text-[#1F3A2D]">{item.name}</h3>
|
||
<p className="mt-3 text-sm leading-7 text-[#556257]">{item.profile}</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div className="mt-8">
|
||
<MarketingButton href="/coffee-origins" variant="ghost">
|
||
Explore all origins
|
||
</MarketingButton>
|
||
</div>
|
||
</MarketingSection>
|
||
|
||
<MarketingSection
|
||
eyebrow="Export capability"
|
||
title="Professional export services built for international buyers"
|
||
description="Reliable logistics, internal documentation handling, and strong communication help create a premium corporate buying experience."
|
||
>
|
||
<div className="grid gap-4 md:grid-cols-2">
|
||
{exportServices.slice(0, 4).map((item) => (
|
||
<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-[#9FB06F]">
|
||
<BaseIcon path={mdiEarth} />
|
||
</div>
|
||
<p className="text-sm leading-7 text-[#556257]">{item}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</MarketingSection>
|
||
|
||
<MarketingSection
|
||
eyebrow="Testimonials"
|
||
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."
|
||
centered
|
||
className="bg-[#F8FAF4]"
|
||
>
|
||
<div className="grid gap-6 lg:grid-cols-2">
|
||
{testimonials.map((item) => (
|
||
<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-[#1F3A2D]">“{item.quote}”</p>
|
||
<footer className="mt-6 text-sm font-medium uppercase tracking-[0.24em] text-[#72816F]">{item.author}</footer>
|
||
</blockquote>
|
||
))}
|
||
</div>
|
||
</MarketingSection>
|
||
|
||
<MarketingSection
|
||
eyebrow="Stay informed"
|
||
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."
|
||
className="bg-[#1F3A2D] text-white"
|
||
>
|
||
<div className="grid gap-10 lg:grid-cols-[1fr_0.9fr] lg:items-center">
|
||
<div>
|
||
<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">
|
||
Join the list for availability updates, new origin highlights, and company announcements shaped for professional buyers.
|
||
</p>
|
||
</div>
|
||
<div className="rounded-[2rem] border border-white/10 bg-white/10 p-6 backdrop-blur-md">
|
||
<NewsletterForm source="home_cta" />
|
||
</div>
|
||
</div>
|
||
</MarketingSection>
|
||
</MarketingLayout>
|
||
</>
|
||
);
|
||
}
|
||
|
||
HomePage.getLayout = function getLayout(page: ReactElement) {
|
||
return <LayoutGuest>{page}</LayoutGuest>;
|
||
};
|