Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -2,335 +2,122 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCenter from '@/components/sections/contact/ContactCenter';
-import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
-import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
-import FooterSimple from '@/components/sections/footer/FooterSimple';
-import HeroBillboard from '@/components/sections/hero/HeroBillboard';
-import MediaAbout from '@/components/sections/about/MediaAbout';
-import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
-import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
+import ContactText from '@/components/sections/contact/ContactText';
+import FaqSplitText from '@/components/sections/faq/FaqSplitText';
+import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
+import AboutMetric from '@/components/sections/about/AboutMetric';
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
+import { Users, Target, Zap, BarChart3, CheckCircle2 } from 'lucide-react';
 
 export default function LandingPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="hover-bubble"
+        defaultButtonVariant="hover-magnetic"
         defaultTextAnimation="reveal-blur"
-        borderRadius="pill"
-        contentWidth="mediumLarge"
-        sizing="large"
-        background="noise"
-        cardStyle="gradient-radial"
-        primaryButtonStyle="diagonal-gradient"
-        secondaryButtonStyle="glass"
-        headingFontWeight="medium"
+        borderRadius="soft"
+        contentWidth="medium"
+        sizing="medium"
+        background="none"
+        cardStyle="outline"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="solid"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
-      <NavbarStyleApple
+      <NavbarStyleCentered
       navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Services",
-          id: "features",
-        },
-        {
-          name: "Testimonials",
-          id: "testimonials",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
+        { name: "Home", id: "hero" },
+        { name: "About", id: "about" },
+        { name: "Services", id: "features" },
+        { name: "Testimonials", id: "testimonials" },
+        { name: "Contact", id: "contact" },
       ]}
       brandName="Ciphers"
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroBillboard
-      background={{
-        variant: "sparkles-gradient",
-      }}
-      title="Scale Your Presence with Ciphers"
-      description="Unlock exponential growth with data-driven digital marketing strategies that transform your brand into a market leader."
-      buttons={[
-        {
-          text: "Get Started",
-          href: "#contact",
-        },
-        {
-          text: "Our Services",
-          href: "#features",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/top-view-abstract-assortment-with-innovation-elements_23-2148909092.jpg"
-      mediaAnimation="blur-reveal"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/happy-businessman-with-smartphone-smiling-camera_23-2148112961.jpg",
-          alt: "User 1",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/elderly-client-looking-formal-blazers-shopping-mall_482257-93110.jpg",
-          alt: "User 2",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/blonde-businesswoman-analyzing-financial-graphs-using-vr-headset-working-overtime-startup-office-executive-manager-wearing-virtual-reality-goggles-planning-financial-investment-strategy_482257-59715.jpg",
-          alt: "User 3",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/multicultural-group-businesswomen-high-powered-meeting_482257-123612.jpg",
-          alt: "User 4",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/young-female-entrepreneur-thinking-about-solution_1163-4334.jpg",
-          alt: "User 5",
-        },
-      ]}
-      avatarText="Trusted by 500+ global brands"
-      marqueeItems={[
-        {
-          type: "image",
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=vcxobx",
-          alt: "Logo 1",
-        },
-        {
-          type: "image",
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=63j321",
-          alt: "Logo 2",
-        },
-        {
-          type: "image",
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=m2dnoj",
-          alt: "Logo 3",
-        },
-        {
-          type: "image",
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=v2yk3k",
-          alt: "Logo 4",
-        },
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-photo/papers-pink-wooden-surface_23-2147661206.jpg",
-          alt: "Logo 5",
-        },
+      <HeroBillboardCarousel
+      background={{ variant: "plain" }}
+      title="Modern Minimalist Digital Growth"
+      description="Ciphers delivers high-impact marketing strategies for forward-thinking brands."
+      mediaItems={[
+        { imageSrc: "http://img.b2bpic.net/free-photo/minimalist-workspace_23-2148943806.jpg", imageAlt: "Hero Image" }
       ]}
     />
   </div>
 
   <div id="about" data-section="about">
-      <MediaAbout
+      <AboutMetric
+      title="Core Metrics"
+      metrics={[
+        { icon: Users, label: "Audience", value: "500k+" },
+        { icon: Target, label: "Conversion", value: "25%" },
+        { icon: BarChart3, label: "Growth", value: "3x" }
+      ]}
+      metricsAnimation="slide-up"
       useInvertedBackground={false}
-      title="Data-First Marketing for the Modern Age"
-      description="At Ciphers, we believe that every click tells a story. Our team of analysts and creative strategists works in harmony to turn your business objectives into tangible, scalable results through targeted digital campaigns."
-      imageSrc="http://img.b2bpic.net/free-photo/group-graphics-designers-using-digital-tablet_1170-989.jpg?_wi=1"
     />
   </div>
 
   <div id="features" data-section="features">
-      <FeatureCardSeven
-      animationType="slide-up"
+      <FeatureCardEight
       textboxLayout="split"
-      useInvertedBackground={false}
+      title="Our Expertise"
+      description="Precise execution across all channels."
       features={[
-        {
-          title: "SEO Mastery",
-          description: "Climb search rankings and dominate your industry keywords with our comprehensive technical and content-focused SEO approach.",
-          imageSrc: "http://img.b2bpic.net/free-photo/business-person-hand-holding-financial-statistics-displayed-t_1150-773.jpg",
-        },
-        {
-          title: "Social Campaigning",
-          description: "Ignite engagement with precision-targeted social media advertising that connects with your ideal customer base on a personal level.",
-          imageSrc: "http://img.b2bpic.net/free-photo/black-lives-matter-movement_23-2148913816.jpg",
-        },
-        {
-          title: "Growth Automation",
-          description: "Streamline your customer journey and boost retention rates through automated email flows and smart marketing orchestration.",
-          imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169851.jpg",
-        },
+        { title: "Strategy", description: "Data-driven foundations.", imageSrc: "http://img.b2bpic.net/free-photo/abstract-business-strategy_1150-1345.jpg" },
+        { title: "Optimization", description: "Continuous improvement.", imageSrc: "http://img.b2bpic.net/digital-optimization_1150-1346.jpg" }
       ]}
-      title="Comprehensive Marketing Solutions"
-      description="We offer a suite of services designed to capture attention and drive conversions across all digital touchpoints."
-    />
-  </div>
-
-  <div id="socialProof" data-section="socialProof">
-      <SocialProofOne
-      textboxLayout="default"
       useInvertedBackground={false}
-      names={[
-        "NexusTech",
-        "AeroSystems",
-        "GlobalLogics",
-        "VantagePoint",
-        "StreamlineSolutions",
-        "InnovateCore",
-        "PrimeVelocity",
-      ]}
-      title="Trusted by Market Leaders"
-      description="We are proud to work alongside some of the world's most innovative brands to drive meaningful change."
     />
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardSixteen
+      <TestimonialCardSix
+      title="Client Success"
+      description="Results that speak for themselves."
+      textboxLayout="default"
       animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={false}
       testimonials={[
-        {
-          id: "1",
-          name: "Sarah Jenkins",
-          role: "CEO",
-          company: "NexusTech",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-businessman-with-smartphone-smiling-camera_23-2148112961.jpg",
-        },
-        {
-          id: "2",
-          name: "Mark Roberts",
-          role: "CMO",
-          company: "AeroSystems",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/elderly-client-looking-formal-blazers-shopping-mall_482257-93110.jpg",
-        },
-        {
-          id: "3",
-          name: "Elena Rossi",
-          role: "Product Director",
-          company: "VantagePoint",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/blonde-businesswoman-analyzing-financial-graphs-using-vr-headset-working-overtime-startup-office-executive-manager-wearing-virtual-reality-goggles-planning-financial-investment-strategy_482257-59715.jpg",
-        },
-        {
-          id: "4",
-          name: "David Thorne",
-          role: "Innovation Lead",
-          company: "InnovateCore",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/multicultural-group-businesswomen-high-powered-meeting_482257-123612.jpg",
-        },
-        {
-          id: "5",
-          name: "Jessica Lee",
-          role: "Marketing Head",
-          company: "StreamlineSolutions",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-female-entrepreneur-thinking-about-solution_1163-4334.jpg",
-        },
+        { id: "1", name: "Alex P.", handle: "@client", testimonial: "Ciphers transformed our digital presence." }
       ]}
-      kpiItems={[
-        {
-          value: "200%",
-          label: "Growth Rate",
-        },
-        {
-          value: "150+",
-          label: "Successful Projects",
-        },
-        {
-          value: "45%",
-          label: "Conversion Boost",
-        },
-      ]}
-      title="Real Results, Real Partners"
-      description="Don't just take our word for it. Our partners consistently achieve unprecedented growth through our collaborative partnership approach."
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqSplitMedia
-      textboxLayout="split"
-      useInvertedBackground={false}
+      <FaqSplitText
+      sideTitle="FAQ"
       faqs={[
-        {
-          id: "f1",
-          title: "How long does it take to see results?",
-          content: "Typically, our clients begin seeing significant improvements within the first 60 days of our strategy execution phase.",
-        },
-        {
-          id: "f2",
-          title: "Do you provide transparent reporting?",
-          content: "Absolutely. We provide real-time reporting dashboards for all clients, ensuring full visibility into campaign performance.",
-        },
-        {
-          id: "f3",
-          title: "Can you handle multiple channels?",
-          content: "Yes, our cross-channel expertise allows us to unify your marketing message across search, social, and email.",
-        },
+        { id: "1", title: "How do we begin?", content: "Contact us for a discovery call." }
       ]}
-      mediaAnimation="slide-up"
-      title="Common Questions"
-      description="Get clear insights on how we work and how we can support your growth objectives."
       faqsAnimation="slide-up"
-      imageSrc="http://img.b2bpic.net/free-photo/group-graphics-designers-using-digital-tablet_1170-989.jpg?_wi=2"
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactCenter
+      <ContactText
+      text="Let's build your future together."
+      background={{ variant: "plain" }}
       useInvertedBackground={false}
-      background={{
-        variant: "plain",
-      }}
-      tag="Let's Connect"
-      title="Ready to scale your business?"
-      description="Schedule a discovery session today and discover how we can help you achieve your goals."
+      buttons={[{ text: "Get Started" }]}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterSimple
-      columns={[
-        {
-          title: "Services",
-          items: [
-            {
-              label: "SEO Strategy",
-              href: "#",
-            },
-            {
-              label: "Performance Marketing",
-              href: "#",
-            },
-            {
-              label: "Brand Growth",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Company",
-          items: [
-            {
-              label: "About Us",
-              href: "#",
-            },
-            {
-              label: "Careers",
-              href: "#",
-            },
-            {
-              label: "Privacy Policy",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-      bottomLeftText="© 2024 Ciphers Digital Marketing."
-      bottomRightText="All rights reserved."
+      <FooterLogoReveal
+      logoText="Ciphers"
+      leftLink={{ text: "Privacy" }}
+      rightLink={{ text: "Contact" }}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #000000;
-  --card: #1f1f40;
-  --foreground: #ffffff;
-  --primary-cta: #ffffff;
+  --background: #ffffff;
+  --card: #f9f9f9;
+  --foreground: #1a1a1a;
+  --primary-cta: #000000;
   --primary-cta-text: #0a051a;
-  --secondary-cta: #0d0d2b;
+  --secondary-cta: #f0f0f0;
   --secondary-cta-text: #d4d4f6;
-  --accent: #3d2880;
-  --background-accent: #663cff;
+  --accent: #e5e5e5;
+  --background-accent: #f5f5f5;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);