323 lines
23 KiB
TypeScript
323 lines
23 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import { useState } from "react";
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
|
|
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
|
|
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
|
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
|
import ContactFaq from '@/components/sections/contact/ContactFaq';
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
import { Sparkles, Zap, Lightbulb, Rocket, Users, Star, HelpCircle, Download, MessageCircle, CheckCircle2, Loader } from 'lucide-react';
|
|
import AnimatedChatDemo from '@/components/sections/demo/AnimatedChatDemo';
|
|
|
|
export default function LandingPage() {
|
|
const [isDarkMode, setIsDarkMode] = useState(false);
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-magnetic"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="soft"
|
|
contentWidth="small"
|
|
sizing="mediumLargeSizeLargeTitles"
|
|
background="noise"
|
|
cardStyle="soft-shadow"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
brandName="Native Line"
|
|
navItems={[
|
|
{ name: "Features", id: "features" },
|
|
{ name: "How It Works", id: "process" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "FAQ", id: "faq" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{
|
|
text: "Download", href: "https://example.com/download"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDoubleCarousel
|
|
title="Build Native Apps Just Talk"
|
|
description="Turn your ideas into production-ready iOS, iPad, and Mac apps instantly. Pure native Swift, beautifully designed, completely yours."
|
|
tag="macOS App"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "glowing-orb" }}
|
|
leftCarouselItems={[
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-finished-ios-app-screenshot-showing-a--1772522998285-77be74a6.png?_wi=1", imageAlt: "iOS app dashboard screenshot"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-macos-app-interface-screenshot-showing-1772523000308-423b97cb.png", imageAlt: "Swift code generation interface"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-finished-ipad-app-screenshot-showing-a-1772522999865-47f124e4.png", imageAlt: "iPad app interface"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-mac-app-screenshot-displaying-a-native-1772523000039-25334e88.png?_wi=1", imageAlt: "macOS native app"
|
|
}
|
|
]}
|
|
rightCarouselItems={[
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-sleek-macos-application-window-showing-1772522998510-05a82eb5.png?_wi=1", imageAlt: "Native Line conversational interface"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-screenshot-showing-the-first-step-of-n-1772522998713-3d093734.png?_wi=1", imageAlt: "Step 1: Conversational input"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-screenshot-showing-native-line-process-1772522998677-8404a04b.png?_wi=1", imageAlt: "Step 2: AI processing"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-screenshot-showing-the-final-output-a--1772522999316-ac7823d9.png?_wi=1", imageAlt: "Step 3: Ready-to-deploy app"
|
|
}
|
|
]}
|
|
carouselPosition="right"
|
|
buttons={[
|
|
{ text: "Download", href: "https://example.com/download" },
|
|
{ text: "Watch Demo", href: "https://example.com/demo" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="chatDemo" data-section="chatDemo">
|
|
<AnimatedChatDemo />
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardNineteen
|
|
title="Why Choose Native Line"
|
|
description="Experience the future of app development—where conversational AI meets native power."
|
|
tag="Key Benefits"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: 1,
|
|
tag: "Speed", title: "From Idea to App in Minutes", subtitle: "Ship faster than ever", description: "Describe your app idea and get production-ready Swift code instantly. Minutes from concept to deployment.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-screenshot-showing-the-first-step-of-n-1772522998713-3d093734.png?_wi=2", imageAlt: "Fast app generation"
|
|
},
|
|
{
|
|
id: 2,
|
|
tag: "Quality", title: "Pure Native Swift Code", subtitle: "Production-ready quality", description: "Genuine native iOS, iPad, and Mac code. No wrappers, no JavaScript. Premium experience from day one.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-finished-ios-app-screenshot-showing-a--1772522998285-77be74a6.png?_wi=2", imageAlt: "Native iOS quality"
|
|
},
|
|
{
|
|
id: 3,
|
|
tag: "Control", title: "Full Source Code Ownership", subtitle: "Your code, your rules", description: "Get complete Swift source code. No vendor lock-in, no subscription dependency. Modify and maintain freely.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-mac-app-screenshot-displaying-a-native-1772523000039-25334e88.png?_wi=2", imageAlt: "Source code control"
|
|
},
|
|
{
|
|
id: 4,
|
|
tag: "Accessible", title: "Conversational Interface", subtitle: "No coding experience needed", description: "Just describe what you want. No Swift, no Xcode knowledge required. Conversational AI handles the complexity.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-sleek-macos-application-window-showing-1772522998510-05a82eb5.png?_wi=2", imageAlt: "Conversational interface"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TestimonialAboutCard
|
|
tag="Our Mission"
|
|
tagIcon={Lightbulb}
|
|
tagAnimation="slide-up"
|
|
title="Democratizing App Development"
|
|
description="Native Line enables indie developers, entrepreneurs, and creators to ship production-quality native apps."
|
|
subdescription="We believe anyone with an idea deserves the ability to create native apps without hiring a team of engineers."
|
|
icon={Rocket}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-lifestyle-photo-showing-an-indie-devel-1772522999346-c2d8c8e5.png"
|
|
imageAlt="Developer using Native Line"
|
|
mediaAnimation="blur-reveal"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="process" data-section="process">
|
|
<FeatureCardNineteen
|
|
title="How It Works"
|
|
description="Three simple steps from idea to production."
|
|
tag="Process"
|
|
tagIcon={Users}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: 1,
|
|
tag: "Step 1", title: "Describe Your Idea", subtitle: "Tell Native Line what to build", description: "Open the app and describe your idea conversationally. Share features, design preferences, and user flows. Refine your vision through chat.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-screenshot-showing-the-first-step-of-n-1772522998713-3d093734.png?_wi=3", imageAlt: "Conversational input step"
|
|
},
|
|
{
|
|
id: 2,
|
|
tag: "Step 2", title: "AI Generates Your App", subtitle: "See it come to life", description: "Our AI generates complete Swift code with real-time previews. Iterate and refine until it's perfect. See exactly what you're building.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-screenshot-showing-native-line-process-1772522998677-8404a04b.png?_wi=2", imageAlt: "AI processing and generation"
|
|
},
|
|
{
|
|
id: 3,
|
|
tag: "Step 3", title: "Deploy to App Store", subtitle: "Ship in minutes", description: "Export complete, signed app code ready for submission. Native Line handles all the complexity. Your app is ready to monetize.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-screenshot-showing-the-final-output-a--1772522999316-ac7823d9.png?_wi=2", imageAlt: "Ready-to-deploy app"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="socialProof" data-section="socialProof">
|
|
<SocialProofOne
|
|
title="Trusted by Indie Creators"
|
|
description="Used by thousands of developers and agencies building production apps."
|
|
tag="Partners"
|
|
tagIcon={Users}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={["AppFlow", "DesignLab", "Venture Studio", "Indie Makers", "App Distribution Hub", "CloudInfra", "Developer Collective", "Design Agency Pro"]}
|
|
speed={40}
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFive
|
|
title="What Developers Say"
|
|
description="Hear from creators shipping with Native Line."
|
|
tag="Testimonials"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Chen, Indie Developer", date: "15 January 2025", title: "Shipped my first app in 48 hours", quote: "I wanted to build an app but was intimidated by Swift. Native Line made it effortless. I described my idea and had a production-ready app within two days.", tag: "Early Access", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-professional-headshot-photo-of-a-confi-1772522998773-448b63b6.png", avatarAlt: "Sarah Chen", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-professional-headshot-photo-of-a-confi-1772522998773-448b63b6.png?_wi=1", imageAlt: "Sarah Chen testimonial"
|
|
},
|
|
{
|
|
id: "2", name: "Marcus Johnson, Founder", date: "12 January 2025", title: "Game-changer for prototyping", quote: "As a design agency, Native Line lets us deliver functional native prototypes to clients immediately. No more timelines or external dev teams. We control the process and maintain full code ownership.", tag: "Agency", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-professional-headshot-photo-of-a-diffe-1772522999720-62e43383.png", avatarAlt: "Marcus Johnson", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-professional-headshot-photo-of-a-diffe-1772522999720-62e43383.png?_wi=1", imageAlt: "Marcus Johnson testimonial"
|
|
},
|
|
{
|
|
id: "3", name: "Elena Rodriguez, Designer", date: "8 January 2025", title: "I can build without developers", quote: "I always needed engineers to bring ideas to life. Native Line changes everything. I can prototype real native apps now. The conversational interface feels natural.", tag: "Design", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-professional-headshot-of-a-designer-or-1772522998331-d9e779d1.png", avatarAlt: "Elena Rodriguez", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-professional-headshot-of-a-designer-or-1772522998331-d9e779d1.png", imageAlt: "Elena Rodriguez testimonial"
|
|
},
|
|
{
|
|
id: "4", name: "David Park, Solopreneur", date: "5 January 2025", title: "No more excuses—shipping apps", quote: "I had ideas sitting in my notes for months. With Native Line, there's no excuse anymore. I can validate ideas fast instead of overthinking them. I've shipped three apps in three weeks.", tag: "Solopreneur", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-professional-headshot-of-another-start-1772522998549-425ed9d6.png", avatarAlt: "David Park", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-professional-headshot-of-another-start-1772522998549-425ed9d6.png", imageAlt: "David Park testimonial"
|
|
},
|
|
{
|
|
id: "5", name: "Lisa Wong, Consultant", date: "2 January 2025", title: "The future of app development", quote: "I consult with startups on app strategy. Native Line is instantly becoming my first recommendation. It's not replacing developers—it's enabling creators. The native quality is exceptional.", tag: "Consultant", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-professional-headshot-photo-of-a-confi-1772522998773-448b63b6.png", avatarAlt: "Lisa Wong", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-professional-headshot-photo-of-a-confi-1772522998773-448b63b6.png?_wi=2", imageAlt: "Lisa Wong testimonial"
|
|
},
|
|
{
|
|
id: "6", name: "James Mitchell, Founder", date: "30 December 2024", title: "80% faster time to market", quote: "Building my SaaS app used to take months. With Native Line, I have a native companion app shipped in weeks. The speed advantage let us get feedback months earlier than competitors.", tag: "Founder", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-professional-headshot-photo-of-a-diffe-1772522999720-62e43383.png", avatarAlt: "James Mitchell", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-professional-headshot-photo-of-a-diffe-1772522999720-62e43383.png?_wi=2", imageAlt: "James Mitchell testimonial"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqDouble
|
|
title="Common Questions"
|
|
description="Everything you need to know."
|
|
tag="FAQ"
|
|
tagIcon={HelpCircle}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqsAnimation="slide-up"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "What does Native Line generate?", content: "Complete, production-ready Swift source code for iOS, iPad, and macOS. Genuine native code—not wrappers. You get full control and can modify, extend, or maintain it yourself. Ready for App Store submission."
|
|
},
|
|
{
|
|
id: "2", title: "Do I need to know Swift?", content: "No. Describe your app conversationally and Native Line handles the complexity. You never need to write Swift if you don't want to. However, developers can always review and modify the generated code."
|
|
},
|
|
{
|
|
id: "3", title: "Do I own the code?", content: "Yes, 100%. No vendor lock-in. You can modify, extend, and maintain your apps however you want. Hire developers to continue working on it if needed. It's completely yours."
|
|
},
|
|
{
|
|
id: "4", title: "What's the pricing model?", content: "Native Line is a desktop macOS application with flexible licensing. We're in early access with fair pricing for indie creators. You own the apps you generate regardless of subscription status."
|
|
},
|
|
{
|
|
id: "5", title: "Is Native Line Cloud available?", content: "Coming soon. Optional backend infrastructure services (auth, database, APIs) for your generated apps. Completely optional—use any backend you prefer or build your own."
|
|
},
|
|
{
|
|
id: "6", title: "Can I build for multiple platforms?", content: "Yes. Native Line generates for iOS, iPad, and macOS. Each app is true native code for its platform. Build separate apps for each or unified apps working across all three."
|
|
},
|
|
{
|
|
id: "7", title: "How long does generation take?", content: "Simple apps generate in minutes. Complex apps with multiple features take longer (typically 15-45 minutes). Watch real-time previews and iterate until perfect."
|
|
},
|
|
{
|
|
id: "8", title: "Can I use it for client projects?", content: "Yes. Perfect for agencies and studios. Generate apps for clients, deliver source code, or maintain yourself. Licensing supports commercial use. Whitelabel options available."
|
|
},
|
|
{
|
|
id: "9", title: "Can I monetize my apps?", content: "Your apps are fully yours to monetize. Submit to the App Store, set pricing, use in-app purchases, or offer free. We don't take any revenue share."
|
|
},
|
|
{
|
|
id: "10", title: "What if I need developer support later?", content: "You own the source code, so modify it yourself or hire developers. The code is standard Swift using familiar iOS patterns. We provide documentation and community support."
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactFaq
|
|
ctaTitle="Ready to Build?"
|
|
ctaDescription="Download Native Line for macOS today and ship your first app in hours."
|
|
ctaButton={{
|
|
text: "Download", href: "https://example.com/download"
|
|
}}
|
|
ctaIcon={Download}
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "Available on Windows or Linux?", content: "Native Line is currently macOS only. We're focused on providing the best native experience on Apple's ecosystem. Other platforms coming soon."
|
|
},
|
|
{
|
|
id: "2", title: "Early access or beta?", content: "Yes. Download Native Line today for immediate access. Beta testers get special pricing and direct team access for feedback."
|
|
},
|
|
{
|
|
id: "3", title: "Free trial available?", content: "Yes. Try free for 7 days. Generate a complete app and see the power firsthand. No credit card required."
|
|
},
|
|
{
|
|
id: "4", title: "Need help?", content: "We have community Discord, email support, and comprehensive docs. Enterprise customers get direct support and consultation."
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
columns={[
|
|
{
|
|
title: "Product", items: [
|
|
{ label: "Download", href: "https://example.com/download" },
|
|
{ label: "Features", href: "#features" },
|
|
{ label: "How It Works", href: "#process" },
|
|
{ label: "Native Line Cloud", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Resources", items: [
|
|
{ label: "Documentation", href: "https://docs.example.com" },
|
|
{ label: "Community", href: "https://discord.example.com" },
|
|
{ label: "Blog", href: "https://blog.example.com" },
|
|
{ label: "Roadmap", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#about" },
|
|
{ label: "Contact", href: "#contact" },
|
|
{ label: "Privacy", href: "#" },
|
|
{ label: "Terms", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
copyrightText="© 2025 Native Line. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|