3 Commits

Author SHA1 Message Date
cc8eed3879 Update src/app/page.tsx 2026-04-15 13:41:49 +00:00
8b0fb583c7 Update src/app/page.tsx 2026-04-15 13:39:39 +00:00
18c03e63ab Merge version_2 into main
Merge version_2 into main
2026-04-15 13:38:45 +00:00

View File

@@ -2,7 +2,6 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
@@ -12,8 +11,7 @@ import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import SplitAbout from '@/components/sections/about/SplitAbout';
import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import { BarChart2, Edit3, Zap } from "lucide-react";
import { BarChart2, Edit3, Zap, BrainCircuit } from "lucide-react";
export default function GamingPage() {
return (
@@ -30,133 +28,157 @@ export default function GamingPage() {
headingFontWeight="bold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Getting Started", id: "hero" },
{ name: "Fabric Features", id: "features" },
{ name: "Modding API", id: "about" },
{ name: "Community", id: "team" }
]}
brandName="FabricForge"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Getting Started", id: "hero" },
{ name: "Fabric Features", id: "features" },
{ name: "Mod Idea Guide", id: "mod-guide" },
{ name: "Community", id: "team" }
]}
brandName="FabricForge"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardRotatedCarousel
background={{ variant: "sparkles-gradient" }}
title="Master the Fabric Modding Ecosystem"
description="Build lightweight, high-performance mods for modern Minecraft versions. Join the thriving Fabric community and start creating your own game experience today."
buttons={[
{ text: "Get Started", href: "#features" },
{ text: "View Docs", href: "#contact" }
]}
carouselItems={[
{ id: "1", imageSrc: "http://img.b2bpic.net/free-photo/3d-fantasy-scene_23-2151128059.jpg", imageAlt: "Modded Gameplay" },
{ id: "2", imageSrc: "http://img.b2bpic.net/free-photo/river-landscape-illustration-pixel-art-style_23-2151793132.jpg", imageAlt: "Pixel Art World" },
{ id: "3", imageSrc: "http://img.b2bpic.net/free-photo/financial-software-ui-pc-screen-apartment-office-desk_482257-122945.jpg", imageAlt: "Code IDE" },
{ id: "4", imageSrc: "http://img.b2bpic.net/free-photo/3d-fantasy-scene_23-2151128032.jpg", imageAlt: "Game Assets" },
{ id: "5", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-futuristic-sci-fi-colorful-techno-lights-creating-cool-shapes-cool-background_181624-19814.jpg", imageAlt: "Techno Lights" },
{ id: "6", imageSrc: "http://img.b2bpic.net/free-photo/people-hangout-together-coffee-shop_53876-95318.jpg", imageAlt: "Modding Community" }
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardRotatedCarousel
background={{ variant: "sparkles-gradient" }}
title="Master the Fabric Modding Ecosystem"
description="Build lightweight, high-performance mods for modern Minecraft versions. Join the thriving Fabric community and start creating your own game experience today."
buttons={[
{ text: "Get Started", href: "#features" },
{ text: "View Docs", href: "#contact" }
]}
carouselItems={[
{ id: "1", imageSrc: "http://img.b2bpic.net/free-photo/3d-fantasy-scene_23-2151128059.jpg", imageAlt: "Modded Gameplay" },
{ id: "2", imageSrc: "http://img.b2bpic.net/free-photo/river-landscape-illustration-pixel-art-style_23-2151793132.jpg", imageAlt: "Pixel Art World" },
{ id: "3", imageSrc: "http://img.b2bpic.net/free-photo/financial-software-ui-pc-screen-apartment-office-desk_482257-122945.jpg", imageAlt: "Code IDE" },
{ id: "4", imageSrc: "http://img.b2bpic.net/free-photo/3d-fantasy-scene_23-2151128032.jpg", imageAlt: "Game Assets" },
{ id: "5", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-futuristic-sci-fi-colorful-techno-lights-creating-cool-shapes-cool-background_181624-19814.jpg", imageAlt: "Techno Lights" },
{ id: "6", imageSrc: "http://img.b2bpic.net/free-photo/people-hangout-together-coffee-shop_53876-95318.jpg", imageAlt: "Modding Community" }
]}
/>
</div>
<div id="about" data-section="about">
<SplitAbout
textboxLayout="split"
title="Why Choose Fabric?"
description="Fabric is a lightweight, modular modding toolchain for Minecraft. It offers faster update times, a cleaner development experience, and modular design that lets you use only the features you need."
bulletPoints={[
{ title: "Blazing Fast Updates", description: "Fabric updates almost instantly with new game snapshots." },
{ title: "Modular Design", description: "Easily mix and match modding components." },
{ title: "Rich API Ecosystem", description: "Access a wide range of APIs for rendering, networking, and game logic." }
]}
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-gamer-playing-computer_23-2149829145.jpg"
/>
</div>
<div id="about" data-section="about">
<SplitAbout
textboxLayout="split"
useInvertedBackground={false}
title="Why Choose Fabric?"
description="Fabric is a lightweight, modular modding toolchain for Minecraft. It offers faster update times, a cleaner development experience, and modular design that lets you use only the features you need."
bulletPoints={[
{ title: "Blazing Fast Updates", description: "Fabric updates almost instantly with new game snapshots." },
{ title: "Modular Design", description: "Easily mix and match modding components." },
{ title: "Rich API Ecosystem", description: "Access a wide range of APIs for rendering, networking, and game logic." }
]}
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-gamer-playing-computer_23-2149829145.jpg"
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyFive
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
features={[
{
title: "Advanced Mod Loader", description: "Lightning-fast load times for all your custom modifications.", icon: Zap,
mediaItems: [
{ imageSrc: "http://img.b2bpic.net/free-vector/video-producing-computer-hardware-25-flat-color-icon-pack-including-directors-chair-movie-lady-character_1142-24873.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/person-working-animation-porject_23-2149269912.jpg" }
]
},
{
title: "Voxel Rendering API", description: "State-of-the-art rendering tools for custom biomes and structures.", icon: Edit3,
mediaItems: [
{ imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150165975.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/executive-workspace-features-digital-dashboard-with-financial-charts_482257-123845.jpg" }
]
},
{
title: "WorldGen Tools", description: "Create unique terrain generation without complex setup.", icon: BarChart2,
mediaItems: [
{ imageSrc: "http://img.b2bpic.net/free-photo/settings-icon-front-side_187299-39535.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/pc-data-center-managing-network-resources-using-node-tree-software_482257-126003.jpg" }
]
}
]}
title="Fabric Features"
description="Unlock the full potential of your modding creativity."
/>
</div>
<div id="mod-guide" data-section="mod-guide">
<MetricCardTwo
title="Mod Idea Brainstorming Guide"
description="Turn your spark of an idea into a fully-fledged Minecraft mod with our interactive workflow."
tag="Innovation"
tagIcon={BrainCircuit}
animationType="slide-up"
gridVariant="uniform-all-items-equal"
textboxLayout="default"
useInvertedBackground={false}
metrics={[
{ id: "1", value: "01", description: "Conceptualize: Identify a gameplay niche or quality-of-life improvement." },
{ id: "2", value: "02", description: "Prototype: Sketch mechanics, logic, and necessary assets." },
{ id: "3", value: "03", description: "Refine: Validate concepts with experienced Fabric developers." }
]}
/>
</div>
<div id="team" data-section="team">
<TeamCardTwo
animationType="slide-up"
gridVariant="four-items-2x2-equal-grid"
title="Core Contributors"
description="Meet the passionate individuals keeping the Fabric ecosystem healthy and thriving."
members={[
{ id: "1", name: "Alex Smith", role: "Loader Architect", description: "Dedicated to low-level optimization and game performance.", imageSrc: "http://img.b2bpic.net/free-photo/entertainer-unpacking-mobile-phone-review-it-technology-online-channel_482257-121555.jpg" },
{ id: "2", name: "Jordan Lee", role: "Documentation Lead", description: "Ensuring every API function is well-documented for developers.", imageSrc: "http://img.b2bpic.net/free-photo/senior-woman-patient-asking-her-physician-about-new-treatment-plan_482257-117646.jpg" },
{ id: "3", name: "Sam Taylor", role: "Server Expert", description: "Building tools for stable, efficient server modding.", imageSrc: "http://img.b2bpic.net/free-photo/it-operator-prevents-servers-overload_482257-75899.jpg" },
{ id: "4", name: "Jamie Reed", role: "Asset Lead", description: "Managing the massive collection of community mods.", imageSrc: "http://img.b2bpic.net/free-photo/shoulder-view-caucasian-man-using-pc-setup-playing-multiplayer-online-action-game-talking-team-headset-gamer-streaming-fast-paced-space-shooter-while-explaining-gameplay-subscribers_482257-50437.jpg" }
]}
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyFive
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
features={[
{
title: "Advanced Mod Loader", description: "Lightning-fast load times for all your custom modifications.", icon: Zap,
mediaItems: [
{ imageSrc: "http://img.b2bpic.net/free-vector/video-producing-computer-hardware-25-flat-color-icon-pack-including-directors-chair-movie-lady-character_1142-24873.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/person-working-animation-porject_23-2149269912.jpg" }
]
},
{
title: "Voxel Rendering API", description: "State-of-the-art rendering tools for custom biomes and structures.", icon: Edit3,
mediaItems: [
{ imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150165975.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/executive-workspace-features-digital-dashboard-with-financial-charts_482257-123845.jpg" }
]
},
{
title: "WorldGen Tools", description: "Create unique terrain generation without complex setup.", icon: BarChart2,
mediaItems: [
{ imageSrc: "http://img.b2bpic.net/free-photo/settings-icon-front-side_187299-39535.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/pc-data-center-managing-network-resources-using-node-tree-software_482257-126003.jpg" }
]
}
]}
title="Fabric Features"
description="Unlock the full potential of your modding creativity."
/>
</div>
<div id="faq" data-section="faq">
<FaqDouble
title="Fabric Modding FAQ"
faqs={[
{ id: "1", title: "Is Fabric compatible with Forge?", content: "Fabric and Forge are distinct ecosystems. Mods for one will not run natively on the other, though bridges are available." },
{ id: "2", title: "How hard is it to switch?", content: "Fabric's modern approach makes it easy to learn for anyone with basic Java skills." },
{ id: "3", title: "Where to download?", content: "Visit the official Fabric website for the latest launcher and installer." }
]}
faqsAnimation="slide-up"
textboxLayout="default"
/>
</div>
<div id="team" data-section="team">
<TeamCardTwo
animationType="slide-up"
gridVariant="four-items-2x2-equal-grid"
title="Core Contributors"
description="Meet the passionate individuals keeping the Fabric ecosystem healthy and thriving."
textboxLayout="default"
useInvertedBackground={false}
members={[
{ id: "1", name: "Alex Smith", role: "Loader Architect", description: "Dedicated to low-level optimization and game performance.", imageSrc: "http://img.b2bpic.net/free-photo/entertainer-unpacking-mobile-phone-review-it-technology-online-channel_482257-121555.jpg" },
{ id: "2", name: "Jordan Lee", role: "Documentation Lead", description: "Ensuring every API function is well-documented for developers.", imageSrc: "http://img.b2bpic.net/free-photo/senior-woman-patient-asking-her-physician-about-new-treatment-plan_482257-117646.jpg" },
{ id: "3", name: "Sam Taylor", role: "Server Expert", description: "Building tools for stable, efficient server modding.", imageSrc: "http://img.b2bpic.net/free-photo/it-operator-prevents-servers-overload_482257-75899.jpg" },
{ id: "4", name: "Jamie Reed", role: "Asset Lead", description: "Managing the massive collection of community mods.", imageSrc: "http://img.b2bpic.net/free-photo/shoulder-view-caucasian-man-using-pc-setup-playing-multiplayer-online-action-game-talking-team-headset-gamer-streaming-fast-paced-space-shooter-while-explaining-gameplay-subscribers_482257-50437.jpg" }
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
tag="Connect"
title="Join our Hub"
description="Sign up to stay updated on the latest Fabric developments and news."
background={{ variant: "sparkles-gradient" }}
/>
</div>
<div id="faq" data-section="faq">
<FaqDouble
title="Fabric Modding FAQ"
description="Answers to common questions about the Fabric ecosystem."
faqs={[
{ id: "1", title: "Is Fabric compatible with Forge?", content: "Fabric and Forge are distinct ecosystems. Mods for one will not run natively on the other, though bridges are available." },
{ id: "2", title: "How hard is it to switch?", content: "Fabric's modern approach makes it easy to learn for anyone with basic Java skills." },
{ id: "3", title: "Where to download?", content: "Visit the official Fabric website for the latest launcher and installer." }
]}
faqsAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseReveal
logoText="FabricForge"
columns={[
{ title: "Fabric", items: [{ label: "Home", href: "#" }, { label: "Download", href: "#" }] },
{ title: "Community", items: [{ label: "Discord", href: "#" }, { label: "Forum", href: "#" }] },
{ title: "Resources", items: [{ label: "Documentation", href: "#" }, { label: "API Reference", href: "#" }] }
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
tag="Connect"
title="Join our Hub"
description="Sign up to stay updated on the latest Fabric developments and news."
background={{ variant: "sparkles-gradient" }}
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseReveal
logoText="FabricForge"
columns={[
{ title: "Fabric", items: [{ label: "Home", href: "#" }, { label: "Download", href: "#" }] },
{ title: "Community", items: [{ label: "Discord", href: "#" }, { label: "Forum", href: "#" }] },
{ title: "Resources", items: [{ label: "Documentation", href: "#" }, { label: "API Reference", href: "#" }] }
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}