61 lines
2.5 KiB
TypeScript
61 lines
2.5 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 Link from "next/link";
|
|
import { BlurImage } from "@/components/blur-image";
|
|
|
|
export function Hero() {
|
|
return (
|
|
<section className="relative py-20 md:py-32 overflow-hidden">
|
|
<Container>
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
|
<div className="space-y-6">
|
|
<Heading className="text-left">
|
|
Transform Your Space with Premium Furniture
|
|
</Heading>
|
|
<Subheading className="text-left">
|
|
Discover our curated collection of modern, stylish furniture designed to elevate every room in your home. Quality craftsmanship meets affordable luxury.
|
|
</Subheading>
|
|
<div className="flex gap-4">
|
|
<Link href="/shop">
|
|
<Button size="lg" className="text-base">
|
|
Shop Now
|
|
</Button>
|
|
</Link>
|
|
<Link href="/categories">
|
|
<Button size="lg" variant="outline" className="text-base">
|
|
Browse Categories
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
<div className="flex gap-8 pt-4">
|
|
<div>
|
|
<p className="text-2xl font-bold text-neutral-900 dark:text-neutral-100">500+</p>
|
|
<p className="text-sm text-neutral-600 dark:text-neutral-400">Products</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-2xl font-bold text-neutral-900 dark:text-neutral-100">10k+</p>
|
|
<p className="text-sm text-neutral-600 dark:text-neutral-400">Happy Customers</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-2xl font-bold text-neutral-900 dark:text-neutral-100">Free</p>
|
|
<p className="text-sm text-neutral-600 dark:text-neutral-400">Delivery</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="relative h-[400px] lg:h-[500px] rounded-2xl overflow-hidden">
|
|
<BlurImage
|
|
src="https://images.unsplash.com/photo-1555041469-a586c61ea9bc?w=800&q=80"
|
|
alt="Modern living room with stylish furniture"
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
);
|
|
}
|