Untitled

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>
  );
}