Autosave: 20260328-091022
This commit is contained in:
Flatlogic Bot
parent
b60f4a1c0e
commit
de96e0cfc2
BIN
assets/pasted-20260328-052034-76e61f64.png
Normal file
BIN
assets/pasted-20260328-052034-76e61f64.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 960 KiB |
BIN
assets/pasted-20260328-052613-0e0e2c33.png
Normal file
BIN
assets/pasted-20260328-052613-0e0e2c33.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
BIN
assets/pasted-20260328-080040-133ede7f.jpg
Normal file
BIN
assets/pasted-20260328-080040-133ede7f.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
assets/pasted-20260328-090924-08e1b476.png
Normal file
BIN
assets/pasted-20260328-090924-08e1b476.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 127 KiB |
BIN
frontend/public/assets/vm-shot-2026-03-28T07-59-44-940Z.jpg
Normal file
BIN
frontend/public/assets/vm-shot-2026-03-28T07-59-44-940Z.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 664 KiB |
@ -105,18 +105,18 @@ export default function InquiryForm({ initialInquiryType }: Props) {
|
||||
};
|
||||
|
||||
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">
|
||||
<p className="text-sm font-semibold uppercase tracking-[0.35em] text-[#C8A165]">Buyer inquiry</p>
|
||||
<h3 className="font-brand-display mt-3 text-3xl text-[#3E2723]">{title}</h3>
|
||||
<p className="mt-3 max-w-2xl text-sm leading-7 text-[#5B4A43]">
|
||||
<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-[#1F3A2D]">{title}</h3>
|
||||
<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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form className="space-y-4" onSubmit={onSubmit}>
|
||||
<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
|
||||
<select className="coffee-input" name="inquiry_type" value={form.inquiry_type} onChange={onChange}>
|
||||
{inquiryTypes.map((item) => (
|
||||
@ -126,7 +126,7 @@ export default function InquiryForm({ initialInquiryType }: Props) {
|
||||
))}
|
||||
</select>
|
||||
</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
|
||||
<select className="coffee-input" name="buyer_type" value={form.buyer_type} onChange={onChange}>
|
||||
{buyerTypes.map((item) => (
|
||||
@ -139,22 +139,22 @@ export default function InquiryForm({ initialInquiryType }: Props) {
|
||||
</div>
|
||||
|
||||
<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
|
||||
<input className="coffee-input" name="full_name" placeholder="Your name" value={form.full_name} onChange={onChange} />
|
||||
</label>
|
||||
<label className="space-y-2 text-sm font-medium text-[#3E2723]">
|
||||
<label className="space-y-2 text-sm font-medium text-[#1F3A2D]">
|
||||
Email
|
||||
<input className="coffee-input" name="email" type="email" placeholder="you@company.com" value={form.email} onChange={onChange} />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<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
|
||||
<input className="coffee-input" name="phone" placeholder="Contact number" value={form.phone} onChange={onChange} />
|
||||
</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
|
||||
<select className="coffee-input" name="preferred_contact_method" value={form.preferred_contact_method} onChange={onChange}>
|
||||
{contactMethods.map((item) => (
|
||||
@ -167,18 +167,18 @@ export default function InquiryForm({ initialInquiryType }: Props) {
|
||||
</div>
|
||||
|
||||
<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
|
||||
<input className="coffee-input" name="company_name" placeholder="Company" value={form.company_name} onChange={onChange} />
|
||||
</label>
|
||||
<label className="space-y-2 text-sm font-medium text-[#3E2723]">
|
||||
<label className="space-y-2 text-sm font-medium text-[#1F3A2D]">
|
||||
Country
|
||||
<input className="coffee-input" name="country" placeholder="Country" value={form.country} onChange={onChange} />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<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)
|
||||
<input
|
||||
className="coffee-input"
|
||||
@ -190,7 +190,7 @@ export default function InquiryForm({ initialInquiryType }: Props) {
|
||||
onChange={onChange}
|
||||
/>
|
||||
</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
|
||||
<select className="coffee-input" name="incoterm" value={form.incoterm} onChange={onChange}>
|
||||
{incoterms.map((item) => (
|
||||
@ -202,7 +202,7 @@ export default function InquiryForm({ initialInquiryType }: Props) {
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<label className="space-y-2 text-sm font-medium text-[#3E2723]">
|
||||
<label className="space-y-2 text-sm font-medium text-[#1F3A2D]">
|
||||
Message
|
||||
<textarea
|
||||
className="coffee-input min-h-[160px] resize-y pt-3"
|
||||
@ -214,7 +214,7 @@ export default function InquiryForm({ initialInquiryType }: Props) {
|
||||
</label>
|
||||
|
||||
<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">
|
||||
{isSubmitting ? 'Sending request...' : 'Submit inquiry'}
|
||||
</MarketingButton>
|
||||
@ -222,7 +222,7 @@ export default function InquiryForm({ initialInquiryType }: Props) {
|
||||
|
||||
{errorMessage ? <p className="text-sm text-red-600">{errorMessage}</p> : null}
|
||||
{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}
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@ -11,15 +11,15 @@ type Props = {
|
||||
};
|
||||
|
||||
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 = {
|
||||
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:
|
||||
'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:
|
||||
'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({
|
||||
|
||||
@ -45,17 +45,17 @@ const getCurrentLabel = (pathname: string) => {
|
||||
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';
|
||||
? 'border border-white/15 bg-white/16 text-white shadow-[0_16px_45px_rgba(0,0,0,0.18)] backdrop-blur-md'
|
||||
: '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) => {
|
||||
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)]';
|
||||
? 'border-white/10 bg-[#14261D]/96 text-white shadow-[0_26px_80px_rgba(0,0,0,0.32)]'
|
||||
: '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) => {
|
||||
@ -67,7 +67,7 @@ const getDesktopDropdownItemClasses = (pathname: string, item: NavigationChild,
|
||||
: '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) {
|
||||
@ -96,12 +96,12 @@ export default function MarketingLayout({ children }: Props) {
|
||||
const isHomeHeroMode = router.pathname === '/' && !isScrolled && !isMenuOpen;
|
||||
|
||||
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
|
||||
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'
|
||||
? 'border-b border-white/10 bg-[#102118]/62 shadow-[0_18px_50px_rgba(0,0,0,0.18)] 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">
|
||||
@ -109,17 +109,17 @@ export default function MarketingLayout({ children }: Props) {
|
||||
<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]'
|
||||
? 'border-white/28 bg-white/12 text-[#F4F1E6] backdrop-blur-md'
|
||||
: 'border-[#9FB06F]/50 bg-[#1F3A2D] text-[#F4F1E6]'
|
||||
}`}
|
||||
>
|
||||
AD
|
||||
</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
|
||||
</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
|
||||
</p>
|
||||
</div>
|
||||
@ -160,7 +160,7 @@ export default function MarketingLayout({ children }: Props) {
|
||||
)}`}
|
||||
>
|
||||
<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>
|
||||
))}
|
||||
</div>
|
||||
@ -181,8 +181,8 @@ export default function MarketingLayout({ children }: Props) {
|
||||
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]'
|
||||
? 'border-white/20 bg-white/10 text-[#F4F1E6] backdrop-blur-md'
|
||||
: 'border-[#1F3A2D]/10 bg-white text-[#1F3A2D]'
|
||||
}`}
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
@ -191,9 +191,9 @@ export default function MarketingLayout({ children }: Props) {
|
||||
</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 className="border-t border-[#1F3A2D]/10 bg-[#FBF9F1] px-5 py-4 xl:hidden">
|
||||
<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-[#1F3A2D]">{currentLabel}</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
{navigationItems.map((item) => {
|
||||
@ -203,7 +203,7 @@ export default function MarketingLayout({ children }: Props) {
|
||||
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]'
|
||||
isNavItemActive(router.pathname, item) ? 'bg-[#1F3A2D] text-[#F4F1E6]' : 'bg-white text-[#1F3A2D]'
|
||||
}`}
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
@ -213,12 +213,12 @@ export default function MarketingLayout({ children }: Props) {
|
||||
}
|
||||
|
||||
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">
|
||||
<Link
|
||||
href={item.href}
|
||||
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)}
|
||||
>
|
||||
@ -227,7 +227,7 @@ export default function MarketingLayout({ children }: Props) {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsExportMenuOpen((current) => !current)}
|
||||
className="px-4 py-3 text-[#3E2723]"
|
||||
className="px-4 py-3 text-[#1F3A2D]"
|
||||
aria-label="Toggle export services submenu"
|
||||
>
|
||||
<BaseIcon
|
||||
@ -237,18 +237,18 @@ export default function MarketingLayout({ children }: Props) {
|
||||
</button>
|
||||
</div>
|
||||
{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) => (
|
||||
<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]'
|
||||
isActivePath(router.pathname, child.href) ? 'bg-[#1F3A2D] text-[#F4F1E6]' : 'text-[#1F3A2D]'
|
||||
}`}
|
||||
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]'}`}>
|
||||
<p className={`mt-1 text-xs leading-6 ${isActivePath(router.pathname, child.href) ? 'text-white/70' : 'text-[#68766A]'}`}>
|
||||
{child.description}
|
||||
</p>
|
||||
</Link>
|
||||
@ -271,11 +271,11 @@ export default function MarketingLayout({ children }: Props) {
|
||||
|
||||
<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="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">
|
||||
<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-[#F4F1E6] md:text-5xl">
|
||||
Discover Ethiopian coffee backed by heritage, clear communication, and export discipline.
|
||||
</h2>
|
||||
</div>
|
||||
@ -288,10 +288,10 @@ export default function MarketingLayout({ children }: Props) {
|
||||
</div>
|
||||
</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>
|
||||
<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>
|
||||
<div className="mt-8 flex flex-wrap gap-3">
|
||||
<MarketingButton href="/contact?type=partner_with_us">Partner With Us</MarketingButton>
|
||||
@ -302,11 +302,11 @@ export default function MarketingLayout({ children }: Props) {
|
||||
</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">
|
||||
{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]" />
|
||||
<BaseIcon path={mdiArrowRight} className="text-[#9FB06F]" />
|
||||
{item.label}
|
||||
</Link>
|
||||
))}
|
||||
@ -314,11 +314,11 @@ export default function MarketingLayout({ children }: Props) {
|
||||
</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">
|
||||
{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]" />
|
||||
<BaseIcon path={mdiArrowRight} className="text-[#9FB06F]" />
|
||||
{item.label}
|
||||
</Link>
|
||||
))}
|
||||
@ -333,7 +333,7 @@ export default function MarketingLayout({ children }: Props) {
|
||||
</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">
|
||||
Receive market-ready updates, sourcing availability, and company news tailored for international buyers.
|
||||
</p>
|
||||
|
||||
@ -10,15 +10,16 @@ type Props = {
|
||||
export default function MarketingPageHero({ eyebrow, title, description, image }: Props) {
|
||||
return (
|
||||
<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">
|
||||
<p className="text-sm font-semibold uppercase tracking-[0.35em] text-[#C8A165]">{eyebrow}</p>
|
||||
<h1 className="font-brand-display mt-4 text-4xl leading-tight text-[#3E2723] md:text-6xl">{title}</h1>
|
||||
<p className="mt-6 max-w-2xl text-base leading-8 text-[#5B4A43]">{description}</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-[#1F3A2D] md:text-6xl">{title}</h1>
|
||||
<p className="mt-6 max-w-2xl text-base leading-8 text-[#556257]">{description}</p>
|
||||
</div>
|
||||
<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} />
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-[#2c1f1b]/50 via-transparent to-transparent" />
|
||||
<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-[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>
|
||||
</section>
|
||||
|
||||
@ -21,9 +21,9 @@ export default function MarketingSection({
|
||||
<section className={`px-5 py-16 lg:px-8 lg:py-24 ${className}`}>
|
||||
<div className="mx-auto max-w-7xl">
|
||||
<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}
|
||||
<h2 className="font-brand-display mt-4 text-4xl leading-tight text-[#3E2723] md:text-5xl">{title}</h2>
|
||||
{description ? <p className="mt-5 text-base leading-8 text-[#5B4A43]">{description}</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-[#1F3A2D] md:text-5xl">{title}</h2>
|
||||
{description ? <p className="mt-5 text-base leading-8 text-[#556257]">{description}</p> : null}
|
||||
</div>
|
||||
{children ? <div className="mt-12">{children}</div> : null}
|
||||
</div>
|
||||
|
||||
@ -69,14 +69,14 @@ export default function NewsletterForm({ source = 'home_footer', compact = false
|
||||
{!compact && (
|
||||
<div className="grid gap-3 md:grid-cols-2">
|
||||
<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"
|
||||
placeholder="Name"
|
||||
value={form.full_name}
|
||||
onChange={onChange}
|
||||
/>
|
||||
<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"
|
||||
placeholder="Company"
|
||||
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)]'}`}>
|
||||
<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"
|
||||
placeholder="Email address"
|
||||
type="email"
|
||||
@ -99,7 +99,7 @@ export default function NewsletterForm({ source = 'home_footer', compact = false
|
||||
</MarketingButton>
|
||||
) : (
|
||||
<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"
|
||||
placeholder="Country"
|
||||
value={form.country}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
export const brand = {
|
||||
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',
|
||||
phones: ['+251 930105914', '+251 904186868'],
|
||||
address: 'Kirkos Sub-city, Wereda 01, Addis Ababa, Ethiopia',
|
||||
@ -61,26 +61,26 @@ export const featureHighlights = [
|
||||
|
||||
export const galleryItems = [
|
||||
{
|
||||
title: 'Highland farms',
|
||||
caption: 'Elevated terroir and patient cultivation shape distinctive cup character.',
|
||||
title: 'Green coffee landscapes',
|
||||
caption: 'Highland farms and careful cultivation create the foundation for exceptional green coffee lots.',
|
||||
image:
|
||||
'https://images.unsplash.com/photo-1447933601403-0c6688de566e?auto=format&fit=crop&w=1200&q=80',
|
||||
},
|
||||
{
|
||||
title: 'Processing stations',
|
||||
caption: 'Washed, natural, and honey processes are managed with discipline and care.',
|
||||
title: 'Washing station discipline',
|
||||
caption: 'Lot separation, drying control, and station handling protect specialty green coffee quality before export.',
|
||||
image:
|
||||
'https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?auto=format&fit=crop&w=1200&q=80',
|
||||
},
|
||||
{
|
||||
title: 'Cupping sessions',
|
||||
caption: 'Sensory evaluation supports lot selection, consistency, and buyer confidence.',
|
||||
title: 'Lot evaluation',
|
||||
caption: 'Cupping, moisture review, and sample assessment help buyers select green coffee with confidence.',
|
||||
image:
|
||||
'https://images.unsplash.com/photo-1511920170033-f8396924c348?auto=format&fit=crop&w=1200&q=80',
|
||||
},
|
||||
{
|
||||
title: 'Export logistics',
|
||||
caption: 'A disciplined export chain moves coffee from Addis Ababa to Djibouti and global markets.',
|
||||
title: 'Export-ready preparation',
|
||||
caption: 'Packaging, documentation, and shipment coordination move export-ready green coffee toward global buyers.',
|
||||
image:
|
||||
'https://images.unsplash.com/photo-1520607162513-77705c0f0d4a?auto=format&fit=crop&w=1200&q=80',
|
||||
},
|
||||
|
||||
@ -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');
|
||||
|
||||
:root {
|
||||
--coffee-brown: #3E2723;
|
||||
--coffee-beige: #F5E9DA;
|
||||
--coffee-gold: #C8A165;
|
||||
--coffee-brown: #1F3A2D;
|
||||
--coffee-beige: #F4F1E6;
|
||||
--coffee-gold: #9FB06F;
|
||||
}
|
||||
|
||||
html {
|
||||
@ -88,23 +88,23 @@ html {
|
||||
width: 100%;
|
||||
height: 3.25rem;
|
||||
border-radius: 1rem;
|
||||
border: 1px solid rgba(62, 39, 35, 0.12);
|
||||
background: #fffdf9;
|
||||
border: 1px solid rgba(31, 58, 45, 0.14);
|
||||
background: #F8FAF4;
|
||||
padding: 0 1rem;
|
||||
font-size: 0.95rem;
|
||||
color: #2c221f;
|
||||
color: #22332B;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
|
||||
}
|
||||
|
||||
.coffee-input:focus {
|
||||
outline: none;
|
||||
border-color: rgba(200, 161, 101, 0.8);
|
||||
box-shadow: 0 0 0 3px rgba(200, 161, 101, 0.16);
|
||||
border-color: rgba(159, 176, 111, 0.82);
|
||||
box-shadow: 0 0 0 3px rgba(159, 176, 111, 0.18);
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.coffee-input::placeholder {
|
||||
color: #9a8578;
|
||||
color: #869488;
|
||||
}
|
||||
|
||||
@keyframes coffeeFadeIn {
|
||||
|
||||
@ -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."
|
||||
>
|
||||
<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)]">
|
||||
<p className="text-sm uppercase tracking-[0.32em] text-[#d8bb8a]">What shapes the company</p>
|
||||
<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-[#B7C78B]">What shapes the company</p>
|
||||
<ul className="mt-6 space-y-4 text-sm leading-7 text-white/78">
|
||||
<li>• Ethiopian coffee culture upbringing</li>
|
||||
<li>• Family coffee tradition</li>
|
||||
@ -41,8 +41,8 @@ export default function AboutPage() {
|
||||
</div>
|
||||
<div className="space-y-6">
|
||||
{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)]">
|
||||
<p className="text-base leading-8 text-[#5B4A43]">{paragraph}</p>
|
||||
<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-[#556257]">{paragraph}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@ -30,13 +30,16 @@ export default function CoffeeOriginsPage() {
|
||||
>
|
||||
<div className="grid gap-6 lg:grid-cols-2 xl:grid-cols-3">
|
||||
{origins.map((item) => (
|
||||
<article key={item.name} className="overflow-hidden rounded-[2rem] bg-white shadow-[0_24px_70px_rgba(35,24,18,0.08)]">
|
||||
<img className="h-64 w-full object-cover" loading="lazy" src={item.image} alt={item.name} />
|
||||
<article 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-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">
|
||||
<p className="text-sm uppercase tracking-[0.28em] text-[#C8A165]">{item.altitude}</p>
|
||||
<h2 className="font-brand-display mt-3 text-3xl text-[#3E2723]">{item.name}</h2>
|
||||
<p className="mt-4 text-sm leading-7 text-[#5B4A43]">{item.profile}</p>
|
||||
<div className="mt-5 rounded-2xl bg-[#F5E9DA] px-4 py-3 text-sm text-[#5B4A43]">Rainfall: {item.rainfall}</div>
|
||||
<p className="text-sm uppercase tracking-[0.28em] text-[#9FB06F]">{item.altitude}</p>
|
||||
<h2 className="font-brand-display mt-3 text-3xl text-[#1F3A2D]">{item.name}</h2>
|
||||
<p className="mt-4 text-sm leading-7 text-[#556257]">{item.profile}</p>
|
||||
<div className="mt-5 rounded-2xl bg-[#F4F1E6] px-4 py-3 text-sm text-[#556257]">Rainfall: {item.rainfall}</div>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
|
||||
@ -35,12 +35,12 @@ export default function CoffeePhilosophyPage() {
|
||||
>
|
||||
<div className="grid gap-6 md:grid-cols-2 xl:grid-cols-4">
|
||||
{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 className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[#F5E9DA] text-[#3E2723]">
|
||||
<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-[#F4F1E6] text-[#1F3A2D]">
|
||||
<BaseIcon path={icons[index]} />
|
||||
</div>
|
||||
<h3 className="font-brand-display mt-5 text-2xl text-[#3E2723]">{item.title}</h3>
|
||||
<p className="mt-4 text-sm leading-7 text-[#5B4A43]">{item.description}</p>
|
||||
<h3 className="font-brand-display mt-5 text-2xl text-[#1F3A2D]">{item.title}</h3>
|
||||
<p className="mt-4 text-sm leading-7 text-[#556257]">{item.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@ -51,36 +51,36 @@ export default function ContactPage() {
|
||||
</div>
|
||||
<div className="mt-10 grid gap-8 lg:grid-cols-[0.75fr_1.25fr]">
|
||||
<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 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} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-semibold uppercase tracking-[0.28em] text-[#C8A165]">Location</p>
|
||||
<p className="mt-3 text-sm leading-7 text-[#5B4A43]">{brand.address}</p>
|
||||
<p className="text-sm font-semibold uppercase tracking-[0.28em] text-[#9FB06F]">Location</p>
|
||||
<p className="mt-3 text-sm leading-7 text-[#556257]">{brand.address}</p>
|
||||
</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 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} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-semibold uppercase tracking-[0.28em] text-[#C8A165]">Email</p>
|
||||
<p className="mt-3 text-sm leading-7 text-[#5B4A43]">{brand.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-[#556257]">{brand.email}</p>
|
||||
</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 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} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-semibold uppercase tracking-[0.28em] text-[#C8A165]">Phone</p>
|
||||
<div className="mt-3 space-y-1 text-sm leading-7 text-[#5B4A43]">
|
||||
<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-[#556257]">
|
||||
{brand.phones.map((phone) => (
|
||||
<p key={phone}>{phone}</p>
|
||||
))}
|
||||
|
||||
@ -65,13 +65,13 @@ export default function ExportServicesPage() {
|
||||
{exportServiceItems.map((item) => (
|
||||
<article
|
||||
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]} />
|
||||
</div>
|
||||
<h2 className="font-brand-display mt-6 text-3xl text-[#3E2723]">{item.label}</h2>
|
||||
<p className="mt-4 text-sm leading-7 text-[#5B4A43]">{item.description}</p>
|
||||
<h2 className="font-brand-display mt-6 text-3xl text-[#1F3A2D]">{item.label}</h2>
|
||||
<p className="mt-4 text-sm leading-7 text-[#556257]">{item.description}</p>
|
||||
<div className="mt-6">
|
||||
<MarketingButton href={item.href} variant="ghost">
|
||||
View details
|
||||
@ -86,19 +86,19 @@ export default function ExportServicesPage() {
|
||||
eyebrow="Buyer workflow"
|
||||
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."
|
||||
className="bg-[#fffdf9]"
|
||||
className="bg-[#F8FAF4]"
|
||||
>
|
||||
<div className="grid gap-6 lg:grid-cols-3">
|
||||
{workflowSteps.map((step, index) => (
|
||||
<div
|
||||
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}
|
||||
</div>
|
||||
<h3 className="font-brand-display mt-6 text-2xl text-[#3E2723]">{step.title}</h3>
|
||||
<p className="mt-4 text-sm leading-7 text-[#5B4A43]">{step.description}</p>
|
||||
<h3 className="font-brand-display mt-6 text-2xl text-[#1F3A2D]">{step.title}</h3>
|
||||
<p className="mt-4 text-sm leading-7 text-[#556257]">{step.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@ -61,21 +61,21 @@ export default function HomePage() {
|
||||
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-[#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">
|
||||
<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"
|
||||
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(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 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-[#d8bb8a]">Luxury Ethiopian coffee export</p>
|
||||
<h1 className="font-brand-display mt-6 max-w-4xl text-5xl leading-[1.05] text-[#F5E9DA] md:text-7xl">
|
||||
<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">
|
||||
@ -83,7 +83,7 @@ export default function HomePage() {
|
||||
</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 sourcing, and uncompromising quality.
|
||||
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>
|
||||
@ -94,7 +94,7 @@ export default function HomePage() {
|
||||
</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-[#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">
|
||||
{statItems.map((item) => (
|
||||
<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">
|
||||
{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 className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[#F5E9DA] text-[#3E2723]">
|
||||
<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-[#3E2723]">{item.title}</h3>
|
||||
<p className="mt-3 text-sm leading-7 text-[#5B4A43]">{item.description}</p>
|
||||
<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>
|
||||
@ -130,13 +130,13 @@ export default function HomePage() {
|
||||
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-[#fffdf9]"
|
||||
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-[#3E2723]/8 bg-white p-7 shadow-[0_20px_70px_rgba(35,24,18,0.07)]">
|
||||
<h3 className="font-brand-display text-2xl text-[#3E2723]">{item.title}</h3>
|
||||
<p className="mt-4 text-sm leading-7 text-[#5B4A43]">{item.description}</p>
|
||||
<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>
|
||||
@ -149,18 +149,19 @@ export default function HomePage() {
|
||||
>
|
||||
<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(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">
|
||||
<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"
|
||||
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-[#3E2723]">{item.title}</h3>
|
||||
<p className="mt-3 text-sm leading-7 text-[#5B4A43]">{item.caption}</p>
|
||||
<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>
|
||||
))}
|
||||
@ -171,16 +172,19 @@ export default function HomePage() {
|
||||
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-[#F5E9DA]/45"
|
||||
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(35,24,18,0.08)]">
|
||||
<img className="h-56 w-full object-cover" loading="lazy" src={item.image} alt={item.name} />
|
||||
<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-[#C8A165]">{item.altitude}</p>
|
||||
<h3 className="font-brand-display mt-3 text-2xl text-[#3E2723]">{item.name}</h3>
|
||||
<p className="mt-3 text-sm leading-7 text-[#5B4A43]">{item.profile}</p>
|
||||
<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>
|
||||
))}
|
||||
@ -199,11 +203,11 @@ export default function HomePage() {
|
||||
>
|
||||
<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-[#3E2723]/8 bg-white p-5 shadow-[0_18px_60px_rgba(35,24,18,0.06)]">
|
||||
<div className="mt-1 text-[#C8A165]">
|
||||
<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-[#5B4A43]">{item}</p>
|
||||
<p className="text-sm leading-7 text-[#556257]">{item}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@ -214,13 +218,13 @@ export default function HomePage() {
|
||||
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-[#fffdf9]"
|
||||
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-[#3E2723]/8 bg-white p-7 shadow-[0_18px_60px_rgba(35,24,18,0.06)]">
|
||||
<p className="font-brand-display text-2xl leading-10 text-[#3E2723]">“{item.quote}”</p>
|
||||
<footer className="mt-6 text-sm font-medium uppercase tracking-[0.24em] text-[#8a6f59]">{item.author}</footer>
|
||||
<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>
|
||||
@ -230,11 +234,11 @@ export default function HomePage() {
|
||||
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-[#3E2723] text-white"
|
||||
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-[#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">
|
||||
Join the list for availability updates, new origin highlights, and company announcements shaped for professional buyers.
|
||||
</p>
|
||||
|
||||
@ -67,13 +67,13 @@ export default function LogisticsExportPage() {
|
||||
{logisticsPillars.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)]"
|
||||
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} />
|
||||
</div>
|
||||
<h2 className="font-brand-display mt-5 text-2xl text-[#3E2723]">{item.title}</h2>
|
||||
<p className="mt-4 text-sm leading-7 text-[#5B4A43]">{item.description}</p>
|
||||
<h2 className="font-brand-display mt-5 text-2xl text-[#1F3A2D]">{item.title}</h2>
|
||||
<p className="mt-4 text-sm leading-7 text-[#556257]">{item.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@ -83,18 +83,18 @@ export default function LogisticsExportPage() {
|
||||
eyebrow="Export flow"
|
||||
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."
|
||||
className="bg-[#fffdf9]"
|
||||
className="bg-[#F8FAF4]"
|
||||
>
|
||||
<div className="grid gap-4 lg:grid-cols-2">
|
||||
{timeline.map((step, index) => (
|
||||
<div
|
||||
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}
|
||||
</div>
|
||||
<p className="text-sm leading-7 text-[#5B4A43]">{step}</p>
|
||||
<p className="text-sm leading-7 text-[#556257]">{step}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@ -34,16 +34,16 @@ export default function QualityControlPage() {
|
||||
>
|
||||
<div className="grid gap-6 lg:grid-cols-3">
|
||||
{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 className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[#F5E9DA] text-[#3E2723]">
|
||||
<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-[#F4F1E6] text-[#1F3A2D]">
|
||||
<BaseIcon path={processIcons[index]} />
|
||||
</div>
|
||||
<h3 className="font-brand-display mt-5 text-3xl text-[#3E2723]">{item.title}</h3>
|
||||
<p className="mt-4 text-sm leading-7 text-[#5B4A43]">{item.highlight}</p>
|
||||
<h3 className="font-brand-display mt-5 text-3xl text-[#1F3A2D]">{item.title}</h3>
|
||||
<p className="mt-4 text-sm leading-7 text-[#556257]">{item.highlight}</p>
|
||||
<div className="mt-6 space-y-3">
|
||||
{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]">
|
||||
<span className="flex h-8 w-8 items-center justify-center rounded-full bg-[#3E2723] text-xs font-semibold text-[#F5E9DA]">
|
||||
<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-[#1F3A2D] text-xs font-semibold text-[#F4F1E6]">
|
||||
{stepIndex + 1}
|
||||
</span>
|
||||
{step}
|
||||
@ -59,11 +59,11 @@ export default function QualityControlPage() {
|
||||
eyebrow="Quality system"
|
||||
title="Measured, tasted, and reviewed before export"
|
||||
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">
|
||||
{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}
|
||||
</div>
|
||||
))}
|
||||
|
||||
@ -31,7 +31,7 @@ export default function SustainabilityPage() {
|
||||
>
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
{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}
|
||||
</div>
|
||||
))}
|
||||
|
||||
@ -34,16 +34,16 @@ export default function VisionMissionValuesPage() {
|
||||
eyebrow="Core values"
|
||||
title="The values that guide how we source, communicate, and deliver"
|
||||
centered
|
||||
className="bg-[#fffdf9]"
|
||||
className="bg-[#F8FAF4]"
|
||||
>
|
||||
<div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
|
||||
{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 className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[#F5E9DA] text-[#3E2723]">
|
||||
<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-[#F4F1E6] text-[#1F3A2D]">
|
||||
<BaseIcon path={icons[index]} />
|
||||
</div>
|
||||
<h3 className="font-brand-display mt-5 text-2xl text-[#3E2723]">{item.title}</h3>
|
||||
<p className="mt-4 text-sm leading-7 text-[#5B4A43]">{item.description}</p>
|
||||
<h3 className="font-brand-display mt-5 text-2xl text-[#1F3A2D]">{item.title}</h3>
|
||||
<p className="mt-4 text-sm leading-7 text-[#556257]">{item.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@ -56,7 +56,7 @@ export default function VisionMissionValuesPage() {
|
||||
>
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
{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}
|
||||
</div>
|
||||
))}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user