288 lines
10 KiB
TypeScript
288 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
|
|
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
|
import HeroLogo from '@/components/sections/hero/HeroLogo';
|
|
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
|
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="expand-hover"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="soft"
|
|
contentWidth="mediumLarge"
|
|
sizing="largeSmallSizeLargeTitles"
|
|
background="none"
|
|
cardStyle="glass-depth"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
navItems={[
|
|
{
|
|
name: "Home",
|
|
id: "hero",
|
|
},
|
|
{
|
|
name: "Products",
|
|
id: "products",
|
|
},
|
|
{
|
|
name: "About",
|
|
id: "about",
|
|
},
|
|
{
|
|
name: "Contact",
|
|
id: "contact",
|
|
},
|
|
]}
|
|
brandName="Vertex Systems"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogo
|
|
logoText="Vertex Systems"
|
|
description="Engineered for speed, performance, and reliability. Discover our premium selection of high-end computing hardware designed to push the boundaries of innovation."
|
|
buttons={[
|
|
{
|
|
text: "Shop Products",
|
|
href: "#products",
|
|
},
|
|
{
|
|
text: "Learn More",
|
|
href: "#about",
|
|
},
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
imageSrc="http://img.b2bpic.net/free-photo/closuep-gaming-pc-with-rgb-led-lights-standing-table-gamer-woman-playing-space-shooter-videogames-online-competition-studio-equipped-with-professional-streaming-setup_482257-30001.jpg?_wi=1"
|
|
imageAlt="High performance computing hardware rig"
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "1",
|
|
brand: "Apex",
|
|
name: "Velocity Pro Desktop",
|
|
price: "$2,499",
|
|
rating: 5,
|
|
reviewCount: "128",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/top-view-grey-laptop-with-glasses_23-2148189998.jpg?_wi=1",
|
|
},
|
|
{
|
|
id: "2",
|
|
brand: "Nebula",
|
|
name: "Quantum Workstation",
|
|
price: "$3,200",
|
|
rating: 5,
|
|
reviewCount: "89",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/empty-financial-department-office-used-financial-analysis_482257-83065.jpg?_wi=1",
|
|
},
|
|
{
|
|
id: "3",
|
|
brand: "Zenith",
|
|
name: "4K Studio Display",
|
|
price: "$899",
|
|
rating: 4,
|
|
reviewCount: "210",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/office-workspace-with-personal-computer-screen-keyboard_23-2148821905.jpg?_wi=1",
|
|
},
|
|
{
|
|
id: "4",
|
|
brand: "Titan",
|
|
name: "G-Force GPU",
|
|
price: "$1,150",
|
|
rating: 5,
|
|
reviewCount: "450",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/top-view-hard-disk-with-red-light_23-2149413360.jpg?_wi=1",
|
|
},
|
|
{
|
|
id: "5",
|
|
brand: "Flash",
|
|
name: "2TB NVMe SSD",
|
|
price: "$250",
|
|
rating: 5,
|
|
reviewCount: "330",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/closeup-vintage-camera_53876-32038.jpg",
|
|
},
|
|
{
|
|
id: "6",
|
|
brand: "KeyMaster",
|
|
name: "Mechanical Pro Keyboard",
|
|
price: "$199",
|
|
rating: 4,
|
|
reviewCount: "560",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/top-view-hard-drive-cable_23-2149413409.jpg",
|
|
},
|
|
]}
|
|
title="Elite Computing Hardware"
|
|
description="Browse our hand-picked selection of top-tier desktop builds, components, and accessories."
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<FeatureCardMedia
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: "f1",
|
|
title: "Cutting-Edge Performance",
|
|
description: "Every machine is optimized for maximum efficiency, ensuring you stay ahead of the curve.",
|
|
tag: "Speed",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/3d-data-technology-background-with-flowing-particles_1048-18065.jpg",
|
|
},
|
|
{
|
|
id: "f2",
|
|
title: "Cloud-Ready Infrastructure",
|
|
description: "Seamless integration with modern cloud environments for enterprise-scale productivity.",
|
|
tag: "Connectivity",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/technology-background-texture_23-2148105487.jpg",
|
|
},
|
|
{
|
|
id: "f3",
|
|
title: "Advanced Cooling Solutions",
|
|
description: "State-of-the-art thermal management keeping your hardware safe under extreme workloads.",
|
|
tag: "Reliability",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/programming-background-concept_23-2150170140.jpg",
|
|
},
|
|
]}
|
|
title="Why Vertex Systems?"
|
|
description="We don't just sell computers; we provide the backbone for your digital ambitions."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFive
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "t1",
|
|
name: "Sarah Chen",
|
|
date: "Oct 2023",
|
|
title: "Lead Engineer",
|
|
quote: "The performance boost I've seen with the Velocity Pro is incredible.",
|
|
tag: "Engineering",
|
|
avatarSrc: "http://img.b2bpic.net/free-photo/portrait-middle-aged-businesswoman_23-2148204386.jpg",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/closuep-gaming-pc-with-rgb-led-lights-standing-table-gamer-woman-playing-space-shooter-videogames-online-competition-studio-equipped-with-professional-streaming-setup_482257-30001.jpg?_wi=2",
|
|
imageAlt: "gaming pc internal parts close-up",
|
|
},
|
|
{
|
|
id: "t2",
|
|
name: "Marcus Thorne",
|
|
date: "Nov 2023",
|
|
title: "Creative Director",
|
|
quote: "Finally, hardware that keeps up with my 4K video rendering workflows.",
|
|
tag: "Creative",
|
|
avatarSrc: "http://img.b2bpic.net/free-photo/young-pleased-blonde-office-worker-man-headphones-sits-desk-with-office-tools-using-laptop-gestures-victory-hand-sign-isolated-violet-background-with-copy-space_141793-65049.jpg",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/top-view-grey-laptop-with-glasses_23-2148189998.jpg?_wi=2",
|
|
imageAlt: "modern laptop workspace dark",
|
|
},
|
|
{
|
|
id: "t3",
|
|
name: "Emily Sato",
|
|
date: "Dec 2023",
|
|
title: "Systems Architect",
|
|
quote: "Remarkable stability under heavy database loads. Truly professional grade.",
|
|
tag: "Architecture",
|
|
avatarSrc: "http://img.b2bpic.net/free-photo/authentic-small-youthful-marketing-agency_23-2150167411.jpg",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/empty-financial-department-office-used-financial-analysis_482257-83065.jpg?_wi=2",
|
|
imageAlt: "gaming pc desktop glowing lights",
|
|
},
|
|
{
|
|
id: "t4",
|
|
name: "David Miller",
|
|
date: "Jan 2024",
|
|
title: "Game Developer",
|
|
quote: "Vertex Systems builds machines that are meant to be pushed to the limit.",
|
|
tag: "Gaming",
|
|
avatarSrc: "http://img.b2bpic.net/free-photo/concept-covid-social-distancing-lifestyle-image-middleaged-man-medical-mask-gloves_1258-130915.jpg",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/office-workspace-with-personal-computer-screen-keyboard_23-2148821905.jpg?_wi=2",
|
|
imageAlt: "wide monitor computer setup desk",
|
|
},
|
|
{
|
|
id: "t5",
|
|
name: "Elena Rodriguez",
|
|
date: "Feb 2024",
|
|
title: "Data Scientist",
|
|
quote: "The most reliable workstation I've used in ten years of data modeling.",
|
|
tag: "Science",
|
|
avatarSrc: "http://img.b2bpic.net/free-photo/girl-is-walking-around-city_1321-1324.jpg",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/top-view-hard-disk-with-red-light_23-2149413360.jpg?_wi=2",
|
|
imageAlt: "graphics card hardware computer parts",
|
|
},
|
|
]}
|
|
title="Trusted by Professionals"
|
|
description="See why top developers and creatives choose Vertex Systems for their hardware needs."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metric" data-section="metric">
|
|
<MetricCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={false}
|
|
title="Our Impact"
|
|
description="Proven results for high-performance professionals."
|
|
metrics={[
|
|
{
|
|
id: "m1",
|
|
value: "15k+",
|
|
description: "High-end units deployed worldwide",
|
|
},
|
|
{
|
|
id: "m2",
|
|
value: "99.9%",
|
|
description: "Hardware reliability rating",
|
|
},
|
|
{
|
|
id: "m3",
|
|
value: "4.8/5",
|
|
description: "Average customer satisfaction",
|
|
},
|
|
{
|
|
id: "m4",
|
|
value: "24/7",
|
|
description: "Premium technical support",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoReveal
|
|
logoText="Vertex Systems"
|
|
leftLink={{
|
|
text: "Terms of Service",
|
|
href: "#",
|
|
}}
|
|
rightLink={{
|
|
text: "Privacy Policy",
|
|
href: "#",
|
|
}}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|