Merge version_1 into main #1
461
src/app/page.tsx
461
src/app/page.tsx
@@ -2,346 +2,161 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FaqBase from '@/components/sections/faq/FaqBase';
|
||||
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
|
||||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||||
import { Shield, TrendingUp, Zap } from "lucide-react";
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
||||
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
|
||||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||||
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
||||
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||||
import { Shield, TrendingUp, Zap } from "lucide-react";
|
||||
import FaqBase from '@/components/sections/faq/FaqBase';
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="bounce-effect"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="pill"
|
||||
defaultButtonVariant="bounce-effect"
|
||||
defaultTextAnimation="background-highlight"
|
||||
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: "Pricing",
|
||||
id: "#pricing",
|
||||
},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "#faq",
|
||||
},
|
||||
]}
|
||||
brandName="Webild"
|
||||
button={{
|
||||
text: "Log in",
|
||||
href: "#contact",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "FAQ", id: "faq" }
|
||||
]}
|
||||
brandName="Webild"
|
||||
button={{ text: "Log in", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
title="Turn Your Idea Into a Professional Website In Minutes"
|
||||
description="Generate Websites Instantly, Customize to Perfection. No coding required, just your ideas brought to life."
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169856.jpg",
|
||||
imageAlt: "Idea Generation Interface",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smart-car-navigator-interface-windshield-hologram_53876-103040.jpg",
|
||||
imageAlt: "Digital Process",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-laptop-keyboard-colorful-neon-illumination-backlit-keyboard_169016-29668.jpg",
|
||||
imageAlt: "Professional Studio",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-digital-tablet-with-search-job-screen-male-hands_169016-38637.jpg",
|
||||
imageAlt: "Responsive Display",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/building-construction-worker-site-with-architect_23-2149124313.jpg",
|
||||
imageAlt: "Instant Launch",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-low-poly-with-connecting-lines-dots_1048-7721.jpg",
|
||||
imageAlt: "Data Network",
|
||||
},
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
title="Turn Your Idea Into a Professional Website In Minutes"
|
||||
description="Generate Websites Instantly, Customize to Perfection. No coding required, just your ideas brought to life."
|
||||
buttons={[{ text: "Get Started", href: "#contact" }]}
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169856.jpg", imageAlt: "Idea Generation Interface" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/smart-car-navigator-interface-windshield-hologram_53876-103040.jpg", imageAlt: "Digital Process" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-laptop-keyboard-colorful-neon-illumination-backlit-keyboard_169016-29668.jpg", imageAlt: "Professional Studio" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/top-view-digital-tablet-with-search-job-screen-male-hands_169016-38637.jpg", imageAlt: "Responsive Display" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/building-construction-worker-site-with-architect_23-2149124313.jpg", imageAlt: "Instant Launch" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/abstract-low-poly-with-connecting-lines-dots_1048-7721.jpg", imageAlt: "Data Network" }
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardNineteen
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
tag: "Speed",
|
||||
title: "Build in Minutes",
|
||||
subtitle: "Ultra-fast generation",
|
||||
description: "Start with a single prompt and watch Webild turn your idea into a production-grade site.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/graph-growth-success-strategy-marketing-computer-concept_53876-47081.jpg",
|
||||
},
|
||||
{
|
||||
tag: "AI",
|
||||
title: "Smart Customization",
|
||||
subtitle: "Tailored to you",
|
||||
description: "Edit text, swap images, and move elements with a single click — everything feels made for you.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-using-digital-tablet-holding-stylus-pen-working-office_169016-48707.jpg",
|
||||
},
|
||||
{
|
||||
tag: "Cloud",
|
||||
title: "Instant Deployment",
|
||||
subtitle: "Ready to launch",
|
||||
description: "Launch your site in seconds with free built-in hosting and your own custom domain.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/website-hosting-concept-with-cloud_23-2149406772.jpg",
|
||||
},
|
||||
]}
|
||||
title="Everything you need to grow online"
|
||||
description="Powerful tools designed to build, manage, and scale your digital presence instantly."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardNineteen
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
title="Everything you need to grow online"
|
||||
description="Powerful tools designed to build, manage, and scale your digital presence instantly."
|
||||
features={[
|
||||
{ tag: "Speed", title: "Build in Minutes", subtitle: "Ultra-fast generation", description: "Start with a single prompt and watch Webild turn your idea into a production-grade site.", imageSrc: "http://img.b2bpic.net/free-photo/graph-growth-success-strategy-marketing-computer-concept_53876-47081.jpg" },
|
||||
{ tag: "AI", title: "Smart Customization", subtitle: "Tailored to you", description: "Edit text, swap images, and move elements with a single click — everything feels made for you.", imageSrc: "http://img.b2bpic.net/free-photo/man-using-digital-tablet-holding-stylus-pen-working-office_169016-48707.jpg" },
|
||||
{ tag: "Cloud", title: "Instant Deployment", subtitle: "Ready to launch", description: "Launch your site in seconds with free built-in hosting and your own custom domain.", imageSrc: "http://img.b2bpic.net/free-photo/website-hosting-concept-with-cloud_23-2149406772.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="asymmetric-60-wide-40-narrow"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "HVAC Pro",
|
||||
price: "$15/mo",
|
||||
variant: "Template",
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/flat-design-dance-studio-landing-page-template_23-2149483751.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Web Agency Studio",
|
||||
price: "$25/mo",
|
||||
variant: "Template",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/album-release-website-design_53876-67220.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Retail Store",
|
||||
price: "$20/mo",
|
||||
variant: "Template",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blank-paper-marble-texture-against-white-background_23-2148061589.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Portfolio Elite",
|
||||
price: "$10/mo",
|
||||
variant: "Template",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/beautiful-landing-page_52683-32841.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Business Coach",
|
||||
price: "$18/mo",
|
||||
variant: "Template",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/business-landing-page-with-photo_23-2148248050.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "AI Agency",
|
||||
price: "$30/mo",
|
||||
variant: "Template",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-graph-computer-illustration_23-2151884868.jpg",
|
||||
},
|
||||
]}
|
||||
title="Browse Our Template Collection"
|
||||
description="Choose from our vast library of industry-specific designs built for conversion."
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="asymmetric-60-wide-40-narrow"
|
||||
useInvertedBackground={false}
|
||||
title="Browse Our Template Collection"
|
||||
description="Choose from our vast library of industry-specific designs built for conversion."
|
||||
products={[
|
||||
{ id: "p1", name: "HVAC Pro", price: "$15/mo", variant: "Template", imageSrc: "http://img.b2bpic.net/free-psd/flat-design-dance-studio-landing-page-template_23-2149483751.jpg" },
|
||||
{ id: "p2", name: "Web Agency Studio", price: "$25/mo", variant: "Template", imageSrc: "http://img.b2bpic.net/free-vector/album-release-website-design_53876-67220.jpg" },
|
||||
{ id: "p3", name: "Retail Store", price: "$20/mo", variant: "Template", imageSrc: "http://img.b2bpic.net/free-photo/blank-paper-marble-texture-against-white-background_23-2148061589.jpg" },
|
||||
{ id: "p4", name: "Portfolio Elite", price: "$10/mo", variant: "Template", imageSrc: "http://img.b2bpic.net/free-vector/beautiful-landing-page_52683-32841.jpg" },
|
||||
{ id: "p5", name: "Business Coach", price: "$18/mo", variant: "Template", imageSrc: "http://img.b2bpic.net/free-vector/business-landing-page-with-photo_23-2148248050.jpg" },
|
||||
{ id: "p6", name: "AI Agency", price: "$30/mo", variant: "Template", imageSrc: "http://img.b2bpic.net/free-photo/3d-graph-computer-illustration_23-2151884868.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={true}
|
||||
heading={[
|
||||
{
|
||||
type: "text",
|
||||
content: "How It Works",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/man-works-with-sound-laptop-early-morning_169016-26471.jpg",
|
||||
alt: "Webild Interface",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={true}
|
||||
heading={[
|
||||
{ type: "text", content: "How It Works" },
|
||||
{ type: "image", src: "http://img.b2bpic.net/free-photo/man-works-with-sound-laptop-early-morning_169016-26471.jpg", alt: "Webild Interface" }
|
||||
]}
|
||||
buttons={[{ text: "Get Started", href: "#contact" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "100%",
|
||||
title: "Uptime",
|
||||
description: "Guaranteed performance.",
|
||||
icon: Shield,
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "24/7",
|
||||
title: "Monitoring",
|
||||
description: "Real-time insights.",
|
||||
icon: Zap,
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "5x",
|
||||
title: "SEO Boost",
|
||||
description: "AI-driven visibility.",
|
||||
icon: TrendingUp,
|
||||
},
|
||||
]}
|
||||
title="Performance Focused"
|
||||
description="Scale without changing platforms. Track real-time data and boost your traffic with AI-driven SEO."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
title="Performance Focused"
|
||||
description="Scale without changing platforms. Track real-time data and boost your traffic with AI-driven SEO."
|
||||
metrics={[
|
||||
{ id: "m1", value: "100%", title: "Uptime", description: "Guaranteed performance.", icon: Shield },
|
||||
{ id: "m2", value: "24/7", title: "Monitoring", description: "Real-time insights.", icon: Zap },
|
||||
{ id: "m3", value: "5x", title: "SEO Boost", description: "AI-driven visibility.", icon: TrendingUp }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
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: "Anything from personal portfolios to e-commerce stores, landing pages, or business websites.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Is hosting included?",
|
||||
content: "Yes, we provide free built-in hosting so you can go live instantly without ever leaving our platform.",
|
||||
},
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Still have questions about Webild?"
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
title="Frequently Asked Questions"
|
||||
description="Still have questions about Webild?"
|
||||
faqsAnimation="blur-reveal"
|
||||
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: "Anything from personal portfolios to e-commerce stores, landing pages, or business websites." },
|
||||
{ id: "q3", title: "Is hosting included?", content: "Yes, we provide free built-in hosting so you can go live instantly without ever leaving our platform." }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Start Creating Today"
|
||||
description="Ready to launch your online presence? Drop us a line and let's get building."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Email Address",
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Tell us about your project",
|
||||
rows: 4,
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/close-up-computer-supplies-wooden-desk-empty-startup-space-monitor-with-business-charts-display-instruments-work-financial-project-modern-workspace-decor_482257-36859.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Start Creating Today"
|
||||
description="Ready to launch your online presence? Drop us a line and let's get building."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Email Address", required: true }
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "Tell us about your project", rows: 4 }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/close-up-computer-supplies-wooden-desk-empty-startup-space-monitor-with-business-charts-display-instruments-work-financial-project-modern-workspace-decor_482257-36859.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "How It Works",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Features",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
label: "Pricing",
|
||||
href: "#pricing",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Twitter",
|
||||
href: "https://x.com",
|
||||
},
|
||||
{
|
||||
label: "LinkedIn",
|
||||
href: "https://linkedin.com",
|
||||
},
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "https://instagram.com",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Cookie Policy",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Webild"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
logoText="Webild"
|
||||
columns={[
|
||||
{ items: [{ label: "How It Works", href: "#about" }, { label: "Features", href: "#features" }, { label: "Pricing", href: "#pricing" }] },
|
||||
{ items: [{ label: "Twitter", href: "https://x.com" }, { label: "LinkedIn", href: "https://linkedin.com" }, { label: "Instagram", href: "https://instagram.com" }] },
|
||||
{ items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }, { label: "Cookie Policy", href: "#" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user