Update src/app/page.tsx

Merge version_13 into main

src/app/layout.tsx

@@ -19,9 +19,10 @@ export const metadata: Metadata = {
   },
 };
 
+
+
 const montserrat = Montserrat({
-  variable: "--font-montserrat",
-  subsets: ["latin"],
+  variable: "--font-montserrat",  subsets: ["latin"],
 });
 
 export default function RootLayout({

src/app/page.tsx

@@ -3,12 +3,12 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactCenter from '@/components/sections/contact/ContactCenter';
-import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
+import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
 import FooterCard from '@/components/sections/footer/FooterCard';
 import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
 import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
+import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
 
 export default function LandingPage() {
   return (
@@ -19,109 +19,70 @@ export default function LandingPage() {
         contentWidth="mediumLarge"
         sizing="mediumLargeSizeLargeTitles"
         background="grid"
-        cardStyle="gradient-radial"
+        cardStyle="glass-elevated"
         primaryButtonStyle="diagonal-gradient"
-        secondaryButtonStyle="solid"
+        secondaryButtonStyle="glass"
         headingFontWeight="extrabold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
       <NavbarStyleApple
       navItems={[
-        {
-          name: "Surface",
-          id: "hero",
-        },
-        {
-          name: "Midwater",
-          id: "features",
-        },
-        {
-          name: "Abyss",
-          id: "metrics",
-        },
-        {
-          name: "Connect",
-          id: "contact",
-        },
+        { name: "Surface", id: "hero" },
+        { name: "The Strategy", id: "about" },
+        { name: "Midwater", id: "features" },
+        { name: "Abyss", id: "metrics" },
+        { name: "Connect", id: "contact" },
       ]}
-      brandName="Oceanic"
+      brandName="DEBRIS FREE OCEANS"
     />
   </div>
 
   <div id="hero" data-section="hero">
       <HeroBillboardRotatedCarousel
-      background={{
-        variant: "rotated-rays-animated",
-      }}
-      title="Descend into the Abyss"
-      description="Experience the mesmerizing transition from the sunlit surface to the mysterious ocean deep. A calm, futuristic exploration awaits."
+      background={{ variant: "rotated-rays-animated" }}
+      title="DEBRIS FREE OCEANS"
+      description="Turning off the waste tap to protect our blue planet."
       buttons={[
-        {
-          text: "Begin Descent",
-          href: "#features",
-        },
+        { text: "Dive in", href: "#about" },
       ]}
       carouselItems={[
-        {
-          id: "1",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BtwXXwXAFgkLcj8UK8yqk5jXxb/sunlight-rays-piercing-through-clear-tur-1775511259373-29d7a359.png",
-          imageAlt: "Surface sunlight",
-        },
-        {
-          id: "2",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BtwXXwXAFgkLcj8UK8yqk5jXxb/gentle-waves-on-the-surface-sun-rays-ref-1775511260087-d14b8e7f.png",
-          imageAlt: "Sun rays refraction",
-        },
-        {
-          id: "3",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BtwXXwXAFgkLcj8UK8yqk5jXxb/bubbles-ascending-slowly-through-ocean-s-1775511261316-98e8ea56.png",
-          imageAlt: "Ascending bubbles",
-        },
-        {
-          id: "4",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BtwXXwXAFgkLcj8UK8yqk5jXxb/ethereal-sunlight-beams-piercing-into-tu-1775511261139-159d49eb.png",
-          imageAlt: "Turquoise beams",
-        },
-        {
-          id: "5",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BtwXXwXAFgkLcj8UK8yqk5jXxb/bioluminescent-particles-drifting-in-lig-1775511261074-c3518511.png",
-          imageAlt: "Bioluminescent drift",
-        },
-        {
-          id: "6",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BtwXXwXAFgkLcj8UK8yqk5jXxb/panoramic-ocean-surface-with-sun-glisten-1775511261059-f4eb7d73.png",
-          imageAlt: "Expansive sea",
-        },
+        { id: "1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BtwXXwXAFgkLcj8UK8yqk5jXxb/sunlight-rays-piercing-through-clear-tur-1775511259373-29d7a359.png", imageAlt: "Surface sunlight" },
+        { id: "2", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BtwXXwXAFgkLcj8UK8yqk5jXxb/gentle-waves-on-the-surface-sun-rays-ref-1775511260087-d14b8e7f.png", imageAlt: "Sun rays refraction" },
+        { id: "3", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BtwXXwXAFgkLcj8UK8yqk5jXxb/bubbles-ascending-slowly-through-ocean-s-1775511261316-98e8ea56.png", imageAlt: "Ascending bubbles" },
+        { id: "4", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BtwXXwXAFgkLcj8UK8yqk5jXxb/ethereal-sunlight-beams-piercing-into-tu-1775511261139-159d49eb.png", imageAlt: "Turquoise beams" },
+        { id: "5", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BtwXXwXAFgkLcj8UK8yqk5jXxb/bioluminescent-particles-drifting-in-lig-1775511261074-c3518511.png", imageAlt: "Bioluminescent drift" },
+        { id: "6", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BtwXXwXAFgkLcj8UK8yqk5jXxb/panoramic-ocean-surface-with-sun-glisten-1775511261059-f4eb7d73.png", imageAlt: "Expansive sea" },
       ]}
     />
   </div>
 
+  <div id="about" data-section="about">
+      <MetricSplitMediaAbout
+        title="Our Mission & The 5Rs Strategy"
+        description="We are dedicated to safeguarding our oceans by implementing a proactive, layered approach to waste management and community engagement."
+        metrics={[
+          { value: "5", title: "Core Pillars (5Rs)" },
+          { value: "100%", title: "Ecological Commitment" }
+        ]}
+        imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BtwXXwXAFgkLcj8UK8yqk5jXxb/vibrant-coral-reef-in-midwater-soft-ligh-1775511262201-ae7e40af.png"
+        className="bg-background-accent text-foreground py-20"
+        useInvertedBackground={false}
+      />
+  </div>
+
   <div id="features" data-section="features">
-      <FeatureCardThree
-      animationType="slide-up"
+      <FeatureCardTwelve
+      animationType="blur-reveal"
       textboxLayout="split"
-      gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={false}
+      title="What We Do"
+      description="Our strategy focuses on systematic change and actionable community restoration initiatives."
       features={[
-        {
-          title: "Bioluminescent Wonders",
-          description: "Glimmering organisms that light up the darkness.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BtwXXwXAFgkLcj8UK8yqk5jXxb/vibrant-coral-reef-in-midwater-soft-ligh-1775511262201-ae7e40af.png",
-        },
-        {
-          title: "Fluid Dynamics",
-          description: "Experience currents that shape the ocean floor.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BtwXXwXAFgkLcj8UK8yqk5jXxb/school-of-fish-swimming-through-midwater-1775511261257-73e530b0.png",
-        },
-        {
-          title: "Atmospheric Pressure",
-          description: "Feel the intensity of depth in every interaction.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BtwXXwXAFgkLcj8UK8yqk5jXxb/bubbles-drifting-past-futuristic-ocean-u-1775511260463-ae02a6e5.png",
-        },
+        { id: "1", label: "Refuse & Reduce", title: "Prevention", items: ["Single-use ban", "Packaging audits"] },
+        { id: "2", label: "Reuse & Repurpose", title: "Circularity", items: ["Material upcycling", "Community workshops"] },
+        { id: "3", label: "The Goal", title: "Restoration", items: ["Ecosystem cleaning", "Policy advocacy"] },
       ]}
-      title="The Midwater Journey"
-      description="As you descend, witness the change in light, pressure, and the diverse marine life thriving in these deep, cool waters."
+      useInvertedBackground={false}
     />
   </div>
 
@@ -131,88 +92,22 @@ export default function LandingPage() {
       title="Oceanic Depths"
       tag="In-Depth Exploration"
       metrics={[
-        {
-          id: "depth",
-          value: "11,000m",
-          description: "Maximum Mariana Depth",
-        },
-        {
-          id: "temp",
-          value: "2°C",
-          description: "Abyssal Zone Temperature",
-        },
-        {
-          id: "press",
-          value: "1,000atm",
-          description: "Intense Pressure Level",
-        },
+        { id: "depth", value: "11,000m", description: "Maximum Mariana Depth" },
+        { id: "temp", value: "2°C", description: "Abyssal Zone Temperature" },
+        { id: "press", value: "1,000atm", description: "Intense Pressure Level" },
       ]}
       metricsAnimation="blur-reveal"
     />
   </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardThirteen
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "1",
-          name: "Elena V.",
-          handle: "@elena_ocean",
-          testimonial: "The transition to the deep ocean felt so incredibly real.",
-          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BtwXXwXAFgkLcj8UK8yqk5jXxb/portrait-of-a-relaxed-explorer-serene-ex-1775511262040-8caf5138.png",
-        },
-        {
-          id: "2",
-          name: "Marcus R.",
-          handle: "@marcus_deep",
-          testimonial: "The lighting effects are absolutely stunning. Truly immersive.",
-          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BtwXXwXAFgkLcj8UK8yqk5jXxb/professional-marine-biologist-friendly-b-1775511261293-2e849f2a.png",
-        },
-        {
-          id: "3",
-          name: "Sarah K.",
-          handle: "@sarah_waves",
-          testimonial: "A calming and futuristic experience unlike any other I've seen.",
-          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BtwXXwXAFgkLcj8UK8yqk5jXxb/young-person-looking-out-at-the-ocean-co-1775511262172-d1f216d2.png",
-        },
-        {
-          id: "4",
-          name: "David W.",
-          handle: "@david_explore",
-          testimonial: "Loved the subtle animations as you scroll down the page.",
-          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BtwXXwXAFgkLcj8UK8yqk5jXxb/cheerful-diver-clear-blue-water-backgrou-1775511262101-6e35abd6.png",
-        },
-        {
-          id: "5",
-          name: "Chloe L.",
-          handle: "@chloe_blue",
-          testimonial: "The perfect balance of minimalist UI and deep ocean atmosphere.",
-          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BtwXXwXAFgkLcj8UK8yqk5jXxb/expert-ocean-researcher-smiling-bright-o-1775511260155-c010719a.png",
-        },
-      ]}
-      showRating={true}
-      title="Explorers' Impressions"
-      description="Discover what fellow travelers experienced during their descent."
-    />
-  </div>
-
   <div id="contact" data-section="contact">
       <ContactCenter
       useInvertedBackground={false}
-      background={{
-        variant: "sparkles-gradient",
-      }}
+      background={{ variant: "sparkles-gradient" }}
       tag="Stay Updated"
       title="Join the Descent"
       description="Sign up for updates about new zones to explore as we continue to unlock the mysteries of the deep."
+      buttonText="Join The Mission"
     />
   </div>
 
@@ -225,4 +120,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,14 +10,14 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f0f9ff;
-  --card: #e0f2fe;
-  --foreground: #082f49;
+  --background: #000612;
+  --card: #0a1f33;
+  --foreground: #e0f2fe;
   --primary-cta: #0284c7;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #f0f9ff;
+  --secondary-cta: #082f49;
   --secondary-cta-text: #082f49;
-  --accent: #bae6fd;
+  --accent: #38bdf8;
   --background-accent: #0369a1;
 
   /* text sizing - set by ThemeProvider */