From 96f284985f546f634b59525f3932fae65d0b5829 Mon Sep 17 00:00:00 2001
From: ThePrabhu <prabhupaloji2008@gmail.com>
Date: Wed, 3 Jun 2026 22:31:07 +0530
Subject: [PATCH 1/2] FEAT : Resource Page Hero Section Redesigned

---
 package-lock.json       |  23 +-----
 src/pages/Resources.tsx | 154 +++++++++++++++++++++++++++-------------
 2 files changed, 108 insertions(+), 69 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 914c19b..ba470b5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -107,7 +107,6 @@
       "integrity": "sha512-vMqyb7XCDMPvJFFOaT9kxtiRh42GwlZEg1/uIgtZshS5a/8OaduUfCi7kynKgc3Tw/6Uo2D+db9qBttghhmxwQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.26.2",
@@ -1000,7 +999,6 @@
       "resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.13.1.tgz",
       "integrity": "sha512-0O33PKrXLoIWkoOO5ByFaLjZehBctSYWnb+xJkIdx2SKP/K9l1UPFXPwASyrOIqyY3ws+7orF/1j7wI5EKzPYQ==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@firebase/component": "0.6.17",
         "@firebase/logger": "0.4.4",
@@ -1067,7 +1065,6 @@
       "resolved": "https://registry.npmjs.org/@firebase/app-compat/-/app-compat-0.4.1.tgz",
       "integrity": "sha512-9VGjnY23Gc1XryoF/ABWtZVJYnaPOnjHM7dsqq9YALgKRtxI1FryvELUVkDaEIUf4In2bfkb9ZENF1S9M273Dw==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@firebase/app": "0.13.1",
         "@firebase/component": "0.6.17",
@@ -1083,8 +1080,7 @@
       "version": "0.9.3",
       "resolved": "https://registry.npmjs.org/@firebase/app-types/-/app-types-0.9.3.tgz",
       "integrity": "sha512-kRVpIl4vVGJ4baogMDINbyrIOtOxqhkZQg4jTq3l8Lw6WSk0xfpEYzezFu+Kl4ve4fbPl79dvwRtaFqAC/ucCw==",
-      "license": "Apache-2.0",
-      "peer": true
+      "license": "Apache-2.0"
     },
     "node_modules/@firebase/auth-compat": {
       "version": "0.5.27",
@@ -1535,7 +1531,6 @@
       "integrity": "sha512-Z4rK23xBCwgKDqmzGVMef+Vb4xso2j5Q8OG0vVL4m4fA5ZjPMYQazu8OJJC3vtQRC3SQ/Pgx/6TPNVsCd70QRw==",
       "hasInstallScript": true,
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.1.0"
       },
@@ -2234,7 +2229,6 @@
       "resolved": "https://registry.npmjs.org/@stripe/stripe-js/-/stripe-js-5.10.0.tgz",
       "integrity": "sha512-PTigkxMdMUP6B5ISS7jMqJAKhgrhZwjprDqR1eATtFfh0OpKVNp110xiH+goeVdrJ29/4LeZJR4FaHHWstsu0A==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12.16"
       }
@@ -2335,7 +2329,6 @@
       "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.105.4.tgz",
       "integrity": "sha512-cEnx+k49knU+qdIP7rXwR6fqEXPHZs+74xFK1R0S8MgQ7v9tbePVdGxvO03n3bPympMdJWVLadARBfU4TgNHCQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@supabase/auth-js": "2.105.4",
         "@supabase/functions-js": "2.105.4",
@@ -2490,7 +2483,6 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.8.1.tgz",
       "integrity": "sha512-hQUVn2Lij2NAxVFEdvIGxT9gP1tq2yM83m+by3whWFsWC+1y8pxxxHUFE1UqDu2VsGi2i6RLcv4QvouM84U+ow==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.8.1",
         "@typescript-eslint/types": "8.8.1",
@@ -2724,7 +2716,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2966,7 +2957,6 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
-      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001663",
         "electron-to-chromium": "^1.5.28",
@@ -3315,8 +3305,7 @@
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "peer": true
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "node_modules/data-uri-to-buffer": {
       "version": "4.0.1",
@@ -3528,7 +3517,6 @@
       "integrity": "sha512-hB4FIzXovouYzwzECDcUkJ4OcfOEkXTv2zRY6B9bkwjx/cprAq0uvm1nl7zvQ0/TsUk0zQiN4uPfJpB9m+rPMQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -5177,7 +5165,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -5453,7 +5440,6 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -5465,7 +5451,6 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -6243,7 +6228,6 @@
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -6327,7 +6311,6 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
       "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
       "dev": true,
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -6447,7 +6430,6 @@
       "integrity": "sha512-2N/55r4JDJ4gdrCvGgINMy+HH3iRpNIz8K6SFwVsA+JbQScLiC+clmAxBgwiSPgcG9U15QmvqCGWzMbqda5zGQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.4.4",
@@ -6541,7 +6523,6 @@
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
diff --git a/src/pages/Resources.tsx b/src/pages/Resources.tsx
index a50144d..3403cae 100644
--- a/src/pages/Resources.tsx
+++ b/src/pages/Resources.tsx
@@ -435,59 +435,117 @@ export default function Resources() {
 
   return (
     <div className="min-h-screen bg-gray-100 pb-24 pt-16 dark:bg-gray-900">
-      <div className="mx-auto max-w-7xl space-y-20 px-6">
-        <header className="pt-8 text-center">
-          <h1 className="mb-4 text-5xl font-extrabold md:text-6xl">
-            <span className="bg-gradient-to-r from-pink-600 to-rose-700 bg-clip-text text-transparent">
-              Verified Support Network
-            </span>
-          </h1>
-          <p className="mx-auto max-w-3xl text-lg leading-8 text-gray-600 dark:text-gray-300">
-            Find verified NGOs, emergency helplines, legal information, and
-            practical safety guidance.
-          </p>
-        </header>
-        <section>
-  <h2 className="mb-6 text-3xl font-bold text-gray-900 dark:text-white">
-    Quick Access Helplines ⚡
-  </h2>
+      <div className="mx-auto max-w-7xl space-y-12 px-6">
+        <header className="py-12 text-center">
+  <h1 className="mb-4 text-6xl font-extrabold">
+    <span className="bg-gradient-to-r from-pink-600 to-rose-600 bg-clip-text text-transparent">
+      Verified Support Network
+    </span>
+  </h1>
+
+  <p className="mx-auto max-w-3xl text-xl text-gray-600 dark:text-gray-300">
+    Find verified NGOs, emergency helplines, legal information,
+    and practical safety guidance.
+  </p>
 
-  {/* Responsive grid for 8 helpline cards */}
-  <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
-    {QUICK_HELPLINES.map((item) => {
-      const Icon = item.icon;
-
-      // Extract the first number for clickable tel links
-      // Example: "1091 / 181" -> "1091"
-      const primaryNumber = item.number
-        .split(" /")[0]
-        .replace(/[^0-9+]/g, "");
-
-      return (
-        <a
-          key={item.title}
-          href={`tel:${primaryNumber}`}
-          className="rounded-3xl border border-pink-200 bg-white p-6 text-center shadow-lg transition hover:-translate-y-1 hover:shadow-2xl dark:border-pink-900 dark:bg-gray-800"
-        >
-          <Icon className="mx-auto mb-4 h-10 w-10 text-pink-600 dark:text-pink-400" />
+  <div className="mt-10 flex flex-wrap justify-center gap-6">
 
-          <h3 className="text-xl font-bold text-gray-900 dark:text-white">
-            {item.title}
-          </h3>
+    <div className="flex items-center gap-3 rounded-2xl border border-pink-200 bg-white px-8 py-4">
+      <Shield className="h-5 w-5 text-pink-600" />
+      <span className="font-semibold text-gray-700">
+        Government Verified
+      </span>
+    </div>
 
-          {/* Slightly smaller text to fit longer numbers */}
-          <p className="mt-2 break-words text-2xl font-extrabold text-pink-600 dark:text-pink-400">
-            {item.number}
-          </p>
+    <div className="flex items-center gap-3 rounded-2xl border border-pink-200 bg-white px-8 py-4">
+      <Zap className="h-5 w-5 text-pink-600" />
+      <span className="font-semibold text-gray-700">
+        24/7 Available
+      </span>
+    </div>
+
+    <div className="flex items-center gap-3 rounded-2xl border border-pink-200 bg-white px-8 py-4">
+      <Users className="h-5 w-5 text-pink-600" />
+      <span className="font-semibold text-gray-700">
+        Nationwide Support
+      </span>
+    </div>
 
-          <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
-            {item.description}
-          </p>
-        </a>
-      );
-    })}
   </div>
-</section>
+</header>
+
+
+        <section>
+          <h2 className="mb-6 text-3xl font-bold text-gray-900 dark:text-white">
+            Quick Access Helplines ⚡
+          </h2>
+
+          {/* Responsive grid for 8 helpline cards */}
+          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
+            {QUICK_HELPLINES.map((item) => {
+              const Icon = item.icon;
+
+              // Extract the first number for clickable tel links
+              // Example: "1091 / 181" -> "1091"
+              const primaryNumber = item.number
+                .split(" /")[0]
+                .replace(/[^0-9+]/g, "");
+
+              return (
+               <a
+                  key={item.title}
+                  href={`tel:${primaryNumber}`}
+                  className="group relative overflow-hidden rounded-3xl border border-pink-200 bg-white p-7 text-center shadow-md transition-all duration-300 hover:-translate-y-2 hover:border-pink-400 hover:shadow-2xl dark:border-pink-900 dark:bg-gray-800"
+                >
+                  {/* Top glow */}
+                  <div className="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-pink-500 to-rose-500 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
+
+                  {/* Icon circle */}
+                  <div className="mx-auto mb-5 flex h-20 w-20 items-center justify-center rounded-full bg-pink-50 transition-transform duration-300 group-hover:scale-110 dark:bg-pink-900/20">
+                    <Icon className="h-10 w-10 text-pink-600 dark:text-pink-400" />
+                  </div>
+
+                  {/* Title */}
+                  <h3 className="text-2xl font-bold text-gray-900 dark:text-white">
+                    {item.title}
+                  </h3>
+
+                  {/* Number */}
+                  <p className="mt-3 text-4xl font-extrabold tracking-tight text-pink-600 dark:text-pink-400">
+                    {item.number}
+                  </p>
+
+                  {/* Description */}
+                  <p className="mt-4 min-h-[56px] text-sm leading-6 text-gray-500 dark:text-gray-400">
+                    {item.description}
+                  </p>
+
+                  {/* CTA */}
+                  <div className="mt-6">
+                    <div className="flex items-center justify-center gap-2 rounded-xl border border-pink-300 py-3 font-semibold text-pink-600 transition-all duration-300 group-hover:bg-pink-600 group-hover:text-white dark:border-pink-700">
+                      <Phone className="h-4 w-4" />
+                      Call Now
+                    </div>
+                  </div>
+              </a>
+              );
+            })}
+          </div>
+    </section>
+
+        <div className="rounded-2xl border border-pink-200 bg-gradient-to-r from-pink-50 to-rose-50 p-5 text-center shadow-md">
+        <div className="flex items-center justify-center gap-3">
+          <Shield className="h-6 w-6 text-pink-600" />
+          <p className="text-sm md:text-base">
+            <span className="font-bold">
+              Your safety matters.
+            </span>{" "}
+            These services are confidential, free, and available 24/7.
+            Don't hesitate to reach out.
+          </p>
+          <Heart className="h-5 w-5 text-pink-600" />
+        </div>
+      </div>
 
         <section>
           <h2 className="mb-6 text-3xl font-bold text-gray-900 dark:text-white">

From 7375066b7ad01cb5916e450a14a09f177be38954 Mon Sep 17 00:00:00 2001
From: ThePrabhu <prabhupaloji2008@gmail.com>
Date: Thu, 4 Jun 2026 23:14:17 +0530
Subject: [PATCH 2/2] Feat : edited call now button

---
 src/pages/Resources.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/Resources.tsx b/src/pages/Resources.tsx
index 3403cae..1b57ae1 100644
--- a/src/pages/Resources.tsx
+++ b/src/pages/Resources.tsx
@@ -495,7 +495,7 @@ export default function Resources() {
                <a
                   key={item.title}
                   href={`tel:${primaryNumber}`}
-                  className="group relative overflow-hidden rounded-3xl border border-pink-200 bg-white p-7 text-center shadow-md transition-all duration-300 hover:-translate-y-2 hover:border-pink-400 hover:shadow-2xl dark:border-pink-900 dark:bg-gray-800"
+                  className="group relative flex h-full flex-col overflow-hidden rounded-3xl border border-pink-200 bg-white p-7 text-center shadow-md transition-all duration-300 hover:-translate-y-2 hover:border-pink-400 hover:shadow-2xl dark:border-pink-900 dark:bg-gray-800"
                 >
                   {/* Top glow */}
                   <div className="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-pink-500 to-rose-500 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
@@ -521,7 +521,7 @@ export default function Resources() {
                   </p>
 
                   {/* CTA */}
-                  <div className="mt-6">
+                  <div className="mt-auto pt-6">
                     <div className="flex items-center justify-center gap-2 rounded-xl border border-pink-300 py-3 font-semibold text-pink-600 transition-all duration-300 group-hover:bg-pink-600 group-hover:text-white dark:border-pink-700">
                       <Phone className="h-4 w-4" />
                       Call Now