Update src/app/page.tsx

Merge version_18 into main

src/app/layout.tsx

@@ -20,6 +20,8 @@ export const metadata: Metadata = {
 };
 
 
+
+
 const montserrat = Montserrat({
   variable: "--font-montserrat",  subsets: ["latin"],
 });

src/app/page.tsx

@@ -3,12 +3,13 @@
 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 TeamCardSix from '@/components/sections/team/TeamCardSix';
+import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
+import { Recycle } from 'lucide-react';
 
 export default function LandingPage() {
   return (
@@ -19,9 +20,9 @@ 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>
@@ -57,37 +58,32 @@ export default function LandingPage() {
     />
   </div>
 
-  <div id="about" data-section="about">
-      <TeamCardSix
+  <div id="about-1" data-section="about-1">
+      <TestimonialAboutCard
+        tag="Our Mission"
         title="About Debris Free Oceans"
-        description="Dedicated to keeping our oceans clean through a 5Rs mission. Our core strategy revolves around rethinking daily habits, reducing waste, and reimagining our relationship with the sea."
-        animationType="depth-3d"
-        gridVariant="three-columns-all-equal-width"
-        textboxLayout="split"
+        description='We are a Miami-based organization dedicated to "turning off the waste tap." Our mission is to lead the transition toward a zero-waste economy by addressing both the infrastructure and the culture of disposable living.'
+        subdescription=""
+        icon={Recycle}
+        videoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BtwXXwXAFgkLcj8UK8yqk5jXxb/vibrant-coral-reef-in-midwater-soft-ligh-1775511262201-ae7e40af.mp4?_wi=1"
+        mediaAnimation="blur-reveal"
+        className="py-24 bg-background-accent"
         useInvertedBackground={false}
-        members={[
-          { id: "1", name: "Our Mission", role: "Debris Free Oceans is a grassroots organization dedicated to keeping our oceans clean. We partner with local communities and schools to raise awareness." },
-          { id: "2", name: "The 5Rs", role: "Rethink & Reduce, Reuse, Recycle, Recapture & Redesign are our blueprint for sustainable daily living and corporate change." },
-          { id: "3", name: "What We Do", role: "Education, Community Cleanups, Sustainability Consulting, Advocacy to protect our blue planet." },
-          { id: "4", name: "Our Goal", role: "A healthy, self-sustaining blue planet, completely free from the harmful impact of modern plastic waste." }
-        ]}
-        className="bg-gradient-to-br from-[#E0F7FA] to-[#001f3f]"
       />
   </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="Our Core Strategy: The 5Rs"
+      description='We move beyond just "cleaning up" by integrating a circular approach to waste'
       features={[
-        { title: "Refuse & Reduce", description: "Say no to single-use plastics and minimize waste at the source.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BtwXXwXAFgkLcj8UK8yqk5jXxb/vibrant-coral-reef-in-midwater-soft-ligh-1775511262201-ae7e40af.png" },
-        { title: "Reuse & Repurpose", description: "Extend the life of materials through creative reuse and repurposing.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BtwXXwXAFgkLcj8UK8yqk5jXxb/school-of-fish-swimming-through-midwater-1775511261257-73e530b0.png" },
-        { title: "Final Goal", description: "A clean, thriving ocean ecosystem free from plastic debris.", 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: "Reduce", title: "", items: ["Inspiring a shift away from single-use consumption to stop waste before it starts.", ""] },
+        { id: "2", label: "Reuse ", title: "", items: ["Extending the life of products through innovative, cost-saving approaches.", "", ""] },
+        { id: "3", label: "Recycle", title: "", items: ["", "Supporting responsible processing of materials when reuse is no longer an option.", ""] },
       ]}
-      title="Our Core Strategy"
-      description="Guided by the 5Rs, we empower communities to take actionable steps toward a sustainable future."
+      useInvertedBackground={false}
     />
   </div>