255 lines
14 KiB
TypeScript
255 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
|
import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
|
|
import AboutMetric from "@/components/sections/about/AboutMetric";
|
|
import FeatureCardSixteen from "@/components/sections/feature/FeatureCardSixteen";
|
|
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
|
|
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
|
|
import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
|
|
import ContactFaq from "@/components/sections/contact/ContactFaq";
|
|
import FooterCard from "@/components/sections/footer/FooterCard";
|
|
import { Award, CheckCircle, Code, Github, Headphones, Hammer, Linkedin, Mail, Palette, Pencil, Search, Send, Shield, Sparkles, Star, Target, Twitter, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="rounded"
|
|
contentWidth="smallMedium"
|
|
sizing="medium"
|
|
background="blurBottom"
|
|
cardStyle="gradient-mesh"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
brandName="Leet Agency"
|
|
navItems={[
|
|
{ name: "Why", id: "why" },
|
|
{ name: "Services", id: "services" },
|
|
{ name: "Work", id: "work" },
|
|
{ name: "Process", id: "process" }
|
|
]}
|
|
button={{ text: "Start a Project", href: "#contact" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardGallery
|
|
title="We Build Digital Experiences That Feel Premium"
|
|
description="Precision-driven creative and development. Apps, websites, design, and video that inspire trust and excellence."
|
|
tag="Elite Digital Agency"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "View Our Work", href: "#work" },
|
|
{ text: "Start a Project", href: "#contact" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-supervisors-inspecting-solar-plant-machinery_482257-124252.jpg", imageAlt: "Modern creative workspace"
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-psd/electronic-music-event-template_23-2151847729.jpg", imageAlt: "Premium gradient background"
|
|
}
|
|
]}
|
|
mediaAnimation="blur-reveal"
|
|
background={{ variant: "radial-gradient" }}
|
|
ariaLabel="Hero section - Premium digital experiences"
|
|
/>
|
|
</div>
|
|
|
|
<div id="why" data-section="why">
|
|
<AboutMetric
|
|
title="We Believe Digital Products Should Inspire Trust, Clarity, and Excellence"
|
|
metrics={[
|
|
{ icon: Target, label: "Precision", value: "Every Detail" },
|
|
{ icon: Zap, label: "Performance", value: "Lightning Fast" },
|
|
{ icon: Shield, label: "Trust", value: "Always Secure" },
|
|
{ icon: Award, label: "Excellence", value: "Premium Quality" }
|
|
]}
|
|
metricsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
ariaLabel="Why section - Our core beliefs"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardSixteen
|
|
title="What We Do"
|
|
description="Through elite talent, attention to detail, and client-focused customization, we deliver precision-driven solutions that set industry standards."
|
|
tag="Our Services"
|
|
tagIcon={Code}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
animationType="slide-up"
|
|
positiveCard={{
|
|
items: ["Web Applications", "Responsive Websites", "UI/UX Design", "Brand Strategy"]
|
|
}}
|
|
negativeCard={{
|
|
items: ["Video Production", "Content Editing", "Motion Graphics", "Digital Marketing"]
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="work" data-section="work">
|
|
<ProductCardTwo
|
|
title="Our Work"
|
|
description="Quality over quantity. Each project represents our commitment to precision, innovation, and client success."
|
|
tag="Featured Projects"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="blur-reveal"
|
|
gridVariant="bento-grid"
|
|
products={[
|
|
{
|
|
id: "1", brand: "E-Commerce", name: "High-Performance Store", price: "Conversion +45%", rating: 5,
|
|
reviewCount: "Premium", imageSrc: "http://img.b2bpic.net/free-vector/webtemplate-landing-page-homes_52683-30916.jpg", imageAlt: "Modern e-commerce web design"
|
|
},
|
|
{
|
|
id: "2", brand: "Video Production", name: "Brand Story Campaign", price: "2M+ Views", rating: 5,
|
|
reviewCount: "Viral", imageSrc: "http://img.b2bpic.net/free-photo/young-content-creator-blonde-girl-is-her-laptop-table-filming-herself-using-camera-tripod-working-from-home-recording-vlog_1268-17406.jpg", imageAlt: "Professional video production"
|
|
},
|
|
{
|
|
id: "3", brand: "Brand Strategy", name: "Complete Rebrand", price: "Full Identity", rating: 5,
|
|
reviewCount: "Strategic", imageSrc: "http://img.b2bpic.net/free-vector/colorful-business-card_1043-287.jpg", imageAlt: "Brand identity design system"
|
|
},
|
|
{
|
|
id: "4", brand: "App Development", name: "SaaS Platform", price: "5K+ Users", rating: 5,
|
|
reviewCount: "Scalable", imageSrc: "http://img.b2bpic.net/free-vector/flat-ui-template-with-screens-icons-web-buttons-elements-mobile-design_1284-45198.jpg", imageAlt: "User-friendly app interface"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="why-choose" data-section="why-choose">
|
|
<MetricCardOne
|
|
title="Why Choose Leet Agency"
|
|
description="We combine psychological principles with design excellence. Clarity builds understanding. Authority builds confidence. Trust builds loyalty."
|
|
tag="Our Advantage"
|
|
tagIcon={CheckCircle}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
animationType="scale-rotate"
|
|
gridVariant="uniform-all-items-equal"
|
|
metrics={[
|
|
{
|
|
id: "1", value: "100%", title: "Custom", description: "Every project is tailored to your unique goals and vision", icon: Palette
|
|
},
|
|
{
|
|
id: "2", value: "24/7", title: "Support", description: "Dedicated team available throughout your project lifecycle", icon: Headphones
|
|
},
|
|
{
|
|
id: "3", value: "10+", title: "Years Experience", description: "Proven track record of delivering premium digital solutions", icon: Award
|
|
},
|
|
{
|
|
id: "4", value: "300+", title: "Projects", description: "Diverse portfolio across industries and scales", icon: CheckCircle
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="process" data-section="process">
|
|
<AboutMetric
|
|
title="Our Process"
|
|
metrics={[
|
|
{ icon: Search, label: "Discover", value: "Understanding" },
|
|
{ icon: Pencil, label: "Design", value: "Strategy" },
|
|
{ icon: Hammer, label: "Build", value: "Execution" },
|
|
{ icon: Send, label: "Deliver", value: "Excellence" }
|
|
]}
|
|
metricsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
ariaLabel="Process section - Our workflow"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwo
|
|
title="What Our Clients Say"
|
|
description="Real feedback from brands we've helped transform"
|
|
tag="Client Stories"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
animationType="blur-reveal"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Mitchell", role: "CEO", testimonial: "Leet Agency transformed our digital presence. Their attention to detail and precision is unmatched. We saw a 60% increase in conversions within three months.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-black-suit_23-2148401442.jpg", imageAlt: "Sarah Mitchell"
|
|
},
|
|
{
|
|
id: "2", name: "James Chen", role: "Founder", testimonial: "Working with Leet Agency felt like partnering with mind readers. They understood our vision instantly and delivered beyond expectations.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-with-long-brown-hair-black-t-shirt-white-jacket_613910-8245.jpg", imageAlt: "James Chen"
|
|
},
|
|
{
|
|
id: "3", name: "Emma Rodriguez", role: "Marketing Director", testimonial: "The professionalism and quality of their work is exceptional. They truly care about client success. Highly recommended.", imageSrc: "http://img.b2bpic.net/free-photo/joyful-man-white-tshirt-jacket-smiling-brown-background_197531-26657.jpg", imageAlt: "Emma Rodriguez"
|
|
},
|
|
{
|
|
id: "4", name: "Michael Park", role: "CTO", testimonial: "Premium quality from start to finish. Their team brought our complex project to life with elegance and precision.", imageSrc: "http://img.b2bpic.net/free-photo/closeup-happy-senior-businessman-with-flipchart_1262-1744.jpg", imageAlt: "Michael Park"
|
|
},
|
|
{
|
|
id: "5", name: "Lisa Bennett", role: "Brand Manager", testimonial: "Leet Agency elevated our brand identity. Their strategic approach and creative excellence are simply outstanding.", imageSrc: "http://img.b2bpic.net/free-photo/business-woman-working-home_23-2148162643.jpg", imageAlt: "Lisa Bennett"
|
|
},
|
|
{
|
|
id: "6", name: "David Thompson", role: "Product Lead", testimonial: "Best investment we made. Their solutions are scalable, beautiful, and performant. A true partner in growth.", imageSrc: "http://img.b2bpic.net/free-photo/redhead-female-supervisor-dressed-elegant-suit-grey-background_613910-10390.jpg", imageAlt: "David Thompson"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactFaq
|
|
ctaTitle="Let's Build Something Exceptional"
|
|
ctaDescription="Your vision deserves excellence. Let's create digital experiences that inspire trust, clarity, and results. Start your project with Leet Agency today."
|
|
ctaButton={{ text: "Start Your Project", href: "mailto:hello@leetagency.com" }}
|
|
ctaIcon={Sparkles}
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "What's your typical project timeline?", content: "Projects typically range from 6-16 weeks depending on scope and complexity. We provide detailed timelines after our initial discovery phase."
|
|
},
|
|
{
|
|
id: "2", title: "Do you work with startups?", content: "Absolutely. We love working with innovative startups. Our flexible engagement models scale with your business needs."
|
|
},
|
|
{
|
|
id: "3", title: "What's your approach to communication?", content: "Transparency is key. We maintain regular updates, weekly check-ins, and are always available for your questions and concerns."
|
|
},
|
|
{
|
|
id: "4", title: "How do you ensure project success?", content: "We start with deep discovery, set clear KPIs, iterate based on feedback, and continuously optimize for your goals."
|
|
},
|
|
{
|
|
id: "5", title: "Do you provide post-launch support?", content: "Yes. We offer comprehensive support packages including maintenance, updates, and optimization after launch."
|
|
},
|
|
{
|
|
id: "6", title: "What technologies do you use?", content: "We specialize in modern tech: React, Next.js, Node.js, TypeScript, Tailwind CSS, and cloud platforms like AWS and Vercel."
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="Leet Agency"
|
|
copyrightText="© 2025 Leet Agency. Premium Digital Solutions."
|
|
socialLinks={[
|
|
{ icon: Github, href: "https://github.com", ariaLabel: "GitHub" },
|
|
{ icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn" },
|
|
{ icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" },
|
|
{ icon: Mail, href: "mailto:hello@leetagency.com", ariaLabel: "Email" }
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |