Untitled

import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { motion } from "framer-motion";

export default function OvertimeLanding() {
  return (
    <div className="bg-white text-black min-h-screen">
      <header className="flex justify-between items-center p-6 shadow-md">
        <h1 className="text-3xl font-bold">OVERTIME</h1>
        <nav>
          <ul className="flex gap-6 text-lg">
            <li><a href="#features" className="hover:underline">Features</a></li>
            <li><a href="#flavors" className="hover:underline">Flavors</a></li>
            <li><a href="#contact" className="hover:underline">Contact</a></li>
          </ul>
        </nav>
      </header>

      <motion.section
        className="text-center py-32 bg-gradient-to-b from-white to-gray-100"
        initial={{ opacity: 0, y: -50 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 1 }}
      >
        <h2 className="text-5xl font-bold mb-6">ENERGY + FOCUS</h2>
        <p className="text-xl max-w-2xl mx-auto mb-8">
          Clean energy for gym bros, startup hustlers, gamers, and nightlife warriors.
        </p>
        <Button className="bg-black text-white px-6 py-3 rounded-full hover:bg-gray-800 transition">
          Order Now
        </Button>
      </motion.section>

      <section id="flavors" className="py-24">
        <h3 className="text-4xl text-center font-bold mb-12">Our Flavors</h3>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 px-8">
          {["Lemon Mint", "Blue Raspberry", "Orange Crush"].map((flavor) => (
            <Card key={flavor} className="p-6 text-center shadow-lg hover:shadow-xl transition">
              <CardContent>
                <h4 className="text-2xl font-bold mb-4">{flavor}</h4>
                <p className="text-lg">Zero Sugar. Clean Energy.</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

      <footer className="text-center py-12 bg-black text-white">
        <p>© 2025 OVERTIME. All Rights Reserved.</p>
      </footer>
    </div>
  );
}