Update src/pages/HomePage.tsx
This commit is contained in:
@@ -1,7 +1,6 @@
|
||||
import ContactCta from '@/components/sections/contact/ContactCta';
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import FeaturesBentoOriginal from '@/components/sections/features/FeaturesBento';
|
||||
const FeaturesBento = FeaturesBentoOriginal as any;
|
||||
import FeaturesBento from '@/components/sections/features/FeaturesBento';
|
||||
import HeroBrand from '@/components/sections/hero/HeroBrand';
|
||||
import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
|
||||
import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
|
||||
@@ -13,237 +12,129 @@ import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<>
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroBrand
|
||||
brand="Reality Breaks Here"
|
||||
description="Scroll into a dimension where physics surrenders and imagination commands. Prepare for visual chaos that rewires your expectations of what websites can be."
|
||||
primaryButton={{
|
||||
text: "Enter the Madness",
|
||||
href: "#features",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Explore Orbit",
|
||||
href: "#metrics",
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/human-ring-stronghold-outer-planet-science-fiction-illustration_456031-76.jpg?_wi=1"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
brand="Reality Breaks Here"
|
||||
description="Scroll into a dimension where physics surrenders and imagination commands. Prepare for visual chaos that rewires your expectations of what websites can be."
|
||||
primaryButton={{
|
||||
text: "Enter the Madness", href: "#features"}}
|
||||
secondaryButton={{
|
||||
text: "Explore Orbit", href: "#metrics"}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/human-ring-stronghold-outer-planet-science-fiction-illustration_456031-76.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<SectionErrorBoundary name="features">
|
||||
<div id="features" data-section="features">
|
||||
<SectionErrorBoundary name="features">
|
||||
<FeaturesBento
|
||||
tag="Nexus Engine"
|
||||
title="Sentient Orbs"
|
||||
description="Floating consciousness that reshapes the browser environment in real-time."
|
||||
features={[
|
||||
{
|
||||
title: "Gravity Inversion",
|
||||
description: "Objects defy local physics, responding to scroll acceleration.",
|
||||
bentoComponent: "orbiting-icons",
|
||||
centerIcon: Database,
|
||||
orbitIcons: [
|
||||
"Circle",
|
||||
"Square",
|
||||
"Triangle",
|
||||
"Hexagon",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-abstract-black-white_23-2150853583.jpg",
|
||||
imageAlt: "3d abstract shapes dark",
|
||||
},
|
||||
{
|
||||
title: "Fractal Expansion",
|
||||
description: "Particles morph into complex mathematical structures upon contact.",
|
||||
bentoComponent: "media-stack",
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/human-ring-stronghold-outer-planet-science-fiction-illustration_456031-76.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cosmic-background-with-colorful-neon-laser-lights-perfect-digital-wallpaper_181624-23743.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/aesthetic-background-with-abstract-sunset-projector-lamp_53876-103796.jpg",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-portrait-with-blue-lights-visual-effects_23-2149419473.jpg?_wi=1",
|
||||
imageAlt: "3d abstract shapes dark",
|
||||
},
|
||||
{
|
||||
title: "Dimensional Sync",
|
||||
description: "Text layers shift across impossible planes of reality.",
|
||||
bentoComponent: "icon-text-marquee",
|
||||
centerIcon: Layers,
|
||||
marqueeTexts: [
|
||||
"Reality Breaking",
|
||||
"Dimension Shift",
|
||||
"Entropy Reversal",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiley-girl-with-pink-hair-hoodie_23-2148629699.jpg?_wi=1",
|
||||
imageAlt: "3d abstract shapes dark",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Nexus Engine"
|
||||
title="Sentient Orbs"
|
||||
description="Floating consciousness that reshapes the browser environment in real-time."
|
||||
features={[
|
||||
{
|
||||
title: "Gravity Inversion", description: "Objects defy local physics, responding to scroll acceleration.", bentoComponent: "orbiting-icons", centerIcon: "Database", orbitIcons: ["Circle", "Square", "Triangle", "Hexagon"]
|
||||
},
|
||||
{
|
||||
title: "Fractal Expansion", description: "Particles morph into complex mathematical structures upon contact.", bentoComponent: "media-stack", mediaItems: [
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/human-ring-stronghold-outer-planet-science-fiction-illustration_456031-76.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/cosmic-background-with-colorful-neon-laser-lights-perfect-digital-wallpaper_181624-23743.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/aesthetic-background-with-abstract-sunset-projector-lamp_53876-103796.jpg" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Dimensional Sync", description: "Text layers shift across impossible planes of reality.", bentoComponent: "icon-text-marquee", centerIcon: "Layers", marqueeTexts: ["Reality Breaking", "Dimension Shift", "Entropy Reversal"]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<SectionErrorBoundary name="metrics">
|
||||
<div id="metrics" data-section="metrics">
|
||||
<SectionErrorBoundary name="metrics">
|
||||
<MetricsIconCards
|
||||
tag="Data Flow"
|
||||
title="Ecosystem Status"
|
||||
description="Real-time statistics on orb interaction and dimensional drift."
|
||||
metrics={[
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Orbs Active",
|
||||
value: "12,402",
|
||||
},
|
||||
{
|
||||
icon: RotateCw,
|
||||
title: "Gravity Cycles",
|
||||
value: "89.4%",
|
||||
},
|
||||
{
|
||||
icon: Globe2,
|
||||
title: "Fractal Depth",
|
||||
value: "∞",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Data Flow"
|
||||
title="Ecosystem Status"
|
||||
description="Real-time statistics on orb interaction and dimensional drift."
|
||||
metrics={[
|
||||
{ icon: "Zap", title: "Orbs Active", value: "12,402" },
|
||||
{ icon: "RotateCw", title: "Gravity Cycles", value: "89.4%" },
|
||||
{ icon: "Globe2", title: "Fractal Depth", value: "∞" }
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<SectionErrorBoundary name="team">
|
||||
<div id="team" data-section="team">
|
||||
<SectionErrorBoundary name="team">
|
||||
<TeamGlassCards
|
||||
tag="The Architects"
|
||||
title="Chaos Designers"
|
||||
description="The minds behind the breakdown of digital boundaries."
|
||||
members={[
|
||||
{
|
||||
name: "Alex V.",
|
||||
role: "Head of Physics",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-portrait-with-blue-lights-visual-effects_23-2149419473.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
name: "Sarah K.",
|
||||
role: "Fractal Artist",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiley-girl-with-pink-hair-hoodie_23-2148629699.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
name: "Jace D.",
|
||||
role: "Orb Intelligence",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-keeps-lips-rounded-has-short-haircut-autumn-foliage-hair-wears-green-turtleneck-poses-against-purple-background_273609-33812.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="The Architects"
|
||||
title="Chaos Designers"
|
||||
description="The minds behind the breakdown of digital boundaries."
|
||||
members={[
|
||||
{ name: "Alex V.", role: "Head of Physics", imageSrc: "http://img.b2bpic.net/free-photo/man-portrait-with-blue-lights-visual-effects_23-2149419473.jpg" },
|
||||
{ name: "Sarah K.", role: "Fractal Artist", imageSrc: "http://img.b2bpic.net/free-photo/smiley-girl-with-pink-hair-hoodie_23-2148629699.jpg" },
|
||||
{ name: "Jace D.", role: "Orb Intelligence", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-keeps-lips-rounded-has-short-haircut-autumn-foliage-hair-wears-green-turtleneck-poses-against-purple-background_273609-33812.jpg" }
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="proof" data-section="proof">
|
||||
<SectionErrorBoundary name="proof">
|
||||
<div id="proof" data-section="proof">
|
||||
<SectionErrorBoundary name="proof">
|
||||
<SocialProofMarquee
|
||||
tag="Ecosystem Partners"
|
||||
title="Synced Dimensions"
|
||||
description="Collaborators building the next reality."
|
||||
names={[
|
||||
"Nebula",
|
||||
"VoidSync",
|
||||
"Quantix",
|
||||
"GravityLabs",
|
||||
"FractalCore",
|
||||
"Aether",
|
||||
"OmniMind",
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Ecosystem Partners"
|
||||
title="Synced Dimensions"
|
||||
description="Collaborators building the next reality."
|
||||
names={["Nebula", "VoidSync", "Quantix", "GravityLabs", "FractalCore", "Aether", "OmniMind"]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialQuoteCards
|
||||
tag="User Accounts"
|
||||
title="Voices from the Void"
|
||||
description="What users experience after reality breaks."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Lila V.",
|
||||
role: "Design Lead",
|
||||
quote: "I saw reality bend right in front of my eyes. Absolute insanity.",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/technology-concept-background_23-2148121476.jpg",
|
||||
},
|
||||
{
|
||||
name: "Kaito R.",
|
||||
role: "Developer",
|
||||
quote: "The physics engine is terrifyingly good. My browser never felt this alive.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-shapes-glowing-with-bright-holographic-colors_23-2151037266.jpg",
|
||||
},
|
||||
{
|
||||
name: "Elena S.",
|
||||
role: "Creative",
|
||||
quote: "My screen is currently floating. 10/10 would break again.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/arrow-with-bright-neon-colors_23-2151204922.jpg",
|
||||
},
|
||||
{
|
||||
name: "Mark D.",
|
||||
role: "Founder",
|
||||
quote: "This isn't a website. It's a hallucination.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/illustration-circle-with-abstract-neon-light-effects-great-futuristic-background_181624-32778.jpg",
|
||||
},
|
||||
{
|
||||
name: "Chloe B.",
|
||||
role: "Explorer",
|
||||
quote: "Beyond imagination. The fractals actually breathe.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-time-machines-design_23-2151599363.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="User Accounts"
|
||||
title="Voices from the Void"
|
||||
description="What users experience after reality breaks."
|
||||
testimonials={[
|
||||
{ name: "Lila V.", role: "Design Lead", quote: "I saw reality bend right in front of my eyes. Absolute insanity.", imageSrc: "http://img.b2bpic.net/free-vector/technology-concept-background_23-2148121476.jpg" },
|
||||
{ name: "Kaito R.", role: "Developer", quote: "The physics engine is terrifyingly good. My browser never felt this alive.", imageSrc: "http://img.b2bpic.net/free-photo/3d-shapes-glowing-with-bright-holographic-colors_23-2151037266.jpg" },
|
||||
{ name: "Elena S.", role: "Creative", quote: "My screen is currently floating. 10/10 would break again.", imageSrc: "http://img.b2bpic.net/free-photo/arrow-with-bright-neon-colors_23-2151204922.jpg" },
|
||||
{ name: "Mark D.", role: "Founder", quote: "This isn't a website. It's a hallucination.", imageSrc: "http://img.b2bpic.net/free-photo/illustration-circle-with-abstract-neon-light-effects-great-futuristic-background_181624-32778.jpg" },
|
||||
{ name: "Chloe B.", role: "Explorer", quote: "Beyond imagination. The fractals actually breathe.", imageSrc: "http://img.b2bpic.net/free-photo/futuristic-time-machines-design_23-2151599363.jpg" }
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqSplitMedia
|
||||
tag="Inquiry"
|
||||
title="Breaking Knowledge"
|
||||
description="Understanding the chaos behind the interface."
|
||||
items={[
|
||||
{
|
||||
question: "Why does the UI rotate?",
|
||||
answer: "The UI responds to inertial forces from your device.",
|
||||
},
|
||||
{
|
||||
question: "Can I crash it?",
|
||||
answer: "The orbs are self-healing. Break them as much as you like.",
|
||||
},
|
||||
{
|
||||
question: "Is this AI real?",
|
||||
answer: "The orbs are sentient; the AI is the catalyst for their evolution.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/digital-tunnel-abstract_23-2151977844.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Inquiry"
|
||||
title="Breaking Knowledge"
|
||||
description="Understanding the chaos behind the interface."
|
||||
items={[
|
||||
{ question: "Why does the UI rotate?", answer: "The UI responds to inertial forces from your device." },
|
||||
{ question: "Can I crash it?", answer: "The orbs are self-healing. Break them as much as you like." },
|
||||
{ question: "Is this AI real?", answer: "The orbs are sentient; the AI is the catalyst for their evolution." }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/digital-tunnel-abstract_23-2151977844.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<ContactCta
|
||||
tag="Break Reality"
|
||||
text="Are you ready to join the collective and rewire the web?"
|
||||
primaryButton={{
|
||||
text: "Contact the Collective",
|
||||
href: "#",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "View Docs",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Break Reality"
|
||||
text="Are you ready to join the collective and rewire the web?"
|
||||
primaryButton={{ text: "Contact the Collective", href: "#" }}
|
||||
secondaryButton={{ text: "View Docs", href: "#" }}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user