From fca2c25e12f5891e61f92e08815ddaa554f077d1 Mon Sep 17 00:00:00 2001
From: Biswa Kalyan Bhuyan <biswa@surgot.in>
Date: Wed, 28 May 2025 16:30:40 +0530
Subject: feat: added frontpage layout

---
 frontend/src/components/hero-section.tsx | 163 +++++++++++++++++++++++++++++++
 1 file changed, 163 insertions(+)
 create mode 100644 frontend/src/components/hero-section.tsx

(limited to 'frontend/src/components/hero-section.tsx')

diff --git a/frontend/src/components/hero-section.tsx b/frontend/src/components/hero-section.tsx
new file mode 100644
index 0000000..2450365
--- /dev/null
+++ b/frontend/src/components/hero-section.tsx
@@ -0,0 +1,163 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { ArrowRight, Star, Sparkles } from "lucide-react";
+import Link from "next/link";
+
+export function HeroSection() {
+  return (
+    <section className="relative overflow-hidden bg-gradient-to-br from-neutral-50 via-white to-neutral-100">
+      {/* Background decoration */}
+      <div className="absolute inset-0 bg-grid-pattern opacity-5"></div>
+      <div className="absolute top-20 right-20 w-72 h-72 bg-primary/5 rounded-full blur-3xl"></div>
+      <div className="absolute bottom-20 left-20 w-96 h-96 bg-secondary/5 rounded-full blur-3xl"></div>
+
+      <div className="container mx-auto px-4 py-20 lg:py-32">
+        <div className="grid lg:grid-cols-2 gap-12 items-center">
+          {/* Left side - Content */}
+          <div className="space-y-8">
+            {/* Badge */}
+            <div className="flex items-center space-x-2">
+              <Badge variant="secondary" className="px-3 py-1 text-sm font-medium">
+                <Sparkles className="w-3 h-3 mr-1" />
+                New Winter Collection
+              </Badge>
+              <Badge variant="outline" className="px-3 py-1 text-sm">
+                Limited Time
+              </Badge>
+            </div>
+
+            {/* Main heading */}
+            <div className="space-y-4">
+              <h1 className="text-4xl lg:text-6xl font-bold leading-tight">
+                Curated
+                <span className="block text-primary">Exclusives</span>
+              </h1>
+              <p className="text-lg lg:text-xl text-muted-foreground max-w-lg">
+                not everyone gets blcklsted. Discover carefully curated fashion pieces that define modern elegance and exclusivity.
+              </p>
+            </div>
+
+            {/* Features */}
+            <div className="flex flex-wrap gap-6 text-sm">
+              <div className="flex items-center space-x-2">
+                <div className="w-2 h-2 bg-green-500 rounded-full"></div>
+                <span>Free shipping worldwide</span>
+              </div>
+              <div className="flex items-center space-x-2">
+                <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
+                <span>30-day easy returns</span>
+              </div>
+              <div className="flex items-center space-x-2">
+                <div className="w-2 h-2 bg-purple-500 rounded-full"></div>
+                <span>Sustainable materials</span>
+              </div>
+            </div>
+
+            {/* CTA Buttons */}
+            <div className="flex flex-col sm:flex-row gap-4">
+              <Button asChild size="lg" className="text-base px-8">
+                <Link href="/shop">
+                  Shop Now
+                  <ArrowRight className="ml-2 h-4 w-4" />
+                </Link>
+              </Button>
+              <Button variant="outline" size="lg" className="text-base px-8" asChild>
+                <Link href="/collections">
+                  View Collections
+                </Link>
+              </Button>
+            </div>
+
+            {/* Social proof */}
+            <div className="flex items-center space-x-6 pt-4">
+              <div className="flex items-center space-x-1">
+                <div className="flex">
+                  {[1, 2, 3, 4, 5].map((star) => (
+                    <Star key={star} className="w-4 h-4 fill-yellow-400 text-yellow-400" />
+                  ))}
+                </div>
+                <span className="text-sm font-medium">4.9/5</span>
+              </div>
+              <div className="text-sm text-muted-foreground">
+                Trusted by <span className="font-semibold text-foreground">50,000+</span> customers
+              </div>
+            </div>
+          </div>
+
+          {/* Right side - Product showcase */}
+          <div className="relative">
+            {/* Main product image */}
+            <div className="relative bg-gradient-to-br from-neutral-100 to-neutral-200 rounded-2xl p-8 lg:p-12">
+              <div className="aspect-[3/4] bg-gradient-to-br from-neutral-300 to-neutral-400 rounded-xl flex items-center justify-center">
+                <div className="text-center text-neutral-600">
+                  <div className="w-16 h-16 bg-neutral-500 rounded-full mx-auto mb-4 flex items-center justify-center">
+                    <Sparkles className="w-8 h-8 text-white" />
+                  </div>
+                  <p className="font-medium">Featured Product</p>
+                  <p className="text-sm">Premium Winter Coat</p>
+                </div>
+              </div>
+
+              {/* Price tag */}
+              <div className="absolute -top-4 -right-4 bg-red-500 text-white px-4 py-2 rounded-full shadow-lg">
+                <span className="text-sm font-bold">50% OFF</span>
+              </div>
+            </div>
+
+            {/* Floating product cards */}
+            <div className="absolute -left-6 top-1/4 bg-white rounded-lg shadow-lg p-4 max-w-[200px] border">
+              <div className="flex items-center space-x-3">
+                <div className="w-12 h-12 bg-gradient-to-br from-pink-100 to-pink-200 rounded-lg"></div>
+                <div>
+                  <p className="font-medium text-sm">Summer Dress</p>
+                  <p className="text-xs text-muted-foreground">$89.99</p>
+                  <div className="flex items-center space-x-1 mt-1">
+                    <Star className="w-3 h-3 fill-yellow-400 text-yellow-400" />
+                    <span className="text-xs">4.8</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className="absolute -right-8 bottom-1/4 bg-white rounded-lg shadow-lg p-4 max-w-[200px] border">
+              <div className="flex items-center space-x-3">
+                <div className="w-12 h-12 bg-gradient-to-br from-blue-100 to-blue-200 rounded-lg"></div>
+                <div>
+                  <p className="font-medium text-sm">Casual Sneakers</p>
+                  <p className="text-xs text-muted-foreground">$129.99</p>
+                  <div className="flex items-center space-x-1 mt-1">
+                    <Star className="w-3 h-3 fill-yellow-400 text-yellow-400" />
+                    <span className="text-xs">4.9</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Stats bubble */}
+            <div className="absolute top-8 -left-4 bg-primary text-primary-foreground rounded-3xl px-6 py-3 shadow-lg">
+              <div className="text-center">
+                <p className="text-xs font-medium">This Week</p>
+                <p className="text-lg font-bold">2.5K+</p>
+                <p className="text-xs">Orders</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Bottom wave */}
+      <div className="absolute bottom-0 left-0 right-0">
+        <svg
+          className="w-full h-12 fill-white"
+          viewBox="0 0 1200 120"
+          preserveAspectRatio="none"
+        >
+          <path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z"
+          />
+        </svg>
+      </div>
+    </section>
+  );
+} 
\ No newline at end of file
-- 
cgit v1.2.3-59-g8ed1b