Merge version_2 into main #2
246
src/app/page.tsx
246
src/app/page.tsx
@@ -32,31 +32,19 @@ export default function LandingPage() {
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Features",
|
||||
id: "features",
|
||||
},
|
||||
name: "Features", id: "features"},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "pricing",
|
||||
},
|
||||
name: "Pricing", id: "pricing"},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "testimonials",
|
||||
},
|
||||
name: "Testimonials", id: "testimonials"},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "faq",
|
||||
},
|
||||
name: "FAQ", id: "faq"},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
name: "Contact", id: "contact"},
|
||||
]}
|
||||
brandName="CloudPlay"
|
||||
button={{
|
||||
text: "Start Free Trial",
|
||||
href: "#pricing",
|
||||
}}
|
||||
text: "Start Free Trial", href: "#pricing"}}
|
||||
animateOnLoad={true}
|
||||
/>
|
||||
</div>
|
||||
@@ -64,70 +52,43 @@ export default function LandingPage() {
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
title="Stream Your Favorite PC Games, No Downloads. Ever."
|
||||
variant: "sparkles-gradient"}}
|
||||
title="The Ultimate PC Gaming Platform: Stream Instantly, No Downloads."
|
||||
description="Experience uncompromised PC gaming instantly on any device. Dive into GTA V, Forza Horizon 5, Cyberpunk 2077, and more with zero downloads, no installations, and minimal latency. Your next gaming session starts now."
|
||||
kpis={[
|
||||
{
|
||||
value: "4K",
|
||||
label: "Resolution",
|
||||
},
|
||||
value: "4K", label: "Resolution"},
|
||||
{
|
||||
value: "60+",
|
||||
label: "FPS",
|
||||
},
|
||||
value: "60+", label: "FPS"},
|
||||
{
|
||||
value: "20ms",
|
||||
label: "Latency",
|
||||
},
|
||||
value: "20ms", label: "Latency"},
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
tag="Gaming without limits"
|
||||
tagIcon={Zap}
|
||||
buttons={[
|
||||
{
|
||||
text: "Start Playing Now",
|
||||
href: "#pricing",
|
||||
},
|
||||
text: "Start Playing Now", href: "#pricing"},
|
||||
{
|
||||
text: "Explore Games",
|
||||
href: "#features",
|
||||
},
|
||||
text: "Explore Games", href: "#features"},
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BT2V9XABORf4X1rP503C79O6vs/a-futuristic-sleek-cloud-gaming-dashboar-1774498867142-4fb30f4d.png?_wi=1"
|
||||
imageAlt="Cloud gaming dashboard showing GTA V and Forza Horizon 5"
|
||||
mediaAnimation="slide-up"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "image",
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BT2V9XABORf4X1rP503C79O6vs/iconic-logo-for-grand-theft-auto-v-gta-v-1774498865334-6a14702e.png",
|
||||
alt: "GTA V logo",
|
||||
type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BT2V9XABORf4X1rP503C79O6vs/iconic-logo-for-grand-theft-auto-v-gta-v-1774498865334-6a14702e.png", alt: "GTA V logo"},
|
||||
{
|
||||
type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BT2V9XABORf4X1rP503C79O6vs/iconic-logo-for-forza-horizon-5-stylized-1774498864840-c4a3af7b.png", alt: "Forza Horizon 5 logo"},
|
||||
{
|
||||
type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BT2V9XABORf4X1rP503C79O6vs/iconic-logo-for-cyberpunk-2077-stylized--1774498864825-56ab45b2.png", alt: "Cyberpunk 2077 logo"},
|
||||
{
|
||||
type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BT2V9XABORf4X1rP503C79O6vs/iconic-logo-for-red-dead-redemption-2-rd-1774498865439-787c080e.png", alt: "Red Dead Redemption 2 logo"},
|
||||
{
|
||||
type: "text-icon", text: "Low Latency", icon: Wifi,
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BT2V9XABORf4X1rP503C79O6vs/iconic-logo-for-forza-horizon-5-stylized-1774498864840-c4a3af7b.png",
|
||||
alt: "Forza Horizon 5 logo",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BT2V9XABORf4X1rP503C79O6vs/iconic-logo-for-cyberpunk-2077-stylized--1774498864825-56ab45b2.png",
|
||||
alt: "Cyberpunk 2077 logo",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BT2V9XABORf4X1rP503C79O6vs/iconic-logo-for-red-dead-redemption-2-rd-1774498865439-787c080e.png",
|
||||
alt: "Red Dead Redemption 2 logo",
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Low Latency",
|
||||
icon: Wifi,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Any Device",
|
||||
icon: Laptop,
|
||||
type: "text-icon", text: "Any Device", icon: Laptop,
|
||||
},
|
||||
]}
|
||||
marqueeSpeed={35}
|
||||
@@ -139,12 +100,10 @@ export default function LandingPage() {
|
||||
<TextAbout
|
||||
useInvertedBackground={true}
|
||||
tag="Instant Access"
|
||||
title="Your Ultimate Cloud Gaming Hub"
|
||||
title="Your Ultimate Cloud Gaming Hub: Play GTA 5, Forza Horizon 5 & More Online, No Downloads."
|
||||
buttons={[
|
||||
{
|
||||
text: "Learn More About Our Tech",
|
||||
href: "#",
|
||||
},
|
||||
text: "Learn More About Our Tech", href: "#"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -157,34 +116,22 @@ export default function LandingPage() {
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
title: "Play Anywhere, Anytime",
|
||||
description: "Access your entire game library on any device—PC, Mac, tablet, or smartphone. Your progress syncs seamlessly.",
|
||||
phoneOne: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BT2V9XABORf4X1rP503C79O6vs/a-close-up-of-hands-holding-a-smartphone-1774498865530-2924c060.png?_wi=1",
|
||||
imageAlt: "Mobile phone streaming a PC game",
|
||||
},
|
||||
title: "Play Anywhere, Anytime", description: "Access your entire game library on any device—PC, Mac, tablet, or smartphone. Your progress syncs seamlessly.", phoneOne: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BT2V9XABORf4X1rP503C79O6vs/a-close-up-of-hands-holding-a-smartphone-1774498865530-2924c060.png?_wi=1", imageAlt: "Mobile phone streaming a PC game"},
|
||||
phoneTwo: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BT2V9XABORf4X1rP503C79O6vs/a-modern-gaming-controller-gamepad-with--1774498864974-4210e1ee.png",
|
||||
imageAlt: "Gaming controller",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BT2V9XABORf4X1rP503C79O6vs/a-modern-gaming-controller-gamepad-with--1774498864974-4210e1ee.png", imageAlt: "Gaming controller"},
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Zero Downloads, Pure Fun",
|
||||
description: "Say goodbye to long downloads and endless updates. Your games are ready to play the moment you choose them.",
|
||||
phoneOne: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BT2V9XABORf4X1rP503C79O6vs/a-futuristic-sleek-cloud-gaming-dashboar-1774498867142-4fb30f4d.png?_wi=2",
|
||||
imageAlt: "Cloud gaming dashboard",
|
||||
},
|
||||
title: "Zero Downloads, Pure Fun", description: "Say goodbye to long downloads and endless updates. Your games are ready to play the moment you choose them.", phoneOne: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BT2V9XABORf4X1rP503C79O6vs/a-futuristic-sleek-cloud-gaming-dashboar-1774498867142-4fb30f4d.png?_wi=2", imageAlt: "Cloud gaming dashboard"},
|
||||
phoneTwo: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BT2V9XABORf4X1rP503C79O6vs/a-close-up-of-hands-holding-a-smartphone-1774498865530-2924c060.png?_wi=2",
|
||||
imageAlt: "Mobile phone streaming a PC game",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BT2V9XABORf4X1rP503C79O6vs/a-close-up-of-hands-holding-a-smartphone-1774498865530-2924c060.png?_wi=2", imageAlt: "Mobile phone streaming a PC game"},
|
||||
},
|
||||
]}
|
||||
showStepNumbers={true}
|
||||
title="Next-Gen Gaming Features"
|
||||
description="Unlock a world of possibilities with CloudPlay's innovative features designed for the modern gamer."
|
||||
description="Explore the core features that define the future of gaming, focusing on seamless game streaming capabilities."
|
||||
tag="Seamless Experience"
|
||||
/>
|
||||
</div>
|
||||
@@ -196,63 +143,30 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "basic",
|
||||
badge: "Starter",
|
||||
price: "$9.99/month",
|
||||
subtitle: "Casual Gaming",
|
||||
buttons: [
|
||||
id: "basic", badge: "Starter", price: "$9.99/month", subtitle: "Casual Gaming", buttons: [
|
||||
{
|
||||
text: "Get Started",
|
||||
href: "#",
|
||||
},
|
||||
text: "Get Started", href: "#"},
|
||||
],
|
||||
features: [
|
||||
"Up to 1080p Streaming",
|
||||
"Standard Library Access",
|
||||
"20 hours/month playtime",
|
||||
"Basic Support",
|
||||
],
|
||||
"Up to 1080p Streaming", "Standard Library Access", "20 hours/month playtime", "Basic Support"],
|
||||
},
|
||||
{
|
||||
id: "pro",
|
||||
badge: "Popular",
|
||||
price: "$19.99/month",
|
||||
subtitle: "Serious Gamer",
|
||||
badgeIcon: Sparkles,
|
||||
id: "pro", badge: "Popular", price: "$19.99/month", subtitle: "Serious Gamer", badgeIcon: Sparkles,
|
||||
buttons: [
|
||||
{
|
||||
text: "Go Pro",
|
||||
href: "#",
|
||||
},
|
||||
text: "Go Pro", href: "#"},
|
||||
],
|
||||
features: [
|
||||
"Up to 4K Streaming",
|
||||
"Full Library Access",
|
||||
"Unlimited Playtime",
|
||||
"Priority Support",
|
||||
"Early Access Demos",
|
||||
],
|
||||
"Up to 4K Streaming", "Full Library Access", "Unlimited Playtime", "Priority Support", "Early Access Demos"],
|
||||
},
|
||||
{
|
||||
id: "ultimate",
|
||||
badge: "Elite",
|
||||
price: "$29.99/month",
|
||||
subtitle: "Esports Ready",
|
||||
badgeIcon: Crown,
|
||||
id: "ultimate", badge: "Elite", price: "$29.99/month", subtitle: "Esports Ready", badgeIcon: Crown,
|
||||
buttons: [
|
||||
{
|
||||
text: "Go Ultimate",
|
||||
href: "#",
|
||||
},
|
||||
text: "Go Ultimate", href: "#"},
|
||||
],
|
||||
features: [
|
||||
"Up to 4K 120Hz Streaming",
|
||||
"Full Library + New Releases",
|
||||
"Unlimited Playtime",
|
||||
"24/7 Dedicated Support",
|
||||
"Exclusive Beta Access",
|
||||
"Cloud Save Sync",
|
||||
],
|
||||
"Up to 4K 120Hz Streaming", "Full Library + New Releases", "Unlimited Playtime", "24/7 Dedicated Support", "Exclusive Beta Access", "Cloud Save Sync"],
|
||||
},
|
||||
]}
|
||||
title="Flexible Gaming Plans"
|
||||
@@ -266,25 +180,13 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Alex 'Phantom' Chen",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BT2V9XABORf4X1rP503C79O6vs/professional-headshot-of-a-young-male-ga-1774498864780-2185472c.png",
|
||||
},
|
||||
id: "1", name: "Alex 'Phantom' Chen", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BT2V9XABORf4X1rP503C79O6vs/professional-headshot-of-a-young-male-ga-1774498864780-2185472c.png"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Mia 'Vortex' Singh",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BT2V9XABORf4X1rP503C79O6vs/professional-headshot-of-a-female-gamer--1774498865605-fed62646.png",
|
||||
},
|
||||
id: "2", name: "Mia 'Vortex' Singh", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BT2V9XABORf4X1rP503C79O6vs/professional-headshot-of-a-female-gamer--1774498865605-fed62646.png"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Jordan 'Spectre' Lee",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BT2V9XABORf4X1rP503C79O6vs/professional-headshot-of-a-diverse-male--1774498865718-2078b5b8.png",
|
||||
},
|
||||
id: "3", name: "Jordan 'Spectre' Lee", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BT2V9XABORf4X1rP503C79O6vs/professional-headshot-of-a-diverse-male--1774498865718-2078b5b8.png"},
|
||||
{
|
||||
id: "4",
|
||||
name: "Chloe 'Nova' Davis",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BT2V9XABORf4X1rP503C79O6vs/professional-headshot-of-a-female-stream-1774498864708-f0841fda.png",
|
||||
},
|
||||
id: "4", name: "Chloe 'Nova' Davis", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BT2V9XABORf4X1rP503C79O6vs/professional-headshot-of-a-female-stream-1774498864708-f0841fda.png"},
|
||||
]}
|
||||
cardTitle="What Our Players Say"
|
||||
cardTag="Rave Reviews"
|
||||
@@ -298,35 +200,17 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "How does CloudPlay work?",
|
||||
content: "CloudPlay streams games directly from our powerful servers to your device. You just need a stable internet connection and a compatible device (PC, Mac, mobile, tablet) to start playing instantly. No downloads, no installations, just gaming.",
|
||||
},
|
||||
id: "1", title: "How does CloudPlay work?", content: "CloudPlay streams games directly from our powerful servers to your device. You just need a stable internet connection and a compatible device (PC, Mac, mobile, tablet) to start playing instantly. No downloads, no installations, just gaming."},
|
||||
{
|
||||
id: "2",
|
||||
title: "What kind of internet speed do I need?",
|
||||
content: "We recommend a minimum of 15-20 Mbps for 1080p streaming and 30-50 Mbps for 4K streaming to ensure a smooth, lag-free experience. A wired connection (Ethernet) is always preferred for optimal performance.",
|
||||
},
|
||||
id: "2", title: "What kind of internet speed do I need?", content: "We recommend a minimum of 15-20 Mbps for 1080p streaming and 30-50 Mbps for 4K streaming to ensure a smooth, lag-free experience. A wired connection (Ethernet) is always preferred for optimal performance."},
|
||||
{
|
||||
id: "3",
|
||||
title: "Can I play my own games from other platforms?",
|
||||
content: "Currently, CloudPlay offers a curated library of games available through our platform. We are continuously working on integrating popular titles and potentially supporting games you already own in the future.",
|
||||
},
|
||||
id: "3", title: "Can I play my own games from other platforms?", content: "Currently, CloudPlay offers a curated library of games available through our platform. We are continuously working on integrating popular titles and potentially supporting games you already own in the future."},
|
||||
{
|
||||
id: "4",
|
||||
title: "What devices are supported?",
|
||||
content: "CloudPlay is compatible with Windows PCs, macOS, Android phones and tablets, and iOS devices (via web browser). We're constantly expanding our device support.",
|
||||
},
|
||||
id: "4", title: "What devices are supported?", content: "CloudPlay is compatible with Windows PCs, macOS, Android phones and tablets, and iOS devices (via web browser). We're constantly expanding our device support."},
|
||||
{
|
||||
id: "5",
|
||||
title: "Is there a free trial?",
|
||||
content: "Yes, we offer a 7-day free trial for new users to experience CloudPlay with limited access to our game library and streaming quality. Sign up today to start your free trial!",
|
||||
},
|
||||
id: "5", title: "Is there a free trial?", content: "Yes, we offer a 7-day free trial for new users to experience CloudPlay with limited access to our game library and streaming quality. Sign up today to start your free trial!"},
|
||||
{
|
||||
id: "6",
|
||||
title: "How do I cancel my subscription?",
|
||||
content: "You can easily manage or cancel your subscription at any time through your account settings on the CloudPlay website. There are no long-term contracts, and you can cancel without hassle.",
|
||||
},
|
||||
id: "6", title: "How do I cancel my subscription?", content: "You can easily manage or cancel your subscription at any time through your account settings on the CloudPlay website. There are no long-term contracts, and you can cancel without hassle."},
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Got questions about CloudPlay? We've got answers."
|
||||
@@ -341,22 +225,14 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "c1",
|
||||
title: "Is my data secure with CloudPlay?",
|
||||
content: "Absolutely. We utilize industry-leading encryption and security protocols to protect your personal information and gaming data. Your privacy is our top priority.",
|
||||
},
|
||||
id: "c1", title: "Is my data secure with CloudPlay?", content: "Absolutely. We utilize industry-leading encryption and security protocols to protect your personal information and gaming data. Your privacy is our top priority."},
|
||||
{
|
||||
id: "c2",
|
||||
title: "Are there any regional restrictions?",
|
||||
content: "CloudPlay is available in most regions worldwide. Please check our service availability page for a detailed list of supported countries and specific regional content.",
|
||||
},
|
||||
id: "c2", title: "Are there any regional restrictions?", content: "CloudPlay is available in most regions worldwide. Please check our service availability page for a detailed list of supported countries and specific regional content."},
|
||||
]}
|
||||
ctaTitle="Still Have Questions?"
|
||||
ctaDescription="Our support team is ready to help you elevate your gaming experience. Reach out anytime!"
|
||||
ctaButton={{
|
||||
text: "Contact Support",
|
||||
href: "mailto:support@cloudplay.com",
|
||||
}}
|
||||
text: "Contact Support", href: "mailto:support@cloudplay.com"}}
|
||||
ctaIcon={MessageCircle}
|
||||
/>
|
||||
</div>
|
||||
@@ -368,23 +244,17 @@ export default function LandingPage() {
|
||||
socialLinks={[
|
||||
{
|
||||
icon: Twitter,
|
||||
href: "https://twitter.com/cloudplay",
|
||||
ariaLabel: "Twitter",
|
||||
},
|
||||
href: "https://twitter.com/cloudplay", ariaLabel: "Twitter"},
|
||||
{
|
||||
icon: Film,
|
||||
href: "https://youtube.com/cloudplay",
|
||||
ariaLabel: "YouTube",
|
||||
},
|
||||
href: "https://youtube.com/cloudplay", ariaLabel: "YouTube"},
|
||||
{
|
||||
icon: Activity,
|
||||
href: "https://twitch.tv/cloudplay",
|
||||
ariaLabel: "Twitch",
|
||||
},
|
||||
href: "https://twitch.tv/cloudplay", ariaLabel: "Twitch"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user