311 lines
12 KiB
TypeScript
311 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
|
import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
|
|
import MetricCardTen from "@/components/sections/metrics/MetricCardTen";
|
|
import FaqBase from "@/components/sections/faq/FaqBase";
|
|
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
|
import { Sparkles, TrendingUp, HelpCircle } from "lucide-react";
|
|
|
|
export default function FeaturesPage() {
|
|
const navItems = [
|
|
{ name: "Home", id: "home" },
|
|
{ name: "Features", id: "features" },
|
|
{ name: "Pricing", id: "pricing" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Contact", id: "contact" },
|
|
];
|
|
|
|
const footerColumns = [
|
|
{
|
|
title: "Product",
|
|
items: [
|
|
{ label: "Features", href: "/features" },
|
|
{ label: "Pricing", href: "/pricing" },
|
|
{ label: "Security", href: "#security" },
|
|
{ label: "Integrations", href: "#integrations" },
|
|
],
|
|
},
|
|
{
|
|
title: "Company",
|
|
items: [
|
|
{ label: "About", href: "/about" },
|
|
{ label: "Blog", href: "#blog" },
|
|
{ label: "Careers", href: "#careers" },
|
|
{ label: "Contact", href: "/contact" },
|
|
],
|
|
},
|
|
{
|
|
title: "Resources",
|
|
items: [
|
|
{ label: "Documentation", href: "#docs" },
|
|
{ label: "API Reference", href: "#api" },
|
|
{ label: "Support", href: "#support" },
|
|
{ label: "Status", href: "#status" },
|
|
],
|
|
},
|
|
{
|
|
title: "Legal",
|
|
items: [
|
|
{ label: "Privacy", href: "#privacy" },
|
|
{ label: "Terms", href: "#terms" },
|
|
{ label: "Security", href: "#security" },
|
|
],
|
|
},
|
|
];
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-stagger"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="soft"
|
|
contentWidth="mediumLarge"
|
|
sizing="mediumLarge"
|
|
background="aurora"
|
|
cardStyle="glass-depth"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="semibold"
|
|
>
|
|
{/* Navbar */}
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
brandName="StockHub"
|
|
navItems={navItems}
|
|
button={{ text: "Get Started", href: "#get-started" }}
|
|
/>
|
|
</div>
|
|
|
|
{/* Features Deep Dive Section */}
|
|
<div id="features-detail" data-section="features-detail">
|
|
<FeatureCardTwentySeven
|
|
title="Complete Feature Set for Warehouse Excellence"
|
|
description="Explore our comprehensive suite of inventory management tools designed specifically for modern operations teams who demand speed, accuracy, and reliability."
|
|
tag="Detailed Features"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
features={[
|
|
{
|
|
id: "real-time-tracking",
|
|
title: "Real-Time Stock Tracking",
|
|
descriptions: [
|
|
"Monitor inventory levels instantly across all locations and warehouses",
|
|
"Automatic updates as sales are processed in real-time",
|
|
"Mobile and desktop sync ensures consistency across all devices",
|
|
"Live alerts for low stock situations",
|
|
],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AwWhLByadMoUaITKjtdrpUUpv7/an-illustration-showing-multiple-devices-1773504310168-d92d9310.png",
|
|
},
|
|
{
|
|
id: "quick-add-inventory",
|
|
title: "Quick Add & Barcode Scanning",
|
|
descriptions: [
|
|
"Lightning-fast form for logging new inventory items to your system",
|
|
"Integrated barcode and QR code scanning for accuracy",
|
|
"Bulk upload capabilities for large inventory additions",
|
|
"Smart auto-complete for faster data entry",
|
|
],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AwWhLByadMoUaITKjtdrpUUpv7/a-clean-minimal-form-interface-on-a-mobi-1773504310253-a71cc35d.png",
|
|
},
|
|
{
|
|
id: "sales-tracking",
|
|
title: "Sales Depletion & Reorder Management",
|
|
descriptions: [
|
|
"Automatic inventory adjustment synchronized with sales transactions",
|
|
"Configurable low stock alerts and reorder triggers",
|
|
"AI-powered reorder recommendations based on sales trends",
|
|
"Forecasting tools to predict future inventory needs",
|
|
],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AwWhLByadMoUaITKjtdrpUUpv7/a-detailed-analytics-dashboard-showing-i-1773504310479-1daf25c0.png",
|
|
},
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
containerClassName="max-w-7xl mx-auto"
|
|
titleClassName="text-3xl md:text-4xl font-bold mb-4"
|
|
descriptionClassName="text-base text-gray-600 max-w-3xl mb-12"
|
|
cardClassName="bg-white rounded-xl p-8 shadow-sm border border-gray-100"
|
|
cardTitleClassName="text-xl font-bold mb-4"
|
|
cardDescriptionClassName="text-gray-600 space-y-3 list-disc list-inside"
|
|
tagClassName=""
|
|
buttons={undefined}
|
|
buttonAnimation="slide-up"
|
|
textboxLayout="default"
|
|
carouselMode="buttons"
|
|
uniformGridCustomHeightClasses=""
|
|
ariaLabel=""
|
|
className=""
|
|
gridClassName=""
|
|
carouselClassName=""
|
|
controlsClassName=""
|
|
textBoxClassName=""
|
|
textBoxTitleClassName=""
|
|
textBoxTitleImageWrapperClassName=""
|
|
textBoxTitleImageClassName=""
|
|
textBoxDescriptionClassName=""
|
|
textBoxTagClassName=""
|
|
textBoxButtonContainerClassName=""
|
|
textBoxButtonClassName=""
|
|
textBoxButtonTextClassName=""
|
|
/>
|
|
</div>
|
|
|
|
{/* Feature Metrics Section */}
|
|
<div id="feature-metrics" data-section="feature-metrics">
|
|
<MetricCardTen
|
|
title="Why StockHub's Features Matter"
|
|
description="See how our feature set delivers measurable value to operations teams"
|
|
tag="Impact Metrics"
|
|
tagIcon={TrendingUp}
|
|
tagAnimation="slide-up"
|
|
metrics={[
|
|
{
|
|
id: "implementation-speed",
|
|
title: "Quick Implementation",
|
|
subtitle: "Average setup time",
|
|
category: "Onboarding",
|
|
value: "< 48h",
|
|
},
|
|
{
|
|
id: "accuracy-gain",
|
|
title: "Accuracy Improvement",
|
|
subtitle: "First month results",
|
|
category: "Quality",
|
|
value: "+45%",
|
|
},
|
|
{
|
|
id: "labor-savings",
|
|
title: "Labor Savings",
|
|
subtitle: "Time saved per warehouse daily",
|
|
category: "Efficiency",
|
|
value: "14h",
|
|
},
|
|
{
|
|
id: "integration-count",
|
|
title: "Ecosystem Integration",
|
|
subtitle: "Pre-built integrations available",
|
|
category: "Connectivity",
|
|
value: "50+",
|
|
},
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
containerClassName="max-w-7xl mx-auto"
|
|
titleClassName="text-3xl md:text-4xl font-bold"
|
|
descriptionClassName="text-base text-gray-600 max-w-2xl"
|
|
cardClassName="bg-white rounded-xl p-8 shadow-sm border border-gray-100"
|
|
cardTitleClassName="text-lg font-bold"
|
|
valueClassName="text-4xl font-bold text-blue-600 my-3"
|
|
categoryClassName="text-xs font-semibold text-gray-500 uppercase tracking-wide"
|
|
tag=""
|
|
tagIcon={undefined}
|
|
buttons={undefined}
|
|
buttonAnimation="slide-up"
|
|
carouselMode="buttons"
|
|
uniformGridCustomHeightClasses=""
|
|
ariaLabel=""
|
|
className=""
|
|
cardTitleClassName=""
|
|
subtitleClassName=""
|
|
footerClassName=""
|
|
cardButtonClassName=""
|
|
cardButtonTextClassName=""
|
|
gridClassName=""
|
|
carouselClassName=""
|
|
controlsClassName=""
|
|
textBoxClassName=""
|
|
textBoxTitleClassName=""
|
|
textBoxTitleImageWrapperClassName=""
|
|
textBoxTitleImageClassName=""
|
|
textBoxDescriptionClassName=""
|
|
textBoxTagClassName=""
|
|
textBoxButtonContainerClassName=""
|
|
textBoxButtonClassName=""
|
|
textBoxButtonTextClassName=""
|
|
/>
|
|
</div>
|
|
|
|
{/* Features FAQ Section */}
|
|
<div id="features-faq" data-section="features-faq">
|
|
<FaqBase
|
|
title="Feature Questions"
|
|
description="Answers to common questions about StockHub's capabilities and how they work"
|
|
tag="Learn More"
|
|
tagIcon={HelpCircle}
|
|
tagAnimation="slide-up"
|
|
faqs={[
|
|
{
|
|
id: "faq-1",
|
|
title: "Can I customize features for my specific workflow?",
|
|
content: "Yes! StockHub offers extensive customization options. You can configure workflows, set custom alerts, define user roles, and tailor the interface to match your team's specific processes.",
|
|
},
|
|
{
|
|
id: "faq-2",
|
|
title: "How does real-time sync work across devices?",
|
|
content: "Our cloud infrastructure ensures changes are synced instantly across all connected devices. If you go offline, changes sync automatically once connection is restored. No data loss, no manual reconciliation needed.",
|
|
},
|
|
{
|
|
id: "faq-3",
|
|
title: "What integrations are available?",
|
|
content: "StockHub integrates with 50+ platforms including Shopify, WooCommerce, QuickBooks, Xero, SAP, and many more. Custom API access is available for enterprise plans to build your own integrations.",
|
|
},
|
|
{
|
|
id: "faq-4",
|
|
title: "Is barcode scanning available on all devices?",
|
|
content: "Yes, barcode and QR code scanning works on both iOS and Android devices with camera capabilities. Desktop integration is also available through supported barcode scanners.",
|
|
},
|
|
]}
|
|
textboxLayout="default"
|
|
faqsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
showCard={true}
|
|
containerClassName="max-w-4xl mx-auto"
|
|
titleClassName="text-3xl md:text-4xl font-bold mb-4"
|
|
descriptionClassName="text-base text-gray-600 max-w-2xl mb-12"
|
|
faqsContainerClassName="space-y-4"
|
|
accordionClassName="bg-white rounded-lg border border-gray-100 p-6"
|
|
accordionTitleClassName="text-lg font-semibold text-gray-900"
|
|
accordionContentClassName="text-gray-600 mt-4 leading-relaxed"
|
|
tag=""
|
|
tagIcon={undefined}
|
|
buttons={undefined}
|
|
buttonAnimation="slide-up"
|
|
animationType="smooth"
|
|
showCard={true}
|
|
ariaLabel=""
|
|
className=""
|
|
textBoxTitleClassName=""
|
|
titleImageWrapperClassName=""
|
|
titleImageClassName=""
|
|
textBoxDescriptionClassName=""
|
|
textBoxClassName=""
|
|
textBoxTagClassName=""
|
|
textBoxButtonContainerClassName=""
|
|
textBoxButtonClassName=""
|
|
textBoxButtonTextClassName=""
|
|
accordionIconContainerClassName=""
|
|
accordionIconClassName=""
|
|
separatorClassName=""
|
|
/>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div id="footer-features" data-section="footer-features">
|
|
<FooterBaseCard
|
|
logoText="StockHub"
|
|
copyrightText="© 2025 StockHub. All rights reserved."
|
|
columns={footerColumns}
|
|
containerClassName="max-w-7xl mx-auto"
|
|
columnsClassName="grid grid-cols-2 md:grid-cols-4 gap-8"
|
|
columnTitleClassName="font-bold text-gray-900 mb-4"
|
|
columnItemClassName="text-gray-600 hover:text-blue-600 transition"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |