Update components/hero.tsx

components/hero.tsx

@@ -0,0 +1,58 @@
+"use client";
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Subheading } from "@/components/subheading";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/badge";
+import { motion } from "framer-motion";
+import Image from "next/image";
+
+export function Hero() {
+  return (
+    <section className="relative pt-20 pb-16 md:pt-32 md:pb-24 overflow-hidden min-h-[90vh] flex items-center bg-white">
+      {/* Bright Background Image with Light Overlay */}
+      <div className="absolute inset-0 -z-10">
+        <Image 
+          src="https://images.unsplash.com/photo-1497215728101-856f4ea42174?q=80&w=2070&auto=format&fit=crop"
+          alt="Bright Office Background"
+          fill
+          className="object-cover opacity-20"
+          priority
+        />
+        <div className="absolute inset-0 bg-gradient-to-b from-white/40 via-white/80 to-white" />
+      </div>
+
+      <Container>
+        <div className="flex flex-col items-center text-center max-w-4xl mx-auto relative z-10">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+          >
+            <Badge variant="outline" className="mb-4 bg-primary/5 border-primary/20 text-primary font-semibold px-4 py-1">
+              Web Design & Development Agency
+            </Badge>
+            <Heading as="h1" className="text-5xl md:text-8xl font-extrabold tracking-tight mb-6 text-neutral-900">
+              Professional Websites That <span className="text-primary">Grow Your Business</span>
+            </Heading>
+            <Subheading className="text-lg md:text-2xl text-neutral-700 mb-10 max-w-2xl mx-auto leading-relaxed font-medium">
+              We build high-converting, modern websites for startups, restaurants, and local businesses. Get a free demo before you pay a single cent.
+            </Subheading>
+            <div className="flex flex-col sm:flex-row gap-6 justify-center">
+              <Button size="lg" className="px-10 py-7 text-lg rounded-full shadow-lg hover:shadow-xl transition-all font-bold">
+                Get a Free Demo
+              </Button>
+              <Button size="lg" variant="outline" className="px-10 py-7 text-lg rounded-full border-neutral-300 text-neutral-900 hover:bg-neutral-50 font-bold">
+                View Our Work
+              </Button>
+            </div>
+          </motion.div>
+        </div>
+      </Container>
+      
+      {/* Subtle Soft Glows */}
+      <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-primary/10 rounded-full blur-[120px]" />
+      <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-blue-200/20 rounded-full blur-[120px]" />
+    </section>
+  );
+}