Update src/app/page.tsx
This commit is contained in:
237
src/app/page.tsx
237
src/app/page.tsx
@@ -3,12 +3,12 @@
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
|
||||
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
|
||||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||||
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
||||
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
|
||||
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
|
||||
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
||||
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -28,238 +28,93 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Features",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Metrics",
|
||||
id: "metrics",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Performance", id: "metrics" },
|
||||
{ name: "Insights", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="CalenTech"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Your Time, Perfectly Orchestrated"
|
||||
description="Experience the next evolution of scheduling with an ultra-realistic calendar interface that syncs across every device in real-time."
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Started",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
text: "View Demo",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
<HeroSplitTestimonial
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Ultra-Realistic Scheduling"
|
||||
description="A fluid, high-fidelity calendar interface that brings your time management to life with intuitive physics-based interactions."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/sound-button-closeup-laptop-keyboard_169016-62909.jpg"
|
||||
imageAlt="Futuristic calendar app dashboard interface"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
imageAlt="Fluid calendar interface"
|
||||
testimonials={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-portrait-attractive-male-model-color-flash-light_158595-5104.jpg",
|
||||
alt: "User 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/smiley-tattoo-artist-indoors-side-view_23-2149445974.jpg",
|
||||
alt: "User 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/fashion-portrait-young-elegant-woman_1328-4107.jpg",
|
||||
alt: "User 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/working-man_1098-18366.jpg",
|
||||
alt: "User 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/woman-portrait-with-bright-blue-lips_23-2151096441.jpg",
|
||||
alt: "User 5",
|
||||
},
|
||||
]}
|
||||
avatarText="Join 1.2M+ professionals"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Real-time Sync",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Glassmorphism UI",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Team Analytics",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Global Availability",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Secure Infrastructure",
|
||||
},
|
||||
name: "Alex Rivet", handle: "@alexrivet", testimonial: "The fluid physics make scheduling feel like a physical experience.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-attractive-male-model-color-flash-light_158595-5104.jpg"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwelve
|
||||
animationType="slide-up"
|
||||
<FeatureCardTwentyFour
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
title="Fluid Interactions"
|
||||
description="Designed for precision, our calendar uses real-time physics to make every drag and drop feel tangible."
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
label: "Sync",
|
||||
title: "Real-time Sync",
|
||||
items: [
|
||||
"Instant updates",
|
||||
"Multi-platform sync",
|
||||
"Offline access",
|
||||
],
|
||||
id: "physics", title: "Realistic Dynamics", author: "Physics Engine", description: "Smooth motion that tracks your cursor with zero latency.", tags: ["Responsive", "Physics-Enabled"]
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
label: "Design",
|
||||
title: "Ultra-Realistic UI",
|
||||
items: [
|
||||
"Immersive glassmorphism",
|
||||
"Intuitive gestures",
|
||||
"Custom themes",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
label: "Insights",
|
||||
title: "Time Analytics",
|
||||
items: [
|
||||
"Deep insights",
|
||||
"Project tracking",
|
||||
"Efficiency metrics",
|
||||
],
|
||||
},
|
||||
id: "calendar", title: "Adaptive Grid", author: "Layout Core", description: "The grid adjusts automatically to your scheduling density.", tags: ["Adaptive", "Real-Time"]
|
||||
}
|
||||
]}
|
||||
title="Designed for Efficiency"
|
||||
description="Powerful tools built to keep your life balanced and your projects on track."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardFourteen
|
||||
useInvertedBackground={false}
|
||||
title="Performance at a Glance"
|
||||
tag="Trusted by Thousands"
|
||||
<MetricCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
title="Precision Performance"
|
||||
description="Track every millisecond of your day with professional-grade scheduling metrics."
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "1.2M+",
|
||||
description: "Active Users Worldwide",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "99.9%",
|
||||
description: "Reliable Uptime Guaranteed",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "500M+",
|
||||
description: "Scheduled Events Synced",
|
||||
},
|
||||
id: "perf", value: "0ms", title: "Latency", description: "Zero latency input processing.", imageSrc: "http://img.b2bpic.net/free-photo/working-man_1098-18366.jpg"
|
||||
}
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
<TestimonialCardFifteen
|
||||
testimonial="The most realistic calendar I've ever used. The fluidity is unmatched."
|
||||
rating={5}
|
||||
author="Sarah Chen"
|
||||
avatars={[{ src: "http://img.b2bpic.net/free-photo/fashion-portrait-young-elegant-woman_1328-4107.jpg", alt: "Sarah" }]}
|
||||
ratingAnimation="blur-reveal"
|
||||
avatarsAnimation="slide-up"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Alex Rivet",
|
||||
handle: "@alexrivet",
|
||||
testimonial: "The ultra-realistic UI makes planning feel natural and seamless.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-attractive-male-model-color-flash-light_158595-5104.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Sarah Chen",
|
||||
handle: "@schen_dev",
|
||||
testimonial: "Absolutely the cleanest calendar app I've used. Efficiency is redefined.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiley-tattoo-artist-indoors-side-view_23-2149445974.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Markus Weber",
|
||||
handle: "@m_weber",
|
||||
testimonial: "Syncing is perfect and the design is simply top-notch.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-young-elegant-woman_1328-4107.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Priya Singh",
|
||||
handle: "@psingh",
|
||||
testimonial: "Finally, a calendar that understands how I work. Essential for my team.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/working-man_1098-18366.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Luca Moretti",
|
||||
handle: "@luca_m",
|
||||
testimonial: "A masterpiece of UX design. I can't imagine my workflow without it.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-portrait-with-bright-blue-lips_23-2151096441.jpg",
|
||||
},
|
||||
]}
|
||||
title="Loved by Professionals"
|
||||
description="Discover why millions of users trust our calendar to manage their daily schedules."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
tag="Ready to get started?"
|
||||
title="Join the Future of Scheduling"
|
||||
description="Sign up today and get 30 days of premium features on us."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/ui-ux-representations-with-smartphone_23-2150201858.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
tag="Join Now"
|
||||
title="Start Your Fluid Journey"
|
||||
description="Sign up today and experience scheduling redefined."
|
||||
mediaAnimation="blur-reveal"
|
||||
background={{ variant: "gradient-bars" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="CalenTech"
|
||||
leftLink={{
|
||||
text: "Terms of Service",
|
||||
href: "#",
|
||||
}}
|
||||
rightLink={{
|
||||
text: "Privacy Policy",
|
||||
href: "#",
|
||||
}}
|
||||
leftLink={{ text: "Terms", href: "#" }}
|
||||
rightLink={{ text: "Privacy", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user