-
-
Firestore Telemetry Stream
+ {/* Clean Responsive Top Controls Bar */}
+
+ {/* Zoom Buttons */}
+
+
setZoom(Math.min(zoom + 1, 19))}
+ className="p-2 text-slate-200 hover:text-white hover:bg-slate-800 rounded-xl transition-colors"
+ aria-label="Zoom In"
+ >
+
+
setZoom(Math.max(zoom - 1, 8))}
+ className="p-2 text-slate-200 hover:text-white hover:bg-slate-800 rounded-xl transition-colors"
+ aria-label="Zoom Out"
+ >
+
- {latestInc ? (
-
- Active SOS by {latestInc.citizenName} ({latestInc.latitude.toFixed(4)}°, {latestInc.longitude.toFixed(4)}°)
-
- ) : (
-
GPS Locked. Ready to broadcast SOS signal.
- )}
-
- {/* Map Floating Zoom Controls */}
-
-
setZoom(Math.min(zoom + 1, 18))}
- className="p-2 text-slate-300 hover:text-white hover:bg-slate-800 rounded-xl transition-colors"
- aria-label="Zoom In"
- >
-
-
setZoom(Math.max(zoom - 1, 10))}
- className="p-2 text-slate-300 hover:text-white hover:bg-slate-800 rounded-xl transition-colors"
- aria-label="Zoom Out"
- >
-
+ {/* Telemetry Overlay */}
+
+
+
+ {latestInc ? `SOS: ${latestInc.citizenName}` : "GPS Telemetry Lock"}
+
+
+
+ {lat.toFixed(4)}°, {lng.toFixed(4)}°
+
+
-
-
-
ZOOM: {zoom}X • FIRESTORE REALTIME GPS
+ {/* Bottom Status Pill */}
+
+ ZOOM: {zoom}X • {lat.toFixed(4)}°, {lng.toFixed(4)}°
);
};
+
diff --git a/frontend/src/components/dashboard/MeshChatView.tsx b/frontend/src/components/dashboard/MeshChatView.tsx
new file mode 100644
index 0000000..32ba561
--- /dev/null
+++ b/frontend/src/components/dashboard/MeshChatView.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import React, { useState } from "react";
+import { motion } from "framer-motion";
+import { Bluetooth, Send, PhoneCall, RadioTower } from "lucide-react";
+
+export const MeshChatView: React.FC = () => {
+ const [messages, setMessages] = useState<{ id: number; text: string; sender: string; isSelf: boolean }[]>([
+ { id: 1, text: "Anyone receiving this on local Bluetooth?", sender: "Nearby Device (30m)", isSelf: false },
+ { id: 2, text: "Yes, loud and clear. We are heading to the North Grid shelter.", sender: "Local Node B", isSelf: false },
+ ]);
+ const [input, setInput] = useState("");
+
+ const handleSend = (e: React.FormEvent) => {
+ e.preventDefault();
+ if (!input.trim()) return;
+ setMessages([...messages, { id: Date.now(), text: input, sender: "You", isSelf: true }]);
+ setInput("");
+ };
+
+ return (
+
+
+
+
+
+
+
RescueAI Offline Mesh Chat
+
Peer-to-Peer Bluetooth & Wi-Fi Direct Network
+
+
+
+
+ 3 Nodes Connected
+
+
+
+
+
+ {messages.map((msg) => (
+
+
+
{msg.sender}
+
{msg.text}
+
+
+ ))}
+
+ );
+};
diff --git a/frontend/src/components/dashboard/OfflineEmergencyBot.tsx b/frontend/src/components/dashboard/OfflineEmergencyBot.tsx
index 6d9384f..cf472c5 100644
--- a/frontend/src/components/dashboard/OfflineEmergencyBot.tsx
+++ b/frontend/src/components/dashboard/OfflineEmergencyBot.tsx
@@ -127,12 +127,12 @@ export const OfflineEmergencyBot: React.FC = () => {
setLoading(false);
}, 500);
} else {
- // Online mode: Call Render Gemini AI backend or fallback
+ // Online mode: Call local Next.js API route powered by Gemini
try {
- const res = await fetch("https://rescueai-backend-3u2o.onrender.com/api/v1/triage/analyze", {
+ const res = await fetch("/api/chat", {
method: "POST",
headers: { "Content-Type": "application/json" },
- body: JSON.stringify({ description: textToProcess, location: "Grid Vector" }),
+ body: JSON.stringify({ message: textToProcess }),
});
if (res.ok) {
@@ -140,7 +140,7 @@ export const OfflineEmergencyBot: React.FC = () => {
const botMsg: ChatMessage = {
id: "bot-" + Date.now(),
sender: "bot",
- text: `[ONLINE GEMINI AI TRIAGE]\nPriority: ${data.priority || "HIGH"}\nCategory: ${data.category || "GENERAL"}\nDirectives: ${data.recommendations || "Proceed to safety."}`,
+ text: data.reply || "I am currently overloaded. Please seek high ground and press SOS.",
timestamp: new Date().toLocaleTimeString(),
isOfflineMode: false,
};
diff --git a/frontend/src/components/dashboard/ShelterCard.tsx b/frontend/src/components/dashboard/ShelterCard.tsx
index e66971f..73d8a41 100644
--- a/frontend/src/components/dashboard/ShelterCard.tsx
+++ b/frontend/src/components/dashboard/ShelterCard.tsx
@@ -1,9 +1,10 @@
"use client";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
-import { Building, MapPin, CheckCircle2, ArrowRight, X } from "lucide-react";
+import { Building, MapPin, CheckCircle2, ArrowRight, X, Printer, Download } from "lucide-react";
import { bookShelterSpotInFirestore, ShelterBookingRecord } from "@/services/authService";
+import { ShelterInvoiceModal } from "./ShelterInvoiceModal";
import { useAuth } from "@/hooks/useAuth";
interface ShelterItem {
@@ -17,46 +18,66 @@ interface ShelterItem {
facilities: string[];
}
+const DEFAULT_SHELTERS: ShelterItem[] = [
+ {
+ id: "shelter-01",
+ name: "Central Evacuation Relief Shelter",
+ address: "102 Disaster Response Ave, Sector 4",
+ distance: "0.8 miles away",
+ capacity: 250,
+ occupied: 185,
+ phone: "+91 98765 11223",
+ facilities: ["Food & Clean Water", "Medical Node", "Backup Generator", "Pet Safe Zone"],
+ },
+ {
+ id: "shelter-02",
+ name: "St. Jude Community Arena",
+ address: "405 High Street, Downtown",
+ distance: "1.4 miles away",
+ capacity: 500,
+ occupied: 310,
+ phone: "+91 98765 44332",
+ facilities: ["Red Cross Paramedics", "Infant Care", "Evacuation Shuttles"],
+ },
+ {
+ id: "shelter-03",
+ name: "North Grid High School Complex",
+ address: "88 Coastal Highway, Bay Area",
+ distance: "2.1 miles away",
+ capacity: 350,
+ occupied: 120,
+ phone: "+91 98765 99887",
+ facilities: ["Helipad Access", "Emergency Kitchen", "Sanitation Kits"],
+ },
+];
+
export const ShelterCard: React.FC = () => {
const { userProfile } = useAuth();
+ const [shelters, setShelters] = useState
(DEFAULT_SHELTERS);
const [selectedShelter, setSelectedShelter] = useState(null);
const [evacueeCount, setEvacueeCount] = useState(1);
const [specialAssistance, setSpecialAssistance] = useState(false);
const [loading, setLoading] = useState(false);
const [activeBooking, setActiveBooking] = useState(null);
+ const [isInvoiceOpen, setIsInvoiceOpen] = useState(false);
+ const [isBannerDismissed, setIsBannerDismissed] = useState(false);
- const shelters: ShelterItem[] = [
- {
- id: "shelter-01",
- name: "Central Evacuation Relief Shelter",
- address: "102 Disaster Response Ave, Sector 4",
- distance: "0.8 miles away",
- capacity: 250,
- occupied: 185,
- phone: "+91 98765 11223",
- facilities: ["Food & Clean Water", "Medical Node", "Backup Generator", "Pet Safe Zone"],
- },
- {
- id: "shelter-02",
- name: "St. Jude Community Arena",
- address: "405 High Street, Downtown",
- distance: "1.4 miles away",
- capacity: 500,
- occupied: 310,
- phone: "+91 98765 44332",
- facilities: ["Red Cross Paramedics", "Infant Care", "Evacuation Shuttles"],
- },
- {
- id: "shelter-03",
- name: "North Grid High School Complex",
- address: "88 Coastal Highway, Bay Area",
- distance: "2.1 miles away",
- capacity: 350,
- occupied: 120,
- phone: "+91 98765 99887",
- facilities: ["Helipad Access", "Emergency Kitchen", "Sanitation Kits"],
- },
- ];
+ // Load persistent shelter occupancy state from localStorage on mount
+ useEffect(() => {
+ if (typeof window !== "undefined") {
+ const stored = localStorage.getItem("rescueai_shelters_state");
+ if (stored) {
+ try {
+ const parsed = JSON.parse(stored) as ShelterItem[];
+ if (Array.isArray(parsed) && parsed.length > 0) {
+ setShelters(parsed);
+ }
+ } catch (e) {
+ console.warn("Shelter state load error:", e);
+ }
+ }
+ }
+ }, []);
const handleConfirmBooking = async () => {
if (!selectedShelter) return;
@@ -70,7 +91,24 @@ export const ShelterCard: React.FC = () => {
evacueeCount: evacueeCount,
specialAssistance: specialAssistance,
});
+
+ // Update local reactive occupancy state (decrement remaining spots in real-time)
+ const updatedList = shelters.map((item) => {
+ if (item.id === selectedShelter.id) {
+ const newOccupied = Math.min(item.capacity, item.occupied + evacueeCount);
+ return { ...item, occupied: newOccupied };
+ }
+ return item;
+ });
+
+ setShelters(updatedList);
+ if (typeof window !== "undefined") {
+ localStorage.setItem("rescueai_shelters_state", JSON.stringify(updatedList));
+ }
+
setActiveBooking(receipt);
+ setIsBannerDismissed(false);
+ setIsInvoiceOpen(true); // Automatically open printable pass modal
} catch (e) {
console.warn("Booking error:", e);
} finally {
@@ -80,25 +118,51 @@ export const ShelterCard: React.FC = () => {
return (
- {/* Active Booking Confirmation Card */}
- {activeBooking && (
+ {/* Active Booking Compact Banner with Instant Dismiss */}
+ {activeBooking && !isBannerDismissed && (
-
-
-
+
setIsBannerDismissed(true)}
+ className="absolute top-3 right-3 p-1 text-emerald-700 hover:text-emerald-950 rounded-lg hover:bg-emerald-100 transition-colors"
+ title="Dismiss notification to save space"
+ >
+
+
+
+
+ Evacuation Spot Confirmed!
-
- Receipt #{activeBooking.bookingId}
+
+ #{activeBooking.bookingId}
-
- Reserved spot for {activeBooking.evacueeCount} evacuee(s) at {activeBooking.shelterName} . Show this receipt upon arrival for instant check-in.
+
+
+ Reserved spot for {activeBooking.evacueeCount} evacuee(s) at {activeBooking.shelterName} .
+
+
+
setIsInvoiceOpen(true)}
+ className="px-3 py-1.5 bg-emerald-700 hover:bg-emerald-800 text-white font-extrabold text-[11px] rounded-xl flex items-center gap-1.5 transition-colors shadow-xs uppercase tracking-wider"
+ >
+ View & Download Printable Pass
+
+
setIsBannerDismissed(true)}
+ className="px-3 py-1.5 bg-emerald-100 text-emerald-900 font-bold text-[11px] rounded-xl hover:bg-emerald-200 transition-colors"
+ >
+ Dismiss
+
+
)}
@@ -111,7 +175,7 @@ export const ShelterCard: React.FC = () => {
Verified Evacuation Relief Shelters
-
Real-Time Occupancy & Evacuation Spot Reservations
+
Real-Time Capacity & Instant Spot Reservations
@@ -122,7 +186,7 @@ export const ShelterCard: React.FC = () => {
{/* Shelter Cards List */}
{shelters.map((shelter) => {
- const openSpots = shelter.capacity - shelter.occupied;
+ const openSpots = Math.max(0, shelter.capacity - shelter.occupied);
const pct = Math.round((shelter.occupied / shelter.capacity) * 100);
return (
@@ -147,16 +211,18 @@ export const ShelterCard: React.FC = () => {
{shelter.distance}
- {/* Occupancy Meter */}
+ {/* Real-time Occupancy Meter & Dynamic Remaining Spots */}
Occupancy ({pct}%)
- {openSpots} Spots Left
+ 0 ? "text-emerald-700 font-black animate-pulse" : "text-red-600 font-black"}>
+ {openSpots > 0 ? `${openSpots} Spots Left` : "FULL CAPACITY"}
+
80 ? "bg-amber-500" : "bg-emerald-500"
+ pct >= 90 ? "bg-red-600" : pct > 75 ? "bg-amber-500" : "bg-emerald-500"
}`}
style={{ width: `${pct}%` }}
/>
@@ -178,9 +244,10 @@ export const ShelterCard: React.FC = () => {
setSelectedShelter(shelter)}
- className="w-full py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-extrabold text-xs rounded-xl shadow-md transition-all flex items-center justify-center gap-1.5 uppercase"
+ disabled={openSpots <= 0}
+ className="w-full py-2.5 bg-blue-600 hover:bg-blue-700 disabled:bg-slate-300 text-white font-extrabold text-xs rounded-xl shadow-md transition-all flex items-center justify-center gap-1.5 uppercase disabled:cursor-not-allowed"
>
- Book Evacuation Spot
+ {openSpots > 0 ? "Book Evacuation Spot" : "Shelter Full"}
@@ -189,7 +256,7 @@ export const ShelterCard: React.FC = () => {
- {/* Booking Modal */}
+ {/* Booking Form Modal */}
{selectedShelter && (
@@ -212,7 +279,9 @@ export const ShelterCard: React.FC = () => {
{selectedShelter.name}
{selectedShelter.address}
-
{selectedShelter.distance}
+
+ Remaining Capacity: {selectedShelter.capacity - selectedShelter.occupied} Spots Available
+
@@ -260,13 +329,21 @@ export const ShelterCard: React.FC = () => {
disabled={loading}
className="flex-1 py-3 bg-blue-600 hover:bg-blue-700 text-white font-extrabold text-xs rounded-xl shadow-md uppercase tracking-wider"
>
- Confirm Reservation
+ {loading ? "Reserving..." : "Confirm Reservation"}
+
+ {/* Printable Evacuation Pass & Invoice Modal */}
+
setIsInvoiceOpen(false)}
+ />
= ({
+ booking,
+ isOpen,
+ onClose,
+}) => {
+ const [downloading, setDownloading] = useState(false);
+
+ if (!isOpen || !booking) return null;
+
+ const handlePrintOrDownload = () => {
+ setDownloading(true);
+ setTimeout(() => {
+ window.print();
+ setDownloading(false);
+ }, 300);
+ };
+
+ return (
+
+
+
+ {/* Close Button */}
+
+
+
+ {/* Official Pass Header */}
+
+
+
+
+
+ OFFICIAL EVACUATION PASS
+
+
+ Shelter Reservation Receipt
+
+
+ Receipt #{booking.bookingId} • National Emergency Grid
+
+
+
+ {/* Shelter Info */}
+
+
+ Reserved Shelter Destination
+
+
{booking.shelterName}
+
+ Sector Evacuation Zone • Central Grid Node
+
+
+
+ {/* Evacuee & Reservation Details */}
+
+
+
Reserved By
+
+ {booking.userName}
+
+
+
+
+
Registered Email
+
+ {booking.userEmail}
+
+
+
+
+
Evacuee Count
+
+ {booking.evacueeCount} Persons Reserved
+
+
+
+
+
Assistance Required
+
+ {booking.specialAssistance ? (
+
+
+ ) : (
+ Standard Evacuee
+ )}
+
+
+
+
+ {/* Check-In Barcode / QR Simulation */}
+
+
+
+ Check-In Security Barcode
+
+
STATUS: CONFIRMED & GUARANTEED
+
+ Booked: {new Date(booking.bookedAt).toLocaleString()}
+
+
+
+
+
+
+
+ Close Pass
+
+
+ Print / Download PDF Pass
+
+
+
+ );
+};
diff --git a/frontend/src/components/dashboard/Sidebar.tsx b/frontend/src/components/dashboard/Sidebar.tsx
index fd7a1b5..5d5fb35 100644
--- a/frontend/src/components/dashboard/Sidebar.tsx
+++ b/frontend/src/components/dashboard/Sidebar.tsx
@@ -17,6 +17,7 @@ import {
LogOut,
Radio,
Shield,
+ WifiOff,
} from "lucide-react";
import { useAuth } from "@/hooks/useAuth";
@@ -27,6 +28,8 @@ export type DashboardViewMode =
| "shelters"
| "my-requests"
| "guide"
+ | "mesh-chat"
+ | "fm-radio"
| "alerts"
| "profile"
| "settings"
@@ -90,6 +93,20 @@ export const Sidebar: React.FC = ({ activeView = "dashboard", onSe
icon: BookOpen,
href: "/dashboard#guide",
},
+ {
+ id: "mesh-chat",
+ label: "Offline Mesh Chat",
+ icon: WifiOff,
+ href: "/dashboard#mesh-chat",
+ badge: "P2P",
+ },
+ {
+ id: "fm-radio",
+ label: "Hardware FM Radio",
+ icon: Radio,
+ href: "/dashboard#fm-radio",
+ badge: "OFFLINE",
+ },
{
id: "profile",
label: isRescueUser ? "Rescue Unit Profile" : "My Profile",
diff --git a/frontend/src/components/dashboard/SocialPreviewHub.tsx b/frontend/src/components/dashboard/SocialPreviewHub.tsx
new file mode 100644
index 0000000..adc047e
--- /dev/null
+++ b/frontend/src/components/dashboard/SocialPreviewHub.tsx
@@ -0,0 +1,248 @@
+"use client";
+
+import React, { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import {
+ Share2,
+ Copy,
+ Check,
+ Send,
+ MessageCircle,
+ Radio,
+ ExternalLink,
+ ShieldAlert,
+ Sparkles,
+ Download,
+ X,
+ Camera,
+} from "lucide-react";
+
+export const SocialPreviewHub: React.FC = () => {
+ const [copied, setCopied] = useState(false);
+ const [activePlatform, setActivePlatform] = useState<"whatsapp" | "telegram" | "instagram">("whatsapp");
+ const [isOpen, setIsOpen] = useState(false);
+
+ const emergencyUrl = "https://rescueai.org";
+ const shareText = "🚨 RescueAI Emergency Response Grid: Send 1-tap SOS distress signals, book evacuation shelters, and access offline emergency maps.";
+
+ const handleCopyLink = () => {
+ navigator.clipboard.writeText(`${shareText}\n${emergencyUrl}`);
+ setCopied(true);
+ setTimeout(() => setCopied(false), 3000);
+ };
+
+ const handleWhatsAppShare = () => {
+ const url = `https://api.whatsapp.com/send?text=${encodeURIComponent(shareText + "\n" + emergencyUrl)}`;
+ window.open(url, "_blank");
+ };
+
+ const handleTelegramShare = () => {
+ const url = `https://t.me/share/url?url=${encodeURIComponent(emergencyUrl)}&text=${encodeURIComponent(shareText)}`;
+ window.open(url, "_blank");
+ };
+
+ return (
+ <>
+ {/* Trigger Button */}
+ setIsOpen(true)}
+ className="px-4 py-2 bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-500 hover:to-teal-500 text-white font-extrabold text-xs rounded-2xl shadow-lg transition-all flex items-center gap-2 uppercase tracking-wider active:scale-95"
+ >
+ Social Link Preview & Share
+
+
+ {/* Modal Hub */}
+
+ {isOpen && (
+
+
+ {/* Header */}
+
+
+
+
+
+
+ Social Link Preview & Emergency Share Hub
+
+
+ Simulated Live Previews for WhatsApp, Telegram & Instagram
+
+
+
+
setIsOpen(false)}
+ className="p-2 text-slate-400 hover:text-slate-700 rounded-xl hover:bg-slate-100 transition-colors"
+ >
+
+
+ setActivePlatform("whatsapp")}
+ className={`flex-1 py-2.5 rounded-xl text-xs font-black transition-all flex items-center justify-center gap-2 ${
+ activePlatform === "whatsapp"
+ ? "bg-emerald-600 text-white shadow-md shadow-emerald-950/20"
+ : "text-slate-600 hover:text-slate-900"
+ }`}
+ >
+ WhatsApp
+
+ setActivePlatform("telegram")}
+ className={`flex-1 py-2.5 rounded-xl text-xs font-black transition-all flex items-center justify-center gap-2 ${
+ activePlatform === "telegram"
+ ? "bg-sky-500 text-white shadow-md shadow-sky-950/20"
+ : "text-slate-600 hover:text-slate-900"
+ }`}
+ >
+ Telegram
+
+ setActivePlatform("instagram")}
+ className={`flex-1 py-2.5 rounded-xl text-xs font-black transition-all flex items-center justify-center gap-2 ${
+ activePlatform === "instagram"
+ ? "bg-gradient-to-r from-purple-600 via-pink-600 to-amber-500 text-white shadow-md"
+ : "text-slate-600 hover:text-slate-900"
+ }`}
+ >
+ Instagram
+
+
+
+ {/* SIMULATED PREVIEWS */}
+
+ {/* 1. WhatsApp Live Link Preview Box */}
+ {activePlatform === "whatsapp" && (
+
+
+ WhatsApp Simulated Message & OG Link Card Preview
+
+
+ {/* Rich OG Image Thumbnail */}
+
+
+
+
+
RescueAI Portal
+
+
+ RescueAI — AI Disaster Response & Emergency Grid
+
+
rescueai.org
+
+
+ {shareText}
+
+
+ https://rescueai.org
+
+
10:42 PM ✓✓
+
+
+ )}
+
+ {/* 2. Telegram Live Link Preview Box */}
+ {activePlatform === "telegram" && (
+
+
+ Telegram Rich Media Preview Card
+
+
+
RescueAI Emergency Dispatch
+
+ RescueAI — National Emergency Response Engine
+
+
+ {shareText}
+
+
+ {emergencyUrl}
+
+
+
+ )}
+
+ {/* 3. Instagram Story & Post Preview */}
+ {activePlatform === "instagram" && (
+
+
+ Instagram Story Link & Bio Card Preview
+
+
+
+
+
RESCUEAI EMERGENCY PORTAL
+
+ 1-Tap Geolocation SOS Broadcast & Evacuation Shelter Reservations
+
+
+ 🔗 rescueai.org/sos
+
+
+
+ )}
+
+ {activePlatform === "whatsapp" && (
+
+ Share Directly to WhatsApp
+
+ )}
+
+ {activePlatform === "telegram" && (
+
+ Share Directly to Telegram
+
+ )}
+
+ {activePlatform === "instagram" && (
+
+ Copy Bio Link for Instagram
+
+ )}
+
+
+ {copied ? {copied ? "Copied to Clipboard!" : "Copy Portal Link"}
+
+
+
+
+
+ );
+};
diff --git a/frontend/src/components/landing/Features.tsx b/frontend/src/components/landing/Features.tsx
index e76fd84..dbfad8f 100644
--- a/frontend/src/components/landing/Features.tsx
+++ b/frontend/src/components/landing/Features.tsx
@@ -20,7 +20,9 @@ export const Features: React.FC = () => {
description:
"Instant one-click SOS distress broadcast with high-precision GPS coordinates sent directly to nearby rescue teams and emergency centers.",
badge: "Instant Trigger",
- badgeColor: "bg-red-100 text-red-600 border-red-200",
+ badgeColor: "bg-red-50 text-red-600 border-red-200",
+ iconColor: "bg-red-600 text-white border-red-600",
+ isSos: true,
},
{
icon: Brain,
@@ -28,7 +30,9 @@ export const Features: React.FC = () => {
description:
"Multimodal Gemini AI automatically triages incoming emergency calls into Critical, High, Medium, and Low severity tiers in real time.",
badge: "Gemini AI Engine",
- badgeColor: "bg-blue-100 text-blue-600 border-blue-200",
+ badgeColor: "bg-slate-100 text-slate-800 border-slate-200",
+ iconColor: "bg-slate-100 text-slate-900 border-slate-200",
+ isSos: false,
},
{
icon: MessageSquareHeart,
@@ -36,7 +40,9 @@ export const Features: React.FC = () => {
description:
"Provides 24/7 real-time safety protocols, medical triage guidance, and step-by-step flood & fire survival assistance.",
badge: "24/7 Safety Guide",
- badgeColor: "bg-purple-100 text-purple-600 border-purple-200",
+ badgeColor: "bg-slate-100 text-slate-800 border-slate-200",
+ iconColor: "bg-slate-100 text-slate-900 border-slate-200",
+ isSos: false,
},
{
icon: LayoutDashboard,
@@ -44,7 +50,9 @@ export const Features: React.FC = () => {
description:
"Real-time emergency monitoring workspace featuring live GPS heatmaps, responder telemetry, and automated unit dispatch.",
badge: "Command Center",
- badgeColor: "bg-amber-100 text-amber-600 border-amber-200",
+ badgeColor: "bg-slate-100 text-slate-800 border-slate-200",
+ iconColor: "bg-slate-100 text-slate-900 border-slate-200",
+ isSos: false,
},
{
icon: WifiOff,
@@ -52,7 +60,9 @@ export const Features: React.FC = () => {
description:
"Engineered for disaster zones. Works seamlessly offline using local storage mesh, queuing SOS signals until reconnected.",
badge: "Mesh Ready",
- badgeColor: "bg-emerald-100 text-emerald-600 border-emerald-200",
+ badgeColor: "bg-slate-100 text-slate-800 border-slate-200",
+ iconColor: "bg-slate-100 text-slate-900 border-slate-200",
+ isSos: false,
},
{
icon: RadioTower,
@@ -60,20 +70,18 @@ export const Features: React.FC = () => {
description:
"Centralized multi-agency command bridge connecting Fire, Coast Guard, Medical, and Police dispatch in a unified view.",
badge: "Multi-Agency Node",
- badgeColor: "bg-indigo-100 text-indigo-600 border-indigo-200",
+ badgeColor: "bg-slate-100 text-slate-800 border-slate-200",
+ iconColor: "bg-slate-100 text-slate-900 border-slate-200",
+ isSos: false,
},
];
return (
-
- {/* Background Subtle Accent Flares */}
-
-
-
+
{/* Header */}
-
+
POWERFUL FEATURES
@@ -96,22 +104,22 @@ export const Features: React.FC = () => {
viewport={{ once: true }}
transition={{ duration: 0.5, delay: idx * 0.1 }}
whileHover={{ y: -8 }}
- className="group bg-white rounded-[24px] p-8 sm:p-9 shadow-sm hover:shadow-2xl hover:shadow-red-500/10 border border-slate-200/80 hover:border-red-200 transition-all duration-300 flex flex-col justify-between"
+ className="group bg-white rounded-[24px] p-8 sm:p-9 shadow-sm hover:shadow-xl border border-slate-200 hover:border-slate-300 transition-all duration-300 flex flex-col justify-between"
>
- {/* Large Colorful Circle Icon */}
-
+ {/* Circle Icon */}
+
-
+
{feature.badge}
-
+
{feature.title}
-
@@ -121,7 +129,7 @@ export const Features: React.FC = () => {
RescueAI Core Module
-
);
@@ -131,3 +139,4 @@ export const Features: React.FC = () => {
);
};
+
diff --git a/frontend/src/components/landing/Hero.tsx b/frontend/src/components/landing/Hero.tsx
index 0bf3d78..3ae1223 100644
--- a/frontend/src/components/landing/Hero.tsx
+++ b/frontend/src/components/landing/Hero.tsx
@@ -22,36 +22,10 @@ export const Hero: React.FC = () => {
return (
<>
-
- {/* Background Mesh Grid & Cinematic Glows */}
+
+ {/* Crisp Monochrome Grid Background */}
- {/* Radial Flares */}
-
-
-
-
- {/* Radial Glow Behind Phone Mockup */}
-
-
- {/* Grid Background */}
-
-
- {/* Emergency Particles Floating */}
-
-
-
+
@@ -63,36 +37,36 @@ export const Hero: React.FC = () => {
transition={{ duration: 0.6 }}
className="lg:col-span-7 space-y-8 text-center lg:text-left"
>
- {/* Premium Pill Badge */}
-
+ {/* Premium Monochrome Pill Badge */}
+
-
- Next-Gen Disaster Response & Emergency Coordination
- {/* Headline: 80px Desktop, Line Height 0.95, Highlight "Matters During" */}
-
+ {/* Headline */}
+
Every Second
+
Matters During
{" "}
- {/* Subheading: 18px, Lighter Gray, Increased Width */}
-
+ {/* Subheading */}
+
RescueAI is an AI-Powered Disaster Response & Emergency Coordination Platform that enables citizens to send SOS requests, intelligently prioritizes emergencies using AI, and helps rescue teams respond faster.
- {/* Buttons: Large, Rounded-xl / Rounded-2xl, 20px spacing */}
+ {/* Buttons: Monochrome primary/secondary + RED SOS accent */}
Get Started
@@ -100,36 +74,36 @@ export const Hero: React.FC = () => {
Learn More
setIsDemoOpen(true)}
- className="w-full sm:w-auto px-6 py-4 bg-slate-800/60 hover:bg-slate-800 text-blue-400 font-bold text-sm rounded-2xl border border-blue-500/30 transition-all duration-200 flex items-center justify-center gap-2"
+ className="w-full sm:w-auto px-6 py-4 bg-white hover:bg-slate-50 text-slate-800 font-bold text-sm rounded-2xl border border-slate-200 transition-all duration-200 flex items-center justify-center gap-2 shadow-xs"
>
- Watch Demo
- {/* Bottom Badges */}
-
+ {/* Bottom Badges - Pure Monochrome */}
+
-
-
-
+
99.9% Reliable
@@ -137,7 +111,7 @@ export const Hero: React.FC = () => {
- {/* Right Column: Premium Mobile Phone Mockup & 4 Floating Glass Cards */}
+ {/* Right Column: Pure White Mobile Phone Mockup & Monochrome Glass Cards */}
{
className="lg:col-span-5 relative py-8 flex items-center justify-center"
>
{/* Premium Phone Mockup */}
-
+
{/* Phone Top Notch */}
-
-
-
+
{/* Mobile Display */}
-
+
{/* Header Bar */}
-
+
-
+
RESCUE MOBILE
-
+
GPS ACTIVE
{/* Modern Interactive GPS Map Container */}
-
-
-
-
+
+
+
+
- {/* Emergency Location Marker */}
-
+ {/* Emergency Location Marker (Striking Red Accent) */}
+
-
+
LAT: 37.7749° N
LNG: -122.4194° W
- {/* Large Red One-Tap SOS Button */}
+ {/* Striking Red One-Tap SOS Button */}
setIsSosOpen(true)}
- className="w-full py-4 bg-red-600 hover:bg-red-500 text-white font-black text-sm rounded-2xl shadow-xl shadow-red-600/50 uppercase tracking-widest flex items-center justify-center gap-2 active:scale-95 transition-all"
+ className="w-full py-4 bg-red-600 hover:bg-red-500 text-white font-black text-sm rounded-2xl shadow-xl shadow-red-600/40 uppercase tracking-widest flex items-center justify-center gap-2 active:scale-95 transition-all"
>
ONE-TAP SOS
@@ -195,70 +169,70 @@ export const Hero: React.FC = () => {
- {/* FLOATING CARD 1 (Top Left): Critical SOS - Red Glass Card */}
+ {/* FLOATING CARD 1 (Top Left): Critical SOS - Red Accent Card */}
-
+
-
Critical SOS
-
Flood Trap • 4 Citizens
+
Critical SOS
+
Flood Trap • 4 Citizens
- {/* FLOATING CARD 2 (Right): High Priority - Yellow Card */}
+ {/* FLOATING CARD 2 (Right): High Priority - Monochrome Card */}
-
+
-
High Priority
-
Priority Score: 0.98
+
High Priority
+
Priority Score: 0.98
- {/* FLOATING CARD 3 (Bottom Left): AI Analysis - Blue Glass Card */}
+ {/* FLOATING CARD 3 (Bottom Left): AI Analysis - Monochrome Card */}
-
+
-
AI Analysis Active
-
Gemini Multimodal Triage
+
AI Analysis Active
+
Gemini Multimodal Triage
- {/* FLOATING CARD 4 (Bottom Right): Rescue Team Assigned - Green Glass Card */}
+ {/* FLOATING CARD 4 (Bottom Right): Rescue Team Assigned - Monochrome Card */}
-
+
-
Rescue Team Assigned
-
Coast Guard #4 (ETA 3 Mins)
+
Rescue Team Assigned
+
Coast Guard #4 (ETA 3 Mins)
@@ -267,42 +241,42 @@ export const Hero: React.FC = () => {
{isDemoOpen && (
-
+
-
+
-
-
RescueAI Platform Demo
+
+
RescueAI Platform Demo
setIsDemoOpen(false)}
- className="p-1.5 text-slate-400 hover:text-white rounded-lg"
+ className="p-1.5 text-slate-400 hover:text-slate-900 rounded-lg hover:bg-slate-100 transition-colors"
>
-
-
+
+
-
Interactive Platform Preview
-
+
Interactive Platform Preview
+
Demonstrates 1-tap SOS geolocation broadcast, Gemini AI emergency triage, and real-time EOC dispatch grid.
setIsDemoOpen(false)}
- className="w-full py-3 bg-slate-800 hover:bg-slate-700 font-bold text-xs rounded-xl"
+ className="w-full py-3 bg-slate-900 hover:bg-slate-800 text-white font-bold text-xs rounded-xl transition-colors"
>
Close Demo Preview
@@ -316,3 +290,4 @@ export const Hero: React.FC = () => {
);
};
+
diff --git a/frontend/src/components/landing/Navbar.tsx b/frontend/src/components/landing/Navbar.tsx
index a32dc8f..cc0e5cf 100644
--- a/frontend/src/components/landing/Navbar.tsx
+++ b/frontend/src/components/landing/Navbar.tsx
@@ -20,27 +20,27 @@ export const Navbar: React.FC = () => {
return (
<>
-
+
- {/* Left: Larger RescueAI Logo */}
+ {/* Left: RescueAI Logo */}
-
+
-
- RescueAI
+
+ RescueAI
-
+
Emergency Platform
@@ -52,7 +52,7 @@ export const Navbar: React.FC = () => {
{link.name}
@@ -61,26 +61,26 @@ export const Navbar: React.FC = () => {
{/* Right: Login, Register, Emergency SOS */}
- {/* Login Button: Dark Outline Rounded */}
+ {/* Login Button */}
Login
- {/* Register Button: White Rounded */}
+ {/* Register Button */}
Register
- {/* Emergency SOS: Bright Red Gradient with Strong Glow */}
+ {/* Crucial Exception: Striking Red Emergency SOS Button */}
setIsSosModalOpen(true)}
- className="relative group overflow-hidden px-6 py-2.5 text-xs font-black text-white bg-gradient-to-r from-red-600 via-red-500 to-red-600 rounded-full shadow-2xl shadow-red-500/50 hover:shadow-red-500/80 hover:-translate-y-0.5 active:scale-95 transition-all duration-300 flex items-center gap-2 uppercase tracking-wider"
+ className="relative group overflow-hidden px-6 py-2.5 text-xs font-black text-white bg-red-600 hover:bg-red-500 rounded-full shadow-lg shadow-red-600/30 hover:shadow-red-600/50 hover:-translate-y-0.5 active:scale-95 transition-all duration-300 flex items-center gap-2 uppercase tracking-wider"
aria-label="Emergency SOS Request"
>
setIsSosModalOpen(true)}
- className="px-4 py-2 text-xs font-black text-white bg-red-600 rounded-full shadow-lg shadow-red-600/40 flex items-center gap-1.5 uppercase"
+ className="px-4 py-2 text-xs font-black text-white bg-red-600 rounded-full shadow-md shadow-red-600/40 flex items-center gap-1.5 uppercase"
>
SOS
@@ -100,7 +100,7 @@ export const Navbar: React.FC = () => {
setIsMobileMenuOpen(!isMobileMenuOpen)}
- className="p-2.5 text-slate-400 hover:text-white hover:bg-slate-800 rounded-xl focus:outline-none"
+ className="p-2.5 text-slate-600 hover:text-slate-900 hover:bg-slate-100 rounded-xl focus:outline-none"
>
{isMobileMenuOpen ?
@@ -110,29 +110,29 @@ export const Navbar: React.FC = () => {
{/* Mobile Navigation Drawer */}
{isMobileMenuOpen && (
-
+
{navLinks.map((link) => (
setIsMobileMenuOpen(false)}
- className="block px-4 py-3 text-sm font-semibold text-slate-300 hover:text-white hover:bg-slate-800/80 rounded-xl"
+ className="block px-4 py-3 text-sm font-semibold text-slate-700 hover:text-slate-900 hover:bg-slate-100 rounded-xl"
>
{link.name}
))}
-
+
{});
+ // Send Email Verification
+ await sendEmailVerification(user).catch((err) => console.warn("Failed to send verification email", err));
+
+ // Store session token in localStorage for client-side explicit check (though Firebase persists it automatically)
+ const token = await user.getIdToken();
+ if (typeof window !== "undefined") {
+ localStorage.setItem("rescueai_session_token", token);
+ }
+
const newProfile: UserProfile = {
uid: user.uid,
name: data.name,
@@ -423,6 +437,12 @@ export async function loginWithEmail(data: LoginFormData): Promise
const user = userCredential.user;
const now = new Date().toISOString();
+ // Store session token in localStorage for client-side explicit check (though Firebase persists it automatically)
+ const token = await user.getIdToken();
+ if (typeof window !== "undefined") {
+ localStorage.setItem("rescueai_session_token", token);
+ }
+
let profile = await getUserProfile(user.uid);
if (profile) {
@@ -590,7 +610,7 @@ export function subscribeUsersListStream(
const list: UserProfile[] = [];
snapshot.forEach((docSnap) => {
if (docSnap.exists()) {
- list.push(docSnap.data() as UserProfile);
+ list.push({ ...docSnap.data(), uid: docSnap.data().uid || docSnap.id } as UserProfile);
}
});
callback(list);
@@ -660,14 +680,14 @@ export async function deleteUserInFirestore(uid: string): Promise {
*/
export async function resetPasswordService(email: string): Promise {
const cleanEmail = email.trim().toLowerCase();
- try {
- await fetch("/api/send-reset-email", {
- method: "POST",
- headers: { "Content-Type": "application/json" },
- body: JSON.stringify({ email: cleanEmail, actionType: "reset" }),
- });
- } catch (e) {
- console.warn("Resend email dispatch notice:", e);
+ const res = await fetch("/api/send-reset-email", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ email: cleanEmail, actionType: "reset" }),
+ });
+ const data = await res.json().catch(() => ({}));
+ if (!res.ok || !data.ok) {
+ throw new Error(data.error || data.message || `Password reset email failed (${res.status})`);
}
}
@@ -684,18 +704,19 @@ export async function sendLoginOTP(email: string): Promise {
localStorage.setItem(`rescueai_otp_${cleanEmail}`, generatedOtp);
}
- try {
- await fetch("/api/send-reset-email", {
- method: "POST",
- headers: { "Content-Type": "application/json" },
- body: JSON.stringify({
- email: cleanEmail,
- otpCode: generatedOtp,
- actionType: "otp",
- }),
- });
- } catch (e) {
- console.warn("OTP dispatch error via Resend API:", e);
+ const res = await fetch("/api/send-reset-email", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({
+ email: cleanEmail,
+ otpCode: generatedOtp,
+ actionType: "otp",
+ }),
+ });
+
+ const data = await res.json().catch(() => ({}));
+ if (!res.ok || !data.ok) {
+ throw new Error(data.error || data.message || `OTP email dispatch failed (${res.status})`);
}
return generatedOtp;