56 lines
2.6 KiB
TypeScript
56 lines
2.6 KiB
TypeScript
import { mdiTerrain, mdiWeatherPartlyCloudy, mdiSprout, mdiHumanGreeting } from '@mdi/js';
|
|
import type { ReactElement } from 'react';
|
|
import React from 'react';
|
|
|
|
import BaseIcon from '../components/BaseIcon';
|
|
import MarketingLayout from '../components/marketing/MarketingLayout';
|
|
import MarketingPageHero from '../components/marketing/MarketingPageHero';
|
|
import MarketingSeo from '../components/marketing/MarketingSeo';
|
|
import MarketingSection from '../components/marketing/MarketingSection';
|
|
import { philosophyPillars } from '../components/marketing/marketingData';
|
|
import LayoutGuest from '../layouts/Guest';
|
|
|
|
const icons = [mdiTerrain, mdiSprout, mdiWeatherPartlyCloudy, mdiHumanGreeting];
|
|
|
|
export default function CoffeePhilosophyPage() {
|
|
return (
|
|
<>
|
|
<MarketingSeo
|
|
title="Coffee Philosophy"
|
|
description="Coffee excellence begins at origin — patience, altitude, climate, soil, and craftsmanship define premium Ethiopian coffee."
|
|
/>
|
|
<MarketingLayout>
|
|
<MarketingPageHero
|
|
eyebrow="Coffee philosophy"
|
|
title="Coffee Excellence Begins at Origin"
|
|
description="Coffee is not industrial. It is crafted — by land, weather, skilled hands, and the patience required to let quality mature naturally."
|
|
image="https://images.unsplash.com/photo-1509042239860-f550ce710b93?auto=format&fit=crop&w=1400&q=80"
|
|
/>
|
|
|
|
<MarketingSection
|
|
eyebrow="Our belief"
|
|
title="Great coffee is the result of nature and human discipline working together"
|
|
description="This page articulates a premium sourcing philosophy buyers can feel: Ethiopian coffee is a crafted product, not a commodity shortcut."
|
|
centered
|
|
>
|
|
<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]">
|
|
<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>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</MarketingSection>
|
|
</MarketingLayout>
|
|
</>
|
|
);
|
|
}
|
|
|
|
CoffeePhilosophyPage.getLayout = function getLayout(page: ReactElement) {
|
|
return <LayoutGuest>{page}</LayoutGuest>;
|
|
};
|