348 lines
12 KiB
TypeScript
348 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
import HeroSplit from '@/components/sections/hero/HeroSplit';
|
|
import MediaAbout from '@/components/sections/about/MediaAbout';
|
|
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
|
import { CheckCircle, Code, Palette, Rocket, ShieldCheck, TrendingUp } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="expand-hover"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="pill"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
navItems={[
|
|
{
|
|
name: "About",
|
|
id: "#about",
|
|
},
|
|
{
|
|
name: "Services",
|
|
id: "#features",
|
|
},
|
|
{
|
|
name: "Portfolio",
|
|
id: "#testimonials",
|
|
},
|
|
{
|
|
name: "Contact",
|
|
id: "#contact",
|
|
},
|
|
]}
|
|
brandName="AgencyStudio"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplit
|
|
background={{
|
|
variant: "plain",
|
|
}}
|
|
title="Elevating Digital Identity"
|
|
description="We build high-performance websites that bridge the gap between creative design and technical excellence for global brands."
|
|
buttons={[
|
|
{
|
|
text: "See Our Work",
|
|
href: "#testimonials",
|
|
},
|
|
{
|
|
text: "Contact Us",
|
|
href: "#contact",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/abstract-stain-with-ferromagnetic-liquid-metal-with-copy-space_23-2148253549.jpg?_wi=1"
|
|
mediaAnimation="slide-up"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/close-up-portrait-middle-aged-man-with-beard-hairstyle-dressed-elegant-blue-suit-textured-dark-background-studio_613910-19853.jpg",
|
|
alt: "professional entrepreneur portrait",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/blonde-businesswoman-portrait-with-copy-space_1194-633470.jpg",
|
|
alt: "blonde businesswoman portrait",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/close-up-portrait-handsome-middle-aged-man-with-beard-hairstyle-dressed-elegant-formal-suit-textured-dark-background-studio_613910-19887.jpg",
|
|
alt: "tech consultant portrait",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/handsome-bearded-african-american-businessman-brown-classic-jacket-isolated-dark-background_613910-6597.jpg",
|
|
alt: "creative designer portrait",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/confident-african-businesswoman-mockup-psd-smiling-closeup-portr_53876-143279.jpg",
|
|
alt: "project manager portrait",
|
|
},
|
|
]}
|
|
avatarText="Join 500+ satisfied clients"
|
|
marqueeItems={[
|
|
{
|
|
type: "text",
|
|
text: "Innovation",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Performance",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Scalability",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Reliability",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Creativity",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MediaAbout
|
|
useInvertedBackground={false}
|
|
title="Crafting Digital Future"
|
|
description="Founded by industry experts, we focus on delivering scalable, secure, and visually stunning digital products that drive measurable business growth."
|
|
imageSrc="http://img.b2bpic.net/free-photo/modern-minimalist-office_23-2151780713.jpg?_wi=1"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureHoverPattern
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
icon: Code,
|
|
title: "Custom Development",
|
|
description: "Hand-coded solutions tailored to your unique requirements.",
|
|
},
|
|
{
|
|
icon: Palette,
|
|
title: "UI/UX Design",
|
|
description: "User-centric designs that maximize conversion rates.",
|
|
},
|
|
{
|
|
icon: Rocket,
|
|
title: "Cloud Strategy",
|
|
description: "Scalable architecture for growing businesses.",
|
|
},
|
|
]}
|
|
title="Performance at Core"
|
|
description="Our expertise spans across modern stacks and design patterns, ensuring your business stays ahead of the competition."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "m1",
|
|
value: "150+",
|
|
title: "Projects Shipped",
|
|
description: "Delivered successfully.",
|
|
icon: CheckCircle,
|
|
},
|
|
{
|
|
id: "m2",
|
|
value: "20%",
|
|
title: "Conversion Lift",
|
|
description: "Average increase seen.",
|
|
icon: TrendingUp,
|
|
},
|
|
{
|
|
id: "m3",
|
|
value: "99.9%",
|
|
title: "Uptime Rate",
|
|
description: "Always available.",
|
|
icon: ShieldCheck,
|
|
},
|
|
]}
|
|
title="Impact Driven Results"
|
|
description="We track every move, delivering data-backed performance that moves the needle for our partners."
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={[
|
|
"Innovate",
|
|
"TechCorp",
|
|
"GrowthCo",
|
|
"LabCorp",
|
|
"Zenith",
|
|
"CloudSystem",
|
|
"GlobalData",
|
|
]}
|
|
title="Trusted by Brands"
|
|
description="We work with forward-thinking companies worldwide to build better digital experiences."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFive
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "t1",
|
|
name: "Sarah J.",
|
|
date: "Jan 2025",
|
|
title: "CEO",
|
|
quote: "The team transformed our presence entirely.",
|
|
tag: "Brand Strategy",
|
|
avatarSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-blonde-businesswoman-formal-dressed-isolated-dark-textured-background_613910-5399.jpg",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/abstract-stain-with-ferromagnetic-liquid-metal-with-copy-space_23-2148253549.jpg?_wi=2",
|
|
imageAlt: "professional entrepreneur portrait",
|
|
},
|
|
{
|
|
id: "t2",
|
|
name: "Michael C.",
|
|
date: "Dec 2024",
|
|
title: "Creative Lead",
|
|
quote: "An absolute joy to work with, pixel perfect execution.",
|
|
tag: "UI/UX",
|
|
avatarSrc: "http://img.b2bpic.net/free-photo/close-up-confident-corporate-woman-professional-entrepreneur-smiling-cross-arms-chest-smiling-enthusiastic-standing-white-background_1258-85600.jpg",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/modern-minimalist-office_23-2151780713.jpg?_wi=2",
|
|
imageAlt: "professional entrepreneur portrait",
|
|
},
|
|
{
|
|
id: "t3",
|
|
name: "Emily R.",
|
|
date: "Nov 2024",
|
|
title: "Manager",
|
|
quote: "Highly efficient and professional agency.",
|
|
tag: "Development",
|
|
avatarSrc: "http://img.b2bpic.net/free-photo/medium-shot-business-woman-posing_23-2149457761.jpg",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1604.jpg",
|
|
imageAlt: "professional entrepreneur portrait",
|
|
},
|
|
{
|
|
id: "t4",
|
|
name: "David K.",
|
|
date: "Oct 2024",
|
|
title: "Product Lead",
|
|
quote: "We saw instant conversion improvements.",
|
|
tag: "Optimization",
|
|
avatarSrc: "http://img.b2bpic.net/free-photo/bearded-man-brown-suit-wearing-glasses-looking-camera-happy-positive-with-arms-crossed-standing-purple-background_141793-110749.jpg",
|
|
imageSrc: "http://img.b2bpic.net/free-vector/gradient-technology-logo_52683-8578.jpg",
|
|
imageAlt: "professional entrepreneur portrait",
|
|
},
|
|
{
|
|
id: "t5",
|
|
name: "Olivia S.",
|
|
date: "Sep 2024",
|
|
title: "Founder",
|
|
quote: "The best partner for scalable solutions.",
|
|
tag: "Strategy",
|
|
avatarSrc: "http://img.b2bpic.net/free-photo/design-creative-visual-trendy-ideas-style-purpose_53876-16492.jpg",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=w4jgk6",
|
|
imageAlt: "professional entrepreneur portrait",
|
|
},
|
|
]}
|
|
title="Client Success Stories"
|
|
description="Hear what our partners have to say about the impact we've made on their digital presence."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "f1",
|
|
title: "What is your process?",
|
|
content: "We follow a highly collaborative sprint-based approach.",
|
|
},
|
|
{
|
|
id: "f2",
|
|
title: "Do you offer maintenance?",
|
|
content: "Yes, we provide ongoing support and performance tuning.",
|
|
},
|
|
{
|
|
id: "f3",
|
|
title: "How long do projects take?",
|
|
content: "Timelines vary by complexity but average 8-12 weeks.",
|
|
},
|
|
]}
|
|
title="Frequently Asked"
|
|
description="Quick answers to common questions about our agency process and engagement model."
|
|
faqsAnimation="slide-up"
|
|
imageSrc="http://img.b2bpic.net/free-photo/modern-minimalist-office_23-2151780713.jpg?_wi=3"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "plain",
|
|
}}
|
|
tag="Ready to Start?"
|
|
title="Let's Build Something Great"
|
|
description="Get in touch to discuss your next project. We're ready to help you grow."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="http://img.b2bpic.net/free-photo/3d-render-abstract-background-with-techno-cyber-particles_1048-14428.jpg"
|
|
logoText="AgencyStudio"
|
|
columns={[
|
|
{
|
|
title: "Company",
|
|
items: [
|
|
{
|
|
label: "About",
|
|
href: "#about",
|
|
},
|
|
{
|
|
label: "Services",
|
|
href: "#features",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Resources",
|
|
items: [
|
|
{
|
|
label: "FAQs",
|
|
href: "#faq",
|
|
},
|
|
{
|
|
label: "Contact",
|
|
href: "#contact",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|