Merge version_1 into main #2

Merged
bender merged 1 commits from version_1 into main 2026-05-01 17:48:19 +00:00

View File

@@ -28,424 +28,147 @@ export default function LandingPage() {
headingFontWeight="light"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{
name: "Home",
id: "#hero",
},
{
name: "Features",
id: "#features",
},
{
name: "Products",
id: "#products",
},
{
name: "Pricing",
id: "#pricing",
},
]}
brandName="Webild"
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{ name: "Home", id: "#hero" },
{ name: "Features", id: "#features" },
{ name: "Products", id: "#products" },
{ name: "Pricing", id: "#pricing" },
]}
brandName="Webild"
button={{ text: "Get Started" }}
/>
</div>
<div id="hero" data-section="hero">
<HeroOverlayTestimonial
title="Build Websites via Vibe Coding"
description="Transform your ideas into fully functional, high-performance websites in seconds. Our platform combines intelligent AI code generation with seamless one-click deployment."
testimonials={[
{
name: "Sarah Chen",
handle: "@schen",
testimonial: "Webild changed how I build. It's truly like coding with vibes.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/smart-microchip-technology-background-gradient-gold_53876-124642.jpg?_wi=1",
imageAlt: "modern SaaS dashboard dark theme",
},
{
name: "Marcus Thorne",
handle: "@mthorne",
testimonial: "Deploying apps used to be a headache. Now it's instant.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-glowing-background_23-2151907693.jpg?_wi=1",
imageAlt: "modern SaaS dashboard dark theme",
},
{
name: "Elena Rodriguez",
handle: "@erod",
testimonial: "Incredible speed and quality of code. Highly recommend.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/computer-servers-row-network-generated-by-ai_188544-27795.jpg?_wi=1",
imageAlt: "modern SaaS dashboard dark theme",
},
{
name: "David Kim",
handle: "@dkim",
testimonial: "The AI understands complex design requirements effortlessly.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/call-center-agents-track-shipments-office-using-ai-chatbot-help_482257-126758.jpg?_wi=1",
imageAlt: "modern SaaS dashboard dark theme",
},
{
name: "Alex Smith",
handle: "@asmith",
testimonial: "A complete game changer for my agency workflow.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-man-working-modern-laptop-blurred-photo_185193-110574.jpg?_wi=1",
imageAlt: "modern SaaS dashboard dark theme",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/smart-microchip-technology-background-gradient-gold_53876-124642.jpg?_wi=2"
showDimOverlay={true}
showBlur={true}
avatars={[
{
src: "http://img.b2bpic.net/free-photo/people-working-as-team-company_23-2149136872.jpg",
alt: "User 1",
},
{
src: "http://img.b2bpic.net/free-photo/positive-guy-glasses-holding-tablet-looking_74855-3039.jpg",
alt: "User 2",
},
{
src: "http://img.b2bpic.net/free-photo/business-lady-super-excited-pretty-young-girl-office-outfit-holding-computer_140725-161852.jpg",
alt: "User 3",
},
{
src: "http://img.b2bpic.net/free-photo/it-female-technician-uses-coding-language-computer-agency_482257-126200.jpg",
alt: "User 4",
},
{
src: "http://img.b2bpic.net/free-photo/senior-woman-patient-asking-her-physician-about-new-treatment-plan_482257-117646.jpg",
alt: "User 5",
},
]}
avatarText="Trusted by 10,000+ creators"
/>
</div>
<div id="hero" data-section="hero">
<HeroOverlayTestimonial
title="Build Websites via Vibe Coding"
description="Transform your ideas into fully functional, high-performance websites in seconds. Our platform combines intelligent AI code generation with seamless one-click deployment."
testimonials={[
{ name: "Sarah Chen", handle: "@schen", testimonial: "Webild changed how I build. It's truly like coding with vibes.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smart-microchip-technology-background-gradient-gold_53876-124642.jpg", imageAlt: "modern SaaS dashboard dark theme" },
{ name: "Marcus Thorne", handle: "@mthorne", testimonial: "Deploying apps used to be a headache. Now it's instant.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-glowing-background_23-2151907693.jpg", imageAlt: "modern SaaS dashboard dark theme" },
{ name: "Elena Rodriguez", handle: "@erod", testimonial: "Incredible speed and quality of code. Highly recommend.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/computer-servers-row-network-generated-by-ai_188544-27795.jpg", imageAlt: "modern SaaS dashboard dark theme" },
{ name: "David Kim", handle: "@dkim", testimonial: "The AI understands complex design requirements effortlessly.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/call-center-agents-track-shipments-office-using-ai-chatbot-help_482257-126758.jpg", imageAlt: "modern SaaS dashboard dark theme" },
{ name: "Alex Smith", handle: "@asmith", testimonial: "A complete game changer for my agency workflow.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-man-working-modern-laptop-blurred-photo_185193-110574.jpg", imageAlt: "modern SaaS dashboard dark theme" },
]}
imageSrc="http://img.b2bpic.net/free-photo/smart-microchip-technology-background-gradient-gold_53876-124642.jpg"
showDimOverlay={true}
showBlur={true}
avatars={[
{ src: "http://img.b2bpic.net/free-photo/people-working-as-team-company_23-2149136872.jpg", alt: "User 1" },
{ src: "http://img.b2bpic.net/free-photo/positive-guy-glasses-holding-tablet-looking_74855-3039.jpg", alt: "User 2" },
{ src: "http://img.b2bpic.net/free-photo/business-lady-super-excited-pretty-young-girl-office-outfit-holding-computer_140725-161852.jpg", alt: "User 3" },
{ src: "http://img.b2bpic.net/free-photo/it-female-technician-uses-coding-language-computer-agency_482257-126200.jpg", alt: "User 4" },
{ src: "http://img.b2bpic.net/free-photo/senior-woman-patient-asking-her-physician-about-new-treatment-plan_482257-117646.jpg", alt: "User 5" },
]}
avatarText="Trusted by 10,000+ creators"
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyFive
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={true}
features={[
{
title: "AI-Driven Coding",
description: "Generate high-quality, production-ready code with just a simple natural language prompt.",
icon: Zap,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-glowing-background_23-2151907693.jpg?_wi=2",
imageAlt: "Abstract 3D tech shapes",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/data-center-computer-systems-controlling-network-resources-closeup_482257-126065.jpg",
imageAlt: "AI code structure",
},
],
imageSrc: "http://img.b2bpic.net/free-photo/smart-microchip-technology-background-gradient-gold_53876-124642.jpg?_wi=3",
imageAlt: "abstract 3D tech shapes gold",
},
{
title: "Auto-Scaling Deploy",
description: "Global deployment network that scales automatically as your site traffic grows.",
icon: Shield,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-photo/computer-servers-row-network-generated-by-ai_188544-27795.jpg?_wi=2",
imageAlt: "Cloud server room",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/technology-background-texture_23-2148105487.jpg",
imageAlt: "Data connections",
},
],
imageSrc: "http://img.b2bpic.net/free-photo/call-center-agents-track-shipments-office-using-ai-chatbot-help_482257-126758.jpg?_wi=2",
imageAlt: "abstract 3D tech shapes gold",
},
{
title: "Instant Deployment",
description: "One-click publishing to lightning-fast edge infrastructure with automatic SSL.",
icon: Award,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-photo/young-man-working-modern-laptop-blurred-photo_185193-110574.jpg?_wi=2",
imageAlt: "Deployment concept",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/robot-defending-against-virus-attack_1048-12079.jpg",
imageAlt: "Pipeline flow",
},
],
imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345417.jpg?_wi=1",
imageAlt: "abstract 3D tech shapes gold",
},
]}
title="Engineered for Velocity"
description="Everything you need to go from idea to live deployment."
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyFive
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={true}
features={[
{ title: "AI-Driven Coding", description: "Generate high-quality, production-ready code with just a simple natural language prompt.", icon: Zap, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-glowing-background_23-2151907693.jpg", imageAlt: "Abstract 3D tech shapes" }, { imageSrc: "http://img.b2bpic.net/free-photo/data-center-computer-systems-controlling-network-resources-closeup_482257-126065.jpg", imageAlt: "AI code structure" }] },
{ title: "Auto-Scaling Deploy", description: "Global deployment network that scales automatically as your site traffic grows.", icon: Shield, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/computer-servers-row-network-generated-by-ai_188544-27795.jpg", imageAlt: "Cloud server room" }, { imageSrc: "http://img.b2bpic.net/free-photo/technology-background-texture_23-2148105487.jpg", imageAlt: "Data connections" }] },
{ title: "Instant Deployment", description: "One-click publishing to lightning-fast edge infrastructure with automatic SSL.", icon: Award, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/young-man-working-modern-laptop-blurred-photo_185193-110574.jpg", imageAlt: "Deployment concept" }, { imageSrc: "http://img.b2bpic.net/free-photo/robot-defending-against-virus-attack_1048-12079.jpg", imageAlt: "Pipeline flow" }] }
]}
title="Engineered for Velocity"
description="Everything you need to go from idea to live deployment."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardOne
animationType="depth-3d"
textboxLayout="split"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
metrics={[
{
id: "m1",
value: "100K+",
title: "Sites Built",
description: "Empowering creators globally",
icon: Globe,
},
{
id: "m2",
value: "20ms",
title: "Edge Latency",
description: "Lightning-fast responses",
icon: Zap,
},
{
id: "m3",
value: "99.99%",
title: "Uptime",
description: "Always reliable service",
icon: Shield,
},
]}
title="Platform Excellence"
description="Measured results from our high-velocity development ecosystem."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardOne
animationType="depth-3d"
textboxLayout="split"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
metrics={[
{ id: "m1", value: "100K+", title: "Sites Built", description: "Empowering creators globally", icon: Globe },
{ id: "m2", value: "20ms", title: "Edge Latency", description: "Lightning-fast responses", icon: Zap },
{ id: "m3", value: "99.99%", title: "Uptime", description: "Always reliable service", icon: Shield },
]}
title="Platform Excellence"
description="Measured results from our high-velocity development ecosystem."
/>
</div>
<div id="products" data-section="products">
<ProductCardFour
textboxLayout="split"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={true}
products={[
{
id: "p1",
name: "Custom Editor",
price: "Included",
variant: "Standard",
imageSrc: "http://img.b2bpic.net/free-photo/young-man-working-modern-laptop-blurred-photo_185193-110574.jpg?_wi=3",
},
{
id: "p2",
name: "User CMS",
price: "Included",
variant: "Pro",
imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345417.jpg?_wi=2",
},
{
id: "p3",
name: "Analytics Dashboard",
price: "$19/mo",
variant: "Plus",
imageSrc: "http://img.b2bpic.net/free-photo/empty-high-end-workspace-with-advanced-tech-tools-enhancing-productivity_482257-119752.jpg",
},
{
id: "p4",
name: "Component Lab",
price: "$29/mo",
variant: "Lab",
imageSrc: "http://img.b2bpic.net/free-photo/map-kansas-gold-glitter-map-dark-background_559531-11083.jpg",
},
{
id: "p5",
name: "Live Publisher",
price: "Free",
variant: "Base",
imageSrc: "http://img.b2bpic.net/free-vector/illustration-web-design-template_53876-37651.jpg",
},
{
id: "p6",
name: "Template Store",
price: "Premium",
variant: "Store",
imageSrc: "http://img.b2bpic.net/free-vector/twitter-interface_23-2148582530.jpg",
},
]}
title="Core Modules"
description="Advanced toolsets for every stage of your website lifecycle."
/>
</div>
<div id="products" data-section="products">
<ProductCardFour
animationType="slide-up"
textboxLayout="split"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={true}
products={[
{ id: "p1", name: "Custom Editor", price: "Included", variant: "Standard", imageSrc: "http://img.b2bpic.net/free-photo/young-man-working-modern-laptop-blurred-photo_185193-110574.jpg" },
{ id: "p2", name: "User CMS", price: "Included", variant: "Pro", imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345417.jpg" },
{ id: "p3", name: "Analytics Dashboard", price: "$19/mo", variant: "Plus", imageSrc: "http://img.b2bpic.net/free-photo/empty-high-end-workspace-with-advanced-tech-tools-enhancing-productivity_482257-119752.jpg" },
{ id: "p4", name: "Component Lab", price: "$29/mo", variant: "Lab", imageSrc: "http://img.b2bpic.net/free-photo/map-kansas-gold-glitter-map-dark-background_559531-11083.jpg" },
{ id: "p5", name: "Live Publisher", price: "Free", variant: "Base", imageSrc: "http://img.b2bpic.net/free-vector/illustration-web-design-template_53876-37651.jpg" },
{ id: "p6", name: "Template Store", price: "Premium", variant: "Store", imageSrc: "http://img.b2bpic.net/free-vector/twitter-interface_23-2148582530.jpg" },
]}
title="Core Modules"
description="Advanced toolsets for every stage of your website lifecycle."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardOne
animationType="scale-rotate"
textboxLayout="split"
gridVariant="asymmetric-60-wide-40-narrow"
useInvertedBackground={false}
testimonials={[
{
id: "t1",
name: "Sarah Johnson",
role: "CEO",
company: "TechCorp",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/computer-scientist-server-farm-ensuring-compliance-with-industry-standards_482257-123806.jpg",
},
{
id: "t2",
name: "Michael Chen",
role: "CTO",
company: "InnovateLab",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/smiling-girl-is-working-laptop-internet-cafe_231208-4283.jpg",
},
{
id: "t3",
name: "Emily Rodriguez",
role: "Marketing Director",
company: "GrowthCo",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-writing-post-it_23-2149362886.jpg",
},
{
id: "t4",
name: "David Kim",
role: "Product Manager",
company: "StartupXYZ",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/crazy-businessman-worried-expression_1194-3805.jpg",
},
{
id: "t5",
name: "Alex Smith",
role: "Designer",
company: "CreativeFlow",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/male-graphic-designer-using-digital-tablet_1170-1092.jpg",
},
]}
title="Proven by Innovators"
description="Trusted by fast-growing startups and established industry leaders alike."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardOne
animationType="scale-rotate"
textboxLayout="split"
gridVariant="asymmetric-60-wide-40-narrow"
useInvertedBackground={false}
testimonials={[
{ id: "t1", name: "Sarah Johnson", role: "CEO", company: "TechCorp", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/computer-scientist-server-farm-ensuring-compliance-with-industry-standards_482257-123806.jpg" },
{ id: "t2", name: "Michael Chen", role: "CTO", company: "InnovateLab", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiling-girl-is-working-laptop-internet-cafe_231208-4283.jpg" },
{ id: "t3", name: "Emily Rodriguez", role: "Marketing Director", company: "GrowthCo", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-writing-post-it_23-2149362886.jpg" },
{ id: "t4", name: "David Kim", role: "Product Manager", company: "StartupXYZ", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/crazy-businessman-worried-expression_1194-3805.jpg" },
{ id: "t5", name: "Alex Smith", role: "Designer", company: "CreativeFlow", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/male-graphic-designer-using-digital-tablet_1170-1092.jpg" },
]}
title="Proven by Innovators"
description="Trusted by fast-growing startups and established industry leaders alike."
/>
</div>
<div id="socialProof" data-section="socialProof">
<SocialProofOne
textboxLayout="default"
useInvertedBackground={true}
names={[
"Microsoft",
"Google",
"Vercel",
"Stripe",
"Auth0",
"Algolia",
"Figma",
]}
title="Supporting Growth Globally"
description="Our ecosystem partners are leaders in modern cloud innovation."
/>
</div>
<div id="socialProof" data-section="socialProof">
<SocialProofOne
textboxLayout="default"
useInvertedBackground={true}
names={["Microsoft", "Google", "Vercel", "Stripe", "Auth0", "Algolia", "Figma"]}
title="Supporting Growth Globally"
description="Our ecosystem partners are leaders in modern cloud innovation."
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
useInvertedBackground={false}
faqs={[
{
id: "f1",
title: "How does vibe coding work?",
content: "Our platform translates natural language intent into functional, clean code using advanced LLMs specifically trained for web structures.",
},
{
id: "f2",
title: "Can I deploy outside Webild?",
content: "Yes, export your code as a standard repository and deploy to any hosting provider instantly.",
},
{
id: "f3",
title: "Is there a limit to sites?",
content: "We offer tiered plans that scale seamlessly from a single portfolio site to large enterprise e-commerce platforms.",
},
]}
sideTitle="Frequently Asked"
sideDescription="Get clear answers to the most common questions about our vibe-driven platform."
faqsAnimation="blur-reveal"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
useInvertedBackground={false}
faqs={[
{ id: "f1", title: "How does vibe coding work?", content: "Our platform translates natural language intent into functional, clean code using advanced LLMs specifically trained for web structures." },
{ id: "f2", title: "Can I deploy outside Webild?", content: "Yes, export your code as a standard repository and deploy to any hosting provider instantly." },
{ id: "f3", title: "Is there a limit to sites?", content: "We offer tiered plans that scale seamlessly from a single portfolio site to large enterprise e-commerce platforms." },
]}
sideTitle="Frequently Asked"
sideDescription="Get clear answers to the most common questions about our vibe-driven platform."
faqsAnimation="blur-reveal"
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
columns={[
{
items: [
{
label: "Product",
href: "#",
},
{
label: "Features",
href: "#",
},
{
label: "Pricing",
href: "#",
},
],
},
{
items: [
{
label: "Company",
href: "#",
},
{
label: "Careers",
href: "#",
},
{
label: "Contact",
href: "#",
},
],
},
{
items: [
{
label: "Docs",
href: "#",
},
{
label: "API",
href: "#",
},
{
label: "Support",
href: "#",
},
],
},
{
items: [
{
label: "Privacy",
href: "#",
},
{
label: "Terms",
href: "#",
},
{
label: "Legal",
href: "#",
},
],
},
]}
logoText="Webild"
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
logoText="Webild"
columns={[
{ items: [{ label: "Product", href: "#" }, { label: "Features", href: "#" }, { label: "Pricing", href: "#" }] },
{ items: [{ label: "Company", href: "#" }, { label: "Careers", href: "#" }, { label: "Contact", href: "#" }] },
{ items: [{ label: "Docs", href: "#" }, { label: "API", href: "#" }, { label: "Support", href: "#" }] },
{ items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }, { label: "Legal", href: "#" }] },
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);