From 0dff1289bc25cab7ac88efca6b203a9bc0d3a774 Mon Sep 17 00:00:00 2001
From: "Abdulmalik A. (Personal)" <amalikabdulmalik04@gmail.com>
Date: Thu, 26 Mar 2026 14:09:21 +0100
Subject: [PATCH] feat(impact section): add make an impact section

---
 app/(main)/components/MakeAnImpact.tsx | 35 ++++++++++++++++++++++++++
 app/(main)/page.tsx                    |  3 +++
 2 files changed, 38 insertions(+)
 create mode 100644 app/(main)/components/MakeAnImpact.tsx

diff --git a/app/(main)/components/MakeAnImpact.tsx b/app/(main)/components/MakeAnImpact.tsx
new file mode 100644
index 0000000..54b503f
--- /dev/null
+++ b/app/(main)/components/MakeAnImpact.tsx
@@ -0,0 +1,35 @@
+import Link from "next/link";
+import { Button } from "@/components/ui/Button";
+
+const MakeAnImpact = () => {
+  return (
+    <section className="w-full bg-gradient-to-r from-[#dbeafe] to-[#d1fae5] py-16 sm:py-20 lg:py-24">
+      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+        {/* Heading */}
+        <h2 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 mb-4 tracking-tight">
+          Ready to make an impact?
+        </h2>
+
+        {/* Subtext */}
+        <p className="text-sm sm:text-base text-gray-600 max-w-xl mx-auto mb-8 leading-relaxed">
+          Join thousands of donors supporting causes they believe in with complete transparency.
+        </p>
+
+        {/* CTA Button */}
+        <Link href="/auth/login">
+          <Button
+            variant="primary"
+            size="md"
+            className="bg-[#002E6D] hover:bg-[#003d8f] hover:shadow-lg hover:shadow-blue-900/20 
+                       hover:-translate-y-0.5 transition-all duration-300 ease-out
+                       px-8 py-2.5 text-sm font-semibold rounded-lg"
+          >
+            Create Your Account
+          </Button>
+        </Link>
+      </div>
+    </section>
+  );
+};
+
+export default MakeAnImpact;
diff --git a/app/(main)/page.tsx b/app/(main)/page.tsx
index 0594c68..a5de59f 100644
--- a/app/(main)/page.tsx
+++ b/app/(main)/page.tsx
@@ -1,6 +1,7 @@
 import { WhyChooseUs } from "./components/WhyChooseUs";
 import Footer from "./components/Footer";
 import HeroPage from "./components/HeroPage";
+import MakeAnImpact from "./components/MakeAnImpact";
 
 export default function HomePage() {
   return (
@@ -10,6 +11,8 @@ export default function HomePage() {
       <section>
         <WhyChooseUs />
       </section>
+      {/* ── Make an Impact ───────────────────────────────────────────── */}
+      <MakeAnImpact />
       <Footer />
     </div>
   );