305 lines
18 KiB
TypeScript
305 lines
18 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import FeatureProcessSteps from '@/components/sections/feature/FeatureProcessSteps';
|
|
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
|
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
|
|
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
|
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
|
import ContactFaq from '@/components/sections/contact/ContactFaq';
|
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
|
import { Gift, MessageSquare, Play, Sparkles, Crown, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="shift-hover"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="sharp"
|
|
contentWidth="mediumSmall"
|
|
sizing="largeSmallSizeMediumTitles"
|
|
background="floatingGradient"
|
|
cardStyle="inset"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
brandName="Integral"
|
|
navItems={[
|
|
{ name: "Games", id: "games" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Pricing", id: "pricing" },
|
|
{ name: "Community", id: "testimonials" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
bottomLeftText="Your Ultimate Gaming Hub"
|
|
bottomRightText="hello@integral.games"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogoBillboard
|
|
logoText="INTEGRAL"
|
|
description="The ultimate gaming store for casual players and hardcore enthusiasts. Discover thousands of games, connect with the community, and level up your gaming experience."
|
|
buttons={[
|
|
{ text: "Browse Games", href: "#games" },
|
|
{ text: "Join Community", href: "#testimonials" }
|
|
]}
|
|
background={{ variant: "sparkles-gradient" }}
|
|
imageSrc="https://img.b2bpic.net/free-photo/young-hispanic-man-streamer-stressed-using-computer-gaming-room_839833-35208.jpg"
|
|
imageAlt="Gaming Setup"
|
|
frameStyle="card"
|
|
/>
|
|
</div>
|
|
|
|
<div id="games" data-section="games">
|
|
<ProductCardThree
|
|
title="Featured Games"
|
|
description="Explore our curated selection of top-rated games across all genres. Add to cart and start playing today."
|
|
tag="New Releases"
|
|
tagIcon={Sparkles}
|
|
products={[
|
|
{
|
|
id: "1", name: "Chronicle Quest RPG", price: "$39.99", imageSrc: "https://img.b2bpic.net/free-photo/fantasy-characters-experiencing-love_23-2151164463.jpg", imageAlt: "Chronicle Quest RPG", initialQuantity: 1
|
|
},
|
|
{
|
|
id: "2", name: "Nexus Assault", price: "$49.99", imageSrc: "https://img.b2bpic.net/free-photo/mythical-video-game-inspired-landscape-with-human-castle_23-2150974564.jpg", imageAlt: "Nexus Assault", initialQuantity: 1
|
|
},
|
|
{
|
|
id: "3", name: "Mindcraft Legends", price: "$29.99", imageSrc: "https://img.b2bpic.net/free-photo/few-knights-armor-is-fighting_1398-2146.jpg", imageAlt: "Mindcraft Legends", initialQuantity: 1
|
|
}
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<FeatureProcessSteps
|
|
tag="How We Work"
|
|
tagIcon={Zap}
|
|
title="Your Gaming Journey Starts Here"
|
|
description="From discovery to download, we've streamlined every step to get you playing your favorite games faster than ever before."
|
|
steps={[
|
|
{
|
|
number: "01", title: "Browse & Discover", tag: "Explore", description: "Search through thousands of games across all genres, from indie gems to AAA blockbusters. Use smart filters to find exactly what you want."
|
|
},
|
|
{
|
|
number: "02", title: "Compare & Decide", tag: "Research", description: "Read community reviews, check system requirements, watch gameplay videos, and make informed decisions before you buy."
|
|
},
|
|
{
|
|
number: "03", title: "Purchase & Play", tag: "Action", description: "Secure checkout with multiple payment options, instant delivery, and lifetime access to your games. Start playing in seconds."
|
|
}
|
|
]}
|
|
buttons={[
|
|
{ text: "Start Exploring", href: "#games" }
|
|
]}
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFive
|
|
title="What Our Gamers Say"
|
|
description="Join thousands of satisfied players who've found their favorite games on Integral."
|
|
tag="Community Reviews"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Alex Chen, Pro Streamer", date: "Date: 15 January 2025", title: "Best gaming platform ever!", quote: "Integral has completely changed how I discover and purchase games. The community features are fantastic, and the checkout process is incredibly fast. Highly recommended!", tag: "Streamer", avatarSrc: "https://img.b2bpic.net/free-photo/portrait-young-handsome-man-earphones-dark-haired-man-casual-clothes-looking-camera-portrait-concept_74855-24635.jpg", avatarAlt: "Alex Chen", imageSrc: "https://img.b2bpic.net/free-photo/portrait-young-handsome-man-earphones-dark-haired-man-casual-clothes-looking-camera-portrait-concept_74855-24635.jpg"
|
|
},
|
|
{
|
|
id: "2", name: "Jordan Smith, Casual Gamer", date: "Date: 12 January 2025", title: "Found my new favorite game!", quote: "I was skeptical at first, but Integral's recommendations algorithm actually works. I've discovered so many games I love that I never would've found elsewhere.", tag: "Casual", avatarSrc: "https://img.b2bpic.net/free-photo/pro-gamer-broadcasting-gameplay-front-internet-audience_482257-77071.jpg", avatarAlt: "Jordan Smith", imageSrc: "https://img.b2bpic.net/free-photo/pro-gamer-broadcasting-gameplay-front-internet-audience_482257-77071.jpg"
|
|
},
|
|
{
|
|
id: "3", name: "Maya Rodriguez, Esports Player", date: "Date: 10 January 2025", title: "Professional-grade service", quote: "As a competitive player, I need reliability. Integral delivers. Zero lag in downloads, instant access to my games, and a community that actually gets what gaming is about.", tag: "Esports", avatarSrc: "https://img.b2bpic.net/free-photo/hispanic-teenager-playing-video-game-holding-controller-relaxed-with-serious-expression-face-simple-natural-looking-camera_839833-3187.jpg", avatarAlt: "Maya Rodriguez", imageSrc: "https://img.b2bpic.net/free-photo/hispanic-teenager-playing-video-game-holding-controller-relaxed-with-serious-expression-face-simple-natural-looking-camera_839833-3187.jpg"
|
|
},
|
|
{
|
|
id: "4", name: "Dev Park, Game Collector", date: "Date: 8 January 2025", title: "Amazing selection and value", quote: "I've been building my game library for years. Integral offers the best combination of selection, pricing, and customer service. My go-to platform now.", tag: "Collector", avatarSrc: "https://img.b2bpic.net/free-photo/close-up-shot-pro-gamer-broadcasting-game-internet-talking-with-audience_482257-99050.jpg", avatarAlt: "Dev Park", imageSrc: "https://img.b2bpic.net/free-photo/close-up-shot-pro-gamer-broadcasting-game-internet-talking-with-audience_482257-99050.jpg"
|
|
},
|
|
{
|
|
id: "5", name: "Sarah Thompson, Indie Game Dev", date: "Date: 5 January 2025", title: "Supporting indie games with pride", quote: "Love that Integral actively supports indie developers. The platform gives smaller studios the visibility they deserve, and gamers get access to unique, creative experiences.", tag: "Developer", avatarSrc: "https://img.b2bpic.net/free-photo/portrait-young-man-with-facial-hair_181624-21795.jpg", avatarAlt: "Sarah Thompson", imageSrc: "https://img.b2bpic.net/free-photo/portrait-young-man-with-facial-hair_181624-21795.jpg"
|
|
},
|
|
{
|
|
id: "6", name: "Marcus Johnson, Retro Enthusiast", date: "Date: 2 January 2025", title: "Nostalgia meets modern convenience", quote: "Finally found a platform that respects classic games. Integral's retro collection is incredible, and the interface makes it easy to find gaming gems from any era.", tag: "Retro Gamer", avatarSrc: "https://img.b2bpic.net/free-photo/man-having-fun-gaming-laughing-with-friends_482257-116059.jpg", avatarAlt: "Marcus Johnson", imageSrc: "https://img.b2bpic.net/free-photo/man-having-fun-gaming-laughing-with-friends_482257-116059.jpg"
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardEight
|
|
title="Membership Plans"
|
|
description="Choose the perfect plan to maximize your gaming experience."
|
|
tag="Pricing"
|
|
tagIcon={Gift}
|
|
plans={[
|
|
{
|
|
id: "free", badge: "Perfect to Start", badgeIcon: Play,
|
|
price: "Free", subtitle: "Explore our catalog", buttons: [
|
|
{ text: "Get Started", href: "#games" }
|
|
],
|
|
features: [
|
|
"Access to free games library", "Community features access", "Monthly giveaways eligibility", "Game recommendations"
|
|
]
|
|
},
|
|
{
|
|
id: "premium", badge: "Most Popular", badgeIcon: Sparkles,
|
|
price: "$9.99/month", subtitle: "Ultimate gaming experience", buttons: [
|
|
{ text: "Subscribe Now", href: "#" }
|
|
],
|
|
features: [
|
|
"All free plan features", "Exclusive discounts (up to 80% off)", "Early access to new releases", "Ad-free browsing experience", "Priority customer support", "Monthly premium game credits"
|
|
]
|
|
},
|
|
{
|
|
id: "pro", badge: "Best Value", badgeIcon: Crown,
|
|
price: "$49.99/year", subtitle: "Annual savings plan", buttons: [
|
|
{ text: "Subscribe Annual", href: "#" }
|
|
],
|
|
features: [
|
|
"All premium plan features", "Extra savings vs monthly", "VIP community badge", "Quarterly game bundles", "Exclusive beta access", "Birthday month bonuses"
|
|
]
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardSeven
|
|
title="Integral by the Numbers"
|
|
description="See why gamers worldwide choose Integral."
|
|
tag="Our Impact"
|
|
metrics={[
|
|
{
|
|
id: "1", value: "50K+", title: "Games in Our Library", items: [
|
|
"AAA blockbusters", "Indie hidden gems", "Retro classics", "Early access titles"
|
|
]
|
|
},
|
|
{
|
|
id: "2", value: "2.5M+", title: "Active Gamers Worldwide", items: [
|
|
"150+ countries", "24/7 community support", "Regional tournaments", "Global leaderboards"
|
|
]
|
|
},
|
|
{
|
|
id: "3", value: "99.9%", title: "Platform Uptime", items: [
|
|
"Lightning-fast downloads", "Instant game activation", "Zero downtime maintenance", "Redundant servers"
|
|
]
|
|
},
|
|
{
|
|
id: "4", value: "4.8/5", title: "Average Player Rating", items: [
|
|
"Trusted reviews system", "Verified purchase badges", "Community moderation", "Transparent feedback"
|
|
]
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqDouble
|
|
title="Frequently Asked Questions"
|
|
description="Everything you need to know about Integral."
|
|
tag="Help & Support"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "How do I download my games?", content: "After purchase, games are instantly available in your library. Click the download button, and our optimized launcher handles installation. Most games download in minutes depending on size and your connection speed."
|
|
},
|
|
{
|
|
id: "2", title: "Can I play offline?", content: "Yes! Once downloaded, most games can be played offline. Some multiplayer games require an internet connection for online features, but single-player campaigns work offline."
|
|
},
|
|
{
|
|
id: "3", title: "What payment methods do you accept?", content: "We accept all major credit cards, PayPal, Apple Pay, Google Pay, and regional payment methods in 150+ countries. All transactions are encrypted and secure."
|
|
},
|
|
{
|
|
id: "4", title: "Is there a refund policy?", content: "Yes! We offer a 30-day money-back guarantee if you're not satisfied with your purchase. No questions asked. Simply request a refund through your account settings."
|
|
},
|
|
{
|
|
id: "5", title: "How do I get discounts?", content: "Subscribe to our Premium membership for up to 80% off on thousands of games. We also run seasonal sales, flash deals, and loyalty rewards for our community members."
|
|
},
|
|
{
|
|
id: "6", title: "Can I share my games with friends?", content: "Each game license is personal to your account. However, you can gift games directly through our platform or share your library on shared devices with family through family sharing features."
|
|
}
|
|
]}
|
|
animationType="smooth"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactFaq
|
|
ctaTitle="Get in Touch"
|
|
ctaDescription="Have questions? Our support team is ready to help you 24/7. Reach out to us today."
|
|
ctaIcon={MessageSquare}
|
|
ctaButton={{
|
|
text: "Contact Support", href: "mailto:hello@integral.games"
|
|
}}
|
|
faqs={[
|
|
{
|
|
id: "1", title: "How long does customer support take to respond?", content: "Our team responds to all inquiries within 2-4 hours during business hours. For urgent issues, use our live chat feature for immediate assistance."
|
|
},
|
|
{
|
|
id: "2", title: "Do you have a community forum?", content: "Yes! Join our vibrant community forum where gamers share tips, organize tournaments, and discuss their favorite games. Moderators and developers actively participate."
|
|
},
|
|
{
|
|
id: "3", title: "How can I report a technical issue?", content: "Visit your account settings and use the 'Report Issue' feature. Include details about your system and the problem. Our technical team will investigate and get back to you with a solution."
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
accordionAnimationType="smooth"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
logoText="Integral"
|
|
columns={[
|
|
{
|
|
items: [
|
|
{ label: "Browse Games", href: "#games" },
|
|
{ label: "Pricing", href: "#pricing" },
|
|
{ label: "Community", href: "#testimonials" }
|
|
]
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "About Us", href: "#about" },
|
|
{ label: "Blog", href: "#" },
|
|
{ label: "Careers", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Support", href: "#contact" },
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Twitter", href: "https://twitter.com" },
|
|
{ label: "Discord", href: "https://discord.com" },
|
|
{ label: "YouTube", href: "https://youtube.com" }
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |