Merge version_2 into main #2
137
src/app/page.tsx
137
src/app/page.tsx
@@ -4,35 +4,36 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
|
||||
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
||||
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
||||
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
|
||||
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
|
||||
import TextAbout from '@/components/sections/about/TextAbout';
|
||||
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
||||
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
||||
import { BarChart3, Users, Package, CheckCircle } from 'lucide-react';
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="elastic-effect"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
borderRadius="soft"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Reporting", id: "metrics" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="StockFlow Pro"
|
||||
@@ -41,74 +42,65 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Master Your Inventory Anywhere"
|
||||
description="Powerful desktop stock management software designed for offline productivity, advanced reporting, and seamless user role management."
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/empty-home-office-with-tablet-laptop-shows-infographics-accounting-data_482257-91198.jpg", imageAlt: "stock management dashboard" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/empty-high-end-workspace-with-advanced-tech-tools-enhancing-productivity_482257-119752.jpg", imageAlt: "stock management dashboard" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/modern-work-environment-empty-office-business-industry-enterprise-culture_482257-118995.jpg", imageAlt: "stock management dashboard" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/empty-business-workspace-with-device-showing-data-analytics-infographics_482257-116612.jpg", imageAlt: "Empty business workspace with device showing data analytics and infographics" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/empty-urban-office-used-as-insurance-agency-headquarters-help-people_482257-100071.jpg", imageAlt: "Empty urban office used as insurance agency headquarters to help people" },
|
||||
<HeroSplitKpi
|
||||
background={{ variant: "animated-grid" }}
|
||||
title="Enterprise-Grade Stock Management"
|
||||
description="Professional desktop-first solution for total control over inventory, real-time reporting, and granular team permissions."
|
||||
kpis={[
|
||||
{ value: "99.9%", label: "Uptime Reliability" },
|
||||
{ value: "2.5k+", label: "Active Installations" },
|
||||
{ value: "150+", label: "Custom Report Templates" }
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
mediaAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/modern-desktop-interface-with-data-graphs-analytics_482257-119752.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardThree
|
||||
<FeatureCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
title="Built for Power Users"
|
||||
description="Engineered for maximum efficiency, our desktop software streamlines your operations and keeps your team in sync."
|
||||
features={[
|
||||
{ title: "Inventory Tracking", description: "Manage stock levels, categories, and movements with full offline capability.", imageSrc: "http://img.b2bpic.net/free-photo/unlocking-car-by-qr-code-smartphone_53876-95797.jpg" },
|
||||
{ title: "Robust Reporting", description: "Generate comprehensive sales, stock, and profit reports instantly.", imageSrc: "http://img.b2bpic.net/free-photo/business-people-meeting-discussion-corporate-concept_53876-121054.jpg" },
|
||||
{ title: "User Management", description: "Define custom user roles and permissions for team access control.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-tablet-with-blue-icons_1134-57.jpg" },
|
||||
{ title: "Full Inventory Control", description: "Advanced tracking with multi-warehouse support and low-stock alerts.", imageSrc: "http://img.b2bpic.net/free-photo/stock-management-digital-interface_1134-57.jpg" },
|
||||
{ title: "Deep Analytics", description: "Generate detailed inventory reports, sales projections, and trend analysis.", imageSrc: "http://img.b2bpic.net/free-photo/data-reporting-tools-desktop_482257-116612.jpg" },
|
||||
{ title: "Role-Based Access", description: "Secure user management with custom permission levels for staff.", imageSrc: "http://img.b2bpic.net/free-photo/team-access-security-management_53876-121054.jpg" },
|
||||
]}
|
||||
title="Core Features"
|
||||
description="Everything you need to manage your inventory and team efficiently."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{ type: "text", content: "Designed for Reliability" },
|
||||
{ type: "image", src: "http://img.b2bpic.net/free-photo/unrecognizable-man-working-with-tablet_23-2147717389.jpg", alt: "stock management dashboard" },
|
||||
]}
|
||||
<TextAbout
|
||||
title="Industry-Leading Desktop Tech"
|
||||
tag="Our Approach"
|
||||
useInvertedBackground={true}
|
||||
buttons={[{ text: "Learn More" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardFourteen
|
||||
useInvertedBackground={true}
|
||||
title="Performance at a Glance"
|
||||
tag="Trusted by Pros"
|
||||
<MetricCardThree
|
||||
title="Streamlined Operations"
|
||||
description="Optimize your workflow with our core toolset."
|
||||
animationType="depth-3d"
|
||||
metrics={[
|
||||
{ id: "m1", value: "100%", description: "Offline Ready" },
|
||||
{ id: "m2", value: "5k+", description: "Stock Items Managed" },
|
||||
{ id: "m3", value: "24/7", description: "Always Available" },
|
||||
{ id: "p1", icon: Package, title: "Asset Management", value: "Comprehensive" },
|
||||
{ id: "p2", icon: BarChart3, title: "Advanced Reporting", value: "Automated" },
|
||||
{ id: "p3", icon: Users, title: "User Management", value: "Secure" },
|
||||
]}
|
||||
metricsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
<TestimonialCardFive
|
||||
title="Loved by Professionals"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "t1", title: "Excellent tool", quote: "The best offline stock management system I have used.", name: "John Doe", role: "CEO", imageSrc: "http://img.b2bpic.net/free-photo/senior-businessman-with-arms-crossed-outside-modern-office-building_1139-1074.jpg" },
|
||||
{ id: "t2", title: "Great reporting", quote: "Reporting features are incredibly fast and accurate.", name: "Jane Smith", role: "Manager", imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg" },
|
||||
{ id: "t3", title: "Easy user roles", quote: "User management helped us define precise access control.", name: "Mark Wilson", role: "IT Admin", imageSrc: "http://img.b2bpic.net/free-photo/man-black-working-laptop-cafe_23-2147962625.jpg" },
|
||||
{ id: "t4", title: "Very reliable", quote: "Works flawlessly without needing any internet connection.", name: "Sarah Miller", role: "Retail Lead", imageSrc: "http://img.b2bpic.net/free-photo/smiling-mechanic-standing-repair-shop_1170-1348.jpg" },
|
||||
{ id: "t5", title: "Highly recommended", quote: "The performance is top-notch for our warehouse.", name: "David Brown", role: "Operations", imageSrc: "http://img.b2bpic.net/free-photo/happy-employee_1098-16109.jpg" },
|
||||
{ id: "t1", name: "Alex Rivera", date: "Oct 2023", title: "Reliable software", quote: "Essential for our warehouse management.", tag: "Verified User", avatarSrc: "http://img.b2bpic.net/free-photo/happy-employee_1098-16109.jpg" },
|
||||
{ id: "t2", name: "Sarah Wong", date: "Nov 2023", title: "Great insights", quote: "The report generation is a game changer.", tag: "Business Lead", avatarSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg" },
|
||||
]}
|
||||
title="Trusted by Businesses"
|
||||
description="See why inventory managers choose our desktop solution."
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -117,51 +109,32 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "f1", title: "Is internet needed?", content: "No, it is a fully desktop-based offline application." },
|
||||
{ id: "f2", title: "Are reports exportable?", content: "Yes, you can export all reports in multiple formats." },
|
||||
{ id: "f3", title: "Can I add more users?", content: "Absolutely, our user management system supports unlimited users." },
|
||||
{ id: "f1", title: "Does this work offline?", content: "Yes, the core system is fully functional offline with local data storage." },
|
||||
{ id: "f2", title: "How secure is my data?", content: "We implement industry-standard encryption for local data storage and management." },
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Find answers to the most common queries about our system."
|
||||
faqsAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/empty-business-office-with-cubicles-used-organizational-activity-efficiency_482257-125625.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
title="Your Questions, Answered"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
tag="Get Started"
|
||||
title="Request a Demo"
|
||||
description="Start managing your stock more effectively today."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/flat-lay-office-desk-with-copy-space_23-2148219239.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
title="Ready to Upgrade?"
|
||||
description="Request a personalized demo for your team today."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/empty-home-office-with-laptop-shows-infographics_482257-91198.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About", href: "#about" },
|
||||
{ label: "Contact", href: "#contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Features", items: [
|
||||
{ label: "Inventory", href: "#features" },
|
||||
{ label: "Reports", href: "#features" },
|
||||
],
|
||||
},
|
||||
{ title: "Software", items: [{ label: "Features" }, { label: "Reporting" }] },
|
||||
{ title: "Support", items: [{ label: "Contact" }, { label: "Help Center" }] },
|
||||
]}
|
||||
bottomLeftText="© 2024 StockFlow Pro. All rights reserved."
|
||||
bottomRightText="Built for desktop."
|
||||
bottomLeftText="© 2024 StockFlow Pro"
|
||||
bottomRightText="Built for Enterprise"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #f7f6f7;
|
||||
--background: #f5f5f5;
|
||||
--card: #ffffff;
|
||||
--foreground: #25190c;
|
||||
--primary-cta: #ff6207;
|
||||
--foreground: #1c1c1c;
|
||||
--primary-cta: #1c1c1c;
|
||||
--primary-cta-text: #f7f6f7;
|
||||
--secondary-cta: #ffffff;
|
||||
--secondary-cta-text: #25190c;
|
||||
--accent: #ffce93;
|
||||
--background-accent: #e8cfa8;
|
||||
--accent: #15479c;
|
||||
--background-accent: #a8cce8;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user