243 lines
11 KiB
TypeScript
243 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
|
import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
|
|
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
|
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
|
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import TeamCardSix from '@/components/sections/team/TeamCardSix';
|
|
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="soft"
|
|
contentWidth="small"
|
|
sizing="mediumLarge"
|
|
background="circleGradient"
|
|
cardStyle="outline"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "hero"},
|
|
{
|
|
name: "Games", id: "games"},
|
|
{
|
|
name: "Team", id: "team"},
|
|
{
|
|
name: "Contact", id: "contact"},
|
|
]}
|
|
brandName="IndieCore Studios"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboard
|
|
background={{
|
|
variant: "gradient-bars"}}
|
|
title="Crafting Immersive Worlds"
|
|
description="IndieCore Studios pushes the boundaries of storytelling, mechanics, and visual fidelity. Experience the future of interactive entertainment."
|
|
buttons={[
|
|
{
|
|
text: "View Our Games", href: "#games"},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/retro-3d-shapes-vaporwave-style_23-2148981119.jpg"
|
|
imageAlt="IndieCore Studios featured cinematic scene"
|
|
mediaAnimation="slide-up"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/neon-hologram-tiger_23-2151558646.jpg", alt: "Neon hologram of tiger"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/cyberpunk-city-street-night-with-neon-lights-futuristic-aesthetic_23-2151488736.jpg", alt: "Cyberpunk city street at night with neon lights and futuristic aesthetic"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/cyberpunk-boy-illustration_23-2151728183.jpg", alt: "Cyberpunk boy illustration"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/cyberpunk-city-street-night-with-neon-lights-futuristic-aesthetic_23-2151488741.jpg", alt: "Cyberpunk city street at night with neon lights and futuristic aesthetic"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/bigfoot-represented-neon-glow_23-2151322946.jpg", alt: "Bigfoot represented in neon glow"},
|
|
]}
|
|
marqueeItems={[
|
|
{
|
|
type: "text", text: "Innovation"},
|
|
{
|
|
type: "text", text: "Storytelling"},
|
|
{
|
|
type: "text", text: "Performance"},
|
|
{
|
|
type: "text", text: "Community"},
|
|
{
|
|
type: "text", text: "Excellence"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentyEight
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: "1", title: "Narrative Depth", subtitle: "Story-driven campaigns", category: "Creative", value: "20+"},
|
|
{
|
|
id: "2", title: "Engine Performance", subtitle: "High fidelity rendering", category: "Technical", value: "120fps"},
|
|
{
|
|
id: "3", title: "Community Focus", subtitle: "Engaging player base", category: "Community", value: "1M+"},
|
|
]}
|
|
title="Studio Pillars"
|
|
description="Our core focus areas that define every game we build."
|
|
/>
|
|
</div>
|
|
|
|
<div id="games" data-section="games">
|
|
<ProductCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={true}
|
|
products={[
|
|
{
|
|
id: "g1", name: "Neon Shadows", price: "Play Now on Steam", imageSrc: "http://img.b2bpic.net/free-photo/dark-fantasy-creature-scene_23-2151136073.jpg"},
|
|
{
|
|
id: "g2", name: "Cyber Reign", price: "Play Now on Steam", imageSrc: "http://img.b2bpic.net/free-photo/8-bits-objects-gaming-assets_23-2151143643.jpg"},
|
|
{
|
|
id: "g3", name: "Void Wanderer", price: "Play Now on Steam", imageSrc: "http://img.b2bpic.net/free-photo/people-white-clothes-stand-rock-by-sea-dusk-looking-into-distance-illustration_456031-16.jpg"},
|
|
{
|
|
id: "g4", name: "Red Sector", price: "Play Now on Steam", imageSrc: "http://img.b2bpic.net/free-photo/front-view-people-with-medical-masks-pandemic_23-2148748975.jpg"},
|
|
{
|
|
id: "g5", name: "Abyss Keeper", price: "Play Now on Steam", imageSrc: "http://img.b2bpic.net/free-photo/child-magic-school-learning-spells_23-2150170074.jpg"},
|
|
{
|
|
id: "g6", name: "Midnight Echo", price: "Play Now on Steam", imageSrc: "http://img.b2bpic.net/free-photo/haunted-house-gothic-style_23-2151626657.jpg"},
|
|
]}
|
|
title="Featured Titles"
|
|
description="Explore our library of critically acclaimed PC and console games."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardSeven
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "m1", value: "15+", title: "Game Releases", items: [
|
|
"Successfully launched titles", "Cross-platform support"],
|
|
},
|
|
{
|
|
id: "m2", value: "5M+", title: "Happy Players", items: [
|
|
"Monthly active users", "Global player community"],
|
|
},
|
|
{
|
|
id: "m3", value: "12", title: "Industry Awards", items: [
|
|
"Best Indie Studio", "Design Excellence"],
|
|
},
|
|
]}
|
|
title="Studio Achievements"
|
|
description="Our impact on the gaming landscape since 2018."
|
|
/>
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<TeamCardSix
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={true}
|
|
members={[
|
|
{
|
|
id: "t1", name: "Alex Rivers", role: "Creative Director", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-posing-with-avantgarde-head-piece_23-2149020818.jpg"},
|
|
{
|
|
id: "t2", name: "Jordan P", role: "Lead Programmer", imageSrc: "http://img.b2bpic.net/free-photo/streamer-rgb-lit-studio-chatting-with-audience_482257-122959.jpg"},
|
|
{
|
|
id: "t3", name: "Sam V", role: "Art Lead", imageSrc: "http://img.b2bpic.net/free-photo/parenting-content-creator_23-2151488622.jpg"},
|
|
]}
|
|
title="The Creators"
|
|
description="Behind every pixel and line of code is a team of passionate creators."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonial" data-section="testimonial">
|
|
<TestimonialCardThirteen
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah J.", handle: "@gamer", testimonial: "The atmosphere is unmatched.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-business-man-posing-with-crossed-arms_23-2149206526.jpg"},
|
|
{
|
|
id: "2", name: "Marc T.", handle: "@critique", testimonial: "Deep narrative and incredible art.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-man-posing_23-2150171293.jpg"},
|
|
{
|
|
id: "3", name: "Elena W.", handle: "@devtalk", testimonial: "A must-play experience.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/focused-man-rgb-lights-lit-living-room-playing-videogames_482257-116287.jpg"},
|
|
{
|
|
id: "4", name: "Leo B.", handle: "@playmore", testimonial: "The game design is brilliant.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/upbeat-freelancer-front-digital-device_482257-124312.jpg"},
|
|
{
|
|
id: "5", name: "Chris K.", handle: "@proplayer", testimonial: "Incredible production value in every release.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/closeup-content-pretty-businesswoman-glasses_1262-1740.jpg"},
|
|
]}
|
|
showRating={true}
|
|
title="Player Voices"
|
|
description="What the industry and our players say about our work."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqDouble
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
faqs={[
|
|
{
|
|
id: "f1", title: "Do you publish third-party titles?", content: "Yes, we look for high-potential indie games."},
|
|
{
|
|
id: "f2", title: "Where can we apply for jobs?", content: "Check our Careers page or email us."},
|
|
{
|
|
id: "f3", title: "Can I stream your games?", content: "You are free to stream all our titles!"},
|
|
]}
|
|
title="Game Dev Insights"
|
|
description="Common inquiries about our studio and titles."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "gradient-bars"}}
|
|
tag="Get in touch"
|
|
title="Business Inquiries"
|
|
description="Have a game idea? Want to partner? Let's talk business."
|
|
buttonText="Send Inquiry"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoReveal
|
|
logoText="IndieCore Studios"
|
|
leftLink={{
|
|
text: "Privacy Policy", href: "#"}}
|
|
rightLink={{
|
|
text: "Contact Us", href: "#contact"}}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |