Merge version_2 into main #2
53
src/app/admin/page.tsx
Normal file
53
src/app/admin/page.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
||||
import { Users, BarChart3, Settings, AlertCircle } from "lucide-react";
|
||||
|
||||
export default function AdminDashboardPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="small"
|
||||
sizing="mediumLarge"
|
||||
background="none"
|
||||
cardStyle="gradient-bordered"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Dashboard", id: "/admin" }
|
||||
]}
|
||||
brandName="Bosaso Police Admin"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics" className="pt-32 pb-16">
|
||||
<MetricCardOne
|
||||
title="System Overview"
|
||||
description="Administrative control panel for managing user accounts, reports, and system settings."
|
||||
gridVariant="bento-grid"
|
||||
animationType="slide-up"
|
||||
metrics={[
|
||||
{ id: "u1", value: "1,248", title: "Active Users", description: "Registered account holders", icon: Users },
|
||||
{ id: "u2", value: "85%", title: "Report Efficiency", description: "Resolved incident volume", icon: BarChart3 },
|
||||
{ id: "u3", value: "12", title: "Pending Alerts", description: "High priority investigations", icon: AlertCircle },
|
||||
{ id: "u4", value: "Enabled", title: "System Status", description: "Global configuration settings", icon: Settings }
|
||||
]}
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
63
src/app/login/page.tsx
Normal file
63
src/app/login/page.tsx
Normal file
@@ -0,0 +1,63 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import { useState } from "react";
|
||||
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||||
|
||||
export default function LoginPage() {
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
console.log("Login attempted:", { email, password });
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="small"
|
||||
sizing="mediumLarge"
|
||||
background="none"
|
||||
cardStyle="gradient-bordered"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Login", id: "/login" },
|
||||
{ name: "Register", id: "/register" },
|
||||
]}
|
||||
brandName="Bosaso Police"
|
||||
/>
|
||||
<main className="min-h-screen flex items-center justify-center pt-20">
|
||||
<form onSubmit={handleSubmit} className="p-8 rounded-lg shadow-lg max-w-md w-full border border-gray-200">
|
||||
<h1 className="text-2xl font-bold mb-6">Police Login</h1>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
className="w-full p-3 mb-4 border rounded"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
className="w-full p-3 mb-6 border rounded"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<button type="submit" className="w-full p-3 bg-blue-600 text-white rounded font-bold">
|
||||
Login
|
||||
</button>
|
||||
</form>
|
||||
</main>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
293
src/app/page.tsx
293
src/app/page.tsx
@@ -31,22 +31,11 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "Admin", id: "/admin" },
|
||||
]}
|
||||
brandName="Bosaso Police"
|
||||
/>
|
||||
@@ -55,107 +44,52 @@ export default function LandingPage() {
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitTestimonial
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
variant: "gradient-bars"}}
|
||||
title="Bosaso Police Crime Report & Tracking System"
|
||||
description="Secure, efficient, and community-focused reporting platform for a safer Bosaso. Empowering local police with real-time incident tracking to protect our citizens."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Ali Hassan",
|
||||
handle: "@alihassan",
|
||||
testimonial: "This platform has significantly improved how we report incidents in Bosaso.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-urban-car-street_23-2149092128.jpg?_wi=1",
|
||||
imageAlt: "police patrol car city station",
|
||||
},
|
||||
name: "Ali Hassan", handle: "@alihassan", testimonial: "This platform has significantly improved how we report incidents in Bosaso.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-urban-car-street_23-2149092128.jpg?_wi=1", imageAlt: "police patrol car city station"},
|
||||
{
|
||||
name: "Fatima Noor",
|
||||
handle: "@fatimanoor",
|
||||
testimonial: "Very user-friendly and keeps our community safe.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/general-headquarters-monitoring-room-with-mockup-screen-tablet_482257-90086.jpg?_wi=1",
|
||||
imageAlt: "police patrol car city station",
|
||||
},
|
||||
name: "Fatima Noor", handle: "@fatimanoor", testimonial: "Very user-friendly and keeps our community safe.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/general-headquarters-monitoring-room-with-mockup-screen-tablet_482257-90086.jpg?_wi=1", imageAlt: "police patrol car city station"},
|
||||
{
|
||||
name: "Mohamed Abdi",
|
||||
handle: "@mohabdi",
|
||||
testimonial: "Quick response times thanks to the tracking system.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/platoon-captain-handling-surveillance-safety-operations-with-crew_482257-91019.jpg?_wi=1",
|
||||
imageAlt: "police patrol car city station",
|
||||
},
|
||||
name: "Mohamed Abdi", handle: "@mohabdi", testimonial: "Quick response times thanks to the tracking system.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/platoon-captain-handling-surveillance-safety-operations-with-crew_482257-91019.jpg?_wi=1", imageAlt: "police patrol car city station"},
|
||||
{
|
||||
name: "Zahra Ahmed",
|
||||
handle: "@zahraahmed",
|
||||
testimonial: "Essential tool for every citizen in Bosaso.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/taxi-driver-getting-ready-customer_23-2149273220.jpg?_wi=1",
|
||||
imageAlt: "police patrol car city station",
|
||||
},
|
||||
name: "Zahra Ahmed", handle: "@zahraahmed", testimonial: "Essential tool for every citizen in Bosaso.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/taxi-driver-getting-ready-customer_23-2149273220.jpg?_wi=1", imageAlt: "police patrol car city station"},
|
||||
{
|
||||
name: "Yusuf Omar",
|
||||
handle: "@yusufomar",
|
||||
testimonial: "A massive step forward for police accountability.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-mechanic-standing-with-arms-crossed_1170-2381.jpg?_wi=1",
|
||||
imageAlt: "police patrol car city station",
|
||||
},
|
||||
name: "Yusuf Omar", handle: "@yusufomar", testimonial: "A massive step forward for police accountability.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-mechanic-standing-with-arms-crossed_1170-2381.jpg?_wi=1", imageAlt: "police patrol car city station"},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Report Incident",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Report Incident", href: "#contact"},
|
||||
{
|
||||
text: "Learn More",
|
||||
href: "#about",
|
||||
},
|
||||
text: "Learn More", href: "#about"},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/modern-urban-car-street_23-2149092128.jpg?_wi=2"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/car-entering-parking_1160-352.jpg",
|
||||
alt: "Local resident",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/car-entering-parking_1160-352.jpg", alt: "Local resident"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-stylish-woman-exploring-city_23-2149186680.jpg",
|
||||
alt: "Community member",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/young-stylish-woman-exploring-city_23-2149186680.jpg", alt: "Community member"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/policemen-street-japan_23-2149297293.jpg",
|
||||
alt: "Local business owner",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/policemen-street-japan_23-2149297293.jpg", alt: "Local business owner"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/fire-truck-motion-emergency-vehicle-street-dynamic-city-scene_169016-68604.jpg",
|
||||
alt: "Youth representative",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/fire-truck-motion-emergency-vehicle-street-dynamic-city-scene_169016-68604.jpg", alt: "Youth representative"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/person-sitting-house-with-automation-light-system_482257-9704.jpg",
|
||||
alt: "Neighborhood elder",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/person-sitting-house-with-automation-light-system_482257-9704.jpg", alt: "Neighborhood elder"},
|
||||
]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Safety First",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Rapid Response",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Data Driven",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Community Trust",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "24/7 Monitoring",
|
||||
},
|
||||
{ type: "text", text: "Safety First" },
|
||||
{ type: "text", text: "Rapid Response" },
|
||||
{ type: "text", text: "Data Driven" },
|
||||
{ type: "text", text: "Community Trust" },
|
||||
{ type: "text", text: "24/7 Monitoring" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -166,19 +100,13 @@ export default function LandingPage() {
|
||||
title="Our Mission for Bosaso"
|
||||
metrics={[
|
||||
{
|
||||
label: "Incidents Resolved",
|
||||
value: "1200+",
|
||||
icon: CheckCircle,
|
||||
label: "Incidents Resolved", value: "1200+", icon: CheckCircle,
|
||||
},
|
||||
{
|
||||
label: "Active Reports",
|
||||
value: "45",
|
||||
icon: AlertCircle,
|
||||
label: "Active Reports", value: "45", icon: AlertCircle,
|
||||
},
|
||||
{
|
||||
label: "Community Participation",
|
||||
value: "98%",
|
||||
icon: Users,
|
||||
label: "Community Participation", value: "98%", icon: Users,
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
@@ -192,38 +120,14 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Secure Mobile Reporting",
|
||||
author: "Police Dept",
|
||||
description: "Instant crime reporting from any smartphone with real-time location tagging.",
|
||||
tags: [
|
||||
"Security",
|
||||
"Mobile",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/general-headquarters-monitoring-room-with-mockup-screen-tablet_482257-90086.jpg?_wi=2",
|
||||
},
|
||||
id: "f1", title: "Secure Mobile Reporting", author: "Police Dept", description: "Instant crime reporting from any smartphone with real-time location tagging.", tags: ["Security", "Mobile"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/general-headquarters-monitoring-room-with-mockup-screen-tablet_482257-90086.jpg?_wi=2"},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Real-time Tracking",
|
||||
author: "Police Dept",
|
||||
description: "Dispatch teams can track reported incidents via live GPS data updates.",
|
||||
tags: [
|
||||
"Tracking",
|
||||
"GPS",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/platoon-captain-handling-surveillance-safety-operations-with-crew_482257-91019.jpg?_wi=2",
|
||||
},
|
||||
id: "f2", title: "Real-time Tracking", author: "Police Dept", description: "Dispatch teams can track reported incidents via live GPS data updates.", tags: ["Tracking", "GPS"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/platoon-captain-handling-surveillance-safety-operations-with-crew_482257-91019.jpg?_wi=2"},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Community Engagement",
|
||||
author: "Police Dept",
|
||||
description: "Interactive platform connecting local authorities with citizens for proactive safety.",
|
||||
tags: [
|
||||
"Safety",
|
||||
"Community",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/taxi-driver-getting-ready-customer_23-2149273220.jpg?_wi=2",
|
||||
},
|
||||
id: "f3", title: "Community Engagement", author: "Police Dept", description: "Interactive platform connecting local authorities with citizens for proactive safety.", tags: ["Safety", "Community"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/taxi-driver-getting-ready-customer_23-2149273220.jpg?_wi=2"},
|
||||
]}
|
||||
title="Core Capabilities"
|
||||
description="State-of-the-art tools designed for rapid reporting and effective police response."
|
||||
@@ -237,21 +141,9 @@ export default function LandingPage() {
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "15 min",
|
||||
description: "Avg Response Time",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "24/7",
|
||||
description: "Operational Status",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "95%",
|
||||
description: "Incident Completion",
|
||||
},
|
||||
{ id: "m1", value: "15 min", description: "Avg Response Time" },
|
||||
{ id: "m2", value: "24/7", description: "Operational Status" },
|
||||
{ id: "m3", value: "95%", description: "Incident Completion" },
|
||||
]}
|
||||
title="Data-Driven Safety"
|
||||
description="Metrics that track our performance and demonstrate our commitment to transparency."
|
||||
@@ -265,45 +157,20 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Sarah Johnson",
|
||||
handle: "@sarahj",
|
||||
testimonial: "Fast and helpful.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-mechanic-standing-with-arms-crossed_1170-2381.jpg?_wi=2",
|
||||
},
|
||||
id: "t1", name: "Sarah Johnson", handle: "@sarahj", testimonial: "Fast and helpful.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-mechanic-standing-with-arms-crossed_1170-2381.jpg?_wi=2"},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Michael Chen",
|
||||
handle: "@mchen",
|
||||
testimonial: "Excellent service.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/nature-lover-working-greenhouse_23-2149037251.jpg",
|
||||
},
|
||||
id: "t2", name: "Michael Chen", handle: "@mchen", testimonial: "Excellent service.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/nature-lover-working-greenhouse_23-2149037251.jpg"},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Emily Rodriguez",
|
||||
handle: "@erod",
|
||||
testimonial: "Professional reporting.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-smiling_23-2148729653.jpg",
|
||||
},
|
||||
id: "t3", name: "Emily Rodriguez", handle: "@erod", testimonial: "Professional reporting.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-smiling_23-2148729653.jpg"},
|
||||
{
|
||||
id: "t4",
|
||||
name: "David Kim",
|
||||
handle: "@dkim",
|
||||
testimonial: "Very effective tool.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-library_23-2148680199.jpg",
|
||||
},
|
||||
id: "t4", name: "David Kim", handle: "@dkim", testimonial: "Very effective tool.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-library_23-2148680199.jpg"},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Alice Wong",
|
||||
handle: "@awong",
|
||||
testimonial: "Safety is improved.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-people-working-together_23-2149196105.jpg",
|
||||
},
|
||||
id: "t5", name: "Alice Wong", handle: "@awong", testimonial: "Safety is improved.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-people-working-together_23-2149196105.jpg"},
|
||||
]}
|
||||
showRating={true}
|
||||
title="Community Voices"
|
||||
@@ -316,21 +183,9 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Is my data anonymous?",
|
||||
content: "Yes, you can choose to remain anonymous when submitting reports.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "How do I track reports?",
|
||||
content: "Use your generated report ID on the tracking page.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Is it available 24/7?",
|
||||
content: "Yes, the system is fully operational around the clock.",
|
||||
},
|
||||
{ id: "q1", title: "Is my data anonymous?", content: "Yes, you can choose to remain anonymous when submitting reports." },
|
||||
{ id: "q2", title: "How do I track reports?", content: "Use your generated report ID on the tracking page." },
|
||||
{ id: "q3", title: "Is it available 24/7?", content: "Yes, the system is fully operational around the clock." },
|
||||
]}
|
||||
title="Common Inquiries"
|
||||
description="Answers to frequently asked questions about our system."
|
||||
@@ -341,16 +196,9 @@ export default function LandingPage() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
text="Report an incident safely and securely. Our team is ready to assist you."
|
||||
buttons={[
|
||||
{
|
||||
text: "Submit Report",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Submit Report", href: "#contact" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -358,33 +206,16 @@ export default function LandingPage() {
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Quick Links",
|
||||
items: [
|
||||
{
|
||||
label: "Home",
|
||||
href: "#hero",
|
||||
},
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Report",
|
||||
href: "#contact",
|
||||
},
|
||||
title: "Quick Links", items: [
|
||||
{ label: "Home", href: "#hero" },
|
||||
{ label: "About", href: "#about" },
|
||||
{ label: "Report", href: "#contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
|
||||
72
src/app/register/page.tsx
Normal file
72
src/app/register/page.tsx
Normal file
@@ -0,0 +1,72 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import { useState } from "react";
|
||||
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||||
|
||||
export default function RegisterPage() {
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [role, setRole] = useState("officer");
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
console.log("Registration attempted:", { email, password, role });
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="small"
|
||||
sizing="mediumLarge"
|
||||
background="none"
|
||||
cardStyle="gradient-bordered"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Login", id: "/login" },
|
||||
{ name: "Register", id: "/register" },
|
||||
]}
|
||||
brandName="Bosaso Police"
|
||||
/>
|
||||
<main className="min-h-screen flex items-center justify-center pt-20">
|
||||
<form onSubmit={handleSubmit} className="p-8 rounded-lg shadow-lg max-w-md w-full border border-gray-200">
|
||||
<h1 className="text-2xl font-bold mb-6">Create Account</h1>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
className="w-full p-3 mb-4 border rounded"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
className="w-full p-3 mb-4 border rounded"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<select
|
||||
className="w-full p-3 mb-6 border rounded"
|
||||
value={role}
|
||||
onChange={(e) => setRole(e.target.value)}
|
||||
>
|
||||
<option value="officer">Police Officer</option>
|
||||
<option value="admin">Administrator</option>
|
||||
</select>
|
||||
<button type="submit" className="w-full p-3 bg-blue-600 text-white rounded font-bold">
|
||||
Register
|
||||
</button>
|
||||
</form>
|
||||
</main>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
56
src/app/submit-report/page.tsx
Normal file
56
src/app/submit-report/page.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
|
||||
export default function SubmitReportPage() {
|
||||
const [status, setStatus] = useState<string>("");
|
||||
|
||||
const handleSubmit = async (email: string) => {
|
||||
// Simulation of backend save
|
||||
console.log("Saving report with email:", email);
|
||||
setStatus("Report submitted successfully!");
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="small"
|
||||
sizing="mediumLarge"
|
||||
background="none"
|
||||
cardStyle="gradient-bordered"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Report", id: "#form" }
|
||||
]}
|
||||
brandName="Bosaso Police"
|
||||
/>
|
||||
</div>
|
||||
<div id="form" data-section="form" className="pt-24">
|
||||
<ContactCenter
|
||||
tag="Report Incident"
|
||||
title="Incident Submission Form"
|
||||
description="Please provide accurate details regarding the incident. Our team will review your report shortly."
|
||||
background={{ variant: "gradient-bars" }}
|
||||
onSubmit={handleSubmit}
|
||||
buttonText="Save Report"
|
||||
/>
|
||||
{status && (
|
||||
<div className="text-center p-4 mt-4 bg-green-500/10 text-green-600 font-semibold rounded-full">
|
||||
{status}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user