267 lines
12 KiB
TypeScript
267 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import { Target, Zap, Users } from 'lucide-react';
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
|
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
|
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
|
|
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
|
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="icon-arrow"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="mediumSmall"
|
|
sizing="largeSmallSizeLargeTitles"
|
|
background="circleGradient"
|
|
cardStyle="glass-depth"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="bold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={[
|
|
{
|
|
name: "About", id: "about"},
|
|
{
|
|
name: "Products", id: "products"},
|
|
{
|
|
name: "Builds", id: "pricing"},
|
|
{
|
|
name: "Contact", id: "contact"},
|
|
]}
|
|
brandName="PC Xpertz"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardTestimonial
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "plain"}}
|
|
title="Build Your Ultimate Gaming Beast"
|
|
description="Experience unparalleled performance. Expertly assembled gaming PCs tailored for elite performance and aesthetics."
|
|
testimonials={[
|
|
{
|
|
name: "Alex R.", handle: "@alexgamer", testimonial: "The build quality is insane. Everything runs buttery smooth.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/confident-successful-middle-aged-business-leader_1262-4872.jpg"},
|
|
{
|
|
name: "Sarah J.", handle: "@sarahcoder", testimonial: "PC Xpertz turned my setup into a true masterpiece.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-influencer-endorsing-wireless-mouse-from-sponsor_482257-128136.jpg"},
|
|
{
|
|
name: "Mike T.", handle: "@miket", testimonial: "Flawless cable management and top-tier components. Recommended!", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-adult-businesswoman-posing_23-2148452676.jpg"},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/tech-guru-filming-tech-review-mini-led-lights-unboxing-product_482257-124300.jpg"
|
|
imageAlt="gaming pc neon setup"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/positive-middle-aged-business-leader-window_1262-5388.jpg", alt: "Positive Middle-aged Business Leader at Window"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/content-senior-businessman-with-arms-crossed_1262-1790.jpg", alt: "Content Senior Businessman with Arms Crossed"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/closeup-portrait-confident-business-leader_1262-4808.jpg", alt: "Closeup Portrait of Confident Business Leader"},
|
|
]}
|
|
avatarText="Trusted by 500+ gamers"
|
|
marqueeItems={[
|
|
{
|
|
type: "text", text: "Liquid Cooling"},
|
|
{
|
|
type: "text", text: "RTX 4090 Ready"},
|
|
{
|
|
type: "text", text: "Custom Overclocking"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MetricSplitMediaAbout
|
|
useInvertedBackground={true}
|
|
title="Performance Obsessed"
|
|
description="At PC Xpertz, we don't just assemble computers, we engineer experiences. Our passion lies in pushing the limits of modern technology to provide you with the most immersive gaming environments possible."
|
|
metrics={[
|
|
{
|
|
value: "500+", title: "Custom Builds"},
|
|
{
|
|
value: "100%", title: "Customer Satisfaction"},
|
|
{
|
|
value: "24/7", title: "Support"},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/professional-opens-topcase-small-personal-computer-before-upgraiding-memory-wide-angle-view_346278-1212.jpg"
|
|
mediaAnimation="slide-up"
|
|
metricsAnimation="blur-reveal"
|
|
imageAlt="pc builder technician workshop"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardNineteen
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
tag: "Cooling", title: "Advanced Cooling", subtitle: "Silent, efficient", description: "Liquid cooling loops designed for maximum thermal output management.", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-hard-drive-components-blue-light_23-2149417059.jpg"},
|
|
{
|
|
tag: "GPU", title: "Pro Graphics", subtitle: "Raw power", description: "High-end GPUs optimized for ray tracing and ultra-high frame rates.", imageSrc: "http://img.b2bpic.net/free-photo/motherboard-circuit-technology-remixed-media_53876-124660.jpg"},
|
|
{
|
|
tag: "Storage", title: "Lightning Storage", subtitle: "Zero latency", description: "NVMe storage solutions that eliminate load times and stuttering.", imageSrc: "http://img.b2bpic.net/free-photo/technology-elements-background_23-2148882634.jpg"},
|
|
]}
|
|
title="Engineered for Dominance"
|
|
description="Our builds integrate the latest breakthroughs in thermal and computational design."
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={true}
|
|
products={[
|
|
{
|
|
id: "p1", name: "Xpertz Pro Alpha", price: "$1,499", imageSrc: "http://img.b2bpic.net/free-photo/top-view-gaming-setup-with-rgb-keyboard_23-2149829134.jpg"},
|
|
{
|
|
id: "p2", name: "Xpertz Elite Omega", price: "$2,299", imageSrc: "http://img.b2bpic.net/free-photo/epic-gaming-setup_23-2151954731.jpg"},
|
|
{
|
|
id: "p3", name: "Xpertz Battle Royale", price: "$1,899", imageSrc: "http://img.b2bpic.net/free-photo/close-up-rgb-system-desktop-pro-gamer-playing-first-person-shooter-video-game-online-competition-streaming-studio-is-equipped-with-professional-setup-with-powerful-pc-ready-online-game_482257-3879.jpg"},
|
|
]}
|
|
title="Featured Systems"
|
|
description="Ready-to-game configurations designed for performance seekers."
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardFive
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
plans={[
|
|
{
|
|
id: "basic", tag: "Starter", price: "$1,200", period: "/unit", description: "Solid entry into elite gaming.", button: {
|
|
text: "Customize"},
|
|
featuresTitle: "Included:", features: [
|
|
"16GB RAM", "RTX 3060", "500GB SSD"],
|
|
},
|
|
{
|
|
id: "pro", tag: "Enthusiast", price: "$2,500", period: "/unit", description: "Performance without compromise.", button: {
|
|
text: "Customize"},
|
|
featuresTitle: "Included:", features: [
|
|
"32GB RAM", "RTX 4080", "2TB NVMe"],
|
|
},
|
|
{
|
|
id: "ultra", tag: "Extreme", price: "$4,000", period: "/unit", description: "The ultimate gaming machine.", button: {
|
|
text: "Customize"},
|
|
featuresTitle: "Included:", features: [
|
|
"64GB RAM", "RTX 4090", "4TB Gen5 SSD"],
|
|
},
|
|
]}
|
|
title="Choose Your Tier"
|
|
description="Pick the configuration that matches your ambition."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
metrics={[
|
|
{
|
|
id: "m1", title: "FPS Average", value: "240+", icon: Zap,
|
|
},
|
|
{
|
|
id: "m2", title: "Build Speed", value: "72h", icon: Target,
|
|
},
|
|
{
|
|
id: "m3", title: "Users Served", value: "1k+", icon: Users,
|
|
},
|
|
]}
|
|
title="Numbers That Count"
|
|
description="Evidence-backed performance for elite gamers."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTen
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "t1", title: "Excellent", quote: "My games load instantly now.", name: "Sarah", role: "Streamer", imageSrc: "http://img.b2bpic.net/free-photo/smiley-women-show-front-view_23-2149943750.jpg"},
|
|
{
|
|
id: "t2", title: "Fantastic", quote: "The aesthetics are just incredible.", name: "Mark", role: "Gamer", imageSrc: "http://img.b2bpic.net/free-photo/pov-young-man-excited-about-his-wining-while-playing-shooter-games-stream_482257-17351.jpg"},
|
|
{
|
|
id: "t3", title: "Superb", quote: "Highly knowledgeable team.", name: "Leo", role: "Developer", imageSrc: "http://img.b2bpic.net/free-photo/woman-taking-photos-model-studio_23-2148532569.jpg"},
|
|
]}
|
|
title="Community Love"
|
|
description="See why gamers choose PC Xpertz."
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
useInvertedBackground={true}
|
|
background={{
|
|
variant: "plain"}}
|
|
tag="Build Your Build"
|
|
title="Ready to get started?"
|
|
description="Submit your requirements and let our experts design your perfect gaming rig."
|
|
imageSrc="http://img.b2bpic.net/free-photo/urban-skyline-modern-buildings_1359-880.jpg"
|
|
mediaAnimation="blur-reveal"
|
|
imageAlt="futuristic architecture blue light"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
columns={[
|
|
{
|
|
items: [
|
|
{
|
|
label: "About Us", href: "#about"},
|
|
{
|
|
label: "Products", href: "#products"},
|
|
{
|
|
label: "Contact", href: "#contact"},
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{
|
|
label: "Support", href: "#"},
|
|
{
|
|
label: "Warranty", href: "#"},
|
|
{
|
|
label: "FAQ", href: "#"},
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{
|
|
label: "Twitter", href: "#"},
|
|
{
|
|
label: "Instagram", href: "#"},
|
|
{
|
|
label: "Discord", href: "#"},
|
|
],
|
|
},
|
|
]}
|
|
logoText="PC Xpertz"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|