admin-valentin/AIvoices
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added new changes

Browse source
This commit is contained in:
akdeb 2025-04-20 21:05:55 +01:00
parent 4d35a141bd
commit cbb828a09a
21 changed files with 344 additions and 538 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
frontend-nextjs/app/components/LandingPage/ProductGallery.tsx
View file

@ -11,38 +11,14 @@ import {
CarouselPrevious,
} from "@/components/ui/carousel";
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",
},
];
interface ProductGalleryProps {
images: {
src: string;
alt: string;
}[];
}
export default function ProductGallery() {
export default function ProductGallery({ images }: ProductGalleryProps) {
const [selectedImage, setSelectedImage] = useState(images[0]);
return (

30
frontend-nextjs/app/components/LandingPage/ProductsSection.tsx
View file

@ -32,20 +32,20 @@ const products: Product[] = [
"Easy to set up in minutes",
]
},
// {
// 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",
// imageUrl: "/products/devkit.png",
// features: [
// "Flash our open source code to your device",
// "Flexible speaker and Lipo battery options",
// "Set your own voice and personality",
// "Attach a custom case"
// ]
// }
{
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",
imageUrl: "/products/devkit.png",
features: [
"Flash our open source code to your device",
"Flexible speaker and Lipo battery options",
"Set your own voice and personality",
"Attach a custom case"
]
}
];
export default function ProductsSection() {
@ -112,7 +112,7 @@ export default function ProductsSection() {
</p>
<Button
size="lg"
className="w-full sm:w-auto flex-row items-center gap-2 px-4 bg-gradient-to-r from-purple-600 to-pink-500 text-white border-0 text-md"
className="w-full sm:w-auto flex-row items-center gap-2 px-4 bg-purple-600 text-white border-0 text-md"
>
<ShoppingCart className="h-4 w-4" /> Buy Now
</Button>

72
frontend-nextjs/app/components/Nav/NavbarDropdownMenu.tsx
View file

@ -10,6 +10,7 @@ import {
BookOpen,
Blocks,
Gamepad2,
Cpu,
} from "lucide-react";
import Link from "next/link";
import { Button } from "@/components/ui/button";
@ -22,8 +23,8 @@ DropdownMenuContent,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { FaDiscord, FaGithub } from "react-icons/fa";
import { User } from "@supabase/supabase-js";
import {
businessDemoLink,
discordInviteLink,
feedbackFormLink,
githubPublicLink,
@ -108,7 +109,7 @@ export function NavbarDropdownMenu({ user, stars }: NavbarMenuButtonProps) {
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent
className="w-56 p-2 sm:mt-2 rounded-lg"
className="w-60 p-2 sm:mt-2 rounded-lg"
side="bottom"
align="end"
>
@ -120,6 +121,16 @@ export function NavbarDropdownMenu({ user, stars }: NavbarMenuButtonProps) {
<DropdownMenuGroup>
{user ? <LoggedInItems /> : <LoggedOutItems />}
<DropdownMenuSeparator />
<DropdownMenuItem>
<Link
href={businessDemoLink}
passHref
className="flex flex-row gap-2 w-full"
>
<CalendarCheck size={ICON_SIZE} />
<span>Business Demo</span>
</Link>
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuItem>
<Link
@ -131,7 +142,6 @@ export function NavbarDropdownMenu({ user, stars }: NavbarMenuButtonProps) {
>
<FaGithub size={ICON_SIZE} />
<span>GitHub</span>
</Link>
</DropdownMenuItem>
<DropdownMenuItem>
@ -157,24 +167,44 @@ export function NavbarDropdownMenu({ user, stars }: NavbarMenuButtonProps) {
</Link>
</DropdownMenuItem>
<DropdownMenuSeparator />
<Link
href="/products"
passHref
className="flex rounded-lg flex-row gap-2 items-center w-full bg-amber-100 dark:bg-amber-900/40 px-2 py-1 text-amber-800 dark:text-amber-200 hover:bg-yellow-100 dark:hover:bg-amber-900/60 transition-colors"
>
<Box
size={ICON_SIZE}
className="text-amber-600 dark:text-amber-400"
/>
<div className="flex flex-col">
<span className="font-medium text-sm text-amber-900 dark:text-amber-200">
Buy Now
</span>
<span className="text-xs text-amber-600 dark:text-amber-400">
Elato AI Toy
</span>
</div>
</Link>
<div className="flex flex-row gap-2">
<Link
href="/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"
>
<Box
size={ICON_SIZE}
className="text-amber-600 dark:text-amber-400"
/>
<div className="flex flex-col items-center">
<span className="font-medium text-xs text-amber-900 dark:text-amber-200">
AI Device
</span>
<span className="text-xs text-amber-600 dark:text-amber-400">
Buy Now
</span>
</div>
</Link>
<Link
href="/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"
>
<Cpu
size={ICON_SIZE}
className="text-blue-600 dark:text-blue-400"
/>
<div className="flex flex-col items-center">
<span className="font-medium text-xs text-blue-900 dark:text-blue-200">
AI Devkit
</span>
<span className="text-xs text-blue-600 dark:text-blue-400">
Buy Now
</span>
</div>
</Link>
</div>
</DropdownMenuContent>
</DropdownMenu>
);

90
frontend-nextjs/app/components/Order/Checkout.tsx
View file

@ -1,62 +1,22 @@
"use client";
import { useState } from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { ShoppingCart } from "lucide-react";
import { DEVICE_COST, ORIGINAL_COST, paymentLink } from "@/lib/data";
import { useToast } from "@/components/ui/use-toast";
import Link from "next/link";
const Checkout = () => {
const { toast } = useToast();
const [numberOfUnits, setNumberOfUnits] = useState(1);
const [productColor, setProductColor] = useState<ProductColor>("white");
interface CheckoutProps {
deviceCost: number;
originalCost: number;
paymentLink: string;
}
const incrementUnits = () => {
setNumberOfUnits((prev) => prev + 1);
};
const Checkout = ({ deviceCost, originalCost, paymentLink }: CheckoutProps) => {
const decrementUnits = () => {
setNumberOfUnits((prev) => Math.max(1, prev - 1));
};
const deviceCost = numberOfUnits * DEVICE_COST;
const originalCost = numberOfUnits * ORIGINAL_COST;
const totalSavings = originalCost - deviceCost;
const freeShipping = deviceCost >= 100;
const handleCheckout = async () => {
try {
const response = await fetch("/api/checkout", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
quantity: numberOfUnits,
color: productColor,
free_shipping: freeShipping,
}),
});
if (!response.ok) {
throw new Error();
}
const { url } = await response.json();
window.location.href = url;
} catch (error) {
toast({
variant: "destructive",
title: "Payment Error",
description:
"There was an error processing your payment. Please try again or reach out if this persists.",
});
}
};
return (
<div className="flex flex-col gap-6">
<div className="flex items-center gap-4 flex-wrap">
@ -72,45 +32,11 @@ const Checkout = () => {
<p className="text-sm text-gray-400">FREE Shipping</p>
)}
<div className="flex items-center gap-4 mb-6">
{/* <div className="flex items-center gap-4">
<div className="flex items-center border rounded-md">
<Button
variant="ghost"
size="icon"
onClick={decrementUnits}
className="h-10 px-3 hover:bg-gray-100"
>
<Minus className="h-4 w-4" />
</Button>
<input
type="number"
value={numberOfUnits}
onChange={(e) =>
setNumberOfUnits(
Math.max(1, parseInt(e.target.value) || 1)
)
}
className="w-16 text-center border-x bg-white h-10 focus:outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
min="1"
/>
<Button
variant="ghost"
size="icon"
onClick={incrementUnits}
className="h-10 px-3 hover:bg-gray-100"
>
<Plus className="h-4 w-4" />
</Button>
</div>
</div> */}
<Link href={paymentLink}>
<Button
size="lg"
size="sm"
// className="w-full h-10 rounded-full"
className="w-full rounded-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"
className="w-full rounded-full sm:w-auto flex-row items-center gap-2 text-white border-0 text-sm px-4 py-2"
// variant="upsell_primary"
// onClick={handleCheckout}

47
frontend-nextjs/app/components/Order/FAQ.tsx
View file

@ -5,60 +5,21 @@ import {
AccordionTrigger,
} from "@/components/ui/accordion";
import { cn } from "@/lib/utils";
import {
PowerIcon,
ShieldCheckIcon,
Settings2Icon,
FileTextIcon,
WifiIcon,
CreditCardIcon,
} from "lucide-react";
interface qnaProps {
export interface qnaProps {
question: string;
answer: string;
icon: React.ReactNode;
}
const ICON_SIZE = 20;
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} />,
},
];
const FAQ = ({
qna,
className,
titleClassName,
}: {
qna: qnaProps[];
className?: string;
titleClassName?: string;
}) => {

18
frontend-nextjs/app/components/Order/Specs.tsx
View file

@ -1,22 +1,6 @@
import { Check } from "lucide-react";
const includedItems = [
"The Elato AI Toy",
"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 Specs = () => {
const Specs = ({ includedItems, technicalSpecs }: { includedItems: string[], technicalSpecs: string[] }) => {
const CheckIcon = <Check className="h-5 w-5 text-primary flex-shrink-0" />;
return (
<div className="mb-16">

172
frontend-nextjs/app/privacy/page.tsx
View file

@ -1,172 +0,0 @@
// export const dynamic = "force-dynamic";
import { getOpenGraphMetadata } from "@/lib/utils";
import OurAddressSign from "../components/OurAddressSign";
import { Metadata } from "next";
export const metadata: Metadata = {
title: "Privacy Policy",
...getOpenGraphMetadata("Privacy Policy"),
};
export default async function Index() {
return (
<div className="flex w-full max-w-xl mx-auto mt-8 flex-col lg:w-1/2 px-4 gap-2 text-left m-2">
<p className="font-semibold text-2xl">
Privacy Policy for Elato AI
</p>
<p className="font-light text-md">Last Updated: 2/24/25</p>
<div className="flex flex-col gap-4 my-4">
<p>
{`Welcome to Elato AI ("we," "us," "our"). We are committed to protecting your personal information and your right to privacy. This Privacy Policy outlines how we handle, store, and use the information you provide us when you use our website, `}
<a
href="https://www.elatoai.com"
className="text-blue-400 underline"
target="_blank"
>
https://www.elatoai.com
</a>
{`, and our services.`}
</p>
<p className="text-lg font-semibold">
{" "}
1. Information We Collect{" "}
</p>{" "}
<p>
{" "}
We collect information that you voluntarily provide to us
when registering on our site, purchasing our hardware,
downloading our software, accessing our github repo, or
interacting with our AI characters. This information may
include:{" "}
</p>{" "}
<ul style={{ listStyleType: "initial" }} className="ml-8">
{" "}
<li>
{" "}
<strong>Personal Information:</strong> Your name, email
address, shipping address, and payment details for
transactions and communications.{" "}
</li>{" "}
<li>
{" "}
<strong>User Interactions:</strong> Data generated from
your interactions with our AI characters, such as text
inputs, voice recordings, and usage patterns.{" "}
</li>{" "}
<li>
{" "}
<strong>Open-Source Contributions:</strong> If you
contribute to our open-source codebase, we may collect
your username and any information you include in your
contributions.{" "}
</li>{" "}
<li>
{" "}
<strong>Feedback and Support:</strong> Information you
provide when seeking support or giving feedback,
including contact details and the content of your
communications.{" "}
</li>{" "}
</ul>{" "}
<p className="text-lg font-semibold">
{" "}
2. How We Use Your Information{" "}
</p>{" "}
<p>
The information we collect is used in the following ways:
</p>{" "}
<ul style={{ listStyleType: "initial" }} className="ml-8">
{" "}
<li>
{" "}
<strong>
To Provide and Improve Our Services:
</strong>{" "}
Enhancing the performance of our hardware and software,
personalizing user experiences, and improving AI
interactions based on usage data.{" "}
</li>{" "}
<li>
{" "}
<strong>To Process Transactions:</strong> Handling
payments, orders, deliveries, and related
communications.{" "}
</li>{" "}
<li>
{" "}
<strong>To Communicate with You:</strong> Sending
updates, security alerts, and administrative messages.{" "}
</li>{" "}
<li>
{" "}
<strong>
To Support Open-Source Collaboration:
</strong>{" "}
Managing and showcasing contributions to our open-source
projects, including attributing work to contributors.{" "}
</li>{" "}
<li>
{" "}
<strong>To Ensure Security and Compliance:</strong>{" "}
Monitoring for fraudulent activities, enforcing our
terms, and complying with legal obligations.{" "}
</li>{" "}
<li>
{" "}
<strong>To Analyze and Understand Usage:</strong>{" "}
Gathering insights to improve our platform, develop new
features, and make informed decisions.{" "}
</li>{" "}
</ul>
<p className="text-lg font-semibold">
3. How We Protect Your Information
</p>
<p>
We implement a variety of security measures to maintain the
safety of your personal information. Your personal
information is contained behind secured networks and is only
accessible by a limited number of persons who have special
access rights and are required to keep the information
confidential.
</p>
<p className="text-lg font-semibold">
4. Sharing Your Personal Information
</p>
<p>
We do not sell, trade, or otherwise transfer your personally
identifiable information to outside parties, except when we
believe release is appropriate to comply with the law,
enforce our site policies, or protect ours or others&apos;
rights, property, or safety.
</p>
<p className="text-lg font-semibold">5. Third-Party Services</p>
<p>
We currently do not offer any third party services on our
site.
</p>
<p className="text-lg font-semibold">6. Your Consent</p>
<p>
By using our site and services, you consent to our privacy
policy.
</p>
<p className="text-lg font-semibold">
7. Changes to Our Privacy Policy
</p>
<p>
We reserve the right to update this privacy policy at any
time. When we do, we will post a notification on our
website. Your continued use of the site and services
following the posting of changes to this policy will be
deemed your acceptance of those changes.
</p>
<p className="text-lg font-semibold">8. Contacting Us</p>
<p>
If there are any questions regarding this privacy policy,
you may contact me using the information below:
</p>
<OurAddressSign />
</div>
</div>
);
}

18
frontend-nextjs/app/products-inactive/layout.tsx
View file

@ -1,18 +0,0 @@
import { Metadata } from "next";
export const metadata: Metadata = {
title: "Products",
description: "Explore our products and find the perfect one for you.",
};
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>
);
}

18
frontend-nextjs/app/products-inactive/page.tsx
View file

@ -1,18 +0,0 @@
import ProductsAndSub from "../components/ProductsAndSub";
export default function Component() {
return (
<div className="container px-0 mx-auto">
{/* Hero Section */}
<p className="text-center text-muted-foreground mb-4">
These products are currently inactive. Check out our active
product{" "}
<a href="/products" className="text-primary underline">
here
</a>
.
</p>
<ProductsAndSub />
</div>
);
}

163
frontend-nextjs/app/products/ai-devkit/page.tsx Normal file
View file

@ -0,0 +1,163 @@
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>
);
}

106
frontend-nextjs/app/products/page.tsx
View file

@ -1,20 +1,100 @@
import { Badge } from "@/components/ui/badge";
import { Truck, Bird, Box } from "lucide-react";
import ProductImageCarousel from "../components/Order/ProductImageCarousel";
import { Truck, Box } from "lucide-react";
import Checkout from "../components/Order/Checkout";
import FAQ from "../components/Order/FAQ";
import Reviews from "../components/Order/Reviews";
import FAQ, { qnaProps } from "../components/Order/FAQ";
import Specs from "../components/Order/Specs";
import KeyFeatures from "../components/Order/KeyFeatures";
import { videoSrc, videoSrc2, videoSrc3, videoSrc4 } from "@/lib/data";
import VideoPlayer from "../components/LandingPage/VideoPlayer";
import ProductCarousel from "../components/ProductCarousel";
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">
@ -22,7 +102,7 @@ export default function Component() {
{/* 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 />
<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">
@ -45,7 +125,7 @@ export default function Component() {
<p className="text-lg text-muted-foreground mb-6 -mt-2">
{SubtitleText}
</p>
<Checkout />
<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.
@ -53,13 +133,13 @@ export default function Component() {
</div>
</div>
<div className="my-12 px-4">
<YoutubeDemo />
<YoutubeDemo caption="Watch the Elato Demo" />
</div>
{/* <ProductCarousel /> */}
<div className="flex flex-col gap-12 px-6">
{/* Product Details */}
<Specs />
<Specs includedItems={includedItems} technicalSpecs={technicalSpecs} />
{/* Key Features */}
{/* <KeyFeatures /> */}
@ -67,7 +147,7 @@ export default function Component() {
{/* <Reviews /> */}
{/* FAQ Section */}
<FAQ />
<FAQ qna={qna} />
{/* Final CTA */}
{/* <div className="text-center mb-16">

108
frontend-nextjs/app/terms/page.tsx
View file

@ -1,108 +0,0 @@
import { getOpenGraphMetadata } from "@/lib/utils";
import OurAddressSign from "../components/OurAddressSign";
import { Metadata } from "next";
export const metadata: Metadata = {
title: "Terms and Conditions",
...getOpenGraphMetadata("Terms and Conditions"),
};
export default async function Index() {
return (
<div className="flex max-w-xl mx-auto w-full mt-8 flex-col lg:w-1/2 px-4 gap-2 text-left m-2">
<p className="font-semibold text-2xl">
Terms and Conditions for Elato AI
</p>
<p className="font-light text-md">Last Updated: 2/24/25</p>
<div className="flex flex-col gap-4 my-4">
<p>
{`Welcome to Elato AI ("we," "us," "our"). We offer engaging AI-characters on Elato devices that you can also converse with anytime through our website `}
<a
href="https://www.elatoai.com"
className="text-blue-400 underline"
target="_blank"
>
https://www.elatoai.com
</a>
{` (the "Service").`}
</p>
<p>
Please read these Terms and Conditions (&quot;Terms&quot;)
carefully before using our Service. These Terms govern your
access to and use of our Service and any related services
provided by us. By accessing or using the Service, you agree
to be bound by these Terms. If you disagree with any part of
the Terms, then you may not access the Service.
</p>
<p className="text-lg font-semibold">1. Use of the Service</p>
<p>
The Service is intended for personal and non-commercial use
unless explicitly agreed upon in writing by us. You agree
not to misuse the Service or help anyone else do so.
</p>
<p className="text-lg font-semibold">2. Accounts</p>
<p>
When creating an account with us, you must provide accurate
and complete information. You are responsible for
safeguarding your account and for all activities or actions
under your account.
</p>
<p className="text-lg font-semibold">
3. Intellectual Property
</p>
<p>
The Service and its original content, features, and
functionality are and will remain the exclusive property of
Elato AI and its licensors.
</p>
<p className="text-lg font-semibold">
4. Links to Other Web Sites
</p>
<p>
Our Service may contain links to third-party web sites or
services that are not owned or controlled by Elato AI. We
have no control over, and assume no responsibility for, the
content, privacy policies, or practices of any third-party
web sites or services.
</p>
<p className="text-lg font-semibold">5. Termination</p>
<p>
We may terminate or suspend access to our Service
immediately, without prior notice or liability, for any
reason whatsoever, including, without limitation, if you
breach the Terms.
</p>
<p className="text-lg font-semibold">
6. Limitation of Liability
</p>
<p>
In no event shall Elato AI, nor its directors, employees,
partners, agents, suppliers, or affiliates, be liable for
any indirect, incidental, special, consequential, or
punitive damages resulting from your use of the Service.
</p>
<p className="text-lg font-semibold">7. Governing Law</p>
<p>
We reserve the right to update this privacy policy at any
time. When we do, we will post a notification on our
website. Your continued use of the site and services
following the posting of changes to this policy will be
deemed your acceptance of those changes.
</p>
<p className="text-lg font-semibold">8. Changes</p>
<p>
We reserve the right, at our sole discretion, to modify or
replace these Terms at any time. What constitutes a material
change will be determined at our sole discretion.
</p>
<p className="text-lg font-semibold">9. Contact Us</p>
<p>
If you have any questions about these Terms, please contact
me at
</p>
<OurAddressSign />
</div>
</div>
);
}

2
frontend-nextjs/lib/data.ts
View file

@ -3,6 +3,8 @@ export const defaultPersonalityId: string =
"a1c073e6-653d-40cf-acc1-891331689409";
export const paymentLink = "https://buy.stripe.com/bIY0033Dc7LB28o9AJ";
export const devkitPaymentLink = "https://buy.stripe.com/fZefZ12z82rh3cseV5";
export const discordInviteLink = "https://discord.gg/KJWxDPBRUj";
export const tiktokLink = "https://www.tiktok.com/@elatoai";
export const githubPublicLink = "https://github.com/akdeb/ElatoAI";

BIN
frontend-nextjs/public/logos/espressif.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 8 KiB

BIN
frontend-nextjs/public/products/devkit.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 MiB

After

Width:  |  Height:  |  Size: 2 MiB

BIN
frontend-nextjs/public/products/devkit1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
frontend-nextjs/public/products/devkit2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
frontend-nextjs/public/products/devkit3.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2 MiB

BIN
frontend-nextjs/public/products/devkit4.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
frontend-nextjs/public/products/devkit5.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
frontend-nextjs/public/products/devkit6.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 166 KiB