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] 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>
   );
 }