Merge version_1 into main
Merge version_1 into main
This commit was merged in pull request #3.
This commit is contained in:
278
src/app/page.tsx
278
src/app/page.tsx
@@ -2,6 +2,7 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import { Brain } from "lucide-react";
|
||||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||||
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
||||
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
|
||||
@@ -19,154 +20,157 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="smallMedium"
|
||||
sizing="mediumLarge"
|
||||
background="blurBottom"
|
||||
cardStyle="soft-shadow"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="extrabold"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Process", id: "about" },
|
||||
{ name: "Tech", id: "features" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="MORPH"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Process", id: "about" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Metrics", id: "metrics" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="MORPH"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{ variant: "radial-gradient" }}
|
||||
title="The Evolution of Digital Consciousness"
|
||||
description="Experience the ultimate fusion of flesh and machine. A high-fidelity journey through the boundaries of human identity."
|
||||
tag="Metamorphosis Experience"
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{ text: "Begin Transformation", href: "#about" },
|
||||
{ text: "Learn More", href: "#features" },
|
||||
]}
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/futuristic-character-carnival-portrait_23-2151040452.jpg", imageAlt: "Human to Robot Morph" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/portrait-fantasy-male-creature-from-sea_23-2151609060.jpg", imageAlt: "Human to Robot Morph Alternate" }
|
||||
]}
|
||||
mediaAnimation="blur-reveal"
|
||||
rating={5}
|
||||
ratingText="Trusted by 10,000+ tech visionaries"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{ variant: "radial-gradient" }}
|
||||
title="The Evolution of Digital Consciousness"
|
||||
description="Experience the ultimate fusion of flesh and machine. A high-fidelity journey through the boundaries of human identity."
|
||||
tag="Metamorphosis Experience"
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{ text: "Begin Transformation", href: "#about" },
|
||||
{ text: "Learn More", href: "#features" },
|
||||
]}
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/futuristic-character-carnival-portrait_23-2151040452.jpg", imageAlt: "Human to Robot Morph" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/portrait-fantasy-male-creature-from-sea_23-2151609060.jpg", imageAlt: "Human to Robot Morph Alternate" }
|
||||
]}
|
||||
mediaAnimation="blur-reveal"
|
||||
rating={5}
|
||||
ratingText="Trusted by 10,000+ tech visionaries"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={false}
|
||||
tag="The Process"
|
||||
title="Redefining Biological Limits"
|
||||
description="Our transformation engine utilizes real-time morphing algorithms to bridge the gap between organic matter and synthetic hardware."
|
||||
subdescription="Every pixel is procedurally generated to ensure a seamless transition from human skin to carbon-fiber plating."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/architectural-blueprints_1359-483.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
videoSrc=""
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={false}
|
||||
tag="The Process"
|
||||
title="Redefining Biological Limits"
|
||||
description="Our transformation engine utilizes real-time morphing algorithms to bridge the gap between organic matter and synthetic hardware."
|
||||
subdescription="Every pixel is procedurally generated to ensure a seamless transition from human skin to carbon-fiber plating."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/architectural-blueprints_1359-483.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
icon={Brain}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyOne
|
||||
useInvertedBackground={false}
|
||||
title="Advanced Metamorphosis Features"
|
||||
description="Leveraging state-of-the-art WebGL technology to push your visual perception beyond standard reality."
|
||||
accordionItems={[
|
||||
{ id: "f1", title: "Neural Mesh Morphing", content: "Real-time vertex deformation between distinct meshes." },
|
||||
{ id: "f2", title: "Volumetric Lighting", content: "Dynamic light interaction with floating data particles." },
|
||||
{ id: "f3", title: "Interactive Glitch Effects", content: "Procedural noise layers that respond to user scroll." },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/3d-network-connections-background-with-low-poly-plexus-design_1048-12346.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyOne
|
||||
useInvertedBackground={false}
|
||||
title="Advanced Metamorphosis Features"
|
||||
description="Leveraging state-of-the-art WebGL technology to push your visual perception beyond standard reality."
|
||||
accordionItems={[
|
||||
{ id: "f1", title: "Neural Mesh Morphing", content: "Real-time vertex deformation between distinct meshes." },
|
||||
{ id: "f2", title: "Volumetric Lighting", content: "Dynamic light interaction with floating data particles." },
|
||||
{ id: "f3", title: "Interactive Glitch Effects", content: "Procedural noise layers that respond to user scroll." },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/3d-network-connections-background-with-low-poly-plexus-design_1048-12346.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "120 FPS", title: "Performance", description: "Seamless rendering cycle.", imageSrc: "http://img.b2bpic.net/free-photo/half-rhino-half-robot-creature_23-2151730773.jpg" },
|
||||
{ id: "m2", value: "8M Polys", title: "Geometry Complexity", description: "Highly detailed surface meshes.", imageSrc: "http://img.b2bpic.net/free-photo/falling-binary-code_23-2152020924.jpg" },
|
||||
{ id: "m3", value: "0.1ms", title: "Latency", description: "Instant response times.", imageSrc: "http://img.b2bpic.net/free-photo/future-visions-business-technology-concept_23-2151893460.jpg" },
|
||||
]}
|
||||
title="Tech Specifications"
|
||||
description="The raw power driving our 3D transformation engine."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "120 FPS", title: "Performance", description: "Seamless rendering cycle.", imageSrc: "http://img.b2bpic.net/free-photo/half-rhino-half-robot-creature_23-2151730773.jpg" },
|
||||
{ id: "m2", value: "8M Polys", title: "Geometry Complexity", description: "Highly detailed surface meshes.", imageSrc: "http://img.b2bpic.net/free-photo/falling-binary-code_23-2152020924.jpg" },
|
||||
{ id: "m3", value: "0.1ms", title: "Latency", description: "Instant response times.", imageSrc: "http://img.b2bpic.net/free-photo/future-visions-business-technology-concept_23-2151893460.jpg" },
|
||||
]}
|
||||
title="Tech Specifications"
|
||||
description="The raw power driving our 3D transformation engine."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "t1", title: "Mind Blowing", quote: "The transition quality is unparalleled.", name: "Alice Thorne", role: "Lead Architect", imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-fluorescent-make-up-person-face_23-2148410083.jpg" },
|
||||
{ id: "t2", title: "Future of Web", quote: "Truly a glimpse into the next generation.", name: "Bob Chen", role: "Creative Director", imageSrc: "http://img.b2bpic.net/free-photo/futuristic-fantasy-scene-with-abstract-costume_23-2151159143.jpg" },
|
||||
{ id: "t3", title: "Seamless", quote: "Scrolling has never felt so cinematic.", name: "Charlie Day", role: "Web Engineer", imageSrc: "http://img.b2bpic.net/free-photo/fantastic-aliens-with-glowing-neon-colours_23-2151648379.jpg" },
|
||||
{ id: "t4", title: "Incredible Detail", quote: "The transformation feels eerily hyper-realistic.", name: "Diana Ross", role: "UX Consultant", imageSrc: "http://img.b2bpic.net/free-photo/shoot-fantastic-alien_23-2151648314.jpg" },
|
||||
{ id: "t5", title: "Must Experience", quote: "A masterclass in React Three Fiber.", name: "Edward Norton", role: "Tech Investor", imageSrc: "http://img.b2bpic.net/free-photo/shoot-fantastic-alien_23-2151648262.jpg" },
|
||||
]}
|
||||
title="Visionary Feedback"
|
||||
description="What our users think about the metamorphosis journey."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "t1", title: "Mind Blowing", quote: "The transition quality is unparalleled.", name: "Alice Thorne", role: "Lead Architect", imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-fluorescent-make-up-person-face_23-2148410083.jpg" },
|
||||
{ id: "t2", title: "Future of Web", quote: "Truly a glimpse into the next generation.", name: "Bob Chen", role: "Creative Director", imageSrc: "http://img.b2bpic.net/free-photo/futuristic-fantasy-scene-with-abstract-costume_23-2151159143.jpg" },
|
||||
{ id: "t3", title: "Seamless", quote: "Scrolling has never felt so cinematic.", name: "Charlie Day", role: "Web Engineer", imageSrc: "http://img.b2bpic.net/free-photo/fantastic-aliens-with-glowing-neon-colours_23-2151648379.jpg" },
|
||||
{ id: "t4", title: "Incredible Detail", quote: "The transformation feels eerily hyper-realistic.", name: "Diana Ross", role: "UX Consultant", imageSrc: "http://img.b2bpic.net/free-photo/shoot-fantastic-alien_23-2151648314.jpg" },
|
||||
{ id: "t5", title: "Must Experience", quote: "A masterclass in React Three Fiber.", name: "Edward Norton", role: "Tech Investor", imageSrc: "http://img.b2bpic.net/free-photo/shoot-fantastic-alien_23-2151648262.jpg" },
|
||||
]}
|
||||
title="Visionary Feedback"
|
||||
description="What our users think about the metamorphosis journey."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "q1", title: "Is WebGL required?", content: "Yes, we require hardware acceleration for optimal performance." },
|
||||
{ id: "q2", title: "Does it work on mobile?", content: "We support high-end mobile devices with recent GPU support." },
|
||||
{ id: "q3", title: "Can I customize the mesh?", content: "Our API allows loading custom glTF/glb models for transformation." },
|
||||
]}
|
||||
sideTitle="Technical Questions"
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "q1", title: "Is WebGL required?", content: "Yes, we require hardware acceleration for optimal performance." },
|
||||
{ id: "q2", title: "Does it work on mobile?", content: "We support high-end mobile devices with recent GPU support." },
|
||||
{ id: "q3", title: "Can I customize the mesh?", content: "Our API allows loading custom glTF/glb models for transformation." },
|
||||
]}
|
||||
sideTitle="Technical Questions"
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="socialProof" data-section="socialProof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={["Cybernetik Systems", "NeuralLink Lab", "Void Dynamics", "Neon Industries", "DataFlux Corp", "Synthware AI"]}
|
||||
title="Industry Partners"
|
||||
description="Our trusted partners in digital evolution."
|
||||
/>
|
||||
</div>
|
||||
<div id="socialProof" data-section="socialProof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={["Cybernetik Systems", "NeuralLink Lab", "Void Dynamics", "Neon Industries", "DataFlux Corp", "Synthware AI"]}
|
||||
title="Industry Partners"
|
||||
description="Our trusted partners in digital evolution."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
tag="Get Started"
|
||||
title="Begin Your Morph"
|
||||
description="Ready to bring your own 3D vision to life? Let's discuss your project."
|
||||
buttons={[
|
||||
{ text: "Contact Support", href: "#" },
|
||||
{ text: "Start Design", href: "#" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
tag="Get Started"
|
||||
title="Begin Your Morph"
|
||||
description="Ready to bring your own 3D vision to life? Let's discuss your project."
|
||||
buttons={[
|
||||
{ text: "Contact Support", href: "#" },
|
||||
{ text: "Start Design", href: "#" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="MORPH"
|
||||
columns={[
|
||||
{ title: "Platform", items: [{ label: "About", href: "#about" }, { label: "Features", href: "#features" }] },
|
||||
{ title: "Resources", items: [{ label: "API Docs", href: "#" }, { label: "Support", href: "#" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="MORPH"
|
||||
columns={[
|
||||
{ title: "Platform", items: [{ label: "About", href: "#about" }, { label: "Features", href: "#features" }] },
|
||||
{ title: "Resources", items: [{ label: "API Docs", href: "#" }, { label: "Support", href: "#" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user