361 lines
23 KiB
TypeScript
361 lines
23 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
|
import HeroBillboard from "@/components/sections/hero/HeroBillboard";
|
|
import TextAbout from "@/components/sections/about/TextAbout";
|
|
import FeatureCardNine from "@/components/sections/feature/FeatureCardNine";
|
|
import ProductCardFour from "@/components/sections/product/ProductCardFour";
|
|
import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
|
|
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
|
|
import PricingCardThree from "@/components/sections/pricing/PricingCardThree";
|
|
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
|
|
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
|
|
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
|
import { Award, BarChart3, CheckCircle, Code, DollarSign, MessageSquare, Sparkles, Star, Target, TrendingUp, Users, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-shift"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="medium"
|
|
sizing="mediumLargeSizeMediumTitles"
|
|
background="circleGradient"
|
|
cardStyle="glass-depth"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="normal"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={[
|
|
{ name: "Services", id: "services" },
|
|
{ name: "Portfolio", id: "portfolio" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "Pricing", id: "pricing" },
|
|
{ name: "Contact", id: "contact" },
|
|
]}
|
|
button={{ text: "Get Started", href: "contact" }}
|
|
brandName="Webuild"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboard
|
|
title="Build Stunning Websites That Convert"
|
|
description="We create beautiful, high-performance websites that help businesses grow. From concept to launch, we handle every detail with precision and creativity."
|
|
tag="Web Design Studio"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "noise" }}
|
|
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_3ARW3x2rw8IF2jMdw0m9OHUElVB/a-modern-web-design-studio-workspace-wit-1772555742391-781100a1.png"
|
|
imageAlt="Web design showcase"
|
|
mediaAnimation="slide-up"
|
|
avatars={[
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARW3x2rw8IF2jMdw0m9OHUElVB/professional-headshot-of-a-young-female--1772555740091-d1252d6d.png", alt: "Team member 1"
|
|
},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARW3x2rw8IF2jMdw0m9OHUElVB/professional-headshot-of-a-male-web-deve-1772555739260-374aae78.png", alt: "Team member 2"
|
|
},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARW3x2rw8IF2jMdw0m9OHUElVB/professional-headshot-of-a-diverse-team--1772555739874-5b5ed719.png", alt: "Team member 3"
|
|
},
|
|
]}
|
|
avatarText="Trusted by 50+ businesses"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextAbout
|
|
tag="About Webuild"
|
|
tagIcon={Target}
|
|
tagAnimation="slide-up"
|
|
title="We're a team of passionate designers and developers dedicated to creating web experiences that leave lasting impressions and drive real business results."
|
|
useInvertedBackground={false}
|
|
buttons={[{ text: "Learn More", href: "services" }]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardNine
|
|
title="Our Services"
|
|
description="Complete web design solutions tailored to your business needs"
|
|
tag="What We Do"
|
|
tagIcon={Code}
|
|
tagAnimation="slide-up"
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Custom Web Design", description: "Bespoke websites crafted to reflect your brand identity and engage your target audience. We blend aesthetics with functionality to create digital experiences that convert visitors into customers.", phoneOne: {
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARW3x2rw8IF2jMdw0m9OHUElVB/smartphone-screen-displaying-a-beautiful-1772555741060-1e0ac77f.png"
|
|
},
|
|
phoneTwo: {
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARW3x2rw8IF2jMdw0m9OHUElVB/iphone-mockup-showing-a-sleek-website-in-1772555740717-7d0bc3b9.png"
|
|
},
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "E-Commerce Solutions", description: "Powerful online stores designed for maximum conversions. We integrate secure payment processing, inventory management, and analytics to help you sell online effectively.", phoneOne: {
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3fdw2q"
|
|
},
|
|
phoneTwo: {
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARW3x2rw8IF2jMdw0m9OHUElVB/smartphone-showing-an-e-commerce-product-1772555742667-9d64f66d.png"
|
|
},
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Web Development", description: "Fast, scalable, and secure websites built with modern technologies. Our development process ensures optimal performance, SEO readiness, and smooth user experiences.", phoneOne: {
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARW3x2rw8IF2jMdw0m9OHUElVB/mobile-device-displaying-a-modern-web-ap-1772555740884-298670ef.png"
|
|
},
|
|
phoneTwo: {
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARW3x2rw8IF2jMdw0m9OHUElVB/smartphone-screen-showing-a-sophisticate-1772555740755-9c41521e.png"
|
|
},
|
|
},
|
|
{
|
|
id: 4,
|
|
title: "Ongoing Maintenance", description: "Keep your website running smoothly with our comprehensive support packages. Regular updates, security monitoring, and performance optimization included.", phoneOne: {
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARW3x2rw8IF2jMdw0m9OHUElVB/mobile-phone-displaying-a-customer-suppo-1772555740624-ebdf2510.png"
|
|
},
|
|
phoneTwo: {
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARW3x2rw8IF2jMdw0m9OHUElVB/smartphone-showing-a-website-maintenance-1772555740442-ff904cf1.png"
|
|
},
|
|
},
|
|
]}
|
|
showStepNumbers={true}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="portfolio" data-section="portfolio">
|
|
<ProductCardFour
|
|
title="Recent Projects"
|
|
description="Showcase of our latest work and successful client engagements"
|
|
tag="Portfolio"
|
|
tagIcon={Award}
|
|
tagAnimation="slide-up"
|
|
products={[
|
|
{
|
|
id: "1", name: "TechFlow Dashboard", price: "Completed", variant: "SaaS Platform", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARW3x2rw8IF2jMdw0m9OHUElVB/high-quality-screenshot-of-a-modern-saas-1772555744725-7e4ad9e9.png", imageAlt: "TechFlow dashboard design"
|
|
},
|
|
{
|
|
id: "2", name: "EcoStore E-Commerce", price: "Completed", variant: "Online Retail", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARW3x2rw8IF2jMdw0m9OHUElVB/beautiful-e-commerce-website-homepage-fo-1772555744178-77d75988.png", imageAlt: "EcoStore e-commerce site"
|
|
},
|
|
{
|
|
id: "3", name: "HealthHub Mobile Site", price: "Completed", variant: "Healthcare Web", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARW3x2rw8IF2jMdw0m9OHUElVB/mobile-responsive-healthcare-website-int-1772555740354-44b60bc6.png", imageAlt: "HealthHub mobile responsive design"
|
|
},
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttons={[{ text: "View All Projects", href: "contact" }]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFive
|
|
title="What Our Clients Say"
|
|
description="Hear from businesses we've helped transform their digital presence"
|
|
tag="Testimonials"
|
|
tagIcon={MessageSquare}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Johnson, CEO of TechFlow", date: "Date: 15 November 2024", title: "Exceeded our expectations completely", quote: "Webuild transformed our outdated website into a modern, high-converting platform. Their attention to detail and collaborative approach made the entire process seamless. We've already seen a 40% increase in leads.", tag: "SaaS", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARW3x2rw8IF2jMdw0m9OHUElVB/professional-headshot-of-a-confident-fem-1772555739747-be371ddd.png", avatarAlt: "Sarah Johnson", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARW3x2rw8IF2jMdw0m9OHUElVB/modern-tech-company-office-scene-with-te-1772555740900-3f131f66.png", imageAlt: "TechFlow team working together"
|
|
},
|
|
{
|
|
id: "2", name: "Marcus Chen, Founder of EcoStore", date: "Date: 08 November 2024", title: "Best investment we made this year", quote: "The e-commerce solution they built for us is intuitive, fast, and beautiful. Our conversion rate improved significantly, and customer feedback has been overwhelmingly positive. Highly recommend!", tag: "E-Commerce", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARW3x2rw8IF2jMdw0m9OHUElVB/professional-headshot-of-an-asian-male-f-1772555743071-3a500265.png", avatarAlt: "Marcus Chen", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARW3x2rw8IF2jMdw0m9OHUElVB/eco-friendly-retail-store-interior-with--1772555740388-fe6bb985.png", imageAlt: "EcoStore storefront"
|
|
},
|
|
{
|
|
id: "3", name: "Emily Rodriguez, Director at HealthHub", date: "Date: 01 November 2024", title: "Professional and incredibly knowledgeable", quote: "From initial consultation to post-launch support, Webuild demonstrated exceptional expertise. They understood our healthcare compliance requirements and delivered a solution that exceeded specifications.", tag: "Healthcare", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARW3x2rw8IF2jMdw0m9OHUElVB/professional-headshot-of-a-female-health-1772555740272-2f6d70c1.png", avatarAlt: "Emily Rodriguez", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARW3x2rw8IF2jMdw0m9OHUElVB/modern-healthcare-clinic-interior-with-c-1772555740731-e357dbd9.png", imageAlt: "HealthHub patient interface"
|
|
},
|
|
{
|
|
id: "4", name: "David Kim, Operations Manager of GrowthCo", date: "Date: 25 October 2024", title: "They truly care about your success", quote: "What impressed us most was Webuild's commitment to understanding our business goals. They didn't just build a website; they built a tool that genuinely drives business growth. Exceptional partners.", tag: "SaaS", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARW3x2rw8IF2jMdw0m9OHUElVB/professional-headshot-of-an-asian-male-o-1772555743243-4953030b.png", avatarAlt: "David Kim", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARW3x2rw8IF2jMdw0m9OHUElVB/creative-startup-office-space-with-open--1772555742003-86ee6f06.png", imageAlt: "GrowthCo team dashboard"
|
|
},
|
|
{
|
|
id: "5", name: "Lisa Wang, CMO of BrandCo", date: "Date: 18 October 2024", title: "A game-changer for our marketing", quote: "The website Webuild created perfectly captures our brand identity and engages our target audience. It's not just beautiful—it's strategically designed to convert. Worth every penny.", tag: "Marketing", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARW3x2rw8IF2jMdw0m9OHUElVB/professional-headshot-of-a-female-cmo-in-1772555741718-9f734d6c.png", avatarAlt: "Lisa Wang", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARW3x2rw8IF2jMdw0m9OHUElVB/marketing-agency-office-with-creative-te-1772555741903-fc7ba5eb.png", imageAlt: "BrandCo marketing campaign"
|
|
},
|
|
{
|
|
id: "6", name: "James Anderson, VP of StartupXYZ", date: "Date: 10 October 2024", title: "Talented team with excellent communication", quote: "From day one, the Webuild team was responsive, professional, and easy to work with. They delivered on time and on budget. Our new website is helping us scale tremendously.", tag: "Startup", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARW3x2rw8IF2jMdw0m9OHUElVB/professional-headshot-of-a-male-startup--1772555739841-d6d30ccc.png", avatarAlt: "James Anderson", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARW3x2rw8IF2jMdw0m9OHUElVB/vibrant-startup-workspace-with-young-ent-1772555743538-e5a75415.png", imageAlt: "StartupXYZ product showcase"
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardOne
|
|
title="Our Impact"
|
|
description="Proven results that demonstrate our commitment to client success"
|
|
tag="By The Numbers"
|
|
tagIcon={BarChart3}
|
|
tagAnimation="slide-up"
|
|
metrics={[
|
|
{
|
|
id: "1", value: "50", title: "Projects", description: "Successfully delivered websites", icon: CheckCircle,
|
|
},
|
|
{
|
|
id: "2", value: "35", title: "Clients", description: "Businesses we've transformed", icon: Users,
|
|
},
|
|
{
|
|
id: "3", value: "4", title: "Years", description: "Industry experience and expertise", icon: Zap,
|
|
},
|
|
{
|
|
id: "4", value: "98", title: "Satisfaction", description: "Percent client satisfaction rate", icon: Star,
|
|
},
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardThree
|
|
title="Simple, Transparent Pricing"
|
|
description="Choose the package that's right for your project and business goals"
|
|
tag="Pricing Plans"
|
|
tagIcon={DollarSign}
|
|
tagAnimation="slide-up"
|
|
plans={[
|
|
{
|
|
id: "starter", price: "Starting at $2,999", name: "Starter", buttons: [
|
|
{ text: "Get Started", href: "contact" },
|
|
{ text: "Contact Us", href: "contact" },
|
|
],
|
|
features: [
|
|
"Up to 5 pages", "Responsive design", "Basic SEO optimization", "1 month support", "Content upload included"
|
|
],
|
|
},
|
|
{
|
|
id: "professional", badge: "Most Popular", badgeIcon: Sparkles,
|
|
price: "Starting at $5,999", name: "Professional", buttons: [
|
|
{ text: "Get Started", href: "contact" },
|
|
{ text: "Contact Us", href: "contact" },
|
|
],
|
|
features: [
|
|
"Up to 15 pages", "Advanced animations", "Full SEO optimization", "3 months support", "Blog functionality", "Analytics integration"
|
|
],
|
|
},
|
|
{
|
|
id: "enterprise", price: "Custom Quote", name: "Enterprise", buttons: [
|
|
{ text: "Get Started", href: "contact" },
|
|
{ text: "Contact Us", href: "contact" },
|
|
],
|
|
features: [
|
|
"Unlimited pages", "E-commerce integration", "Custom features", "6 months support", "Priority support", "API integrations", "Marketing automation"
|
|
],
|
|
},
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
sideTitle="Frequently Asked Questions"
|
|
sideDescription="Get answers to common questions about our web design process and services"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "What is your typical project timeline?", content: "Most projects take 4-8 weeks depending on complexity and scope. We'll provide a detailed timeline during the initial consultation. Rush projects are available upon request with additional fees."
|
|
},
|
|
{
|
|
id: "2", title: "Do you provide ongoing maintenance and support?", content: "Yes! We offer comprehensive support packages ranging from basic updates to full-service maintenance. All our packages include regular backups, security monitoring, and performance optimization."
|
|
},
|
|
{
|
|
id: "3", title: "Can you migrate my existing website?", content: "Absolutely. We specialize in website migrations and can transfer your existing content while improving performance and design. We'll ensure zero data loss and minimize downtime."
|
|
},
|
|
{
|
|
id: "4", title: "Will my website be mobile responsive?", content: "Every website we build is fully responsive and optimized for all devices. We follow mobile-first design principles to ensure excellent user experience on phones, tablets, and desktops."
|
|
},
|
|
{
|
|
id: "5", title: "Do you offer SEO services?", content: "Yes! SEO is integrated into all our web design projects. We optimize site structure, meta tags, content, and performance. Additional SEO packages are available for ongoing optimization."
|
|
},
|
|
{
|
|
id: "6", title: "What if I need changes after launch?", content: "We provide revision rounds during the design phase. After launch, we offer maintenance packages that include regular updates and modifications. You can also purchase additional hours as needed."
|
|
},
|
|
]}
|
|
faqsAnimation="slide-up"
|
|
textPosition="left"
|
|
useInvertedBackground={false}
|
|
animationType="smooth"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
title="Let's Create Something Amazing"
|
|
description="Ready to build your next project? Get in touch with our team and let's discuss how we can help bring your vision to life."
|
|
inputs={[
|
|
{ name: "name", type: "text", placeholder: "Your name", required: true },
|
|
{ name: "email", type: "email", placeholder: "your@email.com", required: true },
|
|
{ name: "company", type: "text", placeholder: "Company name", required: false },
|
|
{ name: "phone", type: "tel", placeholder: "+1 (555) 000-0000", required: false },
|
|
]}
|
|
textarea={{
|
|
name: "message", placeholder: "Tell us about your project and goals...", rows: 5,
|
|
required: true,
|
|
}}
|
|
useInvertedBackground={false}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARW3x2rw8IF2jMdw0m9OHUElVB/modern-contact-form-interface-displayed--1772555740180-5ab0d317.png"
|
|
imageAlt="Contact us"
|
|
mediaAnimation="slide-up"
|
|
mediaPosition="right"
|
|
buttonText="Send Message"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
logoText="Webuild"
|
|
columns={[
|
|
{
|
|
items: [
|
|
{ label: "Services", href: "services" },
|
|
{ label: "Portfolio", href: "portfolio" },
|
|
{ label: "Pricing", href: "pricing" },
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "About Us", href: "about" },
|
|
{ label: "Testimonials", href: "testimonials" },
|
|
{ label: "Blog", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Contact", href: "contact" },
|
|
{ label: "Support", href: "#" },
|
|
{ label: "Privacy", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Twitter", href: "https://twitter.com" },
|
|
{ label: "LinkedIn", href: "https://linkedin.com" },
|
|
{ label: "GitHub", href: "https://github.com" },
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|