remove products files and reroute to homepage
This commit is contained in:
akdeb
parent
744780633f
commit
6d8e3d4259
9 changed files with 7 additions and 709 deletions
|
|
@ -1,71 +0,0 @@
|
|||
"use client";
|
||||
|
||||
import Illustration from "@/public/hero_section.svg";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { CalendarCheck, Star } from "lucide-react";
|
||||
import { FaDiscord } from "react-icons/fa";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
businessDemoLink,
|
||||
discordInviteLink,
|
||||
githubPublicLink,
|
||||
} from "@/lib/data";
|
||||
import PreorderButton from "../PreorderButton";
|
||||
|
||||
export default function EndingSection() {
|
||||
return (
|
||||
<section className="py-8 md:py-24">
|
||||
<div className="max-w-4xl text-center mx-8 md:mx-auto gap-10 flex flex-col">
|
||||
<h1
|
||||
className="font-normal text-xl text-gray-600"
|
||||
>
|
||||
Bringing creative, personalized stories to toys, plushies and a whole lot
|
||||
more.
|
||||
</h1>
|
||||
|
||||
<h1 className="text-4xl md:text-5xl mt-8 text-light">
|
||||
Get your <span className="font-silkscreen font-bold mt-1 px-2">Elato</span> today!
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div className="mt-20 flex flex-col items-center justify-center gap-8">
|
||||
<div className="flex items-center justify-center gap-8 flex-wrap">
|
||||
<PreorderButton
|
||||
size="lg"
|
||||
buttonText="Buy Now"
|
||||
className="h-10"
|
||||
/>
|
||||
<Link href={businessDemoLink} passHref>
|
||||
<Button
|
||||
variant="secondary"
|
||||
className="flex flex-row bg-white items-center gap-2 font-medium text-base text-stone-800 leading-8 rounded-full border-2 border-stone-900"
|
||||
>
|
||||
<CalendarCheck size={20} />
|
||||
<span>Book a Demo</span>
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex items-center justify-center gap-8 flex-wrap">
|
||||
<Link href={githubPublicLink} passHref>
|
||||
<Button
|
||||
variant="link"
|
||||
className="flex flex-row items-center gap-2 font-medium text-base text-stone-800 leading-8 rounded-full bg-transparent"
|
||||
>
|
||||
<Star size={20} className="text-2xl" />
|
||||
<span>Star us on GitHub</span>
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href={discordInviteLink} passHref>
|
||||
<Button
|
||||
variant="link"
|
||||
className="flex flex-row items-center gap-2 font-medium text-base text-stone-800 leading-8 rounded-full bg-transparent"
|
||||
>
|
||||
<FaDiscord className="text-2xl" />
|
||||
<span>Join our Discord</span>
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
@ -23,7 +23,7 @@ const products: Product[] = [
|
|||
name: "Elato AI Device",
|
||||
description: "Transform any toy into an AI companion with any voice and personality with our advanced conversational AI",
|
||||
price: 55,
|
||||
url: "/products",
|
||||
url: "https://elatoai.com/products",
|
||||
imageUrl: "/products/device1.jpeg",
|
||||
features: [
|
||||
"Works with any toy or plushie",
|
||||
|
|
@ -36,8 +36,8 @@ const products: Product[] = [
|
|||
id: "2",
|
||||
name: "Elato AI Dev Kit",
|
||||
description: "Create custom AI experiences with our developer-friendly kit, complete with sensors and tutorials",
|
||||
price: 45,
|
||||
url: "/products/ai-devkit",
|
||||
price: 65,
|
||||
url: "https://elatoai.com/products/ai-devkit",
|
||||
imageUrl: "/products/devkit1.png",
|
||||
features: [
|
||||
"Flash our open source code to your device",
|
||||
|
|
|
|||
|
|
@ -169,7 +169,7 @@ export function NavbarDropdownMenu({ user, stars }: NavbarMenuButtonProps) {
|
|||
<DropdownMenuSeparator />
|
||||
<div className="flex flex-row gap-2">
|
||||
<Link
|
||||
href="/products"
|
||||
href="https://elatoai.com/products"
|
||||
passHref
|
||||
className="flex rounded-lg flex-row gap-2 items-center flex-1 bg-amber-100 dark:bg-amber-900/40 px-2 py-2 text-amber-800 dark:text-amber-200 hover:bg-yellow-100 dark:hover:bg-amber-900/60 transition-colors"
|
||||
>
|
||||
|
|
@ -187,7 +187,7 @@ export function NavbarDropdownMenu({ user, stars }: NavbarMenuButtonProps) {
|
|||
</div>
|
||||
</Link>
|
||||
<Link
|
||||
href="/products/ai-devkit"
|
||||
href="https://elatoai.com/products/ai-devkit"
|
||||
passHref
|
||||
className="flex rounded-lg flex-row gap-2 items-center flex-1 bg-blue-100 dark:bg-blue-900/40 px-2 py-2 text-blue-800 dark:text-blue-200 hover:bg-blue-200 dark:hover:bg-blue-900/60 transition-colors"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,45 +0,0 @@
|
|||
"use client";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import Link from "next/link";
|
||||
import { ShoppingCart } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface PreorderButtonProps {
|
||||
size: "sm" | "lg";
|
||||
buttonText: string;
|
||||
className?: string;
|
||||
iconOnMobile?: boolean;
|
||||
}
|
||||
|
||||
const PreorderButton = ({
|
||||
size,
|
||||
buttonText,
|
||||
className,
|
||||
iconOnMobile,
|
||||
}: PreorderButtonProps) => {
|
||||
const textSize = size == "sm" ? "text-sm" : "text-base";
|
||||
return (
|
||||
<Link href="/products" passHref>
|
||||
<Button
|
||||
className={cn(
|
||||
"flex flex-row items-center gap-2 font-medium text-base bg-stone-800 leading-8 rounded-full px-4",
|
||||
iconOnMobile ? "p-2 sm:p-4" : "",
|
||||
className
|
||||
)}
|
||||
size={size}
|
||||
>
|
||||
<ShoppingCart size={20} />
|
||||
{
|
||||
<span
|
||||
className={`${iconOnMobile ? "hidden sm:block" : ""} ${textSize}`}
|
||||
>
|
||||
{buttonText}
|
||||
</span>
|
||||
}
|
||||
</Button>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
export default PreorderButton;
|
||||
|
|
@ -1,233 +0,0 @@
|
|||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Bird, CheckCircle, Truck } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
interface Product {
|
||||
title: string;
|
||||
description: string;
|
||||
imageSrc: string;
|
||||
features: string[];
|
||||
components: string[];
|
||||
price: number;
|
||||
paymentLink: string;
|
||||
originalPrice: number;
|
||||
shadow: string;
|
||||
}
|
||||
|
||||
const DeliveryString = "Delivery starting November 2024";
|
||||
const SubscriptionString =
|
||||
"Preorder now to get access to Elato Voice Premium FREE for 2 months. $5/month after.";
|
||||
|
||||
const products: Product[] = [
|
||||
{
|
||||
title: "Elato Toy",
|
||||
description:
|
||||
"The Elato toy brings together AI and creative storytelling to create dynamic, personalized stories for children.",
|
||||
imageSrc: "/images/front_view.png",
|
||||
features: [
|
||||
"Dimensions: 4.5cm x 3.8cm x 1.9cm",
|
||||
"Unlimited access to Elato characters till we deliver your device",
|
||||
"On-the-go empathic companion for anyone",
|
||||
"Access any AI character from the Elato universe",
|
||||
"Compact and easy to use",
|
||||
"Customizable to fit any object",
|
||||
"Over 4 days standby and 6 hours of continuous voice interaction",
|
||||
"Understand your conversational insights",
|
||||
],
|
||||
components: ["The Elato toy", "USB Type-C cable"],
|
||||
originalPrice: 89,
|
||||
price: 57.99,
|
||||
// paymentLink: "https://buy.stripe.com/5kAg0q8dg9SUcCceUU",
|
||||
paymentLink: "/products",
|
||||
shadow: "0 4px 6px rgba(255, 215, 0, 0.2), 0 8px 24px rgba(218, 165, 32, 0.5) !important;",
|
||||
},
|
||||
{
|
||||
title: "Elato AI DIY Dev Kit",
|
||||
description:
|
||||
"The Elato AI Dev Kit is a fully programmable set of components for developers to create their own AI characters and integrate them into their projects.",
|
||||
imageSrc: "/images/devkit.png",
|
||||
features: [
|
||||
"All hardware components included in your Elato kit. No soldering required.",
|
||||
"Unlimited access to Elato characters on our website till we deliver your device",
|
||||
"Tools to create your own AI character",
|
||||
"Integrate your AI character into your projects",
|
||||
"Access to the Elato AI SDK",
|
||||
"Access to the Elato AI Discord community",
|
||||
],
|
||||
components: [
|
||||
"Mini ESP32-S3 device",
|
||||
"Microphone module",
|
||||
"Speaker module",
|
||||
"Battery module",
|
||||
"LED light module",
|
||||
"Switch",
|
||||
"USB-C cable",
|
||||
],
|
||||
originalPrice: 69,
|
||||
price: 45.99,
|
||||
// paymentLink: "https://buy.stripe.com/eVaeWmdxAc12fOo145",
|
||||
paymentLink: "/products",
|
||||
shadow: "0 4px 6px rgba(135, 206, 235, 0.2), 0 8px 24px rgba(70, 130, 180, 0.5) !important;",
|
||||
},
|
||||
];
|
||||
|
||||
const ProductsAndSub = () => {
|
||||
const SubscriptionNode = (
|
||||
<p className="inline-block text-sm mt-4">*{SubscriptionString}</p>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex-auto flex flex-col gap-6">
|
||||
<div className="flex flex-col gap-2">
|
||||
<h1 className="text-3xl font-medium">Products</h1>
|
||||
<p className="text-md text-gray-600 inline-block">
|
||||
Choose the product that best fits your needs.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-10">
|
||||
{products.map((product, index) => (
|
||||
<Card
|
||||
key={`productCard-${index}`}
|
||||
className={`w-full rounded-3xl max-w-2xl overflow-hidden transition-all duration-300 shadow-none`}
|
||||
>
|
||||
<CardHeader className="p-0">
|
||||
<div className="w-full">
|
||||
<Image
|
||||
src={product.imageSrc}
|
||||
alt={product.title}
|
||||
width={600} // Specify desired width
|
||||
height={400} // Specify desired height
|
||||
layout="responsive" // Use responsive layout
|
||||
style={{
|
||||
objectFit: "contain",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardFooter className="flex gap-6 justify-between items-center py-6 sm:px-14 bg-muted/50">
|
||||
<div className="flex flex-row items-baseline gap-2">
|
||||
<div className="text-2xl font-bold">
|
||||
${product.price}
|
||||
</div>
|
||||
<div className="text-lg text-muted-foreground opacity-80 line-through">
|
||||
${product.originalPrice}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Link href={product.paymentLink} passHref>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="primary"
|
||||
className="rounded-full shadow-xl"
|
||||
>
|
||||
Preorder Now
|
||||
</Button>
|
||||
</Link>
|
||||
</CardFooter>
|
||||
<CardContent className="sm:p-14 py-14 relative flex flex-col gap-2">
|
||||
<div className="flex flex-row items-center gap-2 absolute top-6 right-6 sm:right-14">
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="text-sm font-medium rounded-lg text-center flex flex-row items-center gap-1"
|
||||
>
|
||||
<Truck size={16} />{" "}
|
||||
{"FREE Shipping over $100"}
|
||||
</Badge>
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="text-sm border-0 flex flex-row items-center gap-1 text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-cyan-300 dark:focus:ring-cyan-800 font-medium rounded-lg text-center"
|
||||
>
|
||||
<Bird size={16} /> {"Early Bird"}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="mt-8 flex flex-col gap-2">
|
||||
<CardTitle className="text-xl font-medium mb-2">
|
||||
{product.title}
|
||||
</CardTitle>
|
||||
<p className="text-md text-muted-foreground">
|
||||
{product.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{SubscriptionNode}
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg my-2">
|
||||
Features
|
||||
</h3>
|
||||
<ul className="space-y-4 ml-4">
|
||||
<li className="flex flex-row gap-1 items-start">
|
||||
<CheckCircle
|
||||
style={{
|
||||
height: 16,
|
||||
width: 16,
|
||||
}}
|
||||
strokeWidth={3}
|
||||
className="mt-0.5 min-h-4 min-w-4 text-green-500 mr-2"
|
||||
/>
|
||||
<span className="text-sm">
|
||||
<span>
|
||||
Components in package
|
||||
</span>
|
||||
:{" "}
|
||||
{product.components.map(
|
||||
(components, index) => (
|
||||
<span
|
||||
key={
|
||||
"components_" +
|
||||
index
|
||||
}
|
||||
className="mr-2"
|
||||
>
|
||||
{index + 1}.{" "}
|
||||
{components}
|
||||
</span>
|
||||
)
|
||||
)}
|
||||
</span>
|
||||
</li>
|
||||
{product.features.map(
|
||||
(feature, index) => (
|
||||
<li
|
||||
key={"feature_" + feature}
|
||||
className="flex flex-row gap-1 items-start"
|
||||
>
|
||||
<CheckCircle
|
||||
style={{
|
||||
height: 16,
|
||||
width: 16,
|
||||
}}
|
||||
strokeWidth={3}
|
||||
className="mt-0.5 min-h-4 min-w-4 text-green-500 mr-2"
|
||||
/>
|
||||
<span className="text-sm">
|
||||
{feature}
|
||||
</span>
|
||||
</li>
|
||||
)
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground absolute bottom-6 right-6 sm:right-14">
|
||||
{DeliveryString}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProductsAndSub;
|
||||
|
|
@ -46,7 +46,7 @@ export default async function LandingPage() {
|
|||
|
||||
<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"}>
|
||||
<Link href={"https://elatoai.com/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"
|
||||
|
|
@ -213,7 +213,7 @@ export default async function LandingPage() {
|
|||
</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>
|
||||
<Link href={"https://elatoai.com/products"}>Buy Now</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,163 +0,0 @@
|
|||
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>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
import { getOpenGraphMetadata } from "@/lib/utils";
|
||||
import { Metadata } from "next";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Products",
|
||||
description: "Explore our products and find the perfect one for you.",
|
||||
...getOpenGraphMetadata("Products"),
|
||||
};
|
||||
|
||||
export default async function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex flex-1 flex-col mx-auto w-full max-w-[1400px] gap-6 sm:py-6 md:flex-row">
|
||||
<div className="md:max-w-screen-lg mx-auto">{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,170 +0,0 @@
|
|||
import { Badge } from "@/components/ui/badge";
|
||||
import { Truck, Box } from "lucide-react";
|
||||
import Checkout from "../components/Order/Checkout";
|
||||
import FAQ, { qnaProps } from "../components/Order/FAQ";
|
||||
import Specs from "../components/Order/Specs";
|
||||
import { DEVICE_COST, ORIGINAL_COST, paymentLink } 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 =
|
||||
"All AI characters packed into one fully assembled compact device that can be added to any object.";
|
||||
|
||||
const images = [
|
||||
{
|
||||
src: "/products/device1.jpeg",
|
||||
alt: "Elato Device - white",
|
||||
},
|
||||
{
|
||||
src: "/products/device2.jpeg",
|
||||
alt: "Elato Device - gray",
|
||||
},
|
||||
{
|
||||
src: "/products/device4.jpeg",
|
||||
alt: "Elato Device - white",
|
||||
},
|
||||
{
|
||||
src: "/products/device5.jpeg",
|
||||
alt: "Elato Device - gray",
|
||||
},
|
||||
{
|
||||
src: "/products/device6.jpeg",
|
||||
alt: "Elato Device - black",
|
||||
},
|
||||
{
|
||||
src: "/products/device7.jpeg",
|
||||
alt: "Elato Device - white",
|
||||
},
|
||||
{
|
||||
src: "/products/device8.jpeg",
|
||||
alt: "Elato Device - gray",
|
||||
},
|
||||
];
|
||||
|
||||
const ICON_SIZE = 20;
|
||||
|
||||
const includedItems = [
|
||||
"The Elato AI Device",
|
||||
"USB Type-C Charging Cable",
|
||||
// "Quick Start Guide",
|
||||
"1 Month FREE Premium Subscription",
|
||||
"2 Silicone Straps",
|
||||
];
|
||||
|
||||
const technicalSpecs = [
|
||||
"Dimensions: 4.5cm x 3.8cm x 1.9cm",
|
||||
"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",
|
||||
];
|
||||
|
||||
|
||||
const qna: qnaProps[] = [
|
||||
{
|
||||
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: "Is my conversation data private and secure?",
|
||||
answer: "We take your privacy seriously. All conversations are stored securely on our servers. You have full control over your data and can retrieve or delete it at any time. Reach out to us if you have any questions.",
|
||||
icon: <ShieldCheckIcon size={ICON_SIZE} />,
|
||||
},
|
||||
{
|
||||
question: "Can I customize my Elato AI's voice and personality?",
|
||||
answer: "Yes! You can choose from a variety of voices and personalities for your AI character. As you interact more, it will naturally adapt to your preferences and conversation style.",
|
||||
icon: <Settings2Icon size={ICON_SIZE} />,
|
||||
},
|
||||
{
|
||||
question: "Can I use Elato AI with my documents?",
|
||||
answer: "We are currently working on a robust Retrieval Augmented Generation (RAG) feature. It will be available very soon!",
|
||||
icon: <FileTextIcon 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} />,
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
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">
|
||||
Elato
|
||||
</h1>
|
||||
<p className="text-lg text-muted-foreground mb-6 -mt-2">
|
||||
{SubtitleText}
|
||||
</p>
|
||||
<Checkout deviceCost={DEVICE_COST} originalCost={ORIGINAL_COST} paymentLink={paymentLink} />
|
||||
<p className="text-sm text-muted-foreground/90">
|
||||
*Buy now to get access to Elato Premium
|
||||
FREE for 1 month. Fast shipping in 1 week.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="my-12 px-4">
|
||||
<YoutubeDemo caption="Watch the Elato Demo" />
|
||||
</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>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue