Merge version_1 into main #1
441
src/app/page.tsx
441
src/app/page.tsx
@@ -17,321 +17,154 @@ import { Github, Twitter, Zap } from "lucide-react";
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="elastic-effect"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="compact"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="blurBottom"
|
||||
cardStyle="soft-shadow"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="light"
|
||||
defaultButtonVariant="elastic-effect"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="compact"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="blurBottom"
|
||||
cardStyle="soft-shadow"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Armor",
|
||||
id: "armor",
|
||||
},
|
||||
{
|
||||
name: "Specs",
|
||||
id: "specs",
|
||||
},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "faq",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="IRON MAN"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Armor", id: "armor" },
|
||||
{ name: "Specs", id: "specs" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="IRON MAN"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="IRON MAN"
|
||||
description="Step into the armor. Discover the evolution of Tony Stark's genius, the technological breakthroughs, and the legacy that defined the modern era of super-heroics."
|
||||
buttons={[
|
||||
{
|
||||
text: "Explore Armor",
|
||||
href: "#armor",
|
||||
},
|
||||
{
|
||||
text: "See Specs",
|
||||
href: "#specs",
|
||||
},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/cool-round-shaped-futuristic-sci-fi-techno-lights-perfect-futuristic-backgrounds_181624-10024.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="IRON MAN"
|
||||
description="Step into the armor. Discover the evolution of Tony Stark's genius, the technological breakthroughs, and the legacy that defined the modern era of super-heroics."
|
||||
buttons={[{ text: "Explore Armor", href: "#armor" }, { text: "See Specs", href: "#specs" }]}
|
||||
buttonAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/cool-round-shaped-futuristic-sci-fi-techno-lights-perfect-futuristic-backgrounds_181624-10024.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={true}
|
||||
tag="The Man Behind The Suit"
|
||||
title="Tony Stark: Engineering Reality"
|
||||
description="Born from unmatched intellect, Iron Man is more than just a metal suit. It is the culmination of decades of research, sacrifice, and the relentless pursuit of making the world a safer place."
|
||||
subdescription="Every armor iteration is a lesson learned, a technological milestone, and a testament to human resilience."
|
||||
icon={Zap}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/businesswoman-interacting-with-hologram_482257-127319.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={true}
|
||||
tag="The Man Behind The Suit"
|
||||
title="Tony Stark: Engineering Reality"
|
||||
description="Born from unmatched intellect, Iron Man is more than just a metal suit. It is the culmination of decades of research, sacrifice, and the relentless pursuit of making the world a safer place."
|
||||
subdescription="Every armor iteration is a lesson learned, a technological milestone, and a testament to human resilience."
|
||||
icon={Zap}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/businesswoman-interacting-with-hologram_482257-127319.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardSixteen
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
negativeCard={{
|
||||
items: [
|
||||
"Limited Battery Endurance",
|
||||
"Fragmented Systems Integration",
|
||||
"Vulnerable Exposed Materials",
|
||||
],
|
||||
}}
|
||||
positiveCard={{
|
||||
items: [
|
||||
"Arc Reactor Power Efficiency",
|
||||
"Advanced AI Integration (J.A.R.V.I.S/F.R.I.D.A.Y)",
|
||||
"Nanotechnology Molecular Rebuilding",
|
||||
],
|
||||
}}
|
||||
title="Superiority Redefined"
|
||||
description="Comparing the standard limitations of conventional weaponry vs. Stark Industries innovation."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardSixteen
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
negativeCard={{ items: ["Limited Battery Endurance", "Fragmented Systems Integration", "Vulnerable Exposed Materials"] }}
|
||||
positiveCard={{ items: ["Arc Reactor Power Efficiency", "Advanced AI Integration (J.A.R.V.I.S/F.R.I.D.A.Y)", "Nanotechnology Molecular Rebuilding"] }}
|
||||
title="Superiority Redefined"
|
||||
description="Comparing the standard limitations of conventional weaponry vs. Stark Industries innovation."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="armor" data-section="armor">
|
||||
<ProductCardTwo
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="split-description"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
brand: "Stark",
|
||||
name: "Mark III",
|
||||
price: "Classic",
|
||||
rating: 5,
|
||||
reviewCount: "100+",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/female-superhero-doing-day-day-things-modern-times_23-2150999951.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
brand: "Stark",
|
||||
name: "Mark V",
|
||||
price: "Compact",
|
||||
rating: 5,
|
||||
reviewCount: "100+",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-blue-suit-posing-white-artistic-wall-from-bricks_613910-10630.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
brand: "Stark",
|
||||
name: "Hulkbuster",
|
||||
price: "Heavy Duty",
|
||||
rating: 5,
|
||||
reviewCount: "100+",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/gladiator-helmet-with-muscular-body-shows-his-strength_613910-2489.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
brand: "Stark",
|
||||
name: "Mark XLVI",
|
||||
price: "Aerodynamic",
|
||||
rating: 5,
|
||||
reviewCount: "100+",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/super-hero-businessman-making-crazy-gesture_1368-7723.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
brand: "Stark",
|
||||
name: "Mark L Nano",
|
||||
price: "Fluidic",
|
||||
rating: 5,
|
||||
reviewCount: "100+",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-robot-hummingbird_23-2151443808.jpg",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
brand: "Stark",
|
||||
name: "Mark LXXXV",
|
||||
price: "Legacy",
|
||||
rating: 5,
|
||||
reviewCount: "100+",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-medieval-soldier-posing-studio_23-2150542188.jpg",
|
||||
},
|
||||
]}
|
||||
title="The Armor Gallery"
|
||||
description="Chronological history of major suit models."
|
||||
/>
|
||||
</div>
|
||||
<div id="armor" data-section="armor">
|
||||
<ProductCardTwo
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="split-description"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{ id: "1", brand: "Stark", name: "Mark III", price: "Classic", rating: 5, reviewCount: "100+", imageSrc: "http://img.b2bpic.net/free-photo/female-superhero-doing-day-day-things-modern-times_23-2150999951.jpg" },
|
||||
{ id: "2", brand: "Stark", name: "Mark V", price: "Compact", rating: 5, reviewCount: "100+", imageSrc: "http://img.b2bpic.net/free-photo/man-blue-suit-posing-white-artistic-wall-from-bricks_613910-10630.jpg" },
|
||||
{ id: "3", brand: "Stark", name: "Hulkbuster", price: "Heavy Duty", rating: 5, reviewCount: "100+", imageSrc: "http://img.b2bpic.net/free-photo/gladiator-helmet-with-muscular-body-shows-his-strength_613910-2489.jpg" },
|
||||
{ id: "4", brand: "Stark", name: "Mark XLVI", price: "Aerodynamic", rating: 5, reviewCount: "100+", imageSrc: "http://img.b2bpic.net/free-photo/super-hero-businessman-making-crazy-gesture_1368-7723.jpg" },
|
||||
{ id: "5", brand: "Stark", name: "Mark L Nano", price: "Fluidic", rating: 5, reviewCount: "100+", imageSrc: "http://img.b2bpic.net/free-photo/futuristic-robot-hummingbird_23-2151443808.jpg" },
|
||||
{ id: "6", brand: "Stark", name: "Mark LXXXV", price: "Legacy", rating: 5, reviewCount: "100+", imageSrc: "http://img.b2bpic.net/free-photo/side-view-medieval-soldier-posing-studio_23-2150542188.jpg" }
|
||||
]}
|
||||
title="The Armor Gallery"
|
||||
description="Chronological history of major suit models."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="specs" data-section="specs">
|
||||
<MetricCardSeven
|
||||
textboxLayout="split-actions"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "Mach 5+",
|
||||
title: "Top Flight Velocity",
|
||||
items: [
|
||||
"Atmospheric speed",
|
||||
"Supersonic capability",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "3.5 GJ",
|
||||
title: "Repulsor Output",
|
||||
items: [
|
||||
"Target engagement",
|
||||
"Defensive blast",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "100%",
|
||||
title: "System Stability",
|
||||
items: [
|
||||
"Real-time feedback",
|
||||
"AI monitoring",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Suit Capabilities"
|
||||
description="Key performance data for modern armor suites."
|
||||
/>
|
||||
</div>
|
||||
<div id="specs" data-section="specs">
|
||||
<MetricCardSeven
|
||||
animationType="depth-3d"
|
||||
textboxLayout="split-actions"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "Mach 5+", title: "Top Flight Velocity", items: ["Atmospheric speed", "Supersonic capability"] },
|
||||
{ id: "m2", value: "3.5 GJ", title: "Repulsor Output", items: ["Target engagement", "Defensive blast"] },
|
||||
{ id: "m3", value: "100%", title: "System Stability", items: ["Real-time feedback", "AI monitoring"] },
|
||||
]}
|
||||
title="Suit Capabilities"
|
||||
description="Key performance data for modern armor suites."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Marcus V.",
|
||||
handle: "@techFan",
|
||||
testimonial: "The ultimate tech inspiration.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/technician-optimizing-data-center-equipment-maximum-efficiency_482257-117650.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Elena K.",
|
||||
handle: "@innovationist",
|
||||
testimonial: "Engineering perfection in every model.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-brunette-female-wearing-working-clothes-apron-goggles-standing-workshop-against-wall-tools_613910-5878.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Julian S.",
|
||||
handle: "@starkFan",
|
||||
testimonial: "Changed my perspective on what's possible.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-person-relaxing-while-listening-music_23-2149129103.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Sarah J.",
|
||||
handle: "@techDev",
|
||||
testimonial: "The legacy continues forever.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-tattoed-male-with-stylish-haircut-beard-gray-t-shirt-standing-leaning-against-brick-wall-room-with-loft-interior_613910-197.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "David W.",
|
||||
handle: "@armorFan",
|
||||
testimonial: "Best superhero representation ever.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/expressive-woman-is-posing-house_344912-160.jpg",
|
||||
},
|
||||
]}
|
||||
title="Fan Legacy"
|
||||
description="The impact of Iron Man on the global community."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Marcus V.", handle: "@techFan", testimonial: "The ultimate tech inspiration.", imageSrc: "http://img.b2bpic.net/free-photo/technician-optimizing-data-center-equipment-maximum-efficiency_482257-117650.jpg" },
|
||||
{ id: "2", name: "Elena K.", handle: "@innovationist", testimonial: "Engineering perfection in every model.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-brunette-female-wearing-working-clothes-apron-goggles-standing-workshop-against-wall-tools_613910-5878.jpg" },
|
||||
{ id: "3", name: "Julian S.", handle: "@starkFan", testimonial: "Changed my perspective on what's possible.", imageSrc: "http://img.b2bpic.net/free-photo/young-person-relaxing-while-listening-music_23-2149129103.jpg" },
|
||||
{ id: "4", name: "Sarah J.", handle: "@techDev", testimonial: "The legacy continues forever.", imageSrc: "http://img.b2bpic.net/free-photo/handsome-tattoed-male-with-stylish-haircut-beard-gray-t-shirt-standing-leaning-against-brick-wall-room-with-loft-interior_613910-197.jpg" },
|
||||
{ id: "5", name: "David W.", handle: "@armorFan", testimonial: "Best superhero representation ever.", imageSrc: "http://img.b2bpic.net/free-photo/expressive-woman-is-posing-house_344912-160.jpg" },
|
||||
]}
|
||||
title="Fan Legacy"
|
||||
description="The impact of Iron Man on the global community."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "How does the Arc Reactor work?",
|
||||
content: "Cold fusion and advanced energy harvesting technology.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Is nanotech available?",
|
||||
content: "Nanotech is exclusive to Mark L and beyond.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Can anyone fly the suit?",
|
||||
content: "Strict neural link verification is mandatory.",
|
||||
},
|
||||
]}
|
||||
title="Common Inquiries"
|
||||
description="Answers to your questions regarding Stark tech."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "q1", title: "How does the Arc Reactor work?", content: "Cold fusion and advanced energy harvesting technology." },
|
||||
{ id: "q2", title: "Is nanotech available?", content: "Nanotech is exclusive to Mark L and beyond." },
|
||||
{ id: "q3", title: "Can anyone fly the suit?", content: "Strict neural link verification is mandatory." },
|
||||
]}
|
||||
title="Common Inquiries"
|
||||
description="Answers to your questions regarding Stark tech."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
tag="Stay Updated"
|
||||
title="Join the Stark Network"
|
||||
description="Receive updates on the latest engineering reports and armor blueprints."
|
||||
buttons={[
|
||||
{
|
||||
text: "Subscribe Now",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
tag="Stay Updated"
|
||||
title="Join the Stark Network"
|
||||
description="Receive updates on the latest engineering reports and armor blueprints."
|
||||
buttons={[{ text: "Subscribe Now", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="IRON MAN"
|
||||
copyrightText="© 2025 Stark Industries | Fan Portal"
|
||||
socialLinks={[
|
||||
{
|
||||
icon: Twitter,
|
||||
href: "#",
|
||||
ariaLabel: "Twitter",
|
||||
},
|
||||
{
|
||||
icon: Github,
|
||||
href: "#",
|
||||
ariaLabel: "Github",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="IRON MAN"
|
||||
copyrightText="© 2025 Stark Industries | Fan Portal"
|
||||
socialLinks={[
|
||||
{ icon: Twitter, href: "#", ariaLabel: "Twitter" },
|
||||
{ icon: Github, href: "#", ariaLabel: "Github" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user