diff --git a/frontend-nextjs/app/components/LandingPage/ProductGallery.tsx b/frontend-nextjs/app/components/LandingPage/ProductGallery.tsx index 529f04c..845ac4c 100644 --- a/frontend-nextjs/app/components/LandingPage/ProductGallery.tsx +++ b/frontend-nextjs/app/components/LandingPage/ProductGallery.tsx @@ -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 ( diff --git a/frontend-nextjs/app/components/LandingPage/ProductsSection.tsx b/frontend-nextjs/app/components/LandingPage/ProductsSection.tsx index 7c2be4f..be9ea49 100644 --- a/frontend-nextjs/app/components/LandingPage/ProductsSection.tsx +++ b/frontend-nextjs/app/components/LandingPage/ProductsSection.tsx @@ -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() {

diff --git a/frontend-nextjs/app/components/Nav/NavbarDropdownMenu.tsx b/frontend-nextjs/app/components/Nav/NavbarDropdownMenu.tsx index bbdb63b..ab41986 100644 --- a/frontend-nextjs/app/components/Nav/NavbarDropdownMenu.tsx +++ b/frontend-nextjs/app/components/Nav/NavbarDropdownMenu.tsx @@ -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) { @@ -120,6 +121,16 @@ export function NavbarDropdownMenu({ user, stars }: NavbarMenuButtonProps) { {user ? : } + + + + Business Demo + + GitHub - @@ -157,24 +167,44 @@ export function NavbarDropdownMenu({ user, stars }: NavbarMenuButtonProps) { - - -
- - Buy Now - - - Elato AI Toy - -
- +
+ + +
+ + AI Device + + + Buy Now + +
+ + + +
+ + AI Devkit + + + Buy Now + +
+ +
 ); diff --git a/frontend-nextjs/app/components/Order/Checkout.tsx b/frontend-nextjs/app/components/Order/Checkout.tsx index 6ca49e3..233debd 100644 --- a/frontend-nextjs/app/components/Order/Checkout.tsx +++ b/frontend-nextjs/app/components/Order/Checkout.tsx @@ -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("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 (
@@ -72,45 +32,11 @@ const Checkout = () => {

FREE Shipping

)}
- {/*
-
- - - - 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" - /> - - -
-
*/} - +
*/} + + {/* Delivery Notice */} +
+
+ ); +} diff --git a/frontend-nextjs/app/products/page.tsx b/frontend-nextjs/app/products/page.tsx index 1e43116..0a7f530 100644 --- a/frontend-nextjs/app/products/page.tsx +++ b/frontend-nextjs/app/products/page.tsx @@ -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: , + }, + { + 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: , + }, + { + 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: , + }, + { + 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: , + }, + { + 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: , + }, + { + 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: , + }, +]; + + export default function Component() { return (
@@ -22,7 +102,7 @@ export default function Component() { {/* Hero Section */}
- +
@@ -45,7 +125,7 @@ export default function Component() {

{SubtitleText}

- +

*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() {

- +
{/* */}
{/* Product Details */} - + {/* Key Features */} {/* */} @@ -67,7 +147,7 @@ export default function Component() { {/* */} {/* FAQ Section */} - + {/* Final CTA */} {/*
diff --git a/frontend-nextjs/app/terms/page.tsx b/frontend-nextjs/app/terms/page.tsx deleted file mode 100644 index 68c57a2..0000000 --- a/frontend-nextjs/app/terms/page.tsx +++ /dev/null @@ -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 ( -
-

- Terms and Conditions for Elato AI -

-

Last Updated: 2/24/25

-
-

- {`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 `} - - https://www.elatoai.com - - {` (the "Service").`} -

-

- Please read these Terms and Conditions ("Terms") - 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. -

-

1. Use of the Service

-

- 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. -

- -

2. Accounts

-

- 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. -

-

- 3. Intellectual Property -

-

- The Service and its original content, features, and - functionality are and will remain the exclusive property of - Elato AI and its licensors. -

-

- 4. Links to Other Web Sites -

-

- 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. -

-

5. Termination

-

- 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. -

-

- 6. Limitation of Liability -

-

- 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. -

-

7. Governing Law

-

- 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. -

-

8. Changes

-

- 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. -

-

9. Contact Us

-

- If you have any questions about these Terms, please contact - me at -

- -
-
- ); -} diff --git a/frontend-nextjs/lib/data.ts b/frontend-nextjs/lib/data.ts index 65e4323..665fbf0 100644 --- a/frontend-nextjs/lib/data.ts +++ b/frontend-nextjs/lib/data.ts @@ -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"; diff --git a/frontend-nextjs/public/logos/espressif.png b/frontend-nextjs/public/logos/espressif.png index 4e59a4c..bd5e882 100644 Binary files a/frontend-nextjs/public/logos/espressif.png and b/frontend-nextjs/public/logos/espressif.png differ diff --git a/frontend-nextjs/public/products/devkit.png b/frontend-nextjs/public/products/devkit.png index 6e6723c..d1231de 100644 Binary files a/frontend-nextjs/public/products/devkit.png and b/frontend-nextjs/public/products/devkit.png differ diff --git a/frontend-nextjs/public/products/devkit1.png b/frontend-nextjs/public/products/devkit1.png new file mode 100644 index 0000000..f6c8ea1 Binary files /dev/null and b/frontend-nextjs/public/products/devkit1.png differ diff --git a/frontend-nextjs/public/products/devkit2.png b/frontend-nextjs/public/products/devkit2.png new file mode 100644 index 0000000..0061a3d Binary files /dev/null and b/frontend-nextjs/public/products/devkit2.png differ diff --git a/frontend-nextjs/public/products/devkit3.png b/frontend-nextjs/public/products/devkit3.png new file mode 100644 index 0000000..19b877d Binary files /dev/null and b/frontend-nextjs/public/products/devkit3.png differ diff --git a/frontend-nextjs/public/products/devkit4.png b/frontend-nextjs/public/products/devkit4.png new file mode 100644 index 0000000..fbd8aa7 Binary files /dev/null and b/frontend-nextjs/public/products/devkit4.png differ diff --git a/frontend-nextjs/public/products/devkit5.png b/frontend-nextjs/public/products/devkit5.png new file mode 100644 index 0000000..1fe0e94 Binary files /dev/null and b/frontend-nextjs/public/products/devkit5.png differ diff --git a/frontend-nextjs/public/products/devkit6.png b/frontend-nextjs/public/products/devkit6.png new file mode 100644 index 0000000..4894c50 Binary files /dev/null and b/frontend-nextjs/public/products/devkit6.png differ