From c99838efb07e17cda928812e26f3a17764b0ddbd Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 6 May 2026 18:25:21 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 294 ++++++++++-------------------------------------
 1 file changed, 61 insertions(+), 233 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 3b039e1..1fc7c26 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,16 +2,16 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCTA from '@/components/sections/contact/ContactCTA';
-import FaqDouble from '@/components/sections/faq/FaqDouble';
-import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import HeroCentered from '@/components/sections/hero/HeroCentered';
-import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FaqSplitText from '@/components/sections/faq/FaqSplitText';
+import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
+import HeroBillboard from '@/components/sections/hero/HeroBillboard';
+import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
-import TextAbout from '@/components/sections/about/TextAbout';
-import { BookOpen, ShieldCheck, Users } from "lucide-react";
+import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
+import SplitAbout from '@/components/sections/about/SplitAbout';
+import { ShieldCheck, Users, BookOpen } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -31,284 +31,112 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        {
-          name: "About",
-          id: "#about",
-        },
-        {
-          name: "Services",
-          id: "#services",
-        },
-        {
-          name: "Impact",
-          id: "#impact",
-        },
-        {
-          name: "Contact",
-          id: "#contact",
-        },
+        { name: "About", id: "#about" },
+        { name: "Services", id: "#services" },
+        { name: "Impact", id: "#impact" },
+        { name: "Contact", id: "#contact" },
       ]}
       brandName="S.I.A.N.D."
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroCentered
-      background={{
-        variant: "sparkles-gradient",
-      }}
+      <HeroBillboard
+      background={{ variant: "sparkles-gradient" }}
       title="Standing Together Against Negative Discrimination"
       description="S.I.A.N.D. provides assistance, recovery, and advocacy for those experiencing racism. We are here to help you heal and fight for justice."
-      avatars={[
-        {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DMUWeAIrCNtLMaJtql1gdi2e5u/uploaded-1778091721971-mw4bj17u.png",
-          alt: "S.I.A.N.D. Logo",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/image-young-confident-woman-casual-outfit-looking-happy-standing-against-white-background_1258-203217.jpg",
-          alt: "diverse portrait 1",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/image-happy-goodlooking-young-man-cross-arms-chest-smiling-pleased-camera-standing-whi_1258-107636.jpg",
-          alt: "diverse portrait 2",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/young-adult-casual-wear-standing-with-his-arms-crossed-camera_482257-123008.jpg",
-          alt: "diverse portrait 3",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-mask-free_23-2149440014.jpg",
-          alt: "diverse portrait 4",
-        },
-      ]}
-      buttons={[
-        {
-          text: "Get Support",
-          href: "#contact",
-        },
-        {
-          text: "Donate Now",
-          href: "#",
-        },
-      ]}
-      buttonAnimation="slide-up"
-      marqueeItems={[
-        {
-          type: "text",
-          text: "Equality",
-        },
-        {
-          type: "text",
-          text: "Support",
-        },
-        {
-          type: "text",
-          text: "Justice",
-        },
-        {
-          type: "text",
-          text: "Empowerment",
-        },
-        {
-          type: "text",
-          text: "Unity",
-        },
-      ]}
+      buttons={[{ text: "Get Support", href: "#contact" }, { text: "Donate Now", href: "#" }]}
+      mediaAnimation="slide-up"
     />
   </div>
 
   <div id="about" data-section="about">
-      <TextAbout
+      <SplitAbout
       useInvertedBackground={true}
       tag="Our Mission"
       title="Stop racism from spreading and provide services for people experiencing racism."
-      buttons={[
-        {
-          text: "Learn More",
-          href: "#services",
-        },
-      ]}
+      description="We offer concrete assistance to track harm and support healing."
+      buttons={[{ text: "Learn More", href: "#services" }]}
+      textboxLayout="split"
     />
   </div>
 
   <div id="services" data-section="services">
-      <FeatureCardTwentyThree
-      animationType="slide-up"
-      textboxLayout="split-description"
+      <FeatureCardTwentySix
       useInvertedBackground={false}
-      features={[
-        {
-          id: "s1",
-          title: "Racism Report Tracking",
-          tags: [
-            "Support",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/two-espionage-agents-reviewing-confidential-documents-vintage-library_482257-113968.jpg",
-        },
-        {
-          id: "s2",
-          title: "Mental Health Recovery",
-          tags: [
-            "Healing",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/female-doctor-listening-rehab-patients-problems_23-2148398364.jpg",
-        },
-        {
-          id: "s3",
-          title: "Community Advocacy",
-          tags: [
-            "Education",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/man-woman-standing-wooden-blocks-copy-space_23-2148419684.jpg",
-        },
-      ]}
       title="Programs & Services"
       description="We offer concrete assistance to track harm and support healing."
+      textboxLayout="default"
+      features={[
+        { title: "Racism Report Tracking", description: "Track harm and report incidents.", buttonIcon: ShieldCheck },
+        { title: "Mental Health Recovery", description: "Counseling and mental health support.", buttonIcon: Users },
+        { title: "Community Advocacy", description: "Educating and supporting community growth.", buttonIcon: BookOpen },
+        { title: "Education Workshops", description: "Knowledge building for equity.", buttonIcon: BookOpen }
+      ]}
     />
   </div>
 
   <div id="impact" data-section="impact">
-      <MetricCardThree
-      animationType="scale-rotate"
-      textboxLayout="split"
+      <MetricCardTwo
       useInvertedBackground={true}
-      metrics={[
-        {
-          id: "m1",
-          title: "Individuals Supported",
-          value: "500+",
-          icon: Users,
-        },
-        {
-          id: "m2",
-          title: "Cases Tracked",
-          value: "120",
-          icon: ShieldCheck,
-        },
-        {
-          id: "m3",
-          title: "Workshops Held",
-          value: "45",
-          icon: BookOpen,
-        },
-      ]}
       title="Our Impact"
       description="Tangible progress for our community."
+      textboxLayout="split"
+      animationType="scale-rotate"
+      gridVariant="bento-grid"
+      metrics={[
+        { id: "m1", value: "500+", description: "Individuals Supported" },
+        { id: "m2", value: "120", description: "Cases Tracked" },
+        { id: "m3", value: "45", description: "Workshops Held" }
+      ]}
     />
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTwelve
+      <TestimonialCardThirteen
       useInvertedBackground={false}
+      title="Voices of Recovery"
+      description="Stories from our community members."
+      textboxLayout="default"
+      animationType="blur-reveal"
+      showRating={true}
       testimonials={[
-        {
-          id: "t1",
-          name: "Sarah J.",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-hispanic-man-standing-isolated-background-skeptic-nervous-disapproving-expression-face-with-crossed-arms-negative-person_839833-34739.jpg",
-        },
-        {
-          id: "t2",
-          name: "David M.",
-          imageSrc: "http://img.b2bpic.net/free-photo/transgender-wearing-cool-jacket-medium-shot_23-2149105398.jpg",
-        },
-        {
-          id: "t3",
-          name: "Emily R.",
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-posing-indoors_23-2149745617.jpg",
-        },
-        {
-          id: "t4",
-          name: "Marcus L.",
-          imageSrc: "http://img.b2bpic.net/free-photo/american-football-supporters-watching-their-team-lose-game_53876-132081.jpg",
-        },
-        {
-          id: "t5",
-          name: "Priya K.",
-          imageSrc: "http://img.b2bpic.net/free-photo/volunteer-pointing-his-t-shirt_23-2148687271.jpg",
-        },
+        { id: "t1", name: "Sarah J.", handle: "@sarahj", testimonial: "Incredible support through my hardest times.", rating: 5 },
+        { id: "t2", name: "David M.", handle: "@davidm", testimonial: "They truly care about healing and equity.", rating: 5 },
+        { id: "t3", name: "Emily R.", handle: "@emilyr", testimonial: "Strong advocacy work.", rating: 5 }
       ]}
-      cardTitle="Voices of Recovery"
-      cardTag="Community Stories"
-      cardAnimation="blur-reveal"
     />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqDouble
-      textboxLayout="split"
-      useInvertedBackground={true}
-      faqs={[
-        {
-          id: "q1",
-          title: "Is reporting confidential?",
-          content: "Yes, we prioritize safety and privacy in all reporting matters.",
-        },
-        {
-          id: "q2",
-          title: "How are donations used?",
-          content: "Donations directly fund counseling programs and community advertisement posters.",
-        },
-        {
-          id: "q3",
-          title: "How can I volunteer?",
-          content: "Reach out to us via the contact form to join our board or support advocacy.",
-        },
-      ]}
-      title="Frequently Asked Questions"
-      description="Have questions about our organization?"
+      <FaqSplitText
+      sideTitle="Frequently Asked Questions"
+      sideDescription="Have questions about our organization?"
       faqsAnimation="slide-up"
+      faqs={[
+        { id: "q1", title: "Is reporting confidential?", content: "Yes, we prioritize safety and privacy in all reporting matters." },
+        { id: "q2", title: "How are donations used?", content: "Donations directly fund counseling programs and community advertisement posters." },
+        { id: "q3", title: "How can I volunteer?", content: "Reach out to us via the contact form to join our board or support advocacy." },
+      ]}
+      useInvertedBackground={true}
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactCTA
-      useInvertedBackground={false}
-      background={{
-        variant: "sparkles-gradient",
-      }}
+      <ContactCenter
       tag="Get Involved"
       title="Need assistance? Reach out."
       description="Whether you need to report an incident or donate to the cause, we are here."
-      buttons={[
-        {
-          text: "Contact Us",
-          href: "mailto:info@siand.org",
-        },
-      ]}
+      background={{ variant: "sparkles-gradient" }}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterBaseCard
-      logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DMUWeAIrCNtLMaJtql1gdi2e5u/uploaded-1778091721971-mw4bj17u.png"
+      <FooterMedia
       logoText="S.I.A.N.D."
       columns={[
-        {
-          title: "Resources",
-          items: [
-            {
-              label: "Report Form",
-              href: "#",
-            },
-            {
-              label: "Mental Health",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Company",
-          items: [
-            {
-              label: "About Us",
-              href: "#about",
-            },
-            {
-              label: "Donate",
-              href: "#",
-            },
-          ],
-        },
+        { title: "Resources", items: [{ label: "Report Form", href: "#" }, { label: "Mental Health", href: "#" }] },
+        { title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Donate", href: "#" }] }
       ]}
     />
   </div>
-- 
2.49.1