193 lines
14 KiB
TypeScript
193 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
|
import HeroBillboardTestimonial from "@/components/sections/hero/HeroBillboardTestimonial";
|
|
import FeatureCardEight from "@/components/sections/feature/FeatureCardEight";
|
|
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
|
|
import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
|
|
import FaqBase from "@/components/sections/faq/FaqBase";
|
|
import ContactText from "@/components/sections/contact/ContactText";
|
|
import FooterCard from "@/components/sections/footer/FooterCard";
|
|
import { Package, Zap, Star, HelpCircle, Twitter, Linkedin, Mail } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="expand-hover"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="pill"
|
|
contentWidth="small"
|
|
sizing="mediumLargeSizeLargeTitles"
|
|
background="aurora"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
brandName="RC Inventory"
|
|
navItems={[
|
|
{ name: "Features", id: "features" },
|
|
{ name: "How It Works", id: "how-it-works" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "FAQ", id: "faq" },
|
|
{ name: "Contact", id: "contact" },
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardTestimonial
|
|
title="Smart Inventory Management for Red Cross Clubs"
|
|
description="Track supplies effortlessly with AI-powered insights, customizable categories, and real-time updates. Keep your club organized and prepared for every mission."
|
|
tag="Inventory Solution"
|
|
tagIcon={Package}
|
|
tagAnimation="slide-up"
|
|
imageSrc="http://img.b2bpic.net/free-vector/dashboard-user-panel-template_23-2148365750.jpg"
|
|
imageAlt="Red Cross Inventory Dashboard"
|
|
mediaAnimation="slide-up"
|
|
testimonials={[
|
|
{
|
|
name: "Maria Rodriguez", handle: "Club Manager, Red Cross", testimonial: "This platform transformed how we manage our supplies. We saved 8 hours per week on inventory tracking!", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=1", imageAlt: "portrait professional avatar person headshot"},
|
|
{
|
|
name: "James Chen", handle: "Operations Lead", testimonial: "The customizable categories let us organize exactly how we need. Best investment for our club.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=2", imageAlt: "portrait professional avatar person headshot"},
|
|
{
|
|
name: "Sarah Williams", handle: "Supply Coordinator", testimonial: "AI insights help us predict shortages before they happen. We're never caught off guard anymore.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=3", imageAlt: "portrait professional avatar person headshot"},
|
|
{
|
|
name: "Ahmed Hassan", handle: "Director", testimonial: "Easy to use, powerful features, and exceptional support. Highly recommended for all Red Cross clubs.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=4", imageAlt: "portrait professional avatar person headshot"},
|
|
]}
|
|
testimonialRotationInterval={5000}
|
|
background={{ variant: "glowing-orb" }}
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{ text: "Start Tracking", href: "#contact" },
|
|
{ text: "Learn More", href: "#how-it-works" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardEight
|
|
title="Powerful Features for Complete Control"
|
|
description="Everything you need to manage supplies efficiently"
|
|
tag="Core Features"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Customizable Categories", description: "Create supply categories tailored to your Red Cross club's specific needs and operations.", imageSrc: "http://img.b2bpic.net/free-vector/user-panel-business-dashboard_23-2148359773.jpg", imageAlt: "customization settings personalization interface dashboard"},
|
|
{
|
|
id: 2,
|
|
title: "Real-Time Tracking", description: "Monitor supply levels in real-time with instant updates and detailed inventory logs.", imageSrc: "http://img.b2bpic.net/free-vector/store-staff-check-number-products-that-must-be-delivered-customers-day_1150-51079.jpg", imageAlt: "tracking supplies inventory items list"},
|
|
{
|
|
id: 3,
|
|
title: "AI-Powered Insights", description: "Get intelligent recommendations on stock levels, usage patterns, and upcoming needs.", imageSrc: "http://img.b2bpic.net/free-photo/woman-watching-business-conference-computer-screen-looking-statistics_482257-125563.jpg", imageAlt: "artificial intelligence analytics data insights charts analysis"},
|
|
]}
|
|
buttons={[{ text: "Explore All Features", href: "#contact" }]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="how-it-works" data-section="how-it-works">
|
|
<TextSplitAbout
|
|
title="How It Works"
|
|
description={[
|
|
"Our inventory platform is designed to be intuitive and accessible for all team members. Simply create your supply categories, input current quantities in YFM (or your preferred units), and let our AI learn your patterns.", "Access real-time dashboards showing stock levels, usage trends, and predictive alerts. Get notified when supplies are running low, and receive AI-powered suggestions for optimal stock management based on your club's historical data.", "Export reports, share with team members, and make data-driven decisions about procurement and resource allocation. The system learns and improves with every entry, becoming smarter over time."]}
|
|
useInvertedBackground={false}
|
|
showBorder={true}
|
|
buttons={[{ text: "Start Your Free Trial", href: "#contact" }]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSix
|
|
title="Trusted by Red Cross Clubs Nationwide"
|
|
description="See how clubs like yours are revolutionizing their inventory management"
|
|
tag="Success Stories"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Maria Rodriguez", handle: "@mrodriguez - Club Manager", testimonial: "This platform transformed how we manage supplies. We saved 8 hours weekly on inventory tracking alone. The AI insights have been game-changing for our operations.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=5", imageAlt: "portrait professional avatar person headshot"},
|
|
{
|
|
id: "2", name: "James Chen", handle: "@jchen - Operations Lead", testimonial: "The customizable categories let us organize exactly how we need to. Best investment for our club's efficiency and team morale.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=6", imageAlt: "portrait professional avatar person headshot"},
|
|
{
|
|
id: "3", name: "Sarah Williams", handle: "@swilliams - Supply Coordinator", testimonial: "AI insights help us predict shortages before they happen. We're never caught off guard with critical supplies anymore.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=7", imageAlt: "portrait professional avatar person headshot"},
|
|
{
|
|
id: "4", name: "Ahmed Hassan", handle: "@ahassan - Director", testimonial: "Easy to use, powerful features, and exceptional support. Highly recommended for all Red Cross clubs looking to modernize.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=8", imageAlt: "portrait professional avatar person headshot"},
|
|
{
|
|
id: "5", name: "Lisa Thompson", handle: "@lthompson - Volunteer Coordinator", testimonial: "Even our less tech-savvy volunteers can use this system. The interface is intuitive and the results speak for themselves.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=9", imageAlt: "portrait professional avatar person headshot"},
|
|
{
|
|
id: "6", name: "David Martinez", handle: "@dmartinez - Finance Manager", testimonial: "The reporting features help us justify budget allocation to leadership. ROI is clear and measurable.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=10", imageAlt: "portrait professional avatar person headshot"},
|
|
]}
|
|
animationType="slide-up"
|
|
speed={40}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
title="Frequently Asked Questions"
|
|
description="Everything you need to know about our inventory management platform"
|
|
tag="Support"
|
|
tagIcon={HelpCircle}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqsAnimation="slide-up"
|
|
animationType="smooth"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "Can I create custom supply categories?", content: "Yes! Our platform is fully customizable. You can create categories specific to your Red Cross club's operations, from medical supplies to emergency equipment. Add, remove, or modify categories anytime as your needs change."},
|
|
{
|
|
id: "2", title: "What units can I track supplies in?", content: "You can track in any unit system you prefer - YFM, pieces, boxes, kilograms, liters, or any custom unit. The system is flexible and adapts to your existing workflows and terminology."},
|
|
{
|
|
id: "3", title: "How does the AI provide insights?", content: "Our AI analyzes your supply usage patterns, seasonal trends, and historical data to predict future needs. It learns from your entries and provides recommendations on optimal stock levels, helping you avoid both shortages and overstocking."},
|
|
{
|
|
id: "4", title: "Can multiple team members access the platform?", content: "Absolutely! You can invite unlimited team members with customizable permission levels. Track who made what changes, assign responsibilities, and collaborate seamlessly across your entire club."},
|
|
{
|
|
id: "5", title: "What if we go offline? Can we still use it?", content: "Our platform works online for best features, but we're developing offline capabilities. You can export data and access read-only versions. Contact us for the latest updates on offline functionality."},
|
|
{
|
|
id: "6", title: "How secure is our supply data?", content: "We use enterprise-grade encryption and security protocols. Your data is backed up regularly, and we comply with all privacy standards. Your club's inventory information is always protected and accessible only to authorized team members."},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
text="Ready to transform your Red Cross club's inventory management? Join clubs nationwide using our AI-powered platform to save time, reduce waste, and stay prepared."
|
|
animationType="entrance-slide"
|
|
background={{ variant: "radial-gradient" }}
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{ text: "Get Started Today", href: "https://example.com/signup" },
|
|
{ text: "Schedule Demo", href: "https://example.com/demo" },
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="RC Inventory"
|
|
copyrightText="© 2025 RC Inventory Platform. Empowering Red Cross Clubs Everywhere."
|
|
socialLinks={[
|
|
{ icon: Twitter, href: "https://twitter.com/rcinventory", ariaLabel: "Twitter" },
|
|
{ icon: Linkedin, href: "https://linkedin.com/company/rcinventory", ariaLabel: "LinkedIn" },
|
|
{ icon: Mail, href: "mailto:support@rcinventory.com", ariaLabel: "Email" },
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|