[V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import Header from "./components/Header" import Hero from "./components/Hero" import Features from "./components/Features" import Statistics from "./components/Statistics" import ReportForm from "./components/ReportForm" import ResourceCenter from "./components/ResourceCenter" import CyberAwarenessQuiz from "./components/CyberAwarenessQuiz" import ThreatMap from "./components/ThreatMap" import Footer from "./components/Footer" export default function Home() { return (

{" "} {/* Add padding-top to account for sticky header */}

) } [V0_FILE]typescriptreact:file="app/components/Hero.tsx" isEdit="true" isMerged="true" import Button from "./Button" import Image from "next/image" export default function Hero() { return (

Protecting India's Digital Frontier

Join the fight against cybercrime. Report incidents, access resources, and stay informed about online safety.

) } [V0_FILE]typescriptreact:file="app/components/Features.tsx" isEdit="true" isMerged="true" import { Shield, FileText, Phone, Users, Lock, Zap } from "lucide-react" import Card from "./Card" import Image from "next/image" const features = [ { icon: Shield, title: "Secure Reporting", description: "Report cybercrimes securely and anonymously through our encrypted platform.", image: "/secure-reporting.jpg", }, { icon: FileText, title: "Resource Center", description: "Access a wealth of information on cybersecurity best practices and current threats.", image: "/resource-center.jpg", }, { icon: Phone, title: "24/7 Helpline", description: "Get immediate assistance from our team of cybersecurity experts any time, day or night.", image: "/helpline.jpg", }, { icon: Users, title: "Community Support", description: "Connect with others who have experienced cybercrime and share your story.", image: "/community-support.jpg", }, { icon: Lock, title: "Data Protection", description: "Learn about the latest data protection measures and how to safeguard your personal information.", image: "/data-protection.jpg", }, { icon: Zap, title: "Rapid Response", description: "Our team of experts is ready to respond quickly to emerging cyber threats and incidents.", image: "/rapid-response.jpg", }, ] export default function Features() { return (

Our Features

{features.map((feature, index) => (

{feature.title}

{feature.description}

))}

) } [V0_FILE]typescriptreact:file="app/components/Statistics.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Bar, BarChart, Line, LineChart, ResponsiveContainer, XAxis, YAxis, Tooltip } from "recharts" import Card from "./Card" const monthlyData = [ { name: "Jan", total: 167 }, { name: "Feb", total: 190 }, { name: "Mar", total: 210 }, { name: "Apr", total: 252 }, { name: "May", total: 265 }, { name: "Jun", total: 280 }, ] const yearlyData = [ { year: 2018, total: 2400 }, { year: 2019, total: 2800 }, { year: 2020, total: 3200 }, { year: 2021, total: 3600 }, { year: 2022, total: 4000 }, ] const crimeTypeData = [ { name: "Phishing", value: 35 }, { name: "Identity Theft", value: 25 }, { name: "Ransomware", value: 20 }, { name: "Data Breach", value: 15 }, { name: "Other", value: 5 }, ] export default function Statistics() { const [activeIndex, setActiveIndex] = useState(0) const tabs = ["Monthly", "Yearly", "Crime Types"] return (

Cybercrime Statistics

{tabs.map((tab, index) => ( ))}

{activeIndex === 0 && ( )} {activeIndex === 1 && ( )} {activeIndex === 2 && ( )}

) } [V0_FILE]typescriptreact:file="app/components/ReportForm.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import Button from "./Button" import Card from "./Card" export default function ReportForm() { const [formData, setFormData] = useState({ name: "", email: "", crimeType: "", description: "", }) const [isSubmitted, setIsSubmitted] = useState(false) const handleChange = (e: React.ChangeEvent) => { setFormData({ ...formData, [e.target.name]: e.target.value }) } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() console.log("Form submitted:", formData) setIsSubmitted(true) // Here you would typically send the data to your backend } return (

Report a Cybercrime

{isSubmitted ? (

Thank you for your report!

We have received your information and will investigate promptly.

) : ( )}

) } [V0_FILE]typescriptreact:file="app/components/Footer.tsx" isEdit="true" isMerged="true" import { Shield, Facebook, Twitter, Instagram } from "lucide-react" export default function Footer() { return ( ) } [V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import "./globals.css" import { Inter } from "next/font/google" import type React from "react" // Import React const inter = Inter({ subsets: ["latin"] }) export const metadata = { title: "CyberShield - Protecting India's Digital Frontier", description: "Report cybercrimes, access resources, and stay informed about online safety.", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 222.2 47.4% 11.2%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 222.2 84% 4.9%; --radius: 0.5rem; --chart-1: 222.2 47.4% 11.2%; --chart-2: 210 40% 96.1%; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 210 40% 98%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 212.7 26.8% 83.9%; --chart-1: 210 40% 98%; --chart-2: 217.2 32.6% 17.5%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/components/Card.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import { forwardRef } from "react" import type React from "react" interface CardProps extends React.HTMLAttributes {} const Card = forwardRef(({ className, ...props }, ref) => { return

}) Card.displayName = "Card" export default Card [V0_FILE]typescriptreact:file="app/components/CyberAwarenessQuiz.tsx" isMerged="true" "use client" import { useState } from "react" import Card from "./Card" import Button from "./Button" const quizQuestions = [ { question: "What is phishing?", options: [ "A type of fish", "A cybercrime involving deceptive emails or websites", "A social media platform", "A computer virus", ], correctAnswer: 1, }, { question: "What does 'https' in a URL indicate?", options: [ "High-speed internet", "Hypertext transfer protocol", "A secure, encrypted connection", "A social media website", ], correctAnswer: 2, }, { question: "What is two-factor authentication?", options: [ "Using two different passwords", "Logging in from two devices", "A security process requiring two forms of identification", "Changing your password twice", ], correctAnswer: 2, }, ] export default function CyberAwarenessQuiz() { const [currentQuestion, setCurrentQuestion] = useState(0) const [score, setScore] = useState(0) const [showScore, setShowScore] = useState(false) const handleAnswerClick = (selectedAnswer: number) => { if (selectedAnswer === quizQuestions[currentQuestion].correctAnswer) { setScore(score + 1) } const nextQuestion = currentQuestion + 1 if (nextQuestion < quizQuestions.length) { setCurrentQuestion(nextQuestion) } else { setShowScore(true) } } const resetQuiz = () => { setCurrentQuestion(0) setScore(0) setShowScore(false) } return (

Cyber Awareness Quiz

{showScore ? (

You scored {score} out of {quizQuestions.length}

) : ( <>

Question {currentQuestion + 1}/{quizQuestions.length}

{quizQuestions[currentQuestion].question}

{quizQuestions[currentQuestion].options.map((option, index) => ( ))}

)}

) } [V0_FILE]typescriptreact:file="app/components/ThreatMap.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { ComposableMap, Geographies, Geography, Marker } from "react-simple-maps" import Card from "./Card" const geoUrl = "https://raw.githubusercontent.com/deldersveld/topojson/master/world-countries.json" const markers = [ { name: "New Delhi", coordinates: [77.209, 28.6139] }, { name: "Mumbai", coordinates: [72.8777, 19.076] }, { name: "Bangalore", coordinates: [77.5946, 12.9716] }, { name: "Chennai", coordinates: [80.2707, 13.0827] }, { name: "Kolkata", coordinates: [88.3639, 22.5726] }, ] export default function ThreatMap() { const [threatLevel, setThreatLevel] = useState<{ [key: string]: number }>({}) useEffect(() => { // Simulate real-time threat level updates const interval = setInterval(() => { const newThreatLevel = markers.reduce( (acc, marker) => { acc[marker.name] = Math.floor(Math.random() * 100) return acc }, {} as { [key: string]: number }, ) setThreatLevel(newThreatLevel) }, 5000) return () => clearInterval(interval) }, []) return (

Real-time Threat Map

{({ geographies }) => geographies.map((geo) => ( )) } {markers.map(({ name, coordinates }) => ( {name} ))}

) } [V0_FILE]typescriptreact:file="app/components/Header.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import Link from "next/link" import { Shield, Menu, X } from "lucide-react" import Button from "./Button" export default function Header() { const [isMenuOpen, setIsMenuOpen] = useState(false) const handleEmergencyClick = () => { alert("Emergency hotline: 1800-XXX-XXXX") } return (

CyberShield

Home Features Report Resources Quiz

{isMenuOpen && (

Home Features Report Resources Quiz

)}

) } function NavLink({ href, children, mobile = false }: { href: string; children: React.ReactNode; mobile?: boolean }) { const baseClasses = "text-gray-300 hover:text-white transition-colors duration-300" const mobileClasses = "block py-2" const classes = mobile ? `${baseClasses} ${mobileClasses}` : baseClasses return ( {children} ) } [V0_FILE]typescriptreact:file="app/components/ResourceCenter.tsx" isEdit="true" "use client" import { Book, Video, FileText, LinkIcon } from "lucide-react" import Card from "./Card" import Button from "./Button" import Image from "next/image" const resources = [ { icon: Book, title: "Cybersecurity Handbook", description: "A comprehensive guide to protecting yourself online.", link: "#", image: "/cybersecurity-handbook.jpg", }, { icon: Video, title: "Video Tutorials", description: "Learn about cybersecurity through our video series.", link: "#", image: "/video-tutorials.jpg", }, { icon: FileText, title: "Latest Threat Reports", description: "Stay informed about the latest cybersecurity threats.", link: "#", image: "/threat-reports.jpg", }, { icon: LinkIcon, title: "Useful Links", description: "Curated list of cybersecurity resources and tools.", link: "#", image: "/useful-links.jpg", }, ] export default function ResourceCenter() { const handleResourceClick = (link: string) => { window.open(link, "_blank") } return (

Resource Center

{resources.map((resource, index) => ( handleResourceClick(resource.link)} >

{resource.title}

{resource.description}

))}

) } [V0_FILE]typescriptreact:file="app/components/Button.tsx" isEdit="true" "use client" import type React from "react" import { forwardRef } from "react" interface ButtonProps extends React.ButtonHTMLAttributes { variant?: "primary" | "secondary" | "outline" size?: "sm" | "md" | "lg" fullWidth?: boolean } const Button = forwardRef( ({ className, variant = "primary", size = "md", fullWidth = false, ...props }, ref) => { const baseClasses = "font-semibold rounded-lg transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2" const sizeClasses = { sm: "px-3 py-1.5 text-sm", md: "px-4 py-2 text-base", lg: "px-6 py-3 text-lg", } const variantClasses = { primary: "bg-blue-600 hover:bg-blue-700 text-white focus:ring-blue-500", secondary: "bg-purple-600 hover:bg-purple-700 text-white focus:ring-purple-500", outline: "bg-transparent border-2 border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white focus:ring-blue-500", } const widthClass = fullWidth ? "w-full" : "" const classes = `${baseClasses} ${sizeClasses[size]} ${variantClasses[variant]} ${widthClass} ${className || ""}` return

About

About