Merge version_1 into main #1
263
src/app/page.tsx
263
src/app/page.tsx
@@ -7,6 +7,8 @@ import FeatureBento from "@/components/sections/feature/FeatureBento";
|
||||
import AboutMetric from "@/components/sections/about/AboutMetric";
|
||||
import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
|
||||
import PricingCardFive from "@/components/sections/pricing/PricingCardFive";
|
||||
import FaqDouble from "@/components/sections/faq/FaqDouble";
|
||||
import ContactSplit from "@/components/sections/contact/ContactSplit";
|
||||
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
@@ -28,46 +30,7 @@ export default function HomePage() {
|
||||
{ name: "How It Works", id: "how-it-works" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
{ name: "Blog", id: "blog" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Product",
|
||||
items: [
|
||||
{ label: "Features", href: "/" },
|
||||
{ label: "Pricing", href: "/pricing" },
|
||||
{ label: "How It Works", href: "/" },
|
||||
{ label: "FAQ", href: "/" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Blog", href: "/blog" },
|
||||
{ label: "Careers", href: "/careers" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources",
|
||||
items: [
|
||||
{ label: "Documentation", href: "/docs" },
|
||||
{ label: "API Reference", href: "/api" },
|
||||
{ label: "Community", href: "/community" },
|
||||
{ label: "Support", href: "/support" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{ label: "Privacy Policy", href: "/privacy" },
|
||||
{ label: "Terms of Service", href: "/terms" },
|
||||
{ label: "Security", href: "/security" },
|
||||
{ label: "Cookie Policy", href: "/cookies" },
|
||||
],
|
||||
},
|
||||
{ name: "Contact", id: "contact" },
|
||||
];
|
||||
|
||||
return (
|
||||
@@ -86,33 +49,27 @@ export default function HomePage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={navigationItems}
|
||||
button={{ text: "Start Building", href: "/contact" }}
|
||||
button={{ text: "Start Building", href: "contact" }}
|
||||
brandName="Vibecoding"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCentered
|
||||
background={{ variant: "circleGradient" }}
|
||||
background={{ variant: "downward-rays-static" }}
|
||||
title="Build Beautiful Websites with AI-Powered Intelligence"
|
||||
description="Create stunning, responsive websites in minutes using Claude AI. Get live previews, intelligent chat-based edits, and seamless Supabase backend integration—no coding required."
|
||||
avatars={[
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATGFM0wnlRjlPc0GtpEiTyChTg/professional-headshot-of-a-young-female--1772609211397-00a3b45b.png",
|
||||
alt: "User testimonial 1",
|
||||
},
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATGFM0wnlRjlPc0GtpEiTyChTg/professional-headshot-of-a-young-female--1772609211397-00a3b45b.png", alt: "User testimonial 1"},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATGFM0wnlRjlPc0GtpEiTyChTg/professional-headshot-of-a-male-designer-1772609211921-ffa1043f.png",
|
||||
alt: "User testimonial 2",
|
||||
},
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATGFM0wnlRjlPc0GtpEiTyChTg/professional-headshot-of-a-male-designer-1772609211921-ffa1043f.png", alt: "User testimonial 2"},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATGFM0wnlRjlPc0GtpEiTyChTg/professional-headshot-of-a-diverse-creat-1772609210334-1c152dbb.png",
|
||||
alt: "User testimonial 3",
|
||||
},
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATGFM0wnlRjlPc0GtpEiTyChTg/professional-headshot-of-a-diverse-creat-1772609210334-1c152dbb.png", alt: "User testimonial 3"},
|
||||
]}
|
||||
avatarText="Trusted by 500+ creators and businesses"
|
||||
buttons={[
|
||||
{ text: "Start Free Trial", href: "/contact" },
|
||||
{ text: "Start Free Trial", href: "contact" },
|
||||
{ text: "Watch Demo" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
@@ -131,38 +88,21 @@ export default function HomePage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "AI-Powered Generation",
|
||||
description: "Claude AI generates custom websites based on your vision, instantly creating unique designs tailored to your brand.",
|
||||
bentoComponent: "globe",
|
||||
},
|
||||
title: "AI-Powered Generation", description: "Claude AI generates custom websites based on your vision, instantly creating unique designs tailored to your brand.", bentoComponent: "globe"},
|
||||
{
|
||||
title: "Live Preview",
|
||||
description: "See your website updates in real-time as you make changes through the intelligent chat interface.",
|
||||
bentoComponent: "animated-bar-chart",
|
||||
},
|
||||
title: "Live Preview", description: "See your website updates in real-time as you make changes through the intelligent chat interface.", bentoComponent: "animated-bar-chart"},
|
||||
{
|
||||
title: "Smart Chat Editor",
|
||||
description: "Natural language editing—just describe what you want and watch your website transform instantly.",
|
||||
bentoComponent: "chat",
|
||||
aiIcon: Sparkles,
|
||||
title: "Smart Chat Editor", description: "Natural language editing—just describe what you want and watch your website transform instantly.", bentoComponent: "chat", aiIcon: Sparkles,
|
||||
userIcon: Users,
|
||||
exchanges: [
|
||||
{
|
||||
userMessage: "Make the header more vibrant with a gradient",
|
||||
aiResponse: "Done! I've added a beautiful gradient to your header with warm sunset tones.",
|
||||
},
|
||||
userMessage: "Make the header more vibrant with a gradient", aiResponse: "Done! I've added a beautiful gradient to your header with warm sunset tones."},
|
||||
{
|
||||
userMessage: "Add a contact form to the footer",
|
||||
aiResponse: "Added a fully functional contact form with email validation to your footer.",
|
||||
},
|
||||
userMessage: "Add a contact form to the footer", aiResponse: "Added a fully functional contact form with email validation to your footer."},
|
||||
],
|
||||
placeholder: "Describe your design changes...",
|
||||
},
|
||||
placeholder: "Describe your design changes..."},
|
||||
{
|
||||
title: "Supabase Integration",
|
||||
description: "Connect your Supabase account for instant backend solutions, databases, authentication, and real-time features.",
|
||||
bentoComponent: "orbiting-icons",
|
||||
centerIcon: Zap,
|
||||
title: "Supabase Integration", description: "Connect your Supabase account for instant backend solutions, databases, authentication, and real-time features.", bentoComponent: "orbiting-icons", centerIcon: Zap,
|
||||
items: [
|
||||
{ icon: Database, ring: 1 },
|
||||
{ icon: Lock, ring: 1 },
|
||||
@@ -198,85 +138,126 @@ export default function HomePage() {
|
||||
tag="Reviews"
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah Chen",
|
||||
handle: "@sarahcreates",
|
||||
testimonial: "Vibecoding saved me hours on my portfolio site. The AI understood exactly what I wanted, and the live preview let me make tweaks instantly. Highly recommend!",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATGFM0wnlRjlPc0GtpEiTyChTg/professional-headshot-of-sarah-chen-a-cr-1772609210550-bfa38bcc.png",
|
||||
imageAlt: "Sarah Chen testimonial",
|
||||
id: "1", name: "Sarah Chen", handle: "@sarahcreates", testimonial: "Vibecoding saved me hours on my portfolio site. The AI understood exactly what I wanted, and the live preview let me make tweaks instantly. Highly recommend!", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATGFM0wnlRjlPc0GtpEiTyChTg/professional-headshot-of-sarah-chen-a-cr-1772609210550-bfa38bcc.png", imageAlt: "Sarah Chen testimonial"},
|
||||
{
|
||||
id: "2", name: "Marcus Thompson", handle: "@mthompsondev", testimonial: "As a developer, I appreciate the Supabase integration. Building a full-stack web app has never been easier. The chat editor is genuinely intuitive.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATGFM0wnlRjlPc0GtpEiTyChTg/professional-headshot-of-marcus-thompson-1772609212021-c78fb483.png", imageAlt: "Marcus Thompson testimonial"},
|
||||
{
|
||||
id: "3", name: "Elena Rodriguez", handle: "@elenadesigns", testimonial: "I was skeptical about AI-generated designs, but Vibecoding's results are stunning. The warm, professional aesthetic matches my brand perfectly.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATGFM0wnlRjlPc0GtpEiTyChTg/professional-headshot-of-elena-rodriguez-1772609211253-e5926f0a.png", imageAlt: "Elena Rodriguez testimonial"},
|
||||
{
|
||||
id: "4", name: "David Kim", handle: "@dkimbusiness", testimonial: "Launched my startup website in two days with Vibecoding. The combination of AI design and real backend integration is a game-changer.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATGFM0wnlRjlPc0GtpEiTyChTg/professional-headshot-of-david-kim-a-mal-1772609211451-7f9319c5.png", imageAlt: "David Kim testimonial"},
|
||||
{
|
||||
id: "5", name: "Jessica Patel", handle: "@jessicaventures", testimonial: "The chat interface is so natural. I describe changes in plain English and watch them appear instantly. No more back-and-forth with designers.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATGFM0wnlRjlPc0GtpEiTyChTg/professional-headshot-of-jessica-patel-a-1772609210221-77f8b8ee.png", imageAlt: "Jessica Patel testimonial"},
|
||||
{
|
||||
id: "6", name: "Alex Morrison", handle: "@alexmorrison", testimonial: "Vibecoding's AI doesn't just generate websites—it understands design principles. My website converted 40% more visitors within the first month.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATGFM0wnlRjlPc0GtpEiTyChTg/professional-headshot-of-alex-morrison-a-1772609213372-6c9278fd.png", imageAlt: "Alex Morrison testimonial"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardFive
|
||||
title="Simple, Transparent Pricing"
|
||||
description="Choose the perfect plan for your needs. Scale as you grow."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
plans={[
|
||||
{
|
||||
id: "starter", tag: "Starter Plan", price: "$29", period: "/month", description: "Perfect for freelancers and small projects", button: { text: "Get Started", href: "contact" },
|
||||
featuresTitle: "What's Included:", features: ["5 websites with AI generation", "Live preview & chat editor", "Basic Supabase integration", "Email support", "500MB storage"],
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Marcus Thompson",
|
||||
handle: "@mthompsondev",
|
||||
testimonial: "As a developer, I appreciate the Supabase integration. Building a full-stack web app has never been easier. The chat editor is genuinely intuitive.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATGFM0wnlRjlPc0GtpEiTyChTg/professional-headshot-of-marcus-thompson-1772609212021-c78fb483.png",
|
||||
imageAlt: "Marcus Thompson testimonial",
|
||||
id: "pro", tag: "Pro Plan", price: "$79", period: "/month", description: "For growing teams and ambitious projects", button: { text: "Start Free Trial", href: "contact" },
|
||||
featuresTitle: "Everything in Starter, plus:", features: ["Unlimited websites", "Advanced AI customization", "Full Supabase integration", "Priority support", "50GB storage", "Team collaboration (5 members)", "Custom domain support"],
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Elena Rodriguez",
|
||||
handle: "@elenadesigns",
|
||||
testimonial: "I was skeptical about AI-generated designs, but Vibecoding's results are stunning. The warm, professional aesthetic matches my brand perfectly.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATGFM0wnlRjlPc0GtpEiTyChTg/professional-headshot-of-elena-rodriguez-1772609211253-e5926f0a.png",
|
||||
imageAlt: "Elena Rodriguez testimonial",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "David Kim",
|
||||
handle: "@dkimbusiness",
|
||||
testimonial: "Launched my startup website in two days with Vibecoding. The combination of AI design and real backend integration is a game-changer.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATGFM0wnlRjlPc0GtpEiTyChTg/professional-headshot-of-david-kim-a-mal-1772609211451-7f9319c5.png",
|
||||
imageAlt: "David Kim testimonial",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Jessica Patel",
|
||||
handle: "@jessicaventures",
|
||||
testimonial: "The chat interface is so natural. I describe changes in plain English and watch them appear instantly. No more back-and-forth with designers.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATGFM0wnlRjlPc0GtpEiTyChTg/professional-headshot-of-jessica-patel-a-1772609210221-77f8b8ee.png",
|
||||
imageAlt: "Jessica Patel testimonial",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "Alex Morrison",
|
||||
handle: "@alexmorrison",
|
||||
testimonial: "Vibecoding's AI doesn't just generate websites—it understands design principles. My website converted 40% more visitors within the first month.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATGFM0wnlRjlPc0GtpEiTyChTg/professional-headshot-of-alex-morrison-a-1772609213372-6c9278fd.png",
|
||||
imageAlt: "Alex Morrison testimonial",
|
||||
id: "enterprise", tag: "Enterprise Plan", price: "Custom", period: "/month", description: "For large organizations with custom needs", button: { text: "Contact Sales", href: "contact" },
|
||||
featuresTitle: "Full Suite Includes:", features: ["Unlimited everything", "Dedicated AI model training", "Advanced Supabase + custom integrations", "24/7 dedicated support", "Unlimited storage & bandwidth", "Advanced analytics & insights", "SSO & advanced security", "Dedicated account manager"],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="cta" data-section="cta">
|
||||
<section className="py-16 md:py-24 px-4 md:px-6 text-center">
|
||||
<div className="mx-auto px-4 md:px-6 max-w-2xl">
|
||||
<h2 className="text-3xl md:text-5xl font-extrabold mb-6" style={{ color: "var(--foreground)" }}>
|
||||
Ready to Build Your Dream Website?
|
||||
</h2>
|
||||
<p className="text-lg md:text-xl mb-8" style={{ color: "var(--foreground)" }}>
|
||||
Join hundreds of creators and businesses already building with Vibecoding. Start your free trial today—no credit card required.
|
||||
</p>
|
||||
<Link href="/contact">
|
||||
<button
|
||||
className="px-8 py-4 rounded-full font-semibold text-lg transition-all duration-300"
|
||||
style={{
|
||||
backgroundColor: "var(--primary-cta)",
|
||||
color: "var(--primary-cta-text)",
|
||||
}}
|
||||
>
|
||||
Start Your Free Trial
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about Vibecoding and how to make the most of it."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqsAnimation="slide-up"
|
||||
faqs={[
|
||||
{
|
||||
id: "1", title: "How does the AI understand my design preferences?", content: "Vibecoding uses advanced Claude AI that learns from your descriptions, brand guidelines, and preferences. The more you interact with the platform, the better it understands your aesthetic and style, creating increasingly refined designs."},
|
||||
{
|
||||
id: "2", title: "Can I connect my existing Supabase project?", content: "Yes! You can connect any existing Supabase project to Vibecoding. Our integration allows you to leverage your current databases, authentication systems, and real-time features while building your website with AI."},
|
||||
{
|
||||
id: "3", title: "What if I need to make changes after deployment?", content: "The chat editor works even after deployment. Simply describe your desired changes, and the AI updates your website in real-time. You can make unlimited modifications—from small design tweaks to entire layout overhauls."},
|
||||
{
|
||||
id: "4", title: "Is my data secure with Supabase integration?", content: "Absolutely. We use enterprise-grade encryption and follow security best practices. Your Supabase connection is secured with OAuth, and all data remains on your own Supabase instance. You maintain complete control and ownership."},
|
||||
{
|
||||
id: "5", title: "Do I need to know how to code?", content: "No coding knowledge required! Vibecoding is designed for everyone. The AI handles all technical implementation, and the chat interface lets you communicate in plain English. However, developers can access the code if they want to customize further."},
|
||||
{
|
||||
id: "6", title: "Can I export my website code?", content: "Yes, Pro and Enterprise plans include full code export. You can download your website as a complete Next.js project and deploy it anywhere you want, with full control over your codebase."},
|
||||
{
|
||||
id: "7", title: "What kind of websites can I build?", content: "Vibecoding excels at landing pages, portfolios, SaaS websites, e-commerce stores, blogs, and more. The AI can generate nearly any type of website. If you can describe it, Vibecoding can build it."},
|
||||
{
|
||||
id: "8", title: "How fast is the live preview?", content: "The live preview updates almost instantaneously. Thanks to our optimized architecture, you see changes within milliseconds of describing them in the chat, creating a seamless design experience."},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
tag="Get Started"
|
||||
title="Start Building Your Dream Website Today"
|
||||
description="Join thousands of creators and businesses using Vibecoding to build beautiful, intelligent websites. Get instant access to AI-powered design, live preview, and backend integration."
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATGFM0wnlRjlPc0GtpEiTyChTg/modern-software-interface-showing-an-ai--1772609211597-08c10c1b.png"
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="right"
|
||||
inputPlaceholder="Enter your email address"
|
||||
buttonText="Start Free Trial"
|
||||
termsText="We respect your privacy. Start your free trial instantly—no credit card required."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Vibecoding"
|
||||
columns={footerColumns}
|
||||
columns={[
|
||||
{
|
||||
title: "Product", items: [
|
||||
{ label: "Features", href: "#features" },
|
||||
{ label: "Pricing", href: "#pricing" },
|
||||
{ label: "How It Works", href: "#how-it-works" },
|
||||
{ label: "FAQ", href: "#faq" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Blog", href: "/blog" },
|
||||
{ label: "Careers", href: "/careers" },
|
||||
{ label: "Contact", href: "#contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources", items: [
|
||||
{ label: "Documentation", href: "/docs" },
|
||||
{ label: "API Reference", href: "/api" },
|
||||
{ label: "Community", href: "/community" },
|
||||
{ label: "Support", href: "/support" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "/privacy" },
|
||||
{ label: "Terms of Service", href: "/terms" },
|
||||
{ label: "Security", href: "/security" },
|
||||
{ label: "Cookie Policy", href: "/cookies" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2025 Vibecoding. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user