2K25+

import * as React from "react"

import { motion, AnimatePresence } from "framer-motion"

// Load Orbitron from Google Fonts once when this component mounts

function useOrbitronFont() {

React.useEffect(() => {

const id = "orbitron-font-link"

if (document.getElementById(id)) return

const link = document.createElement("link")

link.id = id

link.rel = "stylesheet"

link.href =

"https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;800;900&display=swap"

document.head.appendChild(link)

}, [])

}

export default function SingleDropdown() {

const [isOpen, setIsOpen] = React.useState(false)

useOrbitronFont()

return (

<div

style={{

width: "100%",

maxWidth: "900px",

margin: "0 auto",

fontFamily: "'Orbitron', sans-serif",

padding: "24px",

}}

{/* Header */}

<div

onClick={() => setIsOpen(!isOpen)}

style={{

height: "160px",

borderRadius: "20px",

border: "2px solid rgba(255, 255, 255, 0.2)",

background: "rgba(20,20,20,0.95)",

color: "#fff",

fontSize: "32px",

fontWeight: 800,

cursor: "pointer",

display: "flex",

justifyContent: "space-between",

alignItems: "center",

padding: "0 40px",

width: "100%",

boxShadow: "0 6px 20px rgba(0,0,0,0.4)",

}}

2K26 (COMING SOON)

<motion.span

initial={false}

animate={{ rotate: isOpen ? 45 : 0 }}

transition={{ duration: 0.3, ease: "easeInOut" }}

style={{

fontSize: "40px",

color: "#aaa",

fontWeight: "bold",

}}

</motion.span>

</div>

{/* Dropdown Content */}

{isOpen && (

<motion.div

key="content"

initial="collapsed"

animate="open"

exit="collapsed"

variants={{

open: { height: "auto", opacity: 1 },

collapsed: { height: 0, opacity: 0 },

}}

transition={{ duration: 0.6, ease: [0.4, 0, 0.2, 1] }}

style={{

overflow: "hidden",

borderRadius: "0 0 20px 20px",

border: "2px solid rgba(255, 255, 255, 0.2)",

borderTop: "none",

background: "rgba(30,30,30,0.95)",

width: "100%",

}}

<motion.div

style={{

padding: "32px 40px",

color: "#ccc",

fontSize: "20px",

lineHeight: "1.8",

display: "flex",

flexDirection: "column",

gap: "20px",

}}

{/* DAY 1 */}

<div>

DAY 1:

</strong>{" "}

<span

style={{

color: "#4da6ff",

fontWeight: 600,

}}

ISMUN 2K25 NEWSLETTER DAY 1

</span>

</div>

{/* DAY 2 */}

<div>

DAY 2:

</strong>{" "}

<span

style={{

color: "#4da6ff",

fontWeight: 600,

}}

ISMUN 2K25 NEWSLETTER DAY 2

</span>

</div>

{/* DAY 3 */}

<div>

DAY 3:

</strong>{" "}

<span

style={{

color: "#4da6ff",

fontWeight: 600,

}}

ISMUN 2K25 NEWSLETTER DAY 3

</span>

</div>

</motion.div>

)}

</AnimatePresence>

</div>

)

}

CONTENT

NEWSLETTER