90 lines
3.9 KiB
TypeScript
90 lines
3.9 KiB
TypeScript
import { Badge } from "@/components/ui/badge";
|
|
import { Truck, Bird, Box } from "lucide-react";
|
|
import ProductImageCarousel from "../components/Order/ProductImageCarousel";
|
|
import Checkout from "../components/Order/Checkout";
|
|
import FAQ from "../components/Order/FAQ";
|
|
import Reviews from "../components/Order/Reviews";
|
|
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 YoutubeDemo from "../components/LandingPage/YoutubeDemo";
|
|
import ProductGallery from "../components/LandingPage/ProductGallery";
|
|
|
|
const SubtitleText =
|
|
"All AI characters packed into one fully assembled compact device that can be added to any object.";
|
|
|
|
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 />
|
|
</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 />
|
|
<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 />
|
|
</div>
|
|
|
|
{/* <ProductCarousel /> */}
|
|
<div className="flex flex-col gap-12 px-6">
|
|
{/* Product Details */}
|
|
<Specs />
|
|
{/* Key Features */}
|
|
{/* <KeyFeatures /> */}
|
|
|
|
{/* Testimonials */}
|
|
{/* <Reviews /> */}
|
|
|
|
{/* FAQ Section */}
|
|
<FAQ />
|
|
|
|
{/* 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>
|
|
);
|
|
}
|