function MainComponent() { const [language, setLanguage] = React.useState("en"); const content = { jp: { description: [ "FORGET PLAYLISTは月に一度、プレイリストを共有します。曲順は日付に対応しており、毎月記録していきます。" ] }, en: { description: [ "FORGET PLAYLIST shares a curated playlist once a month.Each track corresponds to a date, forming a monthly record over time." ] } }; const [isMenuOpen, setIsMenuOpen] = React.useState(false); React.useEffect(()=>{ if (window.Typekit) { try { window.Typekit.load({ async: true, kitId: "idh0uca", timeout: 3000 }); } catch (e) { console.error("Typekit load failed:", e); } } }, []); const toggleMenu = ()=>{ setIsMenuOpen(!isMenuOpen); }; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("link", { rel: "preconnect", href: "https://use.typekit.net", crossOrigin: "anonymous", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("link", { rel: "preload", as: "style", href: "https://use.typekit.net/idh0uca.css", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("link", { rel: "stylesheet", href: "https://use.typekit.net/idh0uca.css", media: "print", onLoad: "this.media='all'", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("noscript", { __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("link", { rel: "stylesheet", href: "https://use.typekit.net/idh0uca.css", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, ` .english-heading { font-family: gill-sans-nova, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight: 400; font-style: normal; letter-spacing: 0.01em; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-display: swap; } .title { font-family: gill-sans-nova, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight: 500; font-style: italic; letter-spacing: 0.2em; font-feature-settings: "kern" 1; -webkit-font-kerning: normal; font-kerning: normal; text-rendering: optimizeLegibility; font-display: swap; } .description { font-family: gill-sans-nova, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight: 300; font-style: normal; font-display: swap; } .english-text { font-family: gill-sans-nova, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight: 300; font-style: normal; font-display: swap; } .project-text { font-family: gill-sans-nova, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight: 400; font-style: normal; letter-spacing: 0.01em; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-display: swap; } @keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes slideOut { from { transform: translateX(0); } to { transform: translateX(100%); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .menu-slide-in { animation: slideIn 0.3s ease-out forwards; } .menu-slide-out { animation: slideOut 0.3s ease-out forwards; } .fade-in { animation: fadeIn 0.3s ease-out forwards; } `), /*#__PURE__*/ React.createElement("div", { className: "flex md:flex-row flex-col justify-between h-screen bg-black font-helvetica text-[#F3F3F3] relative", __source: { fileName: "", lineNumber: 136, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "md:hidden fixed top-0 left-0 right-0 z-50 bg-black px-4", __source: { fileName: "", lineNumber: 137, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center h-[70px]", __source: { fileName: "", lineNumber: 138, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[32px] title hover:opacity-70 cursor-pointer leading-[32px] py-[19px]", onClick: ()=>window.location.href = "https://www.forgetstudio.com/playlist", __source: { fileName: "", lineNumber: 139, columnNumber: 13 }, __self: this }, "FORGET PLAYLIST"), isMenuOpen && /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-end justify-between h-[60px] py-[14px]", __source: { fileName: "", lineNumber: 148, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: toggleMenu, className: "text-[20px] h-[20px] leading-[20px]", __source: { fileName: "", lineNumber: 149, columnNumber: 17 }, __self: this }, "×"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-1 text-[13px] h-[13px] leading-[13px]", __source: { fileName: "", lineNumber: 155, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setLanguage("jp"), className: `${language === "jp" ? "font-bold" : ""}`, __source: { fileName: "", lineNumber: 156, columnNumber: 19 }, __self: this }, "JP"), /*#__PURE__*/ React.createElement("span", { className: "mx-0.5", __source: { fileName: "", lineNumber: 162, columnNumber: 19 }, __self: this }, "/"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setLanguage("en"), className: `${language === "en" ? "font-bold" : ""}`, __source: { fileName: "", lineNumber: 163, columnNumber: 19 }, __self: this }, "EN"))), !isMenuOpen && /*#__PURE__*/ React.createElement("button", { className: "h-[60px] w-[44px] flex flex-col justify-center items-center", onClick: toggleMenu, "aria-label": "Toggle menu", __source: { fileName: "", lineNumber: 173, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-6 h-0.5 bg-[#F3F3F3] mb-1.5", __source: { fileName: "", lineNumber: 178, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-6 h-0.5 bg-[#F3F3F3] mb-1.5", __source: { fileName: "", lineNumber: 179, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-6 h-0.5 bg-[#F3F3F3]", __source: { fileName: "", lineNumber: 180, columnNumber: 17 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: `w-full md:w-[50%] p-8 overflow-y-auto overflow-x-hidden bg-black fixed md:relative top-0 right-0 h-full z-40 transform transition-transform duration-300 ease-out ${isMenuOpen ? "translate-x-0" : "translate-x-full md:translate-x-0"} ${isMenuOpen ? "pt-24 md:pt-8" : "pt-24 md:pt-8"}`, style: { scrollbarGutter: "stable" }, __source: { fileName: "", lineNumber: 185, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "hidden md:flex justify-between items-start mb-6", __source: { fileName: "", lineNumber: 191, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[32px] title hover:opacity-70 cursor-pointer", onClick: ()=>window.location.href = "https://www.forgetstudio.com/playlist", __source: { fileName: "", lineNumber: 192, columnNumber: 13 }, __self: this }, "FORGET PLAYLIST"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-1 text-[13px]", __source: { fileName: "", lineNumber: 200, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setLanguage("jp"), className: `${language === "jp" ? "font-bold" : ""}`, __source: { fileName: "", lineNumber: 201, columnNumber: 15 }, __self: this }, "JP"), /*#__PURE__*/ React.createElement("span", { className: "mx-0.5", __source: { fileName: "", lineNumber: 207, columnNumber: 15 }, __self: this }, "/"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setLanguage("en"), className: `${language === "en" ? "font-bold" : ""}`, __source: { fileName: "", lineNumber: 208, columnNumber: 15 }, __self: this }, "EN"))), /*#__PURE__*/ React.createElement("div", { className: "text-[13px] leading-[1.4] tracking-tight font-noto-sans mt-[-20px] max-w-full", __source: { fileName: "", lineNumber: 216, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mt-16", __source: { fileName: "", lineNumber: 217, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-4 mt-8 english-heading", __source: { fileName: "", lineNumber: 218, columnNumber: 13 }, __self: this }, "ABOUT"), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 219, columnNumber: 13 }, __self: this }, content[language].description.map((text, index)=>/*#__PURE__*/ React.createElement("p", { key: index, className: `${language === "en" ? "project-text text-[13px]" : "text-[13px]"} mb-4`, __source: { fileName: "", lineNumber: 221, columnNumber: 17 }, __self: this }, text))), /*#__PURE__*/ React.createElement("h2", { className: "text-[16px] mb-4 mt-4 title", __source: { fileName: "", lineNumber: 233, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://www.forgetstudio.com", className: "hover:opacity-70", __source: { fileName: "", lineNumber: 234, columnNumber: 15 }, __self: this }, "FORGET")), /*#__PURE__*/ React.createElement("h2", { className: "text-[16px] mb-4 mt-4 title", __source: { fileName: "", lineNumber: 241, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://www.forgetbooks.com", className: "hover:opacity-70", __source: { fileName: "", lineNumber: 242, columnNumber: 15 }, __self: this }, "FORGET BOOKS")))), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-[50%] h-screen p-4 overflow-y-auto bg-black pt-24 md:pt-4", __source: { fileName: "", lineNumber: 251, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 gap-5", __source: { fileName: "", lineNumber: 252, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-5", __source: { fileName: "", lineNumber: 253, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("article", { className: "mb-4", __source: { fileName: "", lineNumber: 254, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://open.spotify.com/playlist/2B0C9KTwoha3asu45q2TUO?si=f5c53febdaeb46ac&pt=e90a583d1a1dc4ed2da176a64016b2f4", className: "block", target: "_blank", rel: "noopener noreferrer", __source: { fileName: "", lineNumber: 255, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative aspect-square mb-4 overflow-hidden", __source: { fileName: "", lineNumber: 261, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/bd90b590-bead-4fcb-b8d8-8d027837f8c8/-/format/auto/", alt: "©Reiko and Tori Kudo; Tangerine, 2021", className: "w-full h-full object-cover mix-blend-normal", __source: { fileName: "", lineNumber: 262, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-[12px] mb-2", __source: { fileName: "", lineNumber: 268, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 269, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 271, columnNumber: 21 }, __self: this }, "©Reiko and Tori Kudo; Tangerine, 2021")), /*#__PURE__*/ React.createElement("h3", { className: "text-[14px] leading-tight font-medium hover:opacity-70 transition-opacity", __source: { fileName: "", lineNumber: 273, columnNumber: 19 }, __self: this }, 'October 2024 "The New Life"'))), /*#__PURE__*/ React.createElement("article", { className: "mb-4", __source: { fileName: "", lineNumber: 278, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://open.spotify.com/playlist/0tLP4ka88mAnuq922cctQP?si=9718eb761bc64174", className: "block", target: "_blank", rel: "noopener noreferrer", __source: { fileName: "", lineNumber: 279, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative aspect-square mb-4 overflow-hidden", __source: { fileName: "", lineNumber: 285, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/af2f735d-9493-4cb8-873c-e4ad40828696/-/format/auto/", alt: "©DOGO; TV Dramatic (Demo), 2024", className: "w-full h-full object-cover mix-blend-normal", __source: { fileName: "", lineNumber: 286, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-[12px] mb-2", __source: { fileName: "", lineNumber: 292, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 293, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 295, columnNumber: 21 }, __self: this }, "©DOGO; TV Dramatic (Demo), 2024")), /*#__PURE__*/ React.createElement("h3", { className: "text-[14px] leading-tight font-medium hover:opacity-70 transition-opacity", __source: { fileName: "", lineNumber: 297, columnNumber: 19 }, __self: this }, 'November 2024 "Ordinary Joe"'))), /*#__PURE__*/ React.createElement("article", { className: "mb-4", __source: { fileName: "", lineNumber: 302, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://open.spotify.com/playlist/0tLP4ka88mAnuq922cctQP?si=9718eb761bc64174", className: "block", target: "_blank", rel: "noopener noreferrer", __source: { fileName: "", lineNumber: 303, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative aspect-square mb-4 overflow-hidden", __source: { fileName: "", lineNumber: 309, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/bfb281e6-32f1-4052-a512-7348fdc8aec4/-/format/auto/", alt: "©Nala Sinephro; Endlessness, 2024", className: "w-full h-full object-cover mix-blend-normal", __source: { fileName: "", lineNumber: 310, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-[12px] mb-2", __source: { fileName: "", lineNumber: 316, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 317, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 319, columnNumber: 21 }, __self: this }, "©Nala Sinephro; Endlessness, 2024")), /*#__PURE__*/ React.createElement("h3", { className: "text-[14px] leading-tight font-medium hover:opacity-70 transition-opacity", __source: { fileName: "", lineNumber: 321, columnNumber: 19 }, __self: this }, 'December 2024 "Endlessness"'))), /*#__PURE__*/ React.createElement("article", { className: "mb-4", __source: { fileName: "", lineNumber: 326, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://open.spotify.com/playlist/02FYR3MgVThU6Pvwk6oUQp?si=18ba73cc8ac045a4", className: "block", target: "_blank", rel: "noopener noreferrer", __source: { fileName: "", lineNumber: 327, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative aspect-square mb-4 overflow-hidden", __source: { fileName: "", lineNumber: 333, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/748d343c-6b23-491b-b032-fc21f17de75c/-/format/auto/", alt: "©Jonny Nash & Suzanne Kraft; Breath Chant , 2020", className: "w-full h-full object-cover mix-blend-normal", __source: { fileName: "", lineNumber: 334, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-[12px] mb-2", __source: { fileName: "", lineNumber: 340, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 341, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 343, columnNumber: 21 }, __self: this }, "©Jonny Nash & Suzanne Kraft; Breath Chant , 2020")), /*#__PURE__*/ React.createElement("h3", { className: "text-[14px] leading-tight font-medium hover:opacity-70 transition-opacity", __source: { fileName: "", lineNumber: 347, columnNumber: 19 }, __self: this }, 'January 2025 "冬越え"'))), /*#__PURE__*/ React.createElement("article", { className: "mb-4", __source: { fileName: "", lineNumber: 352, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://open.spotify.com/playlist/0tLP4ka88mAnuq922cctQP?si=9718eb761bc64174", className: "block", target: "_blank", rel: "noopener noreferrer", __source: { fileName: "", lineNumber: 353, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative aspect-square mb-4 overflow-hidden", __source: { fileName: "", lineNumber: 359, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/284887d7-178f-4a61-81d0-584575c3a2dc/-/format/auto/", alt: "©Nala Sinephro; Endlessness, 2024", className: "w-full h-full object-cover mix-blend-normal", __source: { fileName: "", lineNumber: 360, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-[12px] mb-2", __source: { fileName: "", lineNumber: 366, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 367, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 369, columnNumber: 21 }, __self: this }, "©r mccarthy; Dick Arkive: Issue 8, 2024")), /*#__PURE__*/ React.createElement("h3", { className: "text-[14px] leading-tight font-medium hover:opacity-70 transition-opacity", __source: { fileName: "", lineNumber: 371, columnNumber: 19 }, __self: this }, 'February 2025 "具"'))), /*#__PURE__*/ React.createElement("article", { className: "mb-4", __source: { fileName: "", lineNumber: 376, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://open.spotify.com/playlist/4OpyEGe29D6wXrvC7YX7To?si=bfd5a47296e2494f&pt=d2ae1e50332d273cb0954a0a57bcaef3", className: "block", target: "_blank", rel: "noopener noreferrer", __source: { fileName: "", lineNumber: 377, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative aspect-square mb-4 overflow-hidden", __source: { fileName: "", lineNumber: 383, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/caf65c22-1381-4389-9dd8-5c00711bfdc5/-/format/auto/", alt: "©Jesse Woods; Autoflower, 2017", className: "w-full h-full object-cover mix-blend-normal", __source: { fileName: "", lineNumber: 384, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-[12px] mb-2", __source: { fileName: "", lineNumber: 390, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 391, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 393, columnNumber: 21 }, __self: this }, "©Jesse Woods; Autoflower, 2017")), /*#__PURE__*/ React.createElement("h3", { className: "text-[14px] leading-tight font-medium hover:opacity-70 transition-opacity", __source: { fileName: "", lineNumber: 395, columnNumber: 19 }, __self: this }, 'March 2025 "Who Isn\'t Dancing"')))))))); }

FORGET PLAYLIST

FORGET PLAYLIST

ABOUT

FORGET

FORGET BOOKS

October 2024 "The New Life"

November 2024 "Ordinary Joe"

December 2024 "Endlessness"

January 2025 "冬越え"

February 2025 "具"

March 2025 "Who Isn't Dancing"