diff --git a/src/app/ethics/page.tsx b/src/app/ethics/page.tsx
index bb327f6..78e8e9a 100644
--- a/src/app/ethics/page.tsx
+++ b/src/app/ethics/page.tsx
@@ -2,107 +2,48 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
+import { Gavel, Scale, AlertTriangle } from "lucide-react";
 
-export default function LandingPage() {
+export default function EthicsPage() {
   return (
-    <ThemeProvider
-        defaultButtonVariant="icon-arrow"
-        defaultTextAnimation="reveal-blur"
-        borderRadius="rounded"
-        contentWidth="mediumLarge"
-        sizing="large"
-        background="none"
-        cardStyle="gradient-mesh"
-        primaryButtonStyle="shadow"
-        secondaryButtonStyle="solid"
-        headingFontWeight="light"
-    >
+    <ThemeProvider>
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleFullscreen
-      navItems={[
-        {
-          name: "Home",
-          id: "/",
-        },
-        {
-          name: "Inclusive Relationships",
-          id: "/inclusive",
-        },
-        {
-          name: "Power & Consent",
-          id: "/power",
-        },
-        {
-          name: "Ethics & Discrimination",
-          id: "/ethics",
-        },
-        {
-          name: "Protective Strategies",
-          id: "/protective",
-        },
-      ]}
-      brandName="RELATE"
-    />
-  </div>
-
-  <div id="body-ethics" data-section="body-ethics">
-      <TextSplitAbout
-      useInvertedBackground={false}
-      title="Ethics & Discrimination"
-      description={[
-        "Recognizing bias, upholding ethical standards, and navigating discrimination in social spheres.",
-      ]}
-    />
-  </div>
-
-  <div id="about" data-section="about">
-      <TextSplitAbout
-      useInvertedBackground={false}
-      title="Identifying Bias"
-      description={[
-        "A deep dive into recognizing and mitigating unconscious bias in relationships.",
-      ]}
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterBaseCard
-      logoText="RELATE"
-      columns={[
-        {
-          title: "Resources",
-          items: [
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Inclusive Relationships", id: "/inclusive" },
+            { name: "Power & Consent", id: "/power" },
+            { name: "Ethical Manner & Discrimination", id: "/ethics" },
+            { name: "Protective Strategies", id: "/protective" },
+          ]}
+          brandName="RELATE"
+        />
+        <FeatureCardTen
+          animationType="slide-up"
+          textboxLayout="split"
+          title="Ethical Manner and Addressing Discrimination"
+          description="Cultivating inclusive environments by understanding systemic bias and upholding personal dignity through ethical behavior."
+          features={[
             {
-              label: "Inclusive",
-              href: "/inclusive",
+              title: "Understanding Bias",              description: "Recognizing implicit biases that lead to unfair treatment or discrimination in social settings.",              media: { imageSrc: "http://img.b2bpic.net/free-photo/diverse-people-having-meeting_23-2148766735.jpg" },
+              items: [{ icon: Gavel, text: "Identify exclusionary practices" }, { icon: Scale, text: "Promote equitable treatment" }],
+              reverse: false
             },
             {
-              label: "Ethics",
-              href: "/ethics",
-            },
-          ],
-        },
-        {
-          title: "Legal",
-          items: [
-            {
-              label: "Terms",
-              href: "#",
-            },
-            {
-              label: "Privacy",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-    />
-  </div>
+              title: "Active Advocacy",              description: "Standing up against discriminatory behavior and creating safe spaces for everyone.",              media: { imageSrc: "http://img.b2bpic.net/free-photo/group-diverse-people-joining-hands_23-2148766723.jpg" },
+              items: [{ icon: AlertTriangle, text: "Challenge harmful stereotypes" }, { icon: Scale, text: "Support inclusivity initiatives" }],
+              reverse: true
+            }
+          ]}
+        />
+        <FooterBaseCard
+          logoText="RELATE"
+          columns={[{ title: "Resources", items: [{ label: "Home", href: "/" }, { label: "Protective Strategies", href: "/protective" }] }]}
+        />
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/inclusive/page.tsx b/src/app/inclusive/page.tsx
index cb512bc..555027e 100644
--- a/src/app/inclusive/page.tsx
+++ b/src/app/inclusive/page.tsx
@@ -2,11 +2,13 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
+import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
+import { Users } from "lucide-react";
 
-export default function LandingPage() {
+export default function InclusiveRelationshipsPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="icon-arrow"
@@ -21,88 +23,41 @@ export default function LandingPage() {
         headingFontWeight="light"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleFullscreen
-      navItems={[
-        {
-          name: "Home",
-          id: "/",
-        },
-        {
-          name: "Inclusive Relationships",
-          id: "/inclusive",
-        },
-        {
-          name: "Power & Consent",
-          id: "/power",
-        },
-        {
-          name: "Ethics & Discrimination",
-          id: "/ethics",
-        },
-        {
-          name: "Protective Strategies",
-          id: "/protective",
-        },
-      ]}
-      brandName="RELATE"
-    />
-  </div>
-
-  <div id="body-inclusive" data-section="body-inclusive">
-      <TextSplitAbout
-      useInvertedBackground={false}
-      title="Inclusive Relationships"
-      description={[
-        "Focus on diversity, intersectionality, and building inclusive interpersonal skills.",
-      ]}
-    />
-  </div>
-
-  <div id="about" data-section="about">
-      <TextSplitAbout
-      useInvertedBackground={false}
-      title="Expanding Perspectives"
-      description={[
-        "Learn to embrace diverse viewpoints for more empathetic connections.",
-      ]}
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterBaseCard
-      logoText="RELATE"
-      columns={[
-        {
-          title: "Resources",
-          items: [
-            {
-              label: "Inclusive",
-              href: "/inclusive",
-            },
-            {
-              label: "Ethics",
-              href: "/ethics",
-            },
-          ],
-        },
-        {
-          title: "Legal",
-          items: [
-            {
-              label: "Terms",
-              href: "#",
-            },
-            {
-              label: "Privacy",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-    />
-  </div>
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Inclusive Relationships", id: "/inclusive" },
+            { name: "Power & Consent", id: "/power" },
+            { name: "Ethics & Discrimination", id: "/ethics" },
+            { name: "Protective Strategies", id: "/protective" },
+          ]}
+          brandName="RELATE"
+        />
+        <HeroSplitDualMedia
+          title="Inclusive Relationships"
+          description="Fostering belonging and understanding across diverse interpersonal connections through empathy and active engagement."
+          tag="Cultivating Connection"
+          rating={5}
+          ratingText="Expert Endorsed"
+          mediaItems={[
+            { imageSrc: "http://img.b2bpic.net/free-photo/diverse-people-working-together_23-2148427081.jpg", imageAlt: "Diversity" },
+            { imageSrc: "http://img.b2bpic.net/free-photo/group-people-diverse-backgrounds_23-2148812671.jpg", imageAlt: "Inclusive group" }
+          ]}
+        />
+        <TextSplitAbout
+          title="Building Interpersonal Skills"
+          description={[
+            "Inclusive relationships begin with active listening, where we validate others' experiences without judgment.",            "Developing empathy allows us to bridge gaps between different cultural, social, and personal perspectives.",            "Effective communication strategies ensure that all parties feel valued and heard in any given interaction."
+          ]}
+        />
+        <FooterBaseCard
+          logoText="RELATE"
+          columns={[
+            { title: "Resources", items: [{ label: "Home", href: "/" }, { label: "Power & Consent", href: "/power" }] },
+            { title: "Legal", items: [{ label: "Terms", href: "#" }, { label: "Privacy", href: "#" }] },
+          ]}
+        />
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 37cff17..7324558 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -29,25 +29,15 @@ export default function LandingPage() {
       <NavbarStyleFullscreen
       navItems={[
         {
-          name: "Home",
-          id: "/",
-        },
+          name: "Home",          id: "/"},
         {
-          name: "Inclusive Relationships",
-          id: "/inclusive",
-        },
+          name: "Inclusive Relationships",          id: "/inclusive"},
         {
-          name: "Power & Consent",
-          id: "/power",
-        },
+          name: "Power & Consent",          id: "/power"},
         {
-          name: "Ethics & Discrimination",
-          id: "/ethics",
-        },
+          name: "Ethics & Discrimination",          id: "/ethics"},
         {
-          name: "Protective Strategies",
-          id: "/protective",
-        },
+          name: "Protective Strategies",          id: "/protective"},
       ]}
       brandName="RELATE"
     />
@@ -56,59 +46,28 @@ export default function LandingPage() {
   <div id="hero" data-section="hero">
       <HeroCentered
       background={{
-        variant: "plain",
-      }}
+        variant: "gradient-bars"}}
       title="Understanding Relationships"
       description="Cultivating awareness, empathy, and respect in all aspects of interpersonal connection."
       avatars={[
         {
-          src: "http://img.b2bpic.net/free-vector/youtube-channel-art-kids_23-2149536351.jpg",
-          alt: "Avatar 1",
-        },
+          src: "https://img.b2bpic.net/free-photo/diverse-group-people-working-together_23-2148766795.jpg?w=200",          alt: "Collaboration"},
         {
-          src: "http://img.b2bpic.net/free-psd/school-admission-facebook-cover-template_23-2150456028.jpg",
-          alt: "Avatar 2",
-        },
+          src: "https://img.b2bpic.net/free-photo/happy-friends-talking-park_23-2148796859.jpg?w=200",          alt: "Friendship"},
         {
-          src: "http://img.b2bpic.net/free-photo/abstract-paper-background-concept_23-2148812671.jpg",
-          alt: "Avatar 3",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/world-happy-pride-day-love-string_23-2148516303.jpg",
-          alt: "Avatar 4",
-        },
-        {
-          src: "http://img.b2bpic.net/free-vector/back-school-landing-page_23-2148215482.jpg",
-          alt: "Avatar 5",
-        },
+          src: "https://img.b2bpic.net/free-photo/two-people-talking-outdoors_23-2148530364.jpg?w=200",          alt: "Communication"},
       ]}
+      avatarText="Join our growing community of 2.4k+ learners"
       buttons={[
         {
-          text: "Get Started",
-          href: "/inclusive",
-        },
+          text: "Explore Resources",          href: "/inclusive"},
       ]}
       marqueeItems={[
-        {
-          type: "text",
-          text: "Communication",
-        },
-        {
-          type: "text",
-          text: "Consent",
-        },
-        {
-          type: "text",
-          text: "Empathy",
-        },
-        {
-          type: "text",
-          text: "Trust",
-        },
-        {
-          type: "text",
-          text: "Respect",
-        },
+        { type: "text", text: "Communication" },
+        { type: "text", text: "Consent" },
+        { type: "text", text: "Empathy" },
+        { type: "text", text: "Trust" },
+        { type: "text", text: "Respect" },
       ]}
     />
   </div>
@@ -116,10 +75,9 @@ export default function LandingPage() {
   <div id="about-1" data-section="about-1">
       <TextSplitAbout
       useInvertedBackground={false}
-      title="Definition of Relationships"
+      title="Defining Our Bonds"
       description={[
-        "A relationship is the way in which two or more concepts, objects, or people are connected, or the state of being connected.",
-        "It encompasses communication, mutual support, and shared goals between individuals.",
+        "Relationships represent the complex ways in which individuals connect, communicate, and support one another through life's journey.",        "Whether professional or personal, building healthy foundations requires deep listening, mutual respect, and a shared vision for growth."
       ]}
     />
   </div>
@@ -132,40 +90,23 @@ export default function LandingPage() {
       useInvertedBackground={true}
       features={[
         {
-          title: "Familial",
-          description: "Blood or chosen connections.",
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-satisfied-business-woman-using-tablet-outside_74855-2926.jpg",
-          titleImageSrc: "http://img.b2bpic.net/free-photo/colorful-compostion-with-watercolor-brushstrokes_23-2147923038.jpg",
-          buttonText: "Read More",
-        },
+          title: "Familial Connections",          description: "Understanding the deep-rooted bonds formed by blood or intentional community.",          imageSrc: "https://img.b2bpic.net/free-photo/happy-family-playing-park_23-2148564274.jpg?w=600",          titleImageSrc: "https://img.b2bpic.net/free-vector/hand-drawn-family-portrait_23-2148386412.jpg?w=100",          buttonText: "Read More"},
         {
-          title: "Platonic",
-          description: "Friends and companions.",
-          imageSrc: "http://img.b2bpic.net/free-photo/office-desktop-with-laptop-glasses_23-2148174129.jpg",
-          titleImageSrc: "http://img.b2bpic.net/free-photo/hand-gesture-expressing-different-feelings_23-2150061940.jpg",
-          buttonText: "Read More",
-        },
+          title: "Platonic Companions",          description: "Celebrating the vital role friends play in our emotional well-being and growth.",          imageSrc: "https://img.b2bpic.net/free-photo/friends-sitting-coffee-shop_23-2148281313.jpg?w=600",          titleImageSrc: "https://img.b2bpic.net/free-vector/hand-drawn-heart-doodle_23-2148356985.jpg?w=100",          buttonText: "Read More"},
         {
-          title: "Romantic",
-          description: "Intimate partnerships.",
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-business-people-talking_23-2148427081.jpg",
-          titleImageSrc: "http://img.b2bpic.net/free-photo/colleagues-working-together-project_23-2149286124.jpg",
-          buttonText: "Read More",
-        },
+          title: "Romantic Partnerships",          description: "Nurturing intimacy with honesty, vulnerability, and sustained commitment.",          imageSrc: "https://img.b2bpic.net/free-photo/couple-walking-beach-sunset_23-2148737380.jpg?w=600",          titleImageSrc: "https://img.b2bpic.net/free-vector/hand-drawn-love-icon_23-2148356860.jpg?w=100",          buttonText: "Read More"},
       ]}
-      title="Types of Relationships"
-      description="Diverse connections that shape our social fabric."
+      title="Relationship Architectures"
+      description="Discover the diverse ways we connect and build trust within our social landscape."
     />
   </div>
 
   <div id="about-2" data-section="about-2">
       <TextSplitAbout
       useInvertedBackground={false}
-      title="Characteristics of Healthy Relationships"
+      title="Cultivating Healthy Dynamics"
       description={[
-        "Mutual respect and equality.",
-        "Open, honest communication.",
-        "Individual autonomy and support.",
+        "Healthy relationships are defined by balance, where each individual feels seen, heard, and valued for their unique perspective.",        "By fostering equality and autonomy, we build environments where everyone can flourish without fear of coercion or judgment."
       ]}
     />
   </div>
@@ -175,27 +116,18 @@ export default function LandingPage() {
       animationType="slide-up"
       textboxLayout="default"
       useInvertedBackground={false}
-      title="Impact by the Numbers"
-      description="We are dedicated to building a culture of awareness and support."
+      title="Meaningful Impact"
+      description="Our commitment is to provide actionable knowledge that transforms how individuals interact with the world."
       metrics={[
         {
-          id: "1",
-          icon: BookOpen,
-          title: "Educational Guides",
-          value: "50+",
-        },
+          id: "1",          icon: BookOpen,
+          title: "Educational Guides",          value: "75+"},
         {
-          id: "2",
-          icon: Users,
-          title: "Active Students",
-          value: "2.4k",
-        },
+          id: "2",          icon: Users,
+          title: "Active Learners",          value: "3.5k"},
         {
-          id: "3",
-          icon: Heart,
-          title: "Resource Reach",
-          value: "10k",
-        },
+          id: "3",          icon: Heart,
+          title: "Community Reach",          value: "15k"},
       ]}
     />
   </div>
@@ -205,29 +137,16 @@ export default function LandingPage() {
       logoText="RELATE"
       columns={[
         {
-          title: "Resources",
-          items: [
-            {
-              label: "Inclusive",
-              href: "/inclusive",
-            },
-            {
-              label: "Ethics",
-              href: "/ethics",
-            },
+          title: "Resources",          items: [
+            { label: "Inclusive", href: "/inclusive" },
+            { label: "Ethics", href: "/ethics" },
+            { label: "Consent", href: "/power" },
           ],
         },
         {
-          title: "Legal",
-          items: [
-            {
-              label: "Terms",
-              href: "#",
-            },
-            {
-              label: "Privacy",
-              href: "#",
-            },
+          title: "Legal",          items: [
+            { label: "Terms of Service", href: "#" },
+            { label: "Privacy Policy", href: "#" },
           ],
         },
       ]}
diff --git a/src/app/power/page.tsx b/src/app/power/page.tsx
index f9dc245..8cdc9ce 100644
--- a/src/app/power/page.tsx
+++ b/src/app/power/page.tsx
@@ -2,11 +2,12 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
+import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
 
-export default function LandingPage() {
+export default function PowerAndConsentPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="icon-arrow"
@@ -21,88 +22,41 @@ export default function LandingPage() {
         headingFontWeight="light"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleFullscreen
-      navItems={[
-        {
-          name: "Home",
-          id: "/",
-        },
-        {
-          name: "Inclusive Relationships",
-          id: "/inclusive",
-        },
-        {
-          name: "Power & Consent",
-          id: "/power",
-        },
-        {
-          name: "Ethics & Discrimination",
-          id: "/ethics",
-        },
-        {
-          name: "Protective Strategies",
-          id: "/protective",
-        },
-      ]}
-      brandName="RELATE"
-    />
-  </div>
-
-  <div id="body-power" data-section="body-power">
-      <TextSplitAbout
-      useInvertedBackground={false}
-      title="Power in Relationships"
-      description={[
-        "Defining healthy dynamics, understanding power imbalances, and prioritizing clear consent.",
-      ]}
-    />
-  </div>
-
-  <div id="about" data-section="about">
-      <TextSplitAbout
-      useInvertedBackground={false}
-      title="Consent Frameworks"
-      description={[
-        "Practical applications of consent in everyday social and professional interactions.",
-      ]}
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterBaseCard
-      logoText="RELATE"
-      columns={[
-        {
-          title: "Resources",
-          items: [
-            {
-              label: "Inclusive",
-              href: "/inclusive",
-            },
-            {
-              label: "Ethics",
-              href: "/ethics",
-            },
-          ],
-        },
-        {
-          title: "Legal",
-          items: [
-            {
-              label: "Terms",
-              href: "#",
-            },
-            {
-              label: "Privacy",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-    />
-  </div>
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Inclusive Relationships", id: "/inclusive" },
+            { name: "Power & Consent", id: "/power" },
+            { name: "Ethics & Discrimination", id: "/ethics" },
+            { name: "Protective Strategies", id: "/protective" },
+          ]}
+          brandName="RELATE"
+        />
+        <HeroSplitDualMedia
+          title="Power in Relationships & Consent"
+          description="Understanding power dynamics is essential to establishing clear, enthusiastic, and ongoing consent in all relationships."
+          tag="Understanding Boundaries"
+          rating={5}
+          ratingText="Essential Education"
+          mediaItems={[
+            { imageSrc: "http://img.b2bpic.net/free-photo/hand-gesture-expressing-different-feelings_23-2150061940.jpg", imageAlt: "Communication" },
+            { imageSrc: "http://img.b2bpic.net/free-photo/happy-satisfied-business-woman-using-tablet-outside_74855-2926.jpg", imageAlt: "Autonomy" }
+          ]}
+        />
+        <TextSplitAbout
+          title="The Essence of Consent"
+          description={[
+            "Consent is an affirmative, voluntary, and reversible agreement between participants to engage in a specific action.",            "Recognizing power imbalances helps in creating safe environments where boundaries are respected by everyone involved.",            "Prioritizing mutual understanding ensures that every interaction remains grounded in trust and respect."
+          ]}
+        />
+        <FooterBaseCard
+          logoText="RELATE"
+          columns={[
+            { title: "Resources", items: [{ label: "Home", href: "/" }, { label: "Inclusive", href: "/inclusive" }] },
+            { title: "Legal", items: [{ label: "Terms", href: "#" }, { label: "Privacy", href: "#" }] },
+          ]}
+        />
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/protective/page.tsx b/src/app/protective/page.tsx
index 9e41aed..c896ba7 100644
--- a/src/app/protective/page.tsx
+++ b/src/app/protective/page.tsx
@@ -2,107 +2,48 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
+import { ShieldCheck, Lock, Eye } from "lucide-react";
 
-export default function LandingPage() {
+export default function ProtectivePage() {
   return (
-    <ThemeProvider
-        defaultButtonVariant="icon-arrow"
-        defaultTextAnimation="reveal-blur"
-        borderRadius="rounded"
-        contentWidth="mediumLarge"
-        sizing="large"
-        background="none"
-        cardStyle="gradient-mesh"
-        primaryButtonStyle="shadow"
-        secondaryButtonStyle="solid"
-        headingFontWeight="light"
-    >
+    <ThemeProvider>
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleFullscreen
-      navItems={[
-        {
-          name: "Home",
-          id: "/",
-        },
-        {
-          name: "Inclusive Relationships",
-          id: "/inclusive",
-        },
-        {
-          name: "Power & Consent",
-          id: "/power",
-        },
-        {
-          name: "Ethics & Discrimination",
-          id: "/ethics",
-        },
-        {
-          name: "Protective Strategies",
-          id: "/protective",
-        },
-      ]}
-      brandName="RELATE"
-    />
-  </div>
-
-  <div id="body-protective" data-section="body-protective">
-      <TextSplitAbout
-      useInvertedBackground={false}
-      title="Protective Strategies"
-      description={[
-        "Building resilience, creating personal safeguards, and knowing when to set boundaries.",
-      ]}
-    />
-  </div>
-
-  <div id="about" data-section="about">
-      <TextSplitAbout
-      useInvertedBackground={false}
-      title="Building Resilience"
-      description={[
-        "Tools for developing emotional maturity and strong self-defense against toxicity.",
-      ]}
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterBaseCard
-      logoText="RELATE"
-      columns={[
-        {
-          title: "Resources",
-          items: [
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Inclusive Relationships", id: "/inclusive" },
+            { name: "Power & Consent", id: "/power" },
+            { name: "Ethical Manner & Discrimination", id: "/ethics" },
+            { name: "Protective Strategies", id: "/protective" },
+          ]}
+          brandName="RELATE"
+        />
+        <FeatureCardTen
+          animationType="slide-up"
+          textboxLayout="split"
+          title="Protective Strategies"
+          description="Equipping yourself with actionable steps and boundaries to ensure emotional and physical safety in all connections."
+          features={[
             {
-              label: "Inclusive",
-              href: "/inclusive",
+              title: "Establishing Boundaries",              description: "Defining clear personal limits to foster respect and maintain healthy interactions.",              media: { imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-protective-gesture_23-2148812671.jpg" },
+              items: [{ icon: ShieldCheck, text: "Communicate limits clearly" }, { icon: Lock, text: "Maintain autonomy" }],
+              reverse: false
             },
             {
-              label: "Ethics",
-              href: "/ethics",
-            },
-          ],
-        },
-        {
-          title: "Legal",
-          items: [
-            {
-              label: "Terms",
-              href: "#",
-            },
-            {
-              label: "Privacy",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-    />
-  </div>
+              title: "Safety Awareness",              description: "Developing heightened awareness of environments and situations to proactively mitigate risk.",              media: { imageSrc: "http://img.b2bpic.net/free-photo/security-concept-with-person_23-2148516303.jpg" },
+              items: [{ icon: Eye, text: "Assess situational safety" }, { icon: ShieldCheck, text: "Trust your intuition" }],
+              reverse: true
+            }
+          ]}
+        />
+        <FooterBaseCard
+          logoText="RELATE"
+          columns={[{ title: "Resources", items: [{ label: "Home", href: "/" }, { label: "Ethics", href: "/ethics" }] }]}
+        />
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/styles/variables.css b/src/app/styles/variables.css
index 539ce00..f954ff3 100644
--- a/src/app/styles/variables.css
+++ b/src/app/styles/variables.css
@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f5f5;
-  --card: #ffffff;
-  --foreground: #1c1c1c;
-  --primary-cta: #1c1c1c;
+  --background: #ffffff;
+  --card: #f5f5f7;
+  --foreground: #1d1d1f;
+  --primary-cta: #0071e3;
   --primary-cta-text: #f5f5f5;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #f5f5f7;
   --secondary-cta-text: #1c1c1c;
-  --accent: #15479c;
-  --background-accent: #a8cce8;
+  --accent: #0066cc;
+  --background-accent: #e8e8ed;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);