219 lines
11 KiB
TypeScript
219 lines
11 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
|
import MediaAbout from '@/components/sections/about/MediaAbout';
|
|
import FeatureCardThirteen from '@/components/sections/feature/FeatureCardThirteen';
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
|
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FooterBase from '@/components/sections/footer/FooterBase';
|
|
import { CheckCircle, Mail, Sparkles, Star, TrendingUp, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="pill"
|
|
contentWidth="medium"
|
|
sizing="large"
|
|
background="noiseDiagonalGradient"
|
|
cardStyle="elevated-accent"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="outline"
|
|
headingFontWeight="bold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="CloudVault"
|
|
navItems={[
|
|
{ name: "Features", id: "features" },
|
|
{ name: "Pricing", id: "pricing" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{ text: "Get Started", href: "#contact" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogoBillboard
|
|
logoText="CloudVault"
|
|
description="Secure cloud storage built for teams. Store, sync, and share files with enterprise-grade security and unlimited collaboration."
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767717468380-jq75p8tp.jpg"
|
|
imageAlt="Cloud storage dashboard"
|
|
frameStyle="browser"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MediaAbout
|
|
title="Built for Modern Teams"
|
|
description="CloudVault combines military-grade encryption with intuitive design, giving your team the confidence and efficiency they need to work together seamlessly."
|
|
tag="Our Mission"
|
|
tagIcon={Zap}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767717469670-now6s2j3.jpg"
|
|
imageAlt="Team collaboration at work"
|
|
buttons={[{ text: "Learn More", href: "#features" }]}
|
|
useInvertedBackground="invertDefault"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardThirteen
|
|
title="Our Process"
|
|
description="A streamlined approach to secure, scalable cloud storage"
|
|
tag="How It Works"
|
|
tagIcon={CheckCircle}
|
|
textboxLayout="default"
|
|
features={[
|
|
{
|
|
id: "01", title: "Upload", description: "Drag and drop files from your device or existing cloud accounts. Organize instantly with folders and smart collections."
|
|
},
|
|
{
|
|
id: "02", title: "Encrypt", description: "Files are automatically encrypted with AES-256 before transmission. Your data stays private with end-to-end encryption."
|
|
},
|
|
{
|
|
id: "03", title: "Share", description: "Control access with granular permissions. Set expiration dates and download limits for maximum security."
|
|
},
|
|
{
|
|
id: "04", title: "Sync", description: "Real-time synchronization across all devices. Changes appear instantly whether you're on mobile, tablet, or desktop."
|
|
}
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardOne
|
|
title="Storage Plans"
|
|
description="Choose the perfect storage solution for your needs"
|
|
tag="Flexible Options"
|
|
tagIcon={Sparkles}
|
|
textboxLayout="default"
|
|
products={[
|
|
{
|
|
id: "1", name: "Starter Plan", price: "$29/mo", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767717471362-1oxzezod.jpg", imageAlt: "Starter cloud storage plan"
|
|
},
|
|
{
|
|
id: "2", name: "Professional Plan", price: "$79/mo", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767717472359-fny9op03.jpg", imageAlt: "Professional storage solution"
|
|
},
|
|
{
|
|
id: "3", name: "Enterprise Plan", price: "Custom", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767717473411-x561l4eo.jpg", imageAlt: "Enterprise cloud platform"
|
|
}
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
useInvertedBackground="invertCard"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardEleven
|
|
title="Growing Trust"
|
|
description="Trusted by organizations worldwide for secure cloud storage"
|
|
tag="Impact"
|
|
tagIcon={TrendingUp}
|
|
textboxLayout="default"
|
|
metrics={[
|
|
{
|
|
id: "1", value: "2M+", title: "Active Users", description: "Teams and individuals trusting CloudVault daily", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548619347-rdypab32.jpg", imageAlt: "Growing user statistics"
|
|
},
|
|
{
|
|
id: "2", value: "500PB+", title: "Data Stored", description: "Secure storage and collaboration capacity", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548619667-g5lfh80v.jpg", imageAlt: "Customer satisfaction metrics"
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardOne
|
|
title="What Our Customers Say"
|
|
description="Real feedback from teams using CloudVault"
|
|
tag="Testimonials"
|
|
tagIcon={Star}
|
|
textboxLayout="default"
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Johnson", role: "CEO", company: "TechCorp", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767717474472-x5hsql9a.jpg", imageAlt: "Sarah Johnson"
|
|
},
|
|
{
|
|
id: "2", name: "Michael Chen", role: "CTO", company: "InnovateLab", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767717475499-y1axkoh8.jpg", imageAlt: "Michael Chen"
|
|
},
|
|
{
|
|
id: "3", name: "Emily Rodriguez", role: "Marketing Director", company: "GrowthCo", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767717478028-zmbgmybi.jpg", imageAlt: "Emily Rodriguez"
|
|
},
|
|
{
|
|
id: "4", name: "David Kim", role: "Product Manager", company: "StartupXYZ", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767714430623-ttkmfav8.jpg", imageAlt: "David Kim"
|
|
},
|
|
{
|
|
id: "5", name: "Jessica Liu", role: "Operations Lead", company: "CloudFirst Inc", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767453942945-kw5z9fws.jpg", imageAlt: "Jessica Liu"
|
|
}
|
|
]}
|
|
useInvertedBackground="invertDefault"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
tag="Stay Updated"
|
|
title="Get Early Access to New Features"
|
|
description="Join thousands of teams enjoying secure, seamless cloud storage. Subscribe for exclusive updates and special offers."
|
|
tagIcon={Mail}
|
|
inputPlaceholder="your@email.com"
|
|
buttonText="Subscribe Now"
|
|
termsText="We respect your privacy. Unsubscribe anytime from your settings."
|
|
useInvertedBackground="invertCard"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase
|
|
logoText="CloudVault"
|
|
copyrightText="© 2025 CloudVault. All rights reserved."
|
|
columns={[
|
|
{
|
|
title: "Product", items: [
|
|
{ label: "Features", href: "#features" },
|
|
{ label: "Pricing", href: "#products" },
|
|
{ label: "Security", href: "#about" },
|
|
{ label: "Enterprise", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#about" },
|
|
{ label: "Blog", href: "https://blog.cloudvault.com" },
|
|
{ label: "Careers", href: "https://careers.cloudvault.com" },
|
|
{ label: "Contact", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "https://cloudvault.com/privacy" },
|
|
{ label: "Terms of Service", href: "https://cloudvault.com/terms" },
|
|
{ label: "Security", href: "https://cloudvault.com/security" },
|
|
{ label: "Compliance", href: "https://cloudvault.com/compliance" }
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |