Update src/app/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -2,16 +2,17 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCenter from '@/components/sections/contact/ContactCenter';
-import FaqBase from '@/components/sections/faq/FaqBase';
-import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import FaqDouble from '@/components/sections/faq/FaqDouble';
+import FeatureBento from '@/components/sections/feature/FeatureBento';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import ProductCardFour from '@/components/sections/product/ProductCardFour';
+import ProductCardThree from '@/components/sections/product/ProductCardThree';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
-import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
-import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
+import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
+import AboutMetric from '@/components/sections/about/AboutMetric';
+import { BarChart, Zap, Target, Palette, Cpu, Code } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -41,119 +42,83 @@ export default function LandingPage() {
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroSplitDoubleCarousel
-      background={{ variant: "gradient-bars" }}
-      title="Elevating Digital Identity"
-      description="A&Z crafts high-performance, visually stunning websites tailored for modern businesses ready to scale in the digital era."
-      leftCarouselItems={[
-        { imageSrc: "http://img.b2bpic.net/free-photo/vibrant-abstract-sphere-illuminates-dark-backdrop-generated-by-ai_188544-11877.jpg", imageAlt: "modern tech background" },
-        { imageSrc: "http://img.b2bpic.net/free-photo/woman-touching-smart-technology-holographic-interface_53876-98409.jpg", imageAlt: "digital interface design" },
-        { imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-network-communications-background-with-plexus-design_1048-18865.jpg", imageAlt: "modern tech background" },
-        { imageSrc: "http://img.b2bpic.net/free-photo/side-view-businessman-doing-sport-with-stats_23-2150040521.jpg", imageAlt: "digital interface design" },
-        { imageSrc: "http://img.b2bpic.net/free-photo/3d-modern-low-poly-with-connecting-lines-dots_1048-12439.jpg", imageAlt: "modern tech background" },
-      ]}
-      rightCarouselItems={[
-        { imageSrc: "http://img.b2bpic.net/free-photo/programmer-developing-software-large-computer-screen_53876-101149.jpg", imageAlt: "digital interface design" },
-        { imageSrc: "http://img.b2bpic.net/free-photo/factory-employee-works-mockup-tablet-executives-discussing-strategies_482257-126500.jpg", imageAlt: "digital interface design" },
-        { imageSrc: "http://img.b2bpic.net/free-photo/blue-glasses-liquid-with-shadow-yellow-background_23-2147949153.jpg", imageAlt: "modern tech background" },
-        { imageSrc: "http://img.b2bpic.net/free-photo/computers-data-center-running-server-rigs-diagnostic-tests_482257-118495.jpg", imageAlt: "digital interface design" },
-        { imageSrc: "http://img.b2bpic.net/free-photo/abstract-geometric-background-with-futuristic-design_1048-5529.jpg", imageAlt: "modern tech background" },
-      ]}
+      <HeroLogoBillboard
+      logoText="A&Z Agency"
+      description="Crafting high-performance, visually stunning digital experiences for modern enterprises."
       buttons={[
         { text: "Get Started", href: "#contact" },
         { text: "View Portfolio", href: "#products" },
       ]}
-      avatars={[
-        { src: "http://img.b2bpic.net/free-photo/happy-young-professional-posing-office_1262-21170.jpg", alt: "Happy young professional" },
-        { src: "http://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg", alt: "Smiling Business Woman" },
-        { src: "http://img.b2bpic.net/free-photo/cheerful-young-businesswoman-wearing-eyeglasses_1262-4761.jpg", alt: "Cheerful young businesswoman" },
-        { src: "http://img.b2bpic.net/free-photo/closeup-handsome-middle-aged-business-leader_1262-4822.jpg", alt: "Business Leader" },
-        { src: "http://img.b2bpic.net/free-photo/closeup-senior-businessman-with-arms-crossed_1262-1751.jpg", alt: "Senior Businessman" },
-      ]}
-      avatarText="Trusted by 500+ professionals"
-      marqueeItems={[
-        { type: "text", text: "Innovation" },
-        { type: "text", text: "Scalability" },
-        { type: "text", text: "Performance" },
-        { type: "text", text: "Design" },
-        { type: "text", text: "Growth" },
-      ]}
+      background={{ variant: "gradient-bars" }}
+      imageSrc="http://img.b2bpic.net/free-photo/vibrant-abstract-sphere-illuminates-dark-backdrop-generated-by-ai_188544-11877.jpg"
+      mediaAnimation="blur-reveal"
     />
   </div>
 
   <div id="about" data-section="about">
-      <TextSplitAbout
+      <AboutMetric
+      title="Engineered for Excellence"
+      metrics={[
+        { icon: Zap, label: "Performance", value: "99%" },
+        { icon: Target, label: "Conversion", value: "3.5x" },
+        { icon: BarChart, label: "Growth", value: "200%" }
+      ]}
+      metricsAnimation="slide-up"
       useInvertedBackground={true}
-      title="Built for Growth"
-      description={[
-        "At A&Z, we bridge the gap between complex code and seamless user experiences.",        "Our mission is to help businesses transition into powerful, high-conversion digital spaces that represent their true value.",        "We focus on performance, scalability, and aesthetic precision in every line we deploy."]}
     />
   </div>
 
   <div id="features" data-section="features">
-      <FeatureCardOne
+      <FeatureBento
       animationType="slide-up"
       textboxLayout="split"
-      gridVariant="two-columns-alternating-heights"
       useInvertedBackground={false}
+      title="Core Capabilities"
+      description="We deliver comprehensive digital solutions through data-driven development."
       features={[
         {
-          title: "Custom Web Design",          description: "Beautiful layouts tailored to your unique identity.",          imageSrc: "http://img.b2bpic.net/free-photo/data-technology-green-background-with-computer-microchip-remixed-media_53876-108533.jpg"},
+          title: "Custom Development",          description: "Scalable code architectures.",          bentoComponent: "reveal-icon",          icon: Code
+        },
         {
-          title: "Responsive Performance",          description: "Fast-loading, optimized code across all device types.",          imageSrc: "http://img.b2bpic.net/free-photo/homepage-seen-computer-screen_23-2149416730.jpg"},
+          title: "User Interfaces",          description: "Stunning visual experiences.",          bentoComponent: "reveal-icon",          icon: Palette
+        },
         {
-          title: "Growth Analytics",          description: "Data-backed decision making for your digital presence.",          imageSrc: "http://img.b2bpic.net/free-photo/3d-graph-computer-illustration_23-2151884869.jpg"},
-        {
-          title: "API Integration",          description: "Seamlessly connect your tools to your web portal.",          imageSrc: "http://img.b2bpic.net/free-photo/closeup-computer-keyboard_53876-30489.jpg"},
-        {
-          title: "Cloud Infrastructure",          description: "Reliable and scalable hosting for any traffic.",          imageSrc: "http://img.b2bpic.net/free-photo/double-exposure-caucasian-man-virtual-reality-vr-headset-is-presumably-gamer-hacker-cracking-code-into-secure-network-server-with-lines-code_146671-18938.jpg"},
+          title: "Cloud Systems",          description: "Global infrastructure scaling.",          bentoComponent: "reveal-icon",          icon: Cpu
+        }
       ]}
-      title="Our Expertise"
-      description="Comprehensive digital development solutions designed for the modern landscape."
     />
   </div>
 
   <div id="products" data-section="products">
-      <ProductCardFour
+      <ProductCardThree
       animationType="blur-reveal"
       textboxLayout="split-description"
       gridVariant="three-columns-all-equal-width"
       useInvertedBackground={true}
+      title="Selected Projects"
+      description="Proven results across multiple digital sectors."
       products={[
         {
-          id: "p1",          name: "Enterprise Portal",          price: "Custom",          variant: "Web System",          imageSrc: "http://img.b2bpic.net/free-vector/abstract-sales-landing-page_23-2148323856.jpg"},
+          id: "p1",          name: "Enterprise Portal",          price: "$5,000",          imageSrc: "http://img.b2bpic.net/free-vector/abstract-sales-landing-page_23-2148323856.jpg"},
         {
-          id: "p2",          name: "Global Retail Store",          price: "Custom",          variant: "E-Commerce",          imageSrc: "http://img.b2bpic.net/free-photo/online-shopping-sale-app_23-2151952980.jpg"},
+          id: "p2",          name: "Retail Dashboard",          price: "$7,500",          imageSrc: "http://img.b2bpic.net/free-photo/online-shopping-sale-app_23-2151952980.jpg"},
         {
-          id: "p3",          name: "Brand Campaign App",          price: "Custom",          variant: "Mobile/Web",          imageSrc: "http://img.b2bpic.net/free-photo/3d-render-black-hands-holding-electronic-devices_107791-16647.jpg"},
-        {
-          id: "p4",          name: "Tech Hub Site",          price: "Custom",          variant: "Landing",          imageSrc: "http://img.b2bpic.net/free-photo/open-laptop-with-glowing-screen-notepad-table-night_169016-53665.jpg"},
-        {
-          id: "p5",          name: "Startup Dashboard",          price: "Custom",          variant: "SaaS UI",          imageSrc: "http://img.b2bpic.net/free-photo/settings-front-side-with-white-background_187299-39965.jpg"},
+          id: "p3",          name: "Brand App",          price: "$4,000",          imageSrc: "http://img.b2bpic.net/free-photo/3d-render-black-hands-holding-electronic-devices_107791-16647.jpg"}
       ]}
-      title="Selected Works"
-      description="Showcasing our recent high-impact web development projects."
     />
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTen
-      textboxLayout="default"
+      <TestimonialCardTwo
+      animationType="slide-up"
+      textboxLayout="split"
       useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "t1",          title: "Incredible Results",          quote: "A&Z transformed our vision into reality perfectly.",          name: "Sarah Miller",          role: "CEO",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg"},
-        {
-          id: "t2",          title: "Top Tier Agency",          quote: "The speed and design quality were beyond expectation.",          name: "John Doe",          role: "Director",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-bearded-man-suit_23-2149705918.jpg"},
-        {
-          id: "t3",          title: "Highly Recommend",          quote: "Our sales increased significantly after the redesign.",          name: "Alice Wang",          role: "Marketing",          imageSrc: "http://img.b2bpic.net/free-photo/happy-young-asian-businessman-businesswoman-meeting-brainstorming-some-new-ideas-about-project_7861-2781.jpg"},
-        {
-          id: "t4",          title: "Perfect Collaboration",          quote: "Professional, fast, and highly creative team.",          name: "Mark Evans",          role: "Founder",          imageSrc: "http://img.b2bpic.net/free-photo/succesful-businesswomen-giving-high-five_53876-15136.jpg"},
-        {
-          id: "t5",          title: "Game Changer",          quote: "Best tech investment we have made this year.",          name: "Clara Z.",          role: "VP Tech",          imageSrc: "http://img.b2bpic.net/free-photo/confident-successful-middle-aged-business-leader_1262-4872.jpg"},
-      ]}
       title="Client Success"
-      description="Read what our partners say about our design and development services."
+      description="Partnerships built on trust and results."
+      testimonials={[
+        { id: "t1", name: "Sarah Miller", role: "CEO", testimonial: "A&Z transformed our digital presence completely.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg" },
+        { id: "t2", name: "John Doe", role: "Director", testimonial: "Exceptional quality and fast execution.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-bearded-man-suit_23-2149705918.jpg" }
+      ]}
     />
   </div>
 
@@ -161,65 +126,45 @@ export default function LandingPage() {
       <SocialProofOne
       textboxLayout="default"
       useInvertedBackground={true}
-      names={["Microsoft", "Google", "Apple", "Amazon", "Netflix", "Tesla", "NVIDIA"]}
-      title="Trusted Partners"
-      description="Collaborating with leading innovators worldwide."
+      names={["Microsoft", "Google", "Apple", "Amazon", "Netflix", "Tesla"]}
+      title="Trusted by Industry Leaders"
+      description="Collaborating with world-class innovators."
     />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqBase
+      <FaqDouble
       textboxLayout="default"
       useInvertedBackground={false}
-      faqs={[
-        { id: "q1", title: "How do you start?", content: "We begin with a discovery phase to align on goals." },
-        { id: "q2", title: "What is the timeline?", content: "Projects typically range from 4 to 12 weeks." },
-        { id: "q3", title: "Do you support after launch?", content: "Yes, we offer ongoing maintenance and growth support." },
-        { id: "q4", title: "Do you work with startups?", content: "Absolutely, we specialize in helping early-stage ventures." },
-        { id: "q5", title: "Is the code proprietary?", content: "You own 100% of the code upon project completion." },
-      ]}
-      title="Frequently Asked"
+      title="Common Questions"
+      description="Everything you need to know about working with us."
       faqsAnimation="slide-up"
-      description="Find answers to our most common project inquiries."
+      faqs={[
+        { id: "q1", title: "How do we start?", content: "Initial discovery call leads to a strategic roadmap." },
+        { id: "q2", title: "What is the turnaround?", content: "Typical projects range from 4-8 weeks depending on scope." }
+      ]}
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactCenter
+      <ContactCTA
+      tag="Collaboration"
+      title="Ready to innovate?"
+      description="Get in touch with our team for a consultation."
+      buttons={[{ text: "Start Now", href: "#contact" }]}
+      background={{ variant: "sparkles-gradient" }}
       useInvertedBackground={true}
-      background={{ variant: "rotated-rays-animated" }}
-      tag="Let's Talk"
-      title="Ready to launch your site?"
-      description="Join our newsletter and start building your future today."
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterBaseCard
+      <FooterLogoReveal
       logoText="A&Z Agency"
-      columns={[
-        {
-          title: "Agency",          items: [
-            { label: "About", href: "#about" },
-            { label: "Careers", href: "#" },
-          ],
-        },
-        {
-          title: "Services",          items: [
-            { label: "Design", href: "#" },
-            { label: "Development", href: "#" },
-          ],
-        },
-        {
-          title: "Legal",          items: [
-            { label: "Privacy", href: "#" },
-            { label: "Terms", href: "#" },
-          ],
-        },
-      ]}
+      leftLink={{ text: "Privacy Policy", href: "#" }}
+      rightLink={{ text: "Terms of Service", href: "#" }}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}