Merge version_2 into main #1
347
src/app/page.tsx
347
src/app/page.tsx
@@ -2,18 +2,17 @@
|
||||
|
||||
import ReactLenis from "lenis/react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||||
import HeroSplitDoubleCarousel from "@/components/sections/hero/HeroSplitDoubleCarousel";
|
||||
import FeatureBento from "@/components/sections/feature/FeatureBento";
|
||||
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
||||
import HeroSplitDualMedia from "@/components/sections/hero/HeroSplitDualMedia";
|
||||
import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
|
||||
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 { Sparkles, Search, ArrowUpRight, Monitor, Shield, Zap, Puzzle, TrendingUp, Lock, Phone, MessageCircle, BookOpen, Tv, Camera, Music, Settings, Award, Users } from "lucide-react";
|
||||
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
|
||||
import TeamCardSix from "@/components/sections/team/TeamCardSix";
|
||||
import FaqDouble from "@/components/sections/faq/FaqDouble";
|
||||
import ContactText from "@/components/sections/contact/ContactText";
|
||||
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||
import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
|
||||
import { Sparkles, Search, ArrowUpRight, Shield, Zap, Puzzle, TrendingUp, Lock, Phone, BookOpen, Award, Users } from "lucide-react";
|
||||
|
||||
export default function WebAgency2Page() {
|
||||
return (
|
||||
@@ -30,245 +29,109 @@ export default function WebAgency2Page() {
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<NavbarLayoutFloatingOverlay
|
||||
<NavbarStyleApple
|
||||
brandName="Vertex"
|
||||
navItems={[
|
||||
{ name: "Projects", id: "work" },
|
||||
{ name: "Capabilities", id: "services" },
|
||||
{ name: "Philosophy", id: "about" },
|
||||
{ name: "Connect", id: "contact" },
|
||||
]}
|
||||
button={{ text: "Get Started", href: "#contact" }}
|
||||
/>
|
||||
<HeroSplitDoubleCarousel
|
||||
title="Scaling Digital Frontiers"
|
||||
description="We engineer sophisticated web platforms that merge architectural precision with high-conversion design to elevate your business presence."
|
||||
tag="Premium Digital Studio"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "canvas-reveal" }}
|
||||
buttons={[
|
||||
{ text: "Start Project", href: "#contact" },
|
||||
{ text: "Our Portfolio", href: "#work" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
carouselPosition="right"
|
||||
leftCarouselItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/empty-startup-office-displays-statistics_482257-119484.jpg", imageAlt: "Enterprise SaaS interface" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/empty-high-end-office-workspace-with-advanced-technology-enhance-efficiency_482257-119617.jpg", imageAlt: "Fintech dashboard" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/beautiful-geometric-shapes-nature_23-2150697274.jpg", imageAlt: "Luxury lifestyle portal" },
|
||||
]}
|
||||
rightCarouselItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/digital-art-style-fashion-design-sketch-paper_23-2151486994.jpg", imageAlt: "Creative agency site" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169842.jpg", imageAlt: "AI research dashboard" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/supermarket-trolleys-filled-with-black-friday-promotional-products_23-2148663147.jpg", imageAlt: "E-commerce platform" },
|
||||
]}
|
||||
carouselItemClassName="!aspect-[4/5]"
|
||||
/>
|
||||
<FeatureBento
|
||||
title="Strategic Capabilities"
|
||||
description="Comprehensive digital solutions crafted to navigate complex market challenges."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
buttons={[{ text: "View Full Stack", href: "#services" }]}
|
||||
buttonAnimation="slide-up"
|
||||
features={[
|
||||
{
|
||||
title: "Search Intelligence", description: "Advanced SEO algorithms to maximize your reach and dominate search intent.", bentoComponent: "marquee", centerIcon: Search,
|
||||
variant: "text", texts: ["Algorithm", "Optimization", "Strategy", "Insights", "Growth", "Authority", "Ranking", "Velocity"],
|
||||
},
|
||||
{
|
||||
title: "Cloud Engineering", description: "Robust infrastructure built for speed, security, and global scale.", bentoComponent: "media-stack", items: [
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/dimly-lit-facility-running-deep-learning-platforms-neural-networks-training_482257-124557.jpg", imageAlt: "Cloud interface" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/business-network-background-connecting-dots-technology-design_53876-160210.jpg", imageAlt: "Infrastructure visualization" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/progress-stock-figures-timeline-concept_53876-148029.jpg", imageAlt: "Deployment cycle" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Brand Identity", description: "Distinguishable visual language that defines your market position.", bentoComponent: "media-stack", items: [
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/web-template-layout-draft-sketch_53876-127643.jpg", imageAlt: "Design system" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/dictionary-definition-word_93675-129721.jpg", imageAlt: "Typographic study" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/choosing-suitable-color_1098-14863.jpg", imageAlt: "Color strategy" },
|
||||
],
|
||||
},
|
||||
{ name: "Work", id: "work" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
/>
|
||||
<FeatureCardTwentySix
|
||||
title="Recent Ventures"
|
||||
description="Selected works reflecting our dedication to engineering excellence and aesthetic rigor."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
buttons={[{ text: "Explore Portfolio", href: "#work" }]}
|
||||
buttonAnimation="slide-up"
|
||||
cardClassName="!h-auto aspect-video"
|
||||
features={[
|
||||
{
|
||||
title: "Nebula Dynamics", description: "Aerospace control interface", imageSrc: "http://img.b2bpic.net/free-photo/top-view-laptop-table-glowing-screen-dark_169016-53642.jpg", imageAlt: "Nebula Dynamics UI", buttonIcon: ArrowUpRight,
|
||||
buttonHref: "#"},
|
||||
{
|
||||
title: "Azure Capital", description: "Private equity portal", imageSrc: "http://img.b2bpic.net/free-photo/banking-web-laptop-office_53876-124775.jpg", imageAlt: "Azure Capital portal", buttonIcon: ArrowUpRight,
|
||||
buttonHref: "#"},
|
||||
{
|
||||
title: "Moda Collective", description: "Global fashion logistics", imageSrc: "http://img.b2bpic.net/free-photo/side-view-elderly-woman-working-laptop_23-2148419263.jpg", imageAlt: "Moda Collective design", buttonIcon: ArrowUpRight,
|
||||
buttonHref: "#"},
|
||||
{
|
||||
title: "Veritas Research", description: "Scientific data platform", imageSrc: "http://img.b2bpic.net/free-photo/graphic-designer-designing-ux-ai-software-turning-text-prompt-into-photos_482257-118812.jpg", imageAlt: "Veritas Research dashboard", buttonIcon: ArrowUpRight,
|
||||
buttonHref: "#"},
|
||||
]}
|
||||
/>
|
||||
<FeatureBento
|
||||
title="Core Infrastructure"
|
||||
description="Foundational pillars that drive our digital production process."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
features={[
|
||||
{
|
||||
title: "Multi-Platform Sync", description: "Unified experience across web, desktop, and mobile operating systems.", bentoComponent: "phone", statusIcon: Lock,
|
||||
alertIcon: Monitor,
|
||||
alertTitle: "Connectivity", alertMessage: "System sync secure", apps: [
|
||||
{ name: "OS", icon: Phone },
|
||||
{ name: "Data", icon: MessageCircle },
|
||||
{ name: "Docs", icon: BookOpen },
|
||||
{ name: "Stream", icon: Tv },
|
||||
{ name: "Capture", icon: Camera },
|
||||
{ name: "Media", icon: Music },
|
||||
{ name: "Sys", icon: Settings },
|
||||
{ name: "Notify", icon: MessageCircle },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Hardened Security", description: "Enterprise-grade protection with zero-trust architecture.", bentoComponent: "reveal-icon", icon: Shield,
|
||||
},
|
||||
{
|
||||
title: "Agile Roadmap", description: "Structured sprints from conceptualization to global rollout.", bentoComponent: "timeline", heading: "Development Life Cycle", subheading: "Quarter 1", items: [
|
||||
{ label: "Architecture", detail: "Phase A" },
|
||||
{ label: "Execution", detail: "Phase B" },
|
||||
{ label: "Optimization", detail: "Phase C" },
|
||||
],
|
||||
completedLabel: "Deployed"},
|
||||
{
|
||||
title: "API Ecosystem", description: "Seamless integration with your existing stack and third-party services.", bentoComponent: "orbiting-icons", centerIcon: Puzzle,
|
||||
items: [
|
||||
{ icon: Shield },
|
||||
{ icon: Monitor },
|
||||
{ icon: Zap },
|
||||
{ icon: TrendingUp },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Market Velocity", description: "Real-time data visualization to measure growth trajectories.", bentoComponent: "line-chart"},
|
||||
]}
|
||||
/>
|
||||
<TestimonialCardFifteen
|
||||
testimonial="The architectural depth Vertex brought to our project was unmatched. They turned complex system requirements into an intuitive, high-performance platform."
|
||||
rating={5}
|
||||
author="— Julian Vane, CTO at Nebula Dynamics"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/cheerful-attractive-businesswoman-crossing-arms_1262-4724.jpg", alt: "Client testimonial" },
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
<MetricCardOne
|
||||
title="Proven Performance"
|
||||
description="Driving outcomes through precise engineering and creative design."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
metrics={[
|
||||
{ id: "impact", value: "500+", title: "Deployments", description: "High-scale platforms launched", icon: Award },
|
||||
{ id: "trust", value: "99.9%", title: "Uptime", description: "Consistency in delivery", icon: Users },
|
||||
{ id: "reach", value: "12M+", title: "Users", description: "Active monthly participants", icon: TrendingUp },
|
||||
]}
|
||||
/>
|
||||
<FeatureCardSixteen
|
||||
title="Architectural Edge"
|
||||
description="Why sophisticated teams prefer our approach over legacy providers."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
negativeCard={{
|
||||
items: [
|
||||
"Rigid, unscalable templates", "Unoptimized system performance", "Fragmented integration strategy", "Static visual presentations", "Opaque maintenance cycles"],
|
||||
}}
|
||||
positiveCard={{
|
||||
items: [
|
||||
"Custom modular architecture", "Core Web Vitals dominance", "Unified service integration", "Dynamic, brand-aware aesthetics", "Predictable operational support"],
|
||||
}}
|
||||
/>
|
||||
<TeamCardFive
|
||||
title="The Engineering Core"
|
||||
description="Meet the multi-disciplinary team driving our creative output."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
mediaClassName="object-[65%_center]"
|
||||
team={[
|
||||
{ id: "1", name: "Elena Thorne", role: "Lead Systems Engineer", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-wearing-grey-turtleneck-eyeglasses_273609-13189.jpg", imageAlt: "Elena Thorne" },
|
||||
{ id: "2", name: "Marcus Vane", role: "Creative Director", imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-bearded-man-suit_23-2149705921.jpg", imageAlt: "Marcus Vane" },
|
||||
{ id: "3", name: "Sarah Chen", role: "Interface Designer", imageSrc: "http://img.b2bpic.net/free-photo/woman-architect-using-touch-screen-building-model-maquette-layout-engineer-working-with-blueprint-plan-construction-development-graphic-design-architectural-office_482257-31903.jpg", imageAlt: "Sarah Chen" },
|
||||
]}
|
||||
/>
|
||||
<FaqBase
|
||||
title="Technical Insights"
|
||||
description="Addressing fundamental queries about our production philosophy."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqsAnimation="slide-up"
|
||||
faqs={[
|
||||
{ id: "1", title: "What is your production methodology?", content: "We utilize an agile, iterative process that prioritizes performance and scalability from the first line of code." },
|
||||
{ id: "2", title: "How is your engagement structured?", content: "Engagement models are bespoke, tailored to your technical requirements and project duration." },
|
||||
{ id: "3", title: "What happens post-launch?", content: "We provide comprehensive operational support to ensure system longevity and optimal performance." },
|
||||
{ id: "4", title: "Do you support system migration?", content: "We specialize in complex migration paths, ensuring data integrity throughout the transition." },
|
||||
{ id: "5", title: "Is your architecture scalable?", content: "Yes, our core philosophy is built around modularity, ensuring platforms can evolve with your growth." },
|
||||
]}
|
||||
/>
|
||||
<ContactCTA
|
||||
tag="Ready to scale?"
|
||||
title="Engineering Your Next Breakthrough"
|
||||
description="Let’s translate your vision into a scalable digital reality."
|
||||
background={{ variant: "rotated-rays-animated" }}
|
||||
buttons={[
|
||||
{ text: "Initialize Consultation", href: "#contact" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
<FooterBase
|
||||
<div id="hero">
|
||||
<HeroSplitDualMedia
|
||||
title="Scaling Digital Frontiers"
|
||||
description="We engineer sophisticated web platforms that merge architectural precision with high-conversion design."
|
||||
tag="Premium Digital Studio"
|
||||
tagIcon={Sparkles}
|
||||
background={{ variant: "canvas-reveal" }}
|
||||
rating={5}
|
||||
ratingText="Trusted by enterprise leaders"
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/empty-startup-office-displays-statistics_482257-119484.jpg", imageAlt: "SaaS interface" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/empty-high-end-office-workspace-with-advanced-technology-enhance-efficiency_482257-119617.jpg", imageAlt: "Dashboard design" }
|
||||
]}
|
||||
buttons={[{ text: "Start Project", href: "#contact" }]}
|
||||
/>
|
||||
</div>
|
||||
<div id="services">
|
||||
<FeatureCardTwentyFive
|
||||
title="Strategic Capabilities"
|
||||
description="Comprehensive digital solutions for complex market challenges."
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
features={[
|
||||
{ title: "Search Intelligence", description: "Advanced algorithms for growth.", icon: Search, mediaItems: [] },
|
||||
{ title: "Cloud Engineering", description: "Robust infrastructure for scale.", icon: Zap, mediaItems: [] },
|
||||
{ title: "Brand Identity", description: "Distinguishable visual language.", icon: Puzzle, mediaItems: [] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about">
|
||||
<TestimonialCardTwelve
|
||||
testimonials={[{ id: "1", name: "Julian Vane, CTO at Nebula", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-attractive-businesswoman-crossing-arms_1262-4724.jpg" }]}
|
||||
cardTitle="Client Success"
|
||||
cardTag="Testimonials"
|
||||
cardAnimation="slide-up"
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics">
|
||||
<MetricCardThree
|
||||
title="Proven Performance"
|
||||
description="Data-driven outcomes for high-scale platforms."
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
metrics={[
|
||||
{ id: "1", icon: Award, title: "Deployments", value: "500+" },
|
||||
{ id: "2", icon: Users, title: "Active Users", value: "12M+" },
|
||||
{ id: "3", icon: TrendingUp, title: "Uptime", value: "99.9%" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="team">
|
||||
<TeamCardSix
|
||||
title="Engineering Core"
|
||||
description="The team driving our output."
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
members={[
|
||||
{ id: "1", name: "Elena Thorne", role: "Systems Engineer", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-wearing-grey-turtleneck-eyeglasses_273609-13189.jpg" },
|
||||
{ id: "2", name: "Marcus Vane", role: "Creative Lead", imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-bearded-man-suit_23-2149705921.jpg" },
|
||||
{ id: "3", name: "Sarah Chen", role: "Designer", imageSrc: "http://img.b2bpic.net/free-photo/woman-architect-using-touch-screen-building-model-maquette-layout-engineer-working-with-blueprint-plan-construction-development-graphic-design-architectural-office_482257-31903.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="faq">
|
||||
<FaqDouble
|
||||
title="Technical Insights"
|
||||
description="Fundamental queries answered."
|
||||
faqsAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "1", title: "Production methodology?", content: "Iterative, high-performance focused development." },
|
||||
{ id: "2", title: "Scalability approach?", content: "Modular architecture built for evolution." }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact">
|
||||
<ContactText
|
||||
text="Ready to engineer your breakthrough? Let's connect."
|
||||
background={{ variant: "rotated-rays-animated" }}
|
||||
buttons={[{ text: "Contact Us", href: "#contact" }]}
|
||||
/>
|
||||
</div>
|
||||
<FooterBaseCard
|
||||
logoText="Vertex"
|
||||
copyrightText="© 2026 | Vertex Agency"
|
||||
columns={[
|
||||
{
|
||||
title: "Enterprise", items: [
|
||||
{ label: "Philosophy", href: "#about" },
|
||||
{ label: "Capabilities", href: "#services" },
|
||||
{ label: "Portfolio", href: "#work" },
|
||||
{ label: "Contact", href: "#contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Services", items: [
|
||||
{ label: "Web Engineering", href: "#" },
|
||||
{ label: "SEO Analytics", href: "#" },
|
||||
{ label: "Identity Design", href: "#" },
|
||||
{ label: "UI/UX Systems", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Social", items: [
|
||||
{ label: "X / Twitter", href: "#" },
|
||||
{ label: "GitHub", href: "#" },
|
||||
{ label: "LinkedIn", href: "#" },
|
||||
{ label: "Dribbble", href: "#" },
|
||||
],
|
||||
},
|
||||
{ title: "Company", items: [{ label: "Philosophy", href: "#about" }] },
|
||||
{ title: "Services", items: [{ label: "Engineering", href: "#services" }] }
|
||||
]}
|
||||
/>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user