163 lines
6.7 KiB
TypeScript
163 lines
6.7 KiB
TypeScript
import { Badge } from "@/components/ui/badge";
|
|
import { Truck, Box, Code, BatteryCharging } from "lucide-react";
|
|
import Checkout from "../../components/Order/Checkout";
|
|
import FAQ, { qnaProps } from "../../components/Order/FAQ";
|
|
import Specs from "../../components/Order/Specs";
|
|
import { devkitPaymentLink } from "@/lib/data";
|
|
import YoutubeDemo from "../../components/LandingPage/YoutubeDemo";
|
|
import ProductGallery from "../../components/LandingPage/ProductGallery";
|
|
import { CreditCardIcon, PowerIcon, ShieldCheckIcon, Settings2Icon, FileTextIcon, WifiIcon } from "lucide-react";
|
|
|
|
|
|
const SubtitleText =
|
|
"The AI Devkit comes with a fully assembled PCB with an attachable Microspeaker and a 3.7V LiPo battery. Once charged it powers unlimited AI conversations with your AI characters.";
|
|
|
|
|
|
const images = [
|
|
{
|
|
src: "/products/devkit1.png",
|
|
alt: "Elato Device - white",
|
|
},
|
|
{
|
|
src: "/products/devkit2.png",
|
|
alt: "Elato Device - gray",
|
|
},
|
|
{
|
|
src: "/products/devkit3.png",
|
|
alt: "Elato Device - white",
|
|
},
|
|
{
|
|
src: "/products/devkit4.png",
|
|
alt: "Elato Device - gray",
|
|
},
|
|
{
|
|
src: "/products/devkit5.png",
|
|
alt: "Elato Device - black",
|
|
},
|
|
{
|
|
src: "/products/devkit6.png",
|
|
alt: "Elato Device - white",
|
|
},
|
|
];
|
|
|
|
const ICON_SIZE = 20;
|
|
|
|
const qna: qnaProps[] = [
|
|
{
|
|
question: "What is the AI Devkit?",
|
|
answer: "The AI Devkit is a fully assembled PCB with an attachable Microspeaker and a 3.7V LiPo battery. Once charged it you can use it to have unlimited AI conversations with your AI characters.",
|
|
icon: <Box size={ICON_SIZE} />,
|
|
},
|
|
{
|
|
question: "Can I burn my own firmware to the AI Devkit?",
|
|
answer: "Yes! You can burn your own firmware to the AI Devkit using the Arduino IDE. Our Github highlights the steps to run your firmware, edge server, and backend locally.",
|
|
icon: <Code size={ICON_SIZE} />,
|
|
},
|
|
{
|
|
question: "What is the battery life of the AI Devkit?",
|
|
answer: "The AI Devkit has a 3.7V LiPo battery that lasts for 4-6 hours on a single charge. You can charge it using the USB Type-C port on the device.",
|
|
icon: <BatteryCharging size={ICON_SIZE} />,
|
|
},
|
|
{
|
|
question: "What happens after the 1-month free premium subscription?",
|
|
answer: "After your 1-month free trial, you can choose to continue with the premium features for $10/month, or use our free tier with limited usage. We'll remind you before the trial ends, so you can decide what's best for you.",
|
|
icon: <CreditCardIcon size={ICON_SIZE} />,
|
|
},
|
|
{
|
|
question: "How do I set up my Elato?",
|
|
answer: "Setting up your Elato is easy. Just press the main button on the device, find the ELATO-DEVICE wifi network, and register your device with your email. You'll be chatting with your favorite AI character in seconds.",
|
|
icon: <PowerIcon size={ICON_SIZE} />,
|
|
},
|
|
{
|
|
question: "Can I use Elato AI with any home wifi network?",
|
|
answer: "Yes! Elato AI will automatically connect to up to 5 private wifi networks or your phone hotspot. If you are having trouble connecting, please try restarting the device.",
|
|
icon: <WifiIcon size={ICON_SIZE} />,
|
|
},
|
|
];
|
|
|
|
const includedItems = [
|
|
"Fully assembled PCB",
|
|
"Speaker",
|
|
"3.7V LiPo Battery",
|
|
"USB Type-C Charging Cable",
|
|
"1 Month FREE Premium Subscription",
|
|
"Quick Start Guide",
|
|
];
|
|
|
|
const technicalSpecs = [
|
|
"Dimensions: 4cm x 3.8cm x 0.5cm",
|
|
"Battery Life: 4+ days standby, 6 hours active use",
|
|
"Connectivity: Bluetooth 2.4 GHz, Wi-Fi + Hotspot",
|
|
"Access any AI character from Elato",
|
|
"Create your AI character with any voice and a bespoke personality",
|
|
];
|
|
|
|
export default function Component() {
|
|
return (
|
|
<div className="container px-0 mx-auto">
|
|
{/* <ProductsAndSub /> */}
|
|
{/* Hero Section */}
|
|
<div className="flex flex-col-reverse gap-6 sm:gap-12 md:flex-row items-start sm:mt-4 mb-16">
|
|
<div className="w-full md:w-3/5 px-4">
|
|
<ProductGallery images={images} />
|
|
</div>
|
|
<div className="md:w-2/5 px-6 mt-6">
|
|
<div className="flex flex-row items-center gap-2 mb-4">
|
|
<Badge
|
|
variant="secondary"
|
|
className="text-sm border-0 flex flex-row items-center gap-1 text-white bg-gradient-to-r from-yellow-500 to-amber-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-yellow-300 dark:focus:ring-yellow-800 font-medium rounded-lg text-center"
|
|
>
|
|
<Box size={16} /> {"Early Bird"}
|
|
</Badge>
|
|
<Badge
|
|
variant="secondary"
|
|
className="text-sm font-medium rounded-lg text-center flex flex-row items-center gap-1"
|
|
>
|
|
<Truck size={16} /> {"Kickstarter Pre-Order!"}
|
|
</Badge>
|
|
</div>
|
|
<h1 className="text-3xl font-silkscreen mt-10 mb-4 font-semibold tracking-tight sm:text-4xl">
|
|
AI Dev Kit
|
|
</h1>
|
|
<p className="text-lg text-muted-foreground mb-6 -mt-2">
|
|
{SubtitleText}
|
|
</p>
|
|
<Checkout deviceCost={45} originalCost={100} paymentLink={devkitPaymentLink} />
|
|
</div>
|
|
</div>
|
|
{/* <div className="my-12 px-4">
|
|
<YoutubeDemo caption={"This demo shows the AI Devkit in action"} />
|
|
</div> */}
|
|
|
|
{/* <ProductCarousel /> */}
|
|
<div className="flex flex-col gap-12 px-6">
|
|
{/* Product Details */}
|
|
<Specs includedItems={includedItems} technicalSpecs={technicalSpecs} />
|
|
{/* Key Features */}
|
|
{/* <KeyFeatures /> */}
|
|
|
|
{/* Testimonials */}
|
|
{/* <Reviews /> */}
|
|
|
|
{/* FAQ Section */}
|
|
<FAQ qna={qna} />
|
|
|
|
{/* Final CTA */}
|
|
{/* <div className="text-center mb-16">
|
|
<h2 className="text-3xl font-bold mb-4">
|
|
Ready to Meet Your New AI-in-a-Box?
|
|
</h2>
|
|
<p className="text-xl text-muted-foreground mb-8">
|
|
Order now and start your adventure with Elato AI!
|
|
</p>
|
|
<Button size="lg" className="text-lg px-8">
|
|
Get Your Elato AI Today{" "}
|
|
<ChevronRight className="ml-2 h-5 w-5" />
|
|
</Button>
|
|
</div> */}
|
|
|
|
{/* Delivery Notice */}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|