src/app/page.tsx

@@ -5,15 +5,13 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
 import HeroSplitDoubleCarousel from "@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo";
 import FeatureBento from "@/components/sections/feature/featureBorderGlow/FeatureBorderGlow";
-import FeatureCardTwentySix from "@/components/sections/feature/featureBorderGlow/FeatureBorderGlow";
-import FeatureCardSixteen from "@/components/sections/feature/featureBorderGlow/FeatureBorderGlow";
 import MetricCardOne from "@/components/sections/metrics/MetricCardThree";
 import TeamCardFive from "@/components/sections/team/TeamCardTen";
 import FaqBase from "@/components/sections/faq/FaqSplitText";
 import ContactCTA from "@/components/sections/contact/ContactSplitForm";
 import FooterBase from "@/components/sections/footer/FooterSimple";
 import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardOne";
-import { Sparkles, Search, ArrowUpRight, Monitor, Shield, Zap, Puzzle, TrendingUp, Lock, Phone, MessageCircle, BookOpen, Tv, Camera, Music, Settings, Award, Users } from "lucide-react";
+import { Shield, Zap, Lock, TrendingUp } from "lucide-react";
 
 export default function WebAgency2Page() {
   return (
@@ -25,27 +23,29 @@ export default function WebAgency2Page() {
       sizing="medium"
       background="none"
       cardStyle="glass-elevated"
-      primaryButtonStyle="metallic"
+      primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
       headingFontWeight="medium"
     >
       <ReactLenis root>
-        <NavbarLayoutFloatingOverlay
-          brandName="C.A.C WEB BUILDER"
-          navItems={[
-            { name: "Work", id: "work" },
-            { name: "Services", id: "services" },
-            { name: "About", id: "about" },
-            { name: "Contact", id: "contact" },
-          ]}
-          button={{ text: "Get Started", href: "/contact" }}
-        />
-        <div id="hero">
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            brandName="C.A.C WEB BUILDER"
+            navItems={[
+              { name: "Work", id: "work" },
+              { name: "Services", id: "services" },
+              { name: "About", id: "about" },
+              { name: "Contact", id: "contact" },
+            ]}
+            button={{ text: "Get Started", href: "/contact" }}
+          />
+        </div>
+        <div id="hero" data-section="hero">
           <HeroSplitDoubleCarousel
             logoText="C.A.C WEB BUILDER"
             description="Enterprise-grade web solutions designed for high performance, security, and scalability. C.A.C WEB BUILDER transforms your vision into a robust digital reality."
             buttons={[
-              { text: "Start Project", href: "/contact" },
+              { text: "Start Project", href: "#contact" },
               { text: "View Portfolio", href: "#work" },
             ]}
             slides={[
@@ -55,7 +55,7 @@ export default function WebAgency2Page() {
             ]}
           />
         </div>
-        <div id="services">
+        <div id="services" data-section="services">
           <FeatureBento
             title="Core Capabilities"
             description="We focus on technical excellence to ensure your business stays ahead of the competition."
@@ -64,71 +64,80 @@ export default function WebAgency2Page() {
             animationType="slide-up"
             features={[
               { title: "Secure Infrastructure", description: "Robust security protocols designed for enterprise requirements.", icon: Lock },
-              { title: "Scalable Architecture", description: "Future-proof your business with our modular, high-load code.", icon: Puzzle },
+              { title: "Scalable Architecture", description: "Future-proof your business with our modular, high-load code.", icon: Zap },
               { title: "Conversion Focus", description: "UI/UX optimized for maximum engagement and lead generation.", icon: TrendingUp },
             ]}
           />
         </div>
-        <div id="work">
+        <div id="work" data-section="work">
           <TestimonialCardFifteen
              title="Proven Track Record"
              description="Our portfolio demonstrates our commitment to precision, design, and technical mastery."
              gridVariant="uniform-all-items-equal"
              animationType="slide-up"
              textboxLayout="default"
+             useInvertedBackground={false}
              testimonials={[
                { id: "1", name: "Financial Portal", role: "Secure", company: "FinTech", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/business-person-looking-finance-graphs_23-2150461311.jpg" },
                { id: "2", name: "B2B SaaS Hub", role: "Workflow", company: "SaaS", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/goal-oriented-entrepreneur-luxurious-corporate-office-plans-strategy_482257-128191.jpg" }
              ]}
           />
         </div>
-        <div id="about">
+        <div id="about" data-section="about">
            <TeamCardFive
               title="Our Team"
               tag="Experts"
               memberVariant="card"
+              useInvertedBackground={false}
+              membersAnimation="slide-up"
               members={[
                 { id: "m1", name: "Engineering Lead" },
                 { id: "m2", name: "Design Specialist" }
               ]}
            />
         </div>
-        <div id="metrics">
+        <div id="metrics" data-section="metrics">
           <MetricCardOne
             title="Data-Driven Results"
             description="We measure our success by the growth of your business."
             animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
             metrics={[
               { id: "p1", title: "Uptime", value: "99.9%", icon: Shield },
               { id: "p2", title: "Speed Boost", value: "2x", icon: Zap },
             ]}
           />
         </div>
-        <div id="faq">
+        <div id="faq" data-section="faq">
           <FaqBase
-            title="Technical FAQs"
+            sideTitle="Technical FAQs"
             faqsAnimation="slide-up"
+            useInvertedBackground={false}
             faqs={[
               { id: "f1", title: "How do you ensure project security?", content: "We implement industry-standard security protocols." },
               { id: "f2", title: "Can you handle large-scale apps?", content: "Yes, we specialize in high-traffic architectures." },
             ]}
           />
         </div>
-        <div id="contact">
+        <div id="contact" data-section="contact">
           <ContactCTA
             title="Ready to Build?"
             description="Contact us for a professional assessment."
+            useInvertedBackground={false}
             inputs={[{ name: "name", type: "text", placeholder: "Your Name" }, { name: "email", type: "email", placeholder: "Your Email" }]}
           />
         </div>
-        <FooterBase
-          columns={[
-            { title: "Solutions", items: [{ label: "Engineering", href: "#" }] },
-            { title: "Company", items: [{ label: "About", href: "#" }] },
-          ]}
-          bottomLeftText="C.A.C WEB BUILDER"
-          bottomRightText="© 2026"
-        />
+        <div id="footer" data-section="footer">
+          <FooterBase
+            columns={[
+              { title: "Solutions", items: [{ label: "Engineering", href: "#" }] },
+              { title: "Company", items: [{ label: "About", href: "#" }] },
+            ]}
+            bottomLeftText="C.A.C WEB BUILDER"
+            bottomRightText="© 2026"
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );