Untitled

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

export default function StaffPortal() {
  const announcements = [
    "Staff meeting on Monday at 3 PM",
    "Submit student grades by Friday",
    "Training session available next week"
  ];

  const resources = [
    "Lesson Plans",
    "Attendance System",
    "Student Records",
    "HR Requests"
  ];

  return (
    <div className="p-6 grid gap-6">
      <motion.h1 
        className="text-3xl font-bold"
        initial={{ opacity: 0, y: -10 }}
        animate={{ opacity: 1, y: 0 }}
      >
        Staff Portal
      </motion.h1>

      <div className="grid md:grid-cols-2 gap-6">
        <Card className="rounded-2xl shadow">
          <CardContent className="p-4">
            <h2 className="text-xl font-semibold mb-3">Announcements</h2>
            <ul className="list-disc pl-5">
              {announcements.map((item, index) => (
                <li key={index}>{item}</li>
              ))}
            </ul>
          </CardContent>
        </Card>

        <Card className="rounded-2xl shadow">
          <CardContent className="p-4">
            <h2 className="text-xl font-semibold mb-3">Quick Links</h2>
            <div className="grid gap-2">
              {resources.map((res, index) => (
                <Button key={index} className="w-full">
                  {res}
                </Button>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>

      <Card className="rounded-2xl shadow">
        <CardContent className="p-4">
          <h2 className="text-xl font-semibold mb-3">Contact & Support</h2>
          <p>Email: [email protected]</p>
          <p>IT Helpdesk: Ext. 1234</p>
        </CardContent>
      </Card>
    </div>
  );
}