320 lines
23 KiB
TypeScript
320 lines
23 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
|
|
import TextAbout from '@/components/sections/about/TextAbout';
|
|
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
|
|
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
|
|
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
|
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
|
import { Award, BarChart3, Briefcase, Code, Dribbble, Instagram, Lightbulb, LinkedIn, Palette, Shield, Smartphone, Sparkles, Star, Target, TrendingUp, Twitter, Users, Zap, LayoutGrid, Check } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="icon-arrow"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="pill"
|
|
contentWidth="medium"
|
|
sizing="medium"
|
|
background="aurora"
|
|
cardStyle="layered-gradient"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="medium"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="CreativeStudio"
|
|
navItems={[
|
|
{ name: "Work", id: "portfolio" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Services", id: "services" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{ text: "Get Started", href: "#contact" }}
|
|
animateOnLoad={true}
|
|
navItemClassName="text-sm font-medium hover:text-primary-cta transition-colors"
|
|
buttonClassName="px-6 py-2 rounded-full bg-primary-cta text-primary-cta-text hover:shadow-lg transition-all"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitKpi
|
|
title="Creative Solutions That Drive Results"
|
|
description="We craft digital experiences that captivate, engage, and convert. From strategy to execution, we bring your vision to life with cutting-edge design and development."
|
|
background={{ variant: "aurora" }}
|
|
kpis={[
|
|
{ value: "200+", label: "Projects Delivered" },
|
|
{ value: "95%", label: "Client Satisfaction" },
|
|
{ value: "50+", label: "Team Members" }
|
|
]}
|
|
enableKpiAnimation={true}
|
|
tag="Welcome to CreativeStudio"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "View Our Work", href: "#portfolio" },
|
|
{ text: "Start a Project", href: "#contact" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AknpA8GIls5vJUtVKivgvmTYts/a-stunning-modern-creative-workspace-wit-1773149205285-89bda618.jpg"
|
|
imageAlt="Creative agency workspace with modern design projects"
|
|
mediaAnimation="blur-reveal"
|
|
imagePosition="right"
|
|
className="py-20 md:py-32"
|
|
containerClassName="max-w-7xl mx-auto"
|
|
textBoxClassName="space-y-6"
|
|
titleClassName="text-4xl md:text-6xl font-bold tracking-tight"
|
|
descriptionClassName="text-lg md:text-xl text-accent max-w-xl"
|
|
tagClassName="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-accent/10"
|
|
buttonContainerClassName="flex flex-col sm:flex-row gap-4 pt-4"
|
|
buttonClassName="px-8 py-3 rounded-full font-semibold transition-all duration-300"
|
|
mediaWrapperClassName="relative aspect-square md:aspect-auto"
|
|
kpiClassName="backdrop-blur-sm bg-white/40 rounded-pill p-4 md:p-6"
|
|
kpiValueClassName="text-2xl md:text-4xl font-bold text-primary-cta"
|
|
kpiLabelClassName="text-sm md:text-base text-foreground/70 mt-2"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextAbout
|
|
tag="Our Story"
|
|
tagIcon={Lightbulb}
|
|
tagAnimation="slide-up"
|
|
title="We transform ambitious ideas into digital powerhouses that inspire, engage, and drive measurable business growth through strategic design and innovative technology."
|
|
buttons={[{ text: "Learn More", href: "#portfolio" }]}
|
|
buttonAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
className="py-20 md:py-32"
|
|
containerClassName="max-w-5xl mx-auto text-center"
|
|
titleClassName="text-3xl md:text-5xl font-bold leading-tight tracking-tight"
|
|
buttonContainerClassName="flex justify-center gap-4 pt-8"
|
|
/>
|
|
</div>
|
|
|
|
<div id="portfolio" data-section="portfolio">
|
|
<FeatureCardNineteen
|
|
title="Our Creative Process"
|
|
description="We follow a strategic, collaborative approach to deliver exceptional results that exceed expectations at every stage."
|
|
tag="How We Work"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
features={[
|
|
{
|
|
id: 1,
|
|
tag: "Phase One", title: "Discovery & Strategy", subtitle: "Understanding Your Vision", description: "We dive deep into your business goals, target audience, and competitive landscape. Through comprehensive research and strategic analysis, we build a solid foundation for your project.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AknpA8GIls5vJUtVKivgvmTYts/an-abstract-strategic-planning-visualiza-1773149202582-876652c1.jpg?_wi=1", imageAlt: "Strategic planning and discovery visualization"
|
|
},
|
|
{
|
|
id: 2,
|
|
tag: "Phase Two", title: "Design & Concept", subtitle: "Bringing Ideas to Life", description: "Our talented designers create stunning visual concepts and interactive prototypes that capture your brand essence and engage your audience with innovative, user-centered design.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AknpA8GIls5vJUtVKivgvmTYts/a-vibrant-creative-design-process-visual-1773149203243-73899b3f.jpg?_wi=1", imageAlt: "Creative design process and design system visualization"
|
|
},
|
|
{
|
|
id: 3,
|
|
tag: "Phase Three", title: "Development & Launch", subtitle: "Transforming Design into Reality", description: "Our expert developers build fast, scalable, and secure digital solutions using cutting-edge technologies. We ensure every project launches flawlessly and performs optimally.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AknpA8GIls5vJUtVKivgvmTYts/a-sleek-development-environment-showing--1773149201711-290e23fc.png?_wi=1", imageAlt: "Web development and deployment environment"
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
className="py-20 md:py-32"
|
|
containerClassName="max-w-7xl mx-auto"
|
|
textBoxClassName="space-y-6 mb-16"
|
|
textBoxTitleClassName="text-3xl md:text-5xl font-bold"
|
|
textBoxDescriptionClassName="text-lg text-accent max-w-2xl"
|
|
textBoxTagClassName="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-accent/10"
|
|
cardTagClassName="text-sm font-semibold text-primary-cta"
|
|
cardTitleClassName="text-2xl md:text-3xl font-bold mt-2"
|
|
cardDescriptionClassName="text-base text-accent mt-3 leading-relaxed"
|
|
imageContainerClassName="rounded-2xl overflow-hidden aspect-square md:aspect-video"
|
|
imageClassName="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardOne
|
|
title="Our Impact by Numbers"
|
|
description="Real results that demonstrate our commitment to excellence and client success."
|
|
tag="Key Achievements"
|
|
tagIcon={TrendingUp}
|
|
tagAnimation="slide-up"
|
|
metrics={[
|
|
{
|
|
id: "1", value: "200", title: "Projects", description: "Successful projects delivered across diverse industries and markets.", icon: Briefcase
|
|
},
|
|
{
|
|
id: "2", value: "95", title: "% Satisfaction", description: "Client satisfaction rate with our strategic approach and execution.", icon: Star
|
|
},
|
|
{
|
|
id: "3", value: "8", title: "Years", description: "Industry experience and proven track record of delivering excellence.", icon: Award
|
|
},
|
|
{
|
|
id: "4", value: "50", title: "Team Members", description: "Talented professionals dedicated to bringing your vision to life.", icon: Users
|
|
}
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
className="py-20 md:py-32"
|
|
containerClassName="max-w-7xl mx-auto"
|
|
textBoxClassName="space-y-6 mb-16 text-center"
|
|
textBoxTitleClassName="text-3xl md:text-5xl font-bold"
|
|
textBoxDescriptionClassName="text-lg text-accent max-w-2xl mx-auto"
|
|
textBoxTagClassName="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-accent/10 justify-center"
|
|
cardClassName="p-8 rounded-2xl bg-white/50 backdrop-blur-sm border border-accent/20"
|
|
valueClassName="text-5xl md:text-6xl font-bold text-primary-cta"
|
|
titleClassName="text-xl md:text-2xl font-semibold mt-4 text-foreground"
|
|
descriptionClassName="text-sm md:text-base text-accent mt-2"
|
|
iconContainerClassName="w-16 h-16 rounded-full bg-accent/10 flex items-center justify-center mb-4"
|
|
iconClassName="w-8 h-8 text-primary-cta"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFive
|
|
title="What Our Clients Say"
|
|
description="Hear from the leaders and innovators we've had the privilege to work with."
|
|
tag="Client Success Stories"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Mitchell, CEO of TechVenture", date: "Date: 15 January 2025", title: "Transformed Our Digital Presence", quote: "CreativeStudio didn't just build a website—they built a comprehensive digital strategy that increased our conversions by 150%. Their team's dedication and creative excellence were evident at every stage.", tag: "Enterprise Partner", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AknpA8GIls5vJUtVKivgvmTYts/professional-portrait-of-a-confident-fem-1773149200953-cfa69071.png", avatarAlt: "Sarah Mitchell", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AknpA8GIls5vJUtVKivgvmTYts/professional-portrait-of-a-confident-fem-1773149200953-cfa69071.png"
|
|
},
|
|
{
|
|
id: "2", name: "Marcus Johnson, Founder of StartupXYZ", date: "Date: 08 January 2025", title: "Exceeded Every Expectation", quote: "From concept to launch, the team at CreativeStudio provided exceptional guidance and execution. They understood our vision and brought it to life in ways we hadn't even imagined. Highly recommended!", tag: "Startup", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AknpA8GIls5vJUtVKivgvmTYts/professional-portrait-of-a-male-entrepre-1773149203347-d5bf18d4.jpg", avatarAlt: "Marcus Johnson", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AknpA8GIls5vJUtVKivgvmTYts/professional-portrait-of-a-male-entrepre-1773149203347-d5bf18d4.jpg"
|
|
},
|
|
{
|
|
id: "3", name: "Elena Rodriguez, Product Manager at InnovateLab", date: "Date: 02 January 2025", title: "Partners You Can Truly Trust", quote: "Working with CreativeStudio was a game-changer for our brand. They brought fresh perspectives, maintained perfect communication, and delivered beyond our timeline. They're true partners in innovation.", tag: "Growth Stage", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AknpA8GIls5vJUtVKivgvmTYts/professional-portrait-of-a-female-produc-1773149203524-aaa83cbc.jpg", avatarAlt: "Elena Rodriguez", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AknpA8GIls5vJUtVKivgvmTYts/professional-portrait-of-a-female-produc-1773149203524-aaa83cbc.jpg"
|
|
},
|
|
{
|
|
id: "4", name: "David Chen, Creative Director at DesignCo", date: "Date: 28 December 2024", title: "Exceptional Creative Excellence", quote: "The creative team brought an incredible level of artistry and technical excellence to our project. They challenged our assumptions and pushed our boundaries in the best way possible.", tag: "Creative Agency", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AknpA8GIls5vJUtVKivgvmTYts/professional-portrait-of-a-male-designer-1773149201155-9cea5a8c.png", avatarAlt: "David Chen", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AknpA8GIls5vJUtVKivgvmTYts/professional-portrait-of-a-male-designer-1773149201155-9cea5a8c.png"
|
|
},
|
|
{
|
|
id: "5", name: "Jennifer Lee, Marketing Director at GrowthDynamics", date: "Date: 21 December 2024", title: "Results-Driven Team", quote: "CreativeStudio's strategic approach combined with flawless execution resulted in measurable business growth. They understand both the creative and commercial aspects perfectly.", tag: "B2B Marketing", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AknpA8GIls5vJUtVKivgvmTYts/professional-portrait-of-a-female-market-1773149201574-183e8ea1.png", avatarAlt: "Jennifer Lee", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AknpA8GIls5vJUtVKivgvmTYts/professional-portrait-of-a-female-market-1773149201574-183e8ea1.png"
|
|
},
|
|
{
|
|
id: "6", name: "Robert Thompson, CEO of EmergeGlobal", date: "Date: 14 December 2024", title: "Transformative Partnership", quote: "From initial consultation to post-launch support, CreativeStudio demonstrated unwavering commitment to our success. They're more than vendors—they're true strategic partners.", tag: "Global Enterprise", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AknpA8GIls5vJUtVKivgvmTYts/professional-portrait-of-a-male-startup--1773149201582-9ea63d1f.png", avatarAlt: "Robert Thompson", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AknpA8GIls5vJUtVKivgvmTYts/professional-portrait-of-a-male-startup--1773149201582-9ea63d1f.png"
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
className="py-20 md:py-32"
|
|
containerClassName="max-w-7xl mx-auto"
|
|
textBoxClassName="space-y-6 mb-16 text-center"
|
|
textBoxTitleClassName="text-3xl md:text-5xl font-bold"
|
|
textBoxDescriptionClassName="text-lg text-accent max-w-2xl mx-auto"
|
|
textBoxTagClassName="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-accent/10 justify-center"
|
|
cardClassName="grid grid-cols-1 md:grid-cols-2 gap-10 bg-white/50 backdrop-blur-sm rounded-2xl p-8 md:p-10 border border-accent/20"
|
|
cardTagClassName="text-xs font-semibold text-primary-cta uppercase tracking-wide"
|
|
cardTitleClassName="text-2xl md:text-3xl font-bold text-foreground mt-4"
|
|
cardQuoteClassName="text-base md:text-lg text-accent leading-relaxed mt-6"
|
|
cardAuthorClassName="flex items-center gap-4 mt-8 pt-8 border-t border-accent/10"
|
|
cardAvatarClassName="w-14 h-14 rounded-full object-cover"
|
|
cardNameClassName="font-semibold text-foreground"
|
|
cardDateClassName="text-sm text-accent"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardTen
|
|
title="Comprehensive Services"
|
|
description="End-to-end creative and development services tailored to your unique business needs."
|
|
tag="What We Offer"
|
|
tagIcon={Palette}
|
|
tagAnimation="slide-up"
|
|
features={[
|
|
{
|
|
id: "1", title: "Strategic Design", description: "We create thoughtful, user-centered designs that not only look beautiful but drive measurable business results through strategic planning and creative excellence.", media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AknpA8GIls5vJUtVKivgvmTYts/a-vibrant-creative-design-process-visual-1773149203243-73899b3f.jpg?_wi=2" },
|
|
items: [
|
|
{ icon: Palette, text: "Brand Identity Design" },
|
|
{ icon: LayoutGrid, text: "UI/UX Design Systems" },
|
|
{ icon: Sparkles, text: "Visual Design Direction" },
|
|
{ icon: Zap, text: "Interactive Prototypes" }
|
|
],
|
|
reverse: false
|
|
},
|
|
{
|
|
id: "2", title: "Web Development", description: "We build fast, scalable, and secure web applications using modern technologies and best practices. Our development process ensures performance, accessibility, and user satisfaction.", media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AknpA8GIls5vJUtVKivgvmTYts/a-sleek-development-environment-showing--1773149201711-290e23fc.png?_wi=2" },
|
|
items: [
|
|
{ icon: Code, text: "Full-Stack Development" },
|
|
{ icon: Zap, text: "Performance Optimization" },
|
|
{ icon: Shield, text: "Security & Compliance" },
|
|
{ icon: Smartphone, text: "Responsive Design" }
|
|
],
|
|
reverse: true
|
|
},
|
|
{
|
|
id: "3", title: "Digital Strategy", description: "We partner with you to develop comprehensive digital strategies that align with your business objectives and drive sustainable growth through data-driven insights.", media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AknpA8GIls5vJUtVKivgvmTYts/an-abstract-strategic-planning-visualiza-1773149202582-876652c1.jpg?_wi=2" },
|
|
items: [
|
|
{ icon: BarChart3, text: "Market Research & Analysis" },
|
|
{ icon: Target, text: "Strategy Development" },
|
|
{ icon: Lightbulb, text: "Innovation Planning" },
|
|
{ icon: TrendingUp, text: "Growth Optimization" }
|
|
],
|
|
reverse: false
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
className="py-20 md:py-32"
|
|
containerClassName="max-w-7xl mx-auto"
|
|
textBoxClassName="space-y-6 mb-16"
|
|
textBoxTitleClassName="text-3xl md:text-5xl font-bold"
|
|
textBoxDescriptionClassName="text-lg text-accent max-w-2xl"
|
|
textBoxTagClassName="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-accent/10"
|
|
featureTitleClassName="text-2xl md:text-4xl font-bold text-foreground"
|
|
featureDescriptionClassName="text-base md:text-lg text-accent leading-relaxed"
|
|
listItemClassName="flex items-center gap-3"
|
|
iconContainerClassName="w-10 h-10 rounded-full bg-accent/10 flex items-center justify-center flex-shrink-0"
|
|
iconClassName="w-5 h-5 text-primary-cta"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
text="Ready to elevate your brand and drive growth? Let's create something extraordinary together. Our team is excited to discuss your vision and show you how CreativeStudio can deliver exceptional results."
|
|
animationType="entrance-slide"
|
|
buttons={[
|
|
{ text: "Start Your Project", href: "mailto:hello@creativestudio.com" },
|
|
{ text: "Schedule a Call", href: "https://calendly.com" }
|
|
]}
|
|
background={{ variant: "aurora" }}
|
|
useInvertedBackground={false}
|
|
className="py-20 md:py-32"
|
|
containerClassName="max-w-5xl mx-auto"
|
|
contentClassName="w-full md:w-3/4 mx-auto"
|
|
textClassName="text-3xl md:text-5xl font-bold text-center leading-tight"
|
|
buttonContainerClassName="flex flex-col sm:flex-row justify-center gap-4 pt-12"
|
|
buttonClassName="px-8 py-3 rounded-full font-semibold transition-all duration-300"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="CreativeStudio"
|
|
copyrightText="© 2025 CreativeStudio. All rights reserved. | Crafting digital experiences."
|
|
socialLinks={[
|
|
{ icon: Twitter, href: "https://twitter.com/creativestudio", ariaLabel: "Follow us on Twitter" },
|
|
{ icon: LinkedIn, href: "https://linkedin.com/company/creativestudio", ariaLabel: "Follow us on LinkedIn" },
|
|
{ icon: Instagram, href: "https://instagram.com/creativestudio", ariaLabel: "Follow us on Instagram" },
|
|
{ icon: Dribbble, href: "https://dribbble.com/creativestudio", ariaLabel: "Check our work on Dribbble" }
|
|
]}
|
|
className="py-16 md:py-24"
|
|
containerClassName="max-w-7xl mx-auto"
|
|
cardClassName="rounded-3xl bg-white/50 backdrop-blur-sm border border-accent/20 p-8 md:p-12"
|
|
logoClassName="text-2xl font-bold text-primary-cta mb-6"
|
|
dividerClassName="h-px bg-gradient-to-r from-accent/0 via-accent/30 to-accent/0 my-8"
|
|
copyrightContainerClassName="flex flex-col md:flex-row justify-between items-center gap-6"
|
|
copyrightTextClassName="text-sm text-accent text-center md:text-left"
|
|
socialContainerClassName="flex gap-4 justify-center md:justify-end"
|
|
socialIconClassName="w-6 h-6 text-primary-cta hover:text-accent transition-colors duration-300 cursor-pointer"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |