224 lines
12 KiB
TypeScript
224 lines
12 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 MetricCardOne from "@/components/sections/metrics/MetricCardOne";
|
|
import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
|
|
import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
|
|
import ContactText from "@/components/sections/contact/ContactText";
|
|
import FooterCard from "@/components/sections/footer/FooterCard";
|
|
import { Sparkles, Lightbulb, Zap, Award, Star, ImageIcon, Palette, ShoppingBag, Users, TrendingUp, Headphones, Dribbble, Github, Linkedin, Twitter } 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="Webild Creative"
|
|
navItems={[
|
|
{ name: "Services", id: "services" },
|
|
{ name: "Portfolio", id: "portfolio" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{ text: "Let's Talk", href: "#contact" }}
|
|
animateOnLoad={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitKpi
|
|
title="Unlock Your Brand's Creative Potential"
|
|
description="We transform bold visions into stunning digital experiences. Our creative team specializes in web design, branding, and innovative digital solutions that captivate audiences and drive results."
|
|
background={{ variant: "aurora" }}
|
|
tag="Award-Winning Agency"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Start Your Project", href: "#contact" },
|
|
{ text: "View Our Work", href: "#portfolio" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Az0Us36hRKtLjjWaEkzniI6ewp/a-modern-creative-agency-workspace-with--1773580382402-5877dbfc.png"
|
|
imageAlt="Creative agency team working in modern office"
|
|
mediaAnimation="blur-reveal"
|
|
kpis={[
|
|
{ value: "200+", label: "Projects Completed" },
|
|
{ value: "98%", label: "Client Satisfaction" },
|
|
{ value: "15+", label: "Years Experience" }
|
|
]}
|
|
enableKpiAnimation={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextAbout
|
|
tag="Who We Are"
|
|
tagIcon={Lightbulb}
|
|
tagAnimation="slide-up"
|
|
title="Creative Excellence Meets Strategic Vision"
|
|
useInvertedBackground={false}
|
|
buttons={[{ text: "Learn More About Us", href: "#" }]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardNineteen
|
|
tag="Our Services"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
title="Comprehensive Creative Solutions"
|
|
description="From concept to execution, we deliver end-to-end creative services tailored to elevate your brand and engage your audience."
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{
|
|
id: 1,
|
|
tag: "Design", title: "Web Design & Development", subtitle: "Modern, responsive interfaces", description: "We craft beautiful, functional websites that convert visitors into clients. Our designs combine aesthetics with user experience to create lasting impressions.", buttons: [{ text: "Explore", href: "#" }]
|
|
},
|
|
{
|
|
id: 2,
|
|
tag: "Branding", title: "Brand Identity", subtitle: "Distinctive visual language", description: "Build a memorable brand presence with our strategic branding services. We create cohesive visual identities that resonate with your target audience.", buttons: [{ text: "Explore", href: "#" }]
|
|
},
|
|
{
|
|
id: 3,
|
|
tag: "Strategy", title: "Digital Strategy", subtitle: "Data-driven insights", description: "Our strategic approach ensures every creative decision supports your business goals. We analyze, plan, and execute with precision.", buttons: [{ text: "Explore", href: "#" }]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardOne
|
|
tag="Our Impact"
|
|
tagIcon={Award}
|
|
tagAnimation="slide-up"
|
|
title="Proven Results That Speak"
|
|
description="We measure success by the growth and satisfaction of our clients. Here's what we've achieved together."
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
gridVariant="bento-grid"
|
|
animationType="slide-up"
|
|
metrics={[
|
|
{
|
|
id: "1", value: "$50M+", title: "Client Revenue Generated", description: "Direct impact on partner growth", icon: TrendingUp
|
|
},
|
|
{
|
|
id: "2", value: "5M+", title: "Users Engaged", description: "Across all digital properties", icon: Users
|
|
},
|
|
{
|
|
id: "3", value: "350%", title: "Avg. ROI Increase", description: "For our creative campaigns", icon: Zap
|
|
},
|
|
{
|
|
id: "4", value: "24/7", title: "Support Available", description: "Dedicated team ready to help", icon: Headphones
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFive
|
|
tag="Client Success Stories"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
title="What Our Clients Say"
|
|
description="Real feedback from real partners who've transformed their digital presence with our creative expertise."
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Chen", date: "2024", title: "Exceptional Creative Partnership", quote: "The team at Webild transformed our brand identity completely. Their strategic approach and creative execution exceeded all expectations. We've seen a 300% increase in engagement since the launch.", tag: "Web Design", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Az0Us36hRKtLjjWaEkzniI6ewp/a-professional-headshot-of-a-female-mark-1773580381478-0788daf1.png", avatarAlt: "Sarah Chen"
|
|
},
|
|
{
|
|
id: "2", name: "Marcus Johnson", date: "2024", title: "Game-Changing Digital Strategy", quote: "Working with Webild was a turning point for our company. Their digital strategy helped us reach new markets and increase conversions. Highly professional and results-driven team.", tag: "Strategy", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Az0Us36hRKtLjjWaEkzniI6ewp/a-professional-headshot-of-a-male-ceo-wi-1773580381045-144a4674.png", avatarAlt: "Marcus Johnson"
|
|
},
|
|
{
|
|
id: "3", name: "Jessica Wong", date: "2024", title: "Outstanding Brand Transformation", quote: "From logo design to full website development, Webild delivered beyond our expectations. Their attention to detail and creative vision truly set us apart from competitors.", tag: "Branding", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Az0Us36hRKtLjjWaEkzniI6ewp/a-professional-headshot-of-a-female-star-1773580381112-4f9f7f0c.png", avatarAlt: "Jessica Wong"
|
|
},
|
|
{
|
|
id: "4", name: "David Park", date: "2024", title: "Excellent Partnership Experience", quote: "The Webild team understood our vision immediately and brought it to life with stunning design and flawless execution. Our conversion rates improved significantly after the redesign.", tag: "Development", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Az0Us36hRKtLjjWaEkzniI6ewp/a-professional-headshot-of-a-male-produc-1773580381064-d62eb7fb.png", avatarAlt: "David Park"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="portfolio" data-section="portfolio">
|
|
<FeatureCardTen
|
|
tag="Our Portfolio"
|
|
tagIcon={ImageIcon}
|
|
tagAnimation="slide-up"
|
|
title="Featured Creative Work"
|
|
description="Explore a selection of our most impactful projects that showcase our design excellence and strategic thinking."
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="scale-rotate"
|
|
features={[
|
|
{
|
|
id: "1", title: "SaaS Platform Redesign", description: "Complete redesign of a B2B analytics platform, improving user engagement by 280% and reducing bounce rate by 45%.", media: {
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Az0Us36hRKtLjjWaEkzniI6ewp/a-stunning-digital-product-design-interf-1773580382485-e84279d7.png", imageAlt: "SaaS Platform Interface"
|
|
},
|
|
items: [
|
|
{ icon: Palette, text: "Visual Design Excellence" },
|
|
{ icon: Zap, text: "Performance Optimization" },
|
|
{ icon: Users, text: "User Experience Focused" }
|
|
],
|
|
reverse: false
|
|
},
|
|
{
|
|
id: "2", title: "E-Commerce Brand Identity", description: "Strategic branding and website development for an emerging fashion brand, resulting in $2M+ first-year revenue.", media: {
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Az0Us36hRKtLjjWaEkzniI6ewp/a-beautiful-website-homepage-design-with-1773580381994-798b1ff1.png", imageAlt: "E-Commerce Website"
|
|
},
|
|
items: [
|
|
{ icon: ShoppingBag, text: "Brand Strategy" },
|
|
{ icon: Sparkles, text: "Visual Identity" },
|
|
{ icon: Zap, text: "Conversion Optimization" }
|
|
],
|
|
reverse: true
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
text="Ready to Bring Your Vision to Life?"
|
|
background={{ variant: "aurora" }}
|
|
buttons={[
|
|
{ text: "Start a Conversation", href: "mailto:hello@webild.com" },
|
|
{ text: "Schedule a Call", href: "#" }
|
|
]}
|
|
useInvertedBackground={false}
|
|
animationType="entrance-slide"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="Webild Creative"
|
|
copyrightText="© 2025 Webild Creative Agency. All rights reserved."
|
|
socialLinks={[
|
|
{ icon: Dribbble, href: "https://dribbble.com", ariaLabel: "Dribbble" },
|
|
{ icon: Github, href: "https://github.com", ariaLabel: "GitHub" },
|
|
{ icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn" },
|
|
{ icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" }
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|