49 lines
2.4 KiB
TypeScript
49 lines
2.4 KiB
TypeScript
"use client";
|
|
import { Container } from "@/components/container";
|
|
import { Heading } from "@/components/heading";
|
|
import { Subheading } from "@/components/subheading";
|
|
import { Button } from "@/components/ui/button";
|
|
import Image from "next/image";
|
|
|
|
export function Hero() {
|
|
return (
|
|
<section className="relative w-full py-20 md:py-32 overflow-hidden bg-stone-50">
|
|
<Container className="relative z-10">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
|
<div>
|
|
<Heading className="text-5xl md:text-7xl font-serif text-stone-900 leading-tight">
|
|
The Essence of <span className="text-amber-700">Colombian Coffee</span>
|
|
</Heading>
|
|
<Subheading className="mt-6 text-lg text-stone-600 max-w-xl">
|
|
Directly from the heart of Quindío. Experience 30 years of tradition,
|
|
sustainability, and the finest hand-selected beans delivered to your doorstep in the USA.
|
|
</Subheading>
|
|
<div className="flex flex-wrap gap-4 mt-10">
|
|
<Button size="lg" className="bg-amber-800 hover:bg-amber-900 text-white px-8">
|
|
Shop Now
|
|
</Button>
|
|
<Button size="lg" variant="outline" className="border-stone-300 text-stone-700">
|
|
Our Heritage
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className="relative h-[400px] md:h-[500px] rounded-2xl overflow-hidden shadow-2xl">
|
|
<Image
|
|
src="https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?q=80&w=2070&auto=format&fit=crop"
|
|
alt="Fresh Colombian Coffee"
|
|
fill
|
|
className="object-cover"
|
|
priority
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
<div className="absolute top-0 right-0 -z-0 opacity-10">
|
|
<svg width="400" height="400" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
|
<path fill="#78350f" d="M44.7,-76.4C58.1,-69.2,69.2,-58.1,76.4,-44.7C83.7,-31.3,87.1,-15.7,85.8,-0.7C84.5,14.2,78.6,28.5,69.8,40.8C61,53.1,49.3,63.5,35.8,70.8C22.3,78.1,7,82.3,-8.5,80.8C-24,79.3,-39.7,72.1,-52.8,61.4C-65.9,50.7,-76.4,36.5,-81.4,20.7C-86.4,4.9,-85.9,-12.5,-79.8,-27.9C-73.7,-43.3,-62,-56.7,-48.2,-64.1C-34.4,-71.5,-18.5,-72.9,-1.9,-69.6C14.7,-66.3,29.4,-58.3,44.7,-76.4Z" transform="translate(100 100)" />
|
|
</svg>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|