124 lines
4.9 KiB
TypeScript
124 lines
4.9 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
|
|
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
|
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
|
|
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="shift-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="mediumLarge"
|
|
sizing="medium"
|
|
background="circleGradient"
|
|
cardStyle="glass-depth"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="medium"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
navItems={[
|
|
{ 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">
|
|
<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="Fluid calendar interface"
|
|
testimonials={[
|
|
{
|
|
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">
|
|
<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: "physics", title: "Realistic Dynamics", author: "Physics Engine", description: "Smooth motion that tracks your cursor with zero latency.", tags: ["Responsive", "Physics-Enabled"],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/technology-concept_1234-5678.jpg"
|
|
},
|
|
{
|
|
id: "calendar", title: "Adaptive Grid", author: "Layout Core", description: "The grid adjusts automatically to your scheduling density.", tags: ["Adaptive", "Real-Time"],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/layout-concept_8765-4321.jpg"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardEleven
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
title="Precision Performance"
|
|
description="Track every millisecond of your day with professional-grade scheduling metrics."
|
|
useInvertedBackground={true}
|
|
metrics={[
|
|
{
|
|
id: "perf", value: "0ms", title: "Latency", description: "Zero latency input processing.", imageSrc: "http://img.b2bpic.net/free-photo/working-man_1098-18366.jpg"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<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}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
tag="Join Now"
|
|
title="Start Your Fluid Journey"
|
|
description="Sign up today and experience scheduling redefined."
|
|
mediaAnimation="blur-reveal"
|
|
background={{ variant: "gradient-bars" }}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoReveal
|
|
logoText="CalenTech"
|
|
leftLink={{ text: "Terms", href: "#" }}
|
|
rightLink={{ text: "Privacy", href: "#" }}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |