238 lines
14 KiB
TypeScript
238 lines
14 KiB
TypeScript
import Link from "next/link"
|
|
import { ChevronRight, Zap, Star, Home } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { DEVICE_COST, SUBSCRIPTION_COST } from "@/lib/data";
|
|
import { createClient } from "@/utils/supabase/server"
|
|
import { getAllPersonalities } from "@/db/personalities"
|
|
import { CharacterShowcase } from "./components/LandingPage/CharacterShowcase";
|
|
import { CreateCharacterShowcase } from "./components/LandingPage/CreateCharacterShowcase";
|
|
import ProductsSection from "./components/LandingPage/ProductsSection";
|
|
import Image from "next/image";
|
|
import { fetchGithubStars } from "./actions";
|
|
|
|
export default async function LandingPage() {
|
|
const supabase = createClient();
|
|
const { stars = 0 } = await fetchGithubStars("akdeb/ElatoAI");
|
|
|
|
const allPersonalities = await getAllPersonalities(supabase);
|
|
const adultPersonalities = allPersonalities.filter((personality) => !personality.is_story && !personality.is_child_voice);
|
|
return (
|
|
<div className="flex min-h-screen flex-col bg-[#FCFAFF]">
|
|
<main className="flex-1">
|
|
{/* Hero Section */}
|
|
<section className="w-full py-12 md:py-20">
|
|
<div className="container px-4 md:px-6 max-w-screen-lg mx-auto">
|
|
<div className="grid gap-6 lg:grid-cols-1 lg:gap-12 items-center">
|
|
<div className="flex flex-col items-center justify-center space-y-4">
|
|
<h1 className="text-5xl text-center md:text-6xl font-bold tracking-tight text-purple-900" style={{ lineHeight: '1.2' }}>
|
|
|
|
<span className="text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-pink-500">
|
|
Realtime, Conversational AI
|
|
</span>{" "} on ESP32 with Arduino and Edge Functions
|
|
</h1>
|
|
|
|
<p className="text-xl text-gray-600 text-center max-w-[600px]">
|
|
Attach your <span className="font-silkscreen mx-1">Elato</span> device to any toy or plushie and watch them become AI characters you can talk
|
|
to!
|
|
</p>
|
|
|
|
<div className="flex flex-col gap-4 sm:gap-8 pt-4">
|
|
<div className="flex flex-col sm:flex-row gap-3">
|
|
<Link href={"/products"}>
|
|
<Button
|
|
size="lg"
|
|
className="w-full sm:w-auto flex-row items-center gap-2 bg-gradient-to-r from-purple-600 to-pink-500 text-white border-0 text-lg h-14"
|
|
>
|
|
<span>Get Elato Now</span>
|
|
<ChevronRight className="ml-2 h-5 w-5" />
|
|
</Button>
|
|
</Link>
|
|
|
|
<Link href="/home">
|
|
<Button
|
|
size="lg"
|
|
variant="outline"
|
|
className="w-full sm:w-auto flex-row items-center gap-2 border-purple-600 text-purple-600 hover:bg-purple-50 text-lg h-14"
|
|
>
|
|
<span>See Characters</span>
|
|
<Home className="ml-2 h-5 w-5" />
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="flex flex-col items-center justify-center space-y-2">
|
|
<p className="text-gray-700 text-sm">If you like this project, please star it on GitHub!</p>
|
|
<a href="https://github.com/akdeb/ElatoAI" target="_blank" rel="noopener noreferrer"
|
|
className="flex items-center bg-gray-900 hover:bg-gray-800 transition-colors text-white px-4 py-2 rounded-md">
|
|
<svg viewBox="0 0 24 24" className="h-5 w-5 mr-2 fill-white" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
|
</svg>
|
|
<span className="font-medium">Star on GitHub</span>
|
|
<span className="ml-2 bg-white text-gray-900 px-2 py-0.5 rounded-md text-xs font-bold">{stars}</span>
|
|
</a>
|
|
</div>
|
|
|
|
{/* <div className="flex items-center space-x-3">
|
|
<Link href="https://discord.gg/your-discord" target="_blank" rel="noopener noreferrer"
|
|
className="text-purple-600 hover:text-purple-800 transition-colors">
|
|
<FaDiscord size={24} />
|
|
</Link>
|
|
<Link href="https://tiktok.com/@elatoai" target="_blank" rel="noopener noreferrer"
|
|
className="text-purple-600 hover:text-purple-800 transition-colors">
|
|
<FaTiktok size={24} />
|
|
</Link>
|
|
</div> */}
|
|
|
|
</div>
|
|
|
|
<div className="flex flex-row gap-2 items-center">
|
|
<div className="w-full py-8">
|
|
<h3 className="text-center text-sm font-medium text-gray-500 mb-6">POWERED BY</h3>
|
|
<div className="flex flex-wrap justify-center items-center gap-12">
|
|
<a href="https://vercel.com" target="_blank" rel="noopener noreferrer" className="transition-all">
|
|
<Image src="/logos/vercel.png" alt="Vercel" width={100} height={24} style={{ height: '36px', width: 'auto' }} />
|
|
</a>
|
|
<a href="https://deno.com" target="_blank" rel="noopener noreferrer" className="transition-all">
|
|
<Image src="/logos/deno.png" alt="Deno" width={100} height={24} style={{ height: '36px', width: 'auto' }} />
|
|
</a>
|
|
<a href="https://supabase.com" target="_blank" rel="noopener noreferrer" className="transition-all">
|
|
<Image src="/logos/supabase.png" alt="Supabase" width={100} height={24} style={{ height: '48px', width: 'auto' }} />
|
|
</a>
|
|
<a href="https://arduino.cc" target="_blank" rel="noopener noreferrer" className="transition-all">
|
|
<Image src="/logos/arduino.png" alt="Arduino" width={100} height={24} style={{ height: '36px', width: 'auto' }} />
|
|
</a>
|
|
<a href="https://espressif.com" target="_blank" rel="noopener noreferrer" className="transition-all">
|
|
<Image src="/logos/espressif.png" alt="Espressif ESP32" width={100} height={24} style={{ height: '36px', width: 'auto' }} />
|
|
</a>
|
|
<a href="https://platformio.org" target="_blank" rel="noopener noreferrer" className="transition-all">
|
|
<Image src="/logos/platformio.png" alt="PlatformIO" width={100} height={24} style={{ height: '36px', width: 'auto' }} />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Products Section */}
|
|
<ProductsSection />
|
|
|
|
{/* How It Works */}
|
|
<section className="w-full py-12 bg-gradient-to-b from-purple-50 to-white">
|
|
<div className="container px-4 md:px-6">
|
|
<div className="text-center mb-10">
|
|
<h2 className="text-3xl md:text-4xl font-bold mb-6 text-gray-800">
|
|
Super Simple to Use
|
|
</h2>
|
|
<p className="text-lg text-gray-600 mt-2">Just 3 easy steps to epic conversations</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<div className="bg-white rounded-xl p-6 shadow-lg border border-purple-100 transform transition-transform hover:scale-105">
|
|
<div className="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-4">
|
|
<span className="text-xl font-bold text-purple-600">1</span>
|
|
</div>
|
|
<h3 className="text-xl font-bold text-purple-900 mb-2">Attach</h3>
|
|
<p className="text-gray-600">Attach the Elato device to any toy or plushie</p>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-xl p-6 shadow-lg border border-purple-100 transform transition-transform hover:scale-105">
|
|
<div className="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-4">
|
|
<span className="text-xl font-bold text-purple-600">2</span>
|
|
</div>
|
|
<h3 className="text-xl font-bold text-purple-900 mb-2">Configure</h3>
|
|
<p className="text-gray-600">Use our <a href="/home" className="text-purple-600">web app</a> to set up your toy's personality</p>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-xl p-6 shadow-lg border border-purple-100 transform transition-transform hover:scale-105">
|
|
<div className="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-4">
|
|
<span className="text-xl font-bold text-purple-600">3</span>
|
|
</div>
|
|
<h3 className="text-xl font-bold text-purple-900 mb-2">Talk</h3>
|
|
<p className="text-gray-600">Start chatting with your toy - it's that simple!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
{/* Character Showcase */}
|
|
<CharacterShowcase allPersonalities={adultPersonalities} />
|
|
|
|
{/* Create Character Showcase */}
|
|
<CreateCharacterShowcase />
|
|
|
|
{/* Pricing */}
|
|
<section className="w-full py-16 bg-white">
|
|
<div className="container px-4 md:px-6">
|
|
<div className="max-w-3xl mx-auto bg-gradient-to-r from-purple-600 to-pink-500 rounded-3xl overflow-hidden shadow-xl">
|
|
<div className="p-8 md:p-12 text-white text-center">
|
|
<h2 className="text-3xl md:text-4xl font-bold mb-6">Get Your <span className="font-silkscreen">Elato</span> Today!</h2>
|
|
<div className="flex flex-col md:flex-row items-center justify-center gap-4 mb-6">
|
|
<div className="text-5xl md:text-6xl font-bold">${DEVICE_COST}</div>
|
|
<div className="text-xl">
|
|
<span className="block">One-time purchase</span>
|
|
<span className="block text-purple-100">+ ${SUBSCRIPTION_COST}/month after first FREE month<br /> <span className="text-xs">(or use your own OpenAI API key)</span></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8 text-left max-w-2xl mx-auto">
|
|
<div className="flex items-start space-x-2">
|
|
<div className="bg-white rounded-full p-1 mt-1">
|
|
<Zap className="h-4 w-4 text-purple-600" />
|
|
</div>
|
|
<span>Works with ANY toy or plushie</span>
|
|
</div>
|
|
<div className="flex items-start space-x-2">
|
|
<div className="bg-white rounded-full p-1 mt-1">
|
|
<Zap className="h-4 w-4 text-purple-600" />
|
|
</div>
|
|
<span>Create unlimited AI characters</span>
|
|
</div>
|
|
<div className="flex items-start space-x-2">
|
|
<div className="bg-white rounded-full p-1 mt-1">
|
|
<Zap className="h-4 w-4 text-purple-600" />
|
|
</div>
|
|
<span>First month subscription FREE</span>
|
|
</div>
|
|
<div className="flex items-start space-x-2">
|
|
<div className="bg-white rounded-full p-1 mt-1">
|
|
<Zap className="h-4 w-4 text-purple-600" />
|
|
</div>
|
|
<span>Easy to set up in minutes</span>
|
|
</div>
|
|
</div>
|
|
|
|
<Button size="lg" className="bg-white text-purple-600 hover:bg-purple-50 text-lg h-14 px-8">
|
|
<Link href={"/products"}>Buy Now</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* FAQ */}
|
|
{/* <section className="w-full py-16 bg-purple-50">
|
|
<FAQ className="bg-purple-50" titleClassName="text-purple-900" />
|
|
</section> */}
|
|
|
|
|
|
{/* CTA */}
|
|
{/* <section className="w-full py-20 bg-gradient-to-r from-purple-600 to-pink-500 text-white">
|
|
<div className="container px-4 md:px-6 text-center">
|
|
<h2 className="text-3xl md:text-5xl font-bold mb-6">Ready to Bring Your Toys to Life?</h2>
|
|
<p className="text-xl mb-8 max-w-2xl mx-auto">
|
|
Order your Elato device today and watch the magic happen!
|
|
</p>
|
|
<Button size="lg" className="bg-white text-purple-600 hover:bg-purple-50 text-lg h-14 px-8">
|
|
<Link href={"/products"}>Get Elato for ${DEVICE_COST}</Link>
|
|
</Button>
|
|
<p className="mt-4 text-purple-100">First month subscription FREE, then just ${SUBSCRIPTION_COST}/month <span className="text-xs">(or use your own OpenAI API key)</span></p>
|
|
</div>
|
|
</section> */}
|
|
</main>
|
|
</div>
|
|
)
|
|
}
|
|
|