page.tsx

'use client'

import React from "react"
import { Sparkles } from "lucide-react"
import { motion } from "framer-motion"

const Card = ({ children }: { children: React.ReactNode }) => (
  <div className="bg-white/5 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl">
    {children}
  </div>
)

const CardContent = ({ children }: { children: React.ReactNode }) => (
  <div className="p-6">{children}</div>
)

const Tabs = ({ children }: { children: React.ReactNode }) => <div>{children}</div>

const TabsList = ({ children }: { children: React.ReactNode }) => (
  <div className="flex flex-wrap justify-center gap-4 bg-zinc-800/40 backdrop-blur-md border border-zinc-700 p-4 rounded-2xl shadow-lg mb-8">
    {children}
  </div>
)

const TabsTrigger = ({
  value,
  selected,
  onClick,
}: {
  value: string
  selected: boolean
  onClick: () => void
}) => (
  <button
    onClick={onClick}
    className={`text-lg px-6 py-2 rounded-xl font-semibold transition-all ${
      selected
        ? "bg-gradient-to-r from-purple-500 to-pink-500 text-white"
        : "hover:bg-zinc-700/40 text-gray-300"
    }`}
  >
    {value}
  </button>
)

const TabsContent = ({
  value,
  selected,
  children,
}: {
  value: string
  selected: boolean
  children: React.ReactNode
}) => (selected ? <div>{children}</div> : null)

const labData: Record<
  string,
  { name: string; description: string; vulns: string; tools: string }[]
> = {
  HackTheBox: [
    {
      name: "Forest",
      description: "Beginner-friendly AD machine covering Kerberoasting & LAPS enumeration.",
      vulns: "Kerberoasting, LAPS, Misconfigured ACLs",
      tools: "Impacket, PowerView, Rubeus",
    },
    {
      name: "Active",
      description: "Focuses on SMB enumeration and Kerberoasting techniques.",
      vulns: "SMB, Kerberoasting",
      tools: "crackmapexec, rpcclient, Rubeus",
    },
    {
      name: "Sauna",
      description: "N/A",
      vulns: "N/A",
      tools: "N/A",
    },
    {
      name: "Resolute",
      description: "N/A",
      vulns: "N/A",
      tools: "N/A",
    },
    {
      name: "Cascade",
      description: "N/A",
      vulns: "N/A",
      tools: "N/A",
    },
    {
      name: "Intelligence",
      description: "N/A",
      vulns: "N/A",
      tools: "N/A",
    },
    {
      name: "Monteverde",
      description: "N/A",
      vulns: "N/A",
      tools: "N/A",
    },
    {
      name: "StreamIO",
      description: "N/A",
      vulns: "N/A",
      tools: "N/A",
    },
    {
      name: "Blackfield",
      description: "N/A",
      vulns: "N/A",
      tools: "N/A",
    },
    {
      name: "Reel",
      description: "N/A",
      vulns: "N/A",
      tools: "N/A",
    },
    {
      name: "Mantis",
      description: "N/A",
      vulns: "N/A",
      tools: "N/A",
    },
    {
      name: "Search",
      description: "N/A",
      vulns: "N/A",
      tools: "N/A",
    },
    {
      name: "Acute",
      description: "N/A",
      vulns: "N/A",
      tools: "N/A",
    },
    {
      name: "Object",
      description: "N/A",
      vulns: "N/A",
      tools: "N/A",
    },
    {
      name: "Sizzle",
      description: "N/A",
      vulns: "N/A",
      tools: "N/A",
    },
    {
      name: "Multimaster",
      description: "N/A",
      vulns: "N/A",
      tools: "N/A",
    },
    {
      name: "Cicada",
      description: "N/A",
      vulns: "N/A",
      tools: "N/A",
    },
    {
      name: "Vintage",
      description: "N/A",
      vulns: "N/A",
      tools: "N/A",
    },
    {
      name: "Certified",
      description: "N/A",
      vulns: "N/A",
      tools: "N/A",
    },
    {
      name: "Mist",
      description: "N/A",
      vulns: "N/A",
      tools: "N/A",
    },
    {
      name: "Administrator",
      description: "N/A",
      vulns: "N/A",
      tools: "N/A",
    },

  ],
  TryHackMe: [
    {
      name: "Attacktive Directory",
      description: "Intro to AD attacks - covers AS-REP Roasting and BloodHound basics.",
      vulns: "AS-REP Roasting, weak passwords",
      tools: "BloodHound, hashcat, GetNPUsers.py",
    },
    {
      name: "Blue",
      description: "EternalBlue exploit in AD context.",
      vulns: "MS17-010 (EternalBlue)",
      tools: "nmap, metasploit",
    },
  ],
  VulnLab: [
    {
      name: "Windows 1",
      description: "Covers enumeration of LDAP and exploiting weak DACLs.",
      vulns: "Weak DACLs, LDAP enumeration",
      tools: "ldapsearch, PowerView",
    },
    {
      name: "Domain Controller 2",
      description: "Intermediate lab with unconstrained delegation and ADCS abuse.",
      vulns: "Unconstrained Delegation, ADCS misconfig",
      tools: "Rubeus, Certipy, mimikatz",
    },
    {
      name: "Cicada",
      description: "N/A",
      vulns: "N/A",
      tools: "N/A",
    },
    {
      name: "Delegate",
      description: "N/A",
      vulns: "N/A",
      tools: "N/A",
    },
    {
      name: "ReDelegate",
      description: "N/A",
      vulns: "N/A",
      tools: "N/A",
    },
    {
      name: "Baby",
      description: "N/A",
      vulns: "N/A",
      tools: "N/A",
    },
    {
      name: "Baby2",
      description: "N/A",
      vulns: "N/A",
      tools: "N/A",
    },
    {
      name: "Reflection",
      description: "N/A",
      vulns: "N/A",
      tools: "N/A",
    },
    {
      name: "Trusted",
      description: "N/A",
      vulns: "N/A",
      tools: "N/A",
    },
    {
      name: "Vigilant",
      description: "N/A",
      vulns: "N/A",
      tools: "N/A",
    },
    {
      name: "Retro",
      description: "N/A",
      vulns: "N/A",
      tools: "N/A",
    },
    {
      name: "Retro2",
      description: "N/A",
      vulns: "N/A",
      tools: "N/A",
    },
  ],
}

const LabTable = ({ labs }: { labs: typeof labData.HackTheBox }) => (
  <motion.div
    initial={{ x: -100, opacity: 0 }}
    animate={{ x: 0, opacity: 1 }}
    transition={{ type: "spring", stiffness: 60 }}
  >
    <div className="overflow-auto w-full">
      <table className="w-full text-sm text-left border-collapse">
        <thead className="bg-gradient-to-r from-sky-800 to-cyan-800 text-white">
          <tr>
            <th className="p-3 text-cyan-300 text-lg">🖥️ Machine</th>
            <th className="p-3 text-emerald-300 text-lg">📜 Description</th>
            <th className="p-3 text-yellow-300 text-lg">🛠️ Vulnerabilities</th>
            <th className="p-3 text-pink-300 text-lg">🧰 Tools Used</th>
          </tr>
        </thead>
        <tbody>
          {labs.map((lab, i) => (
            <motion.tr
              key={i}
              initial={{ opacity: 0, x: 50 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: i * 0.1 }}
              className="hover:bg-zinc-800/50 border-b border-zinc-700 transition"
            >
              <td className="p-3 font-semibold text-cyan-400">{lab.name}</td>
              <td className="p-3 text-emerald-200 italic">{lab.description}</td>
              <td className="p-3 text-yellow-300">{lab.vulns}</td>
              <td className="p-3 text-pink-400">{lab.tools}</td>
            </motion.tr>
          ))}
        </tbody>
      </table>
    </div>
  </motion.div>
)

export default function ADPentestingLabs() {
  const [selectedTab, setSelectedTab] = React.useState("HackTheBox")

  return (
    <main
      className="min-h-screen bg-gradient-to-br from-black via-zinc-900 to-gray-900 text-white p-10 px-6 sm:px-16"
      style={{ fontFamily: 'FiraCode Nerd Font, Fira Code, monospace' }}
    >
      <motion.h1
        initial={{ opacity: 0, y: -30 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 1 }}
        className="text-6xl text-center font-bold tracking-wide bg-gradient-to-r from-emerald-400 to-blue-500 bg-clip-text text-transparent mb-10 animate-pulse"
      >
        <Sparkles className="inline-block text-yellow-400 mr-2 animate-pulse" /> AD Pentesting Labs
      </motion.h1>

      <Tabs>
        <TabsList>
          {Object.keys(labData).map((platform) => (
            <TabsTrigger
              key={platform}
              value={platform}
              selected={selectedTab === platform}
              onClick={() => setSelectedTab(platform)}
            />
          ))}
        </TabsList>

        {Object.entries(labData).map(([platform, labs]) => (
          <TabsContent key={platform} value={platform} selected={selectedTab === platform}>
            <motion.div
              initial={{ x: 100, opacity: 0 }}
              animate={{ x: 0, opacity: 1 }}
              transition={{ duration: 0.6 }}
            >
              <Card>
                <CardContent>
                  <LabTable labs={labs} />
                </CardContent>
              </Card>
            </motion.div>
          </TabsContent>
        ))}
      </Tabs>
    </main>
  )
}

npx create-next-app@latest my-app --ts
cd my-app
sudo npm install lucide-react
sudo npm install framer-motion
sudo npm run dev