244 lines
13 KiB
TypeScript
244 lines
13 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import HeroSplit from '@/components/sections/hero/HeroSplit';
|
|
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
|
|
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
|
import { DollarSign, LayoutGrid, MapPin, Smartphone, TrendingUp, Zap } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="expand-hover"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="small"
|
|
sizing="largeSizeMediumTitles"
|
|
background="circleGradient"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="light"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
brandName="Keys App Studio"
|
|
navItems={[
|
|
{ name: "How It Works", id: "how-it-works" },
|
|
{ name: "Why Apps Matter", id: "why-apps" },
|
|
{ name: "Examples", id: "examples" },
|
|
{ name: "Pricing", id: "pricing" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
bottomLeftText="Serving Florida Keys Businesses"
|
|
bottomRightText="hello@keysappstudio.com"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplit
|
|
title="Stop losing customers to competitors with better apps—build yours in weeks, not months"
|
|
description="Increase bookings by 40% and boost customer retention with a custom branded mobile app. Get direct bookings, integrated payments, automated customer engagement, and business automation—all in one app designed specifically for your Florida Keys business."
|
|
tag="Mobile App Development"
|
|
tagIcon={Smartphone}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "glowing-orb" }}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao0PXCGG2QzDPiPxawDLQ0I0Mf/modern-mobile-app-mockups-displaying-thr-1773244794347-76450a3e.png"
|
|
imageAlt="Mobile app mockups for gym, charter, and restaurant booking apps"
|
|
imagePosition="right"
|
|
mediaAnimation="blur-reveal"
|
|
buttons={[
|
|
{ text: "Get Your App Built", href: "contact" },
|
|
{ text: "See Example Apps", href: "examples" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="how-it-works" data-section="how-it-works">
|
|
<FeatureCardTwelve
|
|
features={[
|
|
{
|
|
id: "step-1", label: "Step 1", title: "We Design Your App", items: [
|
|
"Custom design tailored to your brand", "User experience optimized for your customers", "Booking and scheduling interface"
|
|
],
|
|
buttons: []
|
|
},
|
|
{
|
|
id: "step-2", label: "Step 2", title: "We Integrate Your Systems", items: [
|
|
"Booking and reservation management", "Payment processing integration", "Customer notifications and messaging", "Loyalty programs and memberships"
|
|
],
|
|
buttons: []
|
|
},
|
|
{
|
|
id: "step-3", label: "Step 3", title: "Launch on the App Store", items: [
|
|
"iOS and Android deployment", "App Store optimization", "Ongoing support and updates"
|
|
],
|
|
buttons: []
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
title="How It Works"
|
|
description="Three simple steps to transform your business with a custom mobile app"
|
|
textboxLayout="default"
|
|
tag="Our Process"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="why-apps" data-section="why-apps">
|
|
<TestimonialAboutCard
|
|
tag="Why Businesses Need an App"
|
|
tagIcon={TrendingUp}
|
|
tagAnimation="slide-up"
|
|
title="Why Your Business Needs a Mobile App"
|
|
description="Direct bookings, push notifications, faster payments"
|
|
subdescription="Apps drive retention and brand authority"
|
|
icon={Smartphone}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao0PXCGG2QzDPiPxawDLQ0I0Mf/clean-modern-mobile-app-interface-mockup-1773244793287-947b1cee.png"
|
|
imageAlt="Mobile app showing benefits like direct bookings, payments, and customer engagement"
|
|
mediaAnimation="blur-reveal"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="examples" data-section="examples">
|
|
<ProductCardThree
|
|
title="Example Apps We've Built"
|
|
description="See real-world examples of custom mobile apps we've created for Florida Keys businesses"
|
|
tag="Portfolio"
|
|
tagIcon={LayoutGrid}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
gridVariant="two-columns-alternating-heights"
|
|
animationType="slide-up"
|
|
products={[
|
|
{
|
|
id: "gym-app", name: "Gym Booking App", price: "Class Schedule & Payments", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao0PXCGG2QzDPiPxawDLQ0I0Mf/gym-mobile-app-interface-showing-class-s-1773244793499-52ea8634.png", imageAlt: "Gym mobile app with class booking and membership management"
|
|
},
|
|
{
|
|
id: "charter-app", name: "Boat Charter Booking App", price: "Reservations & Availability", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao0PXCGG2QzDPiPxawDLQ0I0Mf/boat-charter-mobile-app-mockup-with-rese-1773244794436-e1e2306d.png", imageAlt: "Boat charter mobile app with booking calendar and pricing"
|
|
},
|
|
{
|
|
id: "restaurant-app", name: "Restaurant Ordering App", price: "Menu & Table Reservations", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao0PXCGG2QzDPiPxawDLQ0I0Mf/restaurant-mobile-app-interface-showing--1773244795715-02b1e7ea.png", imageAlt: "Restaurant mobile app with menu browsing and reservation system"
|
|
},
|
|
{
|
|
id: "service-app", name: "Service Business Scheduling App", price: "Appointments & Invoicing", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao0PXCGG2QzDPiPxawDLQ0I0Mf/service-business-scheduling-app-mockup-s-1773244795633-5236ba21.png", imageAlt: "Service business mobile app with scheduling and payment tracking"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="florida-keys" data-section="florida-keys">
|
|
<SocialProofOne
|
|
title="Built for Florida Keys Businesses"
|
|
description="We specialize in helping local businesses in the Keys modernize with powerful mobile apps"
|
|
tag="Local Focus"
|
|
tagIcon={MapPin}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={[
|
|
"Key Largo", "Islamorada", "Marathon", "Key West", "Marina Management", "Local Service Businesses", "Hospitality & Resorts", "Water Sports Operators"
|
|
]}
|
|
speed={40}
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardNine
|
|
title="Simple, Transparent Pricing"
|
|
description="Choose the perfect plan for your business needs"
|
|
tag="Pricing Plans"
|
|
tagIcon={DollarSign}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
animationType="slide-up"
|
|
plans={[
|
|
{
|
|
id: "starter", title: "Starter App", price: "Starting at", period: "$2,999", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao0PXCGG2QzDPiPxawDLQ0I0Mf/mobile-app-interface-mockup-representing-1773244793420-99b3306c.png", imageAlt: "Starter app plan with basic booking and business tools", features: [
|
|
"Basic booking and reservation system", "Business information and hours", "Customer contact management", "Mobile-responsive design"
|
|
],
|
|
button: { text: "Schedule a Free Demo", href: "#contact" }
|
|
},
|
|
{
|
|
id: "business", title: "Business App", price: "Starting at", period: "$5,999", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao0PXCGG2QzDPiPxawDLQ0I0Mf/mobile-app-interface-showing-business-pl-1773244796062-a17b489d.png", imageAlt: "Business app plan with full booking, payments, and customer accounts", features: [
|
|
"Full booking and scheduling system", "Integrated payment processing", "Customer accounts and loyalty rewards", "Push notifications", "Promotional features"
|
|
],
|
|
button: { text: "Schedule a Free Demo", href: "#contact" }
|
|
},
|
|
{
|
|
id: "premium", title: "Premium App", price: "Starting at", period: "$9,999", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao0PXCGG2QzDPiPxawDLQ0I0Mf/premium-mobile-app-interface-showing-ent-1773244794120-5dccdffd.png", imageAlt: "Premium app plan with full automation and advanced features", features: [
|
|
"Full booking and payment system", "Advanced automation workflows", "Membership and subscription management", "Customer analytics and reporting", "Multi-location support", "API integrations"
|
|
],
|
|
button: { text: "Schedule a Free Demo", href: "#contact" }
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
tag="Ready to Launch?"
|
|
tagAnimation="slide-up"
|
|
title="Ready to Launch Your Own Business App?"
|
|
description="Serving Florida Keys Businesses — Key Largo, Islamorada, Marathon, and Key West"
|
|
background={{ variant: "rotated-rays-animated-grid" }}
|
|
useInvertedBackground={false}
|
|
inputPlaceholder="Enter your email"
|
|
buttonText="Get Free 30-Minute Consultation"
|
|
termsText="We respect your privacy. Your information is secure with us."
|
|
onSubmit={(email) => console.log(email)}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoText="Keys App Studio"
|
|
columns={[
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#" },
|
|
{ label: "Services", href: "#" },
|
|
{ label: "Contact", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
title: "Services", items: [
|
|
{ label: "Mobile App Development", href: "#" },
|
|
{ label: "Custom Integrations", href: "#" },
|
|
{ label: "App Support", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Resources", items: [
|
|
{ label: "Pricing", href: "#pricing" },
|
|
{ label: "How It Works", href: "#how-it-works" },
|
|
{ label: "Privacy Policy", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Connect", items: [
|
|
{ label: "Facebook", href: "https://facebook.com" },
|
|
{ label: "Instagram", href: "https://instagram.com" },
|
|
{ label: "LinkedIn", href: "https://linkedin.com" }
|
|
]
|
|
}
|
|
]}
|
|
copyrightText="© 2025 Keys App Studio. All rights reserved. Transforming Florida Keys Businesses."
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |