Merge version_1 into main #2
486
src/app/page.tsx
486
src/app/page.tsx
@@ -9,342 +9,184 @@ import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
import { AlertCircle, Award, Cloud, Compass, Globe, Moon, Power, Rocket, Shield, Star, Sun, Target, Zap } from "lucide-react";
|
||||
import { AlertCircle, Anchor, Award, Cloud, Compass, Cpu, Globe, Infinity, Moon, Power, Rocket, Shield, Star, Sun, Target, Zap } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="compact"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="noise"
|
||||
cardStyle="layered-gradient"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="bold"
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="compact"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="noise"
|
||||
cardStyle="layered-gradient"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Features",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="FUTURE"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="FUTURE"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
background={{
|
||||
variant: "glowing-orb",
|
||||
}}
|
||||
logoText="Step Into the Future"
|
||||
description="Experience the next dimension of digital interaction. Bold, immersive, and built for tomorrow."
|
||||
buttons={[
|
||||
{
|
||||
text: "Explore Now",
|
||||
href: "#features",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/shoot-fantastic-alien_23-2151648314.jpg?_wi=1"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
background={{ variant: "glowing-orb" }}
|
||||
logoText="Step Into the Future"
|
||||
description="Experience the next dimension of digital interaction. Bold, immersive, and built for tomorrow."
|
||||
buttons={[{ text: "Explore Now", href: "#features" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/shoot-fantastic-alien_23-2151648314.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={true}
|
||||
title="Digital Universe Stats"
|
||||
metrics={[
|
||||
{
|
||||
icon: Zap,
|
||||
label: "Innovations",
|
||||
value: "150+",
|
||||
},
|
||||
{
|
||||
icon: Globe,
|
||||
label: "Users",
|
||||
value: "2M",
|
||||
},
|
||||
{
|
||||
icon: Award,
|
||||
label: "Awards",
|
||||
value: "45",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={true}
|
||||
title="Digital Universe Stats"
|
||||
metrics={[
|
||||
{ icon: Zap, label: "Innovations", value: "150+" },
|
||||
{ icon: Globe, label: "Users", value: "2M" },
|
||||
{ icon: Award, label: "Awards", value: "45" }
|
||||
]}
|
||||
metricsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBento
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
bentoComponent: "3d-stack-cards",
|
||||
title: "Neural Link",
|
||||
description: "Seamless brain-machine connectivity for real-time data flow.",
|
||||
items: [
|
||||
{
|
||||
icon: Cpu,
|
||||
title: "Ultra Speed",
|
||||
subtitle: "Low Latency",
|
||||
detail: "Instant feedback",
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Security",
|
||||
subtitle: "Encrypted",
|
||||
detail: "Quantum-safe",
|
||||
},
|
||||
{
|
||||
icon: Infinity,
|
||||
title: "Scaling",
|
||||
subtitle: "Infinite",
|
||||
detail: "Adaptive load",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/wifi-signal-communication-technology-vector-gold-icon-with-bar-chart_53876-112189.jpg",
|
||||
imageAlt: "data analytics icon neon",
|
||||
},
|
||||
{
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Rocket,
|
||||
title: "Quantum Drive",
|
||||
description: "Propel your business into the new era with adaptive propulsion systems.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/shoot-fantastic-alien_23-2151648314.jpg?_wi=2",
|
||||
imageAlt: "data analytics icon neon",
|
||||
},
|
||||
{
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Globe,
|
||||
title: "Universal Sync",
|
||||
description: "Synchronize your global operations with automated cross-platform integration.",
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/novacore-studio-business-card-design-template-template_23-2152009505.jpg?_wi=1",
|
||||
imageAlt: "data analytics icon neon",
|
||||
},
|
||||
]}
|
||||
title="Core Modules"
|
||||
description="Unlock futuristic power modes and seamless performance across all your digital assets."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBento
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
bentoComponent: "3d-stack-cards", title: "Neural Link", description: "Seamless brain-machine connectivity for real-time data flow.", items: [
|
||||
{ icon: Cpu, title: "Ultra Speed", subtitle: "Low Latency", detail: "Instant feedback" },
|
||||
{ icon: Shield, title: "Security", subtitle: "Encrypted", detail: "Quantum-safe" },
|
||||
{ icon: Infinity, title: "Scaling", subtitle: "Infinite", detail: "Adaptive load" }
|
||||
]
|
||||
},
|
||||
{
|
||||
bentoComponent: "reveal-icon", icon: Rocket,
|
||||
title: "Quantum Drive", description: "Propel your business into the new era with adaptive propulsion systems."
|
||||
},
|
||||
{
|
||||
bentoComponent: "reveal-icon", icon: Globe,
|
||||
title: "Universal Sync", description: "Synchronize your global operations with automated cross-platform integration."
|
||||
}
|
||||
]}
|
||||
title="Core Modules"
|
||||
description="Unlock futuristic power modes and seamless performance across all your digital assets."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="gallery" data-section="gallery">
|
||||
<ProductCardOne
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Nebula Core",
|
||||
price: "NFT",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-techno-low-poly-background-with-dark-connecting-dots-lines_1048-6127.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Interface Data",
|
||||
price: "NFT",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-99389.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Metallic Frame",
|
||||
price: "NFT",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/neon-c-colorolor-ribbons-illustration_211682-200.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Energy Node",
|
||||
price: "NFT",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-science-fiction-abstract-pixelated-background-with-blue-yellow-lights_181624-26306.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Structure X",
|
||||
price: "NFT",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-geometric-wavy-folds-background_1048-16954.jpg",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "Sync Network",
|
||||
price: "NFT",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-futuristic-with-low-poly-design-with-connecting-lines-dots_1048-12728.jpg",
|
||||
},
|
||||
]}
|
||||
title="Cinematic Visuals"
|
||||
description="See the digital universe in high fidelity. Every element crafted for immersion."
|
||||
/>
|
||||
</div>
|
||||
<div id="gallery" data-section="gallery">
|
||||
<ProductCardOne
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{ id: "1", name: "Nebula Core", price: "NFT", imageSrc: "http://img.b2bpic.net/free-photo/abstract-techno-low-poly-background-with-dark-connecting-dots-lines_1048-6127.jpg" },
|
||||
{ id: "2", name: "Interface Data", price: "NFT", imageSrc: "http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-99389.jpg" },
|
||||
{ id: "3", name: "Metallic Frame", price: "NFT", imageSrc: "http://img.b2bpic.net/free-photo/neon-c-colorolor-ribbons-illustration_211682-200.jpg" },
|
||||
{ id: "4", name: "Energy Node", price: "NFT", imageSrc: "http://img.b2bpic.net/free-photo/futuristic-science-fiction-abstract-pixelated-background-with-blue-yellow-lights_181624-26306.jpg" },
|
||||
{ id: "5", name: "Structure X", price: "NFT", imageSrc: "http://img.b2bpic.net/free-photo/abstract-geometric-wavy-folds-background_1048-16954.jpg" },
|
||||
{ id: "6", name: "Sync Network", price: "NFT", imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-futuristic-with-low-poly-design-with-connecting-lines-dots_1048-12728.jpg" }
|
||||
]}
|
||||
title="Cinematic Visuals"
|
||||
description="See the digital universe in high fidelity. Every element crafted for immersion."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="timeline" data-section="timeline">
|
||||
<FeatureBento
|
||||
animationType="slide-up"
|
||||
textboxLayout="split-description"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
bentoComponent: "timeline",
|
||||
heading: "Development Phases",
|
||||
subheading: "Timeline of progression",
|
||||
items: [
|
||||
{
|
||||
label: "V1 Origin",
|
||||
detail: "Prototype inception",
|
||||
},
|
||||
{
|
||||
label: "V2 Expansion",
|
||||
detail: "Global market launch",
|
||||
},
|
||||
{
|
||||
label: "V3 Quantum",
|
||||
detail: "3D interface integration",
|
||||
},
|
||||
],
|
||||
completedLabel: "Active",
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/novacore-studio-business-card-design-template-template_23-2152009505.jpg?_wi=2",
|
||||
imageAlt: "futuristic card design tech",
|
||||
},
|
||||
]}
|
||||
title="Our Journey"
|
||||
description="Charting the evolution from digital startup to futuristic pioneer."
|
||||
/>
|
||||
</div>
|
||||
<div id="timeline" data-section="timeline">
|
||||
<FeatureBento
|
||||
animationType="slide-up"
|
||||
textboxLayout="split-description"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
bentoComponent: "timeline", heading: "Development Phases", subheading: "Timeline of progression", items: [
|
||||
{ label: "V1 Origin", detail: "Prototype inception" },
|
||||
{ label: "V2 Expansion", detail: "Global market launch" },
|
||||
{ label: "V3 Quantum", detail: "3D interface integration" }
|
||||
],
|
||||
completedLabel: "Active"
|
||||
}
|
||||
]}
|
||||
title="Our Journey"
|
||||
description="Charting the evolution from digital startup to futuristic pioneer."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="interactive" data-section="interactive">
|
||||
<FeatureBento
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
bentoComponent: "phone",
|
||||
statusIcon: Power,
|
||||
alertIcon: AlertCircle,
|
||||
alertTitle: "Energy Build Up",
|
||||
alertMessage: "Ready for transformation",
|
||||
apps: [
|
||||
{
|
||||
name: "Mode 1",
|
||||
icon: Sun,
|
||||
},
|
||||
{
|
||||
name: "Mode 2",
|
||||
icon: Moon,
|
||||
},
|
||||
{
|
||||
name: "Mode 3",
|
||||
icon: Star,
|
||||
},
|
||||
{
|
||||
name: "Mode 4",
|
||||
icon: Zap,
|
||||
},
|
||||
{
|
||||
name: "Mode 5",
|
||||
icon: Cloud,
|
||||
},
|
||||
{
|
||||
name: "Mode 6",
|
||||
icon: Compass,
|
||||
},
|
||||
{
|
||||
name: "Mode 7",
|
||||
icon: Anchor,
|
||||
},
|
||||
{
|
||||
name: "Mode 8",
|
||||
icon: Target,
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/red-corporate-card-with-abstract-lines_23-2147595817.jpg",
|
||||
imageAlt: "tech card abstract red",
|
||||
},
|
||||
]}
|
||||
title="Interactive Mode"
|
||||
description="Click to toggle your power mode for a personalized interface transformation."
|
||||
/>
|
||||
</div>
|
||||
<div id="interactive" data-section="interactive">
|
||||
<FeatureBento
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
animationType="blur-reveal"
|
||||
features={[
|
||||
{
|
||||
bentoComponent: "phone", statusIcon: Power,
|
||||
alertIcon: AlertCircle,
|
||||
alertTitle: "Energy Build Up", alertMessage: "Ready for transformation", apps: [
|
||||
{ name: "Mode 1", icon: Sun },
|
||||
{ name: "Mode 2", icon: Moon },
|
||||
{ name: "Mode 3", icon: Star },
|
||||
{ name: "Mode 4", icon: Zap },
|
||||
{ name: "Mode 5", icon: Cloud },
|
||||
{ name: "Mode 6", icon: Compass },
|
||||
{ name: "Mode 7", icon: Anchor },
|
||||
{ name: "Mode 8", icon: Target }
|
||||
]
|
||||
}
|
||||
]}
|
||||
title="Interactive Mode"
|
||||
description="Click to toggle your power mode for a personalized interface transformation."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Get Connected"
|
||||
description="Join the future. Leave your details and receive exclusive access."
|
||||
inputs={[
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Email Address",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Name",
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/lights-darkness_181624-10486.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Get Connected"
|
||||
description="Join the future. Leave your details and receive exclusive access."
|
||||
inputs={[
|
||||
{ name: "email", type: "email", placeholder: "Email Address", required: true },
|
||||
{ name: "name", type: "text", placeholder: "Name", required: true }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/lights-darkness_181624-10486.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation",
|
||||
items: [
|
||||
{
|
||||
label: "Hero",
|
||||
href: "#hero",
|
||||
},
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Features",
|
||||
href: "#features",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="FUTURE"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation", items: [
|
||||
{ label: "Hero", href: "#hero" },
|
||||
{ label: "About", href: "#about" },
|
||||
{ label: "Features", href: "#features" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy", href: "#" },
|
||||
{ label: "Terms", href: "#" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
logoText="FUTURE"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user