Merge version_1 into main #1
372
src/app/page.tsx
372
src/app/page.tsx
@@ -19,261 +19,143 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Features",
|
||||
id: "#features",
|
||||
},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "#faq",
|
||||
},
|
||||
{
|
||||
name: "Templates",
|
||||
id: "#templates",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "#pricing",
|
||||
},
|
||||
]}
|
||||
brandName="Webild"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Features", id: "#features" },
|
||||
{ name: "FAQ", id: "#faq" },
|
||||
{ name: "Templates", id: "#templates" },
|
||||
{ name: "Pricing", id: "#pricing" },
|
||||
]}
|
||||
brandName="Webild"
|
||||
button={{ text: "Contact", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
logoText="Webild"
|
||||
description="Generate Websites Instantly, Customize to Perfection. Start with a single prompt and watch Webild turn your idea into a professional site tailored to your needs."
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
text: "View Templates",
|
||||
href: "#templates",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/3d-render-low-poly-network-communications-background-with-plexus-design_1048-14304.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
background={{ variant: "gradient-bars" }}
|
||||
logoText="Webild"
|
||||
description="Generate Websites Instantly, Customize to Perfection. Start with a single prompt and watch Webild turn your idea into a professional site tailored to your needs."
|
||||
buttons={[
|
||||
{ text: "Get Started", href: "#contact" },
|
||||
{ text: "View Templates", href: "#templates" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/3d-render-low-poly-network-communications-background-with-plexus-design_1048-14304.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={false}
|
||||
tag="How It Works"
|
||||
title="Bring Your Brand To Life"
|
||||
description="Customize anything on your site with a single click. Edit text, swap images, and move elements so everything feels made for you."
|
||||
subdescription="Launch your site in seconds with your own domain. Enjoy free built-in hosting and go live without ever leaving Webild."
|
||||
icon={Zap}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/executive-manager-analyzing-marketing-statistics-working-late-night-project-strategy-startup-office-businessman-planning-business-investment-help-increase-company-profit_482257-63809.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={false}
|
||||
tag="How It Works"
|
||||
title="Bring Your Brand To Life"
|
||||
description="Customize anything on your site with a single click. Edit text, swap images, and move elements so everything feels made for you."
|
||||
subdescription="Launch your site in seconds with your own domain. Enjoy free built-in hosting and go live without ever leaving Webild."
|
||||
icon={Zap}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/executive-manager-analyzing-marketing-statistics-working-late-night-project-strategy-startup-office-businessman-planning-business-investment-help-increase-company-profit_482257-63809.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyEight
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "AI Crafting",
|
||||
subtitle: "Get on-brand images instantly.",
|
||||
category: "Creativity",
|
||||
value: "Powered by AI",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Smart SEO",
|
||||
subtitle: "Boost your traffic and reach.",
|
||||
category: "Performance",
|
||||
value: "Data Driven",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Free Hosting",
|
||||
subtitle: "Go live in seconds.",
|
||||
category: "Deployment",
|
||||
value: "Built-in",
|
||||
},
|
||||
]}
|
||||
title="Everything you need to grow online"
|
||||
description="Build, sell, blog, and connect with your audience using our integrated platform tools."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyEight
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ id: "f1", title: "AI Crafting", subtitle: "Get on-brand images instantly.", category: "Creativity", value: "Powered by AI" },
|
||||
{ id: "f2", title: "Smart SEO", subtitle: "Boost your traffic and reach.", category: "Performance", value: "Data Driven" },
|
||||
{ id: "f3", title: "Free Hosting", subtitle: "Go live in seconds.", category: "Deployment", value: "Built-in" },
|
||||
]}
|
||||
title="Everything you need to grow online"
|
||||
description="Build, sell, blog, and connect with your audience using our integrated platform tools."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="templates" data-section="templates">
|
||||
<ProductCardOne
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Web Agency",
|
||||
price: "Custom",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-techno-background-with-male-head-programming-code_1048-5828.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "SaaS Platform",
|
||||
price: "Custom",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-equipped-computer-lab_23-2149241200.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "E-Commerce",
|
||||
price: "Custom",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/global-business-internet-network-connection-iot-internet-things-business-intelligence-concept-busines-global-network-futuristic-technology-background-ai-generative_1258-176791.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Personal Portfolio",
|
||||
price: "Custom",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/african-american-entrepreneur-writing-reports-while-working-late-computer-office_637285-2622.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Restaurant",
|
||||
price: "Custom",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-low-poly-background-with-connecting-lines-dots_1048-14634.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Real Estate",
|
||||
price: "Custom",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/remote-employee-holding-chroma-key-device-analyzing-business-graphics_482257-82851.jpg",
|
||||
},
|
||||
]}
|
||||
title="Browse our collection"
|
||||
description="Start with a template tailored to your specific industry."
|
||||
/>
|
||||
</div>
|
||||
<div id="templates" data-section="templates">
|
||||
<ProductCardOne
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
animationType="blur-reveal"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", name: "Web Agency", price: "Custom", imageSrc: "http://img.b2bpic.net/free-photo/3d-render-techno-background-with-male-head-programming-code_1048-5828.jpg" },
|
||||
{ id: "p2", name: "SaaS Platform", price: "Custom", imageSrc: "http://img.b2bpic.net/free-photo/modern-equipped-computer-lab_23-2149241200.jpg" },
|
||||
{ id: "p3", name: "E-Commerce", price: "Custom", imageSrc: "http://img.b2bpic.net/free-photo/global-business-internet-network-connection-iot-internet-things-business-intelligence-concept-busines-global-network-futuristic-technology-background-ai-generative_1258-176791.jpg" },
|
||||
]}
|
||||
title="Browse our collection"
|
||||
description="Start with a template tailored to your specific industry."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardTwo
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "100%",
|
||||
description: "Uptime Guaranteed",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "5M+",
|
||||
description: "Monthly Visitors Supported",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "24/7",
|
||||
description: "Global Support",
|
||||
},
|
||||
]}
|
||||
title="Scale Without Changing Platforms"
|
||||
description="Powerful metrics and insights to help you grow."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardTwo
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{ id: "m1", value: "100%", description: "Uptime Guaranteed" },
|
||||
{ id: "m2", value: "5M+", description: "Monthly Visitors Supported" },
|
||||
{ id: "m3", value: "24/7", description: "Global Support" },
|
||||
]}
|
||||
title="Scale Without Changing Platforms"
|
||||
description="Powerful metrics and insights to help you grow."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "What is Webild?",
|
||||
content: "An AI-powered builder that lets you create websites with a single prompt.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Can I edit everything?",
|
||||
content: "Yes, customize layouts, images, and content instantly.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "What can I build?",
|
||||
content: "Portfolios, stores, blogs, and business sites.",
|
||||
},
|
||||
]}
|
||||
sideTitle="Frequently Asked Questions"
|
||||
sideDescription="Still have questions about Webild?"
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "q1", title: "What is Webild?", content: "An AI-powered builder that lets you create websites with a single prompt." },
|
||||
{ id: "q2", title: "Can I edit everything?", content: "Yes, customize layouts, images, and content instantly." },
|
||||
{ id: "q3", title: "What can I build?", content: "Portfolios, stores, blogs, and business sites." },
|
||||
]}
|
||||
sideTitle="Frequently Asked Questions"
|
||||
sideDescription="Still have questions about Webild?"
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
tag="Launch Now"
|
||||
title="Ready to get started?"
|
||||
description="Start with a single prompt and watch Webild turn your idea into a professional site."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
tag="Launch Now"
|
||||
title="Ready to get started?"
|
||||
description="Start with a single prompt and watch Webild turn your idea into a professional site."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="Webild"
|
||||
columns={[
|
||||
{
|
||||
title: "Product",
|
||||
items: [
|
||||
{
|
||||
label: "Features",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
label: "Pricing",
|
||||
href: "#pricing",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Support",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="Webild"
|
||||
columns={[
|
||||
{
|
||||
title: "Product", items: [
|
||||
{ label: "Features", href: "#features" },
|
||||
{ label: "Pricing", href: "#pricing" },
|
||||
],
|
||||
},
|
||||
{ title: "Company", items: [{ label: "About", href: "#" }, { label: "Support", href: "#" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] },
|
||||
]
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user