function Layout({ children }) { const [showScrollTop, setShowScrollTop] = useState(false); useEffect(()=>{ const handleScroll = ()=>{ setShowScrollTop(window.scrollY > 200); }; window.addEventListener("scroll", handleScroll); return ()=>window.removeEventListener("scroll", handleScroll); }, []); useEffect(()=>{ window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag("js", new Date()); gtag("config", "G-04TZ5F4PQ3"); }, []); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white font-gill-sans-nova", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("script", { async: true, src: "https://www.googletagmanager.com/gtag/js?id=G-04TZ5F4PQ3", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("script", { __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, ` window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-04TZ5F4PQ3'); `), /*#__PURE__*/ React.createElement("header", { className: "fixed top-0 left-0 w-full bg-white z-40 border-b border-gray-100", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[1500px] mx-auto px-6 md:px-12 lg:px-24 py-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-[24px] font-futura font-light tracking-[.1em] italic text-[#333333] hover:opacity-70 transition-opacity", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "FORGET BOOKS"), /*#__PURE__*/ React.createElement("nav", { className: "hidden md:flex space-x-8", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/info", className: "text-[18px] font-futura tracking-[.15em] uppercase text-[#333333] hover:opacity-70 transition-opacity", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, "INFO"), /*#__PURE__*/ React.createElement("a", { href: "/books", className: "text-[18px] font-futura tracking-[.15em] uppercase text-[#333333] hover:opacity-70 transition-opacity", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, "BOOKS"), /*#__PURE__*/ React.createElement("a", { href: "/about", className: "text-[18px] font-futura tracking-[.15em] uppercase text-[#333333] hover:opacity-70 transition-opacity", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, "ABOUT"), /*#__PURE__*/ React.createElement("a", { href: "/contact", className: "text-[18px] font-futura tracking-[.15em] uppercase text-[#333333] hover:opacity-70 transition-opacity", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, "CONTACT")))), /*#__PURE__*/ React.createElement("main", { className: "pt-[72px]", __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this }, children), /*#__PURE__*/ React.createElement("footer", { className: "bg-white border-t border-gray-100 py-8", __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[1500px] mx-auto px-6 md:px-12 lg:px-24", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row justify-between items-start md:items-center", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4 md:mb-0", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-[18px] font-futura font-light tracking-[.1em] italic text-[#333333] hover:opacity-70 transition-opacity", __source: { fileName: "", lineNumber: 77, columnNumber: 15 }, __self: this }, "FORGET BOOKS")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-8", __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/legal", className: "text-[12px] text-[#666666] hover:text-[#333333] transition-colors", __source: { fileName: "", lineNumber: 85, columnNumber: 15 }, __self: this }, "特定商取引法に基づく表記"), /*#__PURE__*/ React.createElement("a", { href: "/privacy", className: "text-[12px] text-[#666666] hover:text-[#333333] transition-colors", __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this }, "プライバシーポリシー"))))), showScrollTop && /*#__PURE__*/ React.createElement("button", { onClick: ()=>window.scrollTo({ top: 0, behavior: "smooth" }), className: "fixed bottom-8 right-8 w-12 h-12 bg-black bg-opacity-50 hover:bg-opacity-70 text-white rounded-full flex items-center justify-center transition-all duration-300", __source: { fileName: "", lineNumber: 103, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-up", __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }))); } function LayoutStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 116, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Layout, { __source: { fileName: "", lineNumber: 117, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-8", __source: { fileName: "", lineNumber: 118, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl mb-4", __source: { fileName: "", lineNumber: 119, columnNumber: 11 }, __self: this }, "Sample Page Content"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 120, columnNumber: 11 }, __self: this }, "This is an example of content within the layout."))), /*#__PURE__*/ React.createElement(Layout, { __source: { fileName: "", lineNumber: 124, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-8 bg-gray-50", __source: { fileName: "", lineNumber: 125, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl mb-4", __source: { fileName: "", lineNumber: 126, columnNumber: 11 }, __self: this }, "Alternative Page Style"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 127, columnNumber: 11 }, __self: this }, "This shows how the layout works with different content styling."))), /*#__PURE__*/ React.createElement(Layout, { __source: { fileName: "", lineNumber: 131, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-8 min-h-[1000px]", __source: { fileName: "", lineNumber: 132, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl mb-4", __source: { fileName: "", lineNumber: 133, columnNumber: 11 }, __self: this }, "Long Content Example"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 134, columnNumber: 11 }, __self: this }, "This demonstrates the scroll-to-top button functionality.")))); } function PageTransition({ children }) { return /*#__PURE__*/ React.createElement("div", { className: "page-transition", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, children, /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, ` .page-transition { animation: fadeIn 1s ease-out forwards; } .page-exit { animation: fadeOut 2s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-100%); } } `)); } function PageTransitionStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-8 p-8", __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[18px] mb-4", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, "Default State"), /*#__PURE__*/ React.createElement(PageTransition, { __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#F3F3F3] p-6", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "Content inside transition wrapper"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[18px] mb-4", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, "Enter Animation"), /*#__PURE__*/ React.createElement(PageTransition, { __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#F3F3F3] p-6 page-enter", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "Content entering"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[18px] mb-4", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, "Exit Animation"), /*#__PURE__*/ React.createElement(PageTransition, { __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#F3F3F3] p-6 page-exit", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "Content exiting")))); } function MainComponent() { const [currentIndex, setCurrentIndex] = useState(0); const [isTransitioning, setIsTransitioning] = useState(false); const firstValue = "is a publishing label in Tokyo"; const values = [ "values feeling over logic", "values personal matters", "values work-in-progress", "values not too much", "values forgetting", "values book lovers", "values biographic indulgences", "illuminates overlooked works", "respects references" ]; const getCurrentText = ()=>{ if (currentIndex === 0) { return firstValue; } return values[currentIndex - 1]; }; useEffect(()=>{ const initialTimer = setTimeout(()=>{ setCurrentIndex(1); }, 3000); const interval = setInterval(()=>{ const randomIndex = Math.floor(Math.random() * values.length); setCurrentIndex(randomIndex + 1); }, 3000); return ()=>{ clearTimeout(initialTimer); clearInterval(interval); }; }, []); useEffect(()=>{ if (isTransitioning) { setTimeout(()=>{ window.location.href = "/info"; }, 1800); } }, [ isTransitioning ]); return /*#__PURE__*/ React.createElement(PageTransition, { __source: { fileName: "", lineNumber: 47, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `min-h-screen relative ${isTransitioning ? "page-exit" : ""}`, onClick: ()=>setIsTransitioning(true), style: { cursor: "pointer" }, __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 background-image", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "relative flex items-center min-h-screen", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mx-auto px-6 md:px-12 lg:px-24 max-w-[1500px] w-full", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/43c0ff2b-1b55-4027-a4c3-4d9b28125c17/-/format/auto/", alt: "FORGET BOOKS", className: "w-[200px] md:w-[300px] mx-auto mb-2 hover:opacity-70 transition-opacity", __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-[22px] md:h-[26px] relative overflow-hidden", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[14px] md:text-[18px] font-futura font-light tracking-[.05em] md:tracking-[.1em] absolute w-full transition-transform duration-500 ease-in-out opacity-0 animate-fadeIn text-[#333333]", style: { transform: `translateY(${currentIndex * -100}%)` }, __source: { fileName: "", lineNumber: 63, columnNumber: 17 }, __self: this }, getCurrentText())))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this }, ` @import url('https://fonts.cdnfonts.com/css/futura-pt'); html { scroll-behavior: smooth; } body { overflow-x: hidden; } .background-image { background-image: url("https://ucarecdn.com/51fc4024-3ac1-4b4d-97f2-e21569cb672b/-/format/auto/"); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.4; position: absolute; inset: 0; } @media (max-width: 768px) { .background-image { background-position: center; } } .page-exit { animation: slideUp 2s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes slideUp { to { transform: translateY(-100%); } } @keyframes fadeIn { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } .animate-fadeIn { animation: fadeIn 0.5s ease-out forwards; } `)); }