Untitled

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

export default function BirthdayWebsite() { const [page, setPage] = useState("home");

const renderPage = () => { switch (page) { case "home": return ( <div className="flex flex-col items-center justify-center min-h-[80vh] text-center p-6"> <motion.h1 initial={{ scale: 0.8, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} transition={{ duration: 1 }} className="text-5xl font-bold text-pink-500 drop-shadow-lg" > 🎉 Happy Birthday Dear Friend 🎂 </motion.h1>

<motion.img
          src="/birthday-photo-placeholder.jpg"
          alt="Birthday Person"
          className="rounded-2xl shadow-lg mt-6 w-64 h-64 object-cover"
          initial={{ y: 50, opacity: 0 }}
          animate={{ y: 0, opacity: 1 }}
          transition={{ duration: 1, delay: 0.5 }}
        />

        <p className="mt-6 text-lg text-gray-700 max-w-xl">
          Wishing you a day filled with love, laughter, and unforgettable memories! 💖
        </p>
      </div>
    );

  case "features":
    return (
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 p-6">
        <Card className="rounded-2xl shadow-xl hover:scale-105 transition">
          <CardContent className="p-6 text-center">
            <h2 className="text-2xl font-bold text-pink-600">💌 Happy Note</h2>
            <p className="mt-2 text-gray-600">Sweet messages to brighten your special day.</p>
          </CardContent>
        </Card>

        <Card className="rounded-2xl shadow-xl hover:scale-105 transition">
          <CardContent className="p-6 text-center">
            <h2 className="text-2xl font-bold text-purple-600">🎶 Melodious Note</h2>
            <p className="mt-2 text-gray-600">Music and melodies made just for you.</p>
          </CardContent>
        </Card>

        <Card className="rounded-2xl shadow-xl hover:scale-105 transition">
          <CardContent className="p-6 text-center">
            <h2 className="text-2xl font-bold text-blue-600">✍️ Blog</h2>
            <p className="mt-2 text-gray-600">Stories, memories, and heartfelt words.</p>
          </CardContent>
        </Card>
      </div>
    );

  case "login":
    return (
      <div className="flex justify-center items-center min-h-[70vh] p-6">
        <Card className="p-6 w-full max-w-sm shadow-lg rounded-2xl">
          <h2 className="text-2xl font-bold mb-4 text-center">Login</h2>
          <input
            type="email"
            placeholder="Email"
            className="w-full p-2 mb-3 border rounded-lg"
          />
          <input
            type="password"
            placeholder="Password"
            className="w-full p-2 mb-3 border rounded-lg"
          />
          <Button className="w-full">Login</Button>
        </Card>
      </div>
    );

  case "signup":
    return (
      <div className="flex justify-center items-center min-h-[70vh] p-6">
        <Card className="p-6 w-full max-w-sm shadow-lg rounded-2xl">
          <h2 className="text-2xl font-bold mb-4 text-center">Sign Up</h2>
          <input
            type="text"
            placeholder="Name"
            className="w-full p-2 mb-3 border rounded-lg"
          />
          <input
            type="email"
            placeholder="Email"
            className="w-full p-2 mb-3 border rounded-lg"
          />
          <input
            type="password"
            placeholder="Password"
            className="w-full p-2 mb-3 border rounded-lg"
          />
          <Button className="w-full">Sign Up</Button>
        </Card>
      </div>
    );

  default:
    return null;
}

};

return ( <div className="min-h-screen bg-gradient-to-br from-pink-100 via-purple-100 to-blue-100"> {/* Navbar */} <nav className="flex justify-between items-center p-4 bg-white shadow-md sticky top-0 z-50"> <h1 className="text-2xl font-bold text-pink-600">🎂 Birthday Special</h1> <div className="space-x-4"> <Button variant="ghost" onClick={() => setPage("home")}>Home</Button> <Button variant="ghost" onClick={() => setPage("features")}>Features</Button> <Button variant="ghost" onClick={() => setPage("login")}>Login</Button> <Button variant="ghost" onClick={() => setPage("signup")}>Signup</Button> </div> </nav>

{/* Page Content */}
  <div>{renderPage()}</div>
</div>

); }