257 lines
15 KiB
TypeScript
257 lines
15 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 { Award, CheckCircle, Code, Eye, Github, Heart, Instagram, Linkedin, Lock, Palette, Sparkles, Star, Target, TrendingUp, Twitter, Users, Zap } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="icon-arrow"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="pill"
|
|
contentWidth="medium"
|
|
sizing="medium"
|
|
background="circleGradient"
|
|
cardStyle="layered-gradient"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="medium"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="Webild Studio"
|
|
navItems={[
|
|
{ name: "Work", id: "features" },
|
|
{ name: "Process", id: "feature" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{
|
|
text: "Get Started", href: "#contact"
|
|
}}
|
|
animateOnLoad={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitKpi
|
|
title="Where Creative Vision Meets Strategic Excellence"
|
|
description="We transform bold ideas into stunning digital experiences. Crafting websites, apps, and digital strategies that captivate, convert, and drive measurable growth for forward-thinking brands."
|
|
background={{ variant: "plain" }}
|
|
kpis={[
|
|
{ value: "500+", label: "Projects Delivered" },
|
|
{ value: "98%", label: "Client Satisfaction" },
|
|
{ value: "12y", label: "Industry Experience" }
|
|
]}
|
|
enableKpiAnimation={true}
|
|
tag="Creative Excellence"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "View Our Work", href: "#features" },
|
|
{ text: "Start Your Project", href: "#contact" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
imageSrc="http://img.b2bpic.net/free-vector/user-panel-business-dashboard_23-2148359773.jpg"
|
|
imageAlt="Creative agency portfolio dashboard"
|
|
mediaAnimation="slide-up"
|
|
imagePosition="right"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextAbout
|
|
tag="About Webild Studio"
|
|
tagIcon={Users}
|
|
tagAnimation="slide-up"
|
|
title="We're a team of designers, strategists, and developers passionate about creating digital experiences that matter"
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{ text: "Learn More About Us", href: "#feature" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="feature" data-section="feature">
|
|
<FeatureCardNineteen
|
|
title="Our Proven Process"
|
|
description="From concept to launch, we follow a systematic approach that ensures exceptional results at every stage"
|
|
tag="How We Work"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: 1,
|
|
tag: "Phase One", title: "Strategy & Discovery", subtitle: "Foundation for success", description: "We dive deep into understanding your brand, target audience, and business goals. Through research, workshops, and competitive analysis, we craft a strategic roadmap that guides every decision.", imageSrc: "http://img.b2bpic.net/free-photo/young-coworkers-sharing-concepts-together_329181-19755.jpg", imageAlt: "Strategic planning session"
|
|
},
|
|
{
|
|
id: 2,
|
|
tag: "Phase Two", title: "Design & Ideation", subtitle: "Creative solutions", description: "Our design team creates stunning visual concepts and interactive prototypes. We iterate based on your feedback, ensuring the final design perfectly aligns with your vision and user needs.", imageSrc: "http://img.b2bpic.net/free-vector/gradient-ui-ux-background_52683-68958.jpg", imageAlt: "Design execution in progress"
|
|
},
|
|
{
|
|
id: 3,
|
|
tag: "Phase Three", title: "Development & Build", subtitle: "Technical excellence", description: "Our developers bring designs to life with clean, scalable code. We focus on performance, security, and user experience to create digital products that truly work.", imageSrc: "http://img.b2bpic.net/free-photo/businessman-celebrating-his-success-after-presenting-project-proposal-his-multiethnic-partners_181624-33367.jpg", imageAlt: "Product launch celebration"
|
|
},
|
|
{
|
|
id: 4,
|
|
tag: "Phase Four", title: "Launch & Optimize", subtitle: "Continuous improvement", description: "We handle deployment, testing, and optimization. Post-launch, we monitor performance and refine based on analytics, ensuring your digital product stays ahead of the curve.", imageSrc: "http://img.b2bpic.net/free-photo/shareholders-planning-factory-upgrades-using-cad-software-devices_482257-119594.jpg", imageAlt: "Optimization and refinement work"
|
|
}
|
|
]}
|
|
buttons={[
|
|
{ text: "Start Your Journey", href: "#contact" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardOne
|
|
title="Impact By The Numbers"
|
|
description="Our proven track record speaks volumes about the value we deliver"
|
|
tag="Our Achievements"
|
|
tagIcon={TrendingUp}
|
|
tagAnimation="slide-up"
|
|
metrics={[
|
|
{
|
|
id: "1", value: "500", title: "Projects", description: "Successfully delivered across diverse industries", icon: CheckCircle
|
|
},
|
|
{
|
|
id: "2", value: "98", title: "Satisfaction %", description: "Client retention and satisfaction rate", icon: Star
|
|
},
|
|
{
|
|
id: "3", value: "50M", title: "Users Reached", description: "Across all digital products we've created", icon: Users
|
|
},
|
|
{
|
|
id: "4", value: "12", title: "Years Experience", description: "Industry leadership and expertise", icon: Award
|
|
}
|
|
]}
|
|
gridVariant="bento-grid"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{ text: "View Case Studies", href: "#contact" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFive
|
|
title="What Our Clients Say"
|
|
description="Hear from brands and businesses we've had the privilege to work with"
|
|
tag="Client Love"
|
|
tagIcon={Heart}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Johnson, CEO of TechFlow", date: "Date: March 15, 2024", title: "Transformed Our Digital Presence", quote: "Webild Studio completely reimagined our digital strategy. From concept to launch, they delivered a website that exceeded all our expectations and resulted in a 250% increase in qualified leads.", tag: "SaaS Leader", avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", avatarAlt: "Sarah Johnson"
|
|
},
|
|
{
|
|
id: "2", name: "Michael Chen, Founder of EcoHub", date: "Date: February 28, 2024", title: "Exceptional Strategic Thinking", quote: "What impressed us most was their deep understanding of our market. They didn't just build what we asked for—they advised us on what would actually work. Truly a partnership approach.", tag: "StartUp", avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", avatarAlt: "Michael Chen"
|
|
},
|
|
{
|
|
id: "3", name: "Emma Rodriguez, Marketing Director at Luxe Co", date: "Date: February 10, 2024", title: "Design That Drives Results", quote: "Our new e-commerce platform is beautifully designed and performs incredibly well. Conversion rates have doubled, and user feedback has been overwhelmingly positive.", tag: "E-commerce", avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", avatarAlt: "Emma Rodriguez"
|
|
},
|
|
{
|
|
id: "4", name: "James Wilson, VP Product at InnovateCorp", date: "Date: January 22, 2024", title: "True Digital Partners", quote: "Working with Webild Studio was refreshingly different. They brought creative ideas to every meeting and delivered a product that our users absolutely love.", tag: "Enterprise", avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", avatarAlt: "James Wilson"
|
|
},
|
|
{
|
|
id: "5", name: "Lisa Anderson, Founder of GrowthMinds", date: "Date: January 8, 2024", title: "Outstanding Execution", quote: "From the initial strategy sessions through to final deployment, their team maintained exceptional communication and delivered on every promise. Highly recommended.", tag: "EdTech", avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", avatarAlt: "Lisa Anderson"
|
|
},
|
|
{
|
|
id: "6", name: "David Kim, Director of Marketing at BrandHub", date: "Date: December 28, 2023", title: "Game-Changing Collaboration", quote: "Webild Studio understood our brand voice and translated it into an incredible digital experience. Our team and customers love the results.", tag: "B2B Services", avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", avatarAlt: "David Kim"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTen
|
|
title="Why Partner With Webild Studio"
|
|
description="We combine strategic thinking, creative excellence, and technical mastery to deliver digital solutions that drive real business results"
|
|
tag="Our Strengths"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: "1", title: "Strategic Expertise", description: "We don't just build—we strategize. Our approach is grounded in research, market analysis, and a deep understanding of your business goals and target audience.", media: { imageSrc: "http://img.b2bpic.net/free-psd/flat-design-car-sharing-landing-page_23-2150431825.jpg" },
|
|
items: [
|
|
{ icon: Target, text: "Goal-oriented strategy" },
|
|
{ icon: TrendingUp, text: "Data-driven decisions" },
|
|
{ icon: Eye, text: "Market insights" }
|
|
],
|
|
reverse: false
|
|
},
|
|
{
|
|
id: "2", title: "Creative Excellence", description: "Our designers create visually stunning, functionally perfect interfaces that engage users and reflect your brand's unique personality and values.", media: { imageSrc: "http://img.b2bpic.net/free-psd/flat-design-car-sharing-landing-page_23-2150431825.jpg" },
|
|
items: [
|
|
{ icon: Palette, text: "Stunning design" },
|
|
{ icon: Zap, text: "User-centric UX" },
|
|
{ icon: Sparkles, text: "Brand alignment" }
|
|
],
|
|
reverse: true
|
|
},
|
|
{
|
|
id: "3", title: "Technical Mastery", description: "Our developers build scalable, secure, and high-performance digital products using cutting-edge technologies and best practices.", media: { imageSrc: "http://img.b2bpic.net/free-psd/flat-design-car-sharing-landing-page_23-2150431825.jpg" },
|
|
items: [
|
|
{ icon: Code, text: "Clean code" },
|
|
{ icon: Zap, text: "High performance" },
|
|
{ icon: Lock, text: "Secure & scalable" }
|
|
],
|
|
reverse: false
|
|
}
|
|
]}
|
|
buttons={[
|
|
{ text: "Let's Collaborate", href: "#contact" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
text="Ready to transform your digital vision into reality? Let's create something extraordinary together. Reach out today to start your next project."
|
|
animationType="entrance-slide"
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{ text: "Get In Touch", href: "mailto:hello@webild.studio" },
|
|
{ text: "Schedule a Call", href: "#contact" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="Webild Studio"
|
|
copyrightText="© 2024 Webild Studio. All rights reserved. Crafting digital excellence."
|
|
socialLinks={[
|
|
{ icon: Twitter, href: "https://twitter.com/webild", ariaLabel: "Twitter" },
|
|
{ icon: Linkedin, href: "https://linkedin.com/company/webild", ariaLabel: "LinkedIn" },
|
|
{ icon: Instagram, href: "https://instagram.com/webild", ariaLabel: "Instagram" },
|
|
{ icon: Github, href: "https://github.com/webild", ariaLabel: "GitHub" }
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|