252 lines
14 KiB
TypeScript
252 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
|
import HeroBillboardScroll from "@/components/sections/hero/HeroBillboardScroll";
|
|
import MediaAbout from "@/components/sections/about/MediaAbout";
|
|
import FeatureBento from "@/components/sections/feature/FeatureBento";
|
|
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
|
|
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
|
|
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
|
|
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
|
|
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
|
import { Award, BarChart3, Bell, Code, CreditCard, FileText, Globe, Headphones, HelpCircle, Lock, Mail, Palette, Pencil, Rocket, Search, Settings, Star, TrendingUp, Users, Zap, CheckCircle, Sparkles } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-shift"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="soft"
|
|
contentWidth="mediumLarge"
|
|
sizing="largeSmall"
|
|
background="aurora"
|
|
cardStyle="solid"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="Webild"
|
|
navItems={[
|
|
{ name: "Services", id: "services" },
|
|
{ name: "Portfolio", id: "portfolio" },
|
|
{ name: "How It Works", id: "how-it-works" },
|
|
{ name: "FAQ", id: "faq" },
|
|
]}
|
|
button={{ text: "Get Your Website Quote", href: "#contact" }}
|
|
animateOnLoad={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardScroll
|
|
title="Professional Websites Built Fast, Priced Right"
|
|
description="We create custom, high-converting websites that help small businesses and startups establish credibility and attract customers—without the enterprise price tag."
|
|
tag="Fast & Affordable"
|
|
tagIcon={Zap}
|
|
background={{ variant: "aurora" }}
|
|
buttons={[
|
|
{ text: "Get Your Website Quote", href: "#contact" },
|
|
{ text: "See Our Work", href: "#portfolio" },
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-vector/professional-dashboard-user-panel_23-2148310538.jpg"
|
|
imageAlt="Professional website dashboard and design showcase"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MediaAbout
|
|
title="Why Choose Webild?"
|
|
description="We understand that small businesses need more than just a pretty website. You need a fast, affordable solution that actually drives results. Our proven process combines design excellence with conversion optimization to deliver websites that work."
|
|
tag="About Us"
|
|
tagIcon={CheckCircle}
|
|
imageSrc="http://img.b2bpic.net/free-photo/businesspeople-working-as-team_1098-803.jpg"
|
|
imageAlt="Our team collaborating on website projects"
|
|
buttons={[{ text: "Learn Our Process", href: "#how-it-works" }]}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureBento
|
|
title="Our Website Services"
|
|
description="From concept to launch, we handle every aspect of your website creation to ensure maximum impact and results."
|
|
tag="What We Offer"
|
|
tagIcon={Sparkles}
|
|
features={[
|
|
{
|
|
title: "Custom Web Design", description: "Tailored designs that reflect your brand identity and resonate with your target audience", bentoComponent: "reveal-icon", icon: Palette,
|
|
},
|
|
{
|
|
title: "Conversion Optimization", description: "Strategic layouts and copy designed to turn visitors into customers", bentoComponent: "line-chart", icon: TrendingUp,
|
|
},
|
|
{
|
|
title: "Mobile Responsive", description: "Perfect experience on all devices, from smartphones to desktop computers", bentoComponent: "phone", statusIcon: Lock,
|
|
alertIcon: Bell,
|
|
alertTitle: "Site Live", alertMessage: "Your website is ready", apps: [
|
|
{ name: "Website", icon: Globe },
|
|
{ name: "Analytics", icon: BarChart3 },
|
|
{ name: "Leads", icon: Users },
|
|
{ name: "Messages", icon: Mail },
|
|
{ name: "Settings", icon: Settings },
|
|
{ name: "Payments", icon: CreditCard },
|
|
{ name: "Reports", icon: FileText },
|
|
{ name: "Support", icon: Headphones },
|
|
],
|
|
},
|
|
{
|
|
title: "SEO Ready", description: "Built with search engine optimization to help customers find you online", bentoComponent: "3d-stack-cards", items: [
|
|
{
|
|
icon: Search,
|
|
title: "SEO", subtitle: "Optimized", detail: "Find you online"},
|
|
{
|
|
icon: Zap,
|
|
title: "Fast Loading", subtitle: "Performance", detail: "Lightning quick"},
|
|
{
|
|
icon: Lock,
|
|
title: "Secure", subtitle: "Protected", detail: "SSL encrypted"},
|
|
],
|
|
},
|
|
{
|
|
title: "Launch Timeline", description: "Get your website live in weeks, not months", bentoComponent: "3d-task-list", title: "Launch Timeline", items: [
|
|
{ icon: Pencil, label: "Design", time: "1-2 weeks" },
|
|
{ icon: Code, label: "Development", time: "1-2 weeks" },
|
|
{ icon: Rocket, label: "Launch", time: "Go Live" },
|
|
],
|
|
},
|
|
]}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="portfolio" data-section="portfolio">
|
|
<ProductCardTwo
|
|
title="Recent Projects"
|
|
description="See how we've helped businesses just like yours establish their online presence and grow"
|
|
tag="Portfolio"
|
|
tagIcon={Award}
|
|
products={[
|
|
{
|
|
id: "1", brand: "Local Bakery", name: "Sweet Delights Bakery", price: "$3,200", rating: 5,
|
|
reviewCount: "12 reviews", imageSrc: "http://img.b2bpic.net/free-vector/minimal-bakery-landing-page-template_23-2149422236.jpg", imageAlt: "Sweet Delights Bakery website design"},
|
|
{
|
|
id: "2", brand: "Tech Startup", name: "CloudSync Platform", price: "$5,500", rating: 5,
|
|
reviewCount: "8 reviews", imageSrc: "http://img.b2bpic.net/free-vector/change-your-life-startup-landing-page_23-2148305081.jpg", imageAlt: "CloudSync Platform website design"},
|
|
{
|
|
id: "3", brand: "Fitness Studio", name: "FitLife Studio", price: "$4,000", rating: 5,
|
|
reviewCount: "15 reviews", imageSrc: "http://img.b2bpic.net/free-vector/sport-landing-page-template-with-photo_23-2148216851.jpg", imageAlt: "FitLife Studio website design"},
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="how-it-works" data-section="how-it-works">
|
|
<TestimonialCardSixteen
|
|
title="What Our Clients Say"
|
|
description="Real results from real businesses who've transformed their online presence with us"
|
|
tag="Testimonials"
|
|
tagIcon={Star}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Johnson", role: "Owner", company: "Sweet Delights Bakery", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/confident-beautiful-young-businesswoman-looking-camera-head-shot-portrait_1163-4928.jpg?_wi=1", imageAlt: "woman portrait professional headshot business"},
|
|
{
|
|
id: "2", name: "Michael Chen", role: "Founder", company: "CloudSync", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=1", imageAlt: "man portrait professional headshot business"},
|
|
{
|
|
id: "3", name: "Emily Rodriguez", role: "CEO", company: "FitLife Studio", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/confident-beautiful-young-businesswoman-looking-camera-head-shot-portrait_1163-4928.jpg?_wi=2", imageAlt: "woman portrait professional headshot business"},
|
|
{
|
|
id: "4", name: "David Kim", role: "Marketing Director", company: "Startup Innovations", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=2", imageAlt: "man portrait professional headshot business"},
|
|
]}
|
|
kpiItems={[
|
|
{ value: "180+", label: "Websites Created" },
|
|
{ value: "96%", label: "Client Satisfaction" },
|
|
{ value: "4 weeks", label: "Average Launch Time" },
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
title="Frequently Asked Questions"
|
|
description="Get answers to common questions about our website creation process and pricing"
|
|
tag="Support"
|
|
tagIcon={HelpCircle}
|
|
faqs={[
|
|
{
|
|
id: "1", title: "How long does it take to build a website?", content: "Most projects take 4-6 weeks from concept to launch. This includes design, development, and optimization. We work quickly without compromising quality, so you can start seeing results fast."},
|
|
{
|
|
id: "2", title: "What's included in your website packages?", content: "Our packages include custom web design, mobile responsive development, SEO optimization, contact forms, analytics setup, and 30 days of support. Optional add-ons include e-commerce, blog functionality, and advanced integrations."},
|
|
{
|
|
id: "3", title: "Can you help with my domain and hosting?", content: "Yes! We can register your domain, set up hosting, and handle all technical setup. We work with reliable providers to ensure your site performs at its best."},
|
|
{
|
|
id: "4", title: "Do you offer ongoing support?", content: "We provide 30 days of free support after launch. Beyond that, we offer maintenance packages to keep your site secure, fast, and up-to-date with the latest features."},
|
|
{
|
|
id: "5", title: "What if I need changes after launch?", content: "We're here for you! Minor changes are covered in our initial support period. For larger updates, we offer affordable hourly rates or maintenance plans tailored to your needs."},
|
|
{
|
|
id: "6", title: "How much does a website cost?", content: "Pricing starts at $2,500 for basic websites and goes up to $10,000+ for complex projects. We provide custom quotes based on your specific needs, timeline, and goals."},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/black-businessman-assisting-clients_482257-121939.jpg"
|
|
imageAlt="Customer support team helping with website questions"
|
|
mediaAnimation="slide-up"
|
|
mediaPosition="left"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
title="Get Your Website Quote"
|
|
description="Ready to launch your online presence? Tell us about your project and we'll provide a custom quote within 24 hours."
|
|
inputs={[
|
|
{
|
|
name: "businessName", type: "text", placeholder: "Your Business Name", required: true,
|
|
},
|
|
{
|
|
name: "email", type: "email", placeholder: "Your Email Address", required: true,
|
|
},
|
|
{
|
|
name: "phone", type: "tel", placeholder: "Your Phone Number", required: false,
|
|
},
|
|
{
|
|
name: "timeline", type: "text", placeholder: "When do you need this live?", required: false,
|
|
},
|
|
]}
|
|
textarea={{
|
|
name: "message", placeholder: "Tell us about your project, goals, and what you're looking for in a website...", rows: 5,
|
|
required: true,
|
|
}}
|
|
useInvertedBackground={false}
|
|
imageSrc="http://img.b2bpic.net/free-photo/laptop-glasses-notebok-desktop-blurred-background_169016-38703.jpg"
|
|
imageAlt="Professional workspace with laptops and creative materials"
|
|
mediaAnimation="slide-up"
|
|
mediaPosition="right"
|
|
buttonText="Get My Quote"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoReveal
|
|
logoText="Webild"
|
|
leftLink={{ text: "Privacy Policy", href: "#" }}
|
|
rightLink={{ text: "Terms of Service", href: "#" }}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|