[V0_FILE]css:file="app/globals.css" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); /* Pure white */ --foreground: oklch(0.4 0 0); /* Dark gray for text (#475569) */ --card: oklch(0.98 0.01 200); /* Light cyan background (#ecfeff) */ --card-foreground: oklch(0.3 0.05 200); /* Cyan-800 (#164e63) */ --popover: oklch(1 0 0); --popover-foreground: oklch(0.4 0 0); --primary: oklch(0.3 0.05 200); /* Cyan-800 (#164e63) for trust and stability */ --primary-foreground: oklch(1 0 0); --secondary: oklch(0.4 0 0); /* Gray-600 (#475569) */ --secondary-foreground: oklch(1 0 0); --muted: oklch(0.98 0.01 200); /* Light cyan (#ecfeff) */ --muted-foreground: oklch(0.4 0 0); --accent: oklch(0.65 0.15 70); /* Amber-500 (#f59e0b) for highlights */ --accent-foreground: oklch(1 0 0); --destructive: oklch(0.55 0.22 25); /* Red-600 (#dc2626) for critical alerts */ --destructive-foreground: oklch(1 0 0); --border: oklch(0.85 0 0); /* Light gray (#d1d5db) */ --input: oklch(0.96 0 0); /* Very light gray (#f1f5f9) */ --ring: oklch(0.3 0.05 200 / 0.5); /* Primary with opacity */ --chart-1: oklch(0.55 0.15 250); /* Blue for positive data */ --chart-2: oklch(0.6 0.25 15); /* Red for negative data */ --chart-3: oklch(0.7 0.2 140); /* Green for neutral data */ --chart-4: oklch(0.75 0.15 85); /* Yellow for alerts */ --chart-5: oklch(0.6 0.2 300); /* Purple for supplementary */ --radius: 0.5rem; --sidebar: oklch(0.98 0.01 200); /* Light cyan */ --sidebar-foreground: oklch(0.4 0 0); --sidebar-primary: oklch(0.3 0.05 200); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.65 0.15 70); --sidebar-accent-foreground: oklch(1 0 0); --sidebar-border: oklch(0.85 0 0); --sidebar-ring: oklch(0.3 0.05 200 / 0.5); } .dark { --background: oklch(0.1 0 0); --foreground: oklch(0.95 0 0); --card: oklch(0.15 0.02 200); --card-foreground: oklch(0.9 0.02 200); --popover: oklch(0.1 0 0); --popover-foreground: oklch(0.95 0 0); --primary: oklch(0.7 0.1 200); /* Lighter cyan for dark mode */ --primary-foreground: oklch(0.1 0 0); --secondary: oklch(0.25 0 0); --secondary-foreground: oklch(0.95 0 0); --muted: oklch(0.25 0 0); --muted-foreground: oklch(0.7 0 0); --accent: oklch(0.75 0.15 70); --accent-foreground: oklch(0.1 0 0); --destructive: oklch(0.6 0.22 25); --destructive-foreground: oklch(0.95 0 0); --border: oklch(0.25 0 0); --input: oklch(0.25 0 0); --ring: oklch(0.7 0.1 200 / 0.5); --chart-1: oklch(0.6 0.15 250); --chart-2: oklch(0.65 0.25 15); --chart-3: oklch(0.75 0.2 140); --chart-4: oklch(0.8 0.15 85); --chart-5: oklch(0.65 0.2 300); --sidebar: oklch(0.15 0.02 200); --sidebar-foreground: oklch(0.9 0.02 200); --sidebar-primary: oklch(0.7 0.1 200); --sidebar-primary-foreground: oklch(0.1 0 0); --sidebar-accent: oklch(0.75 0.15 70); --sidebar-accent-foreground: oklch(0.1 0 0); --sidebar-border: oklch(0.25 0 0); --sidebar-ring: oklch(0.7 0.1 200 / 0.5); } @theme inline { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/page.tsx" import { Shield, Users, AlertTriangle, BookOpen, Activity, Bell } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import Link from "next/link" export default function HomePage() { return (

{/* Header */}

DisasterEd

Preparedness & Response Education

{/* Hero Section */}

Emergency Preparedness for Educational Institutions

Build Safer Schools Through Interactive Learning

Comprehensive disaster preparedness and response education system designed specifically for schools and colleges. Interactive modules, virtual drills, and real-time emergency management.

{/* Features Grid */}

Complete Disaster Preparedness Solution

Everything your educational institution needs to prepare for, respond to, and recover from disasters.

{/* Interactive Learning Modules */}

Interactive Learning Modules Region-specific disaster awareness content with step-by-step emergency protocols

• Earthquake zones and safety protocols
• Flood risk assessment and response
• Fire safety and evacuation procedures
• First-aid guidance and training

{/* Virtual Drills */}

Virtual Drills & Simulations Scenario-based drills with gamified tasks and performance tracking

• Real disaster scenario simulations
• Role-based participation system
• Performance tracking and feedback
• Gamified learning experience

{/* Real-time Alerts */}

Real-time Alerts Integration with government alerts and emergency communication tools

• IMD and NDMA integration
• Push notifications and SMS alerts
• Emergency contact directories
• Multi-channel communication

{/* Preparedness Dashboard */}

Preparedness Dashboard Comprehensive tracking and reporting for administrators

• Drill participation tracking
• Readiness scores and analytics
• Custom administrative reports
• Progress monitoring tools

{/* Community Engagement */}

Community Engagement Connect with parents, local authorities, and volunteer networks

• Parent notification system
• Regional disaster news updates
• Local volunteer coordination
• Community resource sharing

{/* Emergency Protocols */}

Emergency Protocols Standardized procedures and quick-access emergency resources

• Evacuation route planning
• Emergency contact systems
• Crisis communication templates
• Recovery and continuity plans

{/* CTA Section */}

Ready to Make Your Institution Safer?

Join thousands of schools and colleges already using DisasterEd to build comprehensive emergency preparedness programs.

{/* Footer */}

) } [V0_FILE]typescriptreact:file="components/auth/auth-provider.tsx" "use client" import type React from "react" import { createContext, useContext, useEffect, useState } from "react" interface User { id: string email: string name: string role: "student" | "teacher" | "admin" institution: string } interface AuthContextType { user: User | null loading: boolean signIn: (email: string, password: string) => Promise signUp: (email: string, password: string, name: string, role: User["role"], institution: string) => Promise signOut: () => Promise } const AuthContext = createContext(undefined) export function AuthProvider({ children }: { children: React.ReactNode }) { const [user, setUser] = useState(null) const [loading, setLoading] = useState(true) useEffect(() => { // Check for existing session const checkAuth = async () => { try { // This would typically check with your auth service const savedUser = localStorage.getItem("user") if (savedUser) { setUser(JSON.parse(savedUser)) } } catch (error) { console.error("Auth check failed:", error) } finally { setLoading(false) } } checkAuth() }, []) const signIn = async (email: string, password: string) => { setLoading(true) try { // Mock authentication - replace with real auth service const mockUser: User = { id: "1", email, name: "John Doe", role: "teacher", institution: "Sample School", } setUser(mockUser) localStorage.setItem("user", JSON.stringify(mockUser)) } catch (error) { throw new Error("Sign in failed") } finally { setLoading(false) } } const signUp = async (email: string, password: string, name: string, role: User["role"], institution: string) => { setLoading(true) try { // Mock registration - replace with real auth service const newUser: User = { id: Date.now().toString(), email, name, role, institution, } setUser(newUser) localStorage.setItem("user", JSON.stringify(newUser)) } catch (error) { throw new Error("Sign up failed") } finally { setLoading(false) } } const signOut = async () => { setUser(null) localStorage.removeItem("user") } return {children} } export function useAuth() { const context = useContext(AuthContext) if (context === undefined) { throw new Error("useAuth must be used within an AuthProvider") } return context } [V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true" import type React from "react" import type { Metadata } from "next" import { GeistSans } from "geist/font/sans" import { GeistMono } from "geist/font/mono" import { Analytics } from "@vercel/analytics/next" import { AuthProvider } from "@/components/auth/auth-provider" import { Suspense } from "react" import "./globals.css" export const metadata: Metadata = { title: "DisasterEd - Disaster Preparedness Education", description: "Comprehensive disaster preparedness and response education system for schools and colleges", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) }