Merge version_1 into main #1
434
src/app/page.tsx
434
src/app/page.tsx
@@ -29,320 +29,144 @@ export default function LandingPage() {
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Features",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "pricing",
|
||||
},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "faq",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Webild"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Webild"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Idea to website in seconds"
|
||||
description="Generate Websites Instantly, Customize to Perfection. No coding required, just your vision brought to life."
|
||||
tag="Powered by AI"
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/desktop-pc-wooden-desk-showcases-infographics-client-reach-data_482257-126353.jpg",
|
||||
imageAlt: "Dashboard Preview",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/conceptual-3d-illustration-basketball-player-dunking-motion-design_183364-124102.jpg",
|
||||
imageAlt: "Builder Preview",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-property-engineer-searching-layout-details-laptop-office_482257-130146.jpg",
|
||||
imageAlt: "Woman property engineer searching layout details on laptop in the office",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-hand-holding-futuristic-screen_23-2149126945.jpg",
|
||||
imageAlt: "Close up hand holding futuristic screen",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/corporate-business-line-graph-report_53876-120736.jpg",
|
||||
imageAlt: "Corporate business line graph report",
|
||||
},
|
||||
]}
|
||||
mediaAnimation="blur-reveal"
|
||||
rating={5}
|
||||
ratingText="Loved by 10,000+ creators"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Idea to website in seconds"
|
||||
description="Generate Websites Instantly, Customize to Perfection. No coding required, just your vision brought to life."
|
||||
tag="Powered by AI"
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/desktop-pc-wooden-desk-showcases-infographics-client-reach-data_482257-126353.jpg", imageAlt: "Dashboard Preview" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/conceptual-3d-illustration-basketball-player-dunking-motion-design_183364-124102.jpg", imageAlt: "Builder Preview" }
|
||||
]}
|
||||
mediaAnimation="blur-reveal"
|
||||
rating={5}
|
||||
ratingText="Loved by 10,000+ creators"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={false}
|
||||
tag="Our Mission"
|
||||
title="Democratizing the web"
|
||||
description="We believe everyone deserves a professional online presence without the barriers of technical complexity."
|
||||
subdescription="Our AI-driven platform translates your ideas into fully responsive sites instantly."
|
||||
icon={Zap}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/office-desk-with-computer-digital-tablet-mobile-phone_1252-898.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={false}
|
||||
tag="Our Mission"
|
||||
title="Democratizing the web"
|
||||
description="We believe everyone deserves a professional online presence without the barriers of technical complexity."
|
||||
subdescription="Our AI-driven platform translates your ideas into fully responsive sites instantly."
|
||||
icon={Zap}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/office-desk-with-computer-digital-tablet-mobile-phone_1252-898.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Instant Generation",
|
||||
description: "Get a complete site layout in seconds.",
|
||||
tag: "Speed",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/speed-meter-extreme-scale-fast_53876-120604.jpg",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Total Customization",
|
||||
description: "Tweak every pixel to your liking.",
|
||||
tag: "Flexibility",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-geometric-shapes-wallpaper_23-2150244323.jpg",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Secure & Stable",
|
||||
description: "Built for reliability and scale.",
|
||||
tag: "Reliability",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cybersecurity-shield-with-padlock_23-2151998478.jpg",
|
||||
},
|
||||
]}
|
||||
title="Why choose Webild?"
|
||||
description="Everything you need to launch a successful website."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
animationType="blur-reveal"
|
||||
features={[
|
||||
{ id: "f1", title: "Instant Generation", description: "Get a complete site layout in seconds.", tag: "Speed", imageSrc: "http://img.b2bpic.net/free-photo/speed-meter-extreme-scale-fast_53876-120604.jpg" },
|
||||
{ id: "f2", title: "Total Customization", description: "Tweak every pixel to your liking.", tag: "Flexibility", imageSrc: "http://img.b2bpic.net/free-photo/abstract-geometric-shapes-wallpaper_23-2150244323.jpg" },
|
||||
{ id: "f3", title: "Secure & Stable", description: "Built for reliability and scale.", tag: "Reliability", imageSrc: "http://img.b2bpic.net/free-photo/cybersecurity-shield-with-padlock_23-2151998478.jpg" }
|
||||
]}
|
||||
title="Why choose Webild?"
|
||||
description="Everything you need to launch a successful website."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="product" data-section="product">
|
||||
<ProductCardFour
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Starter Suite",
|
||||
price: "$29",
|
||||
variant: "Basic",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/minimal-style-device-screen_23-2151913283.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Pro Pack",
|
||||
price: "$79",
|
||||
variant: "Professional",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/economic-analyst-uses-white-screen-layout-tablet-office_482257-92264.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Global Reach",
|
||||
price: "$129",
|
||||
variant: "Enterprise",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/it-expert-data-center-holding-tablet-replacing-storage-mainframes-components_482257-115380.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Cloud Sync",
|
||||
price: "$49",
|
||||
variant: "Storage",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/finger-interface-laptop-hipster-cropped_1134-770.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Rapid Scale",
|
||||
price: "$199",
|
||||
variant: "Scaling",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-3d-space-rocket-model_23-2151113303.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Insight Pro",
|
||||
price: "$99",
|
||||
variant: "Analytics",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/chart-statistics-right-side-with-white-background_187299-39802.jpg",
|
||||
},
|
||||
]}
|
||||
title="Our Solutions"
|
||||
description="Pick the right tool for your specific business requirements."
|
||||
/>
|
||||
</div>
|
||||
<div id="product" data-section="product">
|
||||
<ProductCardFour
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
animationType="blur-reveal"
|
||||
products={[
|
||||
{ id: "p1", name: "Starter Suite", price: "$29", variant: "Basic", imageSrc: "http://img.b2bpic.net/free-photo/minimal-style-device-screen_23-2151913283.jpg" },
|
||||
{ id: "p2", name: "Pro Pack", price: "$79", variant: "Professional", imageSrc: "http://img.b2bpic.net/free-photo/economic-analyst-uses-white-screen-layout-tablet-office_482257-92264.jpg" },
|
||||
{ id: "p3", name: "Global Reach", price: "$129", variant: "Enterprise", imageSrc: "http://img.b2bpic.net/free-photo/it-expert-data-center-holding-tablet-replacing-storage-mainframes-components_482257-115380.jpg" },
|
||||
{ id: "p4", name: "Cloud Sync", price: "$49", variant: "Storage", imageSrc: "http://img.b2bpic.net/free-photo/finger-interface-laptop-hipster-cropped_1134-770.jpg" },
|
||||
{ id: "p5", name: "Rapid Scale", price: "$199", variant: "Scaling", imageSrc: "http://img.b2bpic.net/free-photo/view-3d-space-rocket-model_23-2151113303.jpg" },
|
||||
{ id: "p6", name: "Insight Pro", price: "$99", variant: "Analytics", imageSrc: "http://img.b2bpic.net/free-photo/chart-statistics-right-side-with-white-background_187299-39802.jpg" }
|
||||
]}
|
||||
title="Our Solutions"
|
||||
description="Pick the right tool for your specific business requirements."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardTwo
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "basic",
|
||||
badge: "Launch",
|
||||
price: "$0",
|
||||
subtitle: "Perfect for personal projects.",
|
||||
features: [
|
||||
"1 AI Site",
|
||||
"Basic Hosting",
|
||||
"Standard Support",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Get Started",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "pro",
|
||||
badge: "Growth",
|
||||
price: "$49",
|
||||
subtitle: "For serious business owners.",
|
||||
features: [
|
||||
"5 AI Sites",
|
||||
"Custom Domain",
|
||||
"Priority Support",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Start Pro",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "ent",
|
||||
badge: "Scale",
|
||||
price: "$149",
|
||||
subtitle: "Unlimited scale & features.",
|
||||
features: [
|
||||
"Unlimited Sites",
|
||||
"Custom Integration",
|
||||
"Dedicated Manager",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Talk to Sales",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Simple Pricing"
|
||||
description="Choose the perfect plan to accelerate your business growth."
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardTwo
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="blur-reveal"
|
||||
plans={[
|
||||
{ id: "basic", badge: "Launch", price: "$0", subtitle: "Perfect for personal projects.", features: ["1 AI Site", "Basic Hosting", "Standard Support"], buttons: [{ text: "Get Started", href: "#" }] },
|
||||
{ id: "pro", badge: "Growth", price: "$49", subtitle: "For serious business owners.", features: ["5 AI Sites", "Custom Domain", "Priority Support"], buttons: [{ text: "Start Pro", href: "#" }] },
|
||||
{ id: "ent", badge: "Scale", price: "$149", subtitle: "Unlimited scale & features.", features: ["Unlimited Sites", "Custom Integration", "Dedicated Manager"], buttons: [{ text: "Talk to Sales", href: "#" }] }
|
||||
]}
|
||||
title="Simple Pricing"
|
||||
description="Choose the perfect plan to accelerate your business growth."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwelve
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Alex R.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0egkrr",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Sarah P.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=79spxw",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Mark L.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=f0yuzw",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Elena K.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=093igv",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "James W.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hfitr2",
|
||||
},
|
||||
]}
|
||||
cardTitle="Client Stories"
|
||||
cardTag="Testimonials"
|
||||
cardAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwelve
|
||||
useInvertedBackground={false}
|
||||
cardAnimation="blur-reveal"
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Alex R.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0egkrr" },
|
||||
{ id: "t2", name: "Sarah P.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=79spxw" },
|
||||
{ id: "t3", name: "Mark L.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=f0yuzw" },
|
||||
{ id: "t4", name: "Elena K.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=093igv" },
|
||||
{ id: "t5", name: "James W.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hfitr2" }
|
||||
]}
|
||||
cardTitle="Client Stories"
|
||||
cardTag="Testimonials"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "How long does generation take?",
|
||||
content: "Our AI builds your complete site structure in under 30 seconds.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Can I edit after generation?",
|
||||
content: "Absolutely! Our intuitive editor lets you modify everything.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Is hosting included?",
|
||||
content: "Yes, we provide reliable, scalable hosting with every plan.",
|
||||
},
|
||||
]}
|
||||
sideTitle="Frequently Asked"
|
||||
sideDescription="Everything you need to know about starting your project."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqsAnimation="blur-reveal"
|
||||
faqs={[
|
||||
{ id: "q1", title: "How long does generation take?", content: "Our AI builds your complete site structure in under 30 seconds." },
|
||||
{ id: "q2", title: "Can I edit after generation?", content: "Absolutely! Our intuitive editor lets you modify everything." },
|
||||
{ id: "q3", title: "Is hosting included?", content: "Yes, we provide reliable, scalable hosting with every plan." }
|
||||
]}
|
||||
sideTitle="Frequently Asked"
|
||||
sideDescription="Everything you need to know about starting your project."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
tag="Get in touch"
|
||||
title="Ready to launch?"
|
||||
description="Start your journey today and build something amazing."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Support",
|
||||
href: "mailto:hello@webild.io",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
tag="Get in touch"
|
||||
title="Ready to launch?"
|
||||
description="Start your journey today and build something amazing."
|
||||
buttons={[{ text: "Contact Support", href: "mailto:hello@webild.io" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Webild"
|
||||
leftLink={{
|
||||
text: "Privacy Policy",
|
||||
href: "#",
|
||||
}}
|
||||
rightLink={{
|
||||
text: "Terms of Service",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Webild"
|
||||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||||
rightLink={{ text: "Terms of Service", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user