174 lines
9.7 KiB
TypeScript
174 lines
9.7 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
|
|
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
|
|
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
|
import { Award, Github, Linkedin, Sparkles, Twitter, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="icon-arrow"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="soft"
|
|
contentWidth="smallMedium"
|
|
sizing="largeSizeMediumTitles"
|
|
background="circleGradient"
|
|
cardStyle="inset"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="normal"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="Waverly"
|
|
navItems={[
|
|
{ name: "Features", id: "features" },
|
|
{ name: "Experience", id: "experience" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{ text: "Get Started", href: "https://github.com" }}
|
|
animateOnLoad={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDoubleCarousel
|
|
title="Interactive Water Surface with Cursor Control"
|
|
description="Experience fluid dynamics in real-time. Move your cursor to create ripples and waves that distort and refract the text beneath. Built with Three.js and WebGL for smooth, responsive interaction."
|
|
tag="WebGL Experience"
|
|
tagIcon={Zap}
|
|
tagAnimation="blur-reveal"
|
|
background={{ variant: "plain" }}
|
|
leftCarouselItems={[
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnBXSm0K43AohJfssOupZapXhQ/abstract-flowing-water-surface-with-ligh-1773218772184-a9a7d3b1.png?_wi=1", imageAlt: "Water ripple effect visualization"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnBXSm0K43AohJfssOupZapXhQ/modern-tech-interface-showing-three-js-w-1773218772108-65e4b577.png?_wi=1", imageAlt: "WebGL technology stack"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnBXSm0K43AohJfssOupZapXhQ/performance-metrics-dashboard-with-real--1773218772274-2dba3a8b.png?_wi=1", imageAlt: "Performance metrics"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnBXSm0K43AohJfssOupZapXhQ/user-cursor-creating-ripple-waves-on-tou-1773218772133-39c358c8.png?_wi=1", imageAlt: "Interactive water response"
|
|
}
|
|
]}
|
|
rightCarouselItems={[
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnBXSm0K43AohJfssOupZapXhQ/user-cursor-creating-ripple-waves-on-tou-1773218772133-39c358c8.png?_wi=2", imageAlt: "Cursor interaction ripples"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnBXSm0K43AohJfssOupZapXhQ/performance-metrics-dashboard-with-real--1773218772274-2dba3a8b.png?_wi=2", imageAlt: "Real-time performance"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnBXSm0K43AohJfssOupZapXhQ/abstract-flowing-water-surface-with-ligh-1773218772184-a9a7d3b1.png?_wi=2", imageAlt: "Fluid simulation"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnBXSm0K43AohJfssOupZapXhQ/modern-tech-interface-showing-three-js-w-1773218772108-65e4b577.png?_wi=2", imageAlt: "Advanced rendering"
|
|
}
|
|
]}
|
|
buttons={[
|
|
{ text: "Explore Demo", href: "#experience" },
|
|
{ text: "Learn More", href: "#features" }
|
|
]}
|
|
buttonAnimation="blur-reveal"
|
|
carouselPosition="right"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwelve
|
|
title="Advanced Capabilities"
|
|
description="Cutting-edge WebGL technology for immersive interactive experiences"
|
|
tag="Technical Features"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="blur-reveal"
|
|
features={[
|
|
{
|
|
id: "realtime", label: "Real-time", title: "60 FPS Smooth Animation", items: [
|
|
"Optimized GPU rendering", "Minimal latency response", "Smooth particle simulation", "Efficient shader compilation"
|
|
],
|
|
buttons: [
|
|
{ text: "Learn More", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
id: "responsive", label: "Responsive", title: "Cursor-Driven Interaction", items: [
|
|
"Mouse position tracking", "Touch-screen compatible", "Ripple wave propagation", "Physics-based distortion"
|
|
]
|
|
},
|
|
{
|
|
id: "advanced", label: "Advanced", title: "Professional Shader Effects", items: [
|
|
"Custom GLSL shaders", "Refraction mapping", "Texture distortion", "Real-time wave dynamics"
|
|
]
|
|
}
|
|
]}
|
|
animationType="blur-reveal"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwo
|
|
title="Trusted by Innovators"
|
|
description="See what industry leaders say about our WebGL water effect technology"
|
|
tag="Testimonials"
|
|
tagIcon={Award}
|
|
tagAnimation="blur-reveal"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Alexandra Chen", role: "Creative Technologist", testimonial: "The water ripple effect is stunning. The responsiveness to cursor movement creates an incredibly engaging user experience that keeps visitors captivated.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnBXSm0K43AohJfssOupZapXhQ/professional-headshot-of-a-tech-develope-1773218771771-f3c90e2a.png", imageAlt: "Alexandra Chen"
|
|
},
|
|
{
|
|
id: "2", name: "Marcus Rodriguez", role: "Senior Developer", testimonial: "Exceptional WebGL implementation. The shader quality and performance optimization make this the best interactive water effect I've encountered. Highly recommended.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnBXSm0K43AohJfssOupZapXhQ/professional-headshot-of-a-creative-desi-1773218771682-c924473b.png", imageAlt: "Marcus Rodriguez"
|
|
},
|
|
{
|
|
id: "3", name: "Sarah Thompson", role: "Product Designer", testimonial: "Our clients are amazed by the visual impact. The distortion effect adds a layer of sophistication to our landing pages that sets us apart from competitors.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnBXSm0K43AohJfssOupZapXhQ/professional-headshot-of-a-product-manag-1773218771919-1fa1d4af.png", imageAlt: "Sarah Thompson"
|
|
},
|
|
{
|
|
id: "4", name: "James Mitchell", role: "Technical Director", testimonial: "The performance metrics are impressive. Zero frame drops even with complex scenes. This is production-ready technology that delivers results.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnBXSm0K43AohJfssOupZapXhQ/professional-headshot-of-a-creative-dire-1773218771785-fe8d39e4.png", imageAlt: "James Mitchell"
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
carouselMode="buttons"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
tag="Get Connected"
|
|
tagIcon={Zap}
|
|
tagAnimation="blur-reveal"
|
|
title="Ready to Dive In?"
|
|
description="Join developers and designers creating next-generation web experiences. Subscribe to our newsletter for updates on new WebGL effects and interactive technologies."
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground={false}
|
|
inputPlaceholder="Enter your email"
|
|
buttonText="Notify Me"
|
|
termsText="We respect your privacy. Unsubscribe at any time."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="Waverly"
|
|
copyrightText="© 2025 Waverly | Interactive WebGL Experiences"
|
|
socialLinks={[
|
|
{ icon: Github, href: "https://github.com", ariaLabel: "GitHub Repository" },
|
|
{ icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn Profile" },
|
|
{ icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" }
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |