353 lines
23 KiB
TypeScript
353 lines
23 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
|
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
|
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
|
|
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
|
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
|
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
import { Sparkles, Award, Lightbulb, Zap, TrendingUp, Crown, Shield, DollarSign, FolderOpen, MessageSquare, Users, HelpCircle, Send } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="shift-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="soft"
|
|
contentWidth="medium"
|
|
sizing="mediumSizeLargeTitles"
|
|
background="circleGradient"
|
|
cardStyle="gradient-mesh"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
brandName="Design Axis"
|
|
navItems={[
|
|
{ name: "Services", id: "services" },
|
|
{ name: "Portfolio", id: "portfolio" },
|
|
{ name: "Pricing", id: "pricing" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "Contact", id: "contact" },
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboard
|
|
title="WE BUILD BRANDS THAT WIN"
|
|
description="Partner with a digital agency that turns strategy into measurable results. From concept to launch, we deliver design, development, and growth in 5 years of proven excellence."
|
|
background={{ variant: "sparkles-gradient" }}
|
|
tag="Premium Digital Agency"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Start Your Project", href: "contact" },
|
|
{ text: "View Our Work", href: "portfolio" },
|
|
]}
|
|
buttonAnimation="blur-reveal"
|
|
imageSrc="http://img.b2bpic.net/free-photo/group-business-executives-interacting-with-each-other_1170-760.jpg"
|
|
imageAlt="Design Axis - Digital Agency Dashboard"
|
|
mediaAnimation="slide-up"
|
|
marqueeItems={[
|
|
{ type: "text", text: "Brand Strategy" },
|
|
{ type: "text", text: "Web Design" },
|
|
{ type: "text", text: "Development" },
|
|
{ type: "text", text: "Growth Marketing" },
|
|
]}
|
|
marqueeSpeed={35}
|
|
showMarqueeCard={true}
|
|
ariaLabel="Design Axis - Premium Digital Agency Hero"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TestimonialAboutCard
|
|
tag="About Design Axis"
|
|
tagIcon={Award}
|
|
tagAnimation="slide-up"
|
|
title="Five Years of Transforming Brands Into Market Leaders"
|
|
description="Founded by industry veterans"
|
|
subdescription="Design Axis Agency"
|
|
icon={Lightbulb}
|
|
imageSrc="http://img.b2bpic.net/free-photo/team-diverse-coworkers-modern-office-discuss-their-project-together_93675-134863.jpg"
|
|
imageAlt="Design Axis Creative Team"
|
|
mediaAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardTwentyOne
|
|
title="Our Core Services"
|
|
description="We deliver comprehensive digital solutions tailored to your business goals. Each service is crafted with precision and backed by proven ROI metrics."
|
|
tag="Services"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Explore All Services", href: "pricing" },
|
|
]}
|
|
buttonAnimation="blur-reveal"
|
|
accordionItems={[
|
|
{
|
|
id: "1", title: "Brand Strategy & Identity Design", content: "From logo design to complete brand guidelines, we create cohesive visual identities that resonate with your target audience and establish market authority."},
|
|
{
|
|
id: "2", title: "Web Design & Development", content: "Custom websites optimized for conversion, performance, and scalability. We build responsive, fast-loading sites that turn visitors into customers."},
|
|
{
|
|
id: "3", title: "E-commerce Solutions", content: "End-to-end e-commerce platform design and implementation. We integrate payment systems, inventory management, and analytics for seamless online selling."},
|
|
{
|
|
id: "4", title: "Digital Marketing & Growth", content: "Data-driven marketing strategies including SEO, paid advertising, and content marketing to drive measurable business growth."},
|
|
{
|
|
id: "5", title: "UX/UI Design & Optimization", content: "User-centered design that improves engagement and reduces friction. We conduct user research, create prototypes, and optimize for conversions."},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/man-working-desk-top-view_23-2149930937.jpg"
|
|
imageAlt="Design Service Showcase"
|
|
mediaAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
mediaPosition="right"
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardTwo
|
|
title="Five Tiered Service Packages"
|
|
description="Transparent pricing for every business size. Choose the package that matches your goals and scale as you grow."
|
|
tag="Pricing"
|
|
tagIcon={DollarSign}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Get Started", href: "contact" },
|
|
]}
|
|
buttonAnimation="blur-reveal"
|
|
plans={[
|
|
{
|
|
id: "starter", badge: "Starter", badgeIcon: Zap,
|
|
price: "$2,500/mo", subtitle: "Perfect for new brands launching online", buttons: [
|
|
{ text: "Choose Plan", href: "contact" },
|
|
{ text: "Learn More", href: "#" },
|
|
],
|
|
features: [
|
|
"Basic brand guidelines", "5-page website", "Mobile responsive design", "Basic SEO optimization", "Monthly reporting"],
|
|
},
|
|
{
|
|
id: "growth", badge: "Growth", badgeIcon: TrendingUp,
|
|
price: "$5,000/mo", subtitle: "For growing businesses needing expansion", buttons: [
|
|
{ text: "Choose Plan", href: "contact" },
|
|
{ text: "Learn More", href: "#" },
|
|
],
|
|
features: [
|
|
"Complete brand identity system", "Custom 10-page website", "E-commerce integration ready", "Advanced SEO & analytics", "Monthly strategy sessions"],
|
|
},
|
|
{
|
|
id: "professional", badge: "Professional", badgeIcon: Crown,
|
|
price: "$8,500/mo", subtitle: "Our most popular choice for mid-market", buttons: [
|
|
{ text: "Choose Plan", href: "contact" },
|
|
{ text: "Learn More", href: "#" },
|
|
],
|
|
features: [
|
|
"Premium brand strategy & design", "Full e-commerce platform", "Advanced UX/UI optimization", "Paid advertising management", "Quarterly strategy reviews"],
|
|
},
|
|
{
|
|
id: "enterprise", badge: "Enterprise", badgeIcon: Shield,
|
|
price: "$15,000/mo", subtitle: "For enterprise clients requiring dedicated support", buttons: [
|
|
{ text: "Choose Plan", href: "contact" },
|
|
{ text: "Learn More", href: "#" },
|
|
],
|
|
features: [
|
|
"Dedicated project manager", "Custom development & scalability", "Full-stack digital transformation", "Priority 24/7 support", "Monthly executive reviews"],
|
|
},
|
|
{
|
|
id: "platinum", badge: "Platinum", badgeIcon: Sparkles,
|
|
price: "Custom", subtitle: "White-glove service for transformational partners", buttons: [
|
|
{ text: "Schedule Call", href: "contact" },
|
|
{ text: "View Details", href: "#" },
|
|
],
|
|
features: [
|
|
"Complete digital ecosystem design", "Integrated SaaS solutions", "Unlimited revisions & support", "Exclusive partnership benefits", "Quarterly board-level reporting"],
|
|
},
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="portfolio" data-section="portfolio">
|
|
<ProductCardTwo
|
|
title="Portfolio & Case Studies"
|
|
description="See how we've helped brands transform their digital presence and achieve measurable results. Each project showcases our strategic thinking and design excellence."
|
|
tag="Case Studies"
|
|
tagIcon={FolderOpen}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "View All Projects", href: "#" },
|
|
]}
|
|
buttonAnimation="blur-reveal"
|
|
products={[
|
|
{
|
|
id: "1", brand: "TechFlow Inc", name: "Complete Brand Overhaul & Platform Launch", price: "$45,000 project value", rating: 5,
|
|
reviewCount: "12 months ROI: 320%", imageSrc: "http://img.b2bpic.net/free-photo/elegant-cozy-office-with-laptop-desk_23-2149636248.jpg", imageAlt: "TechFlow Brand Identity & Website"},
|
|
{
|
|
id: "2", brand: "LuxeShop Co", name: "E-commerce Platform & Growth Strategy", price: "$38,000 project value", rating: 5,
|
|
reviewCount: "6 months: $2.1M revenue", imageSrc: "http://img.b2bpic.net/free-psd/e-commerce-furniture-landing-page_197582-336.jpg", imageAlt: "LuxeShop E-commerce Design"},
|
|
{
|
|
id: "3", brand: "MobileFirst App", name: "SaaS Platform Design & Launch", price: "$52,000 project value", rating: 5,
|
|
reviewCount: "1000+ active users", imageSrc: "http://img.b2bpic.net/free-vector/workout-tracker-app_23-2148639062.jpg", imageAlt: "MobileFirst App Interface Design"},
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTen
|
|
title="Client Success Stories"
|
|
description="Hear directly from founders, CMOs, and decision-makers who've transformed their brands with Design Axis."
|
|
tag="Testimonials"
|
|
tagIcon={MessageSquare}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Schedule Consultation", href: "contact" },
|
|
]}
|
|
buttonAnimation="blur-reveal"
|
|
testimonials={[
|
|
{
|
|
id: "1", title: "Design Axis transformed our brand presence completely", quote: "Working with Design Axis was a game-changer for our company. They understood our vision, delivered on time, and the results exceeded our expectations. Our website conversion rate increased by 45% in the first three months.", name: "Michael Rodriguez", role: "Founder & CEO", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageAlt: "Michael Rodriguez"},
|
|
{
|
|
id: "2", title: "Professional team that truly understands ROI", quote: "As a CMO, I've worked with many agencies. Design Axis stands out for their data-driven approach and transparent communication. They didn't just design—they strategized our growth trajectory.", name: "Sarah Chen", role: "Chief Marketing Officer", imageSrc: "http://img.b2bpic.net/free-photo/close-up-successful-entrepreneur_1098-3855.jpg", imageAlt: "Sarah Chen"},
|
|
{
|
|
id: "3", title: "Best investment we made for our e-commerce store", quote: "Our e-commerce platform went from 50 to 500 daily orders after Design Axis redesigned our site. The UX improvements and checkout optimization were phenomenal. Highly recommended.", name: "James Park", role: "E-commerce Manager", imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-successful-businessman-smiling-holding-tablet-office_176420-918.jpg", imageAlt: "James Park"},
|
|
{
|
|
id: "4", title: "Enterprise-grade support with creative excellence", quote: "Scaling with Design Axis has been seamless. Their dedicated project manager, technical expertise, and creative vision align perfectly with our enterprise requirements. They're true partners, not vendors.", name: "Lisa Thompson", role: "VP of Digital Strategy", imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-businessman-suit-looking-camera-meeting_1163-4654.jpg", imageAlt: "Lisa Thompson"},
|
|
{
|
|
id: "5", title: "Transparent pricing and exceptional delivery", quote: "No hidden costs, no scope creep—just honest communication and brilliant execution. Design Axis delivered our entire digital transformation on budget and ahead of schedule.", name: "David Kim", role: "Operations Director", imageSrc: "http://img.b2bpic.net/free-photo/happy-businessman-using-touchpad-while-relaxing-staircase-looking-camera_637285-10976.jpg", imageAlt: "David Kim"},
|
|
{
|
|
id: "6", title: "Strategic partnership that drives real results", quote: "Five years of working with Design Axis has been invaluable. They've become an extension of our team, constantly innovating and pushing us to achieve more. Our market position has never been stronger.", name: "Emma Watson", role: "COO", imageSrc: "http://img.b2bpic.net/free-photo/joyful-businesswoman-holding-tablet_74855-2024.jpg", imageAlt: "Emma Watson"},
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
title="Trusted by Industry Leaders"
|
|
description="We've partnered with forward-thinking companies across industries to drive digital transformation and measurable growth."
|
|
tag="Our Clients"
|
|
tagIcon={Users}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Join Them", href: "contact" },
|
|
]}
|
|
buttonAnimation="blur-reveal"
|
|
names={["TechFlow", "LuxeShop", "InnovateLab", "GrowthCo", "StartupXYZ", "EnterprisePro", "DigitalFirst"]}
|
|
logos={[
|
|
"http://img.b2bpic.net/free-vector/technology-logo-collection_23-2148151111.jpg", "http://img.b2bpic.net/free-vector/gradient-abstract-logo-template_23-2148161323.jpg", "http://img.b2bpic.net/free-vector/neon-cyber-monday-special-offers-banner_23-2148339255.jpg", "http://img.b2bpic.net/free-vector/geometric-harmony-hills-private-school-logo-template_742173-18879.jpg", "http://img.b2bpic.net/free-vector/interior-design-logo-template_742173-3120.jpg", "http://img.b2bpic.net/free-vector/gradient-data-logo-template_23-2149202350.jpg", "http://img.b2bpic.net/free-vector/professional-data-logo-template_23-2149221609.jpg"]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
speed={40}
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqDouble
|
|
faqs={[
|
|
{
|
|
id: "1", title: "What's included in each service package?", content: "Each package is customized to your needs. Our Starter plan includes brand basics, web design, and foundational marketing. Our Professional plan adds e-commerce, advanced analytics, and strategy sessions. Enterprise plans provide dedicated managers, custom development, and 24/7 support. We're transparent about what's included—no hidden costs."},
|
|
{
|
|
id: "2", title: "How long does a typical project take?", content: "Project timelines vary based on scope. Most brand overhauls take 6-12 weeks, websites 4-8 weeks, and full platform builds 12-20 weeks. We provide detailed project schedules upfront and communicate progress weekly. Delivery speed is balanced with quality—we never compromise on excellence for speed."},
|
|
{
|
|
id: "3", title: "Do you offer ongoing support after launch?", content: "Yes. All our packages include ongoing support and monthly strategy sessions. We treat projects as partnerships, not one-off engagements. Your success is our success. We monitor performance, optimize continuously, and help you scale as your business grows."},
|
|
{
|
|
id: "4", title: "How do you measure ROI and results?", content: "We establish clear KPIs at the start of every project—conversion rates, revenue impact, traffic growth, or brand sentiment. Monthly reports show exactly how our work impacts your bottom line. We use industry-standard analytics and provide transparent dashboards so you see results in real-time."},
|
|
{
|
|
id: "5", title: "Can you work with our existing team or vendors?", content: "Absolutely. We integrate seamlessly with existing marketing teams, developers, and vendors. Clear communication and documentation are priorities. We can lead the strategy or support your existing team—whatever works best for your organization."},
|
|
{
|
|
id: "6", title: "What makes Design Axis different from other agencies?", content: "Five years of proven results, transparent pricing, dedicated partnership approach, and a track record of 300%+ average ROI for our clients. We combine creative excellence with data-driven strategy. Most importantly, we invest in understanding your business deeply before proposing solutions."},
|
|
{
|
|
id: "7", title: "How do you handle revisions and feedback?", content: "Revisions are built into every project. We typically include 2-3 rounds of changes before final delivery. We listen carefully to feedback and iterate until you're truly satisfied. Our goal is your complete satisfaction—we're not done until you're thrilled."},
|
|
{
|
|
id: "8", title: "What if we outgrow our current package?", content: "Scaling is natural and expected. We offer flexible upgrade paths—start with Growth, upgrade to Professional as you expand. Our Platinum package provides white-glove service for truly transformational partnerships. Discuss scaling at any time; we're built to grow with you."},
|
|
]}
|
|
title="Frequently Asked Questions"
|
|
description="Clear answers to help you understand our process, pricing, and approach to delivering exceptional results."
|
|
tag="Support"
|
|
tagIcon={HelpCircle}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Contact Our Team", href: "contact" },
|
|
]}
|
|
buttonAnimation="blur-reveal"
|
|
faqsAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="smooth"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
tag="Ready to Get Started?"
|
|
tagIcon={Send}
|
|
tagAnimation="slide-up"
|
|
title="Let's Build Something Great Together"
|
|
description="Whether you need a brand refresh, website redesign, or complete digital transformation, we're ready to help. Schedule a consultation with our team to discuss your goals and how we can drive measurable results."
|
|
buttons={[
|
|
{ text: "Schedule Free Consultation", href: "contact" },
|
|
{ text: "View Pricing Plans", href: "pricing" },
|
|
]}
|
|
buttonAnimation="blur-reveal"
|
|
background={{ variant: "sparkles-gradient" }}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="http://img.b2bpic.net/free-photo/empty-desk-luxurious-loft-apartment-with-modern-minimalist-design_482257-126418.jpg"
|
|
imageAlt="Design Axis Creative Studio"
|
|
columns={[
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#about" },
|
|
{ label: "Our Services", href: "#services" },
|
|
{ label: "Portfolio", href: "#portfolio" },
|
|
{ label: "Careers", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Services", items: [
|
|
{ label: "Brand Strategy", href: "#services" },
|
|
{ label: "Web Design", href: "#services" },
|
|
{ label: "E-commerce", href: "#services" },
|
|
{ label: "Digital Marketing", href: "#services" },
|
|
],
|
|
},
|
|
{
|
|
title: "Connect", items: [
|
|
{ label: "Contact Us", href: "#contact" },
|
|
{ label: "Schedule Call", href: "#contact" },
|
|
{ label: "Twitter", href: "https://twitter.com" },
|
|
{ label: "LinkedIn", href: "https://linkedin.com" },
|
|
],
|
|
},
|
|
]}
|
|
logoText="Design Axis"
|
|
copyrightText="© 2025 Design Axis. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|