Merge version_1 into main #1
431
src/app/page.tsx
431
src/app/page.tsx
@@ -20,309 +20,156 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="expand-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "home",
|
||||
},
|
||||
{
|
||||
name: "Products",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Nexus Tech"
|
||||
button={{
|
||||
text: "Build Your PC",
|
||||
href: "#contact",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Products", id: "products" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="Nexus Tech"
|
||||
button={{ text: "Build Your PC", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="home" data-section="home">
|
||||
<HeroBillboardGallery
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
title="Next-Gen Performance, Tailored."
|
||||
description="Experience professional-grade power. We build custom desktop solutions for gaming, creativity, and enterprise."
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-hi-tech-neon-background-generative-ai_91128-2309.jpg",
|
||||
imageAlt: "Custom liquid cooled PC build",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/photography-studio-with-equipment-items-arrangement_23-2150254681.jpg",
|
||||
imageAlt: "Professional workstation",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/professional-esports-woman-gamer-playing-rgb-powerful-computer-video-game-celebrating-victory-pro-cyber-streaming-raising-hands-wining-tournament-esport-online-championship-from-gaming-studio_482257-12515.jpg",
|
||||
imageAlt: "RGB mechanical keyboard setup",
|
||||
},
|
||||
]}
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="home" data-section="home">
|
||||
<HeroBillboardGallery
|
||||
background={{ variant: "plain" }}
|
||||
title="Next-Gen Performance, Tailored."
|
||||
description="Experience professional-grade power. We build custom desktop solutions for gaming, creativity, and enterprise."
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/futuristic-hi-tech-neon-background-generative-ai_91128-2309.jpg", imageAlt: "Custom liquid cooled PC build" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/photography-studio-with-equipment-items-arrangement_23-2150254681.jpg", imageAlt: "Professional workstation" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/professional-esports-woman-gamer-playing-rgb-powerful-computer-video-game-celebrating-victory-pro-cyber-streaming-raising-hands-wining-tournament-esport-online-championship-from-gaming-studio_482257-12515.jpg", imageAlt: "RGB mechanical keyboard setup" }
|
||||
]}
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBorderGlow
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
icon: HardDrive,
|
||||
title: "Custom Builds",
|
||||
description: "Bespoke PC configurations tailored to your specific performance requirements.",
|
||||
},
|
||||
{
|
||||
icon: Wrench,
|
||||
title: "Maintenance & Repair",
|
||||
description: "Professional diagnostics and fast repairs for all desktop and laptop systems.",
|
||||
},
|
||||
{
|
||||
icon: ShieldCheck,
|
||||
title: "2-Year Warranty",
|
||||
description: "Guaranteed quality with extended support on all our custom-assembled machines.",
|
||||
},
|
||||
]}
|
||||
title="Expert Hardware Solutions"
|
||||
description="We specialize in precision engineering and high-performance components."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBorderGlow
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ icon: HardDrive, title: "Custom Builds", description: "Bespoke PC configurations tailored to your specific performance requirements." },
|
||||
{ icon: Wrench, title: "Maintenance & Repair", description: "Professional diagnostics and fast repairs for all desktop and laptop systems." },
|
||||
{ icon: ShieldCheck, title: "2-Year Warranty", description: "Guaranteed quality with extended support on all our custom-assembled machines." }
|
||||
]}
|
||||
title="Expert Hardware Solutions"
|
||||
description="We specialize in precision engineering and high-performance components."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Apex Gaming Ultra",
|
||||
price: "$2,499",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/room-with-powerful-computer-online-competition-streaming-chair_482257-2063.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Pro Workstation X",
|
||||
price: "$3,299",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/computer-back-view-digital-device_53876-96839.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Core Streamer Setup",
|
||||
price: "$1,899",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-ankarparken-skyscraper-with-dark-blue-sky-background_181624-17357.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Minimalist Desktop",
|
||||
price: "$1,499",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-desk-with-computer-lamp_23-2148821866.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Liquid Cooler Special",
|
||||
price: "$2,199",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-hi-tech-neon-background-generative-ai_91128-2310.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Entry Pro Edition",
|
||||
price: "$1,199",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/technology-background-texture_23-2148105503.jpg",
|
||||
},
|
||||
]}
|
||||
title="Premium Gaming Rigs"
|
||||
description="Unleash your potential with our best-in-class gaming systems."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", name: "Apex Gaming Ultra", price: "$2,499", imageSrc: "http://img.b2bpic.net/free-photo/room-with-powerful-computer-online-competition-streaming-chair_482257-2063.jpg" },
|
||||
{ id: "p2", name: "Pro Workstation X", price: "$3,299", imageSrc: "http://img.b2bpic.net/free-photo/computer-back-view-digital-device_53876-96839.jpg" },
|
||||
{ id: "p3", name: "Core Streamer Setup", price: "$1,899", imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-ankarparken-skyscraper-with-dark-blue-sky-background_181624-17357.jpg" },
|
||||
{ id: "p4", name: "Minimalist Desktop", price: "$1,499", imageSrc: "http://img.b2bpic.net/free-photo/front-view-desk-with-computer-lamp_23-2148821866.jpg" },
|
||||
{ id: "p5", name: "Liquid Cooler Special", price: "$2,199", imageSrc: "http://img.b2bpic.net/free-photo/futuristic-hi-tech-neon-background-generative-ai_91128-2310.jpg" },
|
||||
{ id: "p6", name: "Entry Pro Edition", price: "$1,199", imageSrc: "http://img.b2bpic.net/free-photo/technology-background-texture_23-2148105503.jpg" }
|
||||
]}
|
||||
title="Premium Gaming Rigs"
|
||||
description="Unleash your potential with our best-in-class gaming systems."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MetricCardFourteen
|
||||
useInvertedBackground={false}
|
||||
title="Built on Expertise"
|
||||
tag="Our Stats"
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "500+",
|
||||
description: "Custom PCs built annually",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "15+",
|
||||
description: "Years in computer hardware",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "99%",
|
||||
description: "Client satisfaction rating",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<MetricCardFourteen
|
||||
useInvertedBackground={false}
|
||||
title="Built on Expertise"
|
||||
tag="Our Stats"
|
||||
metrics={[
|
||||
{ id: "m1", value: "500+", description: "Custom PCs built annually" },
|
||||
{ id: "m2", value: "15+", description: "Years in computer hardware" },
|
||||
{ id: "m3", value: "99%", description: "Client satisfaction rating" }
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={false}
|
||||
testimonial="Nexus Tech transformed my workstation setup. The cable management and performance tuning are absolutely flawless. Highly recommended!"
|
||||
rating={5}
|
||||
author="Jordan M."
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/handsome-business-man-wearing-suit-looking-camera-smiling-broadly-with-happy-face-standing-white-background_141793-54115.jpg",
|
||||
alt: "Client 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-beautiful-young-businesswoman_329181-11388.jpg",
|
||||
alt: "Client 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/beautiful-portrait-teenager-woman_23-2149453488.jpg",
|
||||
alt: "Client 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-senior-woman-professional-blazer-outdoors_23-2150296635.jpg",
|
||||
alt: "Client 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/closeup-confident-asian-man-with-arms-crossed_1262-884.jpg",
|
||||
alt: "Client 5",
|
||||
},
|
||||
]}
|
||||
ratingAnimation="blur-reveal"
|
||||
avatarsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={false}
|
||||
testimonial="Nexus Tech transformed my workstation setup. The cable management and performance tuning are absolutely flawless. Highly recommended!"
|
||||
rating={5}
|
||||
author="Jordan M."
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/handsome-business-man-wearing-suit-looking-camera-smiling-broadly-with-happy-face-standing-white-background_141793-54115.jpg", alt: "Client 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-beautiful-young-businesswoman_329181-11388.jpg", alt: "Client 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/beautiful-portrait-teenager-woman_23-2149453488.jpg", alt: "Client 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-senior-woman-professional-blazer-outdoors_23-2150296635.jpg", alt: "Client 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/closeup-confident-asian-man-with-arms-crossed_1262-884.jpg", alt: "Client 5" }
|
||||
]}
|
||||
ratingAnimation="blur-reveal"
|
||||
avatarsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Do you offer financing?",
|
||||
content: "Yes, we partner with multiple providers to offer 0% APR financing options.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Can I bring my own parts?",
|
||||
content: "Absolutely. We offer an assembly-only service for customers providing their own components.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "What is the turnaround time?",
|
||||
content: "Custom builds typically ship within 5-7 business days of final confirmation.",
|
||||
},
|
||||
]}
|
||||
sideTitle="Expert Answers"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "f1", title: "Do you offer financing?", content: "Yes, we partner with multiple providers to offer 0% APR financing options." },
|
||||
{ id: "f2", title: "Can I bring my own parts?", content: "Absolutely. We offer an assembly-only service for customers providing their own components." },
|
||||
{ id: "f3", title: "What is the turnaround time?", content: "Custom builds typically ship within 5-7 business days of final confirmation." }
|
||||
]}
|
||||
sideTitle="Expert Answers"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social" data-section="social">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"NVIDIA",
|
||||
"Intel",
|
||||
"AMD",
|
||||
"Corsair",
|
||||
"ASUS",
|
||||
"MSI",
|
||||
"Samsung",
|
||||
]}
|
||||
title="Trusted Partners"
|
||||
/>
|
||||
</div>
|
||||
<div id="social" data-section="social">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
description="Our industry-leading technology partners ensure every build is optimized for peak performance."
|
||||
names={["NVIDIA", "Intel", "AMD", "Corsair", "ASUS", "MSI", "Samsung"]}
|
||||
title="Trusted Partners"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Get Started"
|
||||
description="Ready to build your dream machine? Reach out to our expert team for a consultation."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Your Email",
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Tell us about your build needs",
|
||||
rows: 4,
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/clothing-store-with-blurred-efecto_23-2148164698.jpg"
|
||||
mediaPosition="left"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Get Started"
|
||||
description="Ready to build your dream machine? Reach out to our expert team for a consultation."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Your Email", required: true }
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "Tell us about your build needs", rows: 4 }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/clothing-store-with-blurred-efecto_23-2148164698.jpg"
|
||||
mediaPosition="left"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Shop",
|
||||
items: [
|
||||
{
|
||||
label: "Gaming PCs",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
label: "Workstations",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
label: "Accessories",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "Warranty",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
label: "FAQs",
|
||||
href: "#faq",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Nexus Tech"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{ title: "Shop", items: [{ label: "Gaming PCs", href: "#products" }, { label: "Workstations", href: "#products" }, { label: "Accessories", href: "#" }] },
|
||||
{ title: "Support", items: [{ label: "Warranty", href: "#" }, { label: "Contact", href: "#contact" }, { label: "FAQs", href: "#faq" }] }
|
||||
]}
|
||||
logoText="Nexus Tech"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user