Untitled
unknown
plain_text
20 days ago
7.8 kB
2
Indexable
import React from "react"; import { Button } from "@/components/ui/button"; import { Card, CardContent } from "@/components/ui/card"; import { RocketIcon } from "lucide-react"; import { motion } from "framer-motion"; export default function Home() { return ( <main className="min-h-screen bg-gradient-to-br from-black via-gray-900 to-gray-800 text-white"> {/* Navbar */} <header className="flex items-center justify-between px-6 py-4 border-b border-gray-700"> <h1 className="text-2xl font-bold">Safari AI</h1> <nav className="space-x-6"> <a href="#features" className="hover:underline">Features</a> <a href="#pricing" className="hover:underline">Pricing</a> <a href="#login" className="hover:underline">Login</a> <a href="#signup" className="hover:underline">Sign Up</a> </nav> </header> {/* Hero Section */} <section className="text-center py-24 px-4 max-w-5xl mx-auto"> <motion.h1 initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8 }} className="text-5xl md:text-6xl font-bold mb-6" > Create AI-powered videos in minutes </motion.h1> <motion.p initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.3, duration: 0.8 }} className="text-lg md:text-xl text-gray-300 mb-8" > Edit, caption, brand, and publish videos directly from your browser. </motion.p> <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.6, duration: 0.8 }} > <Button size="lg" className="text-lg px-8 py-6"> <RocketIcon className="mr-2 h-5 w-5" /> Get Started Free </Button> </motion.div> </section> {/* Features Section */} <section id="features" className="py-20 px-4 bg-white text-gray-900"> <div className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8"> <Card className="rounded-2xl shadow-xl"> <CardContent className="p-6"> <h3 className="text-xl font-semibold mb-2">AI Video Editing</h3> <p className="text-gray-600"> Cut, crop, transcribe, and generate subtitles automatically with AI. </p> </CardContent> </Card> <Card className="rounded-2xl shadow-xl"> <CardContent className="p-6"> <h3 className="text-xl font-semibold mb-2">Templates & Branding</h3> <p className="text-gray-600"> Create stunning videos using customizable templates, brand colors, and logos. </p> </CardContent> </Card> <Card className="rounded-2xl shadow-xl"> <CardContent className="p-6"> <h3 className="text-xl font-semibold mb-2">Export & Share</h3> <p className="text-gray-600"> Download videos in full HD or publish directly to YouTube, TikTok, and more. </p> </CardContent> </Card> </div> </section> {/* Pricing Section */} <section id="pricing" className="py-20 px-4 bg-gray-100 text-gray-900"> <div className="max-w-6xl mx-auto text-center mb-12"> <h2 className="text-4xl font-bold mb-4">Pricing Plans</h2> <p className="text-gray-600 text-lg"> Choose a plan that fits your needs. No hidden fees. </p> </div> <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto"> <Card className="rounded-2xl shadow-xl"> <CardContent className="p-6 text-center"> <h3 className="text-2xl font-semibold mb-2">Free</h3> <p className="text-gray-600 mb-4">Basic editing features with watermark.</p> <p className="text-3xl font-bold mb-6">$0/mo</p> <Button>Get Started</Button> </CardContent> </Card> <Card className="rounded-2xl shadow-xl border-2 border-blue-600"> <CardContent className="p-6 text-center"> <h3 className="text-2xl font-semibold mb-2">Pro</h3> <p className="text-gray-600 mb-4">Full access to all features with no watermark.</p> <p className="text-3xl font-bold mb-6">$19/mo</p> <Button className="bg-blue-600 hover:bg-blue-700 text-white">Upgrade Now</Button> </CardContent> </Card> <Card className="rounded-2xl shadow-xl"> <CardContent className="p-6 text-center"> <h3 className="text-2xl font-semibold mb-2">Enterprise</h3> <p className="text-gray-600 mb-4">For teams & organizations. Custom integrations.</p> <p className="text-3xl font-bold mb-6">Contact Us</p> <Button>Contact Sales</Button> </CardContent> </Card> </div> </section> {/* Login Section */} <section id="login" className="py-20 px-4 bg-white text-gray-900"> <div className="max-w-md mx-auto border rounded-2xl shadow-xl p-8"> <h2 className="text-3xl font-bold mb-6 text-center">Login to Safari AI</h2> <form className="space-y-6"> <div> <label htmlFor="email" className="block text-sm font-medium text-gray-700">Email</label> <input type="email" id="email" className="mt-1 block w-full p-3 border border-gray-300 rounded-md" required /> </div> <div> <label htmlFor="password" className="block text-sm font-medium text-gray-700">Password</label> <input type="password" id="password" className="mt-1 block w-full p-3 border border-gray-300 rounded-md" required /> </div> <Button className="w-full bg-black text-white hover:bg-gray-900">Log In</Button> </form> </div> </section> {/* Signup Section */} <section id="signup" className="py-20 px-4 bg-gray-100 text-gray-900"> <div className="max-w-md mx-auto border rounded-2xl shadow-xl p-8"> <h2 className="text-3xl font-bold mb-6 text-center">Sign Up for Safari AI</h2> <form className="space-y-6"> <div> <label htmlFor="name" className="block text-sm font-medium text-gray-700">Full Name</label> <input type="text" id="name" className="mt-1 block w-full p-3 border border-gray-300 rounded-md" required /> </div> <div> <label htmlFor="email-signup" className="block text-sm font-medium text-gray-700">Email</label> <input type="email" id="email-signup" className="mt-1 block w-full p-3 border border-gray-300 rounded-md" required /> </div> <div> <label htmlFor="password-signup" className="block text-sm font-medium text-gray-700">Password</label> <input type="password" id="password-signup" className="mt-1 block w-full p-3 border border-gray-300 rounded-md" required /> </div> <Button className="w-full bg-blue-600 text-white hover:bg-blue-700">Create Account</Button> </form> </div> </section> {/* Footer */} <footer className="py-12 px-4 text-center text-gray-400 border-t border-gray-700"> <p>© {new Date().getFullYear()} Safari AI. All rights reserved.</p> </footer> </main> ); }
Editor is loading...
Leave a Comment