diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx new file mode 100644 index 0000000..ca71afe --- /dev/null +++ b/src/pages/Index.tsx @@ -0,0 +1,318 @@ +import { useState } from "react"; +import { toast } from "sonner"; +import { Link } from "react-router-dom"; +import { Button } from "@/components/ui/button"; +import { Card, CardContent } from "@/components/ui/card"; +import { Badge } from "@/components/ui/badge"; +import { Input } from "@/components/ui/input"; +import { Separator } from "@/components/ui/separator"; +import { + Truck, RotateCcw, ShieldCheck, Star, ArrowRight, Heart, + ChevronRight, Mail, Sparkles, Check +} from "lucide-react"; +import Header from "@/components/Header"; +import Footer from "@/components/Footer"; +import { useSaasMutation } from "@/hooks/use-tygarun"; + +const featuredProducts = [ + { id: 1, name: "Classic Leather Jacket", price: 189, originalPrice: 249, rating: 5, sale: true, gradient: "from-rose-100 to-stone-200", image: "" }, + { id: 2, name: "Silk Evening Dress", price: 245, originalPrice: null, rating: 5, sale: false, gradient: "from-amber-100 to-orange-200", image: "" }, + { id: 3, name: "Cashmere Knit Sweater", price: 128, originalPrice: null, rating: 4, sale: false, gradient: "from-stone-100 to-stone-300", image: "" }, + { id: 4, name: "Linen Wide-Leg Trousers", price: 95, originalPrice: 135, rating: 4, sale: true, gradient: "from-rose-50 to-amber-100", image: "" }, + { id: 5, name: "Italian Leather Handbag", price: 320, originalPrice: null, rating: 5, sale: false, gradient: "from-stone-200 to-rose-100", image: "" }, + { id: 6, name: "Merino Wool Blazer", price: 165, originalPrice: null, rating: 4, sale: false, gradient: "from-amber-50 to-stone-200", image: "" }, +]; + +const categories = [ + { name: "Women", gradient: "from-stone-700 to-stone-900", count: 124 }, + { name: "Men", gradient: "from-rose-700 to-rose-900", count: 86 }, + { name: "Accessories", gradient: "from-amber-700 to-amber-900", count: 53 }, + { name: "Footwear", gradient: "from-stone-600 to-rose-800", count: 97 }, +]; + +export default function IndexPage() { + const [email, setEmail] = useState(""); + const [subscribed, setSubscribed] = useState(false); + const { mutate: subscribeNewsletter, loading: subscribing } = useSaasMutation("email", "/send/newsletter-confirm"); + + const handleSubscribe = async (e: React.FormEvent) => { + e.preventDefault(); + if (!email) return; + try { + await subscribeNewsletter({ email }); + setSubscribed(true); + toast.success("Subscribed!"); + } catch { + toast.error("Could not subscribe. Please try again."); + } + }; + + const renderStars = (count: number) => + Array.from({ length: 5 }, (_, i) => ( + + )); + + return ( +
+
+ + {/* ── HERO ── */} +
+ {/* Floating gradient blurs */} +
+
+
+
+ {/* Dot grid pattern overlay */} +
+
+
+ + Summer Sale:Up to 40% Off + +

+ Elevate Your Everyday Style +

+

+ Discover curated collections of premium fashion, accessories, and lifestyle essentials crafted for the modern individual. +

+
+ + +
+
+ Free Shipping Over $100 + 30-Day Returns + Secure Checkout +
+
+ {/* Featured product card floating on right */} +
+ +
+
+
+
+
Featured
+ Trending +
+ +

{featuredProducts[0].name}

+

\${featuredProducts[0].price}

+ + +
+
+
+ + {/* ── FEATURED PRODUCTS ── */} +
+
+
+
+

Featured Collection

+

Handpicked pieces for the season

+
+ + View All + +
+
+ {featuredProducts.map((product, i) => ( + + +
+
+
+
+
+ Product Image +
+ {product.sale && ( + Sale + )} + +
+
+ +

{product.name}

+
+
{renderStars(product.rating)}
+
+ \${product.price} + {product.originalPrice && ( + \${product.originalPrice} + )} +
+
{[...Array(5)].map((_, j) => )}
(128)
+ {i < 2 && Only 3 left} + + + + ))} +
+
+ +
+
+
+ + {/* ── CATEGORIES ── */} +
+
+

Shop by Category

+
+ {categories.map((cat) => ( + +
+
+
+

{cat.name}

+

{cat.count} items

+ + Shop Now + +
+ + ))} +
+
+
+ + {/* ── TRUST BAR ── */} +
+
+ {[ + { icon: Truck, title: "Free Shipping", desc: "On orders over $100" }, + { icon: RotateCcw, title: "Easy Returns", desc: "30-day return policy" }, + { icon: ShieldCheck, title: "Secure Payment", desc: "SSL encrypted checkout" }, + { icon: Sparkles, title: "Premium Quality", desc: "Handpicked materials" }, + ].map((item) => ( +
+
+ +
+

{item.title}

+

{item.desc}

+
+ ))} +
+
+ + {/* ── THE COLLECTION LOOKBOOK ── */} +
+
+

The Collection

+
+
+
+
+
+ New Season +

Spring Essentials

+
+
+
+
+
+
+
+ Trending +

Accessories

+
+
+
+
+
+
+
+ Popular +

Best Sellers

+
+
+
+
+
+
+
+ Exclusive +

Limited Edition

+
+
+
+
+
+
+ + {/* ── BRAND STORY ── */} +
+
+

Our Story

+

Crafted with Care Since 2020

+

Every piece in our collection is thoughtfully designed and ethically sourced. We believe in quality over quantity, creating timeless pieces that tell a story.

+ +
+
+ + {/* ── NEWSLETTER ── */} +
+
+ +

Stay in the Loop

+

Get early access to new arrivals, exclusive deals, and styling tips.

+ {subscribed ? ( +
+
+ You're subscribed! Check your inbox. +
+
+ ) : ( +
+ setEmail(e.target.value)} + className="bg-white/10 border-white/20 text-white placeholder:text-stone-400 rounded-full" + /> + +
+ )} +

Join 15,000+ subscribers. No spam, unsubscribe anytime.

+
+
+ + {/* ── INSTAGRAM GALLERY ── */} +
+
+

Follow @StyleHaus

+

Tag us in your looks for a chance to be featured

+
+ {["from-rose-100 to-rose-200", "from-stone-100 to-stone-200", "from-amber-100 to-amber-200", + "from-rose-200 to-stone-100", "from-stone-200 to-amber-100", "from-amber-200 to-rose-100" + ].map((grad, i) => ( +
+
+ +
+
+ ))} +
+
+
+ +
+ ); +}