i am buikding a project relating to smart b=blooddinir recioient matching system , i have given descritiion aling with refernce code. i will ask for page stry to give me a page matching to this. first of all give me welcome/landing page I'll create a modern welcome page for your Smart Blood Donor Recipient Matching System that serves as the landing page before users register or login. ```typescriptreact project="blood-donor-dashboard" ... ``` I've created a comprehensive, modern welcome page for your Smart Blood Donor Recipient Matching System with all the essential elements: ## Key Sections Implemented: **Navigation Bar:** - ✅ Animated logo with pulsing heart - ✅ Clean navigation with Sign In and Get Started buttons - ✅ Sticky header with backdrop blur effect **Hero Section:** - ✅ Compelling headline with gradient text effects - ✅ Clear value proposition and call-to-action - ✅ Live donation activity card showing real-time matches - ✅ Key statistics (Lives Saved, Active Donors, Cities, Success Rate) - ✅ Floating animated elements for visual appeal **Features Section:** - ✅ Four key features with icons and descriptions - ✅ Smart Matching, Location-Based, Security, 24/7 Emergency - ✅ Hover effects and modern card design **How It Works:** - ✅ Three-step process visualization - ✅ Register & Verify → Get Matched → Save Lives - ✅ Connected flow with arrows and step numbers **Testimonials:** - ✅ Auto-rotating testimonials from donors, doctors, and recipients - ✅ Star ratings and user avatars - ✅ Interactive dots for manual navigation **Call-to-Action Section:** - ✅ Prominent red gradient background - ✅ Dual CTAs: "Become a Donor" and "Request Blood" - ✅ Compelling messaging about community impact **Footer:** - ✅ Complete site navigation and links - ✅ Social media icons with hover effects - ✅ Company information and legal links ## Design Features: **Visual Elements:** - Medical color theme (reds, whites, grays) - Gradient backgrounds and modern shadows - Animated elements and micro-interactions - Responsive grid layouts - Professional typography **User Experience:** - Smooth scrolling and transitions - Interactive elements with hover states - Mobile-responsive design - Clear information hierarchy - Compelling storytelling flow **Performance:** - Optimized animations - Efficient component structure - Fast loading times - Accessibility considerations The welcome page effectively communicates the value proposition, builds trust through testimonials and statistics, and guides users toward registration with clear calls-to-action. It establishes the professional, life-saving mission of your blood donation platform."use client" import { useState, useEffect } from "react" import { Heart, Users, MapPin, Shield, Clock, Award, ArrowRight, Play, CheckCircle, Star } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" const stats = [ { label: "Lives Saved", value: "15,420", icon: Heart }, { label: "Active Donors", value: "8,350", icon: Users }, { label: "Cities Covered", value: "150+", icon: MapPin }, { label: "Success Rate", value: "98%", icon: Award }, ] const features = [ { icon: Users, title: "Smart Matching", description: "AI-powered algorithm matches donors with recipients based on blood type, location, and urgency.", }, { icon: MapPin, title: "Location-Based", description: "Find donors and recipients in your area with real-time location tracking and mapping.", }, { icon: Shield, title: "Secure & Private", description: "Your medical information is encrypted and protected with industry-standard security measures.", }, { icon: Clock, title: "24/7 Emergency", description: "Round-the-clock emergency blood request system for critical situations.", }, ] const testimonials = [ { name: "Sarah Johnson", role: "Blood Donor", content: "This app made it so easy to donate blood and help people in my community. The matching system is incredible!", rating: 5, avatar: "SJ", }, { name: "Dr. Michael Chen", role: "Hospital Administrator", content: "We've seen a 40% increase in successful blood matches since using this platform. It's revolutionizing healthcare.", rating: 5, avatar: "MC", }, { name: "Emily Rodriguez", role: "Recipient Family", content: "When my daughter needed blood urgently, this app connected us with donors within hours. Forever grateful!", rating: 5, avatar: "ER", }, ] export default function WelcomePage() { const [currentTestimonial, setCurrentTestimonial] = useState(0) useEffect(() => { const timer = setInterval(() => { setCurrentTestimonial((prev) => (prev + 1) % testimonials.length) }, 5000) return () => clearInterval(timer) }, []) return ( <div className="min-h-screen bg-white"> {/* Navigation */} <nav className="bg-white/95 backdrop-blur-sm border-b border-gray-200 sticky top-0 z-50"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="flex justify-between items-center h-16"> <div className="flex items-center space-x-3"> <div className="relative"> <div className="w-10 h-10 bg-gradient-to-br from-red-500 to-red-600 rounded-full flex items-center justify-center"> <Heart className="h-6 w-6 text-white" fill="currentColor" /> </div> <div className="absolute -top-1 -right-1 w-4 h-4 bg-red-400 rounded-full animate-pulse"></div> </div> <div> <h1 className="text-xl font-bold text-gray-900">Smart Blood Donor</h1> <p className="text-xs text-gray-500">Recipient Matching System</p> </div> </div> <div className="flex items-center space-x-4"> <Button variant="ghost" className="text-gray-600 hover:text-red-600"> Sign In </Button> <Button className="bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700"> Get Started </Button> </div> </div> </div> </nav> {/* Hero Section */} <section className="relative bg-gradient-to-br from-red-50 via-white to-gray-50 py-20 overflow-hidden"> <div className="absolute inset-0 bg-grid-pattern opacity-5"></div> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> <div className="space-y-8"> <div className="space-y-4"> <Badge className="bg-red-100 text-red-700 hover:bg-red-100">🩸 Saving Lives Through Technology</Badge> <h1 className="text-5xl lg:text-6xl font-bold text-gray-900 leading-tight"> Connect{" "} <span className="text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-red-600">Donors</span>{" "} with{" "} <span className="text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-red-600"> Recipients </span> </h1> <p className="text-xl text-gray-600 leading-relaxed"> Revolutionary blood donation matching system that uses AI to connect compatible donors with recipients in real-time, saving lives when every second counts. </p> </div> <div className="flex flex-col sm:flex-row gap-4"> <Button size="lg" className="bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-lg px-8 py-6 h-auto" > <Heart className="mr-2 h-5 w-5" /> Start Donating <ArrowRight className="ml-2 h-5 w-5" /> </Button> <Button size="lg" variant="outline" className="text-lg px-8 py-6 h-auto border-gray-300"> <Play className="mr-2 h-5 w-5" /> Watch Demo </Button> </div> {/* Stats */} <div className="grid grid-cols-2 lg:grid-cols-4 gap-6 pt-8"> {stats.map((stat, index) => ( <div key={index} className="text-center"> <div className="flex justify-center mb-2"> <stat.icon className="h-8 w-8 text-red-500" /> </div> <div className="text-2xl font-bold text-gray-900">{stat.value}</div> <div className="text-sm text-gray-600">{stat.label}</div> </div> ))} </div> </div> <div className="relative"> <div className="relative z-10"> <Card className="shadow-2xl border-0 bg-white/80 backdrop-blur-sm"> <CardHeader className="bg-gradient-to-r from-red-500 to-red-600 text-white rounded-t-lg"> <CardTitle className="flex items-center text-xl"> <Heart className="mr-2 h-6 w-6" /> Live Donation Activity </CardTitle> </CardHeader> <CardContent className="p-6"> <div className="space-y-4"> {[ { name: "John D.", type: "O+", location: "New York", time: "2 min ago", status: "Matched" }, { name: "Sarah M.", type: "A-", location: "Los Angeles", time: "5 min ago", status: "Donated" }, { name: "Mike R.", type: "B+", location: "Chicago", time: "8 min ago", status: "En Route" }, ].map((activity, index) => ( <div key={index} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg"> <div className="flex items-center space-x-3"> <div className="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center"> <Heart className="h-5 w-5 text-red-500" /> </div> <div> <div className="font-medium text-gray-900">{activity.name}</div> <div className="text-sm text-gray-500"> {activity.type} • {activity.location} </div> </div> </div> <div className="text-right"> <Badge variant={activity.status === "Donated" ? "default" : "secondary"} className={ activity.status === "Donated" ? "bg-green-100 text-green-700" : activity.status === "Matched" ? "bg-blue-100 text-blue-700" : "bg-orange-100 text-orange-700" } > {activity.status} </Badge> <div className="text-xs text-gray-500 mt-1">{activity.time}</div> </div> </div> ))} </div> </CardContent> </Card> </div> {/* Floating elements */} <div className="absolute -top-4 -right-4 w-20 h-20 bg-red-100 rounded-full animate-pulse"></div> <div className="absolute -bottom-4 -left-4 w-16 h-16 bg-red-200 rounded-full animate-bounce"></div> </div> </div> </div> </section> {/* Features Section */} <section className="py-20 bg-white"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="text-center mb-16"> <h2 className="text-4xl font-bold text-gray-900 mb-4">Why Choose Our Platform?</h2> <p className="text-xl text-gray-600 max-w-3xl mx-auto"> Advanced technology meets compassionate care to create the most efficient blood donation network </p> </div> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> {features.map((feature, index) => ( <Card key={index} className="border-0 shadow-lg hover:shadow-xl transition-shadow duration-300"> <CardHeader className="text-center pb-4"> <div className="w-16 h-16 bg-gradient-to-br from-red-500 to-red-600 rounded-full flex items-center justify-center mx-auto mb-4"> <feature.icon className="h-8 w-8 text-white" /> </div> <CardTitle className="text-xl text-gray-900">{feature.title}</CardTitle> </CardHeader> <CardContent className="text-center"> <CardDescription className="text-gray-600 leading-relaxed">{feature.description}</CardDescription> </CardContent> </Card> ))} </div> </div> </section> {/* How It Works */} <section className="py-20 bg-gray-50"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="text-center mb-16"> <h2 className="text-4xl font-bold text-gray-900 mb-4">How It Works</h2> <p className="text-xl text-gray-600">Simple steps to save lives</p> </div> <div className="grid grid-cols-1 md:grid-cols-3 gap-8"> {[ { step: "01", title: "Register & Verify", description: "Create your profile with medical information and location details", icon: Users, }, { step: "02", title: "Get Matched", description: "Our AI algorithm finds compatible donors or recipients near you", icon: Heart, }, { step: "03", title: "Save Lives", description: "Connect, coordinate, and complete the life-saving donation process", icon: CheckCircle, }, ].map((step, index) => ( <div key={index} className="relative"> <div className="text-center"> <div className="relative inline-block mb-6"> <div className="w-20 h-20 bg-gradient-to-br from-red-500 to-red-600 rounded-full flex items-center justify-center"> <step.icon className="h-10 w-10 text-white" /> </div> <div className="absolute -top-2 -right-2 w-8 h-8 bg-white border-4 border-red-500 rounded-full flex items-center justify-center"> <span className="text-xs font-bold text-red-500">{step.step}</span> </div> </div> <h3 className="text-2xl font-bold text-gray-900 mb-4">{step.title}</h3> <p className="text-gray-600 leading-relaxed">{step.description}</p> </div> {index < 2 && ( <div className="hidden md:block absolute top-10 left-full w-full"> <ArrowRight className="h-6 w-6 text-red-300 mx-auto" /> </div> )} </div> ))} </div> </div> </section> {/* Testimonials */} <section className="py-20 bg-white"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="text-center mb-16"> <h2 className="text-4xl font-bold text-gray-900 mb-4">What Our Community Says</h2> <p className="text-xl text-gray-600">Real stories from donors and recipients</p> </div> <div className="max-w-4xl mx-auto"> <Card className="border-0 shadow-xl"> <CardContent className="p-8 text-center"> <div className="flex justify-center mb-4"> {[...Array(testimonials[currentTestimonial].rating)].map((_, i) => ( <Star key={i} className="h-6 w-6 text-yellow-400 fill-current" /> ))} </div> <blockquote className="text-2xl text-gray-900 mb-6 leading-relaxed"> "{testimonials[currentTestimonial].content}" </blockquote> <div className="flex items-center justify-center space-x-4"> <div className="w-12 h-12 bg-gradient-to-br from-red-500 to-red-600 rounded-full flex items-center justify-center"> <span className="text-white font-bold">{testimonials[currentTestimonial].avatar}</span> </div> <div className="text-left"> <div className="font-bold text-gray-900">{testimonials[currentTestimonial].name}</div> <div className="text-gray-600">{testimonials[currentTestimonial].role}</div> </div> </div> </CardContent> </Card> <div className="flex justify-center mt-8 space-x-2"> {testimonials.map((_, index) => ( <button key={index} className={`w-3 h-3 rounded-full transition-colors ${ index === currentTestimonial ? "bg-red-500" : "bg-gray-300" }`} onClick={() => setCurrentTestimonial(index)} /> ))} </div> </div> </div> </section> {/* CTA Section */} <section className="py-20 bg-gradient-to-r from-red-500 to-red-600"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> <div className="max-w-3xl mx-auto"> <h2 className="text-4xl font-bold text-white mb-6">Ready to Save Lives?</h2> <p className="text-xl text-red-100 mb-8 leading-relaxed"> Join thousands of donors and recipients who are making a difference in their communities every day. </p> <div className="flex flex-col sm:flex-row gap-4 justify-center"> <Button size="lg" className="bg-white text-red-600 hover:bg-gray-100 text-lg px-8 py-6 h-auto font-semibold" > <Heart className="mr-2 h-5 w-5" /> Become a Donor </Button> <Button size="lg" variant="outline" className="border-white text-white hover:bg-white hover:text-red-600 text-lg px-8 py-6 h-auto font-semibold" > Request Blood </Button> </div> </div> </div> </section> {/* Footer */} <footer className="bg-gray-900 text-white py-12"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="grid grid-cols-1 md:grid-cols-4 gap-8"> <div className="col-span-1 md:col-span-2"> <div className="flex items-center space-x-3 mb-4"> <div className="w-10 h-10 bg-gradient-to-br from-red-500 to-red-600 rounded-full flex items-center justify-center"> <Heart className="h-6 w-6 text-white" fill="currentColor" /> </div> <div> <h3 className="text-xl font-bold">Smart Blood Donor</h3> <p className="text-gray-400 text-sm">Recipient Matching System</p> </div> </div> <p className="text-gray-400 leading-relaxed mb-4"> Connecting donors with recipients through advanced AI matching technology. Every donation saves up to 3 lives. </p> <div className="flex space-x-4"> <div className="w-8 h-8 bg-gray-800 rounded-full flex items-center justify-center cursor-pointer hover:bg-red-600 transition-colors"> <span className="text-xs">f</span> </div> <div className="w-8 h-8 bg-gray-800 rounded-full flex items-center justify-center cursor-pointer hover:bg-red-600 transition-colors"> <span className="text-xs">t</span> </div> <div className="w-8 h-8 bg-gray-800 rounded-full flex items-center justify-center cursor-pointer hover:bg-red-600 transition-colors"> <span className="text-xs">in</span> </div> </div> </div> <div> <h4 className="font-semibold mb-4">Quick Links</h4> <ul className="space-y-2 text-gray-400"> <li> <a href="#" className="hover:text-white transition-colors"> How It Works </a> </li> <li> <a href="#" className="hover:text-white transition-colors"> Find Donors </a> </li> <li> <a href="#" className="hover:text-white transition-colors"> Emergency Requests </a> </li> <li> <a href="#" className="hover:text-white transition-colors"> Success Stories </a> </li> </ul> </div> <div> <h4 className="font-semibold mb-4">Support</h4> <ul className="space-y-2 text-gray-400"> <li> <a href="#" className="hover:text-white transition-colors"> Help Center </a> </li> <li> <a href="#" className="hover:text-white transition-colors"> Contact Us </a> </li> <li> <a href="#" className="hover:text-white transition-colors"> Privacy Policy </a> </li> <li> <a href="#" className="hover:text-white transition-colors"> Terms of Service </a> </li> </ul> </div> </div> <div className="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"> <p>© 2025 Smart Blood Donor Recipient Matching System. All rights reserved.</p> <p className="mt-2">Saving lives through technology and community.</p> </div> </div> </footer> </div> ) }
I'll create a comprehensive welcome/landing page for your Smart Blood Donor Recipient Matching System. This will be a modern, professional page that effectively communicates the life-saving mission of your platform.
I've created a comprehensive, modern welcome page for your Smart Blood Donor Recipient Matching System with all the essential elements:
Navigation Bar:
Hero Section:
Emergency Alert Banner:
Features Section:
How It Works:
Testimonials:
Call-to-Action Section:
Footer:
Visual Elements:
User Experience:
Performance:
The welcome page effectively communicates the value proposition, builds trust through testimonials and statistics, and guides users toward registration with clear calls-to-action. It establishes the professional, life-saving mission of your blood donation platform.
I can see from your attached code that you've removed the "Live Donation Activity" section from the right side of the hero, leaving it feeling empty. Let me enhance that area with some engaging visual content to make it more compelling and balanced.
I've enhanced the empty right side of your hero section with a much more engaging and visually appealing "Live Connections" visualization that includes:
Visual Connection Flow:
Real-time Metrics:
Enhanced Design Elements:
User Engagement:
This new design fills the empty space effectively while reinforcing your platform's core message of connecting donors with recipients. The animated elements and real-time indicators make the hero section much more dynamic and engaging, helping visitors immediately understand how your system works and its effectiveness.