302 lines
9.6 KiB
TypeScript
302 lines
9.6 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
|
import FeatureBento from '@/components/sections/feature/FeatureBento';
|
|
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
|
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
|
|
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import { Bell, Package, ShieldCheck, Tag, TrendingUp } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="mediumLarge"
|
|
sizing="mediumLargeSizeLargeTitles"
|
|
background="blurBottom"
|
|
cardStyle="inset"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="medium"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
navItems={[
|
|
{
|
|
name: "Dashboard",
|
|
id: "hero",
|
|
},
|
|
{
|
|
name: "Forecast",
|
|
id: "forecast",
|
|
},
|
|
{
|
|
name: "Decisions",
|
|
id: "decisions",
|
|
},
|
|
{
|
|
name: "Upload",
|
|
id: "upload",
|
|
},
|
|
]}
|
|
brandName="CAMS / Ink Clothings"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDualMedia
|
|
background={{
|
|
variant: "gradient-bars",
|
|
}}
|
|
title="CAMS: Data-Driven Demand Prediction"
|
|
description="Empowering Ink Clothings managers to make calm, evidence-based inventory decisions. Minimize risk, maximize efficiency with seasonal pattern detection."
|
|
tag="Yellow Ink Division"
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/businessman-holding-virtual-download-icon-progress-increasing-value-added-business-product-service-concept_616485-36.jpg?_wi=1",
|
|
imageAlt: "CAMS Dashboard Overview",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/graph-data-show-summary-analysis-icon-graphic_53876-64935.jpg?_wi=1",
|
|
imageAlt: "Seasonal Trend Forecasting",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-accounting-sales-statistics-computer-display_482257-122982.jpg?_wi=1",
|
|
imageAlt: "Decision Support Module",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/businessman-holding-virtual-download-icon-progress-increasing-value-added-business-product-service-concept_616485-36.jpg?_wi=2",
|
|
imageAlt: "Inventory Analytics UI",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/graph-data-show-summary-analysis-icon-graphic_53876-64935.jpg?_wi=2",
|
|
imageAlt: "Growth Projection Graph",
|
|
},
|
|
]}
|
|
mediaAnimation="slide-up"
|
|
rating={5}
|
|
ratingText="Trusted by 50+ logistics managers"
|
|
tagIcon={TrendingUp}
|
|
/>
|
|
</div>
|
|
|
|
<div id="forecast" data-section="forecast">
|
|
<MetricCardSeven
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "m1",
|
|
value: "24%",
|
|
title: "Growth Forecast",
|
|
items: [
|
|
"Expected Sep-Dec spike",
|
|
"Seasonal shift detected",
|
|
],
|
|
},
|
|
{
|
|
id: "m2",
|
|
value: "High",
|
|
title: "Demand Level",
|
|
items: [
|
|
"Q4 inventory alert",
|
|
"Strong market shift",
|
|
],
|
|
},
|
|
{
|
|
id: "m3",
|
|
value: "1.2k",
|
|
title: "Units Predicted",
|
|
items: [
|
|
"September baseline",
|
|
"October peak loading",
|
|
],
|
|
},
|
|
{
|
|
id: "m4",
|
|
value: "98%",
|
|
title: "Accuracy Rate",
|
|
items: [
|
|
"Historical model match",
|
|
"Data fidelity high",
|
|
],
|
|
},
|
|
{
|
|
id: "m5",
|
|
value: "15m",
|
|
title: "Processing Time",
|
|
items: [
|
|
"Batch upload latency",
|
|
"Real-time sync ready",
|
|
],
|
|
},
|
|
]}
|
|
title="Seasonal Demand Forecast"
|
|
description="Predicting Q4 market activity with historical precision."
|
|
/>
|
|
</div>
|
|
|
|
<div id="decisions" data-section="decisions">
|
|
<FeatureBento
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{
|
|
title: "Restock Strategy",
|
|
description: "Increase supply for high-growth items identified in trend analysis.",
|
|
bentoComponent: "reveal-icon",
|
|
icon: TrendingUp,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/businessman-holding-virtual-download-icon-progress-increasing-value-added-business-product-service-concept_616485-36.jpg?_wi=3",
|
|
imageAlt: "modern dark dashboard interface",
|
|
},
|
|
{
|
|
title: "Promo Launch",
|
|
description: "Trigger automated marketing campaigns based on seasonal shift.",
|
|
bentoComponent: "reveal-icon",
|
|
icon: Tag,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/graph-data-show-summary-analysis-icon-graphic_53876-64935.jpg?_wi=3",
|
|
imageAlt: "sales forecast chart line graph",
|
|
},
|
|
{
|
|
title: "Inventory Hold",
|
|
description: "Pause non-essential stock to optimize cash flow and storage.",
|
|
bentoComponent: "reveal-icon",
|
|
icon: Package,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-accounting-sales-statistics-computer-display_482257-122982.jpg?_wi=2",
|
|
imageAlt: "business decision dashboard UI",
|
|
},
|
|
{
|
|
title: "Supplier Alerts",
|
|
description: "Automated notifications for critical lead-time adjustments.",
|
|
bentoComponent: "reveal-icon",
|
|
icon: Bell,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/businessman-holding-virtual-download-icon-progress-increasing-value-added-business-product-service-concept_616485-36.jpg?_wi=4",
|
|
imageAlt: "modern dark dashboard interface",
|
|
},
|
|
{
|
|
title: "Data Audit",
|
|
description: "Verify integrity of ingested CSV files for reliable modeling.",
|
|
bentoComponent: "reveal-icon",
|
|
icon: ShieldCheck,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/graph-data-show-summary-analysis-icon-graphic_53876-64935.jpg?_wi=4",
|
|
imageAlt: "sales forecast chart line graph",
|
|
},
|
|
]}
|
|
title="Decision Support Actions"
|
|
description="Actionable recommendations for controlled response."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqDouble
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
faqs={[
|
|
{
|
|
id: "f1",
|
|
title: "How does forecasting work?",
|
|
content: "CAMS uses basic time-series analysis to detect historical seasonal patterns.",
|
|
},
|
|
{
|
|
id: "f2",
|
|
title: "Why is Q4 so heavily weighted?",
|
|
content: "Our system detects recurring September to December consumer activity spikes.",
|
|
},
|
|
{
|
|
id: "f3",
|
|
title: "Can I rush decisions?",
|
|
content: "CAMS is designed for calm, data-driven planning rather than reactive changes.",
|
|
},
|
|
{
|
|
id: "f4",
|
|
title: "Which file formats are supported?",
|
|
content: "The system currently accepts .csv files formatted for standard ERP exports.",
|
|
},
|
|
{
|
|
id: "f5",
|
|
title: "How do I clear the cache?",
|
|
content: "Use the Settings dashboard to refresh your local data cache.",
|
|
},
|
|
]}
|
|
title="System Support"
|
|
description="Clear answers for system operators."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="upload" data-section="upload">
|
|
<ContactCenter
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "plain",
|
|
}}
|
|
tag="Data Ingestion"
|
|
title="Upload Sales Data"
|
|
description="Upload your monthly CSV sales files to begin processing insights."
|
|
inputPlaceholder="Upload sales-data-2024.csv"
|
|
buttonText="Process Data"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "plain",
|
|
}}
|
|
tag="System Admin"
|
|
title="Get Operational Support"
|
|
description="Contact the engineering team if you encounter data ingestion errors."
|
|
inputPlaceholder="Enter your inquiry"
|
|
buttonText="Submit Ticket"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterSimple
|
|
columns={[
|
|
{
|
|
title: "Internal",
|
|
items: [
|
|
{
|
|
label: "Dashboard",
|
|
href: "#hero",
|
|
},
|
|
{
|
|
label: "Upload",
|
|
href: "#upload",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "System",
|
|
items: [
|
|
{
|
|
label: "Support",
|
|
href: "#contact",
|
|
},
|
|
{
|
|
label: "FAQs",
|
|
href: "#faq",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
bottomLeftText="© 2024 Ink Clothings - Yellow Ink"
|
|
bottomRightText="Internal System V1"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|