Files
ebc790b4-d894-403f-9660-e1d…/src/app/page.tsx
2026-03-19 21:16:37 +00:00

196 lines
12 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroBillboardRotatedCarousel from "@/components/sections/hero/HeroBillboardRotatedCarousel";
import FeatureBorderGlow from "@/components/sections/feature/featureBorderGlow/FeatureBorderGlow";
import MetricCardTen from "@/components/sections/metrics/MetricCardTen";
import PricingCardFive from "@/components/sections/pricing/PricingCardFive";
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterBase from "@/components/sections/footer/FooterBase";
import { Award, Brain, CheckCircle, CreditCard, Layers, Moon, Shield, Sparkles, Users, Zap } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="text-stagger"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="compact"
sizing="mediumLarge"
background="fluid"
cardStyle="gradient-mesh"
primaryButtonStyle="primary-glow"
secondaryButtonStyle="solid"
headingFontWeight="light"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="ZENIT"
navItems={[
{ name: "Features", id: "features" },
{ name: "Pricing", id: "pricing" },
{ name: "About", id: "about" },
{ name: "Changelog", id: "changelog" }
]}
button={{ text: "Get early access", href: "#cta" }}
animateOnLoad={true}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardRotatedCarousel
title="Work at the speed of your thinking."
description="ZENIT brings your tasks, team, and focus into one powerful workspace. Built for teams that move fast."
tag="THE FUTURE OF PRODUCTIVITY"
tagAnimation="slide-up"
background={{ variant: "radial-gradient" }}
buttons={[
{ text: "Start for free", href: "#" },
{ text: "Explore features →", href: "#features" }
]}
buttonAnimation="slide-up"
carouselItems={[
{ id: "slide-1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BBG13yQzM6EgLP1BH0TBHn8STM/a-premium-dark-themed-software-dashboard-1773954938158-40611d7c.png", imageAlt: "ZENIT Dashboard" },
{ id: "slide-2", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BBG13yQzM6EgLP1BH0TBHn8STM/a-premium-dark-themed-software-dashboard-1773954938158-40611d7c.png", imageAlt: "ZENIT Workspace" },
{ id: "slide-3", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BBG13yQzM6EgLP1BH0TBHn8STM/a-premium-dark-themed-software-dashboard-1773954938158-40611d7c.png", imageAlt: "ZENIT Analytics" },
{ id: "slide-4", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BBG13yQzM6EgLP1BH0TBHn8STM/a-premium-dark-themed-software-dashboard-1773954938158-40611d7c.png", imageAlt: "ZENIT Team View" },
{ id: "slide-5", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BBG13yQzM6EgLP1BH0TBHn8STM/a-premium-dark-themed-software-dashboard-1773954938158-40611d7c.png", imageAlt: "ZENIT Collaboration" },
{ id: "slide-6", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BBG13yQzM6EgLP1BH0TBHn8STM/a-premium-dark-themed-software-dashboard-1773954938158-40611d7c.png", imageAlt: "ZENIT Focus Mode" }
]}
autoPlay={true}
autoPlayInterval={4000}
ariaLabel="ZENIT Hero Section with Dashboard Carousel"
/>
</div>
<div id="marquee" data-section="marquee">
<FeatureBorderGlow
title="Unified Workspace · Deep Focus Mode · Real-time Collaboration · Smart Prioritisation · Zero Distractions · Built for Speed"
description="Everything you need to work better, faster, and smarter."
features={[
{ icon: Zap, title: "Instant Sync", description: "Real-time updates across all devices" },
{ icon: Shield, title: "Enterprise Security", description: "Bank-grade encryption and compliance" },
{ icon: Sparkles, title: "AI-Powered", description: "Smart suggestions and automation" },
{ icon: CheckCircle, title: "Always Available", description: "99.99% uptime guarantee" }
]}
animationType="blur-reveal"
textboxLayout="default"
useInvertedBackground={false}
tag="CAPABILITIES"
tagIcon={Zap}
tagAnimation="blur-reveal"
/>
</div>
<div id="stats" data-section="stats">
<MetricCardTen
title="By the numbers"
description="Join thousands of teams already transforming their productivity."
tag="SOCIAL PROOF"
tagAnimation="blur-reveal"
textboxLayout="default"
useInvertedBackground={true}
animationType="scale-rotate"
metrics={[
{ id: "users", title: "Active Users", subtitle: "Teams worldwide", category: "Growth", value: "10,000+" },
{ id: "adoption", title: "Adoption Rate", subtitle: "In first month", category: "Success", value: "94%" },
{ id: "rating", title: "Customer Rating", subtitle: "Out of 5 stars", category: "Satisfaction", value: "4.9★" },
{ id: "productivity", title: "Productivity Gain", subtitle: "On average", category: "Impact", value: "3x" }
]}
/>
</div>
<div id="features" data-section="features">
<FeatureBorderGlow
title="Built different."
description="Every feature designed for teams that refuse to compromise."
tag="WHAT WE OFFER"
tagIcon={Sparkles}
tagAnimation="blur-reveal"
features={[
{ icon: Layers, title: "Unified Workspace", description: "Everything in one place. No switching tabs, no lost context, no wasted time. Your tasks, calendar, messages, and files converge in a seamless workspace designed for focus." },
{ icon: Users, title: "Real-time Collaboration", description: "Your team moves as one. See changes instantly, leave comments, and stay aligned in real time. Built-in presence awareness keeps everyone on the same page." },
{ icon: Brain, title: "Smart Prioritisation", description: "ZENIT learns what matters most and surfaces the right work at the right moment. AI-powered insights help you focus on what truly drives impact." },
{ icon: Moon, title: "Deep Focus Mode", description: "Block distractions, silence notifications, and enter a state of pure uninterrupted flow. Your distraction-free sanctuary awaits at a single click." }
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardFive
title="Simple, transparent pricing."
description="Choose the perfect plan for your team. No hidden fees, no surprises."
tag="PRICING"
tagIcon={CreditCard}
tagAnimation="blur-reveal"
textboxLayout="default"
useInvertedBackground={true}
animationType="scale-rotate"
plans={[
{ id: "starter", tag: "STARTER", price: "Free", period: "Forever", description: "Perfect for getting started", button: { text: "Start now", href: "#" }, featuresTitle: "What's included", features: ["Up to 3 projects", "5 GB storage", "Basic integrations", "Community support", "Mobile app access"] },
{ id: "pro", tag: "MOST POPULAR", tagIcon: Sparkles, price: "£29", period: "/month", description: "For growing teams", button: { text: "Start free trial", href: "#" }, featuresTitle: "Everything in Starter, plus", features: ["Unlimited projects", "500 GB storage", "Advanced integrations", "Priority email support", "Custom workflows", "Analytics dashboard"] },
{ id: "enterprise", tag: "ENTERPRISE", price: "Custom", period: "pricing", description: "For large organizations", button: { text: "Contact sales", href: "#" }, featuresTitle: "Everything in Pro, plus", features: ["Unlimited everything", "Dedicated support", "Single sign-on (SSO)", "Advanced security", "Custom integrations", "SLA guarantee"] }
]}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSixteen
title="Loved by teams everywhere"
description="See how ZENIT transformed productivity for teams across industries."
tag="TESTIMONIALS"
tagIcon={Award}
tagAnimation="blur-reveal"
textboxLayout="default"
useInvertedBackground={false}
animationType="depth-3d"
testimonials={[
{ id: "1", name: "Sarah Chen", role: "Product Manager", company: "TechVentures", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BBG13yQzM6EgLP1BH0TBHn8STM/a-professional-portrait-photo-of-a-confi-1773954900993-98553c9c.png" },
{ id: "2", name: "Marcus Johnson", role: "CEO", company: "DataFlow Inc", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BBG13yQzM6EgLP1BH0TBHn8STM/a-professional-portrait-photo-of-a-focus-1773954900978-7143b366.png" },
{ id: "3", name: "Elena Rodriguez", role: "Design Lead", company: "CreativeStudio", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BBG13yQzM6EgLP1BH0TBHn8STM/a-professional-portrait-photo-of-an-acco-1773954901375-97d9f2d7.png" },
{ id: "4", name: "David Kim", role: "Engineering Director", company: "CloudScale", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BBG13yQzM6EgLP1BH0TBHn8STM/a-professional-portrait-photo-of-an-inno-1773954900774-6aa8d6d0.png" },
{ id: "5", name: "Jessica Martinez", role: "Operations Manager", company: "GrowthCo", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BBG13yQzM6EgLP1BH0TBHn8STM/a-professional-portrait-photo-of-an-expe-1773954901113-cacdb287.png" },
{ id: "6", name: "Michael Thompson", role: "Founder", company: "StartupLabs", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BBG13yQzM6EgLP1BH0TBHn8STM/a-professional-portrait-photo-of-an-acco-1773954901078-d9daeb42.png" }
]}
kpiItems={[
{ value: "2.5x", label: "Faster task completion" },
{ value: "87%", label: "Reduced context switching" },
{ value: "94%", label: "Team satisfaction" }
]}
/>
</div>
<div id="cta" data-section="cta">
<ContactCTA
tag="GET STARTED"
tagIcon={Zap}
tagAnimation="blur-reveal"
title="Ready to do your best work?"
description="Join thousands of teams transforming their productivity. No credit card required to start."
buttons={[{ text: "Get early access", href: "#" }]}
buttonAnimation="blur-reveal"
background={{ variant: "radial-gradient" }}
useInvertedBackground={true}
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
logoText="ZENIT"
copyrightText="© 2025 ZENIT | Productivity Reimagined"
columns={[
{ title: "Product", items: [{ label: "Features", href: "#features" }, { label: "Pricing", href: "#pricing" }, { label: "Security", href: "#" }, { label: "Roadmap", href: "#" }] },
{ title: "Company", items: [{ label: "About", href: "#" }, { label: "Blog", href: "#" }, { label: "Careers", href: "#" }, { label: "Contact", href: "#" }] },
{ title: "Resources", items: [{ label: "Documentation", href: "#" }, { label: "API", href: "#" }, { label: "Community", href: "#" }, { label: "Support", href: "#" }] },
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }, { label: "Cookie Policy", href: "#" }, { label: "Status", href: "#" }] }
]}
/>
</div>
</ThemeProvider>
);
}