Merge version_2 into main #2
239
src/app/page.tsx
239
src/app/page.tsx
@@ -7,17 +7,15 @@ import HeroSplitDoubleCarousel from "@/components/sections/hero/HeroSplitDoubleC
|
||||
import FeatureBento from "@/components/sections/feature/FeatureBento";
|
||||
import FeatureCardTwentySix from "@/components/sections/feature/FeatureCardTwentySix";
|
||||
import FeatureCardSixteen from "@/components/sections/feature/FeatureCardSixteen";
|
||||
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
|
||||
import TeamCardFive from "@/components/sections/team/TeamCardFive";
|
||||
import FaqBase from "@/components/sections/faq/FaqBase";
|
||||
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
||||
import FooterBase from "@/components/sections/footer/FooterBase";
|
||||
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
|
||||
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
|
||||
import FaqDouble from "@/components/sections/faq/FaqDouble";
|
||||
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
|
||||
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
||||
import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
|
||||
import { Sparkles, ArrowUpRight, Cpu, Shield, Zap, HardDrive } from "lucide-react";
|
||||
|
||||
export default function PCComponentsPage() {
|
||||
const toggleLanguage = () => {
|
||||
// Simple translation logic mock
|
||||
alert("Language toggled between English and Italian");
|
||||
};
|
||||
|
||||
@@ -30,144 +28,103 @@ export default function PCComponentsPage() {
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="metallic"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="TechCore"
|
||||
navItems={[
|
||||
{ name: "Catalog", id: "catalog" },
|
||||
{ name: "Components", id: "components" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Support", id: "contact" },
|
||||
]}
|
||||
button={{ text: "EN/IT", onClick: toggleLanguage }}
|
||||
/>
|
||||
<HeroSplitDoubleCarousel
|
||||
title="Build Your Ultimate Gaming Rig"
|
||||
description="High-performance PC components engineered for gamers and creators. Upgrade your setup with the latest technology."
|
||||
tag="Hardware Excellence"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "canvas-reveal" }}
|
||||
buttons={[
|
||||
{ text: "Browse Store", href: "#catalog" },
|
||||
{ text: "Learn More", href: "#components" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
carouselPosition="right"
|
||||
leftCarouselItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-damaged-computer-parts_23-2147922299.jpg", imageAlt: "GPU performance" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/back-view-woman-winning-video-games-while-playing-late-night-she-has-powerful-pc-with-neon-fans-front_482257-29624.jpg", imageAlt: "RGB components" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/assortment-sorted-tech-objects_23-2148996916.jpg", imageAlt: "Cooling systems" },
|
||||
]}
|
||||
rightCarouselItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/electronics-components-modern-pc-computer-motherboard-with-ram-connector-slot_23-2147883838.jpg", imageAlt: "High-speed RAM" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/technology-background-texture_23-2148105524.jpg", imageAlt: "Gaming motherboards" },
|
||||
]}
|
||||
carouselItemClassName="!aspect-[4/5]"
|
||||
/>
|
||||
<FeatureBento
|
||||
title="Core Categories"
|
||||
description="Explore our extensive range of high-end computer parts."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
features={[
|
||||
{
|
||||
title: "Processors", description: "Cutting-edge CPUs for multitasking and heavy gaming.", bentoComponent: "marquee", centerIcon: Cpu,
|
||||
variant: "text", texts: ["Intel i9", "AMD Ryzen 9", "Overclockable", "Efficient", "Thermal Control"],
|
||||
},
|
||||
{
|
||||
title: "Graphics", description: "Powerful GPUs for immersive gaming experiences.", bentoComponent: "media-stack", items: [
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/high-angle-hard-drive-components-blue-light_23-2149417059.jpg", imageAlt: "GPU Tech" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-damaged-computer-parts_23-2147922299.jpg", imageAlt: "GPU Tech" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/technology-background-texture_23-2148105491.jpg", imageAlt: "GPU Tech" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Storage", description: "Lightning-fast NVMe SSDs for rapid boot and load times.", bentoComponent: "media-stack", items: [
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/top-view-storage-devices-assortment_23-2149319330.jpg", imageAlt: "SSD" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/high-angle-hard-drive-components-blue-light_23-2149417059.jpg", imageAlt: "SSD" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/blue-computer-cpu-motherboard-flat-lay_53876-96803.jpg", imageAlt: "SSD" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<FeatureCardTwentySix
|
||||
title="Top Rated Builds"
|
||||
description="Hardware selections chosen by expert gamers and hardware enthusiasts."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
buttons={[{ text: "Explore Catalog", href: "#catalog" }]}
|
||||
cardClassName="!h-auto aspect-video"
|
||||
features={[
|
||||
{ title: "Apex Gaming", description: "High refresh gaming", imageSrc: "http://img.b2bpic.net/free-photo/female-gamer-live-streaming-setup_23-2152006705.jpg", buttonIcon: ArrowUpRight },
|
||||
{ title: "Studio Pro", description: "Content creation power", imageSrc: "http://img.b2bpic.net/free-photo/technology-venture-workspace-using-machine-learning-streamline-coding-process_482257-120287.jpg", buttonIcon: ArrowUpRight },
|
||||
{ title: "Compact Beast", description: "SFF enthusiasts", imageSrc: "http://img.b2bpic.net/free-photo/buy-one-get-one-free-inscription_23-2147957723.jpg", buttonIcon: ArrowUpRight },
|
||||
{ title: "Liquid Master", description: "Water cooling elite", imageSrc: "http://img.b2bpic.net/free-photo/loaded-circuit-board_1384-30.jpg", buttonIcon: ArrowUpRight },
|
||||
]}
|
||||
/>
|
||||
<TestimonialCardFifteen
|
||||
testimonial="The parts I received from TechCore were top-notch. My new build runs cooler and faster than ever before. Highly recommended!"
|
||||
rating={5}
|
||||
author="— Alex R., Custom PC Enthusiast"
|
||||
avatars={[{ src: "http://img.b2bpic.net/free-photo/portrait-handsome-male-cafe-visitor-businessman-working-laptop-holding-smartphone-showing-mobile-phone-hand-sign-give-me-call-gesture_1258-314629.jpg", alt: "User" }]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
<MetricCardOne
|
||||
title="Performance Metrics"
|
||||
description="We deliver quality hardware for serious performance."
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
metrics={[
|
||||
{ id: "m1", value: "500+", title: "Components", description: "Available in our catalog", icon: HardDrive },
|
||||
{ id: "m2", value: "99%", title: "Reliability", description: "High-grade factory tested", icon: Shield },
|
||||
{ id: "m3", value: "24h", title: "Shipping", description: "Fast dispatch on all parts", icon: Zap },
|
||||
]}
|
||||
/>
|
||||
<FeatureCardSixteen
|
||||
title="Hardware Quality"
|
||||
description="Why settle for budget when you can have elite?"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
negativeCard={{ items: ["Low quality heat sinks", "Unreliable power supplies", "Frequent driver issues", "Limited warranty support"] }}
|
||||
positiveCard={{ items: ["Premium aluminum cooling", "Gold-rated PSUs", "Driver-optimized hardware", "3-year full warranty"] }}
|
||||
/>
|
||||
<FaqBase
|
||||
title="Hardware FAQs"
|
||||
description="Need help selecting the right parts?"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqsAnimation="slide-up"
|
||||
faqs={[
|
||||
{ id: "f1", title: "Do you offer compatibility checks?", content: "Yes, our configuration tool validates part compatibility before checkout." },
|
||||
{ id: "f2", title: "What about warranties?", content: "Every component comes with full manufacturer warranty plus our TechCore guarantee." },
|
||||
{ id: "f3", title: "How is shipping handled?", content: "We pack all fragile parts with anti-static and shock-absorbing materials." },
|
||||
]}
|
||||
/>
|
||||
<ContactCTA
|
||||
tag="Ready to Build?"
|
||||
title="Start Your New PC Build"
|
||||
description="Contact our technical support team for custom advice on your parts selection."
|
||||
buttons={[{ text: "Get Expert Advice", href: "#contact" }]}
|
||||
background={{ variant: "rotated-rays-animated" }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
<FooterBase
|
||||
logoText="TechCore"
|
||||
copyrightText="© 2026 | TechCore Components"
|
||||
columns={[
|
||||
{ title: "Products", items: [{ label: "Processors", href: "#" }, { label: "GPU", href: "#" }] },
|
||||
{ title: "Company", items: [{ label: "About", href: "#" }, { label: "Careers", href: "#" }] },
|
||||
{ title: "Support", items: [{ label: "Returns", href: "#" }, { label: "Contact", href: "#" }] },
|
||||
]}
|
||||
/>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Catalog", id: "catalog" },
|
||||
{ name: "Components", id: "components" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Support", id: "contact" },
|
||||
]}
|
||||
brandName="TechCore"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDoubleCarousel
|
||||
title="Build Your Ultimate Gaming Rig"
|
||||
description="High-performance PC components engineered for gamers and creators. Upgrade your setup with the latest technology."
|
||||
tag="Hardware Excellence"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "canvas-reveal" }}
|
||||
buttons={[
|
||||
{ text: "Browse Store", href: "#catalog" },
|
||||
{ text: "Learn More", href: "#components" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-damaged-computer-parts_23-2147922299.jpg", imageAlt: "GPU performance" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/back-view-woman-winning-video-games-while-playing-late-night-she-has-powerful-pc-with-neon-fans-front_482257-29624.jpg", imageAlt: "RGB components" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBento
|
||||
title="Core Categories"
|
||||
description="Explore our extensive range of high-end computer parts."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
features={[
|
||||
{ id: "f1", title: "Processors", description: "Cutting-edge CPUs for multitasking and heavy gaming.", tag: "CPU" },
|
||||
{ id: "f2", title: "Graphics", description: "Powerful GPUs for immersive gaming experiences.", tag: "GPU" },
|
||||
{ id: "f3", title: "Storage", description: "Lightning-fast NVMe SSDs for rapid boot and load times.", tag: "SSD" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardEleven
|
||||
title="Performance Metrics"
|
||||
description="We deliver quality hardware for serious performance."
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "500+", title: "Components", description: "Available in our catalog", imageSrc: "http://img.b2bpic.net/free-photo/electronics-components-modern-pc-computer-motherboard-with-ram-connector-slot_23-2147883838.jpg" },
|
||||
{ id: "m2", value: "99%", title: "Reliability", description: "High-grade factory tested", imageSrc: "http://img.b2bpic.net/free-photo/technology-background-texture_23-2148105524.jpg" },
|
||||
{ id: "m3", value: "24h", title: "Shipping", description: "Fast dispatch on all parts", imageSrc: "http://img.b2bpic.net/free-photo/assortment-sorted-tech-objects_23-2148996916.jpg" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
title="Hardware FAQs"
|
||||
description="Need help selecting the right parts?"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqsAnimation="slide-up"
|
||||
faqs={[
|
||||
{ id: "f1", title: "Do you offer compatibility checks?", content: "Yes, our configuration tool validates part compatibility before checkout." },
|
||||
{ id: "f2", title: "What about warranties?", content: "Every component comes with full manufacturer warranty plus our TechCore guarantee." },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
title="Start Your New PC Build"
|
||||
description="Contact our technical support team for custom advice on your parts selection."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Full Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Email Address", required: true },
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "Your Message" }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
logoText="TechCore"
|
||||
columns={[
|
||||
{ items: [{ label: "Processors", href: "#" }, { label: "GPU", href: "#" }] },
|
||||
{ items: [{ label: "About", href: "#" }, { label: "Careers", href: "#" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user