src/index.css

@@ -1,19 +1,19 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
 @import "tailwindcss";
 @import "./styles/masks.css";
 @import "./styles/animations.css";
 
 :root {
   /* @colorThemes/lightTheme/grayNavyBlue */
-  --background: #f5faff;
-  --card: #ffffff;
-  --foreground: #001122;
-  --primary-cta: #15479c;
-  --primary-cta-text: #f5faff;
-  --secondary-cta: #ffffff;
-  --secondary-cta-text: #001122;
-  --accent: #a8cce8;
-  --background-accent: #7ba3cf;
+  --background: #0D0D0D;
+  --card: #1A1A1A;
+  --foreground: #FFFFFF;
+  --primary-cta: #00FFAA;
+  --primary-cta-text: #000000;
+  --secondary-cta: #0088FF;
+  --secondary-cta-text: #FFFFFF;
+  --accent: #FF6600;
+  --background-accent: #222222;
 
   /* @layout/border-radius/rounded */
   --radius: 0.5rem;
@@ -88,7 +88,7 @@
   --color-background-accent: var(--background-accent);
 
   /* Fonts */
-  --font-sans: 'Poppins', sans-serif;
+  --font-sans: 'Space Grotesk', sans-serif;
   --font-tight: "Inter Tight", sans-serif;
   --font-mono: monospace;
 

src/pages/HomePage.tsx

@@ -1,245 +1,33 @@
-import AboutTextSplit from '@/components/sections/about/AboutTextSplit';
-import ContactCta from '@/components/sections/contact/ContactCta';
-import FaqTwoColumn from '@/components/sections/faq/FaqTwoColumn';
-import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
-import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
-import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
-import PricingLayeredCards from '@/components/sections/pricing/PricingLayeredCards';
-import { Shield, Smartphone, TrendingUp } from "lucide-react";
-import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+// AUTO-GENERATED shell by per-section-migrate.
+// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
+// files directly. Non-block content (wrappers, non-inlinable sections) is
+// preserved inline; extracted section blocks become <XSection/> refs.
 
-export default function HomePage() {
+import React from 'react';
+
+
+import HeroNewSection from './HomePage/sections/HeroNew';
+import ServicesNewSection from './HomePage/sections/ServicesNew';
+import PortfolioNewSection from './HomePage/sections/PortfolioNew';
+import AboutNewSection from './HomePage/sections/AboutNew';
+import ContactNewSection from './HomePage/sections/ContactNew';
+import FaqSection from './HomePage/sections/Faq';
+import MetricsSection from './HomePage/sections/Metrics';export default function HomePage(): React.JSX.Element {
   return (
-    <>
-  <div id="hero" data-section="hero">
-    <SectionErrorBoundary name="hero">
-          <HeroBillboardCarousel
-      tag="Prauha"
-      title="Websites That Grow Your Business"
-      description="I help dental clinics, restaurants, and local businesses in Jhansi get professional, high-converting websites that attract more customers."
-      primaryButton={{
-        text: "Start Project",
-        href: "#contact",
-      }}
-      secondaryButton={{
-        text: "See Services",
-        href: "#services",
-      }}
-      items={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/man-entering-startup-agency-office-holding-laptop_482257-125888.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/it-specialist-looking-network-issues-affecting-rigs-performance-using-tablet_482257-121917.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-using-computer-laptop_53876-41453.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/business-evaluation-information-growth-concept_53876-125573.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-modern-office-buildings-shanghai_1359-642.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/young-employees-sitting-office-table-using-laptop-team-work-brainstorming-meeting-concept_146671-15652.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+<>
+      <HeroNewSection />
 
-  <div id="services" data-section="services">
-    <SectionErrorBoundary name="services">
-          <PricingLayeredCards
-      tag="Services"
-      title="Tailored Web Solutions"
-      description="Professional web development packages for local businesses."
-      plans={[
-        {
-          tag: "Essential",
-          price: "₹9,999",
-          description: "Perfect for small businesses.",
-          primaryButton: {
-            text: "Get Basic",
-            href: "#contact",
-          },
-          features: [
-            "5 Pages",
-            "Mobile-Friendly",
-            "Google Maps Integration",
-            "Contact Form",
-            "WhatsApp Support",
-          ],
-        },
-        {
-          tag: "Professional",
-          price: "₹19,999",
-          description: "Everything in Basic plus power features.",
-          primaryButton: {
-            text: "Get Premium",
-            href: "#contact",
-          },
-          features: [
-            "Everything in Basic",
-            "Online Appointments",
-            "Gallery Section",
-            "Customer Reviews",
-            "SEO Setup",
-          ],
-        },
-        {
-          tag: "Business",
-          price: "₹29,999",
-          description: "For restaurants and hotels.",
-          primaryButton: {
-            text: "Get Business",
-            href: "#contact",
-          },
-          features: [
-            "Everything in Premium",
-            "Digital Menu",
-            "Table Booking",
-            "Room Booking",
-            "Event Calendar",
-          ],
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+      <ServicesNewSection />
 
-  <div id="portfolio" data-section="portfolio">
-    <SectionErrorBoundary name="portfolio">
-          <FeaturesImageBento
-      tag="Portfolio"
-      title="Our Recent Work"
-      description="Modern, high-performing websites for Jhansi businesses."
-      items={[
-        {
-          title: "Smile Care",
-          description: "Dental Clinic Website",
-          imageSrc: "http://img.b2bpic.net/free-photo/nobody-dental-cabinet-with-green-screen-computer-teethcare-empty-dentist-office-with-isolated-background-mockup-template-monitor-chroma-key-oral-care-dentition_482257-39865.jpg",
-        },
-        {
-          title: "Spice Garden",
-          description: "Restaurant Digital Menu",
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-eating-roasted-meat-vegetables-dish-served-with-grilled-aubergine-salad_140725-5286.jpg",
-        },
-        {
-          title: "City Hospital",
-          description: "Professional Medical Site",
-          imageSrc: "http://img.b2bpic.net/free-photo/specialist-showing-horizontal-greenscreen-tablet-senior-patient-looking-chromakey-display-old-person-physician-using-blank-mockup-template-with-copyspace-background-close-up_482257-49425.jpg",
-        },
-        {
-          title: "Local Bakery",
-          description: "Online Orders",
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-working-desk_23-2149930961.jpg",
-        },
-        {
-          title: "Gym Studio",
-          description: "Member Registration",
-          imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169856.jpg",
-        },
-        {
-          title: "Hotel Residency",
-          description: "Booking System",
-          imageSrc: "http://img.b2bpic.net/free-photo/minimalist-kitchen-interior-design_23-2151008718.jpg",
-        },
-        {
-          title: "Consultant Firm",
-          description: "Business Presence",
-          imageSrc: "http://img.b2bpic.net/free-photo/shoulder-view-african-american-startup-employee-looking-laptop-screen-with-business-analytics-charts-sitting-desk-close-focus-portable-computer-display-with-sales-results_482257-38698.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+      <PortfolioNewSection />
 
-  <div id="about" data-section="about">
-    <SectionErrorBoundary name="about">
-          <AboutTextSplit
-      title="Meet Your Developer"
-      descriptions={[
-        "I am Palak Dusiya, a Full Stack Developer holding a B.Tech in Computer Science.",
-        "I started Prauha with a simple mission: to bridge the digital gap for local businesses in Jhansi.",
-        "Every website I build is designed to be fast, professional, and directly focused on helping you reach more customers in our city.",
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+      <AboutNewSection />
 
-  <div id="faq" data-section="faq">
-    <SectionErrorBoundary name="faq">
-          <FaqTwoColumn
-      tag="Questions"
-      title="Frequently Asked Questions"
-      description="Everything you need to know about starting your website project."
-      items={[
-        {
-          question: "How long does it take?",
-          answer: "Usually 1-2 weeks depending on your package.",
-        },
-        {
-          question: "Do I need technical skills?",
-          answer: "No, I handle everything from hosting to technical setup.",
-        },
-        {
-          question: "Can I update content later?",
-          answer: "Yes, I build easy-to-use sites so you can update them easily.",
-        },
-        {
-          question: "Do you offer maintenance?",
-          answer: "Yes, monthly support packages are available.",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
 
-  <div id="metrics" data-section="metrics">
-    <SectionErrorBoundary name="metrics">
-          <MetricsIconCards
-      tag="Results"
-      title="Why Professional Matters"
-      description="Websites are your business's 24/7 storefront."
-      metrics={[
-        {
-          icon: Smartphone,
-          title: "Mobile Traffic",
-          value: "80%+",
-        },
-        {
-          icon: TrendingUp,
-          title: "Customer Reach",
-          value: "50%+",
-        },
-        {
-          icon: Shield,
-          title: "Business Trust",
-          value: "100%",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
 
-  <div id="contact" data-section="contact">
-    <SectionErrorBoundary name="contact">
-          <ContactCta
-      tag="Get Started"
-      text="Ready to get your business online? Reach out today for a free consultation. Email me at palakdusiya@gmail.com or call +91 9026089417."
-      primaryButton={{
-        text: "WhatsApp Chat",
-        href: "https://wa.me/919026089417",
-      }}
-      secondaryButton={{
-        text: "Email Me",
-        href: "mailto:palakdusiya@gmail.com",
-      }}
-    />
-    </SectionErrorBoundary>
-  </div>
+      <ContactNewSection />
+          <FaqSection />
+          <MetricsSection />
     </>
   );
 }

src/pages/HomePage/sections/AboutNew.tsx

@@ -0,0 +1,41 @@
+import { motion } from "motion/react";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+
+export default function AboutNewSection() {
+  return (
+    <section data-webild-section="about-new" id="about-new" className="relative w-full py-24 bg-background border-b-4 border-foreground">
+      <div className="w-content-width mx-auto px-6">
+        <div className="grid grid-cols-1 md:grid-cols-12 gap-12 items-center">
+          <div className="md:col-span-5">
+            <ScrollReveal variant="fade">
+              <div className="relative border-4 border-foreground shadow-[16px_16px_0px_0px_rgba(255,255,255,1)] bg-primary-cta p-4 rotate-[-2deg] hover:rotate-0 transition-transform duration-500">
+                <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&q=80" alt="Palak Dusiya" className="w-full aspect-square object-cover border-4 border-foreground grayscale hover:grayscale-0 transition-all duration-500" />
+                <div className="absolute -bottom-6 -right-6 bg-foreground text-background font-mono text-sm font-bold px-4 py-2 border-2 border-background uppercase">
+                  Palak Dusiya
+                </div>
+              </div>
+            </ScrollReveal>
+          </div>
+          <div className="md:col-span-7">
+            <ScrollReveal variant="fade" delay={0.2}>
+              <h2 className="text-5xl md:text-7xl font-bold text-foreground uppercase mb-8 border-b-4 border-foreground pb-4 inline-block">
+                About<span className="text-primary-cta">_</span>
+              </h2>
+              <div className="space-y-6 text-xl md:text-2xl font-medium text-foreground">
+                <p>
+                  I'm <span className="bg-primary-cta text-primary-cta-text px-2 py-1 font-bold">Palak Dusiya</span>, a Full Stack Developer (B.Tech CS) based in Jhansi.
+                </p>
+                <p>
+                  I started Prauha because I noticed local businesses—dental clinics, restaurants, hotels—struggling with generic, slow, and uninspiring template websites.
+                </p>
+                <p>
+                  My goal is simple: build <span className="border-b-4 border-secondary-cta pb-1">fast, unique, and hand-coded</span> websites that actually help your business grow and stand out from the competition.
+                </p>
+              </div>
+            </ScrollReveal>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

src/pages/HomePage/sections/ContactNew.tsx

@@ -0,0 +1,58 @@
+import { motion } from "motion/react";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import Button from "@/components/ui/Button";
+
+export default function ContactNewSection() {
+  return (
+    <section data-webild-section="contact-new" id="contact-new" className="relative w-full py-24 bg-foreground text-background overflow-hidden">
+      <div className="absolute inset-0 opacity-10" style={{ backgroundImage: 'radial-gradient(circle at 2px 2px, var(--color-background) 1px, transparent 0)', backgroundSize: '40px 40px' }}></div>
+      <div className="w-content-width mx-auto px-6 relative z-10">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-16 items-center">
+          <div>
+            <ScrollReveal variant="fade">
+              <h2 className="text-5xl md:text-7xl font-bold uppercase mb-8 border-b-4 border-background pb-4 inline-block">
+                Let's Talk<span className="text-primary-cta">_</span>
+              </h2>
+              <p className="text-2xl font-medium mb-12 max-w-lg">
+                Ready to get a website that doesn't look like everyone else's? Reach out directly.
+              </p>
+              
+              <div className="space-y-8 font-mono text-xl">
+                <div className="flex items-center gap-4 group">
+                  <div className="w-12 h-12 border-2 border-background flex items-center justify-center group-hover:bg-primary-cta group-hover:text-primary-cta-text transition-colors">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
+                  </div>
+                  <a href="tel:+919026089417" className="hover:text-primary-cta transition-colors">+91 9026089417</a>
+                </div>
+                
+                <div className="flex items-center gap-4 group">
+                  <div className="w-12 h-12 border-2 border-background flex items-center justify-center group-hover:bg-secondary-cta group-hover:text-secondary-cta-text transition-colors">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+                  </div>
+                  <a href="mailto:palakdusiya@gmail.com" className="hover:text-secondary-cta transition-colors">palakdusiya@gmail.com</a>
+                </div>
+              </div>
+            </ScrollReveal>
+          </div>
+          
+          <div className="flex justify-center md:justify-end">
+            <ScrollReveal variant="fade" delay={0.2}>
+              <a 
+                href="https://wa.me/919026089417" 
+                target="_blank" 
+                rel="noopener noreferrer"
+                className="block border-4 border-background bg-[#25D366] text-black p-12 text-center shadow-[16px_16px_0px_0px_rgba(255,255,255,1)] hover:shadow-[8px_8px_0px_0px_rgba(255,255,255,1)] hover:translate-x-2 hover:translate-y-2 transition-all duration-300 group"
+              >
+                <div className="w-24 h-24 mx-auto mb-6 border-4 border-black rounded-full flex items-center justify-center bg-white group-hover:scale-110 transition-transform">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>
+                </div>
+                <h3 className="text-4xl font-bold uppercase mb-2">Chat on WhatsApp</h3>
+                <p className="font-mono font-bold text-lg">Fastest response time</p>
+              </a>
+            </ScrollReveal>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

src/pages/HomePage/sections/Faq.tsx

@@ -0,0 +1,17 @@
+// Created by add_section_from_catalog (FaqTwoColumn).
+
+import React from 'react';
+import FaqTwoColumn from '@/components/sections/faq/FaqTwoColumn';
+
+export default function FaqSection(): React.JSX.Element {
+  return (
+    <div data-webild-section="faq" id="faq">
+      <FaqTwoColumn
+        tag="…"
+        title="…"
+        description="…"
+        items={[]}
+      />
+    </div>
+  );
+}

src/pages/HomePage/sections/HeroNew.tsx

@@ -0,0 +1,57 @@
+import { motion } from "motion/react";
+import Button from "@/components/ui/Button";
+
+export default function HeroNewSection() {
+  return (
+    <section data-webild-section="hero-new" id="hero-new" className="relative w-full min-h-[80vh] flex items-center bg-background overflow-hidden border-b-4 border-foreground">
+      <div className="absolute inset-0 opacity-20" style={{ backgroundImage: 'radial-gradient(circle at 2px 2px, var(--color-foreground) 1px, transparent 0)', backgroundSize: '40px 40px' }}></div>
+      <div className="w-content-width mx-auto px-6 relative z-10">
+        <div className="grid grid-cols-1 md:grid-cols-12 gap-8 items-center">
+          <div className="md:col-span-8">
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5 }}
+              className="inline-block bg-primary-cta text-primary-cta-text px-4 py-2 font-mono text-sm uppercase tracking-wider mb-6 border-2 border-foreground shadow-[4px_4px_0px_0px_rgba(255,255,255,1)]"
+            >
+              Freelance Web Developer
+            </motion.div>
+            <motion.h1
+              initial={{ opacity: 0, x: -50 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.6, delay: 0.1 }}
+              className="text-7xl md:text-9xl font-bold text-foreground leading-none tracking-tighter uppercase mb-6"
+            >
+              Prauha<span className="text-primary-cta">.</span>
+            </motion.h1>
+            <motion.p
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ duration: 0.6, delay: 0.3 }}
+              className="text-2xl md:text-4xl font-medium text-foreground max-w-3xl leading-tight mb-10"
+            >
+              Websites That Don't Look Like Everyone Else's
+            </motion.p>
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: 0.4 }}
+              className="flex flex-wrap gap-4"
+            >
+              <Button text="View My Work" href="#portfolio" className="border-2 border-foreground rounded-none shadow-[4px_4px_0px_0px_rgba(255,255,255,1)] hover:shadow-[2px_2px_0px_0px_rgba(255,255,255,1)] hover:translate-x-[2px] hover:translate-y-[2px] transition-all bg-primary-cta text-primary-cta-text font-bold uppercase" />
+              <Button text="Let's Talk" href="#contact" variant="secondary" className="border-2 border-foreground rounded-none shadow-[4px_4px_0px_0px_rgba(255,255,255,1)] hover:shadow-[2px_2px_0px_0px_rgba(255,255,255,1)] hover:translate-x-[2px] hover:translate-y-[2px] transition-all bg-transparent text-foreground font-bold uppercase" />
+            </motion.div>
+          </div>
+          <div className="md:col-span-4 hidden md:block">
+            <div className="w-full aspect-square border-4 border-foreground bg-secondary-cta relative shadow-[12px_12px_0px_0px_rgba(255,255,255,1)] flex items-center justify-center overflow-hidden group">
+               <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1555066931-4365d14bab8c?auto=format&fit=crop&q=80')] bg-cover bg-center mix-blend-luminosity opacity-50 group-hover:opacity-100 group-hover:mix-blend-normal transition-all duration-500"></div>
+               <div className="relative z-10 text-secondary-cta-text font-mono text-xl font-bold bg-foreground text-background px-4 py-2 uppercase rotate-[-10deg] group-hover:rotate-0 transition-all duration-300">
+                 {"<Code />"}
+               </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

src/pages/HomePage/sections/Metrics.tsx

@@ -0,0 +1,17 @@
+// Created by add_section_from_catalog (MetricsIconCards).
+
+import React from 'react';
+import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
+
+export default function MetricsSection(): React.JSX.Element {
+  return (
+    <div data-webild-section="metrics" id="metrics">
+      <MetricsIconCards
+        tag="…"
+        title="…"
+        description="…"
+        metrics={[]}
+      />
+    </div>
+  );
+}

src/pages/HomePage/sections/PortfolioNew.tsx

@@ -0,0 +1,58 @@
+import { motion } from "motion/react";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+
+export default function PortfolioNewSection() {
+  const projects = [
+    {
+      title: "Smile Care Dental",
+      type: "Clinic Website",
+      image: "https://images.unsplash.com/photo-1606811841689-23dfddce3e95?auto=format&fit=crop&q=80",
+      color: "bg-primary-cta"
+    },
+    {
+      title: "Spice Garden",
+      type: "Restaurant Menu & Booking",
+      image: "https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&q=80",
+      color: "bg-secondary-cta"
+    },
+    {
+      title: "City Hospital",
+      type: "Healthcare Portal",
+      image: "https://images.unsplash.com/photo-1519494026892-80bbd2d6fd0d?auto=format&fit=crop&q=80",
+      color: "bg-accent"
+    }
+  ];
+
+  return (
+    <section data-webild-section="portfolio-new" id="portfolio-new" className="relative w-full py-24 bg-background border-b-4 border-foreground overflow-hidden">
+      <div className="absolute inset-0 opacity-10" style={{ backgroundImage: 'linear-gradient(var(--color-foreground) 2px, transparent 2px), linear-gradient(90deg, var(--color-foreground) 2px, transparent 2px)', backgroundSize: '50px 50px' }}></div>
+      <div className="w-content-width mx-auto px-6 relative z-10">
+        <ScrollReveal variant="fade">
+          <h2 className="text-5xl md:text-7xl font-bold text-foreground uppercase mb-16 border-b-4 border-foreground pb-4 inline-block">
+            Work<span className="text-primary-cta">_</span>
+          </h2>
+        </ScrollReveal>
+        
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {projects.map((project, index) => (
+            <ScrollReveal variant="fade" key={index} delay={index * 0.1}>
+              <div className="group relative border-4 border-foreground bg-card shadow-[8px_8px_0px_0px_rgba(255,255,255,1)] hover:shadow-[12px_12px_0px_0px_rgba(255,255,255,1)] hover:-translate-y-2 transition-all duration-300 overflow-hidden">
+                <div className="aspect-[4/3] overflow-hidden border-b-4 border-foreground relative">
+                  <div className={`absolute inset-0 ${project.color} mix-blend-overlay opacity-50 group-hover:opacity-0 transition-opacity duration-500 z-10`}></div>
+                  <img src={project.image} alt={project.title} className="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-500 scale-105 group-hover:scale-100" />
+                </div>
+                <div className="p-6 bg-background">
+                  <div className="font-mono text-xs uppercase tracking-widest text-primary-cta mb-2 font-bold">{project.type}</div>
+                  <h3 className="text-2xl font-bold text-foreground uppercase">{project.title}</h3>
+                </div>
+                <div className="absolute top-4 right-4 w-10 h-10 bg-foreground text-background flex items-center justify-center border-2 border-background opacity-0 group-hover:opacity-100 translate-y-4 group-hover:translate-y-0 transition-all duration-300 z-20">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg>
+                </div>
+              </div>
+            </ScrollReveal>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

src/pages/HomePage/sections/ServicesNew.tsx

@@ -0,0 +1,66 @@
+import { motion } from "motion/react";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+
+export default function ServicesNewSection() {
+  const services = [
+    {
+      title: "Basic Website",
+      price: "₹15,000",
+      features: ["5 pages", "Mobile-friendly", "Google Maps", "Contact form", "WhatsApp button"],
+      color: "bg-primary-cta",
+      textColor: "text-primary-cta-text"
+    },
+    {
+      title: "Premium Website",
+      price: "₹25,000",
+      features: ["Everything in Basic", "Appointment booking", "Customer reviews", "Gallery", "SEO basics"],
+      color: "bg-secondary-cta",
+      textColor: "text-secondary-cta-text"
+    },
+    {
+      title: "Restaurant / Hotel",
+      price: "₹35,000",
+      features: ["Online table/room booking", "Digital menu", "Event calendar", "Payment gateway integration"],
+      color: "bg-accent",
+      textColor: "text-foreground"
+    }
+  ];
+
+  return (
+    <section data-webild-section="services-new" id="services-new" className="relative w-full py-24 bg-background border-b-4 border-foreground">
+      <div className="w-content-width mx-auto px-6">
+        <ScrollReveal variant="fade">
+          <h2 className="text-5xl md:text-7xl font-bold text-foreground uppercase mb-16 border-b-4 border-foreground pb-4 inline-block">
+            Services<span className="text-primary-cta">_</span>
+          </h2>
+        </ScrollReveal>
+        
+        <div className="grid grid-cols-1 gap-8">
+          {services.map((service, index) => (
+            <ScrollReveal variant="fade" key={index} delay={index * 0.1}>
+              <div className={`border-4 border-foreground p-8 md:p-12 shadow-[8px_8px_0px_0px_rgba(255,255,255,1)] hover:shadow-[16px_16px_0px_0px_rgba(255,255,255,1)] transition-all duration-300 flex flex-col md:flex-row justify-between items-start md:items-center gap-8 ${service.color} group`}>
+                <div className="flex-1">
+                  <h3 className={`text-3xl md:text-5xl font-bold uppercase mb-4 ${service.textColor} group-hover:translate-x-4 transition-transform`}>
+                    {service.title}
+                  </h3>
+                  <ul className={`flex flex-wrap gap-3 ${service.textColor}`}>
+                    {service.features.map((feature, i) => (
+                      <li key={i} className="border-2 border-current px-3 py-1 font-mono text-sm font-bold uppercase">
+                        {feature}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+                <div className="shrink-0">
+                  <div className={`text-4xl md:text-6xl font-bold ${service.textColor} bg-foreground text-background px-6 py-4 border-4 border-foreground -rotate-3 group-hover:rotate-3 transition-transform`}>
+                    {service.price}
+                  </div>
+                </div>
+              </div>
+            </ScrollReveal>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}