Update src/app/page.tsx
This commit is contained in:
227
src/app/page.tsx
227
src/app/page.tsx
@@ -31,22 +31,10 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Process",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Tech",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Process", id: "about" },
|
||||
{ name: "Tech", id: "features" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="MORPH"
|
||||
/>
|
||||
@@ -54,44 +42,18 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
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",
|
||||
},
|
||||
{ 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",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-robot-hummingbird_23-2151443838.jpg",
|
||||
imageAlt: "Futuristic robot hummingbird",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fantasy-style-half-whale-half-robot_23-2151603070.jpg",
|
||||
imageAlt: "Fantasy style half whale half-robot",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-fantasy-portrait-with-costume_23-2151159091.jpg",
|
||||
imageAlt: "Futuristic fantasy portrait with costume",
|
||||
},
|
||||
{ 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}
|
||||
@@ -117,21 +79,9 @@ export default function LandingPage() {
|
||||
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.",
|
||||
},
|
||||
{ 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"
|
||||
@@ -144,27 +94,9 @@ export default function LandingPage() {
|
||||
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",
|
||||
},
|
||||
{ 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."
|
||||
@@ -176,46 +108,11 @@ export default function LandingPage() {
|
||||
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",
|
||||
},
|
||||
{ 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."
|
||||
@@ -226,21 +123,9 @@ export default function LandingPage() {
|
||||
<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.",
|
||||
},
|
||||
{ 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"
|
||||
@@ -251,36 +136,22 @@ export default function LandingPage() {
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"Cybernetik Systems",
|
||||
"NeuralLink Lab",
|
||||
"Void Dynamics",
|
||||
"Neon Industries",
|
||||
"DataFlux Corp",
|
||||
"Synthware AI",
|
||||
]}
|
||||
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",
|
||||
}}
|
||||
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: "#",
|
||||
},
|
||||
{ text: "Contact Support", href: "#" },
|
||||
{ text: "Start Design", href: "#" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -289,45 +160,9 @@ export default function LandingPage() {
|
||||
<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: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ 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>
|
||||
|
||||
Reference in New Issue
Block a user