Update src/app/page.tsx
This commit is contained in:
260
src/app/page.tsx
260
src/app/page.tsx
@@ -5,8 +5,6 @@ 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 LegalSection from '@/components/legal/LegalSection';
|
||||
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
|
||||
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import { Box, CheckCircle, Clock, Lock, Smartphone } from "lucide-react";
|
||||
@@ -26,201 +24,77 @@ export default function LandingPage() {
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
<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="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="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" },
|
||||
{ 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" },
|
||||
{ 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" },
|
||||
{ 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" },
|
||||
]}
|
||||
title="System Control & Status"
|
||||
description="Interactive locker bank grid interface for building managers."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metric" data-section="metric">
|
||||
<MetricCardFourteen
|
||||
useInvertedBackground={false}
|
||||
title="Efficiency Metrics"
|
||||
tag="Performance"
|
||||
metrics={[
|
||||
{
|
||||
id: "e1",
|
||||
value: "98.2%",
|
||||
description: "System Uptime",
|
||||
},
|
||||
{
|
||||
id: "e2",
|
||||
value: "12m",
|
||||
description: "Avg Pickup Time",
|
||||
},
|
||||
{
|
||||
id: "e3",
|
||||
value: "4.8",
|
||||
description: "User Satisfaction",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</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="legal" data-section="legal">
|
||||
<LegalSection />
|
||||
</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>
|
||||
<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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user