Merge version_2 into main #2
240
src/app/page.tsx
240
src/app/page.tsx
@@ -1,5 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
@@ -14,6 +15,15 @@ import SplitAbout from '@/components/sections/about/SplitAbout';
|
||||
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
||||
|
||||
export default function LandingPage() {
|
||||
const [time, setTime] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
setTime(new Date().toLocaleTimeString("en-US", { hour: '2-digit', minute: '2-digit', hour12: true }));
|
||||
}, 1000);
|
||||
return () => clearInterval(timer);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="expand-hover"
|
||||
@@ -28,29 +38,22 @@ export default function LandingPage() {
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<div id="nav" data-section="nav" className="relative">
|
||||
<div className="absolute top-4 right-8 z-50 font-mono text-sm tracking-widest text-white">
|
||||
{time}
|
||||
</div>
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
name: "Home", id: "hero"},
|
||||
{
|
||||
name: "Discover",
|
||||
id: "library",
|
||||
},
|
||||
name: "Discover", id: "library"},
|
||||
{
|
||||
name: "Avatar",
|
||||
id: "avatar",
|
||||
},
|
||||
name: "Avatar", id: "avatar"},
|
||||
{
|
||||
name: "Create",
|
||||
id: "create",
|
||||
},
|
||||
name: "Create", id: "create"},
|
||||
{
|
||||
name: "Browser",
|
||||
id: "browser",
|
||||
},
|
||||
name: "Browser", id: "browser"},
|
||||
]}
|
||||
brandName="BlockPlay Hub"
|
||||
/>
|
||||
@@ -62,32 +65,20 @@ export default function LandingPage() {
|
||||
description="Experience the ultimate browser-playable block gaming hub. Play thousands of games instantly, no downloads required."
|
||||
buttons={[
|
||||
{
|
||||
text: "Play Now",
|
||||
href: "#library",
|
||||
},
|
||||
text: "Play Now", href: "#library"},
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CW4shT4E7Qd4mf0DnGM2FDTunR/uploaded-1776488324822-vwq0suzb.png"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/optical-fiber-background_23-2149301527.jpg",
|
||||
alt: "Optical fiber background",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/optical-fiber-background_23-2149301527.jpg", alt: "Optical fiber background"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/rendering-abstract-futuristic-background-with-glowing-neon-blue-orange-lights_181624-23700.jpg",
|
||||
alt: "Rendering abstract futuristic background with a glowing neon blue and orange lights",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/rendering-abstract-futuristic-background-with-glowing-neon-blue-orange-lights_181624-23700.jpg", alt: "Rendering abstract futuristic background with a glowing neon blue and orange lights"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/abstract-uv-ultraviolet-light-composition_23-2149243978.jpg",
|
||||
alt: "Abstract uv ultraviolet light composition",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/abstract-uv-ultraviolet-light-composition_23-2149243978.jpg", alt: "Abstract uv ultraviolet light composition"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/neon-geometric-background_23-2150821811.jpg",
|
||||
alt: "Neon geometric background",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/neon-geometric-background_23-2150821811.jpg", alt: "Neon geometric background"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/vivid-abstract-background-cubes_58702-6052.jpg",
|
||||
alt: "Vivid abstract background - Cubes",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/vivid-abstract-background-cubes_58702-6052.jpg", alt: "Vivid abstract background - Cubes"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -100,17 +91,11 @@ export default function LandingPage() {
|
||||
description="Our platform brings the Roblox experience directly to your browser. With instant loading and a vibrant library of community games, it's the future of browser play."
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Instant Play",
|
||||
description: "No installations needed.",
|
||||
},
|
||||
title: "Instant Play", description: "No installations needed."},
|
||||
{
|
||||
title: "Mini Browser",
|
||||
description: "Built-in tabbed internet.",
|
||||
},
|
||||
title: "Mini Browser", description: "Built-in tabbed internet."},
|
||||
{
|
||||
title: "Guest Ready",
|
||||
description: "Saved progress locally.",
|
||||
},
|
||||
title: "Guest Ready", description: "Saved progress locally."},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/colorful-abstract-geometric-wallpaper_23-2151898359.jpg"
|
||||
/>
|
||||
@@ -123,26 +108,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "1.2k+",
|
||||
title: "Active Games",
|
||||
description: "Browser playable",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pop-landscape-poster_23-2151898416.jpg",
|
||||
},
|
||||
id: "m1", value: "1.2k+", title: "Active Games", description: "Browser playable", imageSrc: "http://img.b2bpic.net/free-photo/pop-landscape-poster_23-2151898416.jpg"},
|
||||
{
|
||||
id: "m2",
|
||||
value: "50k+",
|
||||
title: "Users Online",
|
||||
description: "Right now",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vivid-abstract-background-cubes_58702-6062.jpg",
|
||||
},
|
||||
id: "m2", value: "50k+", title: "Users Online", description: "Right now", imageSrc: "http://img.b2bpic.net/free-photo/vivid-abstract-background-cubes_58702-6062.jpg"},
|
||||
{
|
||||
id: "m3",
|
||||
value: "100+",
|
||||
title: "Categories",
|
||||
description: "Explore all",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/lucky-dice-game-background_23-2150971915.jpg",
|
||||
},
|
||||
id: "m3", value: "100+", title: "Categories", description: "Explore all", imageSrc: "http://img.b2bpic.net/free-photo/lucky-dice-game-background_23-2150971915.jpg"},
|
||||
]}
|
||||
title="Hub Stats"
|
||||
description="Live data from the BlockPlay community."
|
||||
@@ -157,41 +127,18 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Roblox",
|
||||
price: "Play",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-candy-blocks-with-copy-space_23-2148691483.jpg",
|
||||
id: "p1", name: "Roblox", price: "Play", imageSrc: "http://img.b2bpic.net/free-photo/top-view-candy-blocks-with-copy-space_23-2148691483.jpg", onProductClick: () => window.open('https://skinnycrawlinglax.com', '_blank')
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Suntree",
|
||||
price: "Play",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/kindergarten-concept-with-wooden-cubes-kid-toys-wooden-background-flat-lay_176474-7734.jpg",
|
||||
},
|
||||
id: "p2", name: "Suntree", price: "Play", imageSrc: "http://img.b2bpic.net/free-photo/kindergarten-concept-with-wooden-cubes-kid-toys-wooden-background-flat-lay_176474-7734.jpg"},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Obby World",
|
||||
price: "Play",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vivid-abstract-background-cubes_58702-6068.jpg",
|
||||
},
|
||||
id: "p3", name: "Obby World", price: "Play", imageSrc: "http://img.b2bpic.net/free-photo/vivid-abstract-background-cubes_58702-6068.jpg"},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Miner Crafter",
|
||||
price: "Play",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cyber-security-expert-working-with-technology-neon-lights_23-2151645565.jpg",
|
||||
},
|
||||
id: "p4", name: "Miner Crafter", price: "Play", imageSrc: "http://img.b2bpic.net/free-photo/cyber-security-expert-working-with-technology-neon-lights_23-2151645565.jpg"},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Racing 3D",
|
||||
price: "Play",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cyberpunk-illustration-with-futuristic-technology-bright-neon-lights_23-2151672078.jpg",
|
||||
},
|
||||
id: "p5", name: "Racing 3D", price: "Play", imageSrc: "http://img.b2bpic.net/free-photo/cyberpunk-illustration-with-futuristic-technology-bright-neon-lights_23-2151672078.jpg"},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Space Shooter",
|
||||
price: "Play",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/domestic-life-illustrated_23-2151876253.jpg",
|
||||
},
|
||||
id: "p6", name: "Space Shooter", price: "Play", imageSrc: "http://img.b2bpic.net/free-photo/domestic-life-illustrated_23-2151876253.jpg"},
|
||||
]}
|
||||
title="Game Library"
|
||||
description="Curated selection of our top block games."
|
||||
@@ -204,20 +151,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Multi-tab Support",
|
||||
description: "Open multiple web sessions.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-3d-dice-with-abstract-scenery_23-2151045383.jpg",
|
||||
},
|
||||
title: "Multi-tab Support", description: "Open multiple web sessions.", imageSrc: "http://img.b2bpic.net/free-photo/view-3d-dice-with-abstract-scenery_23-2151045383.jpg"},
|
||||
{
|
||||
title: "Search Engine Switcher",
|
||||
description: "DDG, Google, Bing.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cartoon-woman-wearing-glasses_23-2151136863.jpg",
|
||||
},
|
||||
title: "Search Engine Switcher", description: "DDG, Google, Bing.", imageSrc: "http://img.b2bpic.net/free-photo/cartoon-woman-wearing-glasses_23-2151136863.jpg"},
|
||||
{
|
||||
title: "Secure Sandbox",
|
||||
description: "Safe browsing environment.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-geometric-shapes-nature_23-2150697320.jpg",
|
||||
},
|
||||
title: "Secure Sandbox", description: "Safe browsing environment.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-geometric-shapes-nature_23-2150697320.jpg"},
|
||||
]}
|
||||
title="Built-in Mini Browser"
|
||||
description="Switch between search engines and browse freely within our platform. Now with autocomplete."
|
||||
@@ -232,45 +170,20 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Devin",
|
||||
role: "Pro Gamer",
|
||||
company: "HubUser",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-half-robot-half-panda-bear-with-futuristic-parts_23-2151741546.jpg",
|
||||
},
|
||||
id: "1", name: "Devin", role: "Pro Gamer", company: "HubUser", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-half-robot-half-panda-bear-with-futuristic-parts_23-2151741546.jpg"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Alex",
|
||||
role: "Casual",
|
||||
company: "HubUser",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-uv-ultraviolet-light-composition_23-2149243960.jpg",
|
||||
},
|
||||
id: "2", name: "Alex", role: "Casual", company: "HubUser", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-uv-ultraviolet-light-composition_23-2149243960.jpg"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Sam",
|
||||
role: "Creator",
|
||||
company: "HubUser",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/neon-gaming-background_23-2151932055.jpg",
|
||||
},
|
||||
id: "3", name: "Sam", role: "Creator", company: "HubUser", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/neon-gaming-background_23-2151932055.jpg"},
|
||||
{
|
||||
id: "4",
|
||||
name: "Jordan",
|
||||
role: "Explorer",
|
||||
company: "HubUser",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-cross-top-rocks_23-2150913514.jpg",
|
||||
},
|
||||
id: "4", name: "Jordan", role: "Explorer", company: "HubUser", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-cross-top-rocks_23-2150913514.jpg"},
|
||||
{
|
||||
id: "5",
|
||||
name: "Taylor",
|
||||
role: "Racer",
|
||||
company: "HubUser",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vivid-abstract-background-cubes_58702-6096.jpg",
|
||||
},
|
||||
id: "5", name: "Taylor", role: "Racer", company: "HubUser", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vivid-abstract-background-cubes_58702-6096.jpg"},
|
||||
]}
|
||||
title="Player Feedback"
|
||||
description="See why players love BlockPlay Hub."
|
||||
@@ -283,20 +196,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Is it free?",
|
||||
content: "Yes, everything here is free.",
|
||||
},
|
||||
id: "f1", title: "Is it free?", content: "Yes, everything here is free."},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Do I need to download?",
|
||||
content: "Never, we run directly in browser.",
|
||||
},
|
||||
id: "f2", title: "Do I need to download?", content: "Never, we run directly in browser."},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Can I add games?",
|
||||
content: "Coming soon in creator update.",
|
||||
},
|
||||
id: "f3", title: "Can I add games?", content: "Coming soon in creator update."},
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Got a question? We have answers."
|
||||
@@ -311,22 +215,14 @@ export default function LandingPage() {
|
||||
description="Have issues? Send us a message."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Name",
|
||||
required: true,
|
||||
name: "name", type: "text", placeholder: "Name", required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Email",
|
||||
required: true,
|
||||
name: "email", type: "email", placeholder: "Email", required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Describe your issue",
|
||||
}}
|
||||
name: "message", placeholder: "Describe your issue"}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/zoom-out-right-side_187299-45685.jpg"
|
||||
/>
|
||||
</div>
|
||||
@@ -337,29 +233,19 @@ export default function LandingPage() {
|
||||
logoText="BlockPlay Hub"
|
||||
columns={[
|
||||
{
|
||||
title: "Platform",
|
||||
items: [
|
||||
title: "Platform", items: [
|
||||
{
|
||||
label: "Home",
|
||||
href: "#hero",
|
||||
},
|
||||
label: "Home", href: "#hero"},
|
||||
{
|
||||
label: "Discover",
|
||||
href: "#library",
|
||||
},
|
||||
label: "Discover", href: "#library"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
title: "Legal", items: [
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
},
|
||||
label: "Privacy", href: "#"},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
label: "Terms", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
@@ -368,4 +254,4 @@ export default function LandingPage() {
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user