Merge version_2 into main

Merge version_2 into main

src/app/page.tsx

@@ -2,14 +2,15 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCenter from '@/components/sections/contact/ContactCenter';
+import ContactText from '@/components/sections/contact/ContactText';
 import FaqDouble from '@/components/sections/faq/FaqDouble';
 import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
-import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
-import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
+import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
 import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
+import CardStack from '@/components/cardStack/CardStack';
 
 export default function LandingPage() {
   return (
@@ -30,6 +31,7 @@ export default function LandingPage() {
       <NavbarStyleApple
       navItems={[
         { name: "Services", id: "features" },
+        { name: "Showcase", id: "showcase" },
         { name: "Results", id: "metrics" },
         { name: "Testimonials", id: "testimonials" },
         { name: "FAQ", id: "faq" }
@@ -39,19 +41,11 @@ export default function LandingPage() {
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroBillboardRotatedCarousel
+      <HeroBillboardScroll
-      background={{
+      background={{ variant: "rotated-rays-animated" }}
-        variant: "rotated-rays-animated"}}
       title="Engineered for Growth"
       description="We build high-performance digital platforms that drive results. From server architecture to digital marketing, we deliver excellence."
-      carouselItems={[
+      imageSrc="http://img.b2bpic.net/free-photo/technology-network-background-connection-cyber-space-ai-generative_123827-24187.jpg"
-        { id: "1", imageSrc: "http://img.b2bpic.net/free-photo/high-blurred-spots-black-screen_23-2148241362.jpg", imageAlt: "Abstract tech visualization" },
-        { id: "2", imageSrc: "http://img.b2bpic.net/free-photo/technology-network-background-connection-cyber-space-ai-generative_123827-24187.jpg", imageAlt: "Digital network nodes" },
-        { id: "3", imageSrc: "http://img.b2bpic.net/free-photo/person-home-office-desk-using-green-screen-mockup-laptop_482257-121723.jpg", imageAlt: "Creative agency workspace" },
-        { id: "4", imageSrc: "http://img.b2bpic.net/free-photo/business-leader-professional-office-strategizing-development-success_482257-124038.jpg", imageAlt: "Fluid digital shapes" },
-        { id: "5", imageSrc: "http://img.b2bpic.net/free-photo/programmer-walking-data-center-coding-laptop_482257-124794.jpg", imageAlt: "Modern server architecture" },
-        { id: "6", imageSrc: "http://img.b2bpic.net/free-photo/laptop-computer-with-company-profit-progress-screen_482257-77678.jpg", imageAlt: "Analytics dashboard" }
-      ]}
     />
   </div>
 
@@ -61,39 +55,40 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={true}
       features={[
-        {
+        { id: "f1", title: "Web Development", author: "Custom Code", description: "High-performance web applications using modern frameworks.", tags: ["React", "Next.js"], imageSrc: "http://img.b2bpic.net/free-photo/caucasian-software-developer-signaling-screen-data-breach-deactivated-security-system-tech-engineer-observing-multiple-system-security-breaches-caused-by-overloaded-storage-servers_482257-40529.jpg" },
-          id: "f1",          title: "Web Development",          author: "Custom Code",          description: "High-performance web applications using modern frameworks.",          tags: ["React", "Next.js"],
+        { id: "f2", title: "SEO Optimization", author: "Search Strategy", description: "Data-driven SEO techniques that dominate search results.", tags: ["SEO", "Analytics"], imageSrc: "http://img.b2bpic.net/free-photo/close-up-office-supplies_1098-3510.jpg" },
-          imageSrc: "http://img.b2bpic.net/free-photo/caucasian-software-developer-signaling-screen-data-breach-deactivated-security-system-tech-engineer-observing-multiple-system-security-breaches-caused-by-overloaded-storage-servers_482257-40529.jpg"
+        { id: "f3", title: "Server Building", author: "Infrastructure", description: "Reliable, secure, and scalable server architecture.", tags: ["Cloud", "DevOps"], imageSrc: "http://img.b2bpic.net/free-photo/man-coding-data-center-testing-failover-scenarios-using-notebook_482257-119863.jpg" }
-        },
-        {
-          id: "f2",          title: "SEO Optimization",          author: "Search Strategy",          description: "Data-driven SEO techniques that dominate search results.",          tags: ["SEO", "Analytics"],
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-office-supplies_1098-3510.jpg"
-        },
-        {
-          id: "f3",          title: "Server Building",          author: "Infrastructure",          description: "Reliable, secure, and scalable server architecture.",          tags: ["Cloud", "DevOps"],
-          imageSrc: "http://img.b2bpic.net/free-photo/man-coding-data-center-testing-failover-scenarios-using-notebook_482257-119863.jpg"
-        }
       ]}
       title="Comprehensive Digital Solutions"
       description="We specialize in end-to-end digital services tailored to scale your business."
     />
   </div>
 
+  <div id="showcase" data-section="showcase">
+    <CardStack
+      title="Case Studies Showcase"
+      description="Explore our premium portfolio of cinematic digital experiences and successful project transformations."
+      textboxLayout="split-description"
+      animationType="depth-3d"
+      mode="buttons"
+      gridVariant="asymmetric-60-wide-40-narrow"
+    >
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 p-6">
+        <div className="h-64 bg-slate-100 rounded-lg">Example Project 1</div>
+        <div className="h-64 bg-slate-100 rounded-lg">Example Project 2</div>
+      </div>
+    </CardStack>
+  </div>
+
   <div id="metrics" data-section="metrics">
       <MetricCardSeven
       textboxLayout="split"
       useInvertedBackground={false}
       animationType="slide-up"
       metrics={[
-        {
+        { id: "m1", value: "150+", title: "Projects Completed", items: ["Scalable apps", "Custom platforms", "Infrastructure builds"] },
-          id: "m1",          value: "150+",          title: "Projects Completed",          items: ["Scalable apps", "Custom platforms", "Infrastructure builds"]
+        { id: "m2", value: "99.9%", title: "Uptime Guaranteed", items: ["Reliable servers", "24/7 Monitoring", "Secure setup"] },
-        },
+        { id: "m3", value: "200%", title: "Traffic Growth", items: ["SEO campaigns", "Strategic marketing", "Brand visibility"] }
-        {
-          id: "m2",          value: "99.9%",          title: "Uptime Guaranteed",          items: ["Reliable servers", "24/7 Monitoring", "Secure setup"]
-        },
-        {
-          id: "m3",          value: "200%",          title: "Traffic Growth",          items: ["SEO campaigns", "Strategic marketing", "Brand visibility"]
-        }
       ]}
       title="Proven Performance"
       description="Numbers that define our impact and success in the digital space."
@@ -106,9 +101,7 @@ export default function LandingPage() {
       testimonials={[
         { id: "t1", name: "Sarah J.", imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-serious-plump-male-eyeglasses-grey-background_613910-13831.jpg" },
         { id: "t2", name: "Mark D.", imageSrc: "http://img.b2bpic.net/free-photo/stylish-handsome-caucasian-man-posing-looking-camera-isolated-dark-background_613910-15062.jpg" },
-        { id: "t3", name: "Elena R.", imageSrc: "http://img.b2bpic.net/free-photo/happy-young-professional-posing-office_1262-21170.jpg" },
+        { id: "t3", name: "Elena R.", imageSrc: "http://img.b2bpic.net/free-photo/happy-young-professional-posing-office_1262-21170.jpg" }
-        { id: "t4", name: "Kevin L.", imageSrc: "http://img.b2bpic.net/free-photo/solar-panels-industry-technician-high-tech-factory-inspection-quality-control-production_482257-132256.jpg" },
-        { id: "t5", name: "Julia M.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-young-man-with-arms-crossed-holding-white-headphone-around-his-neck_23-2148096439.jpg" }
       ]}
       cardTitle="What Clients Say"
       cardTag="Testimonials"
@@ -122,8 +115,7 @@ export default function LandingPage() {
       useInvertedBackground={false}
       faqs={[
         { id: "q1", title: "What is your development timeline?", content: "Timelines vary by scope, but we typically aim for a 6-10 week delivery cycle." },
-        { id: "q2", title: "Do you handle server maintenance?", content: "Yes, we provide managed server setups and ongoing maintenance to ensure optimal performance." },
+        { id: "q2", title: "Do you handle server maintenance?", content: "Yes, we provide managed server setups and ongoing maintenance to ensure optimal performance." }
-        { id: "q3", title: "Can you improve existing SEO?", content: "Absolutely, our SEO audits are the first step to reclaiming your search engine rankings." }
       ]}
       title="Common Questions"
       description="Quick answers to help you understand our process."
@@ -132,34 +124,22 @@ export default function LandingPage() {
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactCenter
+      <ContactText
+      text="Ready to build something extraordinary together? Let's start the conversation and redefine your digital boundaries."
+      background={{ variant: "sparkles-gradient" }}
       useInvertedBackground={true}
-      background={{
+      buttons={[{ text: "Start Project" }]}
-        variant: "sparkles-gradient"}}
-      tag="Get Started"
-      title="Ready to Scale Your Digital Presence?"
-      description="Let's build something extraordinary together. Contact us today for a consultation."
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterBaseReveal
+      <FooterSimple
-      logoText="NexusAgency"
       columns={[
-        {
+        { title: "Solutions", items: [{ label: "Dev", href: "#" }, { label: "SEO", href: "#" }] },
-          title: "Services",          items: [
+        { title: "Agency", items: [{ label: "About", href: "#" }, { label: "Careers", href: "#" }] }
-            { label: "Development", href: "#" },
-            { label: "SEO", href: "#" },
-            { label: "Server Setup", href: "#" }
-          ]
-        },
-        {
-          title: "Company",          items: [
-            { label: "About Us", href: "#" },
-            { label: "Careers", href: "#" }
-          ]
-        }
       ]}
+      bottomLeftText="© 2024 NexusAgency"
+      bottomRightText="All rights reserved."
     />
   </div>
       </ReactLenis>

src/app/styles/base.css

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

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0a0a0a;
+  --background: #000000;
-  --card: #1a1a1a;
+  --card: #0c0c0c;
-  --foreground: #f8f5ffe6;
+  --foreground: #ffffff;
-  --primary-cta: #c89bff;
+  --primary-cta: #106EFB;
   --primary-cta-text: #0a0a0a;
-  --secondary-cta: #1a1a1a;
+  --secondary-cta: #000000;
   --secondary-cta-text: #f8f5ffe6;
-  --accent: #737373;
+  --accent: #535353;
-  --background-accent: #737373;
+  --background-accent: #106EFB;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);