From 0f1bec25813f4ce765d6d2c6306a8a2b867c16ba Mon Sep 17 00:00:00 2001
From: Obinna Anosike <smartlify09@gmail.com>
Date: Tue, 30 Jun 2026 12:08:17 +0100
Subject: [PATCH 01/29] fix: smooth gradient transition on navbar CTA using
 overlay pseudo-element pattern

---
 src/features/marketing/components/navbar.tsx | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/features/marketing/components/navbar.tsx b/src/features/marketing/components/navbar.tsx
index 73d1db4..c6c71df 100644
--- a/src/features/marketing/components/navbar.tsx
+++ b/src/features/marketing/components/navbar.tsx
@@ -39,7 +39,7 @@ const Navbar = () => {
             <Link
               key={item.href}
               href={item.href}
-              className="p-2.5 text-base transition-colors hover:text-secondary-foreground"
+              className="p-2.5 text-base transition-colors duration-300 hover:text-[#6B7280]"
             >
               {item.label}
             </Link>
@@ -48,11 +48,12 @@ const Navbar = () => {
 
         <Button
           asChild
-          className="hidden h-13 w-[157px] gap-[6px] rounded-[60px] px-5 py-4 md:inline-flex"
+          className="group relative hidden overflow-hidden md:inline-flex"
         >
-          <Link href="/contact">
-            Consultation
-            <ArrowRight className="size-3.5" aria-hidden="true" />
+          <Link href="/contact" className="flex h-13 w-[157px] items-center justify-center gap-[6px] rounded-[60px] px-5 py-4">
+            <span className="relative z-10">Consultation</span>
+            <ArrowRight className="relative z-10 size-3.5 transition-transform duration-300 group-hover:rotate-[-30deg]" aria-hidden="true" />
+            <div className="pointer-events-none absolute inset-0 rounded-[60px] bg-gradient-to-r from-ma-glow-blue to-ma-glow-violet opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
           </Link>
         </Button>
 
@@ -96,11 +97,12 @@ const Navbar = () => {
           ))}
           <Button
             asChild
-            className="mt-2 h-13 w-full gap-[6px] rounded-[60px] px-5 py-4"
+            className="group relative mt-2 overflow-hidden"
           >
-            <Link href="/contact" onClick={() => setMobileOpen(false)}>
-              Consultation
-              <ArrowRight className="size-3.5" aria-hidden="true" />
+            <Link href="/contact" onClick={() => setMobileOpen(false)} className="flex h-13 w-full items-center justify-center gap-[6px] rounded-[60px] px-5 py-4">
+              <span className="relative z-10">Consultation</span>
+              <ArrowRight className="relative z-10 size-3.5 transition-transform duration-300 group-hover:rotate-[30deg]" aria-hidden="true" />
+              <div className="pointer-events-none absolute inset-0 rounded-[60px] bg-gradient-to-r from-ma-glow-blue to-ma-glow-violet opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
             </Link>
           </Button>
         </nav>

From 9403570a6ea6ea88908e549e167d056724b09e79 Mon Sep 17 00:00:00 2001
From: Obinna Anosike <smartlify09@gmail.com>
Date: Tue, 30 Jun 2026 12:16:19 +0100
Subject: [PATCH 02/29] fix: smooth gradient transition on hero book
 consultation button

---
 src/features/marketing/components/hero-section.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/features/marketing/components/hero-section.tsx b/src/features/marketing/components/hero-section.tsx
index 9344f95..cd5fcef 100644
--- a/src/features/marketing/components/hero-section.tsx
+++ b/src/features/marketing/components/hero-section.tsx
@@ -58,10 +58,13 @@ export function HeroSection() {
         <div className="mt-10 flex items-center gap-5">
           <Link
             href="/contact"
-            className="inline-flex items-center justify-center gap-1.5 rounded-[60px] bg-ma-text px-5 py-4 text-xs font-semibold text-nowrap text-white transition-colors hover:bg-ma-text/90 sm:gap-2.5 sm:text-base"
+            className="group relative inline-flex items-center justify-center overflow-hidden rounded-[60px] bg-ma-text px-5 py-4 sm:gap-2.5 sm:text-base"
           >
-            Book consultation
-            <ArrowRight className="size-5" aria-hidden="true" />
+            <span className="relative z-10 inline-flex items-center justify-center gap-1.5 text-xs font-semibold text-nowrap text-white sm:gap-2.5 sm:text-base">
+              Book consultation
+              <ArrowRight className="size-5 transition-transform duration-300 group-hover:rotate-[-30deg]" aria-hidden="true" />
+            </span>
+            <div className="pointer-events-none absolute inset-0 rounded-[60px] bg-gradient-to-r from-ma-glow-blue to-ma-glow-violet opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
           </Link>
           <Link
             href="/donation"

From a057b10cfca6704ac55ce16127714b06bd2e6d64 Mon Sep 17 00:00:00 2001
From: Obinna Anosike <smartlify09@gmail.com>
Date: Tue, 30 Jun 2026 12:25:24 +0100
Subject: [PATCH 03/29] feat: scroll-into-view expand animation on hero image
 using motion

---
 .../marketing/components/hero-section.tsx     | 28 ++++++++++++-------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/features/marketing/components/hero-section.tsx b/src/features/marketing/components/hero-section.tsx
index cd5fcef..aa3845d 100644
--- a/src/features/marketing/components/hero-section.tsx
+++ b/src/features/marketing/components/hero-section.tsx
@@ -1,3 +1,4 @@
+import { motion } from "motion/react"
 import Image from "next/image"
 import Link from "next/link"
 import { ArrowRight, Star } from "lucide-react"
@@ -80,16 +81,23 @@ export function HeroSection() {
             className="ma-hero-glow pointer-events-none absolute top-1/4 left-1/2 -z-10 h-[500px] w-[600px] -translate-x-1/2 -translate-y-1/2 rounded-full opacity-90 lg:top-1/3 lg:left-1/2 lg:h-[950px] lg:w-[954px]"
             aria-hidden="true"
           />
-          <div className="relative h-[280px] overflow-hidden rounded-[20px] bg-ma-bg lg:h-[560px]">
-            <Image
-              src="/figma-home/hero.jpg"
-              alt="Two students smiling in a city setting"
-              fill
-              priority
-              sizes="(min-width: 768px) 700px, calc(100vw - 48px)"
-              className="object-cover"
-            />
-          </div>
+          <motion.div
+            initial={{ width: 0, height: 0 }}
+            whileInView={{ width: "100%", height: "auto" }}
+            viewport={{ once: true }}
+            className="overflow-hidden"
+          >
+            <div className="relative h-[280px] overflow-hidden rounded-[20px] bg-ma-bg lg:h-[560px]">
+              <Image
+                src="/figma-home/hero.jpg"
+                alt="Two students smiling in a city setting"
+                fill
+                priority
+                sizes="(min-width: 768px) 700px, calc(100vw - 48px)"
+                className="object-cover"
+              />
+            </div>
+          </motion.div>
         </div>
       </div>
     </section>

From 87b105c08be2e26cc3040eb523bfab09e3cc6be5 Mon Sep 17 00:00:00 2001
From: Obinna Anosike <smartlify09@gmail.com>
Date: Tue, 30 Jun 2026 12:31:42 +0100
Subject: [PATCH 04/29] fix: hero image expands from 700px to full 1024px
 container on scroll

---
 src/features/marketing/components/hero-section.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/features/marketing/components/hero-section.tsx b/src/features/marketing/components/hero-section.tsx
index aa3845d..0633ded 100644
--- a/src/features/marketing/components/hero-section.tsx
+++ b/src/features/marketing/components/hero-section.tsx
@@ -1,3 +1,4 @@
+"use client"
 import { motion } from "motion/react"
 import Image from "next/image"
 import Link from "next/link"
@@ -63,7 +64,10 @@ export function HeroSection() {
           >
             <span className="relative z-10 inline-flex items-center justify-center gap-1.5 text-xs font-semibold text-nowrap text-white sm:gap-2.5 sm:text-base">
               Book consultation
-              <ArrowRight className="size-5 transition-transform duration-300 group-hover:rotate-[-30deg]" aria-hidden="true" />
+              <ArrowRight
+                className="size-5 transition-transform duration-300 group-hover:rotate-[-30deg]"
+                aria-hidden="true"
+              />
             </span>
             <div className="pointer-events-none absolute inset-0 rounded-[60px] bg-gradient-to-r from-ma-glow-blue to-ma-glow-violet opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
           </Link>
@@ -76,14 +80,14 @@ export function HeroSection() {
           </Link>
         </div>
 
-        <div className="relative mt-15 w-full max-w-[700px] lg:mt-[100px]">
+        <div className="relative mt-15 w-full max-w-[1024px] lg:mt-[100px]">
           <div
             className="ma-hero-glow pointer-events-none absolute top-1/4 left-1/2 -z-10 h-[500px] w-[600px] -translate-x-1/2 -translate-y-1/2 rounded-full opacity-90 lg:top-1/3 lg:left-1/2 lg:h-[950px] lg:w-[954px]"
             aria-hidden="true"
           />
           <motion.div
-            initial={{ width: 0, height: 0 }}
-            whileInView={{ width: "100%", height: "auto" }}
+            initial={{ width: 700 }}
+            whileInView={{ width: "100%" }}
             viewport={{ once: true }}
             className="overflow-hidden"
           >

From 9aac4c74c2d812ce9bdb817755fd939ce033c1f9 Mon Sep 17 00:00:00 2001
From: Obinna Anosike <smartlify09@gmail.com>
Date: Tue, 30 Jun 2026 12:35:30 +0100
Subject: [PATCH 05/29] refactor: use scale transform for hero image scroll
 animation instead of width

---
 src/features/marketing/components/hero-section.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/features/marketing/components/hero-section.tsx b/src/features/marketing/components/hero-section.tsx
index 0633ded..e7897f0 100644
--- a/src/features/marketing/components/hero-section.tsx
+++ b/src/features/marketing/components/hero-section.tsx
@@ -86,10 +86,9 @@ export function HeroSection() {
             aria-hidden="true"
           />
           <motion.div
-            initial={{ width: 700 }}
-            whileInView={{ width: "100%" }}
+            initial={{ scale: 700 / 1024 }}
+            whileInView={{ scale: 1 }}
             viewport={{ once: true }}
-            className="overflow-hidden"
           >
             <div className="relative h-[280px] overflow-hidden rounded-[20px] bg-ma-bg lg:h-[560px]">
               <Image

From 61192d60149b300fc15476d81dd3a1a21f2e7a9d Mon Sep 17 00:00:00 2001
From: Obinna Anosike <smartlify09@gmail.com>
Date: Tue, 30 Jun 2026 12:41:25 +0100
Subject: [PATCH 06/29] chore: add motion package and finish navbar animation

---
 package.json                                 |  1 +
 pnpm-lock.yaml                               | 60 ++++++++++++++++++++
 src/features/marketing/components/navbar.tsx | 25 ++++++--
 3 files changed, 80 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 51195ca..9ede417 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
     "dotenv": "^17.4.2",
     "drizzle-orm": "^0.45.2",
     "lucide-react": "^1.17.0",
+    "motion": "^12.42.0",
     "next": "16.2.6",
     "next-themes": "^0.4.6",
     "pg": "^8.21.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8cb746e..9b16853 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -68,6 +68,9 @@ importers:
       lucide-react:
         specifier: ^1.17.0
         version: 1.20.0(react@19.2.4)
+      motion:
+        specifier: ^12.42.0
+        version: 12.42.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       next:
         specifier: 16.2.6
         version: 16.2.6(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -3781,6 +3784,20 @@ packages:
     resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
     engines: {node: '>= 0.6'}
 
+  framer-motion@12.42.0:
+    resolution: {integrity: sha512-wp7EJnfWaaEScVygKv3e20udoRz+LbtxScsuTkakAxfXmt+ReC6WyPW2nINRAGvd+hG9odwcjBLyOTPjH5pBRA==}
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
   fresh@2.0.0:
     resolution: {integrity: sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==}
     engines: {node: '>= 0.8'}
@@ -4450,6 +4467,26 @@ packages:
   module-details-from-path@1.0.4:
     resolution: {integrity: sha512-EGWKgxALGMgzvxYF1UyGTy0HXX/2vHLkw6+NvDKW2jypWbHpjQuj4UMcqQWXHERJhVGKikolT06G3bcKe4fi7w==}
 
+  motion-dom@12.42.0:
+    resolution: {integrity: sha512-M63h4n8R+quJdNhBwuLlgxM+OLYa9+I/T2pzDRboB9fLXRdbou+Gw7Zury+SkpaCyACP1JHSjHgZ1EgTkBr30w==}
+
+  motion-utils@12.39.0:
+    resolution: {integrity: sha512-8nadJAJjTtqRkmRF36FoJTrywK9nnFmnPwnSMyxaOCU7GDjN9RTMJIxx9De8ErM+vpPhMccr/6fo5WciyQLnMQ==}
+
+  motion@12.42.0:
+    resolution: {integrity: sha512-Qhwvu9sVl5/URSq5CNzwMCpSKK8Uhnrwb6VO977kZyj/wOCS7mWebJUnBoHx5cZU1Zv8a9BD5CSICWKAlrLJgA==}
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
@@ -9238,6 +9275,15 @@ snapshots:
 
   forwarded@0.2.0: {}
 
+  framer-motion@12.42.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+    dependencies:
+      motion-dom: 12.42.0
+      motion-utils: 12.39.0
+      tslib: 2.8.1
+    optionalDependencies:
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+
   fresh@2.0.0: {}
 
   fs-extra@11.3.5:
@@ -9821,6 +9867,20 @@ snapshots:
 
   module-details-from-path@1.0.4: {}
 
+  motion-dom@12.42.0:
+    dependencies:
+      motion-utils: 12.39.0
+
+  motion-utils@12.39.0: {}
+
+  motion@12.42.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+    dependencies:
+      framer-motion: 12.42.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      tslib: 2.8.1
+    optionalDependencies:
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+
   ms@2.1.3: {}
 
   nanoid@3.3.12: {}
diff --git a/src/features/marketing/components/navbar.tsx b/src/features/marketing/components/navbar.tsx
index c6c71df..47caf87 100644
--- a/src/features/marketing/components/navbar.tsx
+++ b/src/features/marketing/components/navbar.tsx
@@ -48,11 +48,17 @@ const Navbar = () => {
 
         <Button
           asChild
-          className="group relative hidden overflow-hidden md:inline-flex"
+          className="group relative hidden overflow-hidden rounded-[60px] md:inline-flex"
         >
-          <Link href="/contact" className="flex h-13 w-[157px] items-center justify-center gap-[6px] rounded-[60px] px-5 py-4">
+          <Link
+            href="/contact"
+            className="flex h-13 w-[157px] items-center justify-center gap-[6px] rounded-[60px] px-5 py-4 text-base font-semibold"
+          >
             <span className="relative z-10">Consultation</span>
-            <ArrowRight className="relative z-10 size-3.5 transition-transform duration-300 group-hover:rotate-[-30deg]" aria-hidden="true" />
+            <ArrowRight
+              className="relative z-10 size-5 transition-transform duration-300 group-hover:rotate-[-30deg]"
+              aria-hidden="true"
+            />
             <div className="pointer-events-none absolute inset-0 rounded-[60px] bg-gradient-to-r from-ma-glow-blue to-ma-glow-violet opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
           </Link>
         </Button>
@@ -97,11 +103,18 @@ const Navbar = () => {
           ))}
           <Button
             asChild
-            className="group relative mt-2 overflow-hidden"
+            className="group relative mt-2 overflow-hidden rounded-[60px]"
           >
-            <Link href="/contact" onClick={() => setMobileOpen(false)} className="flex h-13 w-full items-center justify-center gap-[6px] rounded-[60px] px-5 py-4">
+            <Link
+              href="/contact"
+              onClick={() => setMobileOpen(false)}
+              className="flex h-13 w-full items-center justify-center gap-[6px] rounded-[60px] px-5 py-4"
+            >
               <span className="relative z-10">Consultation</span>
-              <ArrowRight className="relative z-10 size-3.5 transition-transform duration-300 group-hover:rotate-[30deg]" aria-hidden="true" />
+              <ArrowRight
+                className="relative z-10 size-3.5 transition-transform duration-300 group-hover:rotate-[30deg]"
+                aria-hidden="true"
+              />
               <div className="pointer-events-none absolute inset-0 rounded-[60px] bg-gradient-to-r from-ma-glow-blue to-ma-glow-violet opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
             </Link>
           </Button>

From bda2bae63ddaeaf6c42d2dbd1ab35b2fc372bba9 Mon Sep 17 00:00:00 2001
From: Obinna Anosike <smartlify09@gmail.com>
Date: Tue, 30 Jun 2026 22:22:43 +0100
Subject: [PATCH 07/29] feat: horizontal expand/shrink on bridging the gap
 cards on hover

---
 .../marketing/components/mission-sections.tsx | 82 +++++++++++++------
 1 file changed, 55 insertions(+), 27 deletions(-)

diff --git a/src/features/marketing/components/mission-sections.tsx b/src/features/marketing/components/mission-sections.tsx
index e631038..e5371c0 100644
--- a/src/features/marketing/components/mission-sections.tsx
+++ b/src/features/marketing/components/mission-sections.tsx
@@ -1,20 +1,12 @@
-import { ArrowRight, BriefcaseBusiness, Gift } from "lucide-react"
-import Image from "next/image"
+"use client"
 
-const supportCards = [
-  {
-    title: "Get Assistance",
-    description:
-      "Get access to AI workforce training, healthcare guidance, and personalized support designed to help you move forward with confidence.",
-  },
-  {
-    title: "Support Mission",
-    description:
-      "Get access to AI workforce training, healthcare guidance, and personalized support designed to help you move forward with confidence.",
-  },
-]
+import { Gift } from "lucide-react"
+import Image from "next/image"
+import { useState } from "react"
 
 export function MissionBridgeSection() {
+  const [hovered, setHovered] = useState<"first" | "second" | null>(null)
+
   return (
     <section
       id="about"
@@ -48,8 +40,18 @@ export function MissionBridgeSection() {
         </p>
       </div>
 
-      <div className="mt-15 grid gap-5 rounded-2xl bg-[#F5F5F5] p-5 md:grid-cols-[2fr_1fr]">
-        <div className="flex flex-col gap-5 rounded-2xl bg-white p-5 sm:flex-row">
+      <div
+        className="mt-15 grid gap-5 rounded-2xl bg-[#F5F5F5] p-5 transition-[grid-template-columns] duration-500 md:grid-cols-[2fr_1fr]"
+        style={{
+          gridTemplateColumns:
+            hovered === "second" ? "1fr 2fr" : undefined,
+        }}
+      >
+        <div
+          onMouseEnter={() => setHovered("first")}
+          onMouseLeave={() => setHovered(null)}
+          className="flex flex-col gap-5 rounded-2xl bg-white p-5 sm:flex-row"
+        >
           <div className="flex flex-col justify-between gap-2.5 sm:min-h-79.5 sm:gap-0">
             <div className="flex size-12.5 items-center justify-center rounded-full border">
               <Gift />
@@ -66,25 +68,36 @@ export function MissionBridgeSection() {
               </p>
             </div>
           </div>
-          <Image
-            src="https://images.unsplash.com/photo-1513258496099-48168024aec0?w=700&q=80"
-            alt=""
-            className="size-full min-w-[292px] rounded-2xl object-cover"
-            loading="lazy"
-            width={292}
-            height={318}
-          />
+
+          <div
+            className={`overflow-hidden rounded-2xl transition-all duration-500 ${
+              hovered === "second" ? "w-0 min-w-0" : "w-[292px]"
+            }`}
+          >
+            <Image
+              src="https://images.unsplash.com/photo-1513258496099-48168024aec0?w=700&q=80"
+              alt=""
+              className="size-full min-w-[292px] object-cover"
+              loading="lazy"
+              width={292}
+              height={318}
+            />
+          </div>
         </div>
 
-        <div className="hidden gap-5 rounded-2xl bg-white p-5 sm:flex">
-          <div className="flex flex-col justify-between gap-2.5 sm:min-h-79.5">
+        <div
+          onMouseEnter={() => setHovered("second")}
+          onMouseLeave={() => setHovered(null)}
+          className="flex gap-5 rounded-2xl bg-white p-5 sm:flex"
+        >
+          <div className="flex min-w-0 flex-col justify-between gap-2.5 sm:min-h-79.5">
             <div className="flex size-12.5 items-center justify-center rounded-full border">
               <Gift />
             </div>
 
             <div className="flex flex-col items-start gap-4">
               <h3 className="text-xl font-semibold text-ma-text">
-                Support mission{" "}
+                Support mission
               </h3>
               <p className="text-sm text-ma-text/80">
                 Get access to AI workforce training, healthcare guidance, and
@@ -93,6 +106,21 @@ export function MissionBridgeSection() {
               </p>
             </div>
           </div>
+
+          <div
+            className={`overflow-hidden rounded-2xl transition-all duration-500 ${
+              hovered === "second" ? "w-[292px]" : "w-0 min-w-0"
+            }`}
+          >
+            <Image
+              src="https://images.unsplash.com/photo-1559027615-cd4628902d4a?w=700&q=80"
+              alt=""
+              className="size-full min-w-[292px] object-cover"
+              loading="lazy"
+              width={292}
+              height={318}
+            />
+          </div>
         </div>
       </div>
     </section>

From 8b474c456b06b9e61353c8149fc5f7f4b8de9e9b Mon Sep 17 00:00:00 2001
From: Obinna Anosike <smartlify09@gmail.com>
Date: Tue, 30 Jun 2026 22:42:37 +0100
Subject: [PATCH 08/29] fix: add shrink-0 to image wrappers to prevent flex
 compression

---
 .../marketing/components/mission-sections.tsx         | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/features/marketing/components/mission-sections.tsx b/src/features/marketing/components/mission-sections.tsx
index e5371c0..d8c33a2 100644
--- a/src/features/marketing/components/mission-sections.tsx
+++ b/src/features/marketing/components/mission-sections.tsx
@@ -43,8 +43,7 @@ export function MissionBridgeSection() {
       <div
         className="mt-15 grid gap-5 rounded-2xl bg-[#F5F5F5] p-5 transition-[grid-template-columns] duration-500 md:grid-cols-[2fr_1fr]"
         style={{
-          gridTemplateColumns:
-            hovered === "second" ? "1fr 2fr" : undefined,
+          gridTemplateColumns: hovered === "second" ? "1fr 2fr" : undefined,
         }}
       >
         <div
@@ -70,14 +69,14 @@ export function MissionBridgeSection() {
           </div>
 
           <div
-            className={`overflow-hidden rounded-2xl transition-all duration-500 ${
+            className={`shrink-0 overflow-hidden rounded-2xl transition-all duration-500 ${
               hovered === "second" ? "w-0 min-w-0" : "w-[292px]"
             }`}
           >
             <Image
               src="https://images.unsplash.com/photo-1513258496099-48168024aec0?w=700&q=80"
               alt=""
-              className="size-full min-w-[292px] object-cover"
+              className="size-full object-cover"
               loading="lazy"
               width={292}
               height={318}
@@ -108,14 +107,14 @@ export function MissionBridgeSection() {
           </div>
 
           <div
-            className={`overflow-hidden rounded-2xl transition-all duration-500 ${
+            className={`shrink-0 overflow-hidden rounded-2xl transition-all duration-500 ${
               hovered === "second" ? "w-[292px]" : "w-0 min-w-0"
             }`}
           >
             <Image
               src="https://images.unsplash.com/photo-1559027615-cd4628902d4a?w=700&q=80"
               alt=""
-              className="size-full min-w-[292px] object-cover"
+              className="size-full object-cover"
               loading="lazy"
               width={292}
               height={318}

From a4cc51f297540acc42e34e23500f299c2a385915 Mon Sep 17 00:00:00 2001
From: Obinna Anosike <smartlify09@gmail.com>
Date: Tue, 30 Jun 2026 22:48:19 +0100
Subject: [PATCH 09/29] fix: testimonials image overflow and scroll-to-end on
 button click

---
 .../marketing/components/testimonials.tsx     | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/features/marketing/components/testimonials.tsx b/src/features/marketing/components/testimonials.tsx
index ae383f0..af8170d 100644
--- a/src/features/marketing/components/testimonials.tsx
+++ b/src/features/marketing/components/testimonials.tsx
@@ -27,8 +27,10 @@ export function Testimonials() {
   const scrollRef = useRef<HTMLDivElement>(null)
 
   function scrollReviews(direction: "previous" | "next") {
-    scrollRef.current?.scrollBy({
-      left: direction === "next" ? 360 : -360,
+    const el = scrollRef.current
+    if (!el) return
+    el.scrollTo({
+      left: direction === "next" ? el.scrollWidth - el.clientWidth : 0,
       behavior: "smooth",
     })
   }
@@ -73,15 +75,17 @@ export function Testimonials() {
         {reviews.map((review) => (
           <article
             key={review.image}
-            className="relative flex h-[500px] w-[330px] shrink-0 flex-col justify-end overflow-hidden rounded-3xl px-[15px] pb-[30px]"
+            className="relative flex h-[500px] w-[330px] shrink-0 flex-col justify-end rounded-3xl px-[15px] pb-[30px]"
           >
-            <Image
-              src={review.image}
-              alt=""
-              fill
-              sizes="330px"
-              className="object-cover"
-            />
+            <div className="absolute inset-0 overflow-hidden rounded-3xl">
+              <Image
+                src={review.image}
+                alt=""
+                fill
+                sizes="330px"
+                className="object-cover"
+              />
+            </div>
             <div
               className="absolute inset-0 bg-gradient-to-b from-transparent from-[30%] to-black"
               aria-hidden="true"

From 66137c0265e88437367af0a75f959723c0bbd22b Mon Sep 17 00:00:00 2001
From: Obinna Anosike <smartlify09@gmail.com>
Date: Tue, 30 Jun 2026 22:55:33 +0100
Subject: [PATCH 10/29] fix: horizontal overflow clipping on testimonials
 scroll container

---
 .../marketing/components/testimonials.tsx     | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/features/marketing/components/testimonials.tsx b/src/features/marketing/components/testimonials.tsx
index af8170d..8b53fce 100644
--- a/src/features/marketing/components/testimonials.tsx
+++ b/src/features/marketing/components/testimonials.tsx
@@ -70,22 +70,20 @@ export function Testimonials() {
 
       <div
         ref={scrollRef}
-        className="hide-scrollbar mt-[86px] flex gap-[30px] overflow-x-auto scroll-smooth px-4 pb-2 xl:px-25 2xl:pl-50"
+        className="hide-scrollbar relative mt-[86px] flex gap-[30px] overflow-x-auto scroll-smooth px-4 pb-2 xl:px-25 2xl:pl-50"
       >
         {reviews.map((review) => (
           <article
             key={review.image}
-            className="relative flex h-[500px] w-[330px] shrink-0 flex-col justify-end rounded-3xl px-[15px] pb-[30px]"
+            className="relative flex h-[500px] w-[330px] shrink-0 flex-col justify-end overflow-hidden rounded-3xl px-[15px] pb-[30px]"
           >
-            <div className="absolute inset-0 overflow-hidden rounded-3xl">
-              <Image
-                src={review.image}
-                alt=""
-                fill
-                sizes="330px"
-                className="object-cover"
-              />
-            </div>
+            <Image
+              src={review.image}
+              alt=""
+              fill
+              sizes="330px"
+              className="object-cover"
+            />
             <div
               className="absolute inset-0 bg-gradient-to-b from-transparent from-[30%] to-black"
               aria-hidden="true"

From 9e97af0deaa465c54685dfd3a8f55a6096a8e68a Mon Sep 17 00:00:00 2001
From: Obinna Anosike <smartlify09@gmail.com>
Date: Tue, 30 Jun 2026 22:58:54 +0100
Subject: [PATCH 11/29] fix: disable manual horizontal scroll, button-only
 navigation

---
 src/features/marketing/components/testimonials.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/marketing/components/testimonials.tsx b/src/features/marketing/components/testimonials.tsx
index 8b53fce..d20e95a 100644
--- a/src/features/marketing/components/testimonials.tsx
+++ b/src/features/marketing/components/testimonials.tsx
@@ -70,7 +70,7 @@ export function Testimonials() {
 
       <div
         ref={scrollRef}
-        className="hide-scrollbar relative mt-[86px] flex gap-[30px] overflow-x-auto scroll-smooth px-4 pb-2 xl:px-25 2xl:pl-50"
+        className="relative mt-[86px] flex gap-[30px] overflow-x-hidden px-4 pb-2 xl:px-25 2xl:pl-50"
       >
         {reviews.map((review) => (
           <article

From 6f6448b6ad6a6dba7edd92a7481f84f1855e071e Mon Sep 17 00:00:00 2001
From: Obinna Anosike <smartlify09@gmail.com>
Date: Tue, 30 Jun 2026 23:32:11 +0100
Subject: [PATCH 12/29] feat: accordion FAQ with expand/collapse and 360deg
 plus spin

---
 src/features/marketing/components/faq.tsx | 91 +++++++++++++++++------
 1 file changed, 70 insertions(+), 21 deletions(-)

diff --git a/src/features/marketing/components/faq.tsx b/src/features/marketing/components/faq.tsx
index d5f4baa..e59e472 100644
--- a/src/features/marketing/components/faq.tsx
+++ b/src/features/marketing/components/faq.tsx
@@ -1,15 +1,48 @@
+"use client"
+
 import { Plus } from "lucide-react"
+import { useState } from "react"
 
 const faqs = [
-  "Who is ModernAdvocates Inc. for?",
-  "Is the consultation really free?",
-  "What kind of AI workforce training do you offer?",
-  "Do I need any prior experience to join the training programs?",
-  "How does ModernAdvocates help with healthcare resources?",
-  "How can I support your mission?",
+  {
+    question: "Who is ModernAdvocates Inc. for?",
+    answer:
+      "ModernAdvocates Inc. serves low-to-moderate income individuals, caregivers, and families navigating health challenges or career transitions who need practical AI guidance and human-centered support.",
+  },
+  {
+    question: "Is the consultation really free?",
+    answer:
+      "Yes, our initial consultation is completely free with no obligation. We believe everyone deserves access to guidance before making any commitment.",
+  },
+  {
+    question: "What kind of AI workforce training do you offer?",
+    answer:
+      "We offer hands-on training in AI-powered tools, workflow automation, and digital skills designed for real-world application — no tech background required.",
+  },
+  {
+    question: "Do I need any prior experience to join the training programs?",
+    answer:
+      "Not at all. Our programs are built for beginners and meet you where you are. We provide step-by-step guidance and ongoing support throughout your learning journey.",
+  },
+  {
+    question: "How does ModernAdvocates help with healthcare resources?",
+    answer:
+      "We help you navigate the healthcare system by providing guidance on accessing care, understanding your options, and using AI tools to advocate for your health.",
+  },
+  {
+    question: "How can I support your mission?",
+    answer:
+      "You can support our mission by donating, volunteering your expertise, or spreading the word. Every contribution helps us reach more individuals in need.",
+  },
 ]
 
 export function Faq() {
+  const [openIndex, setOpenIndex] = useState<number | null>(null)
+
+  function toggle(index: number) {
+    setOpenIndex(openIndex === index ? null : index)
+  }
+
   return (
     <section
       id="faq"
@@ -27,22 +60,38 @@ export function Faq() {
         </div>
 
         <div className="flex flex-col gap-[29px]">
-          {faqs.map((question) => (
-            <button
-              key={question}
-              type="button"
-              aria-label={question}
-              className="flex w-full items-start gap-4 rounded-3xl border border-[#d9d9d9] bg-white p-5 px-5 text-left text-primary transition-colors hover:border-ma-text/35 lg:py-7.5"
+          {faqs.map((faq, i) => (
+            <div
+              key={i}
+              className="rounded-3xl border border-[#d9d9d9] bg-white p-5 transition-colors hover:border-ma-text/35 lg:py-7.5"
             >
-              <Plus
-                className="size-[30px] shrink-0"
-                strokeWidth={2.5}
-                aria-hidden="true"
-              />
-              <span className="min-w-0 flex-1 text-lg leading-normal font-bold lg:text-[22px]">
-                {question}
-              </span>
-            </button>
+              <button
+                type="button"
+                onClick={() => toggle(i)}
+                className="flex w-full items-start gap-4 text-left text-primary"
+              >
+                <Plus
+                  className={`size-[30px] shrink-0 transition-transform duration-300 ${
+                    openIndex === i ? "rotate-[360deg]" : ""
+                  }`}
+                  strokeWidth={2.5}
+                  aria-hidden="true"
+                />
+                <span className="min-w-0 flex-1 text-lg leading-normal font-bold lg:text-[22px]">
+                  {faq.question}
+                </span>
+              </button>
+
+              <div
+                className={`overflow-hidden transition-all duration-300 ${
+                  openIndex === i ? "max-h-[500px] opacity-100" : "max-h-0 opacity-0"
+                }`}
+              >
+                <p className="pt-4 text-sm leading-normal text-ma-text/80 lg:text-base">
+                  {faq.answer}
+                </p>
+              </div>
+            </div>
           ))}
         </div>
       </div>

From 98ecafe4a964b93207dd5ef0540e3754624a7a61 Mon Sep 17 00:00:00 2001
From: Obinna Anosike <smartlify09@gmail.com>
Date: Tue, 30 Jun 2026 23:36:12 +0100
Subject: [PATCH 13/29] fix: slow cross rotation speed by 2x (600ms)

---
 src/features/marketing/components/faq.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/marketing/components/faq.tsx b/src/features/marketing/components/faq.tsx
index e59e472..2d78e85 100644
--- a/src/features/marketing/components/faq.tsx
+++ b/src/features/marketing/components/faq.tsx
@@ -71,7 +71,7 @@ export function Faq() {
                 className="flex w-full items-start gap-4 text-left text-primary"
               >
                 <Plus
-                  className={`size-[30px] shrink-0 transition-transform duration-300 ${
+                  className={`size-[30px] shrink-0 transition-transform duration-600 ${
                     openIndex === i ? "rotate-[360deg]" : ""
                   }`}
                   strokeWidth={2.5}

From 116b00d9833496939fb8d62cb54baa6fbdc1b4e7 Mon Sep 17 00:00:00 2001
From: Obinna Anosike <smartlify09@gmail.com>
Date: Tue, 30 Jun 2026 23:38:02 +0100
Subject: [PATCH 14/29] feat: add arrow rotation on hover to CTA button

---
 src/features/marketing/components/cta-section.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/features/marketing/components/cta-section.tsx b/src/features/marketing/components/cta-section.tsx
index 0d9045a..d701ea2 100644
--- a/src/features/marketing/components/cta-section.tsx
+++ b/src/features/marketing/components/cta-section.tsx
@@ -17,10 +17,10 @@ export function CtaSection() {
           <div className="mt-12.5 flex flex-col items-center justify-center gap-5 sm:flex-row lg:mt-13">
             <Link
               href="/contact"
-              className="inline-flex items-center justify-center gap-2.5 rounded-[60px] bg-[linear-gradient(90deg,#4f7cf7_0%,#7b5cff_68.269%)] px-5 py-4 text-center text-base font-semibold text-white transition-opacity hover:opacity-90"
+              className="group inline-flex items-center justify-center gap-2.5 rounded-[60px] bg-[linear-gradient(90deg,#4f7cf7_0%,#7b5cff_68.269%)] px-5 py-4 text-center text-base font-semibold text-white transition-opacity hover:opacity-90"
             >
               Book a free consultation
-              <ArrowRight className="size-5" aria-hidden="true" />
+              <ArrowRight className="size-5 transition-transform duration-300 group-hover:rotate-[-30deg]" aria-hidden="true" />
             </Link>
           </div>
         </div>

From 441c87cae5ab015c0592b37e17ae3b910ae28077 Mon Sep 17 00:00:00 2001
From: Obinna Anosike <smartlify09@gmail.com>
Date: Tue, 30 Jun 2026 23:41:20 +0100
Subject: [PATCH 15/29] feat: join button scale up, gradient, and arrow
 rotation on hover

---
 src/features/marketing/components/footer.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/features/marketing/components/footer.tsx b/src/features/marketing/components/footer.tsx
index 618e4f1..16e41b0 100644
--- a/src/features/marketing/components/footer.tsx
+++ b/src/features/marketing/components/footer.tsx
@@ -80,10 +80,13 @@ export function Footer() {
               />
               <button
                 type="submit"
-                className="inline-flex items-center justify-center gap-2 rounded-[60px] bg-ma-text px-[15px] py-3 text-[12.31px] font-semibold text-white transition-colors hover:bg-ma-text/90"
+                className="group relative inline-flex items-center justify-center gap-2 overflow-hidden rounded-[60px] bg-ma-text px-[15px] py-3 text-[12.31px] font-semibold text-white transition-transform duration-300 hover:scale-[1.5]"
               >
-                Join
-                <ArrowRight className="size-[15px]" aria-hidden="true" />
+                <span className="relative z-10 inline-flex items-center gap-2">
+                  Join
+                  <ArrowRight className="size-[15px] transition-transform duration-300 group-hover:rotate-[-30deg]" aria-hidden="true" />
+                </span>
+                <div className="pointer-events-none absolute inset-0 rounded-[60px] bg-gradient-to-r from-ma-glow-blue to-ma-glow-violet opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
               </button>
             </form>
 

From 4c60662c91cfbaf3d04ca5a4e52723cbb3444a3d Mon Sep 17 00:00:00 2001
From: Obinna Anosike <smartlify09@gmail.com>
Date: Tue, 30 Jun 2026 23:49:19 +0100
Subject: [PATCH 16/29] feat: add muted hover background to course cards

---
 src/features/marketing/components/courses-hero-section.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/marketing/components/courses-hero-section.tsx b/src/features/marketing/components/courses-hero-section.tsx
index 788b827..d184783 100644
--- a/src/features/marketing/components/courses-hero-section.tsx
+++ b/src/features/marketing/components/courses-hero-section.tsx
@@ -24,7 +24,7 @@ function CourseCard({ course }: { course: Course }) {
   return (
     <Link
       href={`/courses/${course.id}`}
-      className="flex w-full flex-col gap-5 rounded-[24px] border border-[#d9d9d9] bg-white px-2.5 pt-2.5 pb-7.5 sm:max-w-[334px]"
+      className="flex w-full flex-col gap-5 rounded-[24px] border border-[#d9d9d9] bg-white px-2.5 pt-2.5 pb-7.5 transition-colors duration-300 hover:bg-gray-50 sm:max-w-[334px]"
     >
       <div className="relative h-[254px] overflow-hidden rounded-[24px]">
         {course.thumbnailUrl ? (

From a1a0d49b40d9224043f0ce98855b6823161ec781 Mon Sep 17 00:00:00 2001
From: Obinna Anosike <smartlify09@gmail.com>
Date: Tue, 30 Jun 2026 23:50:52 +0100
Subject: [PATCH 17/29] feat: add gradient overlay and arrow rotation to enroll
 button

---
 .../components/course-detail-hero-section.tsx         | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/features/marketing/components/course-detail-hero-section.tsx b/src/features/marketing/components/course-detail-hero-section.tsx
index 24df755..c3a9444 100644
--- a/src/features/marketing/components/course-detail-hero-section.tsx
+++ b/src/features/marketing/components/course-detail-hero-section.tsx
@@ -79,11 +79,14 @@ export function CourseDetailHeroSection() {
 
             <Button
               asChild
-              className="mt-3 h-[53px] w-full gap-2.5 rounded-[60px] bg-ma-text px-5 py-4 text-base font-semibold text-white hover:bg-ma-text/90"
+              className="group relative mt-3 overflow-hidden rounded-[60px]"
             >
-              <Link href="/signup">
-                Enroll Now
-                <ArrowRight className="size-5" aria-hidden="true" />
+              <Link href="/signup" className="flex h-[53px] w-full items-center justify-center gap-2.5 rounded-[60px] bg-ma-text px-5 py-4 text-base font-semibold text-white">
+                <span className="relative z-10 inline-flex items-center gap-2.5">
+                  Enroll Now
+                  <ArrowRight className="size-5 transition-transform duration-300 group-hover:rotate-[-30deg]" aria-hidden="true" />
+                </span>
+                <div className="pointer-events-none absolute inset-0 rounded-[60px] bg-gradient-to-r from-ma-glow-blue to-ma-glow-violet opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
               </Link>
             </Button>
           </div>

From f5a804c6f4b30cd882d073a07e4db53a327d9979 Mon Sep 17 00:00:00 2001
From: Obinna Anosike <smartlify09@gmail.com>
Date: Tue, 30 Jun 2026 23:54:00 +0100
Subject: [PATCH 18/29] feat: add gradient border to enroll button using before
 pseudo-element

---
 .../marketing/components/course-detail-hero-section.tsx    | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/features/marketing/components/course-detail-hero-section.tsx b/src/features/marketing/components/course-detail-hero-section.tsx
index c3a9444..f6cfd2d 100644
--- a/src/features/marketing/components/course-detail-hero-section.tsx
+++ b/src/features/marketing/components/course-detail-hero-section.tsx
@@ -79,9 +79,12 @@ export function CourseDetailHeroSection() {
 
             <Button
               asChild
-              className="group relative mt-3 overflow-hidden rounded-[60px]"
+              className="group relative mt-3"
             >
-              <Link href="/signup" className="flex h-[53px] w-full items-center justify-center gap-2.5 rounded-[60px] bg-ma-text px-5 py-4 text-base font-semibold text-white">
+              <Link
+                href="/signup"
+                className="relative flex h-[53px] w-full items-center justify-center gap-2.5 rounded-[60px] bg-ma-text px-5 py-4 text-base font-semibold text-white before:absolute before:-inset-[2px] before:rounded-[60px] before:bg-gradient-to-r before:from-ma-glow-blue before:to-ma-glow-violet before:-z-10"
+              >
                 <span className="relative z-10 inline-flex items-center gap-2.5">
                   Enroll Now
                   <ArrowRight className="size-5 transition-transform duration-300 group-hover:rotate-[-30deg]" aria-hidden="true" />

From d0709b0653a69a30a5d297c43dca67905dbe5ce3 Mon Sep 17 00:00:00 2001
From: Obinna Anosike <smartlify09@gmail.com>
Date: Tue, 30 Jun 2026 23:56:56 +0100
Subject: [PATCH 19/29] fix: revert hero enroll button; add gradient border to
 content section enroll button

---
 .../components/course-detail-content-section.tsx  | 15 ++++++++++-----
 .../components/course-detail-hero-section.tsx     |  7 ++-----
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/features/marketing/components/course-detail-content-section.tsx b/src/features/marketing/components/course-detail-content-section.tsx
index 7f9bdc7..82c563b 100644
--- a/src/features/marketing/components/course-detail-content-section.tsx
+++ b/src/features/marketing/components/course-detail-content-section.tsx
@@ -217,12 +217,17 @@ function CourseInformationCard() {
 
         <Button
           asChild
-          variant="outline"
-          className="mt-6 h-[53px] w-full gap-2.5 rounded-[60px] border-[#e5e7eb] bg-white px-5 py-4 text-base font-semibold text-ma-text hover:bg-[#f5f5f5]"
+          className="group relative mt-6"
         >
-          <Link href="/signup">
-            Enroll Now
-            <ArrowRight className="size-5" aria-hidden="true" />
+          <Link
+            href="/signup"
+            className="relative flex h-[53px] w-full items-center justify-center gap-2.5 rounded-[60px] bg-white px-5 py-4 text-base font-semibold text-ma-text before:absolute before:-inset-[2px] before:rounded-[60px] before:bg-gradient-to-r before:from-ma-glow-blue before:to-ma-glow-violet before:-z-10"
+          >
+            <span className="relative z-10 inline-flex items-center gap-2.5">
+              Enroll Now
+              <ArrowRight className="size-5 transition-transform duration-300 group-hover:rotate-[-30deg]" aria-hidden="true" />
+            </span>
+            <div className="pointer-events-none absolute inset-0 rounded-[60px] bg-gradient-to-r from-ma-glow-blue to-ma-glow-violet opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
           </Link>
         </Button>
       </div>
diff --git a/src/features/marketing/components/course-detail-hero-section.tsx b/src/features/marketing/components/course-detail-hero-section.tsx
index f6cfd2d..c3a9444 100644
--- a/src/features/marketing/components/course-detail-hero-section.tsx
+++ b/src/features/marketing/components/course-detail-hero-section.tsx
@@ -79,12 +79,9 @@ export function CourseDetailHeroSection() {
 
             <Button
               asChild
-              className="group relative mt-3"
+              className="group relative mt-3 overflow-hidden rounded-[60px]"
             >
-              <Link
-                href="/signup"
-                className="relative flex h-[53px] w-full items-center justify-center gap-2.5 rounded-[60px] bg-ma-text px-5 py-4 text-base font-semibold text-white before:absolute before:-inset-[2px] before:rounded-[60px] before:bg-gradient-to-r before:from-ma-glow-blue before:to-ma-glow-violet before:-z-10"
-              >
+              <Link href="/signup" className="flex h-[53px] w-full items-center justify-center gap-2.5 rounded-[60px] bg-ma-text px-5 py-4 text-base font-semibold text-white">
                 <span className="relative z-10 inline-flex items-center gap-2.5">
                   Enroll Now
                   <ArrowRight className="size-5 transition-transform duration-300 group-hover:rotate-[-30deg]" aria-hidden="true" />

From 8758cb7b7f17b659f3da6e7ec711bb7676a6e632 Mon Sep 17 00:00:00 2001
From: Obinna Anosike <smartlify09@gmail.com>
Date: Wed, 1 Jul 2026 00:01:29 +0100
Subject: [PATCH 20/29] fix: gradient border only visible on hover, white bg +
 primary text + border by default

---
 .../components/course-detail-content-section.tsx         | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/features/marketing/components/course-detail-content-section.tsx b/src/features/marketing/components/course-detail-content-section.tsx
index 82c563b..0584a91 100644
--- a/src/features/marketing/components/course-detail-content-section.tsx
+++ b/src/features/marketing/components/course-detail-content-section.tsx
@@ -221,13 +221,10 @@ function CourseInformationCard() {
         >
           <Link
             href="/signup"
-            className="relative flex h-[53px] w-full items-center justify-center gap-2.5 rounded-[60px] bg-white px-5 py-4 text-base font-semibold text-ma-text before:absolute before:-inset-[2px] before:rounded-[60px] before:bg-gradient-to-r before:from-ma-glow-blue before:to-ma-glow-violet before:-z-10"
+            className="relative flex h-[53px] w-full items-center justify-center gap-2.5 rounded-[60px] border border-[#e5e7eb] bg-white px-5 py-4 text-base font-semibold text-ma-text transition-colors duration-300 before:absolute before:-inset-[2px] before:rounded-[60px] before:bg-gradient-to-r before:from-ma-glow-blue before:to-ma-glow-violet before:-z-10 before:opacity-0 before:transition-opacity before:duration-300 group-hover:border-transparent group-hover:before:opacity-100"
           >
-            <span className="relative z-10 inline-flex items-center gap-2.5">
-              Enroll Now
-              <ArrowRight className="size-5 transition-transform duration-300 group-hover:rotate-[-30deg]" aria-hidden="true" />
-            </span>
-            <div className="pointer-events-none absolute inset-0 rounded-[60px] bg-gradient-to-r from-ma-glow-blue to-ma-glow-violet opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
+            Enroll Now
+            <ArrowRight className="size-5 transition-transform duration-300 group-hover:rotate-[-30deg]" aria-hidden="true" />
           </Link>
         </Button>
       </div>

From 39fbc85dc10ed37453c5da8d282b0ff1e0ad481d Mon Sep 17 00:00:00 2001
From: Obinna Anosike <smartlify09@gmail.com>
Date: Wed, 1 Jul 2026 00:07:21 +0100
Subject: [PATCH 21/29] fix: add variant outline and isolate to fix text
 visibility and z-index stacking

---
 .../marketing/components/course-detail-content-section.tsx     | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/features/marketing/components/course-detail-content-section.tsx b/src/features/marketing/components/course-detail-content-section.tsx
index 0584a91..7ab2fcd 100644
--- a/src/features/marketing/components/course-detail-content-section.tsx
+++ b/src/features/marketing/components/course-detail-content-section.tsx
@@ -217,11 +217,12 @@ function CourseInformationCard() {
 
         <Button
           asChild
+          variant="outline"
           className="group relative mt-6"
         >
           <Link
             href="/signup"
-            className="relative flex h-[53px] w-full items-center justify-center gap-2.5 rounded-[60px] border border-[#e5e7eb] bg-white px-5 py-4 text-base font-semibold text-ma-text transition-colors duration-300 before:absolute before:-inset-[2px] before:rounded-[60px] before:bg-gradient-to-r before:from-ma-glow-blue before:to-ma-glow-violet before:-z-10 before:opacity-0 before:transition-opacity before:duration-300 group-hover:border-transparent group-hover:before:opacity-100"
+            className="relative isolate flex h-[53px] w-full items-center justify-center gap-2.5 rounded-[60px] border border-[#e5e7eb] bg-white px-5 py-4 text-base font-semibold text-ma-text transition-colors duration-300 before:absolute before:-inset-[2px] before:rounded-[60px] before:bg-gradient-to-r before:from-ma-glow-blue before:to-ma-glow-violet before:z-[-1] before:opacity-0 before:transition-opacity before:duration-300 group-hover:border-transparent group-hover:before:opacity-100"
           >
             Enroll Now
             <ArrowRight className="size-5 transition-transform duration-300 group-hover:rotate-[-30deg]" aria-hidden="true" />

From 3f4290f95f19f8b6c8c5b718349939a4b262df4b Mon Sep 17 00:00:00 2001
From: Obinna Anosike <smartlify09@gmail.com>
Date: Wed, 1 Jul 2026 00:10:08 +0100
Subject: [PATCH 22/29] fix: make Button background transparent so before
 gradient border is visible

---
 .../marketing/components/course-detail-content-section.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/marketing/components/course-detail-content-section.tsx b/src/features/marketing/components/course-detail-content-section.tsx
index 7ab2fcd..5d8c110 100644
--- a/src/features/marketing/components/course-detail-content-section.tsx
+++ b/src/features/marketing/components/course-detail-content-section.tsx
@@ -218,7 +218,7 @@ function CourseInformationCard() {
         <Button
           asChild
           variant="outline"
-          className="group relative mt-6"
+          className="group relative mt-6 bg-transparent"
         >
           <Link
             href="/signup"

From 2cc3e1cc6204c0a73c91f53f55028be2da84df58 Mon Sep 17 00:00:00 2001
From: Obinna Anosike <smartlify09@gmail.com>
Date: Wed, 1 Jul 2026 00:12:46 +0100
Subject: [PATCH 23/29] fix: use wrapper pattern for gradient border on enroll
 button

---
 .../course-detail-content-section.tsx         | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/features/marketing/components/course-detail-content-section.tsx b/src/features/marketing/components/course-detail-content-section.tsx
index 5d8c110..7149310 100644
--- a/src/features/marketing/components/course-detail-content-section.tsx
+++ b/src/features/marketing/components/course-detail-content-section.tsx
@@ -215,19 +215,19 @@ function CourseInformationCard() {
           </div>
         ))}
 
-        <Button
-          asChild
-          variant="outline"
-          className="group relative mt-6 bg-transparent"
-        >
-          <Link
-            href="/signup"
-            className="relative isolate flex h-[53px] w-full items-center justify-center gap-2.5 rounded-[60px] border border-[#e5e7eb] bg-white px-5 py-4 text-base font-semibold text-ma-text transition-colors duration-300 before:absolute before:-inset-[2px] before:rounded-[60px] before:bg-gradient-to-r before:from-ma-glow-blue before:to-ma-glow-violet before:z-[-1] before:opacity-0 before:transition-opacity before:duration-300 group-hover:border-transparent group-hover:before:opacity-100"
-          >
-            Enroll Now
-            <ArrowRight className="size-5 transition-transform duration-300 group-hover:rotate-[-30deg]" aria-hidden="true" />
-          </Link>
-        </Button>
+        <div className="group relative mt-6">
+          <div className="rounded-[60px] bg-gradient-to-r from-ma-glow-blue to-ma-glow-violet p-[2px] opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+            <Button asChild className="w-full">
+              <Link
+                href="/signup"
+                className="flex h-[53px] w-full items-center justify-center gap-2.5 rounded-[60px] border border-[#e5e7eb] bg-white px-5 py-4 text-base font-semibold text-ma-text transition-colors duration-300 group-hover:border-transparent"
+              >
+                Enroll Now
+                <ArrowRight className="size-5 transition-transform duration-300 group-hover:rotate-[-30deg]" aria-hidden="true" />
+              </Link>
+            </Button>
+          </div>
+        </div>
       </div>
     </aside>
   )

From 91f17c972371c18deeb234fa5df672d36beee8c5 Mon Sep 17 00:00:00 2001
From: Obinna Anosike <smartlify09@gmail.com>
Date: Wed, 1 Jul 2026 00:56:08 +0100
Subject: [PATCH 24/29] feat: add accordion transitions to course modules,
 gradient hover to contact/donation buttons, and polish

---
 .../components/contact-hero-section.tsx       |   9 +-
 .../course-detail-content-section.tsx         | 198 +++++++++++++-----
 .../marketing/components/cta-section.tsx      |   7 +-
 .../components/donation-support-section.tsx   |   9 +-
 src/features/marketing/components/footer.tsx  |   7 +-
 .../marketing/components/hero-section.tsx     |   3 +-
 .../marketing/components/testimonials.tsx     |   2 +-
 7 files changed, 175 insertions(+), 60 deletions(-)

diff --git a/src/features/marketing/components/contact-hero-section.tsx b/src/features/marketing/components/contact-hero-section.tsx
index 757a470..4b7175d 100644
--- a/src/features/marketing/components/contact-hero-section.tsx
+++ b/src/features/marketing/components/contact-hero-section.tsx
@@ -167,10 +167,13 @@ export function ContactHeroSection() {
 
             <Button
               type="button"
-              className="mt-1 h-[53px] w-full gap-2.5 rounded-[60px] bg-ma-text px-5 py-4 text-base font-semibold text-white hover:bg-ma-text/90"
+              className="group relative mt-1 h-[53px] w-full overflow-hidden rounded-[60px] bg-ma-text px-5 py-4 text-base font-semibold text-white"
             >
-              Send your message
-              <ArrowRight className="size-5" aria-hidden="true" />
+              <span className="relative z-10 inline-flex items-center gap-2.5">
+                Send your message
+                <ArrowRight className="size-5 transition-transform duration-300 group-hover:rotate-[-30deg]" aria-hidden="true" />
+              </span>
+              <div className="pointer-events-none absolute inset-0 rounded-[60px] bg-gradient-to-r from-ma-glow-blue to-ma-glow-violet opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
             </Button>
           </FieldGroup>
         </form>
diff --git a/src/features/marketing/components/course-detail-content-section.tsx b/src/features/marketing/components/course-detail-content-section.tsx
index 7149310..1c89416 100644
--- a/src/features/marketing/components/course-detail-content-section.tsx
+++ b/src/features/marketing/components/course-detail-content-section.tsx
@@ -1,9 +1,10 @@
+"use client"
+
 import Image from "next/image"
 import Link from "next/link"
 import {
   ArrowRight,
   ChevronDown,
-  ChevronUp,
   Clock,
   Languages,
   Layers,
@@ -11,6 +12,7 @@ import {
   Star,
   User,
 } from "lucide-react"
+import { useState } from "react"
 
 import { Button } from "@/shared/ui/button"
 
@@ -28,17 +30,105 @@ const modules = [
       "Beginner-friendly digital business models",
     ],
   },
-  { title: "Week 2: AI Productivity & Prompting" },
-  { title: "Week 3: Business Validation & Fast Monetization Planning" },
-  { title: "Week 4: Branding & Digital Presence" },
-  { title: "Week 5: Product & Service Creation" },
-  { title: "Week 6: Marketing & Public Launch" },
-  { title: "Week 7: Client Acquisition & Sales Systems" },
-  { title: "Week 8: Revenue Optimization & Sustainability" },
-  { title: "Week 9: Automation & Efficiency" },
-  { title: "Week 10: Portfolio & Authority Building" },
-  { title: "Week 11: Scaling Small Businesses" },
-  { title: "Week 12: Demo Day & Graduation" },
+  {
+    title: "Week 2: AI Productivity & Prompting",
+    topics: [
+      "Crafting effective AI prompts",
+      "Automating daily workflows with AI",
+      "AI tools for task management",
+      "Integrating AI into existing tools",
+    ],
+  },
+  {
+    title: "Week 3: Business Validation & Fast Monetization Planning",
+    topics: [
+      "Identifying market problems & opportunities",
+      "Lean validation techniques",
+      "Fast monetization strategies",
+      "Building a minimum viable offer",
+    ],
+  },
+  {
+    title: "Week 4: Branding & Digital Presence",
+    topics: [
+      "Defining your brand identity",
+      "Building a simple website",
+      "Social media positioning",
+      "Content creation fundamentals",
+    ],
+  },
+  {
+    title: "Week 5: Product & Service Creation",
+    topics: [
+      "Designing digital products",
+      "Service packaging and pricing",
+      "AI-assisted product development",
+      "Testing and iterating your offer",
+    ],
+  },
+  {
+    title: "Week 6: Marketing & Public Launch",
+    topics: [
+      "Launch campaign planning",
+      "Organic marketing channels",
+      "Paid advertising basics",
+      "Building launch momentum",
+    ],
+  },
+  {
+    title: "Week 7: Client Acquisition & Sales Systems",
+    topics: [
+      "Sales funnel fundamentals",
+      "Lead generation strategies",
+      "CRM and follow-up systems",
+      "Closing techniques for beginners",
+    ],
+  },
+  {
+    title: "Week 8: Revenue Optimization & Sustainability",
+    topics: [
+      "Pricing strategy refinement",
+      "Upselling and cross-selling",
+      "Customer retention tactics",
+      "Financial management basics",
+    ],
+  },
+  {
+    title: "Week 9: Automation & Efficiency",
+    topics: [
+      "Workflow automation tools",
+      "AI chatbots for customer support",
+      "Email marketing automation",
+      "Analytics and performance tracking",
+    ],
+  },
+  {
+    title: "Week 10: Portfolio & Authority Building",
+    topics: [
+      "Creating a professional portfolio",
+      "Publishing thought leadership content",
+      "Speaking and networking opportunities",
+      "Building social proof",
+    ],
+  },
+  {
+    title: "Week 11: Scaling Small Businesses",
+    topics: [
+      "Hiring and delegation basics",
+      "Systems and SOPs for growth",
+      "Expanding product lines",
+      "Partnership and collaboration strategies",
+    ],
+  },
+  {
+    title: "Week 12: Demo Day & Graduation",
+    topics: [
+      "Presenting your business pitch",
+      "Demo day preparation",
+      "Graduation and next steps",
+      "Community and alumni network",
+    ],
+  },
 ]
 
 const reviews = [
@@ -66,51 +156,62 @@ const courseInformation = [
 function CourseModule({
   title,
   topics,
-  open = false,
+  open: defaultOpen = false,
 }: {
   title: string
   topics?: string[]
   open?: boolean
 }) {
+  const [open, setOpen] = useState(defaultOpen)
+
   return (
-    <details
-      open={open}
-      className="group rounded-2xl border border-[#d9d9d9] bg-white px-5 pt-[17px] pb-5 open:bg-[#f5f5f5]"
+    <div
+      className={`rounded-2xl border border-[#d9d9d9] px-5 pt-[17px] pb-5 transition-colors ${
+        open ? "bg-[#f5f5f5]" : "bg-white"
+      }`}
     >
-      <summary className="flex cursor-pointer list-none items-center justify-between gap-4 [&::-webkit-details-marker]:hidden">
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        className="flex w-full cursor-pointer items-center justify-between gap-4 text-left"
+      >
         <h3 className="text-sm/[100%] leading-normal font-bold text-ma-text sm:text-base">
           {title}
         </h3>
         <span className="inline-flex size-7 shrink-0 items-center justify-center rounded-[15px] border border-[#d9d9d9] bg-white">
           <ChevronDown
-            className="size-3.5 group-open:hidden"
-            aria-hidden="true"
-          />
-          <ChevronUp
-            className="hidden size-3.5 group-open:block"
+            className={`size-3.5 transition-transform duration-600 ${
+              open ? "rotate-180" : ""
+            }`}
             aria-hidden="true"
           />
         </span>
-      </summary>
+      </button>
 
-      {topics ? (
-        <div className="mt-4 text-sm leading-normal text-ma-text sm:text-[15px]">
-          <p>Topics:</p>
-          <ul className="list-disc pl-5">
-            {topics.map((topic) => (
-              <li key={topic}>{topic}</li>
-            ))}
-          </ul>
-        </div>
-      ) : null}
-    </details>
+      <div
+        className={`overflow-hidden transition-all duration-300 ${
+          open ? "max-h-[500px] opacity-100" : "max-h-0 opacity-0"
+        }`}
+      >
+        {topics ? (
+          <div className="mt-4 text-sm leading-normal text-ma-text sm:text-[15px]">
+            <p>Topics:</p>
+            <ul className="list-disc pl-5">
+              {topics.map((topic) => (
+                <li key={topic}>{topic}</li>
+              ))}
+            </ul>
+          </div>
+        ) : null}
+      </div>
+    </div>
   )
 }
 
 function TutorCard() {
   return (
-    <article className="flex gap-5 rounded-2xl bg-[#f5f5f5] p-4 sm:flex-row lg:flex-col">
-      <div className="relative h-[190px] min-w-[106px] shrink-0 overflow-hidden rounded-[10px] sm:w-[190px] lg:w-full">
+    <article className="flex gap-5 rounded-2xl bg-[#f5f5f5] p-4">
+      <div className="relative h-[190px] min-w-[106px] shrink-0 overflow-hidden rounded-[10px] sm:w-[190px]">
         <Image
           src="/figma-courses/tutor-maxwell.png"
           alt="Mr. Maxwell"
@@ -157,7 +258,7 @@ function ReviewCard({ review }: { review: (typeof reviews)[number] }) {
     <article className="flex flex-col gap-[22px] rounded-2xl border border-[#d9d9d9] p-5">
       <p className="text-[15px] leading-normal text-ma-text">{review.text}</p>
 
-      <div className="flex gap-4 sm:flex-row sm:items-end lg:flex-col">
+      <div className="flex gap-4 sm:flex-row sm:items-end">
         <div className="flex flex-1 items-end gap-2.5">
           <Image
             src={review.image}
@@ -216,17 +317,18 @@ function CourseInformationCard() {
         ))}
 
         <div className="group relative mt-6">
-          <div className="rounded-[60px] bg-gradient-to-r from-ma-glow-blue to-ma-glow-violet p-[2px] opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-            <Button asChild className="w-full">
-              <Link
-                href="/signup"
-                className="flex h-[53px] w-full items-center justify-center gap-2.5 rounded-[60px] border border-[#e5e7eb] bg-white px-5 py-4 text-base font-semibold text-ma-text transition-colors duration-300 group-hover:border-transparent"
-              >
-                Enroll Now
-                <ArrowRight className="size-5 transition-transform duration-300 group-hover:rotate-[-30deg]" aria-hidden="true" />
-              </Link>
-            </Button>
-          </div>
+          <Button asChild className="w-full rounded-[60px]" variant={"outline"}>
+            <Link
+              href="/signup"
+              className="flex h-[53px] w-full items-center justify-center gap-2.5 rounded-[60px] border border-[#e5e7eb] bg-white px-5 py-4 text-base font-semibold text-primary transition-colors duration-300 group-hover:border-transparent group-hover:bg-transparent"
+            >
+              Enroll Now
+              <ArrowRight
+                className="size-5 transition-transform duration-300 group-hover:rotate-[-30deg]"
+                aria-hidden="true"
+              />
+            </Link>
+          </Button>
         </div>
       </div>
     </aside>
diff --git a/src/features/marketing/components/cta-section.tsx b/src/features/marketing/components/cta-section.tsx
index d701ea2..89316d7 100644
--- a/src/features/marketing/components/cta-section.tsx
+++ b/src/features/marketing/components/cta-section.tsx
@@ -17,10 +17,13 @@ export function CtaSection() {
           <div className="mt-12.5 flex flex-col items-center justify-center gap-5 sm:flex-row lg:mt-13">
             <Link
               href="/contact"
-              className="group inline-flex items-center justify-center gap-2.5 rounded-[60px] bg-[linear-gradient(90deg,#4f7cf7_0%,#7b5cff_68.269%)] px-5 py-4 text-center text-base font-semibold text-white transition-opacity hover:opacity-90"
+              className="group inline-flex items-center justify-center gap-2.5 rounded-[60px] bg-[linear-gradient(90deg,#4f7cf7_0%,#7b5cff_68.269%)] px-5 py-4 text-center text-base font-semibold text-white transition-opacity"
             >
               Book a free consultation
-              <ArrowRight className="size-5 transition-transform duration-300 group-hover:rotate-[-30deg]" aria-hidden="true" />
+              <ArrowRight
+                className="size-5 transition-transform duration-300 group-hover:rotate-[-30deg]"
+                aria-hidden="true"
+              />
             </Link>
           </div>
         </div>
diff --git a/src/features/marketing/components/donation-support-section.tsx b/src/features/marketing/components/donation-support-section.tsx
index 13a453b..965b70f 100644
--- a/src/features/marketing/components/donation-support-section.tsx
+++ b/src/features/marketing/components/donation-support-section.tsx
@@ -122,10 +122,13 @@ export function DonationSupportSection() {
 
           <Button
             type="button"
-            className="h-[53px] w-full gap-2.5 rounded-[60px] bg-ma-text px-5 py-4 text-base font-semibold text-white hover:bg-ma-text/90"
+            className="group relative h-[53px] w-full overflow-hidden rounded-[60px] bg-ma-text px-5 py-4 text-base font-semibold text-white"
           >
-            Donate Now
-            <ArrowRight className="size-5" aria-hidden="true" />
+            <span className="relative z-10 inline-flex items-center gap-2.5">
+              Donate Now
+              <ArrowRight className="size-5 transition-transform duration-300 group-hover:rotate-[-30deg]" aria-hidden="true" />
+            </span>
+            <div className="pointer-events-none absolute inset-0 rounded-[60px] bg-gradient-to-r from-ma-glow-blue to-ma-glow-violet opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
           </Button>
         </form>
       </div>
diff --git a/src/features/marketing/components/footer.tsx b/src/features/marketing/components/footer.tsx
index 16e41b0..b7b0f95 100644
--- a/src/features/marketing/components/footer.tsx
+++ b/src/features/marketing/components/footer.tsx
@@ -80,11 +80,14 @@ export function Footer() {
               />
               <button
                 type="submit"
-                className="group relative inline-flex items-center justify-center gap-2 overflow-hidden rounded-[60px] bg-ma-text px-[15px] py-3 text-[12.31px] font-semibold text-white transition-transform duration-300 hover:scale-[1.5]"
+                className="group relative inline-flex items-center justify-center gap-2 overflow-hidden rounded-[60px] bg-ma-text px-[15px] py-3 text-[12.31px] font-semibold text-white transition-transform duration-300 hover:scale-[1.1]"
               >
                 <span className="relative z-10 inline-flex items-center gap-2">
                   Join
-                  <ArrowRight className="size-[15px] transition-transform duration-300 group-hover:rotate-[-30deg]" aria-hidden="true" />
+                  <ArrowRight
+                    className="size-[15px] transition-transform duration-300 group-hover:rotate-[-30deg]"
+                    aria-hidden="true"
+                  />
                 </span>
                 <div className="pointer-events-none absolute inset-0 rounded-[60px] bg-gradient-to-r from-ma-glow-blue to-ma-glow-violet opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
               </button>
diff --git a/src/features/marketing/components/hero-section.tsx b/src/features/marketing/components/hero-section.tsx
index e7897f0..73b4008 100644
--- a/src/features/marketing/components/hero-section.tsx
+++ b/src/features/marketing/components/hero-section.tsx
@@ -88,7 +88,8 @@ export function HeroSection() {
           <motion.div
             initial={{ scale: 700 / 1024 }}
             whileInView={{ scale: 1 }}
-            viewport={{ once: true }}
+            transition={{ duration: 0.8 }}
+            // viewport={{ once: true }}
           >
             <div className="relative h-[280px] overflow-hidden rounded-[20px] bg-ma-bg lg:h-[560px]">
               <Image
diff --git a/src/features/marketing/components/testimonials.tsx b/src/features/marketing/components/testimonials.tsx
index d20e95a..8ea861c 100644
--- a/src/features/marketing/components/testimonials.tsx
+++ b/src/features/marketing/components/testimonials.tsx
@@ -70,7 +70,7 @@ export function Testimonials() {
 
       <div
         ref={scrollRef}
-        className="relative mt-[86px] flex gap-[30px] overflow-x-hidden px-4 pb-2 xl:px-25 2xl:pl-50"
+        className="relative mx-auto mt-[86px] flex max-w-[calc(100vw-200px)] gap-[30px] overflow-x-hidden px-4 pb-2 lg:px-0"
       >
         {reviews.map((review) => (
           <article

From dedee60d0ad3cb383a8611096b8adfab3f7f7e43 Mon Sep 17 00:00:00 2001
From: Obinna Anosike <smartlify09@gmail.com>
Date: Wed, 1 Jul 2026 01:27:46 +0100
Subject: [PATCH 25/29] feat: restrict mission hover interaction to large
 screens only

---
 .../marketing/components/mission-sections.tsx | 35 ++++++++++++++-----
 .../marketing/components/testimonials.tsx     |  4 +--
 2 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/src/features/marketing/components/mission-sections.tsx b/src/features/marketing/components/mission-sections.tsx
index d8c33a2..7c7fb60 100644
--- a/src/features/marketing/components/mission-sections.tsx
+++ b/src/features/marketing/components/mission-sections.tsx
@@ -2,10 +2,29 @@
 
 import { Gift } from "lucide-react"
 import Image from "next/image"
-import { useState } from "react"
+import { useEffect, useState } from "react"
 
 export function MissionBridgeSection() {
   const [hovered, setHovered] = useState<"first" | "second" | null>(null)
+  const [isLargeScreen, setIsLargeScreen] = useState(false)
+
+  useEffect(() => {
+    const mq = window.matchMedia("(min-width: 1024px)")
+    setIsLargeScreen(mq.matches)
+    const handler = (e: MediaQueryListEvent) => setIsLargeScreen(e.matches)
+    mq.addEventListener("change", handler)
+    return () => mq.removeEventListener("change", handler)
+  }, [])
+
+  function onHover(card: "first" | "second") {
+    if (!isLargeScreen) return
+    setHovered(card)
+  }
+
+  function onLeave() {
+    if (!isLargeScreen) return
+    setHovered(null)
+  }
 
   return (
     <section
@@ -47,8 +66,8 @@ export function MissionBridgeSection() {
         }}
       >
         <div
-          onMouseEnter={() => setHovered("first")}
-          onMouseLeave={() => setHovered(null)}
+          onMouseEnter={() => onHover("first")}
+          onMouseLeave={onLeave}
           className="flex flex-col gap-5 rounded-2xl bg-white p-5 sm:flex-row"
         >
           <div className="flex flex-col justify-between gap-2.5 sm:min-h-79.5 sm:gap-0">
@@ -69,7 +88,7 @@ export function MissionBridgeSection() {
           </div>
 
           <div
-            className={`shrink-0 overflow-hidden rounded-2xl transition-all duration-500 ${
+            className={`shrink-0 overflow-hidden rounded-2xl transition-all duration-500 max-lg:hidden ${
               hovered === "second" ? "w-0 min-w-0" : "w-[292px]"
             }`}
           >
@@ -85,8 +104,8 @@ export function MissionBridgeSection() {
         </div>
 
         <div
-          onMouseEnter={() => setHovered("second")}
-          onMouseLeave={() => setHovered(null)}
+          onMouseEnter={() => onHover("second")}
+          onMouseLeave={onLeave}
           className="flex gap-5 rounded-2xl bg-white p-5 sm:flex"
         >
           <div className="flex min-w-0 flex-col justify-between gap-2.5 sm:min-h-79.5">
@@ -107,8 +126,8 @@ export function MissionBridgeSection() {
           </div>
 
           <div
-            className={`shrink-0 overflow-hidden rounded-2xl transition-all duration-500 ${
-              hovered === "second" ? "w-[292px]" : "w-0 min-w-0"
+            className={`shrink-0 overflow-hidden rounded-2xl transition-all duration-500 max-lg:hidden ${
+              hovered === "second" ? "lg:w-[292px]" : "w-0 min-w-0"
             }`}
           >
             <Image
diff --git a/src/features/marketing/components/testimonials.tsx b/src/features/marketing/components/testimonials.tsx
index 8ea861c..1c59cc8 100644
--- a/src/features/marketing/components/testimonials.tsx
+++ b/src/features/marketing/components/testimonials.tsx
@@ -37,7 +37,7 @@ export function Testimonials() {
 
   return (
     <section className="overflow-hidden bg-white py-12.5 lg:py-25">
-      <div className="mx-auto flex flex-col gap-8 px-4 sm:flex-row sm:items-end sm:justify-between xl:px-25 2xl:px-50">
+      <div className="mx-auto flex w-full flex-col gap-8 px-4 sm:flex-row sm:items-end sm:justify-between xl:px-25 2xl:px-50">
         <div>
           <h2 className="font-sans text-[28px]/[100%] font-extrabold text-primary lg:text-[40px] lg:leading-15">
             What they say about us?
@@ -70,7 +70,7 @@ export function Testimonials() {
 
       <div
         ref={scrollRef}
-        className="relative mx-auto mt-[86px] flex max-w-[calc(100vw-200px)] gap-[30px] overflow-x-hidden px-4 pb-2 lg:px-0"
+        className="relative mx-auto mt-[86px] flex gap-[30px] overflow-x-hidden px-4 pb-2 lg:max-w-[calc(100vw-200px)] lg:px-0"
       >
         {reviews.map((review) => (
           <article

From e52454bb678d26e86535b4de4aefab751a712f31 Mon Sep 17 00:00:00 2001
From: Obinna Anosike <smartlify09@gmail.com>
Date: Wed, 1 Jul 2026 14:41:25 +0100
Subject: [PATCH 26/29] feat: add max-width 1440px to all page sections, fix
 testimonials alignment, change FAQ icon rotation to 90deg

---
 .../about-ai-healthcare-section.tsx           |   4 +-
 .../components/about-hero-section.tsx         |   2 +-
 .../components/about-our-values-section.tsx   |  81 ++++---
 .../components/contact-hero-section.tsx       |   7 +-
 .../course-detail-content-section.tsx         |   2 +-
 .../components/course-detail-hero-section.tsx |  12 +-
 .../components/courses-hero-section.tsx       |   4 +-
 .../marketing/components/cta-section.tsx      |   8 +-
 .../components/donation-hero-section.tsx      |   4 +-
 .../components/donation-support-section.tsx   |  11 +-
 src/features/marketing/components/faq.tsx     |  12 +-
 src/features/marketing/components/footer.tsx  |   2 +-
 .../marketing/components/hero-section.tsx     |   6 +-
 .../components/how-can-we-support.tsx         |  77 ++++---
 .../marketing/components/mission-sections.tsx | 197 +++++++++---------
 src/features/marketing/components/navbar.tsx  | 168 +++++++--------
 .../marketing/components/testimonials.tsx     |  66 +++---
 17 files changed, 341 insertions(+), 322 deletions(-)

diff --git a/src/features/marketing/components/about-ai-healthcare-section.tsx b/src/features/marketing/components/about-ai-healthcare-section.tsx
index a1ee3d2..3fedc80 100644
--- a/src/features/marketing/components/about-ai-healthcare-section.tsx
+++ b/src/features/marketing/components/about-ai-healthcare-section.tsx
@@ -9,7 +9,7 @@ const ecosystemItems = [
 export function AboutAiHealthcareSection() {
   return (
     <section className="bg-white py-12.5 text-ma-text sm:py-20">
-      <div className="mx-auto grid items-start gap-10 px-4 lg:grid-cols-[422px_1fr] lg:gap-[50px] lg:px-25 2xl:px-50">
+      <div className="mx-auto grid max-w-360 items-start gap-10 px-4 lg:grid-cols-[422px_1fr] lg:gap-12.5 lg:px-25 2xl:px-50">
         <div className="relative hidden min-h-[360px] overflow-hidden rounded-[24px] bg-ma-bg sm:min-h-[500px] lg:block">
           <Image
             src="/figma-about/healthcare-ai.png"
@@ -21,7 +21,7 @@ export function AboutAiHealthcareSection() {
         </div>
 
         <div className="pt-0 lg:pt-1">
-          <h2 className="max-w-[578px] font-sans text-[28px]/[100%]  lg:tracking-[-5%] font-extrabold text-balance text-ma-text sm:leading-[60px] lg:text-[40px]">
+          <h2 className="max-w-[578px] font-sans text-[28px]/[100%] font-extrabold text-balance text-ma-text sm:leading-[60px] lg:text-[40px] lg:tracking-[-5%]">
             ModernAdvocates is redefining how AI is used in Healthcare
           </h2>
 
diff --git a/src/features/marketing/components/about-hero-section.tsx b/src/features/marketing/components/about-hero-section.tsx
index c6635cb..8da1a3e 100644
--- a/src/features/marketing/components/about-hero-section.tsx
+++ b/src/features/marketing/components/about-hero-section.tsx
@@ -11,7 +11,7 @@ const supporters = [
 export function AboutHeroSection() {
   return (
     <section className="bg-white pt-18 pb-20 text-ma-text sm:pt-24 sm:pb-25">
-      <div className="mx-auto px-4 lg:px-25 2xl:px-50">
+      <div className="mx-auto max-w-360 px-4 lg:px-25 2xl:px-50">
         <div className="mx-auto max-w-200 text-center">
           <p className="text-base leading-normal font-medium tracking-[10%] text-[#6b7280] uppercase">
             About us
diff --git a/src/features/marketing/components/about-our-values-section.tsx b/src/features/marketing/components/about-our-values-section.tsx
index 7b701bf..53dabd4 100644
--- a/src/features/marketing/components/about-our-values-section.tsx
+++ b/src/features/marketing/components/about-our-values-section.tsx
@@ -6,50 +6,49 @@ import React from "react"
 
 const AboutOurValuesSection = () => {
   return (
-    <section
-      id="about"
-      className="bg-white px-4 py-12.5 sm:py-24 lg:py-25 xl:px-25 2xl:px-50"
-    >
-      <p className="mb-5 text-center text-sm leading-normal font-medium tracking-[10%] text-[#6b7280] uppercase sm:text-base">
-        OUR VALUES{" "}
-      </p>
-      <div className="mx-auto text-center">
-        <h2 className="mx-auto max-w-160 text-center font-sans text-[28px]/[100%] font-extrabold text-ma-text sm:text-5xl lg:text-[40px]">
-          How can we support your healthcare journey?{" "}
-        </h2>
-      </div>
-
-      <div className="mx-auto mt-10 max-w-3xl space-y-5 text-center text-base text-ma-text lg:text-lg">
-        <p>
-          ModernAdvocates creates a continuous learning system that improves
-          outcomes while expanding access to support.
+    <section id="about" className="bg-white py-12.5 sm:py-24 lg:py-25">
+      <div className="mx-auto max-w-360 px-4 xl:px-25 2xl:px-50">
+        <p className="mb-5 text-center text-sm leading-normal font-medium tracking-[10%] text-[#6b7280] uppercase sm:text-base">
+          OUR VALUES{" "}
         </p>
-      </div>
+        <div className="mx-auto text-center">
+          <h2 className="mx-auto max-w-160 text-center font-sans text-[28px]/[100%] font-extrabold text-ma-text sm:text-5xl lg:text-[40px]">
+            How can we support your healthcare journey?{" "}
+          </h2>
+        </div>
 
-      <div className="mx-auto mt-15.5 grid gap-4 rounded-2xl bg-[#f5f5f5] p-4">
-        <div className="grid gap-4 lg:grid-cols-2">
-          <SupportCard
-            title="Card Title"
-            description="We create distinctive brand identities that communicate your values clearly and build strong connections with your audience."
-          />
-          <SupportCard
-            title="Card Title"
-            description="We create distinctive brand identities that communicate your values clearly and build strong connections with your audience."
-          />{" "}
+        <div className="mx-auto mt-10 max-w-3xl space-y-5 text-center text-base text-ma-text lg:text-lg">
+          <p>
+            ModernAdvocates creates a continuous learning system that improves
+            outcomes while expanding access to support.
+          </p>
         </div>
-        <div className="grid gap-4 lg:grid-cols-3">
-          <SupportCard
-            title="Card Title"
-            description="We create distinctive brand identities that communicate your values clearly and build strong connections with your audience."
-          />
-          <SupportCard
-            title="Card Title"
-            description="We create distinctive brand identities that communicate your values clearly and build strong connections with your audience."
-          />
-          <SupportCard
-            title="Card Title"
-            description="We create distinctive brand identities that communicate your values clearly and build strong connections with your audience."
-          />
+
+        <div className="mx-auto mt-15.5 grid gap-4 rounded-2xl bg-[#f5f5f5] p-4">
+          <div className="grid gap-4 lg:grid-cols-2">
+            <SupportCard
+              title="Card Title"
+              description="We create distinctive brand identities that communicate your values clearly and build strong connections with your audience."
+            />
+            <SupportCard
+              title="Card Title"
+              description="We create distinctive brand identities that communicate your values clearly and build strong connections with your audience."
+            />{" "}
+          </div>
+          <div className="grid gap-4 lg:grid-cols-3">
+            <SupportCard
+              title="Card Title"
+              description="We create distinctive brand identities that communicate your values clearly and build strong connections with your audience."
+            />
+            <SupportCard
+              title="Card Title"
+              description="We create distinctive brand identities that communicate your values clearly and build strong connections with your audience."
+            />
+            <SupportCard
+              title="Card Title"
+              description="We create distinctive brand identities that communicate your values clearly and build strong connections with your audience."
+            />
+          </div>
         </div>
       </div>
     </section>
diff --git a/src/features/marketing/components/contact-hero-section.tsx b/src/features/marketing/components/contact-hero-section.tsx
index 4b7175d..7e7fac5 100644
--- a/src/features/marketing/components/contact-hero-section.tsx
+++ b/src/features/marketing/components/contact-hero-section.tsx
@@ -32,7 +32,7 @@ export function ContactHeroSection() {
       id="contact"
       className="bg-white py-12.5 text-ma-text sm:py-25 lg:py-20"
     >
-      <div className="mx-auto grid items-start gap-14 px-4 lg:grid-cols-[444px_1fr] lg:gap-[88px] lg:px-25 2xl:px-50">
+      <div className="mx-auto grid max-w-360 items-start gap-14 px-4 lg:grid-cols-[444px_1fr] lg:gap-[88px] lg:px-25 2xl:px-50">
         <div className="flex flex-col gap-10">
           <div className="flex flex-col gap-5 lg:gap-[30px]">
             <p className="text-base leading-normal font-medium tracking-[0.1em] text-[#6b7280] uppercase">
@@ -171,7 +171,10 @@ export function ContactHeroSection() {
             >
               <span className="relative z-10 inline-flex items-center gap-2.5">
                 Send your message
-                <ArrowRight className="size-5 transition-transform duration-300 group-hover:rotate-[-30deg]" aria-hidden="true" />
+                <ArrowRight
+                  className="size-5 transition-transform duration-300 group-hover:rotate-[-30deg]"
+                  aria-hidden="true"
+                />
               </span>
               <div className="pointer-events-none absolute inset-0 rounded-[60px] bg-gradient-to-r from-ma-glow-blue to-ma-glow-violet opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
             </Button>
diff --git a/src/features/marketing/components/course-detail-content-section.tsx b/src/features/marketing/components/course-detail-content-section.tsx
index 1c89416..b5c68ee 100644
--- a/src/features/marketing/components/course-detail-content-section.tsx
+++ b/src/features/marketing/components/course-detail-content-section.tsx
@@ -338,7 +338,7 @@ function CourseInformationCard() {
 export function CourseDetailContentSection() {
   return (
     <section className="bg-white py-10 text-ma-text lg:py-20">
-      <div className="mx-auto flex flex-col-reverse gap-12 px-4 lg:grid lg:grid-cols-[598px_335px] lg:items-start lg:justify-between lg:px-25 2xl:px-50">
+      <div className="mx-auto flex max-w-360 flex-col-reverse gap-12 px-4 lg:grid lg:grid-cols-[598px_335px] lg:items-start lg:justify-between lg:px-25 2xl:px-50">
         <div className="flex w-full max-w-[598px] flex-col gap-[30px]">
           <section className="flex flex-col gap-4">
             <h2 className="text-xl/[100%] leading-normal font-extrabold text-ma-text sm:text-2xl">
diff --git a/src/features/marketing/components/course-detail-hero-section.tsx b/src/features/marketing/components/course-detail-hero-section.tsx
index c3a9444..8191591 100644
--- a/src/features/marketing/components/course-detail-hero-section.tsx
+++ b/src/features/marketing/components/course-detail-hero-section.tsx
@@ -7,7 +7,7 @@ import { Button } from "@/shared/ui/button"
 export function CourseDetailHeroSection() {
   return (
     <section className="bg-[#f5f5f5] py-10 text-ma-text sm:py-[90px] lg:py-16">
-      <div className="mx-auto grid gap-5 rounded-[24px] px-4 lg:grid-cols-2 lg:px-25 2xl:px-50">
+      <div className="mx-auto grid max-w-360 gap-5 rounded-[24px] px-4 lg:grid-cols-2 lg:px-25 2xl:px-50">
         <div className="relative min-h-[360px] overflow-hidden rounded-[24px] sm:min-h-[428px]">
           <Image
             src="/figma-courses/foundational-ai-skills.png"
@@ -81,10 +81,16 @@ export function CourseDetailHeroSection() {
               asChild
               className="group relative mt-3 overflow-hidden rounded-[60px]"
             >
-              <Link href="/signup" className="flex h-[53px] w-full items-center justify-center gap-2.5 rounded-[60px] bg-ma-text px-5 py-4 text-base font-semibold text-white">
+              <Link
+                href="/signup"
+                className="flex h-[53px] w-full items-center justify-center gap-2.5 rounded-[60px] bg-ma-text px-5 py-4 text-base font-semibold text-white"
+              >
                 <span className="relative z-10 inline-flex items-center gap-2.5">
                   Enroll Now
-                  <ArrowRight className="size-5 transition-transform duration-300 group-hover:rotate-[-30deg]" aria-hidden="true" />
+                  <ArrowRight
+                    className="size-5 transition-transform duration-300 group-hover:rotate-[-30deg]"
+                    aria-hidden="true"
+                  />
                 </span>
                 <div className="pointer-events-none absolute inset-0 rounded-[60px] bg-gradient-to-r from-ma-glow-blue to-ma-glow-violet opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
               </Link>
diff --git a/src/features/marketing/components/courses-hero-section.tsx b/src/features/marketing/components/courses-hero-section.tsx
index d184783..12945b9 100644
--- a/src/features/marketing/components/courses-hero-section.tsx
+++ b/src/features/marketing/components/courses-hero-section.tsx
@@ -88,8 +88,8 @@ export function CoursesHeroSection() {
   })
 
   return (
-    <section className="bg-white px-4 py-20 pb-20 text-ma-text sm:pt-25 sm:pb-25 lg:pt-18">
-      <div className="mx-auto lg:px-25 2xl:px-50">
+    <section className="bg-white py-20 pb-20 text-ma-text sm:pt-25 sm:pb-25 lg:pt-18">
+      <div className="mx-auto max-w-360 px-4 lg:px-25 2xl:px-50">
         <div className="mx-auto max-w-200 text-center">
           <p className="text-base leading-normal font-medium tracking-[0.1em] text-[#6b7280] uppercase">
             Courses
diff --git a/src/features/marketing/components/cta-section.tsx b/src/features/marketing/components/cta-section.tsx
index 89316d7..cdf32e4 100644
--- a/src/features/marketing/components/cta-section.tsx
+++ b/src/features/marketing/components/cta-section.tsx
@@ -3,8 +3,9 @@ import Link from "next/link"
 
 export function CtaSection() {
   return (
-    <section className="px-4 xl:px-25 2xl:px-50">
-      <section className="relative mx-auto my-5 flex min-h-[450px] w-full flex-col items-center justify-center overflow-hidden rounded-[24px] bg-ma-text px-6 text-center lg:my-20">
+    <section>
+      <div className="mx-auto max-w-360 px-4 xl:px-25 2xl:px-50">
+        <section className="relative mx-auto my-5 flex min-h-[450px] w-full flex-col items-center justify-center overflow-hidden rounded-[24px] bg-ma-text px-6 text-center lg:my-20">
         <div className="mx-auto max-w-[650px]">
           <h2 className="mx-auto max-w-[600px] font-sans text-[28px]/[40px] font-extrabold tracking-[0%] text-white lg:text-[40px]/[60px]">
             Your Next Chapter Starts With the Right Support
@@ -27,7 +28,8 @@ export function CtaSection() {
             </Link>
           </div>
         </div>
-      </section>
+        </section>
+      </div>
     </section>
   )
 }
diff --git a/src/features/marketing/components/donation-hero-section.tsx b/src/features/marketing/components/donation-hero-section.tsx
index cc76e5f..d0ae4c0 100644
--- a/src/features/marketing/components/donation-hero-section.tsx
+++ b/src/features/marketing/components/donation-hero-section.tsx
@@ -4,9 +4,9 @@ export function DonationHeroSection() {
   return (
     <section
       id="donation"
-      className="bg-white px-4 pt-18 pb-20 text-ma-text sm:pt-25 sm:pb-25 lg:px-25 2xl:px-50"
+      className="bg-white pt-18 pb-20 text-ma-text sm:pt-25 sm:pb-25"
     >
-      <div className="mx-auto">
+      <div className="mx-auto max-w-360 px-4 lg:px-25 2xl:px-50">
         <div className="mx-auto max-w-[800px] text-center">
           <p className="text-base leading-normal font-medium tracking-[10%] text-[#6B7280] uppercase">
             Donation
diff --git a/src/features/marketing/components/donation-support-section.tsx b/src/features/marketing/components/donation-support-section.tsx
index 965b70f..30bf09c 100644
--- a/src/features/marketing/components/donation-support-section.tsx
+++ b/src/features/marketing/components/donation-support-section.tsx
@@ -7,8 +7,8 @@ const donationTypes = ["Fixed Donation", "Tier Donation", "Monthly Pay"]
 
 export function DonationSupportSection() {
   return (
-    <section className="bg-white px-4 py-12.5 text-ma-text sm:py-25 lg:px-25 lg:py-20 2xl:px-50">
-      <div className="mx-auto grid items-start gap-12 lg:grid-cols-[506px_510px] lg:gap-6">
+    <section className="bg-white py-12.5 text-ma-text sm:py-25">
+      <div className="mx-auto grid max-w-360 items-start gap-12 px-4 lg:grid-cols-2 lg:gap-6 lg:px-25 lg:py-20 2xl:px-50">
         <div className="pt-0 lg:pt-2">
           <h2 className="font-sans text-[28px]/[100%] leading-[1.12] font-extrabold text-balance text-primary lg:text-[60px]/[70px] lg:tracking-[-5%]">
             Support us and make a difference for the future!
@@ -19,7 +19,7 @@ export function DonationSupportSection() {
           </p>
         </div>
 
-        <form className="flex w-full max-w-[510px] flex-col gap-[30px] rounded-[24px] border border-[#d9d9d9] bg-[#f5f5f5] px-4 pt-[30px] pb-7 sm:px-[30px] lg:px-7">
+        <form className="flex w-full flex-col gap-[30px] rounded-[24px] border border-[#d9d9d9] bg-[#f5f5f5] px-4 pt-[30px] pb-7 sm:px-[30px] lg:px-7">
           <div className="border-b border-[#d9d9d9] pb-2.5">
             <h3 className="text-2xl leading-normal font-bold text-black">
               Make Your Donation
@@ -126,7 +126,10 @@ export function DonationSupportSection() {
           >
             <span className="relative z-10 inline-flex items-center gap-2.5">
               Donate Now
-              <ArrowRight className="size-5 transition-transform duration-300 group-hover:rotate-[-30deg]" aria-hidden="true" />
+              <ArrowRight
+                className="size-5 transition-transform duration-300 group-hover:rotate-[-30deg]"
+                aria-hidden="true"
+              />
             </span>
             <div className="pointer-events-none absolute inset-0 rounded-[60px] bg-gradient-to-r from-ma-glow-blue to-ma-glow-violet opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
           </Button>
diff --git a/src/features/marketing/components/faq.tsx b/src/features/marketing/components/faq.tsx
index 2d78e85..ac2e336 100644
--- a/src/features/marketing/components/faq.tsx
+++ b/src/features/marketing/components/faq.tsx
@@ -46,9 +46,10 @@ export function Faq() {
   return (
     <section
       id="faq"
-      className="bg-white px-4 py-12.5 lg:px-25 lg:py-25 2xl:px-50"
+      className="bg-white py-12.5 lg:py-25"
     >
-      <div className="mx-auto grid gap-12 lg:grid-cols-[425px_1fr] lg:gap-[77px]">
+      <div className="mx-auto max-w-360 px-4 lg:px-25 2xl:px-50">
+        <div className="grid gap-12 lg:grid-cols-[425px_1fr] lg:gap-[77px]">
         <div>
           <h2 className="max-w-[425px] font-sans text-[28px]/[100%] font-extrabold text-primary lg:text-[40px]/[60px] lg:tracking-[-5%]">
             Got questions? we&apos;ve got answers
@@ -72,7 +73,7 @@ export function Faq() {
               >
                 <Plus
                   className={`size-[30px] shrink-0 transition-transform duration-600 ${
-                    openIndex === i ? "rotate-[360deg]" : ""
+                    openIndex === i ? "rotate-90" : ""
                   }`}
                   strokeWidth={2.5}
                   aria-hidden="true"
@@ -84,7 +85,9 @@ export function Faq() {
 
               <div
                 className={`overflow-hidden transition-all duration-300 ${
-                  openIndex === i ? "max-h-[500px] opacity-100" : "max-h-0 opacity-0"
+                  openIndex === i
+                    ? "max-h-[500px] opacity-100"
+                    : "max-h-0 opacity-0"
                 }`}
               >
                 <p className="pt-4 text-sm leading-normal text-ma-text/80 lg:text-base">
@@ -94,6 +97,7 @@ export function Faq() {
             </div>
           ))}
         </div>
+        </div>
       </div>
     </section>
   )
diff --git a/src/features/marketing/components/footer.tsx b/src/features/marketing/components/footer.tsx
index b7b0f95..f4b06be 100644
--- a/src/features/marketing/components/footer.tsx
+++ b/src/features/marketing/components/footer.tsx
@@ -12,7 +12,7 @@ const quickLinks = [
 export function Footer() {
   return (
     <footer className="overflow-hidden bg-white text-ma-text">
-      <div className="relative mx-auto min-h-125 px-4 pt-12.5 lg:px-25 lg:pt-17.5 2xl:px-50">
+      <div className="relative mx-auto min-h-125 max-w-360 px-4 pt-12.5 lg:px-25 lg:pt-17.5 2xl:px-50">
         <div className="grid gap-10 md:grid-cols-[254px_180px_1fr] md:gap-[100px] lg:gap-[120px]">
           <section>
             <h2 className="font-sans text-lg font-extrabold lg:text-2xl">
diff --git a/src/features/marketing/components/hero-section.tsx b/src/features/marketing/components/hero-section.tsx
index 73b4008..f93a2fa 100644
--- a/src/features/marketing/components/hero-section.tsx
+++ b/src/features/marketing/components/hero-section.tsx
@@ -14,7 +14,7 @@ const supporters = [
 export function HeroSection() {
   return (
     <section className="relative isolate bg-white text-ma-text">
-      <div className="relative z-10 mx-auto flex flex-col items-center px-4 py-12.5 text-center lg:min-h-[924px] lg:py-[118px] xl:px-25 2xl:px-50">
+      <div className="relative z-10 mx-auto flex max-w-360 flex-col items-center px-4 py-12.5 text-center lg:min-h-[924px] lg:py-[118px] xl:px-25 2xl:px-50">
         <div className="flex items-center justify-center gap-4">
           <div className="flex -space-x-2">
             {supporters.map((src, index) => (
@@ -80,7 +80,7 @@ export function HeroSection() {
           </Link>
         </div>
 
-        <div className="relative mt-15 w-full max-w-[1024px] lg:mt-[100px]">
+        <div className="relative mt-15 w-full lg:mt-[100px]">
           <div
             className="ma-hero-glow pointer-events-none absolute top-1/4 left-1/2 -z-10 h-[500px] w-[600px] -translate-x-1/2 -translate-y-1/2 rounded-full opacity-90 lg:top-1/3 lg:left-1/2 lg:h-[950px] lg:w-[954px]"
             aria-hidden="true"
@@ -97,7 +97,7 @@ export function HeroSection() {
                 alt="Two students smiling in a city setting"
                 fill
                 priority
-                sizes="(min-width: 768px) 700px, calc(100vw - 48px)"
+                sizes="(min-width: 768px) 700px, calc(100vw - 0px)"
                 className="object-cover"
               />
             </div>
diff --git a/src/features/marketing/components/how-can-we-support.tsx b/src/features/marketing/components/how-can-we-support.tsx
index e0ee4b0..f16d4c5 100644
--- a/src/features/marketing/components/how-can-we-support.tsx
+++ b/src/features/marketing/components/how-can-we-support.tsx
@@ -6,47 +6,46 @@ import React from "react"
 
 const SupportSection = () => {
   return (
-    <section
-      id="about"
-      className="bg-white px-4 py-12.5 sm:py-25 xl:px-25 2xl:px-50"
-    >
-      <div className="mx-auto text-center">
-        <h2 className="mx-auto max-w-160 text-center font-sans text-[28px] font-extrabold tracking-[0%] text-ma-text sm:text-5xl sm:text-[40px]">
-          How can we support your healthcare journey?{" "}
-        </h2>
-      </div>
-
-      <div className="mx-auto mt-10 max-w-3xl space-y-5 text-center text-lg text-ma-text">
-        <p>
-          ModernAdvocates creates a continuous learning system that improves
-          outcomes while expanding access to support.
-        </p>
-      </div>
+    <section id="about" className="bg-white py-12.5 sm:py-25">
+      <div className="mx-auto max-w-360 px-4 xl:px-25 2xl:px-50">
+        <div className="mx-auto text-center">
+          <h2 className="mx-auto max-w-160 text-center font-sans text-[28px] font-extrabold tracking-[0%] text-ma-text sm:text-5xl sm:text-[40px]/[60px]">
+            How can we support your healthcare journey?{" "}
+          </h2>
+        </div>
 
-      <div className="mx-auto mt-10 grid gap-4 rounded-2xl bg-[#f5f5f5] p-4 lg:mt-15.5">
-        <div className="grid gap-4 lg:grid-cols-2">
-          <SupportCard
-            title="Card Title"
-            description="We create distinctive brand identities that communicate your values clearly and build strong connections with your audience."
-          />
-          <SupportCard
-            title="Card Title"
-            description="We create distinctive brand identities that communicate your values clearly and build strong connections with your audience."
-          />{" "}
+        <div className="mx-auto mt-10 max-w-3xl space-y-5 text-center text-lg text-ma-text">
+          <p>
+            ModernAdvocates creates a continuous learning system that improves
+            outcomes while expanding access to support.
+          </p>
         </div>
-        <div className="grid gap-4 lg:grid-cols-3">
-          <SupportCard
-            title="Card Title"
-            description="We create distinctive brand identities that communicate your values clearly and build strong connections with your audience."
-          />
-          <SupportCard
-            title="Card Title"
-            description="We create distinctive brand identities that communicate your values clearly and build strong connections with your audience."
-          />
-          <SupportCard
-            title="Card Title"
-            description="We create distinctive brand identities that communicate your values clearly and build strong connections with your audience."
-          />
+
+        <div className="mx-auto mt-10 grid gap-4 rounded-2xl bg-[#f5f5f5] p-4 lg:mt-15.5">
+          <div className="grid gap-4 lg:grid-cols-2">
+            <SupportCard
+              title="Card Title"
+              description="We create distinctive brand identities that communicate your values clearly and build strong connections with your audience."
+            />
+            <SupportCard
+              title="Card Title"
+              description="We create distinctive brand identities that communicate your values clearly and build strong connections with your audience."
+            />{" "}
+          </div>
+          <div className="grid gap-4 lg:grid-cols-3">
+            <SupportCard
+              title="Card Title"
+              description="We create distinctive brand identities that communicate your values clearly and build strong connections with your audience."
+            />
+            <SupportCard
+              title="Card Title"
+              description="We create distinctive brand identities that communicate your values clearly and build strong connections with your audience."
+            />
+            <SupportCard
+              title="Card Title"
+              description="We create distinctive brand identities that communicate your values clearly and build strong connections with your audience."
+            />
+          </div>
         </div>
       </div>
     </section>
diff --git a/src/features/marketing/components/mission-sections.tsx b/src/features/marketing/components/mission-sections.tsx
index 7c7fb60..caaf792 100644
--- a/src/features/marketing/components/mission-sections.tsx
+++ b/src/features/marketing/components/mission-sections.tsx
@@ -27,118 +27,117 @@ export function MissionBridgeSection() {
   }
 
   return (
-    <section
-      id="about"
-      className="bg-white px-4 py-12.5 sm:py-25 xl:px-25 2xl:px-50"
-    >
-      <div className="mx-auto max-w-xl text-center">
-        <h2 className="font-sans text-[28px]/[100%] font-extrabold tracking-[0%] text-ma-text sm:text-5xl sm:text-[40px] sm:tracking-[-0.01em]">
-          Bridging the Gap between Technology and Care
-        </h2>
-      </div>
+    <section id="about" className="bg-white">
+      <div className="mx-auto max-w-360 px-4 py-12.5 sm:py-25 xl:px-25 2xl:px-50">
+        <div className="mx-auto max-w-xl text-center">
+          <h2 className="font-sans text-[28px]/[100%] font-extrabold tracking-[0%] text-ma-text sm:text-[40px]/[60px] sm:tracking-[-0.01em]">
+            Bridging the Gap between Technology and Care
+          </h2>
+        </div>
 
-      <div className="mt-10 space-y-5 text-base text-ma-text sm:mt-12.5 sm:text-lg">
-        <p>
-          Millions of people face delayed diagnoses, fragmented care, and
-          limited access to support. At the same time, AI technology is
-          advancing faster than individuals, caregivers, and systems can safely
-          use it.
-        </p>
-        <p>
-          ModernAdvocates bridges this gap - by combining Safe AI usage,
-          Human-centered design, and Real-world application.
-        </p>
-        <p>
-          We built an integrated ecosystem where artificial intelligence is not
-          just a tool - but a guided, safe, and practical resource for real
-          people navigating real health challenges.
-        </p>
-        <p className="underline underline-offset-2">
-          The result is better navigation, earlier intervention, and more
-          informed decision-making.
-        </p>
-      </div>
+        <div className="mt-10 space-y-5 text-base text-ma-text sm:mt-12.5 sm:text-lg">
+          <p>
+            Millions of people face delayed diagnoses, fragmented care, and
+            limited access to support. At the same time, AI technology is
+            advancing faster than individuals, caregivers, and systems can
+            safely use it.
+          </p>
+          <p>
+            ModernAdvocates bridges this gap - by combining Safe AI usage,
+            Human-centered design, and Real-world application.
+          </p>
+          <p>
+            We built an integrated ecosystem where artificial intelligence is
+            not just a tool - but a guided, safe, and practical resource for
+            real people navigating real health challenges.
+          </p>
+          <p className="underline underline-offset-2">
+            The result is better navigation, earlier intervention, and more
+            informed decision-making.
+          </p>
+        </div>
 
-      <div
-        className="mt-15 grid gap-5 rounded-2xl bg-[#F5F5F5] p-5 transition-[grid-template-columns] duration-500 md:grid-cols-[2fr_1fr]"
-        style={{
-          gridTemplateColumns: hovered === "second" ? "1fr 2fr" : undefined,
-        }}
-      >
         <div
-          onMouseEnter={() => onHover("first")}
-          onMouseLeave={onLeave}
-          className="flex flex-col gap-5 rounded-2xl bg-white p-5 sm:flex-row"
+          className="mt-15 grid gap-5 rounded-2xl bg-[#F5F5F5] p-5 transition-[grid-template-columns] duration-500 md:grid-cols-[2fr_1fr]"
+          style={{
+            gridTemplateColumns: hovered === "second" ? "1fr 2fr" : undefined,
+          }}
         >
-          <div className="flex flex-col justify-between gap-2.5 sm:min-h-79.5 sm:gap-0">
-            <div className="flex size-12.5 items-center justify-center rounded-full border">
-              <Gift />
+          <div
+            onMouseEnter={() => onHover("first")}
+            onMouseLeave={onLeave}
+            className="flex flex-col gap-5 rounded-2xl bg-white p-5 sm:flex-row"
+          >
+            <div className="flex flex-col justify-between gap-2.5 sm:min-h-79.5 sm:gap-0">
+              <div className="flex size-12.5 items-center justify-center rounded-full border">
+                <Gift />
+              </div>
+
+              <div className="flex flex-col items-start gap-4">
+                <h3 className="text-xl font-semibold text-ma-text">
+                  Get Assistance
+                </h3>
+                <p className="text-sm text-ma-text/80">
+                  Get access to AI workforce training, healthcare guidance, and
+                  personalized support designed to help you move forward with
+                  confidence.{" "}
+                </p>
+              </div>
             </div>
 
-            <div className="flex flex-col items-start gap-4">
-              <h3 className="text-xl font-semibold text-ma-text">
-                Get Assistance
-              </h3>
-              <p className="text-sm text-ma-text/80">
-                Get access to AI workforce training, healthcare guidance, and
-                personalized support designed to help you move forward with
-                confidence.{" "}
-              </p>
+            <div
+              className={`shrink-0 overflow-hidden rounded-2xl transition-all duration-500 max-lg:hidden ${
+                hovered === "second" ? "w-0 min-w-0" : "lg:w-[292px]"
+              }`}
+            >
+              <Image
+                src="https://images.unsplash.com/photo-1513258496099-48168024aec0?w=700&q=80"
+                alt=""
+                className="size-full object-cover"
+                loading="lazy"
+                width={292}
+                height={318}
+              />
             </div>
           </div>
 
           <div
-            className={`shrink-0 overflow-hidden rounded-2xl transition-all duration-500 max-lg:hidden ${
-              hovered === "second" ? "w-0 min-w-0" : "w-[292px]"
-            }`}
+            onMouseEnter={() => onHover("second")}
+            onMouseLeave={onLeave}
+            className="flex gap-5 rounded-2xl bg-white p-5 sm:flex"
           >
-            <Image
-              src="https://images.unsplash.com/photo-1513258496099-48168024aec0?w=700&q=80"
-              alt=""
-              className="size-full object-cover"
-              loading="lazy"
-              width={292}
-              height={318}
-            />
-          </div>
-        </div>
-
-        <div
-          onMouseEnter={() => onHover("second")}
-          onMouseLeave={onLeave}
-          className="flex gap-5 rounded-2xl bg-white p-5 sm:flex"
-        >
-          <div className="flex min-w-0 flex-col justify-between gap-2.5 sm:min-h-79.5">
-            <div className="flex size-12.5 items-center justify-center rounded-full border">
-              <Gift />
+            <div className="flex min-w-0 flex-col justify-between gap-2.5 sm:min-h-79.5">
+              <div className="flex size-12.5 items-center justify-center rounded-full border">
+                <Gift />
+              </div>
+
+              <div className="flex flex-col items-start gap-4">
+                <h3 className="text-xl font-semibold text-ma-text">
+                  Support mission
+                </h3>
+                <p className="text-sm text-ma-text/80">
+                  Get access to AI workforce training, healthcare guidance, and
+                  personalized support designed to help you move forward with
+                  confidence.
+                </p>
+              </div>
             </div>
 
-            <div className="flex flex-col items-start gap-4">
-              <h3 className="text-xl font-semibold text-ma-text">
-                Support mission
-              </h3>
-              <p className="text-sm text-ma-text/80">
-                Get access to AI workforce training, healthcare guidance, and
-                personalized support designed to help you move forward with
-                confidence.
-              </p>
+            <div
+              className={`shrink-0 overflow-hidden rounded-2xl transition-all duration-500 max-lg:hidden ${
+                hovered === "second" ? "lg:w-[292px]" : "w-0 min-w-0"
+              }`}
+            >
+              <Image
+                src="https://images.unsplash.com/photo-1559027615-cd4628902d4a?w=700&q=80"
+                alt=""
+                className="size-full object-cover"
+                loading="lazy"
+                width={292}
+                height={318}
+              />
             </div>
           </div>
-
-          <div
-            className={`shrink-0 overflow-hidden rounded-2xl transition-all duration-500 max-lg:hidden ${
-              hovered === "second" ? "lg:w-[292px]" : "w-0 min-w-0"
-            }`}
-          >
-            <Image
-              src="https://images.unsplash.com/photo-1559027615-cd4628902d4a?w=700&q=80"
-              alt=""
-              className="size-full object-cover"
-              loading="lazy"
-              width={292}
-              height={318}
-            />
-          </div>
         </div>
       </div>
     </section>
@@ -147,8 +146,8 @@ export function MissionBridgeSection() {
 
 export function FounderStorySection() {
   return (
-    <section className="bg-white px-4 py-20 sm:py-24 xl:px-25 2xl:px-50">
-      <div className="mx-auto flex flex-col-reverse items-start gap-10 lg:grid lg:grid-cols-[0.8fr_1.2fr] lg:items-center">
+    <section className="bg-white">
+      <div className="mx-auto flex max-w-360 flex-col-reverse items-start gap-10 px-4 py-20 sm:py-24 lg:grid lg:grid-cols-[0.8fr_1.2fr] lg:items-center xl:px-25 2xl:px-50">
         <Image
           src="/figma-about/founder.png"
           alt=""
diff --git a/src/features/marketing/components/navbar.tsx b/src/features/marketing/components/navbar.tsx
index 47caf87..bc264c7 100644
--- a/src/features/marketing/components/navbar.tsx
+++ b/src/features/marketing/components/navbar.tsx
@@ -19,106 +19,108 @@ const Navbar = () => {
   const [mobileOpen, setMobileOpen] = useState(false)
 
   return (
-    <header className="relative z-20 bg-white px-4 py-5 xl:px-25 2xl:px-50">
-      <div className="flex w-full items-center justify-between">
-        <Link href="/" className="flex w-[157px] flex-col gap-1">
-          <Image
-            src="/figma-home/logo.svg"
-            alt="ModernAdvocates Inc."
-            width={58}
-            height={44}
-            priority
-          />
-        </Link>
-
-        <nav
-          aria-label="Main navigation"
-          className="hidden items-center gap-2 text-ma-text md:flex"
-        >
-          {navItems.map((item) => (
-            <Link
-              key={item.href}
-              href={item.href}
-              className="p-2.5 text-base transition-colors duration-300 hover:text-[#6B7280]"
-            >
-              {item.label}
-            </Link>
-          ))}
-        </nav>
-
-        <Button
-          asChild
-          className="group relative hidden overflow-hidden rounded-[60px] md:inline-flex"
-        >
-          <Link
-            href="/contact"
-            className="flex h-13 w-[157px] items-center justify-center gap-[6px] rounded-[60px] px-5 py-4 text-base font-semibold"
-          >
-            <span className="relative z-10">Consultation</span>
-            <ArrowRight
-              className="relative z-10 size-5 transition-transform duration-300 group-hover:rotate-[-30deg]"
-              aria-hidden="true"
+    <header className="bg-white">
+      <div className="relative z-20 mx-auto max-w-360 px-4 py-5 xl:px-25 2xl:px-50">
+        <div className="flex w-full items-center justify-between">
+          <Link href="/" className="flex w-[157px] flex-col gap-1">
+            <Image
+              src="/figma-home/logo.svg"
+              alt="ModernAdvocates Inc."
+              width={58}
+              height={44}
+              priority
             />
-            <div className="pointer-events-none absolute inset-0 rounded-[60px] bg-gradient-to-r from-ma-glow-blue to-ma-glow-violet opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
           </Link>
-        </Button>
 
-        <button
-          type="button"
-          aria-label={mobileOpen ? "Close menu" : "Open menu"}
-          onClick={() => setMobileOpen((prev) => !prev)}
-          className="size-10 rounded-[12px] border p-2 md:hidden"
-        >
-          {mobileOpen ? (
-            <X className="size-6 text-[#6B7280]" />
-          ) : (
-            <Menu className="size-6 text-[#6B7280]" />
-          )}
-        </button>
-      </div>
+          <nav
+            aria-label="Main navigation"
+            className="hidden items-center gap-2 text-ma-text md:flex"
+          >
+            {navItems.map((item) => (
+              <Link
+                key={item.href}
+                href={item.href}
+                className="p-2.5 text-base transition-colors duration-300 hover:text-[#6B7280]"
+              >
+                {item.label}
+              </Link>
+            ))}
+          </nav>
 
-      <div
-        className={`overflow-hidden transition-all duration-300 ease-in-out md:hidden ${
-          mobileOpen ? "mt-4 max-h-96 opacity-100" : "max-h-0 opacity-0"
-        }`}
-      >
-        <nav
-          aria-label="Mobile navigation"
-          className="flex flex-col gap-1 border-t border-gray-100 pt-4"
-        >
-          {navItems.map((item, i) => (
-            <Link
-              key={item.href}
-              href={item.href}
-              onClick={() => setMobileOpen(false)}
-              className={`rounded-lg p-3 text-base transition-all duration-300 hover:bg-gray-50 ${
-                mobileOpen
-                  ? "translate-y-0 opacity-100"
-                  : "translate-y-1 opacity-0"
-              }`}
-              style={{ transitionDelay: mobileOpen ? `${i * 50}ms` : "0ms" }}
-            >
-              {item.label}
-            </Link>
-          ))}
           <Button
             asChild
-            className="group relative mt-2 overflow-hidden rounded-[60px]"
+            className="group relative hidden overflow-hidden rounded-[60px] md:inline-flex"
           >
             <Link
               href="/contact"
-              onClick={() => setMobileOpen(false)}
-              className="flex h-13 w-full items-center justify-center gap-[6px] rounded-[60px] px-5 py-4"
+              className="flex h-13 w-[157px] items-center justify-center gap-[6px] rounded-[60px] px-5 py-4 text-base font-semibold"
             >
               <span className="relative z-10">Consultation</span>
               <ArrowRight
-                className="relative z-10 size-3.5 transition-transform duration-300 group-hover:rotate-[30deg]"
+                className="relative z-10 size-5 transition-transform duration-300 group-hover:rotate-[-30deg]"
                 aria-hidden="true"
               />
               <div className="pointer-events-none absolute inset-0 rounded-[60px] bg-gradient-to-r from-ma-glow-blue to-ma-glow-violet opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
             </Link>
           </Button>
-        </nav>
+
+          <button
+            type="button"
+            aria-label={mobileOpen ? "Close menu" : "Open menu"}
+            onClick={() => setMobileOpen((prev) => !prev)}
+            className="size-10 rounded-[12px] border p-2 md:hidden"
+          >
+            {mobileOpen ? (
+              <X className="size-6 text-[#6B7280]" />
+            ) : (
+              <Menu className="size-6 text-[#6B7280]" />
+            )}
+          </button>
+        </div>
+
+        <div
+          className={`overflow-hidden transition-all duration-300 ease-in-out md:hidden ${
+            mobileOpen ? "mt-4 max-h-96 opacity-100" : "max-h-0 opacity-0"
+          }`}
+        >
+          <nav
+            aria-label="Mobile navigation"
+            className="flex flex-col gap-1 border-t border-gray-100 pt-4"
+          >
+            {navItems.map((item, i) => (
+              <Link
+                key={item.href}
+                href={item.href}
+                onClick={() => setMobileOpen(false)}
+                className={`rounded-lg p-3 text-base transition-all duration-300 hover:bg-gray-50 ${
+                  mobileOpen
+                    ? "translate-y-0 opacity-100"
+                    : "translate-y-1 opacity-0"
+                }`}
+                style={{ transitionDelay: mobileOpen ? `${i * 50}ms` : "0ms" }}
+              >
+                {item.label}
+              </Link>
+            ))}
+            <Button
+              asChild
+              className="group relative mt-2 overflow-hidden rounded-[60px]"
+            >
+              <Link
+                href="/contact"
+                onClick={() => setMobileOpen(false)}
+                className="flex h-13 w-full items-center justify-center gap-[6px] rounded-[60px] px-5 py-4"
+              >
+                <span className="relative z-10">Consultation</span>
+                <ArrowRight
+                  className="relative z-10 size-3.5 transition-transform duration-300 group-hover:rotate-[30deg]"
+                  aria-hidden="true"
+                />
+                <div className="pointer-events-none absolute inset-0 rounded-[60px] bg-gradient-to-r from-ma-glow-blue to-ma-glow-violet opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
+              </Link>
+            </Button>
+          </nav>
+        </div>
       </div>
     </header>
   )
diff --git a/src/features/marketing/components/testimonials.tsx b/src/features/marketing/components/testimonials.tsx
index 1c59cc8..85bcef5 100644
--- a/src/features/marketing/components/testimonials.tsx
+++ b/src/features/marketing/components/testimonials.tsx
@@ -37,41 +37,42 @@ export function Testimonials() {
 
   return (
     <section className="overflow-hidden bg-white py-12.5 lg:py-25">
-      <div className="mx-auto flex w-full flex-col gap-8 px-4 sm:flex-row sm:items-end sm:justify-between xl:px-25 2xl:px-50">
-        <div>
-          <h2 className="font-sans text-[28px]/[100%] font-extrabold text-primary lg:text-[40px] lg:leading-15">
-            What they say about us?
-          </h2>
-          <p className="mt-6 max-w-[650px] text-[18px] leading-normal text-primary">
-            Real stories from customers who have experienced measurable results
-            and meaningful progress with our support.
-          </p>
-        </div>
+      <div className="mx-auto max-w-360 px-4 xl:px-25 2xl:px-50">
+        <div className="flex w-full flex-col gap-8 sm:flex-row sm:items-end sm:justify-between">
+          <div>
+            <h2 className="font-sans text-[28px]/[100%] font-extrabold text-primary lg:text-[40px] lg:leading-15">
+              What they say about us?
+            </h2>
+            <p className="mt-6 max-w-[650px] text-[18px] leading-normal text-primary">
+              Real stories from customers who have experienced measurable results
+              and meaningful progress with our support.
+            </p>
+          </div>
 
-        <div className="flex gap-[18px] sm:pb-2">
-          <button
-            type="button"
-            aria-label="Previous review"
-            onClick={() => scrollReviews("previous")}
-            className="flex size-[50px] items-center justify-center rounded-2xl bg-[#f5f5f5] text-black transition-colors hover:bg-[#ececec]"
-          >
-            <ArrowLeft className="size-6" aria-hidden="true" />
-          </button>
-          <button
-            type="button"
-            aria-label="Next review"
-            onClick={() => scrollReviews("next")}
-            className="flex size-[50px] items-center justify-center rounded-2xl bg-[#f5f5f5] text-black transition-colors hover:bg-[#ececec]"
-          >
-            <ArrowRight className="size-6" aria-hidden="true" />
-          </button>
+          <div className="flex gap-[18px] sm:pb-2">
+            <button
+              type="button"
+              aria-label="Previous review"
+              onClick={() => scrollReviews("previous")}
+              className="flex size-[50px] items-center justify-center rounded-2xl bg-[#f5f5f5] text-black transition-colors hover:bg-[#ececec]"
+            >
+              <ArrowLeft className="size-6" aria-hidden="true" />
+            </button>
+            <button
+              type="button"
+              aria-label="Next review"
+              onClick={() => scrollReviews("next")}
+              className="flex size-[50px] items-center justify-center rounded-2xl bg-[#f5f5f5] text-black transition-colors hover:bg-[#ececec]"
+            >
+              <ArrowRight className="size-6" aria-hidden="true" />
+            </button>
+          </div>
         </div>
-      </div>
 
-      <div
-        ref={scrollRef}
-        className="relative mx-auto mt-[86px] flex gap-[30px] overflow-x-hidden px-4 pb-2 lg:max-w-[calc(100vw-200px)] lg:px-0"
-      >
+        <div
+          ref={scrollRef}
+          className="relative mt-21.5 flex gap-7.5 overflow-x-hidden pb-2"
+        >
         {reviews.map((review) => (
           <article
             key={review.image}
@@ -103,6 +104,7 @@ export function Testimonials() {
             </div>
           </article>
         ))}
+        </div>
       </div>
     </section>
   )

From 90572e30666bc8a7ca26a95f04cc5156a99210ff Mon Sep 17 00:00:00 2001
From: Obinna Anosike <smartlify09@gmail.com>
Date: Wed, 1 Jul 2026 15:15:05 +0100
Subject: [PATCH 27/29] feat: conditional FAQ rendering, donation page CTA with
 hover state, FAQ icon rotates to X

---
 src/app/(marketing)/donation/page.tsx         |  2 ++
 src/app/(marketing)/layout.tsx                |  6 ++--
 src/app/(marketing)/page.tsx                  |  1 -
 .../conditional-layout-sections.tsx           | 19 ++++++++++
 .../components/donation-cta-section.tsx       | 36 +++++++++++++++++++
 src/features/marketing/components/faq.tsx     |  2 +-
 .../marketing/components/mission-sections.tsx | 19 ++--------
 7 files changed, 62 insertions(+), 23 deletions(-)
 create mode 100644 src/features/marketing/components/conditional-layout-sections.tsx
 create mode 100644 src/features/marketing/components/donation-cta-section.tsx

diff --git a/src/app/(marketing)/donation/page.tsx b/src/app/(marketing)/donation/page.tsx
index ca8c297..dd91d6e 100644
--- a/src/app/(marketing)/donation/page.tsx
+++ b/src/app/(marketing)/donation/page.tsx
@@ -1,3 +1,4 @@
+import { DonationCtaSection } from "@/features/marketing/components/donation-cta-section"
 import { DonationHeroSection } from "@/features/marketing/components/donation-hero-section"
 import { DonationSupportSection } from "@/features/marketing/components/donation-support-section"
 
@@ -6,6 +7,7 @@ export default function DonationPage() {
     <main className="min-h-svh overflow-hidden bg-white text-ma-text">
       <DonationHeroSection />
       <DonationSupportSection />
+      <DonationCtaSection />
     </main>
   )
 }
diff --git a/src/app/(marketing)/layout.tsx b/src/app/(marketing)/layout.tsx
index a2ca987..a8df75b 100644
--- a/src/app/(marketing)/layout.tsx
+++ b/src/app/(marketing)/layout.tsx
@@ -1,7 +1,6 @@
 import Navbar from "@/features/marketing/components/navbar"
-import { CtaSection } from "@/features/marketing/components/cta-section"
+import { ConditionalLayoutSections } from "@/features/marketing/components/conditional-layout-sections"
 import { Footer } from "@/features/marketing/components/footer"
-import { Faq } from "@/features/marketing/components/faq"
 
 export default function MarketingLayout({
   children,
@@ -12,8 +11,7 @@ export default function MarketingLayout({
     <div className="bg-white">
       <Navbar />
       {children}
-      <Faq />
-      <CtaSection />
+      <ConditionalLayoutSections />
 
       <Footer />
     </div>
diff --git a/src/app/(marketing)/page.tsx b/src/app/(marketing)/page.tsx
index d697c7d..b14b347 100644
--- a/src/app/(marketing)/page.tsx
+++ b/src/app/(marketing)/page.tsx
@@ -6,7 +6,6 @@ import {
 import { FeaturedCourses } from "@/features/marketing/components/featured-courses"
 import { HowItWorks } from "@/features/marketing/components/how-it-works"
 import { Testimonials } from "@/features/marketing/components/testimonials"
-import { Faq } from "@/features/marketing/components/faq"
 import SupportSection from "@/features/marketing/components/how-can-we-support"
 
 export default function Page() {
diff --git a/src/features/marketing/components/conditional-layout-sections.tsx b/src/features/marketing/components/conditional-layout-sections.tsx
new file mode 100644
index 0000000..d249580
--- /dev/null
+++ b/src/features/marketing/components/conditional-layout-sections.tsx
@@ -0,0 +1,19 @@
+"use client"
+
+import { usePathname } from "next/navigation"
+import { CtaSection } from "@/features/marketing/components/cta-section"
+import { Faq } from "@/features/marketing/components/faq"
+
+export function ConditionalLayoutSections() {
+  const pathname = usePathname()
+
+  const showFaq = pathname === "/" || pathname === "/about"
+  const showCta = pathname !== "/donation"
+
+  return (
+    <>
+      {showFaq && <Faq />}
+      {showCta && <CtaSection />}
+    </>
+  )
+}
diff --git a/src/features/marketing/components/donation-cta-section.tsx b/src/features/marketing/components/donation-cta-section.tsx
new file mode 100644
index 0000000..37d6a43
--- /dev/null
+++ b/src/features/marketing/components/donation-cta-section.tsx
@@ -0,0 +1,36 @@
+import { ArrowRight } from "lucide-react"
+import Link from "next/link"
+
+export function DonationCtaSection() {
+  return (
+    <section className="mx-auto max-w-360 px-4 xl:px-25 2xl:px-50">
+      <div className="relative mx-auto my-5 flex min-h-[450px] w-full flex-col items-center justify-center overflow-hidden rounded-[24px] bg-ma-text px-6 text-center lg:my-20">
+        <div className="mx-auto">
+          <h2 className="mx-auto font-sans text-[28px]/[40px] font-extrabold tracking-[0%] text-white lg:text-[40px]/[60px]">
+            Make impact that genuinely matters
+          </h2>
+          <p className="mx-auto mt-6 max-w-[650px] text-base leading-normal text-white lg:mt-10 lg:text-lg">
+            Together, we can make a real impact in communities around the world.
+            Help us bring hope and support.
+          </p>
+
+          <div className="mt-12.5 flex flex-col items-center justify-center gap-5 sm:flex-row lg:mt-13">
+            <Link
+              href="/donation"
+              className="group relative inline-flex items-center justify-center gap-2.5 overflow-hidden rounded-[60px] bg-white px-5 py-4 text-center text-base font-semibold text-primary"
+            >
+              <span className="relative z-10 inline-flex items-center gap-2.5 transition-colors duration-300 group-hover:text-white">
+                Donate now
+                <ArrowRight
+                  className="size-5 transition-all duration-300 group-hover:rotate-[-30deg] group-hover:text-white"
+                  aria-hidden="true"
+                />
+              </span>
+              <div className="pointer-events-none absolute inset-0 rounded-[60px] bg-gradient-to-r from-ma-glow-blue to-ma-glow-violet opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
+            </Link>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/src/features/marketing/components/faq.tsx b/src/features/marketing/components/faq.tsx
index 6a6ba45..6b7d9a7 100644
--- a/src/features/marketing/components/faq.tsx
+++ b/src/features/marketing/components/faq.tsx
@@ -70,7 +70,7 @@ export function Faq() {
                 >
                   <Plus
                     className={`size-[30px] shrink-0 transition-transform duration-600 ${
-                      openIndex === i ? "rotate-90" : ""
+                      openIndex === i ? "rotate-45" : ""
                     }`}
                     strokeWidth={2.5}
                     aria-hidden="true"
diff --git a/src/features/marketing/components/mission-sections.tsx b/src/features/marketing/components/mission-sections.tsx
index 538e83c..0d5f885 100644
--- a/src/features/marketing/components/mission-sections.tsx
+++ b/src/features/marketing/components/mission-sections.tsx
@@ -77,7 +77,7 @@ export function MissionBridgeSection() {
                 <h3 className="text-xl font-semibold text-ma-text">
                   Get Assistance
                 </h3>
-                <p className="text-sm text-ma-text/80">
+                <p className="text-sm text-balance text-ma-text/80">
                   Get access to AI workforce training, healthcare guidance, and
                   personalized support designed to help you move forward with
                   confidence.{" "}
@@ -115,7 +115,7 @@ export function MissionBridgeSection() {
                 <h3 className="text-xl font-semibold text-ma-text">
                   Support mission
                 </h3>
-                <p className="text-sm text-ma-text/80">
+                <p className="text-sm text-balance text-ma-text/80">
                   Get access to AI workforce training, healthcare guidance, and
                   personalized support designed to help you move forward with
                   confidence.
@@ -138,21 +138,6 @@ export function MissionBridgeSection() {
               />
             </div>
           </div>
-
-          <div
-            className={`shrink-0 overflow-hidden rounded-2xl transition-all duration-500 max-lg:hidden ${
-              hovered === "second" ? "lg:w-[292px]" : "w-0 min-w-0"
-            }`}
-          >
-            <Image
-              src="https://images.unsplash.com/photo-1559027615-cd4628902d4a?w=700&q=80"
-              alt=""
-              className="size-full object-cover"
-              loading="lazy"
-              width={292}
-              height={318}
-            />
-          </div>
         </div>
       </div>
     </section>

From 1eb34c514e05cbfece7e96697702d97b113725dd Mon Sep 17 00:00:00 2001
From: Obinna Anosike <smartlify09@gmail.com>
Date: Wed, 1 Jul 2026 16:13:36 +0100
Subject: [PATCH 28/29] feat: update auth screens UI with new components and
 styling

---
 src/app/(marketing)/login/page.tsx            |   4 +-
 src/app/(marketing)/signup/page.tsx           |   4 +-
 .../auth/components/auth-code-form.tsx        | 152 ++++++++++
 .../auth/components/auth-google-button.tsx    |  42 +++
 src/features/auth/components/login-form.tsx   | 158 +++++-----
 src/features/auth/components/signup-form.tsx  | 277 ++++++++----------
 6 files changed, 400 insertions(+), 237 deletions(-)
 create mode 100644 src/features/auth/components/auth-code-form.tsx
 create mode 100644 src/features/auth/components/auth-google-button.tsx

diff --git a/src/app/(marketing)/login/page.tsx b/src/app/(marketing)/login/page.tsx
index cbe611b..b43c3c7 100644
--- a/src/app/(marketing)/login/page.tsx
+++ b/src/app/(marketing)/login/page.tsx
@@ -2,8 +2,8 @@ import { LoginForm } from "@/features/auth/components/login-form"
 
 export default function Page() {
   return (
-    <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
-      <div className="w-full max-w-sm">
+    <div className="flex min-h-svh w-full items-center justify-center bg-white p-6 md:p-10">
+      <div className="w-full max-w-[440px]">
         <LoginForm />
       </div>
     </div>
diff --git a/src/app/(marketing)/signup/page.tsx b/src/app/(marketing)/signup/page.tsx
index f079a4d..ad8a690 100644
--- a/src/app/(marketing)/signup/page.tsx
+++ b/src/app/(marketing)/signup/page.tsx
@@ -2,8 +2,8 @@ import { SignupForm } from "@/features/auth/components/signup-form"
 
 export default function Page() {
   return (
-    <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
-      <div className="w-full max-w-sm">
+    <div className="flex min-h-svh w-full items-center justify-center bg-white p-6 md:p-10">
+      <div className="w-full max-w-[440px]">
         <SignupForm />
       </div>
     </div>
diff --git a/src/features/auth/components/auth-code-form.tsx b/src/features/auth/components/auth-code-form.tsx
new file mode 100644
index 0000000..839aef2
--- /dev/null
+++ b/src/features/auth/components/auth-code-form.tsx
@@ -0,0 +1,152 @@
+"use client"
+
+import { Lock } from "lucide-react"
+import Link from "next/link"
+import { Controller, useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import * as z from "zod"
+
+import { cn } from "@/shared/utils"
+import { Button } from "@/shared/ui/button"
+import {
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldSeparator,
+} from "@/shared/ui/field"
+import { Input } from "@/shared/ui/input"
+
+const codeSchema = z.object({
+  code: z
+    .string()
+    .trim()
+    .regex(/^\d{6}$/, { message: "Enter the 6-digit code" }),
+})
+
+type AuthCodeFormProps = React.ComponentProps<"div"> & {
+  email: string
+  mode: "login" | "signup"
+  onDifferentAccount?: () => void
+  onResendCode?: () => void
+  onSubmitCode?: (code: string) => void | Promise<void>
+}
+
+export function AuthCodeForm({
+  className,
+  email,
+  mode,
+  onDifferentAccount,
+  onResendCode,
+  onSubmitCode,
+  ...props
+}: AuthCodeFormProps) {
+  const form = useForm<z.infer<typeof codeSchema>>({
+    resolver: zodResolver(codeSchema),
+    defaultValues: {
+      code: "",
+    },
+  })
+
+  const actionLabel = mode === "login" ? "Log in" : "Sign up"
+  const flowLabel = mode === "login" ? "login" : "sign up"
+  const switchLabel =
+    mode === "login"
+      ? "Log in to a different account"
+      : "Sign up with a different account"
+
+  const onSubmit = async (data: z.infer<typeof codeSchema>) => {
+    await onSubmitCode?.(data.code)
+  }
+
+  return (
+    <div
+      className={cn("flex w-full flex-col items-center gap-[45px]", className)}
+      {...props}
+    >
+      <div className="flex w-full flex-col items-center gap-[30px] text-center">
+        <h1 className="text-4xl leading-normal font-extrabold text-ma-text">
+          Check your inbox
+        </h1>
+        <p className="max-w-[442px] text-lg leading-normal text-[#6b7280]">
+          Enter the 6-digit code we sent to{" "}
+          <span className="font-medium text-ma-text">{email}</span> to finish
+          your {flowLabel}.
+        </p>
+      </div>
+
+      <form className="w-full" onSubmit={form.handleSubmit(onSubmit)}>
+        <FieldGroup className="gap-5">
+          <Controller
+            control={form.control}
+            name="code"
+            render={({ fieldState, field }) => (
+              <Field data-invalid={fieldState.invalid}>
+                <FieldLabel htmlFor={field.name} className="sr-only">
+                  6-digit code
+                </FieldLabel>
+                <div className="relative">
+                  <Input
+                    {...field}
+                    id={field.name}
+                    inputMode="numeric"
+                    autoComplete="one-time-code"
+                    aria-invalid={fieldState.invalid}
+                    placeholder="6-digit code"
+                    className="h-11 rounded-md border-[#6b7280] px-5 py-5 pr-14 text-lg placeholder:text-[#6b7280]"
+                  />
+                  <Lock
+                    className="pointer-events-none absolute top-1/2 right-5 size-6 -translate-y-1/2 text-[#6b7280]"
+                    aria-hidden="true"
+                  />
+                </div>
+                <FieldError errors={[fieldState.error]} />
+              </Field>
+            )}
+          />
+
+          <Button
+            type="submit"
+            className="h-[53px] w-full rounded-[60px] bg-ma-text px-5 py-4 text-base font-semibold text-white hover:bg-ma-text/90"
+          >
+            {actionLabel}
+          </Button>
+
+          <FieldSeparator className="my-0 w-full [&_[data-slot=field-separator-content]]:bg-white">
+            <button
+              type="button"
+              onClick={onResendCode}
+              className="text-lg leading-normal font-medium text-ma-text underline underline-offset-2"
+            >
+              Resend code
+            </button>
+          </FieldSeparator>
+        </FieldGroup>
+      </form>
+
+      <div className="flex w-full items-center justify-center rounded-md bg-[#f5f5f5] px-[30px] py-[50px]">
+        {onDifferentAccount ? (
+          <button
+            type="button"
+            onClick={onDifferentAccount}
+            className="text-lg leading-normal font-semibold text-ma-text underline underline-offset-2"
+          >
+            {switchLabel}
+          </button>
+        ) : (
+          <Link
+            href={mode === "login" ? "/login" : "/signup"}
+            className="text-lg leading-normal font-semibold text-ma-text underline underline-offset-2"
+          >
+            {switchLabel}
+          </Link>
+        )}
+      </div>
+
+      <FieldDescription className="sr-only">
+        Use the code sent to your email address to continue.
+      </FieldDescription>
+    </div>
+  )
+}
diff --git a/src/features/auth/components/auth-google-button.tsx b/src/features/auth/components/auth-google-button.tsx
new file mode 100644
index 0000000..476291f
--- /dev/null
+++ b/src/features/auth/components/auth-google-button.tsx
@@ -0,0 +1,42 @@
+import { Button } from "@/shared/ui/button"
+
+function GoogleMark() {
+  return (
+    <svg
+      aria-hidden="true"
+      viewBox="0 0 18 18"
+      className="size-4"
+      focusable="false"
+    >
+      <path
+        fill="#4285f4"
+        d="M17.64 9.2c0-.64-.06-1.25-.16-1.84H9v3.48h4.84a4.14 4.14 0 0 1-1.8 2.72v2.26h2.92c1.7-1.57 2.68-3.88 2.68-6.62Z"
+      />
+      <path
+        fill="#34a853"
+        d="M9 18c2.43 0 4.47-.8 5.96-2.18l-2.92-2.26c-.8.54-1.84.86-3.04.86-2.34 0-4.32-1.58-5.03-3.7H.96v2.34A9 9 0 0 0 9 18Z"
+      />
+      <path
+        fill="#fbbc05"
+        d="M3.97 10.72A5.41 5.41 0 0 1 3.68 9c0-.6.1-1.18.29-1.72V4.94H.96A9 9 0 0 0 0 9c0 1.45.35 2.82.96 4.06l3.01-2.34Z"
+      />
+      <path
+        fill="#ea4335"
+        d="M9 3.58c1.32 0 2.5.45 3.44 1.35l2.58-2.58A8.65 8.65 0 0 0 9 0 9 9 0 0 0 .96 4.94l3.01 2.34C4.68 5.16 6.66 3.58 9 3.58Z"
+      />
+    </svg>
+  )
+}
+
+export function AuthGoogleButton({ label }: { label: string }) {
+  return (
+    <Button
+      type="button"
+      variant="outline"
+      className="h-[53px] w-full gap-2.5 rounded-[60px] border-[#d9d9d9] bg-white px-5 py-4 text-base font-medium text-ma-text hover:bg-[#f5f5f5]"
+    >
+      <GoogleMark />
+      {label}
+    </Button>
+  )
+}
diff --git a/src/features/auth/components/login-form.tsx b/src/features/auth/components/login-form.tsx
index 7f6dec8..1f46d57 100644
--- a/src/features/auth/components/login-form.tsx
+++ b/src/features/auth/components/login-form.tsx
@@ -1,126 +1,114 @@
 "use client"
+import { useState } from "react"
 import { cn } from "@/shared/utils"
 import { Button } from "@/shared/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/shared/ui/card"
 import {
   Field,
   FieldDescription,
+  FieldError,
   FieldGroup,
   FieldLabel,
+  FieldSeparator,
 } from "@/shared/ui/field"
 import { Input } from "@/shared/ui/input"
 import { Controller, useForm } from "react-hook-form"
 import * as z from "zod"
 import { zodResolver } from "@hookform/resolvers/zod"
-import { auth } from "@/infrastructure/auth/auth"
-import { authClient } from "@/infrastructure/auth/client"
 import Link from "next/link"
+import { AuthCodeForm } from "@/features/auth/components/auth-code-form"
+import { AuthGoogleButton } from "@/features/auth/components/auth-google-button"
 
 const formSchema = z.object({
   email: z.email({
     message: "Invalid email address",
   }),
-  password: z
-    .string({
-      message: "Password is required",
-    })
-    .min(8, { error: "Must be more than 8 characters" }),
 })
 
 export function LoginForm({
   className,
   ...props
 }: React.ComponentProps<"div">) {
+  const [loginEmail, setLoginEmail] = useState<string | null>(null)
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
       email: "",
-      password: "",
     },
   })
 
   const onSubmit = async (data: z.infer<typeof formSchema>) => {
-    try {
-      await authClient.signIn.email(data)
-    } catch (error) {
-      console.error(error)
-    }
+    setLoginEmail(data.email)
+  }
+
+  if (loginEmail) {
+    return (
+      <AuthCodeForm
+        email={loginEmail}
+        mode="login"
+        onDifferentAccount={() => setLoginEmail(null)}
+        className={className}
+        {...props}
+      />
+    )
   }
 
   return (
-    <div className={cn("flex flex-col gap-6", className)} {...props}>
-      <Card>
-        <CardHeader>
-          <CardTitle>Login to your account</CardTitle>
-          <CardDescription>
-            Enter your email below to login to your account
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <form onSubmit={form.handleSubmit(onSubmit)}>
-            <FieldGroup>
-              <Controller
-                control={form.control}
-                name="email"
-                render={({ fieldState, field }) => (
-                  <>
-                    <Field data-invalid={fieldState.invalid}>
-                      <FieldLabel htmlFor={field.name}>Email</FieldLabel>
-                      <Input
-                        {...field}
-                        id={field.name}
-                        aria-invalid={fieldState.invalid}
-                        placeholder="m@example.com"
-                      />
-                    </Field>
-                  </>
-                )}
-              />
+    <div className={cn("flex flex-col gap-[45px]", className)} {...props}>
+      <h1 className="text-center text-4xl leading-normal font-extrabold text-ma-text">
+        Log in to continue your learning journey
+      </h1>
+
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <FieldGroup className="items-center gap-[30px]">
+          <div className="flex w-full flex-col gap-5">
+            <Controller
+              control={form.control}
+              name="email"
+              render={({ fieldState, field }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <FieldLabel htmlFor={field.name} className="sr-only">
+                    Email
+                  </FieldLabel>
+                  <Input
+                    {...field}
+                    id={field.name}
+                    type="email"
+                    aria-invalid={fieldState.invalid}
+                    placeholder="Email"
+                    className="h-11 rounded-md border-[#6b7280] px-5 py-5 text-lg placeholder:text-[#6b7280]"
+                  />
+                  <FieldError errors={[fieldState.error]} />
+                </Field>
+              )}
+            />
+
+            <Button
+              type="submit"
+              className="h-[53px] w-full rounded-[60px] bg-ma-text px-5 py-4 text-base font-semibold text-white hover:bg-ma-text/90"
+            >
+              Continue
+            </Button>
+
+            <FieldSeparator className="my-0 w-full text-lg text-[#6b7280] [&_[data-slot=field-separator-content]]:bg-white [&_[data-slot=field-separator-content]]:px-[15px]">
+              other log in option
+            </FieldSeparator>
+          </div>
 
-              <Controller
-                name="password"
-                control={form.control}
-                render={({ fieldState, field }) => (
-                  <Field data-invalid={fieldState.invalid}>
-                    <div className="flex items-center">
-                      <FieldLabel htmlFor={field.name}>Password</FieldLabel>
-                      <a
-                        href="#"
-                        className="ms-auto inline-block text-sm underline-offset-4 hover:underline"
-                      >
-                        Forgot your password?
-                      </a>
-                    </div>
-                    <Input
-                      type="password"
-                      {...field}
-                      id={field.name}
-                      aria-invalid={fieldState.invalid}
-                    />
-                  </Field>
-                )}
-              />
+          <AuthGoogleButton label="Google" />
+        </FieldGroup>
+      </form>
 
-              <Field>
-                <Button type="submit">Login</Button>
-                <Button variant="outline" type="button">
-                  Login with Google
-                </Button>
-                <FieldDescription className="text-center">
-                  Don&apos;t have an account?{" "}
-                  <Link href="/signup">Sign up</Link>
-                </FieldDescription>
-              </Field>
-            </FieldGroup>
-          </form>
-        </CardContent>
-      </Card>
+      <div className="flex w-full flex-wrap items-center justify-center gap-2.5 rounded-md bg-[#f5f5f5] px-[30px] py-[50px] text-lg leading-normal">
+        <FieldDescription className="text-center text-lg leading-normal text-[#6b7280]">
+          Don&apos;t have an account?
+        </FieldDescription>
+        <Link
+          href="/signup"
+          className="text-lg leading-normal font-semibold text-ma-text underline underline-offset-2"
+        >
+          Sign up
+        </Link>
+      </div>
     </div>
   )
 }
diff --git a/src/features/auth/components/signup-form.tsx b/src/features/auth/components/signup-form.tsx
index f912cd3..f8756ef 100644
--- a/src/features/auth/components/signup-form.tsx
+++ b/src/features/auth/components/signup-form.tsx
@@ -1,183 +1,164 @@
 "use client"
+
+import { useState } from "react"
+import Link from "next/link"
+import { Controller, useForm } from "react-hook-form"
+import * as z from "zod"
+import { zodResolver } from "@hookform/resolvers/zod"
+
 import { cn } from "@/shared/utils"
 import { Button } from "@/shared/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/shared/ui/card"
 import {
   Field,
   FieldDescription,
+  FieldError,
   FieldGroup,
   FieldLabel,
+  FieldSeparator,
 } from "@/shared/ui/field"
 import { Input } from "@/shared/ui/input"
-import { Controller, useForm } from "react-hook-form"
-import * as z from "zod"
-import { zodResolver } from "@hookform/resolvers/zod"
-import { authClient } from "@/infrastructure/auth/client"
-import Link from "next/link"
+import { AuthCodeForm } from "@/features/auth/components/auth-code-form"
+import { AuthGoogleButton } from "@/features/auth/components/auth-google-button"
 
-const formSchema = z
-  .object({
-    name: z.string({
-      message: "Name is required",
-    }),
-    email: z.email({
-      message: "Invalid email address",
-    }),
-    password: z
-      .string({
-        message: "Password is required",
-      })
-      .min(8, { error: "Must be more than 8 characters" }),
-    confirmPassword: z
-      .string({
-        message: "Please confirm your password",
-      })
-      .min(8, { error: "Must be more than 8 characters" }),
-  })
-  .refine((data) => data.password === data.confirmPassword, {
-    message: "Passwords do not match",
-    path: ["confirmPassword"],
-  })
+const formSchema = z.object({
+  name: z.string().trim().min(1, { message: "Full name is required" }),
+  email: z.email({
+    message: "Invalid email address",
+  }),
+})
+
+type SignupStep = {
+  name: string
+  email: string
+} | null
 
 export function SignupForm({
   className,
   ...props
 }: React.ComponentProps<"div">) {
+  const [signupStep, setSignupStep] = useState<SignupStep>(null)
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
       name: "",
       email: "",
-      password: "",
-      confirmPassword: "",
     },
   })
 
   const onSubmit = async (data: z.infer<typeof formSchema>) => {
-    try {
-      const { error } = await authClient.signUp.email({
-        name: data.name,
-        email: data.email,
-        password: data.password,
-        callbackURL: "/",
-      })
-      if (error) {
-        console.error(error)
-      }
-    } catch (error) {
-      console.error(error)
-    }
+    setSignupStep(data)
+  }
+
+  if (signupStep) {
+    return (
+      <AuthCodeForm
+        email={signupStep.email}
+        mode="signup"
+        onDifferentAccount={() => setSignupStep(null)}
+        className={className}
+        {...props}
+      />
+    )
   }
 
   return (
-    <div className={cn("flex flex-col gap-6", className)} {...props}>
-      <Card>
-        <CardHeader>
-          <CardTitle>Create an account</CardTitle>
-          <CardDescription>
-            Enter your information below to create your account
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <form onSubmit={form.handleSubmit(onSubmit)}>
-            <FieldGroup>
-              <Controller
-                control={form.control}
-                name="name"
-                render={({ fieldState, field }) => (
-                  <Field data-invalid={fieldState.invalid}>
-                    <FieldLabel htmlFor={field.name}>Full Name</FieldLabel>
-                    <Input
-                      {...field}
-                      id={field.name}
-                      aria-invalid={fieldState.invalid}
-                      placeholder="John Doe"
-                    />
-                  </Field>
-                )}
-              />
+    <div
+      className={cn("flex w-full flex-col items-center gap-[45px]", className)}
+      {...props}
+    >
+      <h1 className="text-center text-4xl leading-normal font-extrabold text-ma-text">
+        Sign up with email
+      </h1>
+
+      <form className="w-full" onSubmit={form.handleSubmit(onSubmit)}>
+        <FieldGroup className="gap-[30px]">
+          <div className="flex w-full flex-col gap-5">
+            <Controller
+              control={form.control}
+              name="name"
+              render={({ fieldState, field }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <FieldLabel htmlFor={field.name} className="sr-only">
+                    Full Name
+                  </FieldLabel>
+                  <Input
+                    {...field}
+                    id={field.name}
+                    aria-invalid={fieldState.invalid}
+                    placeholder="Full Name"
+                    className="h-11 rounded-md border-[#6b7280] px-5 py-5 text-lg placeholder:text-[#6b7280]"
+                  />
+                  <FieldError errors={[fieldState.error]} />
+                </Field>
+              )}
+            />
+
+            <Controller
+              control={form.control}
+              name="email"
+              render={({ fieldState, field }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <FieldLabel htmlFor={field.name} className="sr-only">
+                    Email
+                  </FieldLabel>
+                  <Input
+                    {...field}
+                    id={field.name}
+                    type="email"
+                    aria-invalid={fieldState.invalid}
+                    placeholder="Email"
+                    className="h-11 rounded-md border-[#6b7280] px-5 py-5 text-lg placeholder:text-[#6b7280]"
+                  />
+                  <FieldError errors={[fieldState.error]} />
+                </Field>
+              )}
+            />
+
+            <Button
+              type="submit"
+              className="h-[53px] w-full rounded-[60px] bg-ma-text px-5 py-4 text-base font-semibold text-white hover:bg-ma-text/90"
+            >
+              Continue
+            </Button>
 
-              <Controller
-                control={form.control}
-                name="email"
-                render={({ fieldState, field }) => (
-                  <Field data-invalid={fieldState.invalid}>
-                    <FieldLabel htmlFor={field.name}>Email</FieldLabel>
-                    <Input
-                      {...field}
-                      id={field.name}
-                      type="email"
-                      aria-invalid={fieldState.invalid}
-                      placeholder="m@example.com"
-                    />
-                    <FieldDescription>
-                      We&apos;ll use this to contact you. We will not share your
-                      email with anyone else.
-                    </FieldDescription>
-                  </Field>
-                )}
-              />
+            <FieldSeparator className="my-0 w-full text-lg text-[#6b7280] [&_[data-slot=field-separator-content]]:bg-white [&_[data-slot=field-separator-content]]:px-[15px]">
+              other sign up option
+            </FieldSeparator>
+          </div>
 
-              <Controller
-                control={form.control}
-                name="password"
-                render={({ fieldState, field }) => (
-                  <Field data-invalid={fieldState.invalid}>
-                    <FieldLabel htmlFor={field.name}>Password</FieldLabel>
-                    <Input
-                      {...field}
-                      id={field.name}
-                      type="password"
-                      aria-invalid={fieldState.invalid}
-                    />
-                    <FieldDescription>
-                      Must be at least 8 characters long.
-                    </FieldDescription>
-                  </Field>
-                )}
-              />
+          <AuthGoogleButton label="Google" />
+        </FieldGroup>
+      </form>
 
-              <Controller
-                control={form.control}
-                name="confirmPassword"
-                render={({ fieldState, field }) => (
-                  <Field data-invalid={fieldState.invalid}>
-                    <FieldLabel htmlFor={field.name}>
-                      Confirm Password
-                    </FieldLabel>
-                    <Input
-                      {...field}
-                      id={field.name}
-                      type="password"
-                      aria-invalid={fieldState.invalid}
-                    />
-                    <FieldDescription>
-                      Please confirm your password.
-                    </FieldDescription>
-                  </Field>
-                )}
-              />
+      <FieldDescription className="text-center text-[15px] leading-normal text-[#6b7280]">
+        By signing up, you agree to our{" "}
+        <Link
+          href="/terms"
+          className="text-ma-text underline underline-offset-2"
+        >
+          Terms of Use
+        </Link>{" "}
+        and{" "}
+        <Link
+          href="/privacy"
+          className="text-ma-text underline underline-offset-2"
+        >
+          Privacy Policy
+        </Link>
+        .
+      </FieldDescription>
 
-              <Field>
-                <Button type="submit">Create Account</Button>
-                <Button variant="outline" type="button">
-                  Sign up with Google
-                </Button>
-                <FieldDescription className="text-center">
-                  Already have an account?{" "}
-                  <Link href="/login">Sign in</Link>
-                </FieldDescription>
-              </Field>
-            </FieldGroup>
-          </form>
-        </CardContent>
-      </Card>
+      <div className="flex w-full flex-wrap items-center justify-center gap-2.5 rounded-md bg-[#f5f5f5] px-[30px] py-[50px] text-lg leading-normal">
+        <FieldDescription className="text-center text-lg leading-normal text-[#6b7280]">
+          Already have an account?
+        </FieldDescription>
+        <Link
+          href="/login"
+          className="text-lg leading-normal font-semibold text-ma-text underline underline-offset-2"
+        >
+          Log in
+        </Link>
+      </div>
     </div>
   )
 }

From 92a9c86d6d1cef4b6f6d814d271404078dba63ab Mon Sep 17 00:00:00 2001
From: Obinna Anosike <smartlify09@gmail.com>
Date: Wed, 1 Jul 2026 16:37:01 +0100
Subject: [PATCH 29/29] feat: add gradient hover to auth form buttons, hide CTA
 on auth pages

---
 src/app/(marketing)/login/page.tsx              |  4 ++--
 src/app/(marketing)/signup/page.tsx             |  4 ++--
 src/features/auth/components/auth-code-form.tsx |  5 +++--
 src/features/auth/components/login-form.tsx     | 15 ++++++++-------
 src/features/auth/components/signup-form.tsx    | 17 +++++++++--------
 .../components/conditional-layout-sections.tsx  |  2 +-
 6 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/src/app/(marketing)/login/page.tsx b/src/app/(marketing)/login/page.tsx
index b43c3c7..26f1a17 100644
--- a/src/app/(marketing)/login/page.tsx
+++ b/src/app/(marketing)/login/page.tsx
@@ -2,8 +2,8 @@ import { LoginForm } from "@/features/auth/components/login-form"
 
 export default function Page() {
   return (
-    <div className="flex min-h-svh w-full items-center justify-center bg-white p-6 md:p-10">
-      <div className="w-full max-w-[440px]">
+    <div className="flex min-h-svh w-full items-center justify-center bg-white p-6 md:py-15.5">
+      <div className="w-full max-w-110.5">
         <LoginForm />
       </div>
     </div>
diff --git a/src/app/(marketing)/signup/page.tsx b/src/app/(marketing)/signup/page.tsx
index ad8a690..5219b59 100644
--- a/src/app/(marketing)/signup/page.tsx
+++ b/src/app/(marketing)/signup/page.tsx
@@ -2,8 +2,8 @@ import { SignupForm } from "@/features/auth/components/signup-form"
 
 export default function Page() {
   return (
-    <div className="flex min-h-svh w-full items-center justify-center bg-white p-6 md:p-10">
-      <div className="w-full max-w-[440px]">
+    <div className="flex min-h-svh w-full items-center justify-center bg-white p-6 md:py-15.5">
+      <div className="w-full max-w-110.5">
         <SignupForm />
       </div>
     </div>
diff --git a/src/features/auth/components/auth-code-form.tsx b/src/features/auth/components/auth-code-form.tsx
index 839aef2..d0a734b 100644
--- a/src/features/auth/components/auth-code-form.tsx
+++ b/src/features/auth/components/auth-code-form.tsx
@@ -108,9 +108,10 @@ export function AuthCodeForm({
 
           <Button
             type="submit"
-            className="h-[53px] w-full rounded-[60px] bg-ma-text px-5 py-4 text-base font-semibold text-white hover:bg-ma-text/90"
+            className="group relative h-[53px] w-full overflow-hidden rounded-[60px] bg-ma-text px-5 py-4 text-base font-semibold text-white"
           >
-            {actionLabel}
+            <span className="relative z-10">{actionLabel}</span>
+            <div className="pointer-events-none absolute inset-0 rounded-[60px] bg-gradient-to-r from-ma-glow-blue to-ma-glow-violet opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
           </Button>
 
           <FieldSeparator className="my-0 w-full [&_[data-slot=field-separator-content]]:bg-white">
diff --git a/src/features/auth/components/login-form.tsx b/src/features/auth/components/login-form.tsx
index 1f46d57..2291b24 100644
--- a/src/features/auth/components/login-form.tsx
+++ b/src/features/auth/components/login-form.tsx
@@ -54,7 +54,7 @@ export function LoginForm({
 
   return (
     <div className={cn("flex flex-col gap-[45px]", className)} {...props}>
-      <h1 className="text-center text-4xl leading-normal font-extrabold text-ma-text">
+      <h1 className="text-center text-[28px]/[100%] leading-normal font-extrabold text-ma-text md:text-4xl">
         Log in to continue your learning journey
       </h1>
 
@@ -84,12 +84,13 @@ export function LoginForm({
 
             <Button
               type="submit"
-              className="h-[53px] w-full rounded-[60px] bg-ma-text px-5 py-4 text-base font-semibold text-white hover:bg-ma-text/90"
+              className="group relative h-[53px] w-full overflow-hidden rounded-[60px] bg-ma-text px-5 py-4 text-base font-semibold text-white"
             >
-              Continue
+              <span className="relative z-10">Continue</span>
+              <div className="pointer-events-none absolute inset-0 rounded-[60px] bg-gradient-to-r from-ma-glow-blue to-ma-glow-violet opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
             </Button>
 
-            <FieldSeparator className="my-0 w-full text-lg text-[#6b7280] [&_[data-slot=field-separator-content]]:bg-white [&_[data-slot=field-separator-content]]:px-[15px]">
+            <FieldSeparator className="my-0 w-full text-[#6b7280] md:text-lg [&_[data-slot=field-separator-content]]:bg-white [&_[data-slot=field-separator-content]]:px-[15px]">
               other log in option
             </FieldSeparator>
           </div>
@@ -98,13 +99,13 @@ export function LoginForm({
         </FieldGroup>
       </form>
 
-      <div className="flex w-full flex-wrap items-center justify-center gap-2.5 rounded-md bg-[#f5f5f5] px-[30px] py-[50px] text-lg leading-normal">
-        <FieldDescription className="text-center text-lg leading-normal text-[#6b7280]">
+      <div className="flex w-full flex-wrap items-center justify-center gap-2.5 rounded-md bg-[#f5f5f5] px-[30px] py-[50px] leading-normal">
+        <FieldDescription className="text-center text-base/[100%] text-[#6b7280] md:text-lg">
           Don&apos;t have an account?
         </FieldDescription>
         <Link
           href="/signup"
-          className="text-lg leading-normal font-semibold text-ma-text underline underline-offset-2"
+          className="text-base/[100%] font-semibold text-ma-text underline underline-offset-2 md:text-lg"
         >
           Sign up
         </Link>
diff --git a/src/features/auth/components/signup-form.tsx b/src/features/auth/components/signup-form.tsx
index f8756ef..6a3c682 100644
--- a/src/features/auth/components/signup-form.tsx
+++ b/src/features/auth/components/signup-form.tsx
@@ -66,7 +66,7 @@ export function SignupForm({
       className={cn("flex w-full flex-col items-center gap-[45px]", className)}
       {...props}
     >
-      <h1 className="text-center text-4xl leading-normal font-extrabold text-ma-text">
+      <h1 className="text-center text-[28px]/[100%] leading-normal font-extrabold text-ma-text md:text-4xl">
         Sign up with email
       </h1>
 
@@ -86,7 +86,7 @@ export function SignupForm({
                     id={field.name}
                     aria-invalid={fieldState.invalid}
                     placeholder="Full Name"
-                    className="h-11 rounded-md border-[#6b7280] px-5 py-5 text-lg placeholder:text-[#6b7280]"
+                    className="h-11 rounded-md border-[#6b7280] px-5 py-5 placeholder:text-[#6b7280] md:text-lg"
                   />
                   <FieldError errors={[fieldState.error]} />
                 </Field>
@@ -107,7 +107,7 @@ export function SignupForm({
                     type="email"
                     aria-invalid={fieldState.invalid}
                     placeholder="Email"
-                    className="h-11 rounded-md border-[#6b7280] px-5 py-5 text-lg placeholder:text-[#6b7280]"
+                    className="h-11 rounded-md border-[#6b7280] px-5 py-5 placeholder:text-[#6b7280] md:text-lg"
                   />
                   <FieldError errors={[fieldState.error]} />
                 </Field>
@@ -116,12 +116,13 @@ export function SignupForm({
 
             <Button
               type="submit"
-              className="h-[53px] w-full rounded-[60px] bg-ma-text px-5 py-4 text-base font-semibold text-white hover:bg-ma-text/90"
+              className="group relative h-[53px] w-full overflow-hidden rounded-[60px] bg-ma-text px-5 py-4 text-base font-semibold text-white"
             >
-              Continue
+              <span className="relative z-10">Continue</span>
+              <div className="pointer-events-none absolute inset-0 rounded-[60px] bg-gradient-to-r from-ma-glow-blue to-ma-glow-violet opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
             </Button>
 
-            <FieldSeparator className="my-0 w-full text-lg text-[#6b7280] [&_[data-slot=field-separator-content]]:bg-white [&_[data-slot=field-separator-content]]:px-[15px]">
+            <FieldSeparator className="my-0 w-full text-base/[100%] text-[#6b7280] md:text-lg [&_[data-slot=field-separator-content]]:bg-white [&_[data-slot=field-separator-content]]:px-[15px]">
               other sign up option
             </FieldSeparator>
           </div>
@@ -149,12 +150,12 @@ export function SignupForm({
       </FieldDescription>
 
       <div className="flex w-full flex-wrap items-center justify-center gap-2.5 rounded-md bg-[#f5f5f5] px-[30px] py-[50px] text-lg leading-normal">
-        <FieldDescription className="text-center text-lg leading-normal text-[#6b7280]">
+        <FieldDescription className="text-center text-base/[100%] leading-normal text-[#6b7280] md:text-lg">
           Already have an account?
         </FieldDescription>
         <Link
           href="/login"
-          className="text-lg leading-normal font-semibold text-ma-text underline underline-offset-2"
+          className="text-base/[100%] leading-normal font-semibold text-ma-text underline underline-offset-2 md:text-lg"
         >
           Log in
         </Link>
diff --git a/src/features/marketing/components/conditional-layout-sections.tsx b/src/features/marketing/components/conditional-layout-sections.tsx
index d249580..ebf0116 100644
--- a/src/features/marketing/components/conditional-layout-sections.tsx
+++ b/src/features/marketing/components/conditional-layout-sections.tsx
@@ -8,7 +8,7 @@ export function ConditionalLayoutSections() {
   const pathname = usePathname()
 
   const showFaq = pathname === "/" || pathname === "/about"
-  const showCta = pathname !== "/donation"
+  const showCta = !["/donation", "/login", "/signup"].includes(pathname)
 
   return (
     <>