Merge version_3 into main

Merge version_3 into main

src/app/about/page.tsx

@@ -1,91 +1,64 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import MediaAbout from "@/components/sections/about/MediaAbout";
-import FeatureCardNineteen from "@/components/sections/feature/FeatureCardNineteen";
-import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
-import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
-import FooterSimple from "@/components/sections/footer/FooterSimple";
-import {
-  Grid,
-  Award,
-  Briefcase,
-  TrendingUp,
-  Users,
-  Heart,
-  Star,
-} from "lucide-react";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import FeatureCardEight from "@/components/sections/feature/FeatureCardEight";
+import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
+import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
+import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+import Link from "next/link";
+import { Grid, Award, Briefcase, TrendingUp, ShoppingCart, Heart } from "lucide-react";
 
 export default function AboutPage() {
   return (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
       defaultTextAnimation="entrance-slide"
-      borderRadius="rounded"
-      contentWidth="mediumLarge"
+      borderRadius="pill"
+      contentWidth="compact"
       sizing="mediumLarge"
       background="floatingGradient"
-      cardStyle="glass-elevated"
-      primaryButtonStyle="gradient"
+      cardStyle="subtle-shadow"
+      primaryButtonStyle="radial-glow"
       secondaryButtonStyle="glass"
-      headingFontWeight="semibold"
+      headingFontWeight="light"
     >
       <div id="nav" data-section="nav">
-        <NavbarLayoutFloatingOverlay
+        <NavbarLayoutFloatingInline
           brandName="ShopHub"
           navItems={[
-            { name: "Shop", id: "/products" },
-            { name: "Deals", id: "/deals" },
-            { name: "About", id: "/about" },
-            { name: "Contact", id: "/contact" },
+            { name: "Shop", id: "/" },
+            { name: "Deals", id: "/" },
+            { name: "Categories", id: "/" },
+            { name: "About", id: "/" },
           ]}
           button={{
-            text: "Start Shopping",            href: "/products"}}
+            text: "Start Shopping",            href: "/"}}
+          animateOnLoad={true}
         />
       </div>
 
-      <div id="hero" data-section="hero">
-        <MediaAbout
-          title="Transforming Online Shopping for Everyone"
-          description="ShopHub is on a mission to make online shopping more accessible, affordable, and enjoyable for millions worldwide."
-          tag="Our Mission"
-          tagIcon={Heart}
-          tagAnimation="slide-up"
-          imageSrc="http://img.b2bpic.net/free-photo/diverse-team-collaborating-office_23-2149087654.jpg"
-          imageAlt="ShopHub team collaborating"
-          buttons={[
-            { text: "Join Our Community", href: "/products" },
-            { text: "Learn More", href: "#mission" },
-          ]}
-          useInvertedBackground={false}
-          buttonAnimation="slide-up"
-        />
-      </div>
-
-      <div id="mission" data-section="mission">
-        <FeatureCardNineteen
-          title="Our Journey"
-          description="From startup to industry leader, here's how we built ShopHub"
-          tag="How We Got Here"
-          tagIcon={TrendingUp}
+      <div id="categories" data-section="categories">
+        <FeatureCardEight
+          title="Why Choose ShopHub"
+          description="Discover what makes ShopHub the preferred choice for millions of shoppers worldwide."
+          tag="Categories"
+          tagIcon={Grid}
           tagAnimation="slide-up"
           features={[
             {
               id: 1,
-              tag: "Foundation",              title: "Founded in 2015",              subtitle: "Started with a vision to simplify online shopping.",              description:
-                "Our founders believed that everyone deserves access to quality products at fair prices. They started ShopHub with just a small team and a big dream to revolutionize the e-commerce landscape.",              imageSrc:
-                "http://img.b2bpic.net/free-photo/startup-team-brainstorming_23-2148765432.jpg",              imageAlt: "Startup team"},
+              title: "Wide Product Selection",              description: "Browse millions of items across hundreds of categories with trusted sellers and verified products",              imageSrc: "http://img.b2bpic.net/free-photo/sustainability-concept-with-blank-geometric-forms-growing-plant_23-2148994248.jpg"},
             {
               id: 2,
-              tag: "Growth",              title: "Rapid Expansion",              subtitle: "Growing to serve millions of customers.",              description:
-                "Through innovative features and dedicated customer service, we grew from thousands to millions of users. We expanded our product categories, improved our logistics, and built partnerships with trusted sellers worldwide.",              imageSrc:
-                "http://img.b2bpic.net/free-photo/business-growth-graph-chart_23-2149234567.jpg",              imageAlt: "Business growth"},
+              title: "Fast & Reliable Shipping",              description: "Get your orders delivered quickly with our efficient logistics network and tracking systems",              imageSrc: "http://img.b2bpic.net/free-vector/flat-furniture-sale-instagram-story-collection_23-2148954936.jpg"},
             {
               id: 3,
-              tag: "Innovation",              title: "Tech Leadership",              subtitle: "Pioneering AI-driven personalization.",              description:
-                "We invested heavily in machine learning and AI to understand customer preferences better. Today, our recommendation engine helps shoppers discover exactly what they love, faster than ever before.",              imageSrc:
-                "http://img.b2bpic.net/free-photo/ai-technology-concept_23-2148901234.jpg",              imageAlt: "AI technology"},
+              title: "Exceptional Customer Support",              description: "Our dedicated support team is available 24/7 to help with any questions or concerns",              imageSrc: "http://img.b2bpic.net/free-photo/model-career-kit-still-life_23-2150229756.jpg"},
+          ]}
+          buttons={[
+            {
+              text: "Learn More",              href: "/"},
           ]}
           textboxLayout="default"
           useInvertedBackground={false}
@@ -93,125 +66,61 @@ export default function AboutPage() {
         />
       </div>
 
-      <div id="impact" data-section="impact">
-        <MetricCardThree
-          metrics={[
-            {
-              id: "1",              icon: Users,
-              title: "Active Users",              value: "2.5M+"},
-            {
-              id: "2",              icon: Grid,
-              title: "Product Categories",              value: "500+"},
-            {
-              id: "3",              icon: Award,
-              title: "Awards Won",              value: "47"},
-            {
-              id: "4",              icon: Briefcase,
-              title: "Seller Partners",              value: "10K+"},
-          ]}
-          title="ShopHub by the Numbers"
-          description="Our impact and commitment to excellence"
-          tag="Our Achievement"
+      <div id="testimonials" data-section="testimonials">
+        <TestimonialCardOne
+          title="Customer Success Stories"
+          description="Hear from satisfied shoppers who have found exactly what they need on ShopHub."
+          tag="Customer Reviews"
           tagIcon={Award}
           tagAnimation="slide-up"
-          textboxLayout="default"
+          testimonials={[
+            {
+              id: "1",              name: "Sarah Johnson",              role: "Happy Customer",              company: "Verified Buyer",              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-work_23-2149304143.jpg"},
+            {
+              id: "2",              name: "Michael Chen",              role: "Regular Shopper",              company: "Verified Buyer",              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/business-woman-posing-street_23-2148213468.jpg"},
+            {
+              id: "3",              name: "Emily Rodriguez",              role: "Premium Member",              company: "Verified Buyer",              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/ambitious-businesswoman-with-arms-crossed-looking-forward-future_1163-4333.jpg"},
+          ]}
+          gridVariant="uniform-all-items-equal"
           animationType="slide-up"
+          textboxLayout="default"
           useInvertedBackground={false}
           buttonAnimation="slide-up"
           carouselMode="buttons"
         />
       </div>
 
-      <div id="testimonials" data-section="testimonials">
-        <TestimonialCardSix
-          testimonials={[
-            {
-              id: "1",              name: "Sarah Johnson",              handle: "@sarah_j",              testimonial:
-                "ShopHub has completely transformed my online shopping experience. The variety and prices are unbeatable!",              imageSrc:
-                "http://img.b2bpic.net/free-photo/woman-smiling-in-portrait_23-2148632156.jpg",              imageAlt: "Sarah Johnson"},
-            {
-              id: "2",              name: "Michael Chen",              handle: "@michael_tech",              testimonial:
-                "Fast shipping, great customer service, and authentic products. ShopHub is my go-to for everything!",              imageSrc:
-                "http://img.b2bpic.net/free-photo/portrait-businessman-smiling-indoors_23-2149098765.jpg",              imageAlt: "Michael Chen"},
-            {
-              id: "3",              name: "Emily Rodriguez",              handle: "@emily_style",              testimonial:
-                "The exclusive deals and early access for members make this the best shopping platform I've found.",              imageSrc:
-                "http://img.b2bpic.net/free-photo/happy-young-woman-portrait_23-2147803456.jpg",              imageAlt: "Emily Rodriguez"},
-            {
-              id: "4",              name: "James Wilson",              handle: "@james_shop",              testimonial:
-                "Reliable, secure, and user-friendly. ShopHub makes online shopping feel safe and enjoyable.",              imageSrc:
-                "http://img.b2bpic.net/free-photo/man-portrait-smiling-outdoor_23-2148234567.jpg",              imageAlt: "James Wilson"},
-            {
-              id: "5",              name: "Lisa Martinez",              handle: "@lisa_love",              testimonial:
-                "Amazing selection, competitive prices, and they actually care about customer satisfaction. Highly recommended!",              imageSrc:
-                "http://img.b2bpic.net/free-photo/portrait-woman-beautiful-smiling_23-2148876543.jpg",              imageAlt: "Lisa Martinez"},
-            {
-              id: "6",              name: "David Park",              handle: "@david_deals",              testimonial:
-                "Been shopping here for 2 years. The quality and service consistency is exceptional compared to competitors.",              imageSrc:
-                "http://img.b2bpic.net/free-photo/confident-man-portrait_23-2148901234.jpg",              imageAlt: "David Park"},
-            {
-              id: "7",              name: "Jessica Lee",              handle: "@jessica_finds",              testimonial:
-                "ShopHub's recommendation system is incredible. I discover products I love every time I visit!",              imageSrc:
-                "http://img.b2bpic.net/free-photo/smiling-young-woman-looking-camera_23-2148654321.jpg",              imageAlt: "Jessica Lee"},
-            {
-              id: "8",              name: "Robert Thompson",              handle: "@robert_online",              testimonial:
-                "Best shopping experience online. Great prices, authentic products, and lightning-fast delivery.",              imageSrc:
-                "http://img.b2bpic.net/free-photo/portrait-man-standing-smiling_23-2148765432.jpg",              imageAlt: "Robert Thompson"},
-          ]}
-          animationType="slide-up"
-          title="Customer Love"
-          description="Join millions of satisfied shoppers who trust ShopHub"
-          tag="Testimonials"
-          tagIcon={Star}
+      <div id="social-proof" data-section="social-proof">
+        <SocialProofOne
+          title="Trusted by Industry Leaders"
+          description="ShopHub powers transactions for the world's leading brands and retailers."
+          tag="Partners"
+          tagIcon={Briefcase}
           tagAnimation="slide-up"
+          names={[
+            "Amazon",            "eBay",            "Shopify",            "Stripe",            "PayPal",            "Mastercard",            "Visa"]}
+          logos={[
+            "http://img.b2bpic.net/free-photo/woman-sitting-floor-with-her-laptop-her-lap_23-2148674969.jpg",            "http://img.b2bpic.net/free-vector/gradient-e-commerce-logo-collection_23-2148962201.jpg",            "http://img.b2bpic.net/free-photo/laptop-with-toy-supermarket-cart-sale-tablet_23-2147955521.jpg",            "http://img.b2bpic.net/free-vector/gradient-technology-logo_52683-8661.jpg",            "http://img.b2bpic.net/free-vector/gradient-colored-p-logos-set_23-2148924056.jpg",            "http://img.b2bpic.net/free-vector/logo-template-design_1289-84.jpg",            "http://img.b2bpic.net/free-vector/gradient-money-logo-design_23-2150934177.jpg"]}
           textboxLayout="default"
           useInvertedBackground={false}
-          buttonAnimation="slide-up"
+          showCard={true}
           speed={40}
-          topMarqueeDirection="left"
+          buttonAnimation="slide-up"
         />
       </div>
 
       <div id="footer" data-section="footer">
-        <FooterSimple
-          columns={[
-            {
-              title: "Shop",              items: [
-                { label: "All Products", href: "/products" },
-                { label: "Deals", href: "/deals" },
-                { label: "Categories", href: "/categories" },
-                { label: "New Arrivals", href: "/new" },
-              ],
-            },
-            {
-              title: "Company",              items: [
-                { label: "About Us", href: "/about" },
-                { label: "Contact", href: "/contact" },
-                { label: "Careers", href: "/careers" },
-                { label: "Blog", href: "/blog" },
-              ],
-            },
-            {
-              title: "Support",              items: [
-                { label: "Help Center", href: "/help" },
-                { label: "Track Order", href: "/track" },
-                { label: "Returns", href: "/returns" },
-                { label: "Shipping Info", href: "/shipping" },
-              ],
-            },
-            {
-              title: "Legal",              items: [
-                { label: "Privacy Policy", href: "/privacy" },
-                { label: "Terms of Service", href: "/terms" },
-                { label: "Cookie Policy", href: "/cookies" },
-                { label: "Accessibility", href: "/accessibility" },
-              ],
-            },
-          ]}
-          bottomLeftText="© 2025 ShopHub. All rights reserved."
-          bottomRightText="Made with ❤️ for shoppers everywhere"
+        <FooterLogoReveal
+          logoText="ShopHub"
+          leftLink={{
+            text: "Privacy Policy",            href: "/"}}
+          rightLink={{
+            text: "Terms of Service",            href: "/"}}
         />
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/layout.tsx

@@ -1,15 +1,15 @@
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import "./styles/variables.css";
-import "./styles/base.css";
+import { Poppins } from "next/font/google";
 import "./globals.css";
 
-const inter = Inter({
-  variable: "--font-inter",  subsets: ["latin"],
+const poppins = Poppins({
+  variable: "--font-poppins",  subsets: ["latin"],
+  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
 });
 
 export const metadata: Metadata = {
-  title: "ShopHub - Your Online Shopping Destination",  description: "Discover millions of products at great prices on ShopHub"};
+  title: "Webild - Mobile-First Web Solutions for India",  description:
+    "Premium web development and mobile solutions optimized for Indian users. Fast, secure, and culturally relevant digital experiences."};
 
 export default function RootLayout({
   children,
@@ -18,12 +18,26 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className={inter.variable}>
-        {children}
+      <head>
         <script
           async
-          src="https://cdn.jsdelivr.net/npm/tsparticles-confetti@2.12.0/tsparticles.confetti.bundle.min.js"
-        ></script>
+          src="https://cdn.jsdelivr.net/npm/three@r128/build/three.min.js"
+        />
+        <script
+          async
+          src="https://cdn.jsdelivr.net/npm/three@r128/examples/js/postprocessing/EffectComposer.js"
+        />
+        <script
+          async
+          src="https://cdn.jsdelivr.net/npm/three@r128/examples/js/postprocessing/RenderPass.js"
+        />
+        <script
+          async
+          src="https://cdn.jsdelivr.net/npm/three@r128/examples/js/postprocessing/ShaderPass.js"
+        />
+      </head>
+      <body className={`${poppins.variable}`} suppressHydrationWarning>
+        {children}
       
         <script
           dangerouslySetInnerHTML={{

src/app/page.tsx

@@ -1,23 +1,111 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
-import ProductCardFour from "@/components/sections/product/ProductCardFour";
-import PricingCardEight from "@/components/sections/pricing/PricingCardEight";
-import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
-import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
-import FooterSimple from "@/components/sections/footer/FooterSimple";
-import {
-  TrendingUp,
-  Users,
-  ShoppingCart,
-  Heart,
-  Star,
-  Package,
-  Check,
-  Zap,
-} from "lucide-react";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import HeroSignup from "@/components/sections/hero/HeroSignup";
+import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
+import TimelinePhoneView from "@/components/cardStack/layouts/timelines/TimelinePhoneView";
+import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
+import PricingCardOne from "@/components/sections/pricing/PricingCardOne";
+import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
+import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
+import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
+import { Sparkles, Zap, Users, CheckCircle, Smartphone } from "lucide-react";
+
+const navItems = [
+  { name: "Home", id: "/" },
+  { name: "Features", id: "#features" },
+  { name: "Pricing", id: "#pricing" },
+  { name: "Contact", id: "#contact" },
+];
+
+const features = [
+  {
+    id: "1",    title: "Mobile-First Design",    description:
+      "Optimized for 4G and 5G networks with minimal data usage, perfect for Indian mobile users who expect lightning-fast performance on any connection.",    imageSrc: "/placeholder-mobile-1.jpg",    imageAlt: "Mobile-first interface"},
+  {
+    id: "2",    title: "Local Payment Integration",    description:
+      "Support for UPI, NEFT, and popular local payment methods. Seamlessly integrate with India's digital payment ecosystem.",    imageSrc: "/placeholder-mobile-2.jpg",    imageAlt: "Payment integration"},
+  {
+    id: "3",    title: "Multilingual Support",    description:
+      "Built-in support for Hindi, Tamil, Telugu, Kannada, and regional languages with culturally relevant content adaptation.",    imageSrc: "/placeholder-mobile-3.jpg",    imageAlt: "Language support"},
+  {
+    id: "4",    title: "Low-Bandwidth Optimization",    description:
+      "Intelligent image compression and progressive loading ensures your app works flawlessly even on 2G networks.",    imageSrc: "/placeholder-mobile-4.jpg",    imageAlt: "Bandwidth optimization"},
+];
+
+const pricingPlans = [
+  {
+    id: "1",    badge: "Starter",    badgeIcon: Sparkles,
+    price: "₹9,999/mo",    subtitle: "Perfect for small businesses",    features: [
+      "Mobile-first website",      "Local payment integration",      "Basic analytics",      "Email support"],
+  },
+  {
+    id: "2",    badge: "Professional",    badgeIcon: Zap,
+    price: "₹24,999/mo",    subtitle: "Best for growing companies",    features: [
+      "Everything in Starter",      "Advanced multilingual support",      "Custom integrations",      "Priority support",      "Monthly optimization"],
+  },
+  {
+    id: "3",    badge: "Enterprise",    badgeIcon: Users,
+    price: "Custom",    subtitle: "For large-scale operations",    features: [
+      "Everything in Professional",      "Dedicated account manager",      "Custom features",      "24/7 support",      "Real-time analytics"],
+  },
+];
+
+const testimonials = [
+  {
+    id: "1",    testimonial:
+      "Webild transformed our online presence. Our mobile traffic increased by 300% within 3 months. The mobile-first approach was exactly what we needed.",    author: "Rajesh Kumar, E-commerce Founder",    imageSrc: "/avatar-1.jpg",    imageAlt: "Rajesh Kumar"},
+  {
+    id: "2",    testimonial:
+      "The local payment integration saved us months of development. Our customers love the UPI support and the site loads incredibly fast.",    author: "Priya Sharma, Fashion Retailer",    imageSrc: "/avatar-2.jpg",    imageAlt: "Priya Sharma"},
+  {
+    id: "3",    testimonial:
+      "Working with Webild was seamless. They understood the Indian market perfectly and delivered a solution that speaks to our local audience.",    author: "Amit Patel, SaaS Entrepreneur",    imageSrc: "/avatar-3.jpg",    imageAlt: "Amit Patel"},
+];
+
+const faqs = [
+  {
+    id: "1",    title: "How does mobile-first design benefit my business?",    content:
+      "Mobile-first design ensures your website loads fast and functions perfectly on smartphones, which is crucial in India where 80%+ of users access the web via mobile devices. This improves user experience, reduces bounce rates, and increases conversions."},
+  {
+    id: "2",    title: "What payment methods do you support?",    content:
+      "We support all major Indian payment methods including UPI, NEFT, RTGS, credit/debit cards, digital wallets like Google Pay, Apple Pay, and Paytm. We integrate with leading payment gateways like Razorpay, PayU, and Instamojo."},
+  {
+    id: "3",    title: "Can you help with multiple Indian languages?",    content:
+      "Absolutely! We provide support for Hindi, Tamil, Telugu, Kannada, Marathi, Gujarati, and other regional languages. We ensure content is not just translated but culturally adapted for your target audience."},
+  {
+    id: "4",    title: "How do you handle low-bandwidth scenarios?",    content:
+      "Our solutions include intelligent image compression, lazy loading, service workers for offline functionality, and progressive enhancement. Your site works smoothly even on 2G networks, ensuring no customer is left behind."},
+  {
+    id: "5",    title: "What's included in ongoing support?",    content:
+      "Our support includes regular performance monitoring, security updates, backup management, content updates, and strategic consulting. Professional and Enterprise plans include dedicated support channels and faster response times."},
+];
+
+const footerColumns = [
+  {
+    title: "Product",    items: [
+      { label: "Features", href: "#features" },
+      { label: "Pricing", href: "#pricing" },
+      { label: "Security", href: "#security" },
+    ],
+  },
+  {
+    title: "Company",    items: [
+      { label: "About", href: "#about" },
+      { label: "Blog", href: "#blog" },
+      { label: "Careers", href: "#careers" },
+    ],
+  },
+  {
+    title: "Support",    items: [
+      { label: "Documentation", href: "#docs" },
+      { label: "Help Center", href: "#help" },
+      { label: "Contact", href: "#contact" },
+    ],
+  },
+];
 
 export default function Home() {
   return (
@@ -25,276 +113,185 @@ export default function Home() {
       defaultButtonVariant="hover-magnetic"
       defaultTextAnimation="entrance-slide"
       borderRadius="rounded"
-      contentWidth="mediumLarge"
-      sizing="mediumLarge"
-      background="aurora"
-      cardStyle="glass-elevated"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="solid"
       primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
-      headingFontWeight="semibold"
+      headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
-        <NavbarLayoutFloatingOverlay
-          brandName="ShopHub"
-          navItems={[
-            { name: "Shop", id: "/products" },
-            { name: "Deals", id: "/deals" },
-            { name: "About", id: "/about" },
-            { name: "Contact", id: "/contact" },
-          ]}
+        <NavbarLayoutFloatingInline
+          navItems={navItems}
+          brandName="Webild"
           button={{
-            text: "Start Shopping",            href: "/products"
-          }}
+            text: "Get Started",            href: "#contact"}}
         />
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroBillboardGallery
-          background={{ variant: "radial-gradient" }}
-          title="Discover Amazing Products"
-          description="Shop millions of items from trusted sellers with fast, reliable shipping"
-          tag="Premium Shopping"
-          tagAnimation="slide-up"
-          mediaItems={[
-            {
-              imageSrc:
-                "http://img.b2bpic.net/free-photo/woman-holding-shopping-bags-smiling_23-2148913262.jpg",              imageAlt: "Happy shopper with bags"
-            },
-            {
-              imageSrc:
-                "http://img.b2bpic.net/free-photo/online-shopping-concept-with-laptop_23-2148951398.jpg",              imageAlt: "Online shopping on laptop"
-            },
-            {
-              imageSrc:
-                "http://img.b2bpic.net/free-photo/shopping-cart-with-products_23-2147899718.jpg",              imageAlt: "Shopping cart full of items"
-            },
-            {
-              imageSrc:
-                "http://img.b2bpic.net/free-photo/delivery-man-holding-package_23-2148989467.jpg",              imageAlt: "Fast delivery service"
-            },
-            {
-              imageSrc:
-                "http://img.b2bpic.net/free-photo/person-using-credit-card-for-payment_23-2149034908.jpg",              imageAlt: "Secure payment"
-            },
-          ]}
-          buttons={[
-            { text: "Shop Now", href: "/products" },
-            { text: "View Deals", href: "/deals" },
-          ]}
-          buttonAnimation="slide-up"
-          mediaAnimation="slide-up"
+        <HeroSignup
+          background={{ variant: "sparkles-gradient" }}
+          tag="Mobile-First Web Solutions"
+          tagIcon={Smartphone}
+          title="Web Solutions Built for India's Mobile-First Users"
+          description="Experience premium digital products optimized for Indian users. Fast loading on any network, local payment support, multilingual interfaces, and culturally relevant design. Welcome to web development for India."
+          inputPlaceholder="Enter your email"
+          buttonText="Get Free Consultation"
+          onSubmit={(email) => console.log("Email:", email)}
         />
       </div>
 
-      <div id="featured-products" data-section="featured-products">
-        <ProductCardFour
-          products={[
-            {
-              id: "1",              name: "Premium Wireless Headphones",              price: "$199.99",              variant: "Black • 5 Colors Available",              imageSrc:
-                "http://img.b2bpic.net/free-photo/wireless-headphones-studio-setup_23-2149012345.jpg",              imageAlt: "Wireless headphones",              isFavorited: false,
-            },
-            {
-              id: "2",              name: "Smart Watch Pro",              price: "$349.99",              variant: "Silver • 3 Colors Available",              imageSrc:
-                "http://img.b2bpic.net/free-photo/smart-watch-on-wrist_23-2149087654.jpg",              imageAlt: "Smart watch",              isFavorited: false,
-            },
-            {
-              id: "3",              name: "Portable Charger 20000mAh",              price: "$49.99",              variant: "White • 4 Colors Available",              imageSrc:
-                "http://img.b2bpic.net/free-photo/portable-power-bank-display_23-2148765432.jpg",              imageAlt: "Power bank charger",              isFavorited: false,
-            },
-            {
-              id: "4",              name: "USB-C Fast Charging Cable",              price: "$15.99",              variant: "Gray • 2 Colors Available",              imageSrc:
-                "http://img.b2bpic.net/free-photo/usb-cable-coil-white-background_23-2149234567.jpg",              imageAlt: "USB-C charging cable",              isFavorited: false,
-            },
-          ]}
-          title="Featured Products"
-          description="Discover our bestselling items with exceptional quality and prices"
-          tag="Top Sellers"
-          tagIcon={Heart}
-          tagAnimation="slide-up"
-          textboxLayout="default"
+      <div id="features" data-section="features">
+        <FeatureCardTwentySeven
+          features={features}
           gridVariant="four-items-2x2-equal-grid"
           animationType="slide-up"
+          title="Why Choose Webild?"
+          description="Purpose-built for Indian market dynamics and user behavior"
+          tag="Our Approach"
+          tagIcon={Zap}
+          textboxLayout="default"
           useInvertedBackground={false}
-          buttonAnimation="slide-up"
-          carouselMode="buttons"
         />
       </div>
 
-      <div id="metrics" data-section="metrics">
-        <MetricCardThree
-          metrics={[
-            {
-              id: "1",              icon: ShoppingCart,
-              title: "Total Orders",              value: "5M+"
-            },
-            {
-              id: "2",              icon: Users,
-              title: "Happy Customers",              value: "2.5M+"
-            },
-            {
-              id: "3",              icon: TrendingUp,
-              title: "Products Sold",              value: "50M+"
-            },
-            {
-              id: "4",              icon: Zap,
-              title: "Fast Deliveries",              value: "98%"
-            },
-          ]}
-          title="ShopHub Impact"
-          description="By the numbers - see how we're revolutionizing online shopping"
-          tag="Success Stories"
-          tagIcon={Star}
-          tagAnimation="slide-up"
+      <div id="mobile-experience" data-section="mobile-experience">
+        <TimelinePhoneView
+          title="Mobile App Integration"
+          description="Seamlessly connect web and mobile experiences with our unified platform"
+          tag="Mobile Excellence"
+          tagIcon={Smartphone}
           textboxLayout="default"
+          items={[
+            {
+              trigger: "trigger-1",              content: (
+                <>
+                  <h2 className="text-2xl font-bold mb-4">Lightning-Fast Loading</h2>
+                  <p className="text-base opacity-80">
+                    Your website loads in under 2 seconds on 4G, ensuring visitors
+                    stay engaged and conversion rates soar.
+                  </p>
+                </>
+              ),
+              imageOne: "/placeholder-phone-1.jpg",              imageTwo: "/placeholder-phone-2.jpg"},
+            {
+              trigger: "trigger-2",              content: (
+                <>
+                  <h2 className="text-2xl font-bold mb-4">Smooth 2G Experience</h2>
+                  <p className="text-base opacity-80">
+                    Progressive enhancement ensures functionality on all network
+                    speeds, reaching customers in rural and remote areas.
+                  </p>
+                </>
+              ),
+              imageOne: "/placeholder-phone-3.jpg",              imageTwo: "/placeholder-phone-4.jpg"},
+          ]}
+          showTextBox={true}
           animationType="slide-up"
+        />
+      </div>
+
+      <div id="about" data-section="about">
+        <MetricSplitMediaAbout
+          tag="Why We Lead"
+          tagIcon={CheckCircle}
+          title="Proven Results for Indian Businesses"
+          description="Our clients see tangible improvements in user engagement, conversion rates, and customer satisfaction. We measure success by your success."
+          metrics={[
+            { value: "300%", title: "Avg. mobile traffic increase" },
+            { value: "45%", title: "Avg. bounce rate reduction" },
+          ]}
+          imageSrc="/placeholder-about.jpg"
+          imageAlt="Success metrics"
           useInvertedBackground={false}
-          buttonAnimation="slide-up"
-          carouselMode="buttons"
+          mediaAnimation="slide-up"
+          metricsAnimation="slide-up"
         />
       </div>
 
       <div id="pricing" data-section="pricing">
-        <PricingCardEight
-          plans={[
-            {
-              id: "1",              badge: "Most Popular",              badgeIcon: Star,
-              price: "Free",              subtitle: "For casual shoppers",              buttons: [
-                { text: "Get Started", href: "/products" },
-              ],
-              features: [
-                "Browse millions of products",                "Secure checkout",                "Order tracking",                "Customer support"
-              ],
-            },
-            {
-              id: "2",              badge: "Best Value",              badgeIcon: Zap,
-              price: "$9.99",              subtitle: "Per month • Cancel anytime",              buttons: [
-                { text: "Subscribe Now", href: "/subscribe" },
-              ],
-              features: [
-                "Everything in Free",                "Free shipping on all orders",                "Early access to deals",                "Priority customer support",                "Exclusive member discounts"
-              ],
-            },
-            {
-              id: "3",              badge: "Premium",              badgeIcon: Package,
-              price: "$19.99",              subtitle: "Per month • Best savings",              buttons: [
-                { text: "Upgrade Now", href: "/upgrade" },
-              ],
-              features: [
-                "Everything in Plus",                "2-day guaranteed delivery",                "Extra discounts on sales",                "VIP concierge support",                "Exclusive product access",                "Birthday rewards"
-              ],
-            },
-          ]}
+        <PricingCardOne
+          plans={pricingPlans}
           animationType="slide-up"
-          title="Membership Plans"
-          description="Choose the perfect plan to enhance your shopping experience"
+          title="Simple, Transparent Pricing"
+          description="Choose the perfect plan for your business needs. All plans include mobile-first optimization and local payment support."
           tag="Pricing"
-          tagIcon={Package}
-          tagAnimation="slide-up"
+          tagIcon={Sparkles}
           textboxLayout="default"
           useInvertedBackground={false}
-          buttonAnimation="slide-up"
-          carouselMode="buttons"
         />
       </div>
 
       <div id="testimonials" data-section="testimonials">
-        <TestimonialCardSix
-          testimonials={[
-            {
-              id: "1",              name: "Sarah Johnson",              handle: "@sarah_j",              testimonial:
-                "ShopHub has completely transformed my online shopping experience. The variety and prices are unbeatable!",              imageSrc:
-                "http://img.b2bpic.net/free-photo/woman-smiling-in-portrait_23-2148632156.jpg",              imageAlt: "Sarah Johnson"
-            },
-            {
-              id: "2",              name: "Michael Chen",              handle: "@michael_tech",              testimonial:
-                "Fast shipping, great customer service, and authentic products. ShopHub is my go-to for everything!",              imageSrc:
-                "http://img.b2bpic.net/free-photo/portrait-businessman-smiling-indoors_23-2149098765.jpg",              imageAlt: "Michael Chen"
-            },
-            {
-              id: "3",              name: "Emily Rodriguez",              handle: "@emily_style",              testimonial:
-                "The exclusive deals and early access for members make this the best shopping platform I've found.",              imageSrc:
-                "http://img.b2bpic.net/free-photo/happy-young-woman-portrait_23-2147803456.jpg",              imageAlt: "Emily Rodriguez"
-            },
-            {
-              id: "4",              name: "James Wilson",              handle: "@james_shop",              testimonial:
-                "Reliable, secure, and user-friendly. ShopHub makes online shopping feel safe and enjoyable.",              imageSrc:
-                "http://img.b2bpic.net/free-photo/man-portrait-smiling-outdoor_23-2148234567.jpg",              imageAlt: "James Wilson"
-            },
-            {
-              id: "5",              name: "Lisa Martinez",              handle: "@lisa_love",              testimonial:
-                "Amazing selection, competitive prices, and they actually care about customer satisfaction. Highly recommended!",              imageSrc:
-                "http://img.b2bpic.net/free-photo/portrait-woman-beautiful-smiling_23-2148876543.jpg",              imageAlt: "Lisa Martinez"
-            },
-            {
-              id: "6",              name: "David Park",              handle: "@david_deals",              testimonial:
-                "Been shopping here for 2 years. The quality and service consistency is exceptional compared to competitors.",              imageSrc:
-                "http://img.b2bpic.net/free-photo/confident-man-portrait_23-2148901234.jpg",              imageAlt: "David Park"
-            },
-            {
-              id: "7",              name: "Jessica Lee",              handle: "@jessica_finds",              testimonial:
-                "ShopHub's recommendation system is incredible. I discover products I love every time I visit!",              imageSrc:
-                "http://img.b2bpic.net/free-photo/smiling-young-woman-looking-camera_23-2148654321.jpg",              imageAlt: "Jessica Lee"
-            },
-            {
-              id: "8",              name: "Robert Thompson",              handle: "@robert_online",              testimonial:
-                "Best shopping experience online. Great prices, authentic products, and lightning-fast delivery.",              imageSrc:
-                "http://img.b2bpic.net/free-photo/portrait-man-standing-smiling_23-2148765432.jpg",              imageAlt: "Robert Thompson"
-            },
+        <TestimonialCardFifteen
+          testimonial="Our collaboration with Webild transformed how we approach mobile-first development. The results exceeded all expectations."
+          rating={5}
+          author="Industry Leaders Across India"
+          avatars={[
+            { src: "/avatar-1.jpg", alt: "Customer 1" },
+            { src: "/avatar-2.jpg", alt: "Customer 2" },
+            { src: "/avatar-3.jpg", alt: "Customer 3" },
+            { src: "/avatar-4.jpg", alt: "Customer 4" },
+            { src: "/avatar-5.jpg", alt: "Customer 5" },
+            { src: "/avatar-6.jpg", alt: "Customer 6" },
           ]}
-          animationType="slide-up"
-          title="Customer Love"
-          description="Join millions of satisfied shoppers who trust ShopHub"
-          tag="Testimonials"
-          tagIcon={Star}
-          tagAnimation="slide-up"
-          textboxLayout="default"
+          ratingAnimation="slide-up"
+          avatarsAnimation="slide-up"
           useInvertedBackground={false}
-          buttonAnimation="slide-up"
-          speed={40}
-          topMarqueeDirection="left"
         />
       </div>
 
-      <div id="footer" data-section="footer">
-        <FooterSimple
-          columns={[
-            {
-              title: "Shop",              items: [
-                { label: "All Products", href: "/products" },
-                { label: "Deals", href: "/deals" },
-                { label: "Categories", href: "/categories" },
-                { label: "New Arrivals", href: "/new" },
-              ],
-            },
-            {
-              title: "Company",              items: [
-                { label: "About Us", href: "/about" },
-                { label: "Contact", href: "/contact" },
-                { label: "Careers", href: "/careers" },
-                { label: "Blog", href: "/blog" },
-              ],
-            },
-            {
-              title: "Support",              items: [
-                { label: "Help Center", href: "/help" },
-                { label: "Track Order", href: "/track" },
-                { label: "Returns", href: "/returns" },
-                { label: "Shipping Info", href: "/shipping" },
-              ],
-            },
-            {
-              title: "Legal",              items: [
-                { label: "Privacy Policy", href: "/privacy" },
-                { label: "Terms of Service", href: "/terms" },
-                { label: "Cookie Policy", href: "/cookies" },
-                { label: "Accessibility", href: "/accessibility" },
-              ],
-            },
-          ]}
-          bottomLeftText="© 2025 ShopHub. All rights reserved."
-          bottomRightText="Made with ❤️ for shoppers everywhere"
+      <div id="faq" data-section="faq">
+        <FaqSplitMedia
+          faqs={faqs}
+          imageSrc="/placeholder-faq.jpg"
+          imageAlt="Frequently asked questions"
+          title="Got Questions?"
+          description="Everything you need to know about our mobile-first web solutions for the Indian market."
+          tag="FAQ"
+          tagIcon={Sparkles}
+          textboxLayout="default"
+          useInvertedBackground={false}
+          mediaPosition="right"
+          mediaAnimation="slide-up"
+          faqsAnimation="slide-up"
+          animationType="smooth"
         />
       </div>
+
+      <div id="contact" data-section="contact">
+        <ContactSplitForm
+          title="Let's Build Your Success Story"
+          description="Get in touch with our team to discuss how we can help you reach and engage Indian users with a mobile-first web solution."
+          inputs={[
+            { name: "name", type: "text", placeholder: "Your name", required: true },
+            {
+              name: "email",              type: "email",              placeholder: "Email address",              required: true,
+            },
+            {
+              name: "company",              type: "text",              placeholder: "Company name",              required: true,
+            },
+          ]}
+          textarea={{
+            name: "message",            placeholder: "Tell us about your project...",            rows: 5,
+            required: true,
+          }}
+          useInvertedBackground={false}
+          imageSrc="/placeholder-contact.jpg"
+          imageAlt="Contact us"
+          mediaPosition="right"
+          mediaAnimation="slide-up"
+          buttonText="Send Message"
+          onSubmit={(data) => console.log("Form submitted:", data)}
+        />
+      </div>
+
+      <FooterBaseReveal
+        columns={footerColumns}
+        copyrightText="© 2025 Webild. All rights reserved. | Made for India."
+      />
     </ThemeProvider>
   );
 }

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-nunito-sans), sans-serif;
+  font-family: var(--font-poppins), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-nunito-sans), sans-serif;
+  font-family: var(--font-poppins), sans-serif;
 }

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
-  --card: #f9f9f9;
-  --foreground: #000612e6;
-  --primary-cta: #106EFB;
+  --background: #fff8f0;
+  --card: #fffbf5;
+  --foreground: #1a0f06;
+  --primary-cta: #d97706;
   --primary-cta-text: #f7f6f7;
-  --secondary-cta: #f9f9f9;
+  --secondary-cta: #fffbf5;
   --secondary-cta-text: #250c0d;
-  --accent: #106EFB;
-  --background-accent: #e2e2e2;
+  --accent: #f59e0b;
+  --background-accent: #fcd34d;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);