54 lines
2.5 KiB
TypeScript
54 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 Image from "next/image";
|
|
import Link from "next/link";
|
|
|
|
export function Hero() {
|
|
return (
|
|
<section className="relative min-h-[80vh] flex items-center overflow-hidden bg-neutral-50">
|
|
<Container className="relative z-10 grid grid-cols-1 lg:grid-cols-2 gap-12 items-center py-20">
|
|
<div className="max-w-2xl">
|
|
<Heading className="text-5xl md:text-7xl font-bold tracking-tight text-neutral-900">
|
|
Step Into <span className="text-primary">Excellence</span>
|
|
</Heading>
|
|
<Subheading className="mt-6 text-lg md:text-xl text-neutral-600 leading-relaxed">
|
|
Discover our curated collection of high-quality footwear. From formal elegance to casual comfort, find the perfect pair for every occasion.
|
|
</Subheading>
|
|
<div className="flex flex-wrap gap-4 mt-10">
|
|
<Button size="lg" asChild className="px-8 py-6 text-lg">
|
|
<Link href="/shop">Shop New Arrivals</Link>
|
|
</Button>
|
|
<Button size="lg" variant="outline" asChild className="px-8 py-6 text-lg">
|
|
<Link href="/book">Book a Fitting</Link>
|
|
</Button>
|
|
</div>
|
|
<div className="mt-12 flex items-center gap-8">
|
|
<div>
|
|
<p className="text-2xl font-bold text-neutral-900">5k+</p>
|
|
<p className="text-sm text-neutral-500">Happy Customers</p>
|
|
</div>
|
|
<div className="w-px h-10 bg-neutral-200" />
|
|
<div>
|
|
<p className="text-2xl font-bold text-neutral-900">200+</p>
|
|
<p className="text-sm text-neutral-500">Unique Styles</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="relative aspect-square lg:aspect-auto lg:h-[600px] rounded-3xl overflow-hidden shadow-2xl">
|
|
<Image
|
|
src="https://images.unsplash.com/photo-1600202280810-e0b3f6f1933e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyOTY1MDl8MHwxfHNlYXJjaHwxfHxsdXh1cnklMjBzaG9lcyUyMHNuZWFrZXJzJTIwZm9ybWFsJTIwbWVuJTIwd29tZW4lMjBmYXNoaW9ufGVufDB8MHx8fDE3Njg1NDE4MTl8MA&ixlib=rb-4.1.0&q=80&w=1080"
|
|
alt="Premium Leather Boots"
|
|
fill
|
|
className="object-cover"
|
|
priority
|
|
/>
|
|
</div>
|
|
</Container>
|
|
<div className="absolute top-0 right-0 w-1/3 h-full bg-neutral-100 -z-0 hidden lg:block" />
|
|
</section>
|
|
);
|
|
}
|