BloodFlow is a high-end, lifesaver-centric platform designed to bridge the gap between donors and patients. It moves away from the "clinical" look of traditional medical sites and embraces a modern, high-performance "Dark & Glow" UI/UX.
This project features custom-built, premium components designed for maximum impact:
- Aesthetic: Deep slate backgrounds with blurred red neon glows.
- Interaction: Staggered entrance animations using Framer Motion.
- CTA: Dual-action buttons for "Joining as a Donor" and "Searching for Life."
- Cards: Glassmorphism design with
backdrop-blur-xl. - Hover: Dynamic "Glow-up" effects where cards illuminate from behind.
- Stats: A high-contrast trust bar showing real-time impact metrics.
- Dashboard Ready: Semi-transparent panel design that fits perfectly into any dashboard layout.
- Visuals: Pulsing alert shields and lockdown watermarks.
- Function: Prevents unauthorized donation requests while providing a clear appeal path.
- Design: Split-view layout with "Direct Emergency" cards.
- Forms: Premium input fields with red focus-glow and shimmer-effect submit buttons.
| Technology | Purpose |
|---|---|
| React.js | Core UI Framework |
| Tailwind CSS | Premium Styling & Responsiveness |
| Framer Motion | High-performance Animations |
| Lucide React | Minimalist Vector Iconography |
| React Router | Seamless Page Transitions |