314 lines
18 KiB
TypeScript
314 lines
18 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
|
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
|
import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
|
|
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
|
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
|
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
|
import { Activity, CheckCircle, Cog, ShieldCheck, Sparkles, Users } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="soft"
|
|
contentWidth="compact"
|
|
sizing="mediumLarge"
|
|
background="noise"
|
|
cardStyle="glass-depth"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "#hero"},
|
|
{
|
|
name: "Features", id: "#features"},
|
|
{
|
|
name: "Builds", id: "#products"},
|
|
{
|
|
name: "Testimonials", id: "#testimonials"},
|
|
{
|
|
name: "FAQ", id: "#faq"},
|
|
{
|
|
name: "Contact", id: "#contact"},
|
|
]}
|
|
logoSrc="http://img.b2bpic.net/free-photo/desk-arrangement-with-laptop-notebooks_23-2149073068.jpg"
|
|
logoAlt="PC Builder Pro Logo"
|
|
brandName="PC Builder Pro"
|
|
button={{
|
|
text: "Start Building Now", href: "#products"}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroOverlayTestimonial
|
|
title="Build Your Dream PC Visually"
|
|
description="Select real components like RTX 5090 and Ryzen 9 9800X3D, check compatibility instantly, and see your custom build come to life. Share, compare, and purchase with confidence."
|
|
testimonials={[
|
|
{
|
|
name: "Alex 'GamerGod' Turner", handle: "@GamerGod", testimonial: "This platform made configuring my ultimate gaming rig effortless. The compatibility checker saved me so much headache!", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-hispanic-man-streamer-playing-video-game-using-joystick-gaming-room_839833-8031.jpg", imageAlt: "Alex Turner"},
|
|
{
|
|
name: "Sarah Chen", handle: "@CreativeSarah", testimonial: "As a content creator, visualizing my workstation before buying was crucial. This tool is a game-changer for high-performance builds.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/process-creating-stand-up-comedy_23-2151058813.jpg", imageAlt: "Sarah Chen"},
|
|
{
|
|
name: "David Miller", handle: "@TechEnthusiast", testimonial: "The real-time pricing and component details are incredibly accurate. It's the best planning tool for serious PC builders.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-workman-white-wall_23-2147772246.jpg", imageAlt: "David Miller"},
|
|
{
|
|
name: "Emily Rodriguez", handle: "@StreamQueen", testimonial: "I used to dread buying PC parts, but this builder made it fun and stress-free. My streams have never looked better!", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/middle-eastern-businessman-does-daily-tasks-corporate-job_482257-116713.jpg", imageAlt: "Emily Rodriguez"},
|
|
{
|
|
name: "Michael Lee", handle: "@PCGuru", testimonial: "Finally, a tool that truly understands PC building. The component database is exhaustive, and the visuals are stunning.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/happy-smiling-man-winter-sweater-is-posing-photographer-studio_613910-13711.jpg", imageAlt: "Michael Lee"},
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "Start Building Now", href: "#products"},
|
|
]}
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/middle-age-greyhaired-woman-streamer-playing-video-game-using-computer-gaming-room_839833-20313.jpg", alt: "Alex Turner"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/closeup-content-pretty-businesswoman-glasses_1262-1740.jpg", alt: "Sarah Chen"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/handsome-bearded-tailor-standing-with-crossed-arms-sewing-workshop_613910-18122.jpg", alt: "David Miller"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/portrait-asmr-artist-uses-quality-mic-studio-anti-stress-video_482257-124195.jpg", alt: "Emily Rodriguez"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/young-hispanic-man-streamer-playing-video-game-using-joystick-gaming-room_839833-8031.jpg", alt: "Gaming Enthusiast"},
|
|
]}
|
|
avatarText="Trusted by thousands of builders"
|
|
imageSrc="http://img.b2bpic.net/free-photo/neon-motherboard-background_23-2151704837.jpg"
|
|
imageAlt="High-end custom PC build with RGB lighting"
|
|
showBlur={true}
|
|
textPosition="bottom"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextSplitAbout
|
|
useInvertedBackground={true}
|
|
title="About Our Next-Gen PC Builder Platform"
|
|
description={[
|
|
"PC Builder Pro is revolutionizing how gaming enthusiasts, content creators, and professionals configure their ideal computers. Our interactive platform takes the guesswork out of component selection, offering a seamless experience from visualization to purchase.", "We understand the complexities of building a custom PC. That's why we've integrated a powerful, real-time compatibility engine and pricing aggregator, ensuring every component you select works perfectly together and fits your budget. Build with confidence, knowing you're making informed decisions."]}
|
|
buttons={[
|
|
{
|
|
text: "Learn More", href: "#features"},
|
|
]}
|
|
showBorder={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Real-time Compatibility Check", description: "Never worry about component clashes again. Our intelligent engine instantly validates CPU, motherboard, RAM, and PSU pairings as you build.", imageSrc: "http://img.b2bpic.net/free-photo/circuit-board-close-up-with-different-components_23-2149174328.jpg", imageAlt: "Compatibility check UI"},
|
|
{
|
|
title: "Interactive 3D Visualization", description: "See your dream PC come to life. Visualize your chosen components within a virtual case, ensuring aesthetics and fit meet your expectations.", imageSrc: "http://img.b2bpic.net/free-photo/cyberpunk-circuit-board_23-2151977489.jpg", imageAlt: "3D render of PC components"},
|
|
{
|
|
title: "Dynamic Performance & Pricing", description: "Get instant feedback on your build's estimated performance and current market pricing. Compare options and optimize for power and value.", imageSrc: "http://img.b2bpic.net/free-photo/shoulder-shot-engineer-working-with-architectural-plans-cad-software-desktop-computer-designer-using-arhitecture-blueprints-buildings-working-overtime-creating-studying_482257-13413.jpg", imageAlt: "PC performance and pricing graph"},
|
|
]}
|
|
title="Key Features That Empower Your Build"
|
|
description="Our platform is designed to make custom PC building accessible, accurate, and enjoyable for everyone. Discover the tools that put you in control."
|
|
tag="Innovate"
|
|
tagIcon={Sparkles}
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={true}
|
|
products={[
|
|
{
|
|
id: "build-1", brand: "Ultimate Gaming Rig", name: "Apex Predator Extreme", price: "$4,999", rating: 5,
|
|
reviewCount: "210", imageSrc: "http://img.b2bpic.net/free-photo/rgb-lights-illuminated-fans-gaming-computer-close-up_482257-98446.jpg", imageAlt: "High-end gaming PC with RGB"},
|
|
{
|
|
id: "build-2", brand: "Professional Workstation", name: "Creator's Canvas Pro", price: "$3,850", rating: 5,
|
|
reviewCount: "145", imageSrc: "http://img.b2bpic.net/free-photo/man-server-farm-using-ai-devices-improve-performance_482257-120264.jpg", imageAlt: "Sleek workstation PC"},
|
|
{
|
|
id: "build-3", brand: "Compact Gaming", name: "Nano Fury X", price: "$2,200", rating: 4,
|
|
reviewCount: "88", imageSrc: "http://img.b2bpic.net/free-photo/gamer-enjoying-spaceship-flying-game-neon-illuminated-apartment_482257-124288.jpg", imageAlt: "Small form factor gaming PC"},
|
|
{
|
|
id: "build-4", brand: "Value Performer", name: "Budget Beast 2.0", price: "$1,499", rating: 4,
|
|
reviewCount: "320", imageSrc: "http://img.b2bpic.net/free-photo/people-repairing-computer-chips_23-2150880959.jpg", imageAlt: "Affordable gaming PC"},
|
|
{
|
|
id: "build-5", brand: "Aesthetic Dream", name: "Whiteout Apex", price: "$3,100", rating: 5,
|
|
reviewCount: "92", imageSrc: "http://img.b2bpic.net/free-photo/working-table-with-laptop-snacks_23-2147833267.jpg", imageAlt: "All-white aesthetic PC build"},
|
|
{
|
|
id: "build-6", brand: "Experimental Custom", name: "Open-Air Enigma", price: "$5,500", rating: 5,
|
|
reviewCount: "67", imageSrc: "http://img.b2bpic.net/free-photo/futuristic-time-machine_23-2151599395.jpg", imageAlt: "Open-air test bench PC"},
|
|
]}
|
|
title="Explore Popular PC Builds"
|
|
description="Get inspired by expertly crafted gaming and workstation PCs. Customize these templates or start a fresh build of your own."
|
|
tag="Curated"
|
|
tagIcon={Cog}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardThree
|
|
animationType="depth-3d"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "metric-1", icon: Users,
|
|
title: "Custom Builds Created", value: "150K+"},
|
|
{
|
|
id: "metric-2", icon: CheckCircle,
|
|
title: "Compatibility Checks Run", value: "5M+"},
|
|
{
|
|
id: "metric-3", icon: Sparkles,
|
|
title: "Dream PCs Visualized", value: "99%"},
|
|
]}
|
|
title="Performance & Satisfaction Driven"
|
|
description="Our community thrives on precision and performance. See the impact we've made."
|
|
tag="Impact"
|
|
tagIcon={Activity}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwelve
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{
|
|
id: "testimonial-1", name: "Jordan P. - Professional Gamer", imageSrc: "http://img.b2bpic.net/free-photo/motherboard-circuit-technology-remixed-media_53876-124660.jpg", imageAlt: "CPU close-up"},
|
|
{
|
|
id: "testimonial-2", name: "Chloe S. - Graphic Designer", imageSrc: "http://img.b2bpic.net/free-photo/technology-background-texture_23-2148105478.jpg", imageAlt: "GPU close-up"},
|
|
{
|
|
id: "testimonial-3", name: "Mark D. - Software Developer", imageSrc: "http://img.b2bpic.net/free-photo/top-view-gaming-setup-with-rgb-keyboard_23-2149829134.jpg", imageAlt: "RAM sticks with RGB"},
|
|
{
|
|
id: "testimonial-4", name: "Jessica L. - Streamer", imageSrc: "http://img.b2bpic.net/free-photo/close-up-water-rings-orange-pool-surface_23-2148358182.jpg", imageAlt: "Liquid cooling block"},
|
|
{
|
|
id: "testimonial-5", name: "Kevin R. - IT Consultant", imageSrc: "http://img.b2bpic.net/free-photo/minimalist-tech-setup-with-old-hard-disk_58702-17198.jpg", imageAlt: "NVMe SSD drive"},
|
|
{
|
|
id: "testimonial-6", name: "Sophia G. - Video Editor", imageSrc: "http://img.b2bpic.net/free-photo/machinery-with-control-panels-buttons-switches-warehouse-3d-render_482257-84396.jpg", imageAlt: "Modular PSU"},
|
|
]}
|
|
cardTitle="Hear From Our Happy Builders"
|
|
cardTag="Success Stories"
|
|
cardTagIcon={ShieldCheck}
|
|
buttons={[
|
|
{
|
|
text: "Read All Reviews", href: "#contact"},
|
|
]}
|
|
cardAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "faq-1", title: "How accurate is the compatibility checker?", content: "Our compatibility checker uses a meticulously maintained database of current-generation PC components and their specifications, providing highly accurate real-time validation for CPU, motherboard, RAM, and PSU pairings. We constantly update our data to ensure reliability."},
|
|
{
|
|
id: "faq-2", title: "Where does the pricing data come from?", content: "Our platform aggregates pricing data from multiple trusted retailers and component suppliers. Prices are updated frequently to reflect current market conditions, helping you find the best deals for your custom build."},
|
|
{
|
|
id: "faq-3", title: "Can I save and share my custom builds?", content: "Yes! You can easily save your configurations, access them later, and share your unique build links with friends, family, or your community. It's perfect for collaboration or showing off your dream PC."},
|
|
{
|
|
id: "faq-4", title: "What if a component is out of stock?", content: "Our system monitors stock levels across retailers. If a component is out of stock, we will notify you and suggest alternative compatible components, or you can opt to be alerted when it becomes available."},
|
|
{
|
|
id: "faq-5", title: "Is there a limit to how many components I can add?", content: "You can add as many compatible components as your chosen motherboard and case allow, mimicking real-world PC building constraints. Our builder guides you through logical steps, ensuring a functional and balanced system."},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/woman-uses-ai-chatbot-system-computer-guide-her-through-tasks_482257-118915.jpg"
|
|
imageAlt="User interacting with PC builder software UI"
|
|
mediaAnimation="slide-up"
|
|
mediaPosition="left"
|
|
title="Common Questions, Clear Answers"
|
|
description="Have questions about compatibility, pricing, or how our builder works? Find quick answers here."
|
|
tag="Support"
|
|
tagIcon={Sparkles}
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
useInvertedBackground={true}
|
|
title="Get in Touch with Our Build Experts"
|
|
description="Have a specific question, need help with a build, or want to give feedback? Our team is ready to assist you."
|
|
inputs={[
|
|
{
|
|
name: "name", type: "text", placeholder: "Your Name", required: true,
|
|
},
|
|
{
|
|
name: "email", type: "email", placeholder: "Your Email", required: true,
|
|
},
|
|
]}
|
|
textarea={{
|
|
name: "message", placeholder: "Your Message", rows: 4,
|
|
required: true,
|
|
}}
|
|
imageSrc="http://img.b2bpic.net/free-photo/group-businesspeople-standing-board-meeting_23-2147857271.jpg"
|
|
imageAlt="Modern office desk with custom PC setup"
|
|
mediaAnimation="opacity"
|
|
mediaPosition="right"
|
|
buttonText="Send Message"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
logoSrc="http://img.b2bpic.net/free-photo/desk-arrangement-with-laptop-notebooks_23-2149073068.jpg"
|
|
logoAlt="PC Builder Pro Logo"
|
|
columns={[
|
|
{
|
|
items: [
|
|
{
|
|
label: "Home", href: "#hero"},
|
|
{
|
|
label: "Features", href: "#features"},
|
|
{
|
|
label: "Builds", href: "#products"},
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{
|
|
label: "Testimonials", href: "#testimonials"},
|
|
{
|
|
label: "FAQ", href: "#faq"},
|
|
{
|
|
label: "Contact Us", href: "#contact"},
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{
|
|
label: "Privacy Policy", href: "#contact"},
|
|
{
|
|
label: "Terms of Service", href: "#contact"},
|
|
],
|
|
},
|
|
]}
|
|
logoText="PC Builder Pro"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|