242 lines
17 KiB
TypeScript
242 lines
17 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import Link from "next/link";
|
|
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
|
import HeroLogoBillboard from "@/components/sections/hero/HeroLogoBillboard";
|
|
import FeatureCardSix from "@/components/sections/feature/FeatureCardSix";
|
|
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
|
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
|
|
import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
|
|
import FaqBase from "@/components/sections/faq/FaqBase";
|
|
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
|
|
import { Sparkles } from "lucide-react";
|
|
|
|
export default function HomePage() {
|
|
const navItems = [
|
|
{ name: "Features", id: "features" },
|
|
{ name: "Pricing", id: "/pricing" },
|
|
{ name: "Solutions", id: "solutions" },
|
|
{ name: "Resources", id: "resources" },
|
|
{ name: "Community", id: "community" },
|
|
];
|
|
|
|
const footerColumns = [
|
|
{
|
|
title: "Product", items: [
|
|
{ label: "Features", href: "#features" },
|
|
{ label: "Pricing", href: "/pricing" },
|
|
{ label: "Templates", href: "#templates" },
|
|
{ label: "Integrations", href: "#integrations" },
|
|
],
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "/about" },
|
|
{ label: "Blog", href: "/blog" },
|
|
{ label: "Careers", href: "/careers" },
|
|
{ label: "Contact", href: "/contact" },
|
|
],
|
|
},
|
|
{
|
|
title: "Resources", items: [
|
|
{ label: "Documentation", href: "/docs" },
|
|
{ label: "Community", href: "/community" },
|
|
{ label: "Status", href: "https://status.webild.com" },
|
|
{ label: "Support", href: "/support" },
|
|
],
|
|
},
|
|
];
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="compact"
|
|
sizing="largeSizeMediumTitles"
|
|
background="circleGradient"
|
|
cardStyle="inset"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="normal"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="Webild"
|
|
navItems={navItems}
|
|
button={{
|
|
text: "Start Building", href: "#cta"}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogoBillboard
|
|
logoText="Webild"
|
|
description="Empower your clients to build stunning websites without coding. The easiest website builder for agencies and freelancers to scale their business."
|
|
buttons={[
|
|
{ text: "Start Free Trial", href: "#cta" },
|
|
{ text: "Watch Demo", href: "https://youtube.com" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
background={{ variant: "sparkles-gradient" }}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATj41agusFsP7bwZZfs2Ded7hG/a-modern-clean-website-builder-dashboard-1772623424485-176a63c7.png"
|
|
imageAlt="Webild website builder dashboard interface"
|
|
mediaAnimation="opacity"
|
|
frameStyle="browser"
|
|
ariaLabel="Webild - Website builder hero section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardSix
|
|
title="How Webild Works"
|
|
description="Build professional websites in minutes, not months. Our intuitive platform removes complexity and puts power in your hands."
|
|
tag="Process"
|
|
tagIcon={Sparkles}
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Choose Your Template", description:
|
|
"Start with a professionally designed template built for your industry. Customize every element to match your brand perfectly.", imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATj41agusFsP7bwZZfs2Ded7hG/a-collection-of-beautifully-designed-web-1772623424900-213fa706.png", imageAlt: "Website template selection"},
|
|
{
|
|
id: 2,
|
|
title: "Customize with Ease", description:
|
|
"Drag, drop, and design. No code required. Adjust colors, fonts, layouts, and content in real-time with instant previews.", imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATj41agusFsP7bwZZfs2Ded7hG/a-close-up-view-of-a-website-customizati-1772623424176-0f18d52c.png", imageAlt: "Website customization interface"},
|
|
{
|
|
id: 3,
|
|
title: "Optimize & Launch", description:
|
|
"Built-in SEO tools, analytics, and performance optimization. Launch your website with confidence and track success from day one.", imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATj41agusFsP7bwZZfs2Ded7hG/a-visualization-of-seo-optimization-tool-1772623424337-f3ee4d85.png", imageAlt: "SEO and analytics dashboard"},
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
ariaLabel="How Webild website builder works"
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
title="Trusted by Industry Leaders"
|
|
description="Join thousands of agencies and freelancers using Webild to deliver amazing websites to their clients."
|
|
tag="Partners"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={["Adobe", "Figma", "Webflow", "Stripe", "GitHub", "AWS", "Slack", "Mailchimp"]}
|
|
logos={[
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATj41agusFsP7bwZZfs2Ded7hG/the-adobe-creative-cloud-logo-display-th-1772623424857-ab3e281e.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATj41agusFsP7bwZZfs2Ded7hG/the-figma-logo-display-the-modern-colorf-1772623423104-c8df40a4.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATj41agusFsP7bwZZfs2Ded7hG/the-webflow-logo-display-the-modern-prof-1772623424320-d21b13da.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATj41agusFsP7bwZZfs2Ded7hG/the-stripe-logo-display-the-professional-1772623423141-0b83a97c.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATj41agusFsP7bwZZfs2Ded7hG/the-github-logo-display-the-recognizable-1772623424236-b9137d3b.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATj41agusFsP7bwZZfs2Ded7hG/the-aws-amazon-web-services-logo-display-1772623423157-694ff8e0.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATj41agusFsP7bwZZfs2Ded7hG/the-slack-logo-display-the-colorful-slac-1772623424111-ea5007e8.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATj41agusFsP7bwZZfs2Ded7hG/the-mailchimp-logo-display-the-friendly--1772623423227-a770b889.png"]}
|
|
speed={40}
|
|
showCard={true}
|
|
ariaLabel="Trusted partners and integrations"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardEleven
|
|
title="Our Impact"
|
|
description="See the results our customers achieve with Webild every day."
|
|
tag="Results"
|
|
metrics={[
|
|
{
|
|
id: "1", value: "50K+", title: "Websites Created", description: "Beautiful, functional websites launched", imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATj41agusFsP7bwZZfs2Ded7hG/a-vibrant-image-of-creative-professional-1772623424610-0ffb8d6e.png", imageAlt: "Successful websites created"},
|
|
{
|
|
id: "2", value: "10M+", title: "Users Served", description: "Happy users building their online presence", imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATj41agusFsP7bwZZfs2Ded7hG/a-dynamic-image-showing-website-launches-1772623424884-34fe5952.png", imageAlt: "Users and success metrics"},
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
ariaLabel="Impact metrics and results"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFive
|
|
title="What Our Customers Say"
|
|
description="Real feedback from agencies and freelancers using Webild to transform their business."
|
|
tag="Testimonials"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Chen, Founder of Design Co", date: "Date: 15 January 2025", title: "This transformed our entire workflow", quote:
|
|
"Webild cut our project delivery time in half. What used to take weeks now takes days. Our clients are thrilled with the results, and we're taking on 3x more projects.", tag: "Agency Owner", avatarSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATj41agusFsP7bwZZfs2Ded7hG/a-professional-headshot-portrait-of-a-co-1772623423949-c77276eb.png", avatarAlt: "Sarah Chen", imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATj41agusFsP7bwZZfs2Ded7hG/a-dynamic-photo-showing-a-successful-web-1772623424141-edd6e339.png", imageAlt: "Team celebrating website launch"},
|
|
{
|
|
id: "2", name: "Marcus Rodriguez, Freelance Developer", date: "Date: 12 January 2025", title: "Finally, a tool that respects my time", quote:
|
|
"As a solo freelancer, I need tools that help me work smarter. Webild's templates and customization options are exactly what I needed to scale without hiring.", tag: "Freelancer", avatarSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATj41agusFsP7bwZZfs2Ded7hG/a-professional-headshot-portrait-of-a-co-1772623423496-194e4d23.png", avatarAlt: "Marcus Rodriguez", imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATj41agusFsP7bwZZfs2Ded7hG/a-professional-image-showing-website-des-1772623424436-342f95c3.png", imageAlt: "Professional designer at work"},
|
|
{
|
|
id: "3", name: "Priya Patel, E-Commerce Manager", date: "Date: 8 January 2025", title: "Perfect for e-commerce businesses", quote:
|
|
"We launched our online store in 2 weeks with Webild. The built-in SEO and analytics tools helped us drive 40% more traffic in the first month.", tag: "E-Commerce", avatarSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATj41agusFsP7bwZZfs2Ded7hG/a-professional-headshot-portrait-of-a-wo-1772623424124-ee6007ab.png", avatarAlt: "Priya Patel", imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATj41agusFsP7bwZZfs2Ded7hG/an-image-showing-successful-e-commerce-o-1772623424665-8e1a9874.png", imageAlt: "Successful e-commerce store"},
|
|
{
|
|
id: "4", name: "James Sullivan, Marketing Agency Owner", date: "Date: 5 January 2025", title: "Our secret competitive advantage", quote:
|
|
"Webild gives our team a massive edge. We can present multiple design options to clients instantly. Client revisions are faster than ever.", tag: "Agency", avatarSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATj41agusFsP7bwZZfs2Ded7hG/a-professional-headshot-portrait-of-a-ma-1772623423740-393c4d55.png", avatarAlt: "James Sullivan", imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATj41agusFsP7bwZZfs2Ded7hG/a-professional-image-of-a-digital-market-1772623423840-d06b38fa.png", imageAlt: "Agency team collaboration"},
|
|
{
|
|
id: "5", name: "Emma Thompson, Startup Founder", date: "Date: 2 January 2025", title: "Exactly what early-stage startups need", quote:
|
|
"We needed a website fast and didn't have the budget for custom development. Webild was affordable, professional, and launched us in days.", tag: "Startup", avatarSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATj41agusFsP7bwZZfs2Ded7hG/a-professional-headshot-portrait-of-a-wo-1772623423760-9d402890.png", avatarAlt: "Emma Thompson", imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATj41agusFsP7bwZZfs2Ded7hG/an-image-showing-startup-growth-and-digi-1772623424691-079a0628.png", imageAlt: "Startup success story"},
|
|
{
|
|
id: "6", name: "David Kim, Content Creator", date: "Date: 28 December 2024", title: "Built my brand presence effortlessly", quote:
|
|
"I'm not technical, but Webild's interface felt intuitive from day one. My portfolio website is now my best marketing tool.", tag: "Creator", avatarSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATj41agusFsP7bwZZfs2Ded7hG/a-professional-headshot-portrait-of-a-ma-1772623423985-b5b8d063.png", avatarAlt: "David Kim", imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATj41agusFsP7bwZZfs2Ded7hG/a-professional-image-of-content-creators-1772623424831-d1bef274.png", imageAlt: "Content creator workspace"},
|
|
]}
|
|
ariaLabel="Customer testimonials and success stories"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
title="Frequently Asked Questions"
|
|
description="Everything you need to know about Webild and how it can help your business grow."
|
|
tag="Help"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "1", title: "Do I need coding knowledge to use Webild?", content:
|
|
"No! Webild is designed for non-technical users. Our drag-and-drop builder, pre-built templates, and guided workflows make it easy for anyone to create professional websites. If you can use a word processor, you can use Webild."},
|
|
{
|
|
id: "2", title: "Can I use Webild for client projects?", content:
|
|
"Absolutely! Webild is perfect for agencies and freelancers. You can build unlimited websites for your clients, customize templates, and deliver professional results faster than ever. White-label options are available on premium plans."},
|
|
{
|
|
id: "3", title: "What if I need to migrate an existing website?", content:
|
|
"We offer migration services and import tools for most platforms. Our support team can help guide you through the process, or you can use our automated migration tools to bring your content into Webild quickly."},
|
|
{
|
|
id: "4", title: "Is my website secure and backed up?", content:
|
|
"Yes. All Webild websites are hosted on secure, enterprise-grade infrastructure with automatic daily backups, SSL certificates, and DDoS protection included. We take security seriously."},
|
|
{
|
|
id: "5", title: "Can I sell products online with Webild?", content:
|
|
"Yes! Webild includes built-in e-commerce features including product catalogs, shopping carts, payment processing via Stripe and PayPal, inventory management, and order tracking."},
|
|
{
|
|
id: "6", title: "What happens if I cancel my subscription?", content:
|
|
"You can export your website data at any time. If you cancel, your website will remain live for 30 days before we need to take it down. We also offer a data export service to help you move to another platform if needed."},
|
|
]}
|
|
faqsAnimation="slide-up"
|
|
animationType="smooth"
|
|
showCard={true}
|
|
ariaLabel="Frequently asked questions about Webild"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
columns={footerColumns}
|
|
copyrightText="© 2025 Webild | Built to empower creators"
|
|
ariaLabel="Site footer with links and information"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |