2026-04-05 16:51:08 +00:00
3 changed files with 48 additions and 71 deletions
--- a/src/app/page.tsx
+++ b/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 HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+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
-      background={{
-        variant: "rotated-rays-animated"}}
+      <HeroBillboardScroll
+      background={{ 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={[
-        { 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" }
-      ]}
+      imageSrc="http://img.b2bpic.net/free-photo/technology-network-background-connection-cyber-space-ai-generative_123827-24187.jpg"
    />
  </div>

@@ -61,39 +55,37 @@ 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: "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"
-        }
+        { 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: "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"
+    >
+      {/* Placeholder content representing showcase items */}
+    </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: "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: "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"] }
      ]}
      title="Proven Performance"
      description="Numbers that define our impact and success in the digital space."
@@ -106,9 +98,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: "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" }
+        { id: "t3", name: "Elena R.", imageSrc: "http://img.b2bpic.net/free-photo/happy-young-professional-posing-office_1262-21170.jpg" }
      ]}
      cardTitle="What Clients Say"
      cardTag="Testimonials"
@@ -122,8 +112,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: "q3", title: "Can you improve existing SEO?", content: "Absolutely, our SEO audits are the first step to reclaiming your search engine rankings." }
+        { id: "q2", title: "Do you handle server maintenance?", content: "Yes, we provide managed server setups and ongoing maintenance to ensure optimal performance." }
      ]}
      title="Common Questions"
      description="Quick answers to help you understand our process."
@@ -132,37 +121,25 @@ 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={{
-        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."
+      buttons={[{ text: "Start Project" }]}
    />
  </div>

  <div id="footer" data-section="footer">
-      <FooterBaseReveal
-      logoText="NexusAgency"
+      <FooterSimple
      columns={[
-        {
-          title: "Services",          items: [
-            { label: "Development", href: "#" },
-            { label: "SEO", href: "#" },
-            { label: "Server Setup", href: "#" }
-          ]
-        },
-        {
-          title: "Company",          items: [
-            { label: "About Us", href: "#" },
-            { label: "Careers", href: "#" }
-          ]
-        }
+        { title: "Solutions", items: [{ label: "Dev", href: "#" }, { label: "SEO", href: "#" }] },
+        { title: "Agency", items: [{ label: "About", href: "#" }, { label: "Careers", href: "#" }] }
      ]}
+      bottomLeftText="© 2024 NexusAgency"
+      bottomRightText="All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
-}
+}
--- a/src/app/styles/base.css
+++ b/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;
 }
--- a/src/app/styles/variables.css
+++ b/src/app/styles/variables.css
@@ -10,15 +10,15 @@
  --accent: #ffffff;
  --background-accent: #ffffff; */

-  --background: #0a0a0a;
-  --card: #1a1a1a;
-  --foreground: #f8f5ffe6;
-  --primary-cta: #c89bff;
+  --background: #000000;
+  --card: #0c0c0c;
+  --foreground: #ffffff;
+  --primary-cta: #106EFB;
  --primary-cta-text: #0a0a0a;
-  --secondary-cta: #1a1a1a;
+  --secondary-cta: #000000;
  --secondary-cta-text: #f8f5ffe6;
-  --accent: #737373;
-  --background-accent: #737373;
+  --accent: #535353;
+  --background-accent: #106EFB;

  /* text sizing - set by ThemeProvider */
  /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);