230 lines
9.2 KiB
TypeScript
230 lines
9.2 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
|
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
|
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
|
import TeamCardOne from '@/components/sections/team/TeamCardOne';
|
|
import { Award, CheckCircle, Shield, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="elastic-effect"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="medium"
|
|
sizing="mediumLargeSizeMediumTitles"
|
|
background="aurora"
|
|
cardStyle="solid"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="normal"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "hero"},
|
|
{
|
|
name: "Services", id: "features"},
|
|
{
|
|
name: "Case Studies", id: "testimonials"},
|
|
{
|
|
name: "Contact", id: "contact"},
|
|
]}
|
|
brandName="VertexLabs"
|
|
button={{ text: "Get Started", href: "#contact" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboard
|
|
background={{
|
|
variant: "plain"}}
|
|
title="Scaling Global Tech Infrastructure"
|
|
description="We architect high-performance software ecosystems for enterprises aiming for exponential growth."
|
|
buttons={[
|
|
{
|
|
text: "Consult With Experts", href: "#contact"},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/digital-blue-hud-interface-laptop-concept_53876-15831.jpg"
|
|
mediaAnimation="blur-reveal"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139320.jpg", alt: "Executive 1"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/programmer-developing-software-large-computer-screen_53876-101149.jpg", alt: "Executive 2"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/futuristic-time-machine_23-2151599416.jpg", alt: "Executive 3"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139360.jpg", alt: "Executive 4"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/digital-blue-hud-interface-laptop-concept_53876-15831.jpg", alt: "Executive 5"},
|
|
]}
|
|
avatarText="Trusted by 500+ global tech leaders"
|
|
marqueeItems={[
|
|
{
|
|
type: "text", text: "Cloud Architecture"},
|
|
{
|
|
type: "text", text: "Predictive AI"},
|
|
{
|
|
type: "text", text: "DevSecOps"},
|
|
{
|
|
type: "text", text: "Data Engineering"},
|
|
{
|
|
type: "text", text: "Cybersecurity"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TestimonialAboutCard
|
|
useInvertedBackground={false}
|
|
tag="Our Philosophy"
|
|
title="Innovation Driven by Rigor"
|
|
description="We bridge the gap between complex enterprise requirements and seamless digital execution, ensuring long-term technical debt reduction."
|
|
subdescription="Our team of senior engineers focuses on performance, scalability, and robust security architectures."
|
|
icon={Zap}
|
|
imageSrc="http://img.b2bpic.net/free-photo/businessman-checking-report-tablet_482257-120320.jpg"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<TeamCardOne
|
|
title="Our Leadership"
|
|
description="Meet the experts steering our vision."
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
members={[
|
|
{ id: "1", name: "Game", role: "CEO", imageSrc: "https://img.b2bpic.net/free-photo/smiling-young-man-with-crossed-arms_1142-261.jpg" },
|
|
{ id: "2", name: "Oh", role: "CTO", imageSrc: "https://img.b2bpic.net/free-photo/portrait-successful-man-having-stubble-posing-with-folded-arms-looking-camera_171337-12643.jpg" },
|
|
{ id: "3", name: "Rung", role: "Design Director", imageSrc: "https://img.b2bpic.net/free-photo/thoughtful-woman-with-her-hand-near-face_1142-259.jpg" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentyOne
|
|
useInvertedBackground={true}
|
|
title="Core Technical Competencies"
|
|
description="Our suite of services covers the entire product development lifecycle, from concept to global deployment."
|
|
accordionItems={[
|
|
{
|
|
id: "a1", title: "Scalable Cloud Architecture", content: "Robust cloud strategies tailored for multi-region performance."},
|
|
{
|
|
id: "a2", title: "Predictive AI Systems", content: "Machine learning models designed for real-world impact and automation."},
|
|
{
|
|
id: "a3", title: "DevSecOps Integration", content: "Seamless deployment pipelines with security at the core."},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139229.jpg"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardThree
|
|
animationType="depth-3d"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "m1", icon: Award,
|
|
title: "Years Experience", value: "12+"},
|
|
{
|
|
id: "m2", icon: CheckCircle,
|
|
title: "Projects Completed", value: "150+"},
|
|
{
|
|
id: "m3", icon: Shield,
|
|
title: "Security Patches", value: "500+"},
|
|
]}
|
|
title="Measurable Impact"
|
|
description="Tangible results across every project phase."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
useInvertedBackground={true}
|
|
testimonial="VertexLabs transformed our infrastructure bottlenecks into a streamlined, high-speed machine. Essential partner."
|
|
rating={5}
|
|
author="Sarah Chen, VP Engineering at CloudScale"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/smiling-female-staff-airport-terminal_107420-85049.jpg", alt: "Sarah Chen"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/upbeat-saleswoman-hired-explain-vehicle-pricing-options-clients_482257-118422.jpg", alt: "Director 1"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/portrait-smiling-waitress_107420-12307.jpg", alt: "Manager 1"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/businesswoman-glasses-portrait_1262-1461.jpg", alt: "Lead 1"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/close-up-shot-successful-beautiful-confident-senior-businesswoman-her-fifties-with-gray-hair-blue-wise-eyes-posing-indoors-keeping-arms-folded-looking-with-charming-smile_344912-1851.jpg", alt: "Executive 1"},
|
|
]}
|
|
ratingAnimation="blur-reveal"
|
|
avatarsAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="socialProof" data-section="socialProof">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={[
|
|
"AlphaTech", "BetaSystems", "GammaCloud", "DeltaInnovate", "EpsilonSoft", "ZetaGrid", "EtaPulse"]}
|
|
title="Trusted by Leaders"
|
|
description="Collaborating with global innovators."
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
useInvertedBackground={true}
|
|
background={{
|
|
variant: "plain"}}
|
|
tag="Get in Touch"
|
|
title="Architecting the Future"
|
|
description="Ready to scale your next major initiative? Let's discuss your roadmap."
|
|
mediaAnimation="slide-up"
|
|
imageSrc="http://img.b2bpic.net/free-photo/startup-software-developers-doing-brainstorming-office_482257-125216.jpg"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
logoText="VertexLabs"
|
|
columns={[
|
|
{
|
|
title: "Company", items: [
|
|
{
|
|
label: "About", href: "#about"},
|
|
{
|
|
label: "Careers", href: "#"},
|
|
],
|
|
},
|
|
{
|
|
title: "Resources", items: [
|
|
{
|
|
label: "Blog", href: "#"},
|
|
{
|
|
label: "Guides", href: "#"},
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |