Merge version_1 into main #2

Merged
bender merged 4 commits from version_1 into main 2026-04-16 03:17:12 +00:00
4 changed files with 256 additions and 545 deletions

View File

@@ -7,7 +7,7 @@ import FooterMedia from '@/components/sections/footer/FooterMedia';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import { LayoutDashboard, Lightbulb, Star, TrendingUp } from "lucide-react";
export default function LandingPage() {
export default function DiscoverPage() {
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
@@ -22,118 +22,60 @@ export default function LandingPage() {
headingFontWeight="normal"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{
name: "Home",
id: "/",
},
{
name: "Discover",
id: "/discover",
},
{
name: "Lab",
id: "/lab",
},
{
name: "Games",
id: "/games",
},
{
name: "Rankings",
id: "/rankings",
},
]}
brandName="NebulaPlay"
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{ name: "Home", id: "/" },
{ name: "Discover", id: "/discover" },
{ name: "Lab", id: "/lab" },
{ name: "Games", id: "/games" },
{ name: "Rankings", id: "/rankings" },
]}
brandName="NebulaPlay"
button={{ text: "Join" }}
/>
</div>
<div id="discover-list" data-section="discover-list">
<FeatureHoverPattern
animationType="scale-rotate"
textboxLayout="default"
useInvertedBackground={false}
features={[
{
icon: Lightbulb,
title: "Weird Thought",
description: "Did you know trees talk to each other?",
},
{
icon: LayoutDashboard,
title: "Probability Drop",
description: "You have a 1% chance to win a badge.",
},
{
icon: Lightbulb,
title: "AI Idea",
description: "Build a coffee shop for robots.",
},
]}
title="Infinite Stream"
description="Refresh to find something weird, fun, or rare."
/>
</div>
<div id="discover-list" data-section="discover-list">
<FeatureHoverPattern
animationType="scale-rotate"
textboxLayout="default"
useInvertedBackground={false}
features={[
{ icon: Lightbulb, title: "Weird Thought", description: "Did you know trees talk to each other?" },
{ icon: LayoutDashboard, title: "Probability Drop", description: "You have a 1% chance to win a badge." },
{ icon: Lightbulb, title: "AI Idea", description: "Build a coffee shop for robots." },
]}
title="Infinite Stream"
description="Refresh to find something weird, fun, or rare."
/>
</div>
<div id="feature" data-section="feature">
<FeatureHoverPattern
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
title="Recent Trends"
description="See what others are finding in the stream right now."
features={[
{
icon: TrendingUp,
title: "Top Trending",
description: "Most popular discoveries today.",
},
{
icon: Star,
title: "Rising Stars",
description: "Unique items with high engagement.",
},
]}
/>
</div>
<div id="feature" data-section="feature">
<FeatureHoverPattern
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
title="Recent Trends"
description="See what others are finding in the stream right now."
features={[
{ icon: TrendingUp, title: "Top Trending", description: "Most popular discoveries today." },
{ icon: Star, title: "Rising Stars", description: "Unique items with high engagement." },
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9hr7bd&_wi=2"
logoText="NebulaPlay"
columns={[
{
title: "Explore",
items: [
{
label: "Discover",
href: "/discover",
},
{
label: "Games",
href: "/games",
},
],
},
{
title: "Social",
items: [
{
label: "Leaderboards",
href: "/rankings",
},
{
label: "Profile",
href: "/profile",
},
],
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9hr7bd"
logoText="NebulaPlay"
columns={[
{ title: "Explore", items: [{ label: "Discover", href: "/discover" }, { label: "Games", href: "/games" }] },
{ title: "Social", items: [{ label: "Leaderboards", href: "/rankings" }, { label: "Profile", href: "/profile" }] },
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}

View File

@@ -7,7 +7,7 @@ import FooterMedia from '@/components/sections/footer/FooterMedia';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import { AlertTriangle, Award, Briefcase, MousePointer, Timer } from "lucide-react";
export default function LandingPage() {
export default function GamesPage() {
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
@@ -22,118 +22,60 @@ export default function LandingPage() {
headingFontWeight="normal"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{
name: "Home",
id: "/",
},
{
name: "Discover",
id: "/discover",
},
{
name: "Lab",
id: "/lab",
},
{
name: "Games",
id: "/games",
},
{
name: "Rankings",
id: "/rankings",
},
]}
brandName="NebulaPlay"
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{ name: "Home", id: "/" },
{ name: "Discover", id: "/discover" },
{ name: "Lab", id: "/lab" },
{ name: "Games", id: "/games" },
{ name: "Rankings", id: "/rankings" },
]}
brandName="NebulaPlay"
button={{ text: "Join" }}
/>
</div>
<div id="games-list" data-section="games-list">
<FeatureHoverPattern
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
features={[
{
icon: Timer,
title: "Reaction Speed",
description: "How fast are your synapses?",
},
{
icon: MousePointer,
title: "Click Challenge",
description: "Spam click to break the counter.",
},
{
icon: AlertTriangle,
title: "Wrong Click",
description: "Don't click the red button!",
},
]}
title="Reaction Arena"
description="Test your speed against the global player base."
/>
</div>
<div id="games-list" data-section="games-list">
<FeatureHoverPattern
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
features={[
{ icon: Timer, title: "Reaction Speed", description: "How fast are your synapses?" },
{ icon: MousePointer, title: "Click Challenge", description: "Spam click to break the counter." },
{ icon: AlertTriangle, title: "Wrong Click", description: "Don't click the red button!" },
]}
title="Reaction Arena"
description="Test your speed against the global player base."
/>
</div>
<div id="feature" data-section="feature">
<FeatureHoverPattern
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
title="Game Collection"
description="Explore the full library of mini-challenges."
features={[
{
icon: Award,
title: "Puzzle Quest",
description: "Solve logic puzzles against time.",
},
{
icon: Briefcase,
title: "Duel Mode",
description: "Play against friends.",
},
]}
/>
</div>
<div id="feature" data-section="feature">
<FeatureHoverPattern
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
title="Game Collection"
description="Explore the full library of mini-challenges."
features={[
{ icon: Award, title: "Puzzle Quest", description: "Solve logic puzzles against time." },
{ icon: Briefcase, title: "Duel Mode", description: "Play against friends." },
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9hr7bd&_wi=4"
logoText="NebulaPlay"
columns={[
{
title: "Explore",
items: [
{
label: "Discover",
href: "/discover",
},
{
label: "Games",
href: "/games",
},
],
},
{
title: "Social",
items: [
{
label: "Leaderboards",
href: "/rankings",
},
{
label: "Profile",
href: "/profile",
},
],
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9hr7bd"
logoText="NebulaPlay"
columns={[
{ title: "Explore", items: [{ label: "Discover", href: "/discover" }, { label: "Games", href: "/games" }] },
{ title: "Social", items: [{ label: "Leaderboards", href: "/rankings" }, { label: "Profile", href: "/profile" }] },
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}

View File

@@ -7,7 +7,7 @@ import FooterMedia from '@/components/sections/footer/FooterMedia';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import { Activity, AlertTriangle, Database, Target, Users } from "lucide-react";
export default function LandingPage() {
export default function LabPage() {
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
@@ -22,117 +22,60 @@ export default function LandingPage() {
headingFontWeight="normal"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{
name: "Home",
id: "/",
},
{
name: "Discover",
id: "/discover",
},
{
name: "Lab",
id: "/lab",
},
{
name: "Games",
id: "/games",
},
{
name: "Rankings",
id: "/rankings",
},
]}
brandName="NebulaPlay"
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{ name: "Home", id: "/" },
{ name: "Discover", id: "/discover" },
{ name: "Lab", id: "/lab" },
{ name: "Games", id: "/games" },
{ name: "Rankings", id: "/rankings" },
]}
brandName="NebulaPlay"
button={{ text: "Join" }}
/>
</div>
<div id="viral-tools" data-section="viral-tools">
<FeatureHoverPattern
textboxLayout="default"
useInvertedBackground={false}
features={[
{
icon: Users,
title: "Personality Gen",
description: "What is your digital aura?",
},
{
icon: Target,
title: "Odds Simulator",
description: "Calculate the chance of anything.",
},
{
icon: Database,
title: "AI Text Gen",
description: "Generate viral headlines.",
},
]}
title="Viral Lab Tools"
description="Generate chaos with our futuristic tools."
/>
</div>
<div id="viral-tools" data-section="viral-tools">
<FeatureHoverPattern
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
features={[
{ icon: Users, title: "Personality Gen", description: "What is your digital aura?" },
{ icon: Target, title: "Odds Simulator", description: "Calculate the chance of anything." },
{ icon: Database, title: "AI Text Gen", description: "Generate viral headlines." },
]}
title="Viral Lab Tools"
description="Generate chaos with our futuristic tools."
/>
</div>
<div id="feature" data-section="feature">
<FeatureHoverPattern
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
title="Beta Experiments"
description="Test our latest unfinished features."
features={[
{
icon: Activity,
title: "Beta Logic",
description: "Experimental tools in testing.",
},
{
icon: AlertTriangle,
title: "Report Issues",
description: "Help us improve the engine.",
},
]}
/>
</div>
<div id="feature" data-section="feature">
<FeatureHoverPattern
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
title="Beta Experiments"
description="Test our latest unfinished features."
features={[
{ icon: Activity, title: "Beta Logic", description: "Experimental tools in testing." },
{ icon: AlertTriangle, title: "Report Issues", description: "Help us improve the engine." },
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9hr7bd&_wi=3"
logoText="NebulaPlay"
columns={[
{
title: "Explore",
items: [
{
label: "Discover",
href: "/discover",
},
{
label: "Games",
href: "/games",
},
],
},
{
title: "Social",
items: [
{
label: "Leaderboards",
href: "/rankings",
},
{
label: "Profile",
href: "/profile",
},
],
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9hr7bd"
logoText="NebulaPlay"
columns={[
{ title: "Explore", items: [{ label: "Discover", href: "/discover" }, { label: "Games", href: "/games" }] },
{ title: "Social", items: [{ label: "Leaderboards", href: "/rankings" }, { label: "Profile", href: "/profile" }] },
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}

View File

@@ -26,228 +26,112 @@ export default function LandingPage() {
headingFontWeight="normal"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{
name: "Home",
id: "/",
},
{
name: "Discover",
id: "/discover",
},
{
name: "Lab",
id: "/lab",
},
{
name: "Games",
id: "/games",
},
{
name: "Rankings",
id: "/rankings",
},
]}
brandName="NebulaPlay"
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{ name: "Home", id: "/" },
{ name: "Discover", id: "/discover" },
{ name: "Lab", id: "/lab" },
{ name: "Games", id: "/games" },
{ name: "Rankings", id: "/rankings" },
]}
brandName="NebulaPlay"
button={{ text: "Join" }}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboard
background={{
variant: "sparkles-gradient",
}}
title="You wont leave this site in under 60 seconds"
description="Enter the digital playground where randomness rules. Explore, play, win, and get hooked on the endless cycle of discovery."
buttons={[
{
text: "Start Exploring",
href: "/discover",
},
{
text: "Try Your Luck",
href: "/discover#random",
},
]}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=xsu9e2"
avatars={[
{
src: "asset://new-hero-avatar-1",
alt: "user profile 1",
},
{
src: "asset://new-hero-avatar-2",
alt: "user profile 2",
},
{
src: "asset://new-hero-avatar-3",
alt: "user profile 3",
},
{
src: "asset://new-hero-avatar-4",
alt: "user profile 4",
},
{
src: "asset://new-hero-avatar-5",
alt: "user profile 5",
},
]}
avatarText="2,300+ players joined"
marqueeItems={[
{
type: "text",
text: "Win Daily Badges",
},
{
type: "text",
text: "Climb Global Ranks",
},
{
type: "text",
text: "Unlock Secret Levels",
},
{
type: "text",
text: "Challenge Global Users",
},
{
type: "text",
text: "Beat the Highscore",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboard
background={{ variant: "sparkles-gradient" }}
title="You wont leave this site in under 60 seconds"
description="Enter the digital playground where randomness rules. Explore, play, win, and get hooked on the endless cycle of discovery."
buttons={[
{ text: "Start Exploring", href: "/discover" },
{ text: "Try Your Luck", href: "/discover#random" },
]}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=xsu9e2"
avatars={[
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=xsu9e2", alt: "user profile 1" },
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=xsu9e2", alt: "user profile 2" },
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=xsu9e2", alt: "user profile 3" },
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=xsu9e2", alt: "user profile 4" },
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=xsu9e2", alt: "user profile 5" },
]}
avatarText="2,300+ players joined"
marqueeItems={[
{ type: "text", text: "Win Daily Badges" },
{ type: "text", text: "Climb Global Ranks" },
{ type: "text", text: "Unlock Secret Levels" },
{ type: "text", text: "Challenge Global Users" },
{ type: "text", text: "Beat the Highscore" },
]}
/>
</div>
<div id="features" data-section="features">
<FeatureHoverPattern
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
features={[
{
icon: Sparkles,
title: "Rare Drops",
description: "Find exclusive digital collectibles hidden in the scroll.",
},
{
icon: Zap,
title: "Instant Games",
description: "Mini-games that test your reflexes in seconds.",
},
{
icon: Shield,
title: "Daily Streaks",
description: "Unlock rare profile badges for returning daily.",
},
]}
title="Why You'll Stay"
description="Our Viral Lab and discovery engines are built for dopamine."
/>
</div>
<div id="features" data-section="features">
<FeatureHoverPattern
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
features={[
{ icon: Sparkles, title: "Rare Drops", description: "Find exclusive digital collectibles hidden in the scroll." },
{ icon: Zap, title: "Instant Games", description: "Mini-games that test your reflexes in seconds." },
{ icon: Shield, title: "Daily Streaks", description: "Unlock rare profile badges for returning daily." },
]}
title="Why You'll Stay"
description="Our Viral Lab and discovery engines are built for dopamine."
/>
</div>
<div id="social-proof" data-section="social-proof">
<SocialProofOne
textboxLayout="default"
useInvertedBackground={true}
names={[
"PlayerOne",
"NebulaExplorer",
"DopamineJunkie",
"PixelMaster",
"CosmicDrifter",
"ViralSeeker",
"InfinityUser",
]}
title="2,341 users exploring now"
description="Join the community and climb the global leaderboards."
/>
</div>
<div id="social-proof" data-section="social-proof">
<SocialProofOne
textboxLayout="default"
useInvertedBackground={true}
names={["PlayerOne", "NebulaExplorer", "DopamineJunkie", "PixelMaster", "CosmicDrifter", "ViralSeeker", "InfinityUser"]}
title="2,341 users exploring now"
description="Join the community and climb the global leaderboards."
/>
</div>
<div id="faq" data-section="faq">
<FaqBase
textboxLayout="default"
useInvertedBackground={false}
faqs={[
{
id: "1",
title: "How do I unlock rare content?",
content: "Keep exploring! Rare content is randomized.",
},
{
id: "2",
title: "Is the leaderboard real?",
content: "It tracks active session users and streaks.",
},
{
id: "3",
title: "Can I invite friends?",
content: "Yes, share your unique profile code to unlock bonuses.",
},
]}
title="The Playground Rules"
description="Curious how it all works? Stay a while longer."
faqsAnimation="blur-reveal"
/>
</div>
<div id="faq" data-section="faq">
<FaqBase
textboxLayout="default"
useInvertedBackground={false}
faqs={[
{ id: "1", title: "How do I unlock rare content?", content: "Keep exploring! Rare content is randomized." },
{ id: "2", title: "Is the leaderboard real?", content: "It tracks active session users and streaks." },
{ id: "3", title: "Can I invite friends?", content: "Yes, share your unique profile code to unlock bonuses." },
]}
title="The Playground Rules"
description="Curious how it all works? Stay a while longer."
faqsAnimation="blur-reveal"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={true}
title="Found a Bug?"
description="Or maybe just want to tell us you're addicted? Reach out."
inputs={[
{
name: "name",
type: "text",
placeholder: "Your Username",
},
{
name: "email",
type: "email",
placeholder: "Email for streaks",
},
]}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6fthky"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={true}
title="Found a Bug?"
description="Or maybe just want to tell us you're addicted? Reach out."
inputs={[
{ name: "name", type: "text", placeholder: "Your Username" },
{ name: "email", type: "email", placeholder: "Email for streaks" },
]}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6fthky"
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9hr7bd&_wi=1"
logoText="NebulaPlay"
columns={[
{
title: "Explore",
items: [
{
label: "Discover",
href: "/discover",
},
{
label: "Games",
href: "/games",
},
],
},
{
title: "Social",
items: [
{
label: "Leaderboards",
href: "/rankings",
},
{
label: "Profile",
href: "/profile",
},
],
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9hr7bd"
logoText="NebulaPlay"
columns={[
{ title: "Explore", items: [{ label: "Discover", href: "/discover" }, { label: "Games", href: "/games" }] },
{ title: "Social", items: [{ label: "Leaderboards", href: "/rankings" }, { label: "Profile", href: "/profile" }] },
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}