228 lines
14 KiB
TypeScript
228 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
|
import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
|
|
import FeatureCardMedia from "@/components/sections/feature/FeatureCardMedia";
|
|
import TextAbout from "@/components/sections/about/TextAbout";
|
|
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
|
|
import FaqDouble from "@/components/sections/faq/FaqDouble";
|
|
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
|
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
|
import { Zap, Phone, Globe, Star, HelpCircle, Rocket } from "lucide-react";
|
|
|
|
export default function HomePage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-shift"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="rounded"
|
|
contentWidth="medium"
|
|
sizing="largeSmall"
|
|
background="circleGradient"
|
|
cardStyle="solid"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="bold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
brandName="Basepex"
|
|
navItems={[
|
|
{ name: "Services", id: "services" },
|
|
{ name: "Pricing", id: "pricing" },
|
|
{ name: "FAQ", id: "faq" },
|
|
{ name: "Contact", id: "contact" },
|
|
{ name: "Sign Up", id: "https://app.basepex.com/signup" },
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardGallery
|
|
title="Enterprise AI Services Platform"
|
|
description="Deliver AI Receptionist, AI Website Builder, and AI Ad Generator to your clients—fully automated, end-to-end, with zero manual setup required."
|
|
background={{ variant: "radial-gradient" }}
|
|
tag="AI-Powered Enterprise"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Get Started Free", href: "https://app.basepex.com/signup" },
|
|
{ text: "Watch Demo", href: "#" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYAtim1ZLWPTHwy7Ez77qVJ5sx/modern-saas-dashboard-with-multiple-data-1772894463729-4de7a692.png?_wi=1", imageAlt: "AI Dashboard Interface"},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYAtim1ZLWPTHwy7Ez77qVJ5sx/ai-receptionist-handling-business-call-v-1772894463303-c1dcad5f.png", imageAlt: "AI Receptionist Taking Call"},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYAtim1ZLWPTHwy7Ez77qVJ5sx/ai-website-builder-interface-showing-dra-1772894463111-d27a0b65.png?_wi=1", imageAlt: "Website Builder Interface"},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYAtim1ZLWPTHwy7Ez77qVJ5sx/ai-ad-generator-interface-showing-static-1772894463859-59eb4fa4.png", imageAlt: "AI Ad Generator Creating Ads"},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYAtim1ZLWPTHwy7Ez77qVJ5sx/performance-analytics-dashboard-showing--1772894464484-18a45a47.png?_wi=1", imageAlt: "Analytics and Performance Dashboard"},
|
|
]}
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardMedia
|
|
title="Three Powerful Services in One Platform"
|
|
description="Complete enterprise AI solutions that integrate seamlessly to deliver professional results to your clients."
|
|
tag="Our Services"
|
|
tagAnimation="slide-up"
|
|
features={[
|
|
{
|
|
id: "receptionist", title: "AI Receptionist", description: "24/7 call answering, appointment booking, SMS confirmations, and full CRM logging. Connects to Vapi.ai with automatic calendar integration.", tag: "Service 1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYAtim1ZLWPTHwy7Ez77qVJ5sx/ai-receptionist-feature-showcase-shows-a-1772894464335-f7bc3fba.png", imageAlt: "AI Receptionist Service", buttons: [{ text: "Learn More", href: "#" }],
|
|
},
|
|
{
|
|
id: "website", title: "AI Website Builder", description: "Automated professional website creation with Stripe/Square integration, Calendly booking, SEO optimization, and custom domain setup—live in 48 hours.", tag: "Service 2", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYAtim1ZLWPTHwy7Ez77qVJ5sx/website-builder-feature-visualization-sh-1772894466404-6a9605db.png", imageAlt: "Website Builder Service", buttons: [{ text: "Learn More", href: "#" }],
|
|
},
|
|
{
|
|
id: "ads", title: "AI Ad Generator", description: "10 professional photoreal image ads + 5 cinematic video ads with burned-in watermarks on unpaid versions. Premium includes unlimited generations, no watermarks, and 2-hour human polish.", tag: "Service 3", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYAtim1ZLWPTHwy7Ez77qVJ5sx/ai-ad-generator-showcase-showing-10-stat-1772894468353-454985e3.png", imageAlt: "Ad Generator Service", buttons: [{ text: "Learn More", href: "#" }],
|
|
},
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="receptionist-detail" data-section="receptionist-detail">
|
|
<TextAbout
|
|
tag="AI Receptionist"
|
|
tagIcon={Phone}
|
|
tagAnimation="slide-up"
|
|
title="Always-On Call Handling: Collect business info during signup, instantly configure Vapi.ai assistant, assign phone number, connect calendar for live bookings, deliver client dashboard with complete call history, booking logs, and message records."
|
|
useInvertedBackground={false}
|
|
buttons={[{ text: "Start Free Trial", href: "https://app.basepex.com/signup" }]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="website-detail" data-section="website-detail">
|
|
<TextAbout
|
|
tag="AI Website Builder"
|
|
tagIcon={Globe}
|
|
tagAnimation="slide-up"
|
|
title="Professional sites in 48 hours: 5-question onboarding form feeds Framer AI/Durable.co API, auto-generates complete professional site, integrates Stripe/Square payments and Calendly bookings, applies SEO (meta tags, schema, sitemap), points to custom domain with SSL, delivers Loom-style walkthrough video."
|
|
useInvertedBackground={false}
|
|
buttons={[{ text: "Build Your Site", href: "https://app.basepex.com/signup" }]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSixteen
|
|
title="Trusted by Forward-Thinking Agencies & Entrepreneurs"
|
|
description="See how Basepex transforms service delivery for businesses of all sizes."
|
|
tag="Testimonials"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Johnson", role: "CEO", company: "Digital Agency Pro", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYAtim1ZLWPTHwy7Ez77qVJ5sx/professional-headshot-portrait-of-a-conf-1772894464170-47419d4b.png", imageAlt: "Sarah Johnson headshot"},
|
|
{
|
|
id: "2", name: "Michael Chen", role: "Founder", company: "ServiceHub Solutions", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYAtim1ZLWPTHwy7Ez77qVJ5sx/professional-headshot-portrait-of-a-man--1772894464881-cbb9c755.png", imageAlt: "Michael Chen headshot"},
|
|
{
|
|
id: "3", name: "Emily Rodriguez", role: "Marketing Director", company: "Growth Marketing Co", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYAtim1ZLWPTHwy7Ez77qVJ5sx/professional-headshot-portrait-of-a-woma-1772894462008-1e7c3542.png", imageAlt: "Emily Rodriguez headshot"},
|
|
{
|
|
id: "4", name: "David Kim", role: "Business Owner", company: "Consulting Elite", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYAtim1ZLWPTHwy7Ez77qVJ5sx/professional-headshot-portrait-of-a-man--1772894462407-6d42708f.png", imageAlt: "David Kim headshot"},
|
|
]}
|
|
kpiItems={[
|
|
{ value: "500+", label: "Active Business Clients" },
|
|
{ value: "98%", label: "Satisfaction Rate" },
|
|
{ value: "$2.4M+", label: "Ad Spend Generated" },
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqDouble
|
|
title="Frequently Asked Questions"
|
|
description="Everything you need to know about Basepex and our services."
|
|
tag="FAQ"
|
|
tagIcon={HelpCircle}
|
|
tagAnimation="slide-up"
|
|
faqsAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "1", title: "How does the AI Receptionist integrate with my calendar?", content: "Simply provide your Calendly or Google Calendar link during onboarding. The Basepex platform automatically connects and syncs in real-time. When callers book appointments, they're instantly added to your calendar and SMS confirmations are sent to both parties."},
|
|
{
|
|
id: "2", title: "Can I customize the AI Website Builder output?", content: "Yes! After the 48-hour initial build using Framer AI or Durable.co, the website is fully editable. You can adjust copy, colors, layouts, and add custom pages. We also handle all SSL and domain configuration for you."},
|
|
{
|
|
id: "3", title: "What makes your ad watermark uncopyable?", content: "Unlike CSS overlays that can be bypassed, our watermarks are burned directly into the pixel layer of images using Sharp/Jimp and rendered into every frame of video files using FFmpeg. Screen recording or screenshotting captures the watermark permanently because it's part of the file itself, not a UI element."},
|
|
{
|
|
id: "4", title: "How many ads do I receive per order?", content: "Standard: 10 watermarked static image ads per order, limited to 5 orders/month. Premium: 10 photoreal static images + 5 cinematic video ads (35 seconds each) per order, with unlimited generations. Premium videos include multi-modal variations (3 image sizes, 2 video cuts = 10 videos total)."},
|
|
{
|
|
id: "5", title: "What does the 2-hour human polish option include?", content: "Premium members can flag any ad generation for human review. Within 2 hours, our team reviews copy, visuals, and messaging—making minor refinements for brand fit and performance. The polished version is returned to you immediately. This is included at no extra charge and separates us from every other AI ad tool."},
|
|
{
|
|
id: "6", title: "How do I track ad performance?", content: "Connect your Facebook Ads Manager, TikTok Ads, or Google Ads account during setup. Basepex tracks click-through rate, cost per result, and engagement metrics—automatically using this data to make every future generation smarter and more targeted specifically for your account."},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
tag="Ready to Scale?"
|
|
tagIcon={Rocket}
|
|
tagAnimation="slide-up"
|
|
title="Transform Your Client Services with Basepex"
|
|
description="Join hundreds of agencies and entrepreneurs delivering premium AI services. Start your free trial today and see the difference automation makes."
|
|
buttons={[
|
|
{ text: "Start Free Trial", href: "https://app.basepex.com/signup" },
|
|
{ text: "Schedule a Demo", href: "#" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
background={{ variant: "radial-gradient" }}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
logoText="Basepex"
|
|
columns={[
|
|
{
|
|
items: [
|
|
{ label: "Home", href: "/" },
|
|
{ label: "Services", href: "#services" },
|
|
{ label: "Pricing", href: "/pricing" },
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "About", href: "/about" },
|
|
{ label: "FAQ", href: "#faq" },
|
|
{ label: "Contact", href: "#contact" },
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Cookie Policy", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Twitter", href: "https://twitter.com" },
|
|
{ label: "LinkedIn", href: "https://linkedin.com" },
|
|
{ label: "GitHub", href: "https://github.com" },
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |