From 735a74cb312f526e2f36b8ba2f02d6a5284ddb6f Mon Sep 17 00:00:00 2001
From: darshan totagi <darshantotagi7975@gmail.com>
Date: Thu, 20 Nov 2025 14:41:53 +0530
Subject: [PATCH 1/3] card animations

---
 client/src/pages/find-donors.tsx |   2 +-
 client/src/pages/home.tsx        | 487 ++++++++++++++++++++-----------
 2 files changed, 322 insertions(+), 167 deletions(-)

diff --git a/client/src/pages/find-donors.tsx b/client/src/pages/find-donors.tsx
index df5aad2..0eee0ef 100644
--- a/client/src/pages/find-donors.tsx
+++ b/client/src/pages/find-donors.tsx
@@ -365,4 +365,4 @@ export default function FindDonors() {
       </div>
     </div>
   );
-} do enhancement
\ No newline at end of file
+} 
\ No newline at end of file
diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index c23674b..10810d6 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -16,28 +16,63 @@ import {
   Plus,
   Search,
   Sparkles,
-  Shield
+  Shield,
 } from "lucide-react";
 
 import { motion } from "framer-motion";
 import type { Donor, Donation } from "@shared/schema";
 
+/* -------------------------------------------------------------------------- */
+/*                                 ANIMATIONS                                 */
+/* -------------------------------------------------------------------------- */
+
+const fadeInUp = {
+  hidden: { opacity: 0, y: 12 },
+  visible: { opacity: 1, y: 0 },
+};
+
+const staggerContainer = {
+  hidden: {},
+  visible: {
+    transition: {
+      staggerChildren: 0.12,
+    },
+  },
+};
+
+const subtleFade = {
+  hidden: { opacity: 0 },
+  visible: { opacity: 1 },
+};
+
 export default function Home() {
   const { toast } = useToast();
   const { isAuthenticated, isLoading } = useAuth();
 
-  // Redirect on logout
+  // Time-based greeting (purely visual, no logic change)
+  const hours = new Date().getHours();
+  const greeting =
+    hours < 12 ? "Good morning" : hours < 17 ? "Good afternoon" : "Good evening";
+
+  /* -------------------------------------------------------------------------- */
+  /*                              AUTH REDIRECT UX                              */
+  /* -------------------------------------------------------------------------- */
+
   useEffect(() => {
     if (!isLoading && !isAuthenticated) {
       toast({
         title: "Unauthorized",
-        description: "You are logged out. Redirecting...",
+        description: "You are logged out. Redirecting you to login…",
         variant: "destructive",
       });
       setTimeout(() => (window.location.href = "/api/login"), 800);
     }
   }, [isAuthenticated, isLoading, toast]);
 
+  /* -------------------------------------------------------------------------- */
+  /*                                   QUERIES                                  */
+  /* -------------------------------------------------------------------------- */
+
   const { data: donor, isLoading: donorLoading } = useQuery<Donor>({
     queryKey: ["/api/donors/me"],
     retry: false,
@@ -61,11 +96,20 @@ export default function Home() {
 
   if (isLoading || donorLoading) {
     return (
-      <div className="min-h-screen bg-background flex flex-col">
+      <div className="min-h-screen bg-gradient-to-b from-background via-background to-muted/40 flex flex-col">
         <Header />
-        <div className="flex items-center justify-center flex-1">
-          <div className="animate-pulse text-primary text-3xl font-semibold">
-            Loading…
+        <div className="flex flex-1 items-center justify-center">
+          <div className="flex flex-col items-center gap-3">
+            <div className="relative">
+              <div className="h-12 w-12 rounded-full border-4 border-primary/30 border-t-primary animate-spin" />
+              <Heart className="h-6 w-6 text-primary absolute inset-0 m-auto" />
+            </div>
+            <p className="text-primary text-lg font-semibold tracking-wide">
+              Preparing your dashboard…
+            </p>
+            <p className="text-xs text-muted-foreground">
+              Fetching your donor profile and activity
+            </p>
           </div>
         </div>
       </div>
@@ -77,236 +121,347 @@ export default function Home() {
   /* -------------------------------------------------------------------------- */
 
   return (
-    <div className="min-h-screen bg-background" data-testid="page-home">
-      <Header />
+    <div
+      className="min-h-screen bg-gradient-to-b from-background via-background to-muted/40"
+      data-testid="page-home"
+    >
+      {/* Soft background accent blur */}
+      <div className="pointer-events-none fixed inset-0 -z-10 opacity-60">
+        <div className="absolute -top-24 -right-10 h-64 w-64 rounded-full bg-primary/10 blur-3xl" />
+        <div className="absolute bottom-0 left-10 h-72 w-72 rounded-full bg-secondary/10 blur-3xl" />
+      </div>
 
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10 space-y-10">
+      <Header />
 
-        {/* Resume Donor Registration */}
+      <motion.main
+        className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10 space-y-10"
+        initial="hidden"
+        animate="visible"
+        variants={subtleFade}
+      >
+        {/* Resume Donor Registration Banner */}
         {!donor && (
           <motion.div
-            initial={{ opacity: 0, y: -10 }}
-            animate={{ opacity: 1, y: 0 }}
-            className="bg-primary/10 border border-primary/20 text-primary px-5 py-4 rounded-xl flex items-center justify-between shadow-sm backdrop-blur-sm"
+            variants={fadeInUp}
+            className="bg-gradient-to-r from-primary/10 via-primary/5 to-secondary/10 border border-primary/20 text-primary px-5 py-4 rounded-2xl flex items-center justify-between gap-4 shadow-sm backdrop-blur-md"
           >
-            <div>
+            <div className="space-y-1">
               <h3 className="font-semibold text-lg flex items-center gap-2">
                 <Sparkles className="h-5 w-5" /> Complete Your Donor Profile
               </h3>
               <p className="text-sm text-primary/70">
-                Unlock credits, increase visibility & help your community.
+                Unlock credits, boost your visibility, and help your local community.
               </p>
             </div>
 
-            <Button asChild variant="secondary" className="font-semibold">
+            <Button asChild variant="secondary" className="font-semibold px-5">
               <Link href="/register-donor">Resume</Link>
             </Button>
           </motion.div>
         )}
 
-        {/* Welcome */}
-        <motion.div
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          className="space-y-1"
+        {/* Welcome Section */}
+        <motion.section
+          className="flex flex-col gap-2"
+          initial="hidden"
+          animate="visible"
+          variants={fadeInUp}
         >
-          <h1 className="text-4xl font-extrabold bg-gradient-to-r from-primary to-secondary text-transparent bg-clip-text">
+          <p className="text-xs font-medium text-muted-foreground uppercase tracking-[0.18em] flex items-center gap-2">
+            <span className="inline-flex h-1.5 w-1.5 rounded-full bg-green-500 animate-pulse" />
+            {greeting}, {donor?.name ?? "donor"}
+          </p>
+
+          <h1 className="text-4xl md:text-5xl font-extrabold bg-gradient-to-r from-primary via-secondary to-primary/80 text-transparent bg-clip-text tracking-tight">
             Welcome to PulseConnect
           </h1>
-          <p className="text-muted-foreground text-lg">
-            Your dashboard for donations & community impact.
+
+          <p className="text-muted-foreground text-base md:text-lg max-w-2xl">
+            Track your donations, manage your credits, and see the impact you&apos;re
+            making in your community.
           </p>
-        </motion.div>
+        </motion.section>
 
         {/* Quick Actions */}
-        <motion.div
+        <motion.section
           className="grid md:grid-cols-2 gap-6"
+          variants={staggerContainer}
           initial="hidden"
           animate="visible"
-          variants={{
-            visible: { transition: { staggerChildren: 0.12 } },
-          }}
         >
           {[
             {
               title: "Become a Donor",
-              desc: "Register to help save lives",
+              desc: "Register now and be the reason someone gets a second chance.",
               icon: <Heart className="text-secondary" size={24} />,
               link: "/register-donor",
               variant: "secondary",
-              iconColor: "bg-secondary/10",
+              iconColor: "bg-secondary/15",
+              chip: "Start giving",
             },
             {
               title: "Find Donors",
-              desc: "Search for blood donors nearby",
+              desc: "Search verified donors nearby whenever there is an emergency.",
               icon: <Search className="text-accent" size={24} />,
               link: "/find-donors",
               variant: "outline",
               iconColor: "bg-accent/10",
+              chip: "Emergency ready",
             },
           ].map((item, idx) => (
             <motion.div
               key={idx}
-              variants={{
-                hidden: { opacity: 0, y: 20 },
-                visible: { opacity: 1, y: 0 },
-              }}
+              variants={fadeInUp}
+              className="group"
             >
-              <Card className="hover:shadow-lg transition">
-                <CardContent className="p-6 flex items-center gap-4">
-                  <div className={`${item.iconColor} p-3 rounded-full`}>{item.icon}</div>
-                  <div className="flex-1">
-                    <h3 className="font-semibold">{item.title}</h3>
-                    <p className="text-sm text-muted-foreground">{item.desc}</p>
+              <Card className="relative overflow-hidden border border-border/60 bg-card/80 backdrop-blur-md transition-all duration-200 group-hover:-translate-y-1 group-hover:shadow-xl">
+                <div className="pointer-events-none absolute inset-0 opacity-0 group-hover:opacity-100 bg-gradient-to-tr from-primary/5 via-transparent to-secondary/10 transition-opacity" />
+                <CardContent className="relative p-6 flex items-center gap-4">
+                  <div
+                    className={`${item.iconColor} p-3 rounded-2xl inline-flex items-center justify-center`}
+                  >
+                    {item.icon}
+                  </div>
+                  <div className="flex-1 space-y-1">
+                    <div className="flex items-center gap-2">
+                      <span className="text-[10px] uppercase tracking-[0.18em] text-muted-foreground">
+                        {item.chip}
+                      </span>
+                    </div>
+                    <h3 className="font-semibold text-lg">{item.title}</h3>
+                    <p className="text-sm text-muted-foreground leading-snug">
+                      {item.desc}
+                    </p>
                   </div>
 
-                  <Button asChild variant={item.variant as any}>
-                    <Link href={item.link}>{item.title === "Find Donors" ? "Search" : "Register"}</Link>
+                  <Button
+                    asChild
+                    variant={item.variant as any}
+                    className="whitespace-nowrap"
+                  >
+                    <Link href={item.link}>
+                      {item.title === "Find Donors" ? "Search" : "Register"}
+                    </Link>
                   </Button>
                 </CardContent>
               </Card>
             </motion.div>
           ))}
-        </motion.div>
+        </motion.section>
 
-        {/* Donor Profile Section */}
+        {/* Donor Profile / Empty State */}
         {donor ? (
-          <motion.div
+          <motion.section
             className="grid lg:grid-cols-3 gap-6"
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
+            initial="hidden"
+            animate="visible"
+            variants={staggerContainer}
           >
             {/* Donor Info */}
-            <Card className="hover:shadow-md transition rounded-xl">
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2">
-                  <Heart className="text-secondary" size={20} /> Donor Profile
-                </CardTitle>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                <div className="flex justify-between">
-                  <span className="text-muted-foreground">Blood Group:</span>
-                  <Badge variant="secondary">{donor.bloodGroup}</Badge>
-                </div>
-                <div className="flex justify-between">
-                  <span className="text-muted-foreground">Total Donations:</span>
-                  <span className="font-semibold">{donor.totalDonations}</span>
-                </div>
-                <div className="flex justify-between">
-                  <span className="text-muted-foreground">Credits:</span>
-                  <span className="font-semibold text-primary">{donor.credits}</span>
-                </div>
-                <div className="flex justify-between">
-                  <span className="text-muted-foreground">Status:</span>
-                  <Badge variant={eligibility?.canDonate ? "default" : "destructive"}>
-                    {eligibilityLoading
-                      ? "Checking..."
-                      : eligibility?.canDonate
-                      ? "Eligible"
-                      : "Not Eligible"}
-                  </Badge>
-                </div>
-              </CardContent>
-            </Card>
+            <motion.div variants={fadeInUp}>
+              <Card className="hover:shadow-xl hover:-translate-y-0.5 transition-all duration-200 rounded-2xl border border-border/70 bg-card/80 backdrop-blur-md">
+                <CardHeader className="pb-3">
+                  <CardTitle className="flex items-center justify-between gap-2">
+                    <span className="inline-flex items-center gap-2">
+                      <Heart className="text-secondary" size={20} />
+                      <span>Donor Profile</span>
+                    </span>
+                    <Badge variant="outline" className="text-[11px] px-2 py-0.5">
+                      <span className="inline-flex items-center gap-1">
+                        <Shield className="h-3 w-3" />
+                        Verified
+                      </span>
+                    </Badge>
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-4 text-sm">
+                  <div className="flex justify-between items-center">
+                    <span className="text-muted-foreground">Blood Group</span>
+                    <Badge variant="secondary" className="font-semibold">
+                      {donor.bloodGroup}
+                    </Badge>
+                  </div>
+                  <div className="flex justify-between items-center">
+                    <span className="text-muted-foreground">Total Donations</span>
+                    <span className="font-semibold">{donor.totalDonations}</span>
+                  </div>
+                  <div className="flex justify-between items-center">
+                    <span className="text-muted-foreground">Credits</span>
+                    <span className="font-semibold text-primary">
+                      {donor.credits}
+                    </span>
+                  </div>
+                  <div className="flex justify-between items-center">
+                    <span className="text-muted-foreground">Status</span>
+                    <Badge
+                      variant={eligibility?.canDonate ? "default" : "destructive"}
+                      className="font-medium"
+                    >
+                      {eligibilityLoading
+                        ? "Checking..."
+                        : eligibility?.canDonate
+                        ? "Eligible to donate"
+                        : "Not eligible yet"}
+                    </Badge>
+                  </div>
+                </CardContent>
+              </Card>
+            </motion.div>
 
             {/* Recent Activity */}
-            <Card className="hover:shadow-md transition rounded-xl">
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2">
-                  <Calendar className="text-primary" size={20} /> Recent Activity
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                {donationsLoading ? (
-                  <p className="text-muted-foreground">Loading...</p>
-                ) : donations.length ? (
-                  <div className="space-y-4">
-                    {donations.slice(0, 3).map((d) => (
-                      <div key={d.id} className="flex justify-between items-center">
-                        <div>
-                          <p className="font-medium">Blood Donation</p>
-                          <p className="text-sm text-muted-foreground">
-                            {new Date(d.donationDate).toLocaleDateString()}
-                          </p>
+            <motion.div variants={fadeInUp}>
+              <Card className="hover:shadow-xl hover:-translate-y-0.5 transition-all duration-200 rounded-2xl border border-border/70 bg-card/80 backdrop-blur-md">
+                <CardHeader className="pb-3">
+                  <CardTitle className="flex items-center gap-2">
+                    <Calendar className="text-primary" size={20} /> Recent Activity
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-3 text-sm">
+                  {donationsLoading ? (
+                    <p className="text-muted-foreground">Loading your activity…</p>
+                  ) : donations.length ? (
+                    <div className="space-y-3">
+                      {donations.slice(0, 3).map((d) => (
+                        <div
+                          key={d.id}
+                          className="flex justify-between items-center rounded-xl border border-border/60 px-3 py-2.5 bg-background/60"
+                        >
+                          <div>
+                            <p className="font-medium text-sm">Blood Donation</p>
+                            <p className="text-xs text-muted-foreground">
+                              {new Date(d.donationDate).toLocaleDateString()}
+                            </p>
+                          </div>
+                          <Badge variant="outline" className="text-xs font-semibold">
+                            +{d.creditsEarned} credits
+                          </Badge>
                         </div>
-                        <Badge variant="outline">+{d.creditsEarned} credits</Badge>
-                      </div>
-                    ))}
+                      ))}
+                    </div>
+                  ) : (
+                    <p className="text-muted-foreground">
+                      No donations recorded yet. Your first donation could save a life.
+                    </p>
+                  )}
+                </CardContent>
+              </Card>
+            </motion.div>
+
+            {/* Community Impact */}
+            <motion.div variants={fadeInUp}>
+              <Card className="hover:shadow-xl hover:-translate-y-0.5 transition-all duration-200 rounded-2xl border border-border/70 bg-card/80 backdrop-blur-md">
+                <CardHeader className="pb-3">
+                  <CardTitle className="flex items-center gap-2">
+                    <Users className="text-accent" size={20} /> Community Impact
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-6 text-center text-sm">
+                  <div className="space-y-1">
+                    <p className="text-xs uppercase tracking-[0.2em] text-muted-foreground">
+                      Lives touched
+                    </p>
+                    <p className="text-3xl font-bold">
+                      {donor.totalDonations || 0}
+                    </p>
+                    <p className="text-muted-foreground text-xs">
+                      Every donation counts towards someone&apos;s story.
+                    </p>
                   </div>
-                ) : (
-                  <p className="text-muted-foreground">No donations yet</p>
-                )}
+                  <div className="space-y-1">
+                    <p className="text-xs uppercase tracking-[0.2em] text-muted-foreground">
+                      Credits earned
+                    </p>
+                    <p className="text-3xl font-bold text-primary">
+                      {donor.credits || 0}
+                    </p>
+                    <p className="text-muted-foreground text-xs">
+                      Use credits for blood requests when you or your family need help.
+                    </p>
+                  </div>
+                </CardContent>
+              </Card>
+            </motion.div>
+          </motion.section>
+        ) : (
+          <motion.section
+            initial="hidden"
+            animate="visible"
+            variants={fadeInUp}
+          >
+            <Card className="p-10 text-center hover:shadow-xl hover:-translate-y-0.5 transition-all duration-200 rounded-2xl border border-border/70 bg-card/80 backdrop-blur-md">
+              <div className="mx-auto mb-5 inline-flex h-16 w-16 items-center justify-center rounded-full bg-primary/10">
+                <Heart size={32} className="text-primary" />
+              </div>
+              <h3 className="text-2xl font-semibold mb-2">Become a PulseConnect Donor</h3>
+              <p className="text-muted-foreground mb-5 max-w-md mx-auto text-sm">
+                Create your donor profile, start donating, and earn credits you can use
+                for future blood requests for yourself or your loved ones.
+              </p>
+              <Button asChild variant="secondary" className="px-6">
+                <Link href="/register-donor">
+                  <Plus className="h-4 w-4 mr-2" />
+                  Complete registration
+                </Link>
+              </Button>
+            </Card>
+          </motion.section>
+        )}
+
+        {/* Tips & Credit Info */}
+        <motion.section
+          className="grid md:grid-cols-2 gap-6"
+          initial="hidden"
+          animate="visible"
+          variants={staggerContainer}
+        >
+          <motion.div variants={fadeInUp}>
+            <Card className="hover:shadow-xl hover:-translate-y-0.5 transition-all duration-200 rounded-2xl border border-border/70 bg-card/80 backdrop-blur-md">
+              <CardHeader className="pb-3">
+                <CardTitle className="flex items-center gap-2 text-base">
+                  <Sparkles className="h-4 w-4 text-secondary" />
+                  Donation Tips
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="text-sm text-muted-foreground space-y-2">
+                <p>• Eat a healthy, balanced meal before donating.</p>
+                <p>• Stay hydrated before and after your donation.</p>
+                <p>• Get a good night&apos;s rest the day before.</p>
+                <p>• Avoid alcohol 24 hours prior to donating.</p>
+                <p>• Carry a valid ID and prefer iron-rich foods regularly.</p>
               </CardContent>
             </Card>
+          </motion.div>
 
-            {/* Community Impact */}
-            <Card className="hover:shadow-md transition rounded-xl">
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2">
-                  <Users className="text-accent" size={20} /> Community Impact
+          <motion.div variants={fadeInUp}>
+            <Card className="hover:shadow-xl hover:-translate-y-0.5 transition-all duration-200 rounded-2xl border border-border/70 bg-card/80 backdrop-blur-md">
+              <CardHeader className="pb-3">
+                <CardTitle className="flex items-center gap-2 text-base">
+                  <Award className="h-4 w-4 text-secondary" />
+                  Credit System
                 </CardTitle>
               </CardHeader>
-              <CardContent className="space-y-6 text-center">
-                <div>
-                  <p className="text-3xl font-bold">{donor.totalDonations}</p>
-                  <p className="text-muted-foreground text-sm">Lives Impacted</p>
+              <CardContent className="space-y-3 text-sm">
+                <div className="flex items-center gap-2">
+                  <Award className="text-secondary" size={16} />
+                  <span>Earn 5 credits for each successful donation.</span>
                 </div>
-                <div>
-                  <p className="text-3xl font-bold text-primary">{donor.credits}</p>
-                  <p className="text-muted-foreground text-sm">Credits Earned</p>
+                <div className="flex items-center gap-2">
+                  <Heart className="text-accent" size={16} />
+                  <span>Redeem credits towards verified blood requests.</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Calendar className="text-primary" size={16} />
+                  <span>We recommend waiting at least 6 months between donations.</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Shield className="text-primary" size={16} />
+                  <span>PulseConnect follows a safe, verified donation cycle.</span>
                 </div>
               </CardContent>
             </Card>
           </motion.div>
-        ) : (
-          <Card className="p-10 text-center hover:shadow-md transition rounded-xl">
-            <Heart size={48} className="mx-auto mb-4 text-muted-foreground" />
-            <h3 className="text-xl font-semibold mb-2">Complete Your Donor Profile</h3>
-            <p className="text-muted-foreground mb-4">
-              Register as a donor to start saving lives and earning credits
-            </p>
-            <Button asChild variant="secondary">
-              <Link href="/register-donor">complete registration</Link>
-            </Button>
-          </Card>
-        )}
-
-        {/* Tips & Credit Info */}
-        <div className="grid md:grid-cols-2 gap-6">
-          <Card className="hover:shadow-md transition rounded-xl">
-            <CardHeader>
-              <CardTitle>Donation Tips</CardTitle>
-            </CardHeader>
-            <CardContent className="text-sm text-muted-foreground space-y-2">
-              <p>• Eat a healthy meal before donating</p>
-              <p>• Stay hydrated before and after donation</p>
-              <p>• Rest the night before</p>
-              <p>• Avoid alcohol 24 hours before</p>
-              <p>• Bring a valid ID & eat iron-rich foods</p>
-            </CardContent>
-          </Card>
-
-          <Card className="hover:shadow-md transition rounded-xl">
-            <CardHeader>
-              <CardTitle>Credit System</CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-3">
-              <div className="flex items-center gap-2 text-sm">
-                <Award className="text-secondary" size={16} /> Earn 5 credits per donation
-              </div>
-              <div className="flex items-center gap-2 text-sm">
-                <Heart className="text-accent" size={16} /> Redeem credits for blood requests
-              </div>
-              <div className="flex items-center gap-2 text-sm">
-                <Calendar className="text-primary" size={16} /> Donate every 6 months
-              </div>
-              <div className="flex items-center gap-2 text-sm">
-                <Shield className="text-primary" size={16} /> Verified safe donation cycle
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-      </div>
+        </motion.section>
+      </motion.main>
     </div>
   );
 }

From bb07078a1931db9f5cf974b72ffc1cfd4b1b9069 Mon Sep 17 00:00:00 2001
From: darshan totagi <darshantotagi7975@gmail.com>
Date: Fri, 21 Nov 2025 08:33:39 +0530
Subject: [PATCH 2/3] landing page

---
 client/src/pages/landing.tsx   | 339 ++++++++++++++++-----------------
 client/src/pages/not-found.tsx |   2 +-
 2 files changed, 168 insertions(+), 173 deletions(-)

diff --git a/client/src/pages/landing.tsx b/client/src/pages/landing.tsx
index ee21b51..e72cd70 100644
--- a/client/src/pages/landing.tsx
+++ b/client/src/pages/landing.tsx
@@ -1,206 +1,201 @@
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
-import { Heart, Search, MapPin, MessageCircle, Shield, Award, Facebook, Instagram, Linkedin } from "lucide-react";
+import { Heart, Search, MapPin, MessageCircle, Shield, Award } from "lucide-react";
 import Header from "@/components/header";
-import { motion } from "framer-motion";
 
 export default function Landing() {
   return (
     <div className="min-h-screen bg-background">
       <Header />
-
+      
       {/* Hero Section */}
-      <section className="bg-gradient-to-br from-primary/10 via-secondary/10 to-accent/10 py-20">
-        <motion.div
-          initial={{ opacity: 0, y: 30 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.5 }}
-          className="max-w-7xl mx-auto px-6 lg:px-8 text-center"
-        >
-          <h2 className="text-5xl font-extrabold mb-6 tracking-tight bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
-            Save Lives, Connect Hearts
-          </h2>
-
-          <p className="text-xl text-muted-foreground max-w-2xl mx-auto mb-10">
-            Join the largest blood donation network. Earn credits for every donation and connect instantly with those in need.
-          </p>
-
-          <div className="flex justify-center gap-6 flex-wrap">
-            <Button size="lg" className="px-8 shadow hover:scale-105 transition">
-              Get Started
-            </Button>
-            <Button size="lg" variant="outline" className="px-8 hover:scale-105 transition">
-              How It Works
-            </Button>
+      <section className="bg-gradient-to-br from-primary/5 to-secondary/5 py-16" data-testid="section-hero">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-12">
+            <h2 className="text-4xl font-bold text-foreground mb-4">Save Lives, Connect Hearts</h2>
+            <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
+              Join the largest blood donation network. Connect donors with those in need, earn credits for donations, and make a difference in your community.
+            </p>
           </div>
-        </motion.div>
-      </section>
-
-      {/* Registration Options */}
-      <section className="py-20">
-        <div className="max-w-7xl mx-auto px-6 lg:px-8 grid md:grid-cols-2 gap-10">
           
-          {[
-            {
-              title: "Blood Donor",
-              desc: "Register as a donor, help save lives, and earn credits for future needs",
-              icon: <Heart size={32} className="text-secondary" />,
-              href: "/api/login",
-              bg: "bg-secondary/10",
-              btn: "bg-secondary text-secondary-foreground hover:bg-secondary/90",
-            },
-            {
-              title: "Blood Finder",
-              desc: "Find donors near your location and connect instantly via WhatsApp",
-              icon: <Search size={32} className="text-accent" />,
-              href: "/api/login",
-              bg: "bg-accent/10",
-              btn: "bg-accent text-accent-foreground hover:bg-accent/90",
-            }
-          ].map((card, i) => (
-            <motion.div
-              key={i}
-              initial={{ opacity: 0, y: 30 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.45 }}
-              viewport={{ once: true }}
-            >
-              <Card className="shadow-md hover:shadow-xl transition-all hover:-translate-y-1">
-                <CardContent className="p-8 text-center">
-                  <div className={`${card.bg} w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6 animate-float`}>
-                    {card.icon}
+          {/* Registration Options */}
+          <div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
+            {/* Blood Donor Registration */}
+            <Card className="shadow-sm hover:shadow-md transition-shadow">
+              <CardContent className="p-8">
+                <div className="text-center mb-6">
+                  <div className="bg-secondary/10 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
+                    <Heart className="text-secondary" size={32} />
                   </div>
-                  <h3 className="text-3xl font-semibold mb-3">{card.title}</h3>
-                  <p className="text-muted-foreground mb-6">{card.desc}</p>
-
-                  <Button asChild className={`w-full py-6 text-lg font-medium ${card.btn}`}>
-                    <a href={card.href}>Continue</a>
-                  </Button>
-                </CardContent>
-              </Card>
-            </motion.div>
-          ))}
-        </div>
-      </section>
-
-      {/* Credit System */}
-      <section className="py-20 bg-muted/30">
-        <div className="max-w-7xl mx-auto px-6 lg:px-8 text-center">
-          <h2 className="text-4xl font-bold mb-4">Credit System</h2>
-          <p className="text-lg text-muted-foreground mb-12">Earn credits for every donation and redeem them when you need blood</p>
-
-          <div className="grid md:grid-cols-3 gap-10 max-w-4xl mx-auto">
-            {[
-              { icon: <Heart size={32} className="text-secondary" />, title: "Earn Credits", desc: "Get 5 credits for each successful blood donation", bg: "bg-secondary/10" },
-              { icon: <Award size={32} className="text-primary" />, title: "Use Credits", desc: "Redeem credits for free blood when needed", bg: "bg-primary/10" },
-              { icon: <Shield size={32} className="text-accent" />, title: "6-Month Rule", desc: "Safe tracking for donation intervals", bg: "bg-accent/10" }
-            ].map((item, i) => (
-              <motion.div
-                key={i}
-                initial={{ opacity: 0, y: 25 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.45 }}
-                viewport={{ once: true }}
-              >
-                <Card className="text-center shadow hover:shadow-lg transition">
-                  <CardContent className="p-8">
-                    <div className={`${item.bg} w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6 animate-float-slow`}>
-                      {item.icon}
-                    </div>
-                    <h3 className="text-xl font-semibold mb-3">{item.title}</h3>
-                    <p className="text-muted-foreground">{item.desc}</p>
-                  </CardContent>
-                </Card>
-              </motion.div>
-            ))}
+                  <h3 className="text-2xl font-semibold text-foreground mb-2">Blood Donor</h3>
+                  <p className="text-muted-foreground">Register as a donor, help save lives, and earn credits for future needs</p>
+                </div>
+                <Button 
+                  asChild
+                  className="w-full bg-secondary text-secondary-foreground hover:bg-secondary/90"
+                  data-testid="button-register-donor"
+                >
+                  <a href="/api/login">Register as Donor</a>
+                </Button>
+              </CardContent>
+            </Card>
+            
+            {/* Blood Finder Registration */}
+            <Card className="shadow-sm hover:shadow-md transition-shadow">
+              <CardContent className="p-8">
+                <div className="text-center mb-6">
+                  <div className="bg-accent/10 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
+                    <Search className="text-accent" size={32} />
+                  </div>
+                  <h3 className="text-2xl font-semibold text-foreground mb-2">Blood Finder</h3>
+                  <p className="text-muted-foreground">Find donors in your area quickly and connect directly via WhatsApp</p>
+                </div>
+                <Button 
+                  asChild
+                  className="w-full bg-accent text-accent-foreground hover:bg-accent/90"
+                  data-testid="button-find-donors"
+                >
+                  <a href="/api/login">Find Blood Donors</a>
+                </Button>
+              </CardContent>
+            </Card>
           </div>
         </div>
       </section>
 
-      {/* Features */}
-      <section className="py-20">
-        <div className="max-w-7xl mx-auto px-6 lg:px-8 text-center">
-          <h2 className="text-4xl font-bold mb-4">Why Choose PulseConnect?</h2>
-          <p className="text-lg text-muted-foreground mb-12">Advanced features designed for fast and safe blood donation</p>
-
-          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-10">
-            {[
-              { icon: <MapPin size={32} className="text-primary" />, title: "Location-Based", desc: "Find donors within your nearest radius" },
-              { icon: <MessageCircle size={32} className="text-secondary" />, title: "Direct Contact", desc: "Instant WhatsApp communication" },
-              { icon: <Shield size={32} className="text-accent" />, title: "Safe Tracking", desc: "Donation intervals monitored" },
-              { icon: <Award size={32} className="text-purple-600" />, title: "Reward System", desc: "Earn credits, unlock benefits" },
-            ].map((item, i) => (
-              <motion.div
-                key={i}
-                initial={{ opacity: 0, y: 25 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.45 }}
-                viewport={{ once: true }}
-                className="text-center"
-              >
-                <div className="bg-primary/5 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6">
-                  {item.icon}
+      {/* Credits System Display */}
+      <section className="bg-muted/20 py-16" data-testid="section-credits">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl font-bold text-foreground mb-4">Credit System</h2>
+            <p className="text-xl text-muted-foreground">Earn credits for every donation and use them when you need blood</p>
+          </div>
+          
+          <div className="grid md:grid-cols-3 gap-8 max-w-4xl mx-auto">
+            <Card className="text-center shadow-sm">
+              <CardContent className="p-6">
+                <div className="bg-secondary/10 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
+                  <Heart className="text-secondary" size={32} />
+                </div>
+                <h3 className="text-xl font-semibold text-foreground mb-2">Earn Credits</h3>
+                <p className="text-muted-foreground">Get 5 credits for each successful blood donation</p>
+              </CardContent>
+            </Card>
+            
+            <Card className="text-center shadow-sm">
+              <CardContent className="p-6">
+                <div className="bg-primary/10 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
+                  <Award className="text-primary" size={32} />
+                </div>
+                <h3 className="text-xl font-semibold text-foreground mb-2">Use Credits</h3>
+                <p className="text-muted-foreground">Redeem credits for free blood when you need it most</p>
+              </CardContent>
+            </Card>
+            
+            <Card className="text-center shadow-sm">
+              <CardContent className="p-6">
+                <div className="bg-accent/10 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
+                  <Shield className="text-accent" size={32} />
                 </div>
-                <h3 className="text-lg font-semibold mb-3">{item.title}</h3>
-                <p className="text-muted-foreground">{item.desc}</p>
-              </motion.div>
-            ))}
+                <h3 className="text-xl font-semibold text-foreground mb-2">6-Month Rule</h3>
+                <p className="text-muted-foreground">Credits are valid and donations tracked for safe intervals</p>
+              </CardContent>
+            </Card>
           </div>
         </div>
       </section>
 
-      {/* Footer */}
-      <footer className="bg-card border-t py-14">
-        <div className="max-w-7xl mx-auto px-6 lg:px-8 grid md:grid-cols-4 gap-10">
+      {/* Features Section */}
+      <section className="bg-background py-16" data-testid="section-features">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl font-bold text-foreground mb-4">Why Choose PulseConnect?</h2>
+            <p className="text-xl text-muted-foreground">Advanced features to make blood donation efficient and rewarding</p>
+          </div>
           
-          <div className="md:col-span-2">
-            <div className="flex items-center space-x-4 mb-6">
-              <div className="w-12 h-12 bg-primary rounded-full flex items-center justify-center">
-                <Heart className="text-white" size={22} />
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
+            <div className="text-center">
+              <div className="bg-primary/10 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
+                <MapPin className="text-primary" size={32} />
               </div>
-              <div>
-                <h1 className="text-xl font-bold">PulseConnect</h1>
-                <p className="text-sm text-muted-foreground">Blood Bank Network</p>
+              <h3 className="text-lg font-semibold text-foreground mb-2">Location-Based</h3>
+              <p className="text-muted-foreground">Find donors within 5km radius using GPS technology</p>
+            </div>
+            
+            <div className="text-center">
+              <div className="bg-secondary/10 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
+                <MessageCircle className="text-secondary" size={32} />
               </div>
+              <h3 className="text-lg font-semibold text-foreground mb-2">Direct Contact</h3>
+              <p className="text-muted-foreground">Connect instantly via WhatsApp for quick communication</p>
             </div>
-            <p className="text-muted-foreground mb-6">
-              Connecting blood donors with those in need — making donation simple, safe, and rewarding.
-            </p>
-
-            {/* Social Icons */}
-            <div className="flex space-x-4">
-              <Facebook className="text-muted-foreground hover:text-primary cursor-pointer" />
-              <Instagram className="text-muted-foreground hover:text-primary cursor-pointer" />
-              <Linkedin className="text-muted-foreground hover:text-primary cursor-pointer" />
+            
+            <div className="text-center">
+              <div className="bg-accent/10 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
+                <Shield className="text-accent" size={32} />
+              </div>
+              <h3 className="text-lg font-semibold text-foreground mb-2">Safe Tracking</h3>
+              <p className="text-muted-foreground">Monitor donation intervals for health and safety</p>
+            </div>
+            
+            <div className="text-center">
+              <div className="bg-purple-500/10 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
+                <Award className="text-purple-600" size={32} />
+              </div>
+              <h3 className="text-lg font-semibold text-foreground mb-2">Reward System</h3>
+              <p className="text-muted-foreground">Earn and redeem credits for helping others</p>
             </div>
           </div>
+        </div>
+      </section>
 
-          {/* Links */}
-          <div>
-            <h3 className="font-semibold mb-4">Quick Links</h3>
-            <ul className="space-y-3 text-muted-foreground">
-              <li><a href="#">About Us</a></li>
-              <li><a href="#">How It Works</a></li>
-              <li><a href="#">Safety Guidelines</a></li>
-              <li><a href="#">Support</a></li>
-            </ul>
+      {/* Footer */}
+      <footer className="bg-card border-t border-border py-12" data-testid="footer">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid md:grid-cols-4 gap-8">
+            <div className="md:col-span-2">
+              <div className="flex items-center space-x-3 mb-4">
+                <div className="blood-drop w-10 h-10 rounded-full flex items-center justify-center">
+                  <Heart className="text-white" size={20} />
+                </div>
+                <div>
+                  <h1 className="text-xl font-bold text-foreground">PulseConnect</h1>
+                  <p className="text-xs text-muted-foreground">Blood Bank Network</p>
+                </div>
+              </div>
+              <p className="text-muted-foreground mb-4">
+                Connecting blood donors with those in need, making blood donation more accessible and rewarding for everyone.
+              </p>
+            </div>
+            
+            <div>
+              <h3 className="font-semibold text-foreground mb-4">Quick Links</h3>
+              <ul className="space-y-2">
+                <li><a href="#" className="text-muted-foreground hover:text-primary">About Us</a></li>
+                <li><a href="#" className="text-muted-foreground hover:text-primary">How It Works</a></li>
+                <li><a href="#" className="text-muted-foreground hover:text-primary">Safety Guidelines</a></li>
+                <li><a href="#" className="text-muted-foreground hover:text-primary">Support</a></li>
+              </ul>
+            </div>
+            
+            <div>
+              <h3 className="font-semibold text-foreground mb-4">Emergency</h3>
+              <ul className="space-y-2">
+                <li><a href="#" className="text-muted-foreground hover:text-accent">Blood Banks</a></li>
+                <li><a href="#" className="text-muted-foreground hover:text-accent">Hospitals</a></li>
+                <li><a href="#" className="text-muted-foreground hover:text-accent">24/7 Helpline</a></li>
+                <li><a href="#" className="text-muted-foreground hover:text-accent">Contact Emergency Services</a></li>
+              </ul>
+            </div>
           </div>
-
-          <div>
-            <h3 className="font-semibold mb-4">Emergency</h3>
-            <ul className="space-y-3 text-muted-foreground">
-              <li><a href="#">Blood Banks</a></li>
-              <li><a href="#">Hospitals</a></li>
-              <li><a href="#">24/7 Helpline</a></li>
-              <li><a href="#">Emergency Services</a></li>
-            </ul>
+          
+          <div className="border-t border-border pt-8 mt-8 text-center">
+            <p className="text-muted-foreground">
+              &copy; 2024 PulseConnect. All rights reserved. Saving lives, one connection at a time.
+            </p>
           </div>
         </div>
-
-        <div className="text-center text-muted-foreground mt-10 border-t pt-6">
-          © 2024 PulseConnect — Saving lives, one connection at a time.
-        </div>
       </footer>
     </div>
   );
-}
+} 
\ No newline at end of file
diff --git a/client/src/pages/not-found.tsx b/client/src/pages/not-found.tsx
index 064a6a5..abd2cf7 100644
--- a/client/src/pages/not-found.tsx
+++ b/client/src/pages/not-found.tsx
@@ -18,4 +18,4 @@ export default function NotFound() {
       </Card>
     </div>
   );
-} make enhancements
\ No newline at end of file
+} 
\ No newline at end of file

From 9198f3a8f8b1aee8683168c28557533ed64468b5 Mon Sep 17 00:00:00 2001
From: darshan totagi <darshantotagi7975@gmail.com>
Date: Sat, 22 Nov 2025 17:04:36 +0530
Subject: [PATCH 3/3] landing enhanced

---
 client/src/pages/landing.tsx | 327 +++++++++++++++++------------------
 1 file changed, 160 insertions(+), 167 deletions(-)

diff --git a/client/src/pages/landing.tsx b/client/src/pages/landing.tsx
index e72cd70..0c2b88d 100644
--- a/client/src/pages/landing.tsx
+++ b/client/src/pages/landing.tsx
@@ -2,200 +2,193 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Heart, Search, MapPin, MessageCircle, Shield, Award } from "lucide-react";
 import Header from "@/components/header";
+import { motion } from "framer-motion";
 
 export default function Landing() {
   return (
     <div className="min-h-screen bg-background">
       <Header />
-      
+
       {/* Hero Section */}
-      <section className="bg-gradient-to-br from-primary/5 to-secondary/5 py-16" data-testid="section-hero">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="text-center mb-12">
-            <h2 className="text-4xl font-bold text-foreground mb-4">Save Lives, Connect Hearts</h2>
-            <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
-              Join the largest blood donation network. Connect donors with those in need, earn credits for donations, and make a difference in your community.
-            </p>
-          </div>
-          
-          {/* Registration Options */}
-          <div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
-            {/* Blood Donor Registration */}
-            <Card className="shadow-sm hover:shadow-md transition-shadow">
-              <CardContent className="p-8">
-                <div className="text-center mb-6">
-                  <div className="bg-secondary/10 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
-                    <Heart className="text-secondary" size={32} />
-                  </div>
-                  <h3 className="text-2xl font-semibold text-foreground mb-2">Blood Donor</h3>
-                  <p className="text-muted-foreground">Register as a donor, help save lives, and earn credits for future needs</p>
-                </div>
-                <Button 
-                  asChild
-                  className="w-full bg-secondary text-secondary-foreground hover:bg-secondary/90"
-                  data-testid="button-register-donor"
-                >
-                  <a href="/api/login">Register as Donor</a>
-                </Button>
-              </CardContent>
-            </Card>
+      <section className="relative overflow-hidden py-20 bg-gradient-to-br from-primary/10 via-background to-secondary/10">
+        <div className="absolute inset-0 opacity-20 bg-[radial-gradient(circle_at_top_left,rgba(255,50,50,0.4),transparent)]" />
+
+        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <motion.h2
+            initial={{ opacity: 0, y: -15 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6 }}
+            className="text-5xl font-extrabold text-foreground drop-shadow-sm"
+          >
+            Save Lives, Connect Hearts
+          </motion.h2>
+
+          <motion.p
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: 0.2 }}
+            className="mt-6 text-xl text-muted-foreground max-w-2xl mx-auto"
+          >
+            Join the largest blood donation network. Connect donors with those in need, earn credits, and make a real impact.
+          </motion.p>
+
+          {/* Registration Cards */}
+          <div className="grid md:grid-cols-2 gap-10 max-w-4xl mx-auto mt-16">
             
-            {/* Blood Finder Registration */}
-            <Card className="shadow-sm hover:shadow-md transition-shadow">
-              <CardContent className="p-8">
-                <div className="text-center mb-6">
-                  <div className="bg-accent/10 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
-                    <Search className="text-accent" size={32} />
+            {/* Donor Card */}
+            <motion.div whileHover={{ scale: 1.03 }} className="transition-transform">
+              <Card className="backdrop-blur-xl bg-card/60 border border-border/60 shadow-lg hover:shadow-xl">
+                <CardContent className="p-8">
+                  <div className="text-center mb-6">
+                    <div className="bg-secondary/15 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4 shadow-inner">
+                      <Heart className="text-secondary" size={36} />
+                    </div>
+                    <h3 className="text-2xl font-semibold text-foreground">Blood Donor</h3>
+                    <p className="text-muted-foreground">Register, donate, and earn credits for future use.</p>
                   </div>
-                  <h3 className="text-2xl font-semibold text-foreground mb-2">Blood Finder</h3>
-                  <p className="text-muted-foreground">Find donors in your area quickly and connect directly via WhatsApp</p>
-                </div>
-                <Button 
-                  asChild
-                  className="w-full bg-accent text-accent-foreground hover:bg-accent/90"
-                  data-testid="button-find-donors"
-                >
-                  <a href="/api/login">Find Blood Donors</a>
-                </Button>
-              </CardContent>
-            </Card>
+
+                  <Button
+                    asChild
+                    className="w-full bg-secondary shadow-md shadow-secondary/30 hover:shadow-lg hover:shadow-secondary/40"
+                  >
+                    <a href="/api/login">Register as Donor</a>
+                  </Button>
+                </CardContent>
+              </Card>
+            </motion.div>
+
+            {/* Blood Finder */}
+            <motion.div whileHover={{ scale: 1.03 }} className="transition-transform">
+              <Card className="backdrop-blur-xl bg-card/60 border border-border/60 shadow-lg hover:shadow-xl">
+                <CardContent className="p-8">
+                  <div className="text-center mb-6">
+                    <div className="bg-accent/15 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4 shadow-inner">
+                      <Search className="text-accent" size={36} />
+                    </div>
+                    <h3 className="text-2xl font-semibold text-foreground">Blood Finder</h3>
+                    <p className="text-muted-foreground">Locate donors near you & contact them instantly.</p>
+                  </div>
+
+                  <Button
+                    asChild
+                    className="w-full bg-accent shadow-md shadow-accent/30 hover:shadow-lg hover:shadow-accent/40"
+                  >
+                    <a href="/api/login">Find Blood Donors</a>
+                  </Button>
+                </CardContent>
+              </Card>
+            </motion.div>
+
           </div>
         </div>
       </section>
 
-      {/* Credits System Display */}
-      <section className="bg-muted/20 py-16" data-testid="section-credits">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="text-center mb-12">
-            <h2 className="text-3xl font-bold text-foreground mb-4">Credit System</h2>
-            <p className="text-xl text-muted-foreground">Earn credits for every donation and use them when you need blood</p>
-          </div>
-          
-          <div className="grid md:grid-cols-3 gap-8 max-w-4xl mx-auto">
-            <Card className="text-center shadow-sm">
-              <CardContent className="p-6">
-                <div className="bg-secondary/10 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
-                  <Heart className="text-secondary" size={32} />
-                </div>
-                <h3 className="text-xl font-semibold text-foreground mb-2">Earn Credits</h3>
-                <p className="text-muted-foreground">Get 5 credits for each successful blood donation</p>
-              </CardContent>
-            </Card>
-            
-            <Card className="text-center shadow-sm">
-              <CardContent className="p-6">
-                <div className="bg-primary/10 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
-                  <Award className="text-primary" size={32} />
-                </div>
-                <h3 className="text-xl font-semibold text-foreground mb-2">Use Credits</h3>
-                <p className="text-muted-foreground">Redeem credits for free blood when you need it most</p>
-              </CardContent>
-            </Card>
-            
-            <Card className="text-center shadow-sm">
-              <CardContent className="p-6">
-                <div className="bg-accent/10 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
-                  <Shield className="text-accent" size={32} />
-                </div>
-                <h3 className="text-xl font-semibold text-foreground mb-2">6-Month Rule</h3>
-                <p className="text-muted-foreground">Credits are valid and donations tracked for safe intervals</p>
-              </CardContent>
-            </Card>
+      {/* Credit System */}
+      <section className="py-20 bg-muted/20">
+        <div className="max-w-7xl mx-auto px-4 text-center">
+          <h2 className="text-3xl font-bold mb-4">Credit System</h2>
+          <p className="text-lg text-muted-foreground mb-12">Earn credits with every donation & redeem them when needed.</p>
+
+          <div className="grid md:grid-cols-3 gap-10 max-w-4xl mx-auto">
+            {[ 
+              { icon: Heart, title: "Earn Credits", desc: "Get 5 credits for every donation", color: "secondary" },
+              { icon: Award, title: "Use Credits", desc: "Redeem credits when you need blood", color: "primary" },
+              { icon: Shield, title: "6-Month Rule", desc: "Track donation intervals safely", color: "accent" },
+            ].map((item, i) => (
+              <motion.div
+                key={i}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                transition={{ delay: i * 0.15 }}
+              >
+                <Card className="text-center shadow-md hover:shadow-xl transition-shadow bg-card/70 backdrop-blur-xl">
+                  <CardContent className="p-6">
+                    <div className={`bg-${item.color}/15 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4`}>
+                      <item.icon className={`text-${item.color}`} size={32} />
+                    </div>
+                    <h3 className="text-xl font-semibold mb-2">{item.title}</h3>
+                    <p className="text-muted-foreground">{item.desc}</p>
+                  </CardContent>
+                </Card>
+              </motion.div>
+            ))}
           </div>
         </div>
       </section>
 
-      {/* Features Section */}
-      <section className="bg-background py-16" data-testid="section-features">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="text-center mb-12">
-            <h2 className="text-3xl font-bold text-foreground mb-4">Why Choose PulseConnect?</h2>
-            <p className="text-xl text-muted-foreground">Advanced features to make blood donation efficient and rewarding</p>
-          </div>
-          
-          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
-            <div className="text-center">
-              <div className="bg-primary/10 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
-                <MapPin className="text-primary" size={32} />
-              </div>
-              <h3 className="text-lg font-semibold text-foreground mb-2">Location-Based</h3>
-              <p className="text-muted-foreground">Find donors within 5km radius using GPS technology</p>
-            </div>
-            
-            <div className="text-center">
-              <div className="bg-secondary/10 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
-                <MessageCircle className="text-secondary" size={32} />
-              </div>
-              <h3 className="text-lg font-semibold text-foreground mb-2">Direct Contact</h3>
-              <p className="text-muted-foreground">Connect instantly via WhatsApp for quick communication</p>
-            </div>
-            
-            <div className="text-center">
-              <div className="bg-accent/10 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
-                <Shield className="text-accent" size={32} />
-              </div>
-              <h3 className="text-lg font-semibold text-foreground mb-2">Safe Tracking</h3>
-              <p className="text-muted-foreground">Monitor donation intervals for health and safety</p>
-            </div>
-            
-            <div className="text-center">
-              <div className="bg-purple-500/10 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
-                <Award className="text-purple-600" size={32} />
-              </div>
-              <h3 className="text-lg font-semibold text-foreground mb-2">Reward System</h3>
-              <p className="text-muted-foreground">Earn and redeem credits for helping others</p>
-            </div>
+      {/* Features */}
+      <section className="py-20">
+        <div className="max-w-7xl mx-auto px-4 text-center">
+          <h2 className="text-3xl font-bold">Why Choose PulseConnect?</h2>
+          <p className="text-muted-foreground text-lg mt-4 mb-12">
+            Advanced features for fast, safe, and rewarding blood donation.
+          </p>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-12">
+            {[
+              { icon: MapPin, title: "Location-Based", desc: "Find donors within 5km using GPS", color: "primary" },
+              { icon: MessageCircle, title: "Direct Contact", desc: "WhatsApp donors instantly", color: "secondary" },
+              { icon: Shield, title: "Safe Tracking", desc: "Donation safety monitoring", color: "accent" },
+              { icon: Award, title: "Reward System", desc: "Earn rewards for helping others", color: "purple-600" },
+            ].map((f, i) => (
+              <motion.div key={i} whileHover={{ scale: 1.05 }} className="cursor-pointer">
+                <div className={`bg-${f.color}/10 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4`}>
+                  <f.icon className={`text-${f.color}`} size={34} />
+                </div>
+                <h3 className="text-lg font-semibold mb-2">{f.title}</h3>
+                <p className="text-muted-foreground">{f.desc}</p>
+              </motion.div>
+            ))}
           </div>
         </div>
       </section>
 
       {/* Footer */}
-      <footer className="bg-card border-t border-border py-12" data-testid="footer">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="grid md:grid-cols-4 gap-8">
-            <div className="md:col-span-2">
-              <div className="flex items-center space-x-3 mb-4">
-                <div className="blood-drop w-10 h-10 rounded-full flex items-center justify-center">
-                  <Heart className="text-white" size={20} />
-                </div>
-                <div>
-                  <h1 className="text-xl font-bold text-foreground">PulseConnect</h1>
-                  <p className="text-xs text-muted-foreground">Blood Bank Network</p>
-                </div>
+      <footer className="bg-card border-t border-border py-14">
+        <div className="max-w-7xl mx-auto px-4 grid md:grid-cols-4 gap-12">
+          {/* Branding */}
+          <div className="md:col-span-2">
+            <div className="flex items-center space-x-3 mb-4">
+              <div className="bg-red-500 w-10 h-10 rounded-full flex items-center justify-center shadow-md">
+                <Heart className="text-white" size={20} />
+              </div>
+              <div>
+                <h1 className="text-xl font-bold">PulseConnect</h1>
+                <p className="text-xs text-muted-foreground">Blood Bank Network</p>
               </div>
-              <p className="text-muted-foreground mb-4">
-                Connecting blood donors with those in need, making blood donation more accessible and rewarding for everyone.
-              </p>
-            </div>
-            
-            <div>
-              <h3 className="font-semibold text-foreground mb-4">Quick Links</h3>
-              <ul className="space-y-2">
-                <li><a href="#" className="text-muted-foreground hover:text-primary">About Us</a></li>
-                <li><a href="#" className="text-muted-foreground hover:text-primary">How It Works</a></li>
-                <li><a href="#" className="text-muted-foreground hover:text-primary">Safety Guidelines</a></li>
-                <li><a href="#" className="text-muted-foreground hover:text-primary">Support</a></li>
-              </ul>
-            </div>
-            
-            <div>
-              <h3 className="font-semibold text-foreground mb-4">Emergency</h3>
-              <ul className="space-y-2">
-                <li><a href="#" className="text-muted-foreground hover:text-accent">Blood Banks</a></li>
-                <li><a href="#" className="text-muted-foreground hover:text-accent">Hospitals</a></li>
-                <li><a href="#" className="text-muted-foreground hover:text-accent">24/7 Helpline</a></li>
-                <li><a href="#" className="text-muted-foreground hover:text-accent">Contact Emergency Services</a></li>
-              </ul>
             </div>
-          </div>
-          
-          <div className="border-t border-border pt-8 mt-8 text-center">
             <p className="text-muted-foreground">
-              &copy; 2024 PulseConnect. All rights reserved. Saving lives, one connection at a time.
+              Connecting donors & recipients with a secure, fast, and rewarding blood donation experience.
             </p>
           </div>
+
+          {/* Quick Links */}
+          <div>
+            <h3 className="font-semibold mb-4">Quick Links</h3>
+            <ul className="space-y-2 text-muted-foreground">
+              <li><a className="hover:text-primary" href="#">About Us</a></li>
+              <li><a className="hover:text-primary" href="#">How It Works</a></li>
+              <li><a className="hover:text-primary" href="#">Safety Guidelines</a></li>
+              <li><a className="hover:text-primary" href="#">Support</a></li>
+            </ul>
+          </div>
+
+          {/* Emergency */}
+          <div>
+            <h3 className="font-semibold mb-4">Emergency</h3>
+            <ul className="space-y-2 text-muted-foreground">
+              <li><a className="hover:text-accent" href="#">Blood Banks</a></li>
+              <li><a className="hover:text-accent" href="#">Hospitals</a></li>
+              <li><a className="hover:text-accent" href="#">24/7 Helpline</a></li>
+              <li><a className="hover:text-accent" href="#">Contact Emergency Services</a></li>
+            </ul>
+          </div>
+        </div>
+
+        <div className="pt-8 mt-10 border-t text-center text-muted-foreground">
+          © 2024 PulseConnect — Saving lives, one connection at a time.
         </div>
       </footer>
     </div>
   );
-} 
\ No newline at end of file
+}