Update src/app/page.tsx

This commit is contained in:
2026-05-14 05:38:20 +00:00
parent 53084604b8
commit 1a7d8b0c5f

View File

@@ -28,396 +28,151 @@ export default function LandingPage() {
headingFontWeight="normal"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{
name: "Features",
id: "#features",
},
{
name: "Templates",
id: "#templates",
},
{
name: "Pricing",
id: "#pricing",
},
]}
brandName="Webild"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Features", id: "#features" },
{ name: "Templates", id: "#templates" },
{ name: "Pricing", id: "#pricing" }
]}
brandName="Webild"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardScroll
background={{
variant: "sparkles-gradient",
}}
title="Idea to Website, Instantly"
description="Generate websites instantly and customize to perfection. Webild turns your vision into a professional production-grade site."
buttons={[
{
text: "Get Started",
href: "#contact",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/empty-dark-room-modern-futuristic-sci-fi-background-3d-illustration_35913-2392.jpg"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardScroll
background={{ variant: "sparkles-gradient" }}
title="Idea to Website, Instantly"
description="Generate websites instantly and customize to perfection. Webild turns your vision into a professional production-grade site."
buttons={[{ text: "Get Started", href: "#contact" }]}
imageSrc="http://img.b2bpic.net/free-photo/empty-dark-room-modern-futuristic-sci-fi-background-3d-illustration_35913-2392.jpg"
/>
</div>
<div id="about" data-section="about">
<SplitAbout
textboxLayout="split"
useInvertedBackground={true}
title="Make It Uniquely Yours"
description="Start with a single prompt and watch Webild turn your idea into a professional site. Edit text, swap images, and move elements with ease."
bulletPoints={[
{
title: "AI-Powered Creation",
description: "Describe what you want and our AI handles the layout, content, and visuals.",
},
{
title: "Seamless Customization",
description: "Customize anything with a single click and watch it update in real time.",
},
{
title: "Launch in Seconds",
description: "Free built-in hosting lets you go live instantly with your own custom domain.",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/dark-green-marble-wave-background_53876-104420.jpg"
/>
</div>
<div id="about" data-section="about">
<SplitAbout
textboxLayout="split"
useInvertedBackground={true}
title="Make It Uniquely Yours"
description="Start with a single prompt and watch Webild turn your idea into a professional site. Edit text, swap images, and move elements with ease."
bulletPoints={[
{ title: "AI-Powered Creation", description: "Describe what you want and our AI handles the layout, content, and visuals." },
{ title: "Seamless Customization", description: "Customize anything with a single click and watch it update in real time." },
{ title: "Launch in Seconds", description: "Free built-in hosting lets you go live instantly with your own custom domain." }
]}
imageSrc="http://img.b2bpic.net/free-photo/dark-green-marble-wave-background_53876-104420.jpg"
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyFour
animationType="depth-3d"
textboxLayout="default"
useInvertedBackground={false}
features={[
{
id: "f1",
title: "Sell Online",
author: "Commerce",
description: "Integrate powerful e-commerce tools.",
tags: [
"Sales",
"Store",
],
imageSrc: "http://img.b2bpic.net/free-photo/american-football-ball-made-illuminated-shapes-illustration-consisting-glowing-lines-points-polygons-form-ball-sport-rugby-abstract-3d-neon-wireframe-concept_493343-29985.jpg",
},
{
id: "f2",
title: "Book Appointments",
author: "Operations",
description: "Manage schedules and bookings easily.",
tags: [
"Booking",
"Service",
],
imageSrc: "http://img.b2bpic.net/free-photo/abstract-light-painting-dark_23-2149627920.jpg",
},
{
id: "f3",
title: "Own Your Domain",
author: "Branding",
description: "Secure your professional online presence.",
tags: [
"Domain",
"Hosting",
],
imageSrc: "http://img.b2bpic.net/free-vector/cyber-security-shield_78370-7887.jpg",
},
{
id: "f4",
title: "AI Content Writing",
author: "Marketing",
description: "Generate SEO-optimized text for your pages.",
tags: [
"AI",
"Writing",
],
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-cool-trippy-futuristic-hallway-triangular-form_181624-57463.jpg",
},
{
id: "f5",
title: "Analytics Dashboard",
author: "Insights",
description: "Monitor your site traffic in real-time.",
tags: [
"Data",
"Reports",
],
imageSrc: "http://img.b2bpic.net/free-photo/chemical-element-arrangement-still-life_23-2149048919.jpg",
},
]}
title="Everything You Need to Grow"
description="Power your business with integrated tools that help you scale without changing platforms."
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyFour
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
features={[
{ id: "f1", title: "Sell Online", author: "Commerce", description: "Integrate powerful e-commerce tools.", tags: ["Sales", "Store"], imageSrc: "http://img.b2bpic.net/free-photo/american-football-ball-made-illuminated-shapes-illustration-consisting-glowing-lines-points-polygons-form-ball-sport-rugby-abstract-3d-neon-wireframe-concept_493343-29985.jpg" },
{ id: "f2", title: "Book Appointments", author: "Operations", description: "Manage schedules and bookings easily.", tags: ["Booking", "Service"], imageSrc: "http://img.b2bpic.net/free-photo/abstract-light-painting-dark_23-2149627920.jpg" },
{ id: "f3", title: "Own Your Domain", author: "Branding", description: "Secure your professional online presence.", tags: ["Domain", "Hosting"], imageSrc: "http://img.b2bpic.net/free-vector/cyber-security-shield_78370-7887.jpg" },
{ id: "f4", title: "AI Content Writing", author: "Marketing", description: "Generate SEO-optimized text for your pages.", tags: ["AI", "Writing"], imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-cool-trippy-futuristic-hallway-triangular-form_181624-57463.jpg" },
{ id: "f5", title: "Analytics Dashboard", author: "Insights", description: "Monitor your site traffic in real-time.", tags: ["Data", "Reports"], imageSrc: "http://img.b2bpic.net/free-photo/chemical-element-arrangement-still-life_23-2149048919.jpg" }
]}
title="Everything You Need to Grow"
description="Power your business with integrated tools that help you scale without changing platforms."
/>
</div>
<div id="templates" data-section="templates">
<ProductCardOne
animationType="depth-3d"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={true}
products={[
{
id: "p1",
name: "Luxury Skincare",
price: "Template",
imageSrc: "http://img.b2bpic.net/free-vector/northern-lights-modern-landing-page_23-2148265651.jpg",
},
{
id: "p2",
name: "Creative Agency",
price: "Template",
imageSrc: "http://img.b2bpic.net/free-photo/modern-business-workspace-glows-with-forecasting-metrics-graphs-corporate-empty-space-equipped_482257-132102.jpg",
},
{
id: "p3",
name: "Architecture Studio",
price: "Template",
imageSrc: "http://img.b2bpic.net/free-photo/modern-architectural-marvel-night_23-2152006102.jpg",
},
{
id: "p4",
name: "Italian Restaurant",
price: "Template",
imageSrc: "http://img.b2bpic.net/free-photo/wedding-menu-concept-with-cutlery_23-2147801836.jpg",
},
{
id: "p5",
name: "Personal Trainer",
price: "Template",
imageSrc: "http://img.b2bpic.net/free-photo/view-woman-with-purple-boxing-gloves-womens-day-celebration_23-2151257586.jpg",
},
{
id: "p6",
name: "Real Estate",
price: "Template",
imageSrc: "http://img.b2bpic.net/free-photo/construction-design-project-renovation-concept_53876-133668.jpg",
},
]}
title="Browse Our Template Collection"
description="Start with a template and bring your brand to life. Over 50+ professional designs available."
/>
</div>
<div id="templates" data-section="templates">
<ProductCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={true}
products={[
{ id: "p1", name: "Luxury Skincare", price: "Template", imageSrc: "http://img.b2bpic.net/free-vector/northern-lights-modern-landing-page_23-2148265651.jpg" },
{ id: "p2", name: "Creative Agency", price: "Template", imageSrc: "http://img.b2bpic.net/free-photo/modern-business-workspace-glows-with-forecasting-metrics-graphs-corporate-empty-space-equipped_482257-132102.jpg" },
{ id: "p3", name: "Architecture Studio", price: "Template", imageSrc: "http://img.b2bpic.net/free-photo/modern-architectural-marvel-night_23-2152006102.jpg" },
{ id: "p4", name: "Italian Restaurant", price: "Template", imageSrc: "http://img.b2bpic.net/free-photo/wedding-menu-concept-with-cutlery_23-2147801836.jpg" },
{ id: "p5", name: "Personal Trainer", price: "Template", imageSrc: "http://img.b2bpic.net/free-photo/view-woman-with-purple-boxing-gloves-womens-day-celebration_23-2151257586.jpg" },
{ id: "p6", name: "Real Estate", price: "Template", imageSrc: "http://img.b2bpic.net/free-photo/construction-design-project-renovation-concept_53876-133668.jpg" }
]}
title="Browse Our Template Collection"
description="Start with a template and bring your brand to life. Over 50+ professional designs available."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardEleven
textboxLayout="default"
useInvertedBackground={false}
metrics={[
{
id: "m1",
value: "100K+",
title: "Websites Built",
description: "Trusted by creators globally.",
imageSrc: "http://img.b2bpic.net/free-photo/african-american-woman-checking-social-media-phone_53876-105397.jpg",
},
{
id: "m2",
value: "99.9%",
title: "Uptime Rate",
description: "Reliability you can count on.",
imageSrc: "http://img.b2bpic.net/free-photo/optical-fiber-background_23-2149301533.jpg",
},
{
id: "m3",
value: "2x",
title: "Traffic Growth",
description: "Boost traffic with AI SEO.",
imageSrc: "http://img.b2bpic.net/free-photo/variety-people-multitasking-3d-cartoon-scene_23-2151294501.jpg",
},
{
id: "m4",
value: "24/7",
title: "Global Support",
description: "Assistance whenever you need it.",
imageSrc: "http://img.b2bpic.net/free-photo/illuminated-mobile-with-icons-blue-tones_1134-416.jpg",
},
{
id: "m5",
value: "50+",
title: "Integrations",
description: "Connect your favorite workflow tools.",
imageSrc: "http://img.b2bpic.net/free-photo/handsome-african-entrepreneur-dressed-gray-suit-gesturing-holding-his-hands-as-if-interacting-with-something-while-playing-video-games-using-3d-virtual-reality-headset-oculus-glasses_273609-5842.jpg",
},
]}
title="Built-In Intelligence"
description="Scale without changing platforms. Track performance and optimize for growth."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardEleven
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
metrics={[
{ id: "m1", value: "100K+", title: "Websites Built", description: "Trusted by creators globally.", imageSrc: "http://img.b2bpic.net/free-photo/african-american-woman-checking-social-media-phone_53876-105397.jpg" },
{ id: "m2", value: "99.9%", title: "Uptime Rate", description: "Reliability you can count on.", imageSrc: "http://img.b2bpic.net/free-photo/optical-fiber-background_23-2149301533.jpg" },
{ id: "m3", value: "2x", title: "Traffic Growth", description: "Boost traffic with AI SEO.", imageSrc: "http://img.b2bpic.net/free-photo/variety-people-multitasking-3d-cartoon-scene_23-2151294501.jpg" },
{ id: "m4", value: "24/7", title: "Global Support", description: "Assistance whenever you need it.", imageSrc: "http://img.b2bpic.net/free-photo/illuminated-mobile-with-icons-blue-tones_1134-416.jpg" },
{ id: "m5", value: "50+", title: "Integrations", description: "Connect your favorite workflow tools.", imageSrc: "http://img.b2bpic.net/free-photo/handsome-african-entrepreneur-dressed-gray-suit-gesturing-holding-his-hands-as-if-interacting-with-something-while-playing-video-games-using-3d-virtual-reality-headset-oculus-glasses_273609-5842.jpg" }
]}
title="Built-In Intelligence"
description="Scale without changing platforms. Track performance and optimize for growth."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSixteen
animationType="depth-3d"
textboxLayout="default"
useInvertedBackground={true}
testimonials={[
{
id: "t1",
name: "Sarah J.",
role: "CEO",
company: "GrowthCo",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/successful-professional-enjoying-work-break_1262-16980.jpg",
},
{
id: "t2",
name: "Michael C.",
role: "CTO",
company: "Innovate",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/confident-african-american-businessman-black-classic-jacket-thinking-about-business-while-holding-hand-chin-isolated-dark-background_613910-6611.jpg",
},
{
id: "t3",
name: "Elena R.",
role: "Creative",
company: "Studio",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/handsome-confident-man_1098-18449.jpg",
},
{
id: "t4",
name: "David K.",
role: "Manager",
company: "Tech",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-handsome-male-with-curly-hair-dressed-jacket-eyeglasses_613910-567.jpg",
},
{
id: "t5",
name: "Alex P.",
role: "Founder",
company: "Agency",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-male-personal-shopper-working_23-2148924139.jpg",
},
]}
kpiItems={[
{
value: "500+",
label: "Projects Launched",
},
{
value: "4.9/5",
label: "Average Rating",
},
{
value: "15m",
label: "Avg Build Time",
},
]}
title="Trusted by Visionaries"
description="See how creators and business owners are scaling their brands with Webild."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSixteen
animationType="depth-3d"
textboxLayout="default"
useInvertedBackground={true}
testimonials={[
{ id: "t1", name: "Sarah J.", role: "CEO", company: "GrowthCo", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/successful-professional-enjoying-work-break_1262-16980.jpg" },
{ id: "t2", name: "Michael C.", role: "CTO", company: "Innovate", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/confident-african-american-businessman-black-classic-jacket-thinking-about-business-while-holding-hand-chin-isolated-dark-background_613910-6611.jpg" },
{ id: "t3", name: "Elena R.", role: "Creative", company: "Studio", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/handsome-confident-man_1098-18449.jpg" },
{ id: "t4", name: "David K.", role: "Manager", company: "Tech", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-handsome-male-with-curly-hair-dressed-jacket-eyeglasses_613910-567.jpg" },
{ id: "t5", name: "Alex P.", role: "Founder", company: "Agency", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-male-personal-shopper-working_23-2148924139.jpg" }
]}
kpiItems={[
{ value: "500+", label: "Projects Launched" },
{ value: "4.9/5", label: "Average Rating" },
{ value: "15m", label: "Avg Build Time" }
]}
title="Trusted by Visionaries"
description="See how creators and business owners are scaling their brands with Webild."
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
useInvertedBackground={false}
faqs={[
{
id: "q1",
title: "What is Webild?",
content: "Webild is an AI-powered website builder that lets you create fully functional, professional websites with a single prompt.",
},
{
id: "q2",
title: "What can I build?",
content: "Everything from portfolios to e-commerce stores, landing pages, or business websites.",
},
{
id: "q3",
title: "Is hosting included?",
content: "Yes, enjoy free built-in hosting with every Webild project.",
},
]}
sideTitle="Still have questions?"
sideDescription="Get help with your Webild projects."
faqsAnimation="slide-up"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
useInvertedBackground={false}
faqs={[
{ id: "q1", title: "What is Webild?", content: "Webild is an AI-powered website builder that lets you create fully functional, professional websites with a single prompt." },
{ id: "q2", title: "What can I build?", content: "Everything from portfolios to e-commerce stores, landing pages, or business websites." },
{ id: "q3", title: "Is hosting included?", content: "Yes, enjoy free built-in hosting with every Webild project." }
]}
sideTitle="Still have questions?"
sideDescription="Get help with your Webild projects."
faqsAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactText
useInvertedBackground={true}
background={{
variant: "sparkles-gradient",
}}
text="Ready to launch your vision? Start building today."
buttons={[
{
text: "Start Building",
href: "#",
},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactText
useInvertedBackground={true}
background={{ variant: "sparkles-gradient" }}
text="Ready to launch your vision? Start building today."
buttons={[{ text: "Start Building", href: "#" }]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseReveal
logoText="Webild"
columns={[
{
title: "Product",
items: [
{
label: "How It Works",
href: "#",
},
{
label: "Features",
href: "#features",
},
{
label: "Templates",
href: "#templates",
},
],
},
{
title: "Company",
items: [
{
label: "Pricing",
href: "#",
},
{
label: "Support",
href: "#",
},
{
label: "Docs",
href: "#",
},
],
},
{
title: "Legal",
items: [
{
label: "Privacy Policy",
href: "#",
},
{
label: "Terms of Service",
href: "#",
},
{
label: "Cookie Policy",
href: "#",
},
],
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseReveal
logoText="Webild"
columns={[
{ title: "Product", items: [{ label: "How It Works", href: "#" }, { label: "Features", href: "#features" }, { label: "Templates", href: "#templates" }] },
{ title: "Company", items: [{ label: "Pricing", href: "#" }, { label: "Support", href: "#" }, { label: "Docs", href: "#" }] },
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }, { label: "Cookie Policy", href: "#" }] }
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}