Update app/page.tsx

app/page.tsx

@@ -0,0 +1,84 @@
+import { Hero } from "@/components/hero";
+import { Services } from "@/components/services";
+import { Pricing } from "@/components/pricing";
+import { ContactSection } from "@/components/contact-section";
+import { Footer } from "@/components/footer";
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Subheading } from "@/components/subheading";
+import { CheckCircle2 } from "lucide-react";
+import Image from "next/image";
+
+export default function Home() {
+  return (
+    <main className="bg-white text-neutral-900">
+      <Hero />
+      
+      {/* Why Choose Us Section with Bright Background */}
+      <section className="relative py-32 overflow-hidden bg-neutral-50">
+        <div className="absolute inset-0 -z-10">
+          <Image 
+            src="https://images.unsplash.com/photo-1497366216548-37526070297c?q=80&w=2069&auto=format&fit=crop"
+            alt="Bright Workspace"
+            fill
+            className="object-cover opacity-5"
+          />
+        </div>
+
+        <Container>
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-20 items-center">
+            <div>
+              <Heading className="text-4xl md:text-5xl mb-6 text-neutral-900 font-bold">Why Choose Websitter?</Heading>
+              <Subheading className="mb-10 text-neutral-600 text-lg font-medium">
+                We don't just build websites; we build growth engines for your business. Our process is designed for speed, quality, and results.
+              </Subheading>
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
+                {[
+                  "Modern & mobile-friendly designs",
+                  "SEO-optimized for local search",
+                  "Fast delivery (usually within 7 days)",
+                  "Affordable pricing for small businesses",
+                  "Free demo before you commit",
+                  "24/7 Dedicated Support",
+                ].map((item, i) => (
+                  <div key={i} className="flex items-center gap-3 group">
+                    <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center group-hover:bg-primary transition-colors">
+                      <CheckCircle2 className="w-5 h-5 text-primary group-hover:text-white" />
+                    </div>
+                    <span className="font-bold text-neutral-800">{item}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+            
+            <div className="relative group">
+              <div className="absolute -inset-4 bg-primary/5 rounded-3xl blur-2xl opacity-50" />
+              <div className="relative aspect-video rounded-2xl overflow-hidden border border-neutral-200 shadow-2xl">
+                <Image 
+                  src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?q=80&w=2015&auto=format&fit=crop"
+                  alt="Analytics Preview"
+                  fill
+                  className="object-cover group-hover:scale-105 transition-transform duration-700"
+                />
+                <div className="absolute inset-0 bg-white/10 flex items-center justify-center">
+                  <div className="p-8 bg-white/95 backdrop-blur-md rounded-2xl border border-neutral-200 shadow-2xl max-w-xs text-center transform group-hover:scale-105 transition-transform duration-500">
+                    <div className="w-16 h-16 bg-primary rounded-full flex items-center justify-center mx-auto mb-4 shadow-lg">
+                      <div className="w-0 h-0 border-t-[10px] border-t-transparent border-l-[15px] border-l-white border-b-[10px] border-b-transparent ml-1" />
+                    </div>
+                    <p className="text-lg font-black text-neutral-900 mb-2 uppercase tracking-widest">Free Demo</p>
+                    <p className="text-sm text-neutral-600 leading-relaxed font-medium">We build your site first. You pay only if you love it.</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </Container>
+      </section>
+
+      <Services />
+      <Pricing />
+      <ContactSection />
+      <Footer />
+    </main>
+  );
+}