186 lines
9.4 KiB
TypeScript
186 lines
9.4 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
|
|
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
|
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
|
import { Heart, Sparkles, TrendingUp, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="soft"
|
|
contentWidth="compact"
|
|
sizing="largeSmall"
|
|
background="aurora"
|
|
cardStyle="inset"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={[
|
|
{ name: "About", id: "about" },
|
|
{ name: "Services", id: "features" },
|
|
{ name: "Portfolio", id: "work" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "Contact", id: "contact" },
|
|
]}
|
|
brandName="DesignStudio"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDualMedia
|
|
background={{ variant: "plain" }}
|
|
title="Design That Converts and Engages Users"
|
|
description="We craft high-impact landing pages and intuitive digital experiences. From concept to launch, we deliver UX/UI solutions that drive results."
|
|
tag="Design Studio Expertise"
|
|
buttons={[{ text: "View Our Work", href: "#work" }]}
|
|
mediaItems={[
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/man-holding-pen-writing-notes_482257-104155.jpg", imageAlt: "Digital design studio landing page" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/letter-eyeglasses-smartphone-earphone-coffee-cup-white-desk_23-2148061610.jpg", imageAlt: "Designer at work" }
|
|
]}
|
|
mediaAnimation="slide-up"
|
|
rating={5}
|
|
ratingText="Rated 5/5 by our partners"
|
|
tagIcon={Sparkles}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MetricSplitMediaAbout
|
|
useInvertedBackground={false}
|
|
title="Proven Design Methodology"
|
|
description="We blend user-centric research with aesthetic excellence. Our process is designed to bridge the gap between business goals and user satisfaction."
|
|
metrics={[
|
|
{ value: "150+", title: "Projects Launched" },
|
|
{ value: "98%", title: "Conversion Rate Lift" },
|
|
{ value: "5+", title: "Years Experience" }
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/empty-art-studio-with-nobody-it-is-ready-painting-lesson-art-studio-modern-atelier-with-vase-chair-using-imagination-professional-sketch-tools-table-concept-creativity_482257-30104.jpg"
|
|
imageAlt="Our creative workspace"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardSeven
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{ title: "Conversion-Driven Landing Pages", description: "High-impact layouts built to turn visitors into loyal customers through rigorous design thinking.", imageSrc: "http://img.b2bpic.net/free-vector/isometric-landing-page_52683-7290.jpg", imageAlt: "Landing page design icon" },
|
|
{ title: "Intuitive User Journeys", description: "Seamless, logical workflows that reduce friction and maximize user delight at every interaction point.", imageSrc: "http://img.b2bpic.net/free-photo/representations-user-experience-interface-design_23-2150104513.jpg", imageAlt: "UX workflow icon" },
|
|
{ title: "Scalable Design Systems", description: "Structured design languages that grow with your company, maintaining brand consistency across all platforms.", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-measuring-tools-desk_23-2150440917.jpg?_wi=1", imageAlt: "Design system icon" }
|
|
]}
|
|
title="Comprehensive Design Capabilities"
|
|
description="We offer full-cycle UX/UI design solutions to elevate your digital presence."
|
|
/>
|
|
</div>
|
|
|
|
<div id="work" data-section="work">
|
|
<ProductCardFour
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{ id: "1", name: "FinTech Dashboard", price: "UX Case Study", variant: "Web UI", imageSrc: "http://img.b2bpic.net/free-psd/fitness-nutrition-landing-page-template_23-2150209841.jpg", imageAlt: "Project 1" },
|
|
{ id: "2", name: "E-Commerce Suite", price: "Conversion Optimized", variant: "Shop UI", imageSrc: "http://img.b2bpic.net/free-photo/woman-making-modern-app-interface_1098-21575.jpg", imageAlt: "Project 2" },
|
|
{ id: "3", name: "SaaS Platform UI", price: "Brand Refresh", variant: "SaaS", imageSrc: "http://img.b2bpic.net/free-photo/financial-broker-analyzing-stock-trade-market-computer-using-exchange-hedge-fund-statistics-create-investment-profit-entrepreneur-working-with-forex-real-time-sales-trend-handheld-shot_482257-40951.jpg", imageAlt: "Project 3" }
|
|
]}
|
|
title="Our Portfolio"
|
|
description="Selected digital experiences crafted for growth-oriented brands and startups."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={true}
|
|
metrics={[
|
|
{ id: "m1", value: "40%", title: "Bounce Rate Reduction", description: "Improved engagement metrics across all projects.", icon: Zap },
|
|
{ id: "m2", value: "2.5x", title: "Conversion Growth", description: "Average increase in lead generation efficiency.", icon: TrendingUp },
|
|
{ id: "m3", value: "100%", title: "Client Retention", description: "Building long-term relationships through trust.", icon: Heart }
|
|
]}
|
|
title="Measurable Design Impact"
|
|
description="Data-backed results that matter to your bottom line."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSixteen
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{ id: "1", name: "Sarah Jenkins", role: "CEO", company: "TechInnovate", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/no-minute-without-my-laptop-handsome-young-man-working-laptop-while-enjoying-coffee-cafe_639032-2899.jpg" },
|
|
{ id: "2", name: "David Chen", role: "PM", company: "LaunchPad", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/furious-mature-business-man-conference-room_1262-3010.jpg" },
|
|
{ id: "3", name: "Emily Rose", role: "Marketing Director", company: "GrowthCo", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/attractive-business-woman-working-his-laptop_158595-1122.jpg" }
|
|
]}
|
|
kpiItems={[
|
|
{ value: "50+", label: "Founders Served" },
|
|
{ value: "120+", label: "Projects Completed" },
|
|
{ value: "95%", label: "Customer Satisfaction" }
|
|
]}
|
|
title="What Our Partners Say"
|
|
description="See how we help founders and directors transform their digital presence."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
faqs={[
|
|
{ id: "f1", title: "How long does a typical landing page project take?", content: "Most projects are completed within 2-4 weeks, depending on complexity and scope." },
|
|
{ id: "f2", title: "Do you provide design and development?", content: "Yes, we specialize in end-to-end design and can assist with development handoff." },
|
|
{ id: "f3", title: "How do you measure design ROI?", content: "We look at KPIs like conversion rate, bounce rate, and user feedback cycles." }
|
|
]}
|
|
title="Frequently Asked Questions"
|
|
description="Common questions about our process, pricing, and how we work with you."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
tag="Get in touch"
|
|
title="Ready to transform your digital experience?"
|
|
description="Let's discuss your project goals and build something amazing together."
|
|
buttons={[{ text: "Contact Us", href: "mailto:hello@designstudio.com" }]}
|
|
background={{ variant: "sparkles-gradient" }}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
logoText="DesignStudio"
|
|
columns={[
|
|
{ title: "Company", items: [{ label: "About", href: "#about" }, { label: "Portfolio", href: "#work" }] },
|
|
{ title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] }
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/high-angle-measuring-tools-desk_23-2150440917.jpg?_wi=2"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|