Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -2,176 +2,133 @@
 
 import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import HeroSplitDoubleCarousel from "@/components/sections/hero/HeroSplitDoubleCarousel";
-import FeatureBento from "@/components/sections/feature/FeatureBento";
-import FeatureCardTwentySix from "@/components/sections/feature/FeatureCardTwentySix";
-import FeatureCardSixteen from "@/components/sections/feature/FeatureCardSixteen";
-import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
-import TeamCardFive from "@/components/sections/team/TeamCardFive";
-import FaqBase from "@/components/sections/faq/FaqBase";
-import ContactCTA from "@/components/sections/contact/ContactCTA";
-import FooterBase from "@/components/sections/footer/FooterBase";
-import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
-import { Sparkles, ArrowUpRight, Monitor, Shield, Zap, Bot, MessageSquare, Briefcase, ChevronRight, Award, Users, TrendingUp } from "lucide-react";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import HeroSplitDualMedia from "@/components/sections/hero/HeroSplitDualMedia";
+import FeatureCardTwelve from "@/components/sections/feature/FeatureCardTwelve";
+import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
+import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
+import FaqSplitText from "@/components/sections/faq/FaqSplitText";
+import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
+import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
+import { Sparkles, Bot, TrendingUp, Zap } from "lucide-react";
 
 export default function VantageDigitalPage() {
   return (
     <ThemeProvider
       defaultButtonVariant="text-stagger"
       defaultTextAnimation="entrance-slide"
-      borderRadius="none"
+      borderRadius="rounded"
       contentWidth="medium"
       sizing="medium"
-      background="none"
+      background="circleGradient"
       cardStyle="glass-elevated"
-      primaryButtonStyle="metallic"
+      primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
-      headingFontWeight="bold"
+      headingFontWeight="normal"
     >
       <ReactLenis root>
-        <NavbarLayoutFloatingOverlay
-          brandName="Vantage"
-          navItems={[
-            { name: "Work", id: "work" },
-            { name: "Services", id: "services" },
-            { name: "Process", id: "process" },
-            { name: "Contact", id: "contact" },
-          ]}
-          button={{ text: "Get Started", href: "https://wa.me/9647502904552" }}
-        />
-        <HeroSplitDoubleCarousel
-          title="Digital Sales Machines"
-          description="We transform ambitious ideas into high-converting digital realities, blending luxury aesthetics with smart automation."
-          tag="Premium Digital Agency"
-          tagIcon={Sparkles}
-          tagAnimation="slide-up"
-          background={{ variant: "canvas-reveal" }}
-          buttons={[
-            { text: "Book Consultation", href: "https://wa.me/9647502904552" },
-            { text: "Our Work", href: "#work" },
-          ]}
-          buttonAnimation="slide-up"
-          carouselPosition="right"
-          leftCarouselItems={[
-            { imageSrc: "http://img.b2bpic.net/free-photo/front-view-desk-concept-with-copy-space_23-2148459698.jpg", imageAlt: "Dark aesthetic workspace" },
-            { imageSrc: "http://img.b2bpic.net/free-photo/minimal-style-device-screen_23-2151913297.jpg", imageAlt: "Modern UI mockup" },
-            { imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-abstract-black-white-background_23-2150914053.jpg", imageAlt: "Digital network abstract" },
-          ]}
-          rightCarouselItems={[
-            { imageSrc: "http://img.b2bpic.net/free-photo/two-secret-agents-examine-case-details-cia-safe-house-with-mockup_482257-118600.jpg", imageAlt: "Macbook mockup in dark mode" },
-            { imageSrc: "http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-102969.jpg", imageAlt: "Sleek tech interface" },
-            { imageSrc: "http://img.b2bpic.net/free-photo/futuristic-ai-dashboard-display_23-2151977856.jpg", imageAlt: "Automation workflow" },
-          ]}
-          carouselItemClassName="!aspect-[4/5]"
-        />
-        <FeatureBento
-          title="Core Expertise"
-          description="Elite services built to accelerate business growth."
-          textboxLayout="default"
-          useInvertedBackground={false}
-          animationType="slide-up"
-          features={[
-            {
-              title: "Web Architecture",              description: "Fast, secure, and SEO-optimized interactive environments that convert.",              bentoComponent: "reveal-icon",              icon: Monitor,
-            },
-            {
-              title: "AI Automation",              description: "Smart booking systems and WhatsApp workflows to eliminate manual effort.",              bentoComponent: "chat",              aiIcon: Bot,
-              userIcon: MessageSquare,
-              exchanges: [
-                { userMessage: "Is my order confirmed?", aiResponse: "Yes, I've updated your status in the CRM automatically." },
-                { userMessage: "Book a demo", aiResponse: "Slot confirmed for Tuesday at 2 PM." },
-              ],
-              placeholder: "Chat with our AI..."
-            },
-            {
-              title: "Luxury Branding",              description: "Crafting high-end identities that command attention in crowded markets.",              bentoComponent: "media-stack",              items: [
-                { imageSrc: "http://img.b2bpic.net/free-photo/blank-stationery-set-corporate-identity-template_93675-130793.jpg", imageAlt: "Brand identity sample" },
-                { imageSrc: "http://img.b2bpic.net/free-photo/gold-packaging-white-surface_23-2151965918.jpg", imageAlt: "Luxury logotype" },
-                { imageSrc: "http://img.b2bpic.net/free-photo/high-angle-selection-cards-with-black-lives-matter-with-plant_23-2148802427.jpg", imageAlt: "Typography scale" },
-              ],
-            },
-          ]}
-        />
-        <FeatureCardTwentySix
-          title="Featured Work"
-          description="See how we turn brands into digital powerhouses."
-          textboxLayout="default"
-          useInvertedBackground={false}
-          features={[
-            { title: "Obsidian Real Estate", description: "High-end property portal", imageSrc: "http://img.b2bpic.net/free-photo/real-estate-accommodation-property-investment-graphic-word_53876-127370.jpg", buttonIcon: ArrowUpRight },
-            { title: "Velvet Commerce", description: "Premium e-commerce flow", imageSrc: "http://img.b2bpic.net/free-photo/orange-faded-flower-vase_23-2148073849.jpg", buttonIcon: ArrowUpRight },
-            { title: "Apex Automation", description: "SaaS workflow system", imageSrc: "http://img.b2bpic.net/free-photo/professional-person-engaging-with-ai-chatbot-computer-screen_482257-126263.jpg", buttonIcon: ArrowUpRight },
-            { title: "Lumina Branding", description: "Full brand identity refresh", imageSrc: "http://img.b2bpic.net/free-photo/stationery-business-visiting-cards-flat-lay_23-2148500535.jpg", buttonIcon: ArrowUpRight },
-          ]}
-        />
-        <MetricCardOne
-          title="The Vantage Advantage"
-          description="We deliver performance, not just pretty designs."
-          gridVariant="uniform-all-items-equal"
-          animationType="slide-up"
-          metrics={[
-            { id: "conversion", value: "40%+", title: "Conversion Lift", description: "Average increase for our clients", icon: TrendingUp },
-            { id: "automation", value: "80h", title: "Manual Work Saved", description: "Per month via our AI systems", icon: Bot },
-            { id: "speed", value: "98/100", title: "Google Lighthouse", description: "Performance scores on average", icon: Zap },
-          ]}
-        />
-        <TestimonialCardFifteen
-          testimonial="Vantage Digital didn't just build us a website; they built us a sales machine. The automation workflows alone have saved us countless hours."
-          rating={5}
-          author="— Client Name, Business Owner"
-          avatars={[{ src: "http://img.b2bpic.net/free-photo/handsome-bearded-african-american-businessman-brown-classic-jacket-isolated-dark-background_613910-6551.jpg", alt: "Client" }]}
-          ratingAnimation="slide-up"
-          avatarsAnimation="slide-up"
-          useInvertedBackground={false}
-        />
-        <FaqBase
-          title="Common Questions"
-          description="Everything you need to know about our premium digital approach."
-          faqsAnimation="slide-up"
-          faqs={[
-            { id: "1", title: "What makes a 'Digital Sales Machine'?", content: "We combine high-conversion UI/UX with backend automation that handles lead nurturing, booking, and customer management, so you don't have to." },
-            { id: "2", title: "Do you work with non-tech clients?", content: "Yes, we specialize in helping traditional business owners transition into the digital age with intuitive, managed, and automated solutions." },
-            { id: "3", title: "Is WhatsApp integration included?", content: "Absolutely. We integrate persistent, intelligent WhatsApp workflows into your site for seamless lead communication." },
-          ]}
-          textboxLayout="default"
-          useInvertedBackground={false}
-        />
-        <ContactCTA
-          tag="Ready to scale?"
-          title="Build Your Sales Machine"
-          description="Ready to take your business to the next level? Book your free consultation now via WhatsApp."
-          buttons={[
-            { text: "WhatsApp Chat", href: "https://wa.me/9647502904552" },
-            { text: "Email Us", href: "mailto:vantage.digital.jo@gmail.com" },
-          ]}
-          useInvertedBackground={false}
-          background={{ variant: "sparkles-gradient" }}
-        />
-        <FooterBase
-          logoText="Vantage Digital"
-          columns={[
-            {
-              title: "Navigate",              items: [
-                { label: "Work", href: "#work" },
-                { label: "Services", href: "#services" },
-                { label: "Contact", href: "#contact" },
-              ],
-            },
-            {
-              title: "Contact",              items: [
-                { label: "vantage.digital.jo@gmail.com", href: "mailto:vantage.digital.jo@gmail.com" },
-                { label: "WhatsApp (24/7)", href: "https://wa.me/9647502904552" },
-              ],
-            },
-            {
-              title: "Social",              items: [
-                { label: "Instagram", href: "https://instagram.com/vantage.digital.jo" },
-              ],
-            },
-          ]}
-        />
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "Services", id: "services" },
+              { name: "Portfolio", id: "portfolio" },
+              { name: "Process", id: "process" },
+              { name: "Contact", id: "contact" },
+            ]}
+            brandName="Vantage Digital"
+            button={{ text: "Get Started", href: "https://wa.me/9647502904552" }}
+          />
+        </div>
+        <div id="hero" data-section="hero">
+          <HeroSplitDualMedia
+            title="Vantage Digital: We Build Your Digital Sales Machine"
+            description="Transforming ambitious ideas into premium digital realities with smart automation."
+            tag="Premium Digital Agency"
+            tagIcon={Sparkles}
+            tagAnimation="slide-up"
+            background={{ variant: "canvas-reveal" }}
+            buttons={[
+              { text: "Book Consultation", href: "https://wa.me/9647502904552" },
+              { text: "Our Portfolio", href: "portfolio" },
+            ]}
+            buttonAnimation="slide-up"
+            mediaItems={[
+              { imageSrc: "http://img.b2bpic.net/free-photo/front-view-desk-concept-with-copy-space_23-2148459698.jpg", imageAlt: "Workstation" },
+              { imageSrc: "http://img.b2bpic.net/free-photo/minimal-style-device-screen_23-2151913297.jpg", imageAlt: "Laptop" }
+            ]}
+            rating={5}
+            ratingText="Rated 5/5 by our clients"
+          />
+        </div>
+        <div id="portfolio" data-section="portfolio">
+          <FeatureCardTwelve
+            title="Our Portfolio"
+            description="Premium digital realities we have built."
+            textboxLayout="default"
+            animationType="slide-up"
+            useInvertedBackground={false}
+            features={[
+              { id: "p1", label: "Web", title: "Real Estate Portal", items: ["High-end showcase"] },
+              { id: "p2", label: "Commerce", title: "Luxury Suite", items: ["E-commerce flow"] }
+            ]}
+          />
+        </div>
+        <div id="metrics" data-section="metrics">
+          <MetricCardThree
+            title="The Vantage Advantage"
+            description="Performance-driven metrics for ambitious brands."
+            textboxLayout="default"
+            animationType="slide-up"
+            useInvertedBackground={false}
+            metrics={[
+              { id: "m1", icon: TrendingUp, title: "Conversion Lift", value: "40%+" },
+              { id: "m2", icon: Bot, title: "Manual Saved", value: "80h" },
+              { id: "m3", icon: Zap, title: "Performance", value: "98/100" }
+            ]}
+          />
+        </div>
+        <div id="testimonials" data-section="testimonials">
+          <TestimonialCardSix
+            title="Client Stories"
+            description="What our partners say about us."
+            textboxLayout="default"
+            animationType="slide-up"
+            useInvertedBackground={false}
+            testimonials={[
+              { id: "t1", name: "Client Owner", handle: "@client", testimonial: "Vantage Digital built us a sales machine. The automation workflows saved us hours." }
+            ]}
+          />
+        </div>
+        <div id="process" data-section="process">
+          <FaqSplitText
+            sideTitle="Our Process"
+            sideDescription="How we transform your business."
+            faqsAnimation="slide-up"
+            useInvertedBackground={false}
+            faqs={[
+              { id: "f1", title: "Strategy", content: "Defining your brand." },
+              { id: "f2", title: "Build", content: "Engineering your machine." }
+            ]}
+          />
+        </div>
+        <div id="contact" data-section="contact">
+          <ContactSplitForm
+            title="Build Your Sales Machine"
+            description="Ready for a premium digital transformation?"
+            inputs={[{ name: "name", type: "text", placeholder: "Your Name" }, { name: "email", type: "email", placeholder: "Your Email" }]}
+            useInvertedBackground={false}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterLogoEmphasis
+            logoText="Vantage Digital"
+            columns={[
+              { items: [{ label: "Services", href: "services" }, { label: "Portfolio", href: "portfolio" }] },
+              { items: [{ label: "Email", href: "mailto:vantage.digital.jo@gmail.com" }] }
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -12,13 +12,13 @@
 
   --background: #0a0a0a;
   --card: #161616;
-  --foreground: #f0f0f0;
-  --primary-cta: #ffffff;
+  --foreground: #f5f5f5;
+  --primary-cta: #ffdf7d;
   --primary-cta-text: #0a0a0a;
-  --secondary-cta: #1e1e1e;
+  --secondary-cta: #1a1a1a;
   --secondary-cta-text: #e0e0e0;
-  --accent: #d0d0d0;
-  --background-accent: #9a9a9a;
+  --accent: #b8860b;
+  --background-accent: #8b6914;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);