Lifedrop Blood Donation
Create a new pBuild a modern, professional, responsive Blood Donation Web Application frontend called "LifeDrop".
Project Goal
LifeDrop is a community-driven blood donation platform that connects blood donors with people who urgently need blood. The platform should feel trustworthy, compassionate, modern, accessible, and easy to use.
For this phase, focus ONLY on frontend UI/UX. Do not implement a backend, database, real authentication, or external API integrations.
1. Design Direction
Create a premium healthcare-tech interface with:
- Primary color: deep red (#D62839)
- Secondary color: dark burgundy (#8B1525)
- Background: white (#FFFFFF) and soft gray (#F8FAFC)
- Text: dark navy (#172033)
- Success states: accessible green
- Emergency states: accessible red with clear labels
Use a modern sans-serif font such as Inter, generous whitespace, rounded cards, subtle shadows, clean borders, consistent spacing, and high-quality relevant imagery.
Avoid excessive gradients, excessive animations, cluttered layouts, and generic template styling.
2. Global Navigation
Create a responsive navbar with:
- LifeDrop logo and a simple blood-drop symbol
- Home
- Find Donors
- Blood Requests
- Donate Blood
- News
- Login
- A prominent "Request Blood" CTA button
On mobile, use a functional hamburger menu.
3. Landing Page Hero
Create a visually engaging hero section with:
- Headline: "Every Drop Can Save a Life"
- Supporting text explaining how LifeDrop connects donors with people in need
- Primary CTA: "Request Blood"
- Secondary CTA: "Become a Donor"
- A relevant, tasteful blood donation/healthcare image or illustration
- A small trust indicator such as "Connecting communities through blood donation"
4. Statistics Section
Create four statistic cards:
- Registered Donors
- Blood Requests Fulfilled
- Active Blood Requests
- Lives Impacted
Use clearly labeled demo numbers and make it possible to replace them with real data later. Do not present demo statistics as verified real-world facts.
5. How It Works
Create three simple steps:
- Find a Donor
- Request or Donate Blood
- Help Save a Life
Use icons, short descriptions, and clear visual hierarchy.
6. Urgent Blood Requests Preview
Create a section displaying three sample blood request cards.
Each card should include:
- Blood group
- Required units
- Hospital name
- City/location
- Required date
- Urgency label
- View Details button
Use fictional sample data and clearly structure the cards so they can later receive data from an API.
Add a "View All Requests" button.
7. Become a Donor Section
Create a compelling section encouraging users to register as donors, with a short description, benefits, and a "Register as Donor" CTA.
8. News and Awareness Preview
Display three editorial cards with:
- Image
- Category
- Article title
- Short excerpt
- Publication date
- Read More link
Use placeholder content, not fabricated medical claims.
9. Trust and Safety Section
Highlight:
- Community-driven donations
- Privacy-conscious donor discovery
- Report suspicious requests
- Responsible donation practices
Do not claim that users or requests are verified unless verification actually exists.
10. Footer
Include:
- Logo and short mission statement
- Quick navigation
- Donation resources
- Contact placeholder
- Privacy Policy
- Terms of Service
- Social media placeholders
- Copyright
11. Functional Frontend Requirements
- All navigation links should lead to the appropriate page or clearly defined placeholder route.
- CTA buttons must have meaningful actions.
- Use reusable components for navbar, footer, cards, badges, and buttons.
- Add hover, focus, loading, empty, and error states where relevant.
- Use accessible labels, semantic HTML, keyboard navigation, and sufficient color contrast.
- Ensure responsive layouts for mobile, tablet, and desktop.
- Use realistic but fictional sample content.
- Keep the design consistent across all sections.
12. Technical Constraints
Use the existing default frontend stack supported by Lovable, preferably React, TypeScript, and Tailwind CSS.
Organize the UI into reusable components.
Do not connect Supabase or any backend yet.
Do not implement real login, registration, donor matching, or blood request submission.
Keep the project easy to extend with future pages and API integration.
Start by building the complete landing page and its reusable design system. Prioritize visual quality, usability, consistency, and responsive behavior.roject with Cloud enabled.
This project was built with Lovable.
Live app: https://lifedrop-blood-donation.lovable.app
Build with Lovable
Continue developing this project in the Lovable editor.
- Ship faster: describe what you want to build and Lovable handles the code.
- Stay in sync: every change made in Lovable is committed straight to this repository.
- Full ownership: this code is yours. Push to
main on GitHub and your changes sync back into Lovable, ready for your next prompt.
Development
Prefer working locally? You need Node.js and npm — install with nvm.
git clone <this-repository-url>
cd <repository-name>
npm i
npm run dev
