102 lines
4.9 KiB
TypeScript
102 lines
4.9 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
|
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
|
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import { Box, CheckCircle, Clock, Lock, Smartphone } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="icon-arrow"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="pill"
|
|
contentWidth="mediumLarge"
|
|
sizing="medium"
|
|
background="none"
|
|
cardStyle="inset"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="bold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
navItems={[
|
|
{ name: "Dashboard", id: "dashboard" },
|
|
{ name: "Management", id: "management" },
|
|
{ name: "Finance", id: "finance" },
|
|
{ name: "Reports", id: "reports" },
|
|
]}
|
|
brandName="SmartLocker"
|
|
button={{ text: "Get Started", href: "#contact" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="kpi" data-section="kpi">
|
|
<MetricCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{ id: "m1", value: "14", title: "Devices", description: "Active locker banks", icon: Smartphone },
|
|
{ id: "m2", value: "124", title: "Total Boxes", description: "All available slots", icon: Box },
|
|
{ id: "m3", value: "48", title: "Vacant", description: "Ready for delivery", icon: CheckCircle },
|
|
{ id: "m4", value: "12", title: "Reserved", description: "Pending pickup", icon: Clock },
|
|
{ id: "m5", value: "64", title: "In Use", description: "Currently occupied", icon: Lock },
|
|
]}
|
|
title="Locker Bank Overview"
|
|
description="Real-time occupancy status across all managed locker units."
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{ title: "Bank A - Lobby North", description: "85% utilization across 24 units.", imageSrc: "http://img.b2bpic.net/free-vector/20-computer-hardware-line-icon-pack-like-presentation-hardware-computer-floppy-computer_1142-15526.jpg?_wi=1" },
|
|
{ title: "Bank B - Lobby South", description: "40% utilization across 24 units.", imageSrc: "http://img.b2bpic.net/free-vector/20-computer-hardware-line-icon-pack-like-presentation-hardware-computer-floppy-computer_1142-15526.jpg?_wi=2" },
|
|
{ title: "Control Unit", description: "System operational status: Online.", imageSrc: "http://img.b2bpic.net/free-vector/20-computer-hardware-line-icon-pack-like-presentation-hardware-computer-floppy-computer_1142-15526.jpg?_wi=3" },
|
|
{ title: "Bank D - Basement", description: "92% utilization across 20 units.", imageSrc: "http://img.b2bpic.net/free-vector/20-computer-hardware-line-icon-pack-like-presentation-hardware-computer-floppy-computer_1142-15526.jpg?_wi=4" },
|
|
]}
|
|
title="System Control & Status"
|
|
description="Interactive locker bank grid interface for building managers."
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
useInvertedBackground={false}
|
|
title="Reporting & Activity Feed"
|
|
description="Recent maintenance alerts and delivery logs."
|
|
inputs={[
|
|
{ name: "managerName", type: "text", placeholder: "Manager Name", required: true },
|
|
{ name: "issue", type: "text", placeholder: "Support Issue", required: true },
|
|
]}
|
|
textarea={{ name: "description", placeholder: "Detail report here...", rows: 4, required: true }}
|
|
imageSrc="http://img.b2bpic.net/free-photo/transportation-concept-with-vehicles_23-2148996438.jpg"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
columns={[
|
|
{ items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms", href: "#" }] },
|
|
{ items: [{ label: "Help Desk", href: "#" }, { label: "Status", href: "#" }] },
|
|
]}
|
|
logoText="TekLocker"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|