Update app/page.tsx
This commit is contained in:
parent
65bf5ca5e2
commit
0e1e482f42
|
|
@ -0,0 +1,131 @@
|
|||
import { Hero } from "@/components/hero";
|
||||
import { Container } from "@/components/container";
|
||||
import { Heading } from "@/components/heading";
|
||||
import { Subheading } from "@/components/subheading";
|
||||
import { ProductCard, Product } from "@/components/product-card";
|
||||
import { Footer } from "@/components/footer";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { Badge } from "@/components/badge";
|
||||
|
||||
const featuredProducts: Product[] = [
|
||||
{
|
||||
id: "1",
|
||||
name: "Classic Oxford Leather",
|
||||
price: 189,
|
||||
category: "Formal",
|
||||
image: "https://images.unsplash.com/photo-1653868250450-b83e6263d427?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyOTY1MDl8MHwxfHNlYXJjaHwzfHxsdXh1cnklMjBzaG9lcyUyMHNuZWFrZXJzJTIwZm9ybWFsJTIwbWVuJTIwd29tZW4lMjBmYXNoaW9ufGVufDB8MHx8fDE3Njg1NDE4MTl8MA&ixlib=rb-4.1.0&q=80&w=1080",
|
||||
isNew: true
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Urban Runner Pro",
|
||||
price: 129,
|
||||
category: "Sneakers",
|
||||
image: "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"
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Elegance Stiletto",
|
||||
price: 249,
|
||||
category: "Women",
|
||||
image: "https://images.unsplash.com/photo-1618274158630-bc47a614b3a5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyOTY1MDl8MHwxfHNlYXJjaHwyfHxsdXh1cnklMjBzaG9lcyUyMHNuZWFrZXJzJTIwZm9ybWFsJTIwbWVuJTIwd29tZW4lMjBmYXNoaW9ufGVufDB8MHx8fDE3Njg1NDE4MTl8MA&ixlib=rb-4.1.0&q=80&w=1080",
|
||||
isSale: true
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Heritage Brogue",
|
||||
price: 210,
|
||||
category: "Formal",
|
||||
image: "https://images.unsplash.com/photo-1664505504065-31f8937d2261?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyOTY1MDl8MHwxfHNlYXJjaHw0fHxsdXh1cnklMjBzaG9lcyUyMHNuZWFrZXJzJTIwZm9ybWFsJTIwbWVuJTIwd29tZW4lMjBmYXNoaW9ufGVufDB8MHx8fDE3Njg1NDE4MTl8MA&ixlib=rb-4.1.0&q=80&w=1080"
|
||||
}
|
||||
];
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main className="min-h-screen">
|
||||
<Hero />
|
||||
|
||||
<section className="py-24 bg-white">
|
||||
<Container>
|
||||
<div className="flex flex-col md:flex-row justify-between items-end mb-12 gap-6">
|
||||
<div className="max-w-xl">
|
||||
<Heading>Featured Collection</Heading>
|
||||
<Subheading className="mt-4">
|
||||
Handpicked styles that define modern elegance and comfort.
|
||||
</Subheading>
|
||||
</div>
|
||||
<Button variant="outline" asChild>
|
||||
<Link href="/shop">View All Products</Link>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{featuredProducts.map((product) => (
|
||||
<ProductCard key={product.id} product={product} />
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<section className="py-24 bg-neutral-50">
|
||||
<Container>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||||
<div className="relative aspect-video lg:aspect-square rounded-3xl overflow-hidden">
|
||||
<Image
|
||||
src="https://images.unsplash.com/photo-1646139498425-5bceb422ba6a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyOTY1MDl8MHwxfHNlYXJjaHw1fHxsdXh1cnklMjBzaG9lcyUyMHNuZWFrZXJzJTIwZm9ybWFsJTIwbWVuJTIwd29tZW4lMjBmYXNoaW9ufGVufDB8MHx8fDE3Njg1NDE4MTl8MA&ixlib=rb-4.1.0&q=80&w=1080"
|
||||
alt="Custom Fitting Session"
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Badge className="mb-4">Exclusive Service</Badge>
|
||||
<Heading className="text-4xl font-bold mb-6">Perfect Fit, Guaranteed.</Heading>
|
||||
<p className="text-neutral-600 text-lg mb-8 leading-relaxed">
|
||||
Experience the luxury of a custom shoe fitting. Our experts will help you find the perfect size and style tailored to your unique foot shape and lifestyle needs.
|
||||
</p>
|
||||
<ul className="space-y-4 mb-10">
|
||||
<li className="flex items-center gap-3 text-neutral-700">
|
||||
<div className="w-2 h-2 rounded-full bg-primary" />
|
||||
Professional measurement & analysis
|
||||
</li>
|
||||
<li className="flex items-center gap-3 text-neutral-700">
|
||||
<div className="w-2 h-2 rounded-full bg-primary" />
|
||||
Personalized style consultation
|
||||
</li>
|
||||
<li className="flex items-center gap-3 text-neutral-700">
|
||||
<div className="w-2 h-2 rounded-full bg-primary" />
|
||||
Exclusive access to custom materials
|
||||
</li>
|
||||
</ul>
|
||||
<Button size="lg" asChild>
|
||||
<Link href="/book">Book Your Fitting Now</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<section className="py-24 bg-black text-white">
|
||||
<Container className="text-center">
|
||||
<Heading className="text-white mb-6">Join the SoleVibe Community</Heading>
|
||||
<Subheading className="text-neutral-400 mb-10 max-w-2xl mx-auto">
|
||||
Subscribe to receive updates, access to exclusive deals, and more.
|
||||
</Subheading>
|
||||
<div className="flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Enter your email"
|
||||
className="flex-1 px-6 py-3 rounded-full bg-neutral-800 border-neutral-700 text-white focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
/>
|
||||
<Button className="rounded-full px-8">Subscribe</Button>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue