226 lines
14 KiB
TypeScript
226 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
|
import HeroSplitDoubleCarousel from "@/components/sections/hero/HeroSplitDoubleCarousel";
|
|
import SplitAbout from "@/components/sections/about/SplitAbout";
|
|
import FeatureCardTwentyThree from "@/components/sections/feature/FeatureCardTwentyThree";
|
|
import ProductCardOne from "@/components/sections/product/ProductCardOne";
|
|
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
|
|
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
|
|
import PricingCardOne from "@/components/sections/pricing/PricingCardOne";
|
|
import ContactSplit from "@/components/sections/contact/ContactSplit";
|
|
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
|
|
import { Sparkles, Award, Target, Zap, TrendingUp, Palette, Briefcase, BarChart3, Users, MessageSquare, CreditCard, Rocket, Crown, MessageCircle } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="rounded"
|
|
contentWidth="small"
|
|
sizing="mediumLargeSizeLargeTitles"
|
|
background="floatingGradient"
|
|
cardStyle="layered-gradient"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="normal"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="Designstudio"
|
|
navItems={[
|
|
{ name: "Work", id: "work" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Services", id: "services" },
|
|
{ name: "Pricing", id: "pricing" }
|
|
]}
|
|
button={{ text: "Get Started", href: "contact" }}
|
|
animateOnLoad={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDoubleCarousel
|
|
title="Design That Drives Real Business Results"
|
|
description="We create beautiful, conversion-focused websites that help growing businesses attract customers and build trust online. See how we've transformed brands like yours."
|
|
tag="Design Agency"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "View Our Work", href: "work" },
|
|
{ text: "Schedule Demo", href: "contact" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
background={{ variant: "glowing-orb" }}
|
|
leftCarouselItems={[
|
|
{ imageSrc: "http://img.b2bpic.net/free-psd/skincare-routine-website-template_23-2149234079.jpg", imageAlt: "Web design portfolio showcase" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-vector/fitness-mobile-app-infographic-template-flat-style_23-2148217220.jpg", imageAlt: "Responsive website design" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-worker-with-laptop_1098-4085.jpg", imageAlt: "Minimalist web design aesthetic" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-vector/minimal-geometric-landing-page-template_23-2148338567.jpg", imageAlt: "Contemporary website design" }
|
|
]}
|
|
rightCarouselItems={[
|
|
{ imageSrc: "http://img.b2bpic.net/free-psd/simple-interiors-landing-page-template_23-2148818211.jpg", imageAlt: "Premium design showcase" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-psd/e-commerce-furniture-landing-page_197582-336.jpg", imageAlt: "Ecommerce website layout" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-vector/professional-dashboard-user-panel_23-2148359774.jpg", imageAlt: "SaaS platform interface" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/worker-office-talking-with-manager-videocall_482257-126637.jpg", imageAlt: "Brand redesign concept" }
|
|
]}
|
|
carouselPosition="right"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<SplitAbout
|
|
title="Award-Winning Design for Growing Businesses"
|
|
description="We partner with ambitious brands to create websites that don't just look beautiful—they drive measurable results. With 50+ successful projects and industry expertise across sectors, we know what converts."
|
|
tag="About Us"
|
|
tagIcon={Award}
|
|
tagAnimation="slide-up"
|
|
bulletPoints={[
|
|
{ title: "Conversion-Focused Design", description: "Every pixel is strategically placed to guide users toward your business goals. We combine aesthetics with behavioral psychology.", icon: Target },
|
|
{ title: "Technical Excellence", description: "Fast-loading, mobile-responsive, and SEO-optimized sites that rank and perform. Built with modern frameworks and best practices.", icon: Zap },
|
|
{ title: "Data-Driven Results", description: "We measure success through analytics. Expect transparent reporting on traffic, conversions, and ROI from day one.", icon: TrendingUp },
|
|
{ title: "Ongoing Partnership", description: "Your success doesn't end at launch. We provide maintenance, updates, and strategic recommendations to keep you ahead." }
|
|
]}
|
|
imagePosition="right"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
mediaAnimation="slide-up"
|
|
buttons={[{ text: "Learn Our Process", href: "#" }]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardTwentyThree
|
|
title="Our Services"
|
|
description="Comprehensive web design solutions tailored to your business needs. From initial strategy through post-launch optimization."
|
|
tag="What We Do"
|
|
tagIcon={Palette}
|
|
tagAnimation="slide-up"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{ id: "1", title: "Website Redesign & Modernization", tags: ["Strategy", "Design", "Development"], imageSrc: "http://img.b2bpic.net/free-photo/authorized-guaranteed-certificate-approved-product_53876-127708.jpg", imageAlt: "Website redesign showcase" },
|
|
{ id: "2", title: "E-Commerce Platform Development", tags: ["Ecommerce", "Integration", "Security"], imageSrc: "http://img.b2bpic.net/free-vector/startup-anding-page_52683-5986.jpg", imageAlt: "E-commerce platform" },
|
|
{ id: "3", title: "Brand Web Presence Creation", tags: ["Branding", "Design", "Launch"], imageSrc: "http://img.b2bpic.net/free-photo/woman-using-digital-devices-cafe_53876-20920.jpg", imageAlt: "Brand web presence" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="work" data-section="work">
|
|
<ProductCardOne
|
|
title="Featured Case Studies"
|
|
description="See how we've transformed websites for ambitious brands. Real results, real growth."
|
|
tag="Portfolio"
|
|
tagIcon={Briefcase}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
gridVariant="bento-grid"
|
|
products={[
|
|
{ id: "1", name: "TechStartup Rebrand", price: "+340% Traffic", imageSrc: "http://img.b2bpic.net/free-photo/authorized-guaranteed-certificate-approved-product_53876-127708.jpg", imageAlt: "Tech startup website redesign" },
|
|
{ id: "2", name: "Ecommerce Transformation", price: "+215% Sales", imageSrc: "http://img.b2bpic.net/free-vector/startup-anding-page_52683-5986.jpg", imageAlt: "Ecommerce platform launch" },
|
|
{ id: "3", name: "Service Business Growth", price: "+180% Leads", imageSrc: "http://img.b2bpic.net/free-photo/woman-using-digital-devices-cafe_53876-20920.jpg", imageAlt: "Service business website launch" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardThree
|
|
title="Proven Agency Performance"
|
|
description="Metrics that matter. Real impact on real businesses."
|
|
tag="Our Track Record"
|
|
tagIcon={BarChart3}
|
|
tagAnimation="slide-up"
|
|
animationType="scale-rotate"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
metrics={[
|
|
{ id: "1", icon: Briefcase, title: "Projects Completed", value: "50+" },
|
|
{ id: "2", icon: Users, title: "Happy Clients", value: "45+" },
|
|
{ id: "3", icon: TrendingUp, title: "Avg. Growth", value: "245%" },
|
|
{ id: "4", icon: Award, title: "Industry Awards", value: "12" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSixteen
|
|
title="What Our Clients Say"
|
|
description="Trusted by business leaders and marketing teams across industries."
|
|
tag="Testimonials"
|
|
tagIcon={MessageSquare}
|
|
tagAnimation="slide-up"
|
|
animationType="blur-reveal"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{ id: "1", name: "Sarah Johnson", role: "CEO", company: "TechFlow Inc", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/modern-businesswoman_23-2148012909.jpg", imageAlt: "Sarah Johnson" },
|
|
{ id: "2", name: "Michael Chen", role: "Marketing Director", company: "GrowthCo", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageAlt: "Michael Chen" },
|
|
{ id: "3", name: "Emily Rodriguez", role: "Founder", company: "Digital Ventures", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-labor-union-member_23-2150969909.jpg", imageAlt: "Emily Rodriguez" },
|
|
{ id: "4", name: "David Kim", role: "Operations Manager", company: "NextGen Services", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/cheerful-employee-with-crossed-arms_1098-3148.jpg", imageAlt: "David Kim" },
|
|
{ id: "5", name: "Jessica Martinez", role: "Business Owner", company: "Stellar Retail", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-posing-cv_23-2149927606.jpg", imageAlt: "Jessica Martinez" },
|
|
{ id: "6", name: "Thomas Anderson", role: "VP Marketing", company: "Premium Brands Co", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-middle-aged-businessman-posing-looking-camera_1163-4800.jpg", imageAlt: "Thomas Anderson" }
|
|
]}
|
|
kpiItems={[
|
|
{ value: "98%", label: "Client Satisfaction Rate" },
|
|
{ value: "5x", label: "Avg ROI Within 6 Months" },
|
|
{ value: "7 yrs", label: "Industry Experience" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardOne
|
|
title="Transparent, Scalable Pricing"
|
|
description="Choose the right package for your business. No hidden fees, no surprises."
|
|
tag="Pricing"
|
|
tagIcon={CreditCard}
|
|
tagAnimation="slide-up"
|
|
animationType="depth-3d"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
plans={[
|
|
{ id: "starter", badge: "Great for Startups", badgeIcon: Rocket, price: "$3,500", subtitle: "Perfect for first-time site builders", features: ["5-page website design", "Mobile responsive", "SEO optimization basics", "Contact form & analytics setup", "1 month support included"] },
|
|
{ id: "professional", badge: "Most Popular", badgeIcon: Sparkles, price: "$7,500", subtitle: "Best for growing businesses", features: ["Up to 15-page website", "Advanced SEO strategy", "Conversion optimization", "CRM & lead capture setup", "3 months maintenance included", "Monthly performance reports"] },
|
|
{ id: "enterprise", badge: "Custom Solutions", badgeIcon: Crown, price: "Custom", subtitle: "For complex, high-traffic sites", features: ["Unlimited pages & features", "E-commerce integration", "Custom integrations & APIs", "Priority 24/7 support", "6 months optimization", "Dedicated account manager"] }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
tag="Get Started Today"
|
|
title="Ready to Transform Your Web Presence?"
|
|
description="Let's discuss your vision and create a website that converts. Schedule a free 30-minute consultation call with our team."
|
|
tagIcon={MessageCircle}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "sparkles-gradient" }}
|
|
useInvertedBackground={false}
|
|
imageSrc="http://img.b2bpic.net/free-photo/desk-office-with-objects_23-2147982320.jpg"
|
|
imageAlt="Designer working on website project"
|
|
mediaAnimation="slide-up"
|
|
mediaPosition="right"
|
|
inputPlaceholder="your@email.com"
|
|
buttonText="Schedule Call"
|
|
termsText="We respect your inbox. Unsubscribe anytime. We'll follow up within 24 hours."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
columns={[
|
|
{ title: "Product", items: [{ label: "Services", href: "services" }, { label: "Pricing", href: "pricing" }, { label: "Case Studies", href: "work" }, { label: "Process", href: "#" }] },
|
|
{ title: "Company", items: [{ label: "About Us", href: "about" }, { label: "Team", href: "#" }, { label: "Blog", href: "#" }, { label: "Careers", href: "#" }] },
|
|
{ title: "Connect", items: [{ label: "Contact", href: "contact" }, { label: "Twitter", href: "https://twitter.com" }, { label: "LinkedIn", href: "https://linkedin.com" }, { label: "Instagram", href: "https://instagram.com" }] }
|
|
]}
|
|
copyrightText="© 2025 Designstudio. All rights reserved. Crafted for ambitious brands."
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|