-
-
-
Donor Network
+
+
+
+ {/* Visual Identity Highlight (GoldenHour crimson to amber stripe) */}
+
+
+
+ {!isRegistered ? (
+
+ {/* Header / Hero */}
+
+
+ Become a donor. Save a life.
+
+
+ Register to receive alerts when emergency blood replacements are needed within 5km.
+
+
+ SUBMIT REGISTRATION
+
+
+
+ ) : (
+ /* Premium Success State Panel */
+
+ {/* Animated Ring Checkmark */}
+
+
+
+
You're registered 🎉
+
+ Thank you, {name} . We've logged your profile under Donor ID {registeredId} .
+
+
+ We'll alert you immediately when someone nearby needs your blood type ({bloodGroup}).
+
+
navigate('/')}
+ variant="ghost"
+ fullWidth
+ className="mt-6"
+ >
+ Return to Intake
+
+
+ )}
+
+
+
+
);
}
diff --git a/frontend/src/components/HospitalConfirmPage.tsx b/frontend/src/components/HospitalConfirmPage.tsx
index cb722dd..ce7117a 100644
--- a/frontend/src/components/HospitalConfirmPage.tsx
+++ b/frontend/src/components/HospitalConfirmPage.tsx
@@ -4,6 +4,7 @@ import { motion, AnimatePresence } from 'framer-motion';
import { Card } from './ui/Card';
import { Button } from './ui/Button';
import { api } from '../lib/api';
+import { AuroraBackground, ShimmerSkeleton } from './ui/Effects';
export default function HospitalConfirmPage() {
// Read token from URL
@@ -83,52 +84,53 @@ export default function HospitalConfirmPage() {
};
return (
-
-
- {/* Compact Header: Brand + Status Label */}
-
-
-
-
-
- GoldenHour
-
-
+
+
-
-
-
- Emergency Request
+ {/* Compact Header: Brand + Status Label */}
+
+
+
+
+
+ GoldenHour
+
+
+
+
+
+
+ Emergency Request
+
+ {!isLoading && (
+
{hospitalName}
+ )}
- {!isLoading && (
-
{hospitalName}
- )}
-
-
- {isLoading ? (
-
-
-
-
-
-
+
+ {isLoading ? (
+
+
+
+
+
+
+
+
) : !isResponded ? (
+
+
);
}
diff --git a/frontend/src/components/PatientIntakeView.tsx b/frontend/src/components/PatientIntakeView.tsx
index 6554c6a..b9744d8 100644
--- a/frontend/src/components/PatientIntakeView.tsx
+++ b/frontend/src/components/PatientIntakeView.tsx
@@ -1,15 +1,18 @@
import React, { useState, useEffect, useRef } from 'react';
-import { useNavigate, Link } from 'react-router-dom';
-import { AnimatePresence, motion } from 'framer-motion';
+import { useNavigate } from 'react-router-dom';
+import { AnimatePresence, motion, useScroll, useTransform } from 'framer-motion';
import { gsap, ScrollTrigger } from '../lib/gsap-setup';
-import { HeroScene } from './three/HeroScene';
-import { TextReveal } from './motion/TextReveal';
-import { CardReveal } from './motion/CardReveal';
import { CountUp } from './motion/CountUp';
-import { Card } from './ui/Card';
+import { TextReveal } from './motion/TextReveal';
+import { EkgSpine } from './motion/EkgSpine';
+import { HeroCinematicCarousel } from './motion/HeroCinematicCarousel';
+import { HowItWorksCinematic } from './motion/HowItWorksCinematic';
import { Button } from './ui/Button';
import { Select } from './ui/Select';
import { api } from '../lib/api';
+import { Droplet, Zap, Phone } from 'lucide-react';
+
+// Cinematic slides are now managed inside HeroCinematicCarousel (SOS always first).
export default function PatientIntakeView() {
const navigate = useNavigate();
@@ -26,14 +29,36 @@ export default function PatientIntakeView() {
// Form submission states
const [isSubmitting, setIsSubmitting] = useState
(false);
const [submitError, setSubmitError] = useState(null);
- const [isSceneLoaded, setIsSceneLoaded] = useState(false);
+
+ // Dispatch transition states
+ const [dispatchState, setDispatchState] = useState<'idle' | 'dispatching'>('idle');
+ const [currentStep, setCurrentStep] = useState(0);
+ const [animationFinished, setAnimationFinished] = useState(false);
+ const [prefersReduced, setPrefersReduced] = useState(false);
+ const [isMobile, setIsMobile] = useState(false);
+ const heroRef = useRef(null);
+
+ // Ref to hold resolved request_id so it can be navigated to after animation finishes
+ const resolvedRequestIdRef = useRef(null);
+
+ // Carousel state now lives inside HeroCinematicCarousel component.
// Refs for GSAP animations
const heroTitleRef = useRef(null);
const heroSubRef = useRef(null);
const scrollHintRef = useRef(null);
- const horizontalRef = useRef(null);
- const horizontalInnerRef = useRef(null);
+ const intakeSectionRef = useRef(null);
+ const intakeLeftRef = useRef(null);
+ const intakeRightRef = useRef(null);
+
+ // Parallax scroll tracking
+ const { scrollYProgress } = useScroll({
+ target: heroRef,
+ offset: ["start start", "end start"]
+ });
+
+ const y = useTransform(scrollYProgress, [0, 1], [0, (prefersReduced || isMobile) ? 0 : 120]);
+ const darkenOpacity = useTransform(scrollYProgress, [0, 1], [0, (prefersReduced || isMobile) ? 0 : 0.6]);
// Trigger Geolocation API
const handleAcquireLocation = () => {
@@ -69,23 +94,86 @@ export default function PatientIntakeView() {
if (!isFormValid || !coords) return;
setIsSubmitting(true);
setSubmitError(null);
- try {
- const data = await api.triggerEmergency(coords.lat, coords.lng, emergencyType, bloodGroup);
- if (data && data.request_id) {
- sessionStorage.setItem(`emergency_${data.request_id}`, JSON.stringify({
- bloodGroup,
- emergencyType,
- rareGroup: data.rare_group ?? bloodGroup.endsWith('-')
- }));
- navigate(`/results/${data.request_id}`);
- } else {
- throw new Error('Invalid request ID returned from server.');
+ resolvedRequestIdRef.current = null;
+ setAnimationFinished(false);
+ setCurrentStep(0);
+ setDispatchState('dispatching');
+
+ // Timer list to clear on cleanup/error
+ const activeTimers: NodeJS.Timeout[] = [];
+
+ // Trigger API call in background
+ const apiCallPromise = api.triggerEmergency(coords.lat, coords.lng, emergencyType, bloodGroup)
+ .then((data) => {
+ if (data && data.request_id) {
+ sessionStorage.setItem(`emergency_${data.request_id}`, JSON.stringify({
+ bloodGroup,
+ emergencyType,
+ rareGroup: data.rare_group ?? bloodGroup.endsWith('-')
+ }));
+ resolvedRequestIdRef.current = data.request_id;
+ return data.request_id;
+ } else {
+ throw new Error('Invalid request ID returned from server.');
+ }
+ });
+
+ if (prefersReduced) {
+ // Reduced motion: navigate immediately when API call finishes
+ try {
+ const requestId = await apiCallPromise;
+ setDispatchState('idle');
+ setIsSubmitting(false);
+ navigate(`/results/${requestId}`);
+ } catch (err: any) {
+ setSubmitError(err.message || 'Connection failed. Please verify that the API is online.');
+ setDispatchState('idle');
+ setIsSubmitting(false);
+ }
+ return;
+ }
+
+ // Standard motion: orchestrate step-by-step checkmarks sequence (1.0s total)
+ // Step 1 checkmark: 300ms
+ activeTimers.push(setTimeout(() => {
+ setCurrentStep(1);
+ }, 300));
+
+ // Step 2 checkmark: 600ms
+ activeTimers.push(setTimeout(() => {
+ setCurrentStep(2);
+ }, 600));
+
+ // Step 3 checkmark: 900ms
+ activeTimers.push(setTimeout(() => {
+ setCurrentStep(3);
+ }, 900));
+
+ // Sequence completion check: 1000ms
+ activeTimers.push(setTimeout(async () => {
+ setAnimationFinished(true);
+
+ // Wait for API call to complete if it hasn't already
+ try {
+ const requestId = await apiCallPromise;
+ setDispatchState('idle');
+ setIsSubmitting(false);
+ navigate(`/results/${requestId}`);
+ } catch (err: any) {
+ setSubmitError(err.message || 'Connection failed. Please verify that the API is online.');
+ setDispatchState('idle');
+ setIsSubmitting(false);
}
- } catch (err: any) {
+ }, 1000));
+
+ // Watch API call concurrently to handle early failures
+ apiCallPromise.catch((err: any) => {
+ // Clear all active timers immediately on error to abort sequence
+ activeTimers.forEach(clearTimeout);
setSubmitError(err.message || 'Connection failed. Please verify that the API is online.');
- } finally {
+ setDispatchState('idle');
setIsSubmitting(false);
- }
+ });
};
const typeOptions = [
@@ -104,44 +192,40 @@ export default function PatientIntakeView() {
{ value: 'AB+', label: 'AB+' }, { value: 'AB-', label: 'AB-' }
];
- // === GSAP ANIMATIONS ===
+ const stepDetails = [
+ { label: 'Locking GPS', showAtStep: 0 },
+ { label: 'Matching nearest hospital', showAtStep: 1 },
+ { label: 'Broadcasting to donors in range', showAtStep: 2 },
+ ];
- // Hero staggered title reveal
+ // Hero staggered title reveal — re-runs when shouldRenderGlobe settles so the
+ // animation fires AFTER the Suspense swap (which would otherwise trigger ctx.revert).
useEffect(() => {
- const ctx = gsap.context(() => {
- // Title letters stagger
+ // Skip animation if reduced motion is preferred — chars are visible by default,
+ // just ensure no inline transforms are applied.
+ if (prefersReduced) {
if (heroTitleRef.current) {
- const text = heroTitleRef.current.textContent || '';
- const words = text.trim().split(' ');
- heroTitleRef.current.innerHTML = '';
-
- words.forEach((word, wordIdx) => {
- const wordSpan = document.createElement('span');
- wordSpan.style.display = 'inline-block';
- wordSpan.style.whiteSpace = 'nowrap';
-
- word.split('').forEach((char) => {
- const span = document.createElement('span');
- span.textContent = char;
- span.style.display = 'inline-block';
- span.style.opacity = '0';
- span.style.transform = 'translateY(100%)';
- wordSpan.appendChild(span);
- });
-
- heroTitleRef.current!.appendChild(wordSpan);
- if (wordIdx < words.length - 1) {
- heroTitleRef.current!.appendChild(document.createTextNode(' '));
- }
- });
+ const chars = heroTitleRef.current.querySelectorAll('.char-span');
+ chars.forEach(c => { c.style.transform = 'none'; });
+ }
+ if (heroSubRef.current) heroSubRef.current.style.opacity = '1';
+ if (scrollHintRef.current) scrollHintRef.current.style.opacity = '1';
+ return;
+ }
- gsap.to(heroTitleRef.current.querySelectorAll('span > span'), {
- opacity: 1,
+ const ctx = gsap.context(() => {
+ // Title letters stagger — use y transform reveal (word-spans have overflow:hidden)
+ // so chars slide up into view without needing opacity at all,
+ // preserving the parent text-gradient clip.
+ if (heroTitleRef.current) {
+ const chars = heroTitleRef.current.querySelectorAll('.char-span');
+ gsap.set(chars, { y: '110%' });
+ gsap.to(chars, {
y: 0,
- duration: 0.8,
+ duration: 0.7,
stagger: 0.03,
ease: 'power3.out',
- delay: 0.3,
+ delay: 0.2,
});
}
@@ -163,93 +247,146 @@ export default function PatientIntakeView() {
});
return () => ctx.revert();
- }, []);
+ // Re-runs when prefersReduced changes so animation respects motion preference.
+ }, [prefersReduced]);
- // Horizontal scroll section
+ // Intake section scroll-driven entrance animation (3D tilt reveal)
useEffect(() => {
- const section = horizontalRef.current;
- const inner = horizontalInnerRef.current;
- if (!section || !inner) return;
+ if (prefersReduced) return;
+
+ const section = intakeSectionRef.current;
+ const leftEl = intakeLeftRef.current;
+ const rightEl = intakeRightRef.current;
+
+ if (!section || !leftEl || !rightEl) return;
+
+ // Set perspective on the parent container to enable 3D transforms
+ gsap.set(section, { perspective: 1000 });
const ctx = gsap.context(() => {
- const cards = inner.children;
- const totalWidth = inner.scrollWidth - section.offsetWidth;
-
- gsap.to(inner, {
- x: -totalWidth,
- ease: 'none',
- scrollTrigger: {
- trigger: section,
- start: 'top top',
- end: () => `+=${totalWidth}`,
- scrub: 1,
- pin: true,
- anticipatePin: 1,
+ // Left description column: slide in from left and fade in
+ gsap.fromTo(leftEl,
+ { opacity: 0, x: -50 },
+ {
+ opacity: 1,
+ x: 0,
+ scrollTrigger: {
+ trigger: section,
+ start: 'top 85%',
+ end: 'top 45%',
+ scrub: 1,
+ }
+ }
+ );
+
+ // Right dispatch console: 3D rotate entry, scale up, and slide up
+ gsap.fromTo(rightEl,
+ {
+ opacity: 0,
+ y: 100,
+ scale: 0.93,
+ transformOrigin: '50% 50%',
+ rotationX: 12,
+ rotationY: -8,
},
- });
- });
+ {
+ opacity: 1,
+ y: 0,
+ scale: 1,
+ rotationX: 0,
+ rotationY: 0,
+ scrollTrigger: {
+ trigger: section,
+ start: 'top 85%',
+ end: 'top 40%',
+ scrub: 1,
+ }
+ }
+ );
+ }, section);
return () => ctx.revert();
- }, []);
+ }, [prefersReduced]);
+
+ const containerVariants = {
+ hidden: {},
+ visible: {
+ transition: {
+ staggerChildren: 0.15,
+ }
+ }
+ };
+
+ const cardVariants = {
+ hidden: prefersReduced ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 },
+ visible: {
+ opacity: 1,
+ y: 0,
+ transition: {
+ duration: 0.5,
+ ease: 'easeOut'
+ }
+ }
+ };
return (
-
- {/* Real-time WebGL shader preloader overlay */}
-
- {!isSceneLoaded && (
-
-
- {/* Pulse heartbeat SVG */}
-
-
-
- Compiling Volumetric Shaders
-
-
-
-
- Preloading GPU Textures...
-
-
- )}
-
+
+
{/* =============================================
SECTION 1: HERO — Full screen dark canvas
============================================= */}
-
- {/* Three.js particle canvas with shader compile feedback callback */}
- setIsSceneLoaded(true)} />
+
+ {/* Background Canvas: Cinematic carousel (always) + optional 3D Globe overlay on desktop */}
+ {/* Carousel always visible — globe renders on top for desktop/WebGL capable devices */}
+
+
+
+
+
+ {/* Dark Ambient Overlays (Layer 1-5 + scroll fade) - Always rendered to keep copy legible */}
+
+
+
+
+
+
+
{/* Giant display title */}
- Every Second Counts
+ {(() => {
+ const text = "Every Second Counts";
+ const words = text.split(' ');
+ return words.map((word, wordIdx) => (
+
+ {word.split('').map((char, charIdx) => (
+
+ {char}
+
+ ))}
+ {wordIdx < words.length - 1 && (
+
+ )}
+
+ ));
+ })()}
{/* Subtitle */}
Smart emergency dispatch. Nearest hospital. Matched blood donors.
All in real time.
@@ -262,26 +399,25 @@ export default function PatientIntakeView() {
transition={{ delay: 1.8, duration: 0.8 }}
className="flex flex-col sm:flex-row items-center justify-center gap-4 pt-4"
>
-
-
-
+
-
- 🩸 Register as Donor
-
+
{/* Scroll hint */}
-
+
Scroll
@@ -292,8 +428,8 @@ export default function PatientIntakeView() {
{/* =============================================
SECTION 2: PROBLEM STATEMENT — Text reveals
============================================= */}
-
-
+
+
+
{/* Left: Descriptive text */}
-
+
Emergency Console
+ Live Dispatch
- Lock. Dispatch. Save.
+ Lock. Dispatch. Save.
Pin your GPS coordinates, select the emergency type and blood group needed, then hit dispatch. We route the request to the closest matching hospital and alert nearby donors instantly.
@@ -348,248 +487,179 @@ export default function PatientIntakeView() {
Donor Alert
{/* Right: Intake Form Card */}
-
-
- {/* Top accent bar */}
-
-
- {/* Inner content */}
-
- {/* Header */}
-
-
- Live Dispatch
-
-
Emergency Dispatch
-
Secure your location and select emergency details.
-
-
- {/* Divider */}
-
-
- {/* Location Button */}
-
-
Patient Location
-
- {locating ? (
-
-
-
- Acquiring...
-
- ) : coords ? (
-
-
- ) : (
-
-
-
- Pin Current Location
-
- )}
-
-
- {!coords && !locating && (
-
- { setCoords({ lat: 26.9124, lng: 75.7873 }); setLocationError(null); }}
- className="text-[11px] text-white/30 hover:text-goldenhour transition-colors font-medium underline cursor-pointer"
- >
- Or use demo location (Jaipur)
-
-
- )}
-
-
- {coords && (
-
- Coordinates Secured
- Lat: {coords.lat} · Lng: {coords.lng}
- setCoords(null)} className="text-[10px] text-emergency/70 hover:text-emergency underline font-bold mt-1.5 cursor-pointer">Clear
-
- )}
- {locationError && (
-
- {locationError}
-
- Retry
- |
- { setCoords({ lat: 26.9124, lng: 75.7873 }); setLocationError(null); }} className="text-xs text-success font-extrabold underline cursor-pointer">Demo Location
-
-
- )}
-
-
-
- {/* Selects */}
-
setEmergencyType(e.target.value)} options={typeOptions} />
- setBloodGroup(e.target.value)} options={bloodOptions} />
-
- {submitError && (
- {submitError}
- )}
+
+
+ {/* Top accent */}
+
+
+ {/* Header */}
+
+
Emergency Dispatch
+
Secure your location and select emergency details.
+
- {/* Dispatch Button */}
-
+ Patient Location
+
- {isSubmitting ? (
+ {coords ? (
-
-
- Processing...
+
) : (
-
-
+
- GET HELP NOW
+ Pin Current Location
)}
-
+
+
+ {!coords && !locating && (
+
+ { setCoords({ lat: 26.9124, lng: 75.7873 }); setLocationError(null); }}
+ className="text-[11px] text-dark-ink-muted hover:text-goldenhour transition-colors font-medium underline cursor-pointer"
+ >
+ Or use demo location (Jaipur)
+
+
+ )}
+
+
+ {coords && (
+
+ Coordinates Secured
+ Lat: {coords.lat} · Lng: {coords.lng}
+ setCoords(null)} className="text-[10px] text-emergency hover:text-emergency-pressed underline font-bold mt-1.5 cursor-pointer">Clear
+
+ )}
+ {locationError && (
+
+ {locationError}
+
+ Retry
+ |
+ { setCoords({ lat: 26.9124, lng: 75.7873 }); setLocationError(null); }} className="text-xs text-success font-extrabold underline cursor-pointer">Demo Location
+
+
+ )}
+
+
+ {/* Selects */}
+
setEmergencyType(e.target.value)} options={typeOptions} />
+ setBloodGroup(e.target.value)} options={bloodOptions} />
+
+ {submitError && (
+ {submitError}
+ )}
+
+ {/* Dispatch Button */}
+
+
+
+
{/* =============================================
- SECTION 4: HOW IT WORKS — Horizontal scroll
+ SECTION 4: HOW IT WORKS — Cinematic scroll
============================================= */}
-
-
-
-
How It Works
-
Three steps. Zero delay.
-
-
- {/* Step 1 */}
-
-
-
📍
-
Step 01
-
Lock Location
-
- Your browser GPS pins your exact coordinates. High-accuracy mode ensures precision even in dense urban areas.
-
-
-
-
-
- {/* Step 2 */}
-
-
-
🏥
-
Step 02
-
Smart Dispatch
-
- Our algorithm matches your emergency type to the nearest hospital with the right department and available bed capacity.
-
-
-
-
-
- {/* Step 3 */}
-
-
-
🩸
-
Step 03
-
Donor Alert
-
- Every registered blood donor matching your blood type within range receives an instant alert with your location coordinates.
-
-
-
-
-
+
{/* =============================================
SECTION 5: STATS — Animated counters
============================================= */}
-
+
-
+
By The Numbers
- Built for speed. Designed for trust.
-
+
Built for speed. Designed for trust.
+
-
-
-
+
+
+
Average Response
From dispatch to hospital confirmation
-
+
-
-
- 24/7
+
+
+
Always On
Real-time websocket sync, polling fallback
-
+
-
-
+
+
Open Source
Transparent, auditable, community-driven
-
-