604 lines
23 KiB
TypeScript
604 lines
23 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import Link from "next/link";
|
|
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
|
import HeroBillboardRotatedCarousel from "@/components/sections/hero/HeroBillboardRotatedCarousel";
|
|
import TextAbout from "@/components/sections/about/TextAbout";
|
|
import FeatureCardSeven from "@/components/sections/feature/FeatureCardSeven";
|
|
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
|
|
import ProductCardThree from "@/components/sections/product/ProductCardThree";
|
|
import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
|
|
import FaqDouble from "@/components/sections/faq/FaqDouble";
|
|
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
|
import FooterBase from "@/components/sections/footer/FooterBase";
|
|
import { Shield, Sparkles, Zap, Award, Compass, Heart, HelpCircle, Radio, Users, MapPin } from "lucide-react";
|
|
|
|
export default function HomePage() {
|
|
const navItems = [
|
|
{ name: "Dashboard", id: "dashboard" },
|
|
{ name: "Camps", id: "camps" },
|
|
{ name: "Survivors", id: "survivors" },
|
|
{ name: "Expeditions", id: "expeditions" },
|
|
{ name: "Resources", id: "resources" },
|
|
{ name: "Admissions", id: "admissions" },
|
|
{ name: "Transfers", id: "transfers" },
|
|
{ name: "Audit Log", id: "audit" },
|
|
];
|
|
|
|
const navItemsWithHref = navItems.map((item) => {
|
|
if (item.id === "dashboard") {
|
|
return { ...item, href: "/" };
|
|
} else if (item.id === "camps") {
|
|
return { ...item, href: "/camps" };
|
|
} else if (item.id === "survivors") {
|
|
return { ...item, href: "/survivors" };
|
|
} else if (item.id === "expeditions") {
|
|
return { ...item, href: "/expeditions" };
|
|
} else if (item.id === "resources") {
|
|
return { ...item, href: "/resources" };
|
|
} else if (item.id === "admissions") {
|
|
return { ...item, href: "/admissions" };
|
|
} else if (item.id === "transfers") {
|
|
return { ...item, href: "/transfers" };
|
|
} else if (item.id === "audit") {
|
|
return { ...item, href: "/audit" };
|
|
}
|
|
return item;
|
|
});
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-magnetic"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="small"
|
|
sizing="largeSmallSizeLargeTitles"
|
|
background="none"
|
|
cardStyle="gradient-radial"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={navItems}
|
|
brandName="SURVIVORS"
|
|
bottomLeftText="Apocalypse Management System"
|
|
bottomRightText="admin@campaurora.zk"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero-home" data-section="hero-home">
|
|
<HeroBillboardRotatedCarousel
|
|
title="SURVIVOR CAMP COMMAND CENTER"
|
|
description="Advanced management system for post-apocalyptic survivor settlements. Real-time resource tracking, expedition coordination, and AI-assisted admission analysis powered by neural networks."
|
|
tag="APOCALYPSE SURVIVAL PROTOCOL"
|
|
tagIcon={Shield}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{
|
|
text: "Access Dashboard",
|
|
href: "/camps",
|
|
},
|
|
{
|
|
text: "View Status Report",
|
|
href: "/resources",
|
|
},
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
background={{
|
|
variant: "radial-gradient",
|
|
}}
|
|
carouselItems={[
|
|
{
|
|
id: "carousel-1",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/cinematic-style-view-haunted-house-with-spooky-aesthetic_23-2151663788.jpg?_wi=1",
|
|
imageAlt: "post apocalyptic survivor camp fortified settlement",
|
|
},
|
|
{
|
|
id: "carousel-2",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/witch-with-bucket-walking-forest_23-2147686890.jpg?_wi=1",
|
|
imageAlt: "post apocalyptic expedition team exploration ruins",
|
|
},
|
|
{
|
|
id: "carousel-3",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/goals-oriented-businesswomen-dive-deep-into-financial-reports-leveraging-graphs-indicators_482257-136221.jpg?_wi=1",
|
|
imageAlt: "inventory storage crates supplies organization dark",
|
|
},
|
|
{
|
|
id: "carousel-4",
|
|
imageSrc: "http://img.b2bpic.net/free-vector/security-handprint-background_1406-15.jpg?_wi=1",
|
|
imageAlt: "neon blue digital counter gauge futuristic",
|
|
},
|
|
{
|
|
id: "carousel-5",
|
|
imageSrc: "http://img.b2bpic.net/free-vector/dashboard-infographic-with-map_23-2148270131.jpg?_wi=1",
|
|
imageAlt: "orange survival alert indicator gauge meter",
|
|
},
|
|
{
|
|
id: "carousel-6",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/cinematic-style-view-haunted-house-with-spooky-aesthetic_23-2151663788.jpg?_wi=2",
|
|
imageAlt: "post apocalyptic survivor camp fortified settlement",
|
|
},
|
|
]}
|
|
autoPlay={true}
|
|
autoPlayInterval={5000}
|
|
className="min-h-screen"
|
|
containerClassName="gap-8"
|
|
titleClassName="text-5xl md:text-7xl font-bold tracking-tighter"
|
|
descriptionClassName="text-lg md:text-xl text-opacity-90"
|
|
tagClassName="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-opacity-10 border border-opacity-20"
|
|
buttonContainerClassName="flex gap-4 flex-wrap"
|
|
buttonClassName="px-8 py-3 rounded-lg font-semibold transition-all duration-300"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about-system" data-section="about-system">
|
|
<TextAbout
|
|
tag="SYSTEM OVERVIEW"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
title="Integrated Survival Management Platform"
|
|
buttons={[
|
|
{
|
|
text: "View Documentation",
|
|
href: "/admissions",
|
|
},
|
|
{
|
|
text: "Request Access",
|
|
href: "#contact",
|
|
},
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
className="py-20"
|
|
containerClassName="max-w-4xl mx-auto"
|
|
titleClassName="text-4xl md:text-5xl font-bold mb-8"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features-management" data-section="features-management">
|
|
<FeatureCardSeven
|
|
title="Core Management Systems"
|
|
description="Comprehensive tools for managing every aspect of survivor camp operations including population, resources, expeditions, and strategic transfers between settlements."
|
|
tag="OPERATIONAL MODULES"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{
|
|
text: "Explore All Features",
|
|
href: "/camps",
|
|
},
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
animationType="blur-reveal"
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Camp Dashboard",
|
|
description:
|
|
"Real-time overview of active camps with population metrics, resource status, and critical alerts. Monitor survivor welfare, health status, and expedition teams at a glance.",
|
|
imageSrc: "http://img.b2bpic.net/free-vector/security-handprint-background_1406-15.jpg?_wi=2",
|
|
imageAlt: "Camp Dashboard Interface",
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Survivor Management",
|
|
description:
|
|
"Comprehensive database of all survivors with profession tracking, status histories, and skill assignments. Track medical conditions, work assignments, and expedition participation.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/fantastic-aliens-with-glowing-neon-colours_23-2151648371.jpg?_wi=1",
|
|
imageAlt: "Survivor Profile",
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Resource Inventory",
|
|
description:
|
|
"Detailed inventory system tracking food, water, ammunition, and medicine. Receive alerts when supplies reach critical levels with visual indicators for resource status.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/goals-oriented-businesswomen-dive-deep-into-financial-reports-leveraging-graphs-indicators_482257-136221.jpg?_wi=2",
|
|
imageAlt: "Resource Inventory",
|
|
},
|
|
{
|
|
id: 4,
|
|
title: "Expedition Planner",
|
|
description:
|
|
"Plan and track dangerous expeditions beyond camp perimeters. Manage team composition, resource allocation, and mission status with real-time monitoring.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/witch-with-bucket-walking-forest_23-2147686890.jpg?_wi=2",
|
|
imageAlt: "Expedition Mission",
|
|
},
|
|
{
|
|
id: 5,
|
|
title: "AI Admission Analysis",
|
|
description:
|
|
"Neural network-assisted evaluation of admission requests. Analyze survivor risk profiles, background verification, and generate explainable AI recommendations.",
|
|
imageSrc: "http://img.b2bpic.net/free-vector/dashboard-infographic-with-map_23-2148270131.jpg?_wi=2",
|
|
imageAlt: "AI Analysis Display",
|
|
},
|
|
{
|
|
id: 6,
|
|
title: "Inter-Camp Transfers",
|
|
description:
|
|
"Coordinate resource sharing and personnel transfers between allied survivor settlements. Track transfer requests, approvals, and execution status.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/cinematic-style-view-haunted-house-with-spooky-aesthetic_23-2151663788.jpg?_wi=3",
|
|
imageAlt: "Camp Transfer",
|
|
},
|
|
]}
|
|
className="py-20"
|
|
containerClassName="max-w-6xl mx-auto"
|
|
cardClassName="rounded-lg overflow-hidden border border-opacity-20"
|
|
cardTitleClassName="text-4xl md:text-5xl font-bold mb-4"
|
|
cardDescriptionClassName="text-lg text-opacity-80 mb-8"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics-system" data-section="metrics-system">
|
|
<MetricCardThree
|
|
title="System Capabilities"
|
|
description="Proven survival management metrics demonstrating system performance and reliability across multiple settlements."
|
|
tag="PERFORMANCE METRICS"
|
|
tagIcon={Award}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{
|
|
text: "View Full Report",
|
|
href: "/resources",
|
|
},
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="blur-reveal"
|
|
metrics={[
|
|
{
|
|
id: "metric-1",
|
|
icon: Users,
|
|
title: "Active Survivors",
|
|
value: "1,240+",
|
|
},
|
|
{
|
|
id: "metric-2",
|
|
icon: MapPin,
|
|
title: "Camps Managed",
|
|
value: "8",
|
|
},
|
|
{
|
|
id: "metric-3",
|
|
icon: Zap,
|
|
title: "Successful Admissions",
|
|
value: "94%",
|
|
},
|
|
{
|
|
id: "metric-4",
|
|
icon: Shield,
|
|
title: "Mission Success Rate",
|
|
value: "87%",
|
|
},
|
|
]}
|
|
className="py-20"
|
|
containerClassName="max-w-6xl mx-auto"
|
|
cardClassName="p-6 rounded-lg border border-opacity-20"
|
|
/>
|
|
</div>
|
|
|
|
<div id="expeditions-section" data-section="expeditions-section">
|
|
<ProductCardThree
|
|
title="Active Expeditions"
|
|
description="Current and planned expeditions tracking dangerous missions beyond settlement boundaries. Monitor team safety and resource recovery operations."
|
|
tag="MISSION TRACKER"
|
|
tagIcon={Compass}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{
|
|
text: "View All Expeditions",
|
|
href: "/expeditions",
|
|
},
|
|
{
|
|
text: "Plan New Mission",
|
|
href: "/expeditions",
|
|
},
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
products={[
|
|
{
|
|
id: "exp-1",
|
|
name: "Aurora North Scavenge",
|
|
price: "Status: In Progress",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/witch-with-bucket-walking-forest_23-2147686890.jpg?_wi=3",
|
|
imageAlt: "North Scavenge Expedition",
|
|
},
|
|
{
|
|
id: "exp-2",
|
|
name: "Harbor Supply Run",
|
|
price: "Status: Planned",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/goals-oriented-businesswomen-dive-deep-into-financial-reports-leveraging-graphs-indicators_482257-136221.jpg?_wi=3",
|
|
imageAlt: "Harbor Supply Mission",
|
|
},
|
|
{
|
|
id: "exp-3",
|
|
name: "Research Facility Raid",
|
|
price: "Status: Completed",
|
|
imageSrc: "http://img.b2bpic.net/free-vector/security-handprint-background_1406-15.jpg?_wi=3",
|
|
imageAlt: "Research Facility Mission",
|
|
},
|
|
]}
|
|
className="py-20"
|
|
containerClassName="max-w-6xl mx-auto"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials-survivors" data-section="testimonials-survivors">
|
|
<TestimonialCardOne
|
|
title="Survivor Stories"
|
|
description="Voices from the frontlines of survival. Real testimonies from camp leaders and expedition teams who trust this system."
|
|
tag="COMMUNITY VOICES"
|
|
tagIcon={Heart}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{
|
|
text: "Submit Your Story",
|
|
href: "#contact",
|
|
},
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="blur-reveal"
|
|
testimonials={[
|
|
{
|
|
id: "test-1",
|
|
name: "Marcus Chen",
|
|
role: "Camp Commander",
|
|
company: "Aurora Settlement",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/fantastic-aliens-with-glowing-neon-colours_23-2151648371.jpg?_wi=2",
|
|
imageAlt: "Marcus Chen",
|
|
},
|
|
{
|
|
id: "test-2",
|
|
name: "Sarah Okonkwo",
|
|
role: "Expedition Lead",
|
|
company: "Haven Base",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/male-soldier-camouflage-dark-wall_140725-96049.jpg?_wi=1",
|
|
imageAlt: "Sarah Okonkwo",
|
|
},
|
|
{
|
|
id: "test-3",
|
|
name: "James Rodriguez",
|
|
role: "Resource Manager",
|
|
company: "Sanctuary Outpost",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/blond-pilot-angry-expression_1194-1879.jpg?_wi=1",
|
|
imageAlt: "James Rodriguez",
|
|
},
|
|
{
|
|
id: "test-4",
|
|
name: "Elena Volkova",
|
|
role: "Medical Coordinator",
|
|
company: "Refuge Camp",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-soldier-uniform-aiming-gun-black-wall_140725-153626.jpg?_wi=1",
|
|
imageAlt: "Elena Volkova",
|
|
},
|
|
{
|
|
id: "test-5",
|
|
name: "David Nakamura",
|
|
role: "Operations Chief",
|
|
company: "Fortress Station",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-looking-sad-rain-generated-by-ai_188544-25645.jpg?_wi=1",
|
|
imageAlt: "David Nakamura",
|
|
},
|
|
{
|
|
id: "test-6",
|
|
name: "Amara Adeyemi",
|
|
role: "Security Director",
|
|
company: "Stronghold Base",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/confident-emotional-hockey-player-with-hockey-stick-is-posing-photographer_613910-13824.jpg?_wi=1",
|
|
imageAlt: "Amara Adeyemi",
|
|
},
|
|
]}
|
|
className="py-20"
|
|
containerClassName="max-w-6xl mx-auto"
|
|
cardClassName="p-6 rounded-lg border border-opacity-20"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq-system" data-section="faq-system">
|
|
<FaqDouble
|
|
title="System Information"
|
|
description="Common questions about the survivor camp management platform and how to use its features effectively."
|
|
tag="SUPPORT CENTER"
|
|
tagIcon={HelpCircle}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{
|
|
text: "Contact Support",
|
|
href: "#contact",
|
|
},
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqsAnimation="blur-reveal"
|
|
animationType="smooth"
|
|
faqs={[
|
|
{
|
|
id: "faq-1",
|
|
title: "How does the AI admission analysis work?",
|
|
content:
|
|
"The system uses advanced neural networks to analyze admission requests by evaluating survivor profiles, background evidence, and risk assessments. The AI provides explainable recommendations that can be approved or overridden by administrators with full audit trails.",
|
|
},
|
|
{
|
|
id: "faq-2",
|
|
title: "What resources can be tracked?",
|
|
content:
|
|
"The inventory system tracks all critical survival resources: food supplies, drinking water, ammunition, medical supplies, and other essential items. Real-time alerts notify administrators when stock levels fall below minimum thresholds.",
|
|
},
|
|
{
|
|
id: "faq-3",
|
|
title: "How are expeditions managed?",
|
|
content:
|
|
"Expeditions are planned with team composition, equipment allocation, and mission objectives. The system tracks real-time status, equipment usage, and recovered resources. Missions can be marked as planned, in-progress, or completed.",
|
|
},
|
|
{
|
|
id: "faq-4",
|
|
title: "Can camps transfer resources?",
|
|
content:
|
|
"Yes, the inter-camp transfer system allows multiple settlements to coordinate resource sharing and personnel transfers. All requests require approval and are fully logged in the audit system for accountability.",
|
|
},
|
|
{
|
|
id: "faq-5",
|
|
title: "What survivor statuses are available?",
|
|
content:
|
|
"Survivors can be marked as healthy, ill, injured, or on expedition. The system tracks status changes over time and generates health reports. Medical assignments are managed separately from work assignments.",
|
|
},
|
|
{
|
|
id: "faq-6",
|
|
title: "How is data security handled?",
|
|
content:
|
|
"The system implements role-based access control with comprehensive audit logging. All administrative actions are recorded with timestamps and user identification for complete accountability and security compliance.",
|
|
},
|
|
]}
|
|
className="py-20"
|
|
containerClassName="max-w-4xl mx-auto"
|
|
faqsContainerClassName="space-y-4"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact-system" data-section="contact-system">
|
|
<ContactCTA
|
|
tag="GET IN TOUCH"
|
|
tagIcon={Radio}
|
|
tagAnimation="slide-up"
|
|
title="Request System Access"
|
|
description="Contact the survival management team to integrate this system into your settlement. Our team provides installation, training, and ongoing support for all survivor camps."
|
|
buttons={[
|
|
{
|
|
text: "Send Request",
|
|
href: "mailto:admin@survivors-command.zk",
|
|
},
|
|
{
|
|
text: "Schedule Demo",
|
|
href: "#contact",
|
|
},
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
background={{
|
|
variant: "rotated-rays-animated",
|
|
}}
|
|
useInvertedBackground={false}
|
|
className="py-20"
|
|
containerClassName="max-w-3xl mx-auto"
|
|
titleClassName="text-4xl md:text-5xl font-bold mb-6"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer-home" data-section="footer-home">
|
|
<FooterBase
|
|
logoText="SURVIVORS COMMAND"
|
|
copyrightText="© 2025 Apocalypse Survival Systems | All Rights Reserved"
|
|
columns={[
|
|
{
|
|
title: "Platform",
|
|
items: [
|
|
{
|
|
label: "Dashboard",
|
|
href: "/",
|
|
},
|
|
{
|
|
label: "All Camps",
|
|
href: "/camps",
|
|
},
|
|
{
|
|
label: "Documentation",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "API Reference",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Management",
|
|
items: [
|
|
{
|
|
label: "Survivors",
|
|
href: "/survivors",
|
|
},
|
|
{
|
|
label: "Expeditions",
|
|
href: "/expeditions",
|
|
},
|
|
{
|
|
label: "Resources",
|
|
href: "/resources",
|
|
},
|
|
{
|
|
label: "Transfers",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "System",
|
|
items: [
|
|
{
|
|
label: "Admissions",
|
|
href: "/admissions",
|
|
},
|
|
{
|
|
label: "Audit Log",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "System Status",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Support",
|
|
href: "#contact",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Legal",
|
|
items: [
|
|
{
|
|
label: "Privacy Policy",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Terms of Service",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Security",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Compliance",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
className="border-t border-opacity-20"
|
|
containerClassName="max-w-6xl mx-auto"
|
|
columnsClassName="grid grid-cols-2 md:grid-cols-4 gap-8"
|
|
columnClassName="space-y-4"
|
|
columnTitleClassName="font-semibold text-lg"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |