function MainComponent() { const [email, setEmail] = React.useState(""); const [isSubmitted, setIsSubmitted] = React.useState(false); const [squares, setSquares] = React.useState([]); const [timeLeft, setTimeLeft] = React.useState({}); const [ballKey, setBallKey] = React.useState(0); React.useEffect(()=>{ const targetDate = new Date(); targetDate.setDate(targetDate.getDate() + 30); const timer = setInterval(()=>{ const now = new Date().getTime(); const distance = targetDate.getTime() - now; const days = Math.floor(distance / (1000 * 60 * 60 * 24)); const hours = Math.floor(distance % (1000 * 60 * 60 * 24) / (1000 * 60 * 60)); const minutes = Math.floor(distance % (1000 * 60 * 60) / (1000 * 60)); const seconds = Math.floor(distance % (1000 * 60) / 1000); setTimeLeft({ days, hours, minutes, seconds }); }, 1000); return ()=>clearInterval(timer); }, []); const handleSubmit = (e)=>{ e.preventDefault(); if (email) { setIsSubmitted(true); console.log("Email submitted:", email); } }; const scrollToNext = ()=>{ const nextSection = document.querySelector("#philosophy"); nextSection?.scrollIntoView({ behavior: "smooth" }); setBallKey((prev)=>prev + 1); }; React.useEffect(()=>{ const generateSquare = ()=>{ const centerMarginX = window.innerWidth * 0.2; const centerMarginY = window.innerHeight * 0.2; let x, y; let attempts = 0; const maxAttempts = 50; do { x = Math.random() * (window.innerWidth - 120); y = Math.random() * (window.innerHeight - 120); attempts++; const wouldOverlap = squares.some((existingSquare)=>{ const distance = Math.sqrt(Math.pow(x - existingSquare.x, 2) + Math.pow(y - existingSquare.y, 2)); return distance < 150; }); if (!wouldOverlap && !(x > centerMarginX && x < window.innerWidth - centerMarginX && y > centerMarginY && y < window.innerHeight - centerMarginY)) { break; } }while (attempts < maxAttempts) const newSquare = { id: Math.random(), x: x, y: y, size: Math.random() * 40 + 60, opacity: Math.random() * 0.015 + 0.005, delay: Math.random() * 1000, duration: Math.random() * 3000 + 4000, rotation: 0 }; setSquares((prev)=>{ const filtered = prev.filter((_, index)=>prev.length - index < 15); return [ ...filtered, newSquare ]; }); }; for(let i = 0; i < 8; i++){ setTimeout(()=>generateSquare(), i * 800); } const interval = setInterval(()=>{ generateSquare(); }, 1500); return ()=>clearInterval(interval); }, []); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f8f7f4] relative overflow-hidden", __source: { fileName: "", lineNumber: 107, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 pointer-events-none", style: { zIndex: 1 }, __source: { fileName: "", lineNumber: 108, columnNumber: 7 }, __self: this }, squares.map((square)=>/*#__PURE__*/ React.createElement("div", { key: square.id, className: "absolute", style: { left: square.x, top: square.y, width: square.size, height: square.size, opacity: 0, animation: `drawSquareStroke ${square.duration}ms ease-in-out ${square.delay}ms forwards`, transform: `rotate(${square.rotation}deg)`, border: "0.5px solid #ccc", borderRadius: "1px", position: "fixed" }, __source: { fileName: "", lineNumber: 110, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("header", { className: "fixed top-0 left-0 right-0 z-50 bg-[#0a0a0a] bg-opacity-70 backdrop-blur-sm", __source: { fileName: "", lineNumber: 129, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto p-4 md:p-6 lg:p-8 flex justify-center", __source: { fileName: "", lineNumber: 130, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/abbe70f9-61d1-45bc-a37b-a8c60b89235e/-/format/auto/", alt: "Atelier Cadré", className: "h-40 md:h-44 lg:h-48 opacity-80", __source: { fileName: "", lineNumber: 131, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("section", { className: "min-h-screen flex items-center justify-center px-6 md:px-8 pt-24 relative", __source: { fileName: "", lineNumber: 139, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto text-center space-y-8 relative z-10", __source: { fileName: "", lineNumber: 140, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "group cursor-pointer", onClick: scrollToNext, __source: { fileName: "", lineNumber: 141, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-64 h-64 bg-[#1a1a1a] text-xl md:text-2xl font-light text-white transition-all duration-300 hover:bg-opacity-90 mx-auto", __source: { fileName: "", lineNumber: 142, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-full space-y-2", __source: { fileName: "", lineNumber: 143, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-light tracking-[0.2em] text-lg md:text-xl uppercase", __source: { fileName: "", lineNumber: 144, columnNumber: 17 }, __self: this }, "Arriving Soon")), /*#__PURE__*/ React.createElement("div", { key: ballKey, className: "absolute w-3 h-3 bg-white rounded-full", style: { left: "50%", transform: "translateX(-50%)", animation: "ballDrop 8s ease-in-out infinite" }, __source: { fileName: "", lineNumber: 149, columnNumber: 15 }, __self: this }))))), /*#__PURE__*/ React.createElement("section", { id: "philosophy", className: "min-h-screen flex items-center justify-center px-6 md:px-8 bg-white relative", __source: { fileName: "", lineNumber: 163, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto text-center space-y-8 md:space-y-12 relative z-10", __source: { fileName: "", lineNumber: 167, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl md:text-5xl font-light text-[#1a1a1a] mb-6 md:mb-8", __source: { fileName: "", lineNumber: 168, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-16", __source: { fileName: "", lineNumber: 169, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 170, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-96 h-96 mx-auto cursor-pointer hover:opacity-80 transition-opacity", __source: { fileName: "", lineNumber: 171, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/36136a88-262c-4c90-be69-a38c1b633227/-/format/auto/", alt: "Extérieur", className: "w-full h-full object-contain", onClick: ()=>console.log("Extérieur clicked"), __source: { fileName: "", lineNumber: 172, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 181, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-96 h-96 mx-auto cursor-pointer hover:opacity-80 transition-opacity", __source: { fileName: "", lineNumber: 182, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/11f4dd84-9106-42bb-8c51-3c5bedeb6f6c/-/format/auto/", alt: "Intérieur", className: "w-full h-full object-contain", onClick: ()=>console.log("Intérieur clicked"), __source: { fileName: "", lineNumber: 183, columnNumber: 17 }, __self: this })))))), /*#__PURE__*/ React.createElement("section", { className: "min-h-screen flex items-center justify-center px-6 md:px-8 bg-[#f8f7f4] relative", __source: { fileName: "", lineNumber: 195, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto text-center space-y-16 relative z-10", __source: { fileName: "", lineNumber: 196, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl md:text-5xl font-light text-[#1a1a1a]", __source: { fileName: "", lineNumber: 197, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "space-y-12", __source: { fileName: "", lineNumber: 198, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-6xl md:text-8xl font-thin text-[#1a1a1a] opacity-20", __source: { fileName: "", lineNumber: 199, columnNumber: 13 }, __self: this }, "01"), /*#__PURE__*/ React.createElement("p", { className: "text-lg md:text-xl text-[#666] max-w-xl mx-auto", __source: { fileName: "", lineNumber: 202, columnNumber: 13 }, __self: this }, "Concept"), /*#__PURE__*/ React.createElement("div", { className: "text-6xl md:text-8xl font-thin text-[#1a1a1a] opacity-20", __source: { fileName: "", lineNumber: 203, columnNumber: 13 }, __self: this }, "02"), /*#__PURE__*/ React.createElement("p", { className: "text-lg md:text-xl text-[#666] max-w-xl mx-auto", __source: { fileName: "", lineNumber: 206, columnNumber: 13 }, __self: this }, "Form"), /*#__PURE__*/ React.createElement("div", { className: "text-6xl md:text-8xl font-thin text-[#1a1a1a] opacity-20", __source: { fileName: "", lineNumber: 209, columnNumber: 13 }, __self: this }, "03"), /*#__PURE__*/ React.createElement("p", { className: "text-lg md:text-xl text-[#666] max-w-xl mx-auto", __source: { fileName: "", lineNumber: 212, columnNumber: 13 }, __self: this }, "Creation")))), /*#__PURE__*/ React.createElement("section", { className: "min-h-screen flex items-center justify-center px-6 md:px-8 bg-[#1a1a1a] relative", __source: { fileName: "", lineNumber: 219, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto text-center space-y-8 relative z-10", __source: { fileName: "", lineNumber: 220, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 221, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl md:text-4xl font-light text-white", __source: { fileName: "", lineNumber: 222, columnNumber: 13 }, __self: this }, "Invitation à l’Atelier"), /*#__PURE__*/ React.createElement("p", { className: "text-white text-opacity-70 font-light text-lg", __source: { fileName: "", lineNumber: 223, columnNumber: 13 }, __self: this }, "(Access by Invitation)")), !isSubmitted ? /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 227, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "email", value: email, onChange: (e)=>setEmail(e.target.value), placeholder: "Your email", required: true, className: "w-full px-4 py-4 bg-transparent border border-white border-opacity-30 focus:border-white focus:outline-none text-white placeholder-white placeholder-opacity-60", name: "email", __source: { fileName: "", lineNumber: 228, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-4 bg-white text-[#1a1a1a] hover:bg-opacity-90 transition-all duration-300 font-light", __source: { fileName: "", lineNumber: 237, columnNumber: 15 }, __self: this }, "Request Invitation")) : /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 245, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-16 h-16 mx-auto border border-white rounded-full flex items-center justify-center", __source: { fileName: "", lineNumber: 246, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check text-white text-xl", __source: { fileName: "", lineNumber: 247, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-white font-light", __source: { fileName: "", lineNumber: 249, columnNumber: 15 }, __self: this }, "Invitation Sent")), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mt-20", __source: { fileName: "", lineNumber: 253, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/6df7e553-7be8-42ca-9cb7-7accbb9cf9a1/-/format/auto/", alt: "Atelier Cadré", className: "h-32 md:h-40 opacity-60", __source: { fileName: "", lineNumber: 254, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#1a1a1a] p-6 md:p-8 border-t border-white border-opacity-10 relative z-10", __source: { fileName: "", lineNumber: 263, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0", __source: { fileName: "", lineNumber: 264, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-white text-opacity-60", __source: { fileName: "", lineNumber: 265, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 266, columnNumber: 13 }, __self: this }, "© 2025 Atelier Cadré")), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-6", __source: { fileName: "", lineNumber: 269, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { target: "_blank", href: "mailto:project@ateliercadre.ca", className: "text-white text-opacity-60 hover:text-white transition-colors", __source: { fileName: "", lineNumber: 270, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-envelope", __source: { fileName: "", lineNumber: 274, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("a", { target: "_blank", href: "https://instagram.com/atelier.cadre", className: "text-white text-opacity-60 hover:text-white transition-colors", __source: { fileName: "", lineNumber: 276, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-instagram", __source: { fileName: "", lineNumber: 280, columnNumber: 15 }, __self: this }))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 286, columnNumber: 7 }, __self: this }, ` @keyframes drawSquareStroke { 0% { opacity: 0; border-top: 0.5px solid #ccc; border-right: 0.5px solid transparent; border-bottom: 0.5px solid transparent; border-left: 0.5px solid transparent; } 25% { opacity: 1; border-top: 0.5px solid #ccc; border-right: 0.5px solid #ccc; border-bottom: 0.5px solid transparent; border-left: 0.5px solid transparent; } 50% { opacity: 1; border-top: 0.5px solid #ccc; border-right: 0.5px solid #ccc; border-bottom: 0.5px solid #ccc; border-left: 0.5px solid transparent; } 75% { opacity: 1; border-top: 0.5px solid #ccc; border-right: 0.5px solid #ccc; border-bottom: 0.5px solid #ccc; border-left: 0.5px solid #ccc; } 100% { opacity: 1; border: 0.5px solid #ccc; } } @keyframes randomBounce1 { 0% { top: 6px; left: 6px; } 15% { top: 245px; left: 60px; } 30% { top: 40px; left: 245px; } 45% { top: 200px; left: 220px; } 60% { top: 30px; left: 80px; } 75% { top: 245px; left: 180px; } 90% { top: 50px; left: 6px; } 100% { top: 6px; left: 6px; } } @keyframes randomBounce2 { 0% { top: 245px; left: 245px; } 20% { top: 40px; left: 180px; } 35% { top: 220px; left: 6px; } 50% { top: 60px; left: 240px; } 65% { top: 180px; left: 70px; } 80% { top: 6px; left: 150px; } 95% { top: 240px; left: 200px; } 100% { top: 245px; left: 245px; } } @keyframes bounceInsideSquare1 { 0% { top: 10px; left: 10px; } 25% { top: 10px; right: 10px; left: auto; } 50% { bottom: 10px; right: 10px; top: auto; left: auto; } 75% { bottom: 10px; left: 10px; top: auto; right: auto; } 100% { top: 10px; left: 10px; bottom: auto; right: auto; } } @keyframes bounceInsideSquare2 { 0% { bottom: 10px; right: 10px; } 25% { bottom: 10px; left: 10px; right: auto; } 50% { top: 10px; left: 10px; bottom: auto; right: auto; } 75% { top: 10px; right: 10px; bottom: auto; left: auto; } 100% { bottom: 10px; right: 10px; top: auto; left: auto; } } @keyframes rollAroundSquare { 0% { top: -6px; left: 50%; transform: translateX(-50%); } 25% { top: 50%; right: -6px; left: auto; transform: translateY(-50%); } 50% { bottom: -6px; right: auto; top: auto; left: 50%; transform: translateX(-50%); } 75% { top: 50%; left: -6px; bottom: auto; transform: translateY(-50%); } 100% { top: -6px; left: 50%; transform: translateX(-50%); } } @keyframes rollAroundSquarePerimeter { 0% { top: -6px; left: 50%; transform: translateX(-50%); } 25% { top: 50%; right: -6px; left: auto; transform: translateY(-50%); } 50% { bottom: -6px; right: auto; top: auto; left: 50%; transform: translateX(-50%); } 75% { top: 50%; left: -6px; bottom: auto; transform: translateY(-50%); } 100% { top: -6px; left: 50%; transform: translateX(-50%); } } @keyframes ballDrop { 0% { top: 10px; background-color: white; animation-timing-function: ease-in; } 2.5% { top: 240px; background-color: white; animation-timing-function: ease-out; } 5% { top: 50px; background-color: white; animation-timing-function: ease-in; } 7.5% { top: 240px; background-color: white; animation-timing-function: ease-out; } 10% { top: 80px; background-color: white; animation-timing-function: ease-in; } 12.5% { top: 240px; background-color: white; animation-timing-function: ease-out; } 15% { top: 100px; background-color: white; animation-timing-function: ease-in; } 17.5% { top: 240px; background-color: white; animation-timing-function: ease-out; } 20% { top: 120px; background-color: white; animation-timing-function: ease-in; } 22% { top: 280px; background-color: black; } 25% { top: 400px; background-color: black; } 30% { top: 600px; background-color: black; } 40% { top: 1000px; background-color: black; } 60% { top: 1800px; background-color: black; } 70% { top: 2200px; background-color: white; } 80% { top: 2600px; background-color: white; } 98% { top: 3200px; background-color: white; } 99% { top: 10px; background-color: white; } 100% { top: 10px; background-color: white; } } @keyframes ballDropAndFall { 0% { top: 10px; animation-timing-function: ease-in; } 5% { top: 240px; animation-timing-function: ease-out; } 10% { top: 80px; animation-timing-function: ease-in; } 15% { top: 240px; animation-timing-function: ease-out; } 20% { top: 100px; animation-timing-function: ease-in; } 25% { top: 240px; animation-timing-function: ease-out; } 30% { top: 120px; animation-timing-function: ease-in; } 35% { top: 240px; animation-timing-function: ease-out; } 40% { top: 130px; animation-timing-function: ease-in; } 45% { top: 240px; animation-timing-function: ease-out; } 50% { top: 140px; animation-timing-function: ease-in; } 55% { top: 240px; animation-timing-function: ease-out; } 60% { top: 150px; animation-timing-function: ease-in; } 65% { top: 240px; animation-timing-function: ease-out; } 70% { top: 160px; animation-timing-function: ease-in; } 75% { top: 240px; animation-timing-function: ease-out; } 80% { top: 170px; animation-timing-function: ease-in; } 85% { top: 240px; animation-timing-function: ease-out; } 90% { top: 180px; animation-timing-function: ease-in; } 95% { top: 240px; animation-timing-function: ease-out; } 100% { top: 190px; animation-timing-function: ease-in; } } @keyframes sandFunnelCenter { 0% { top: -2px; opacity: 1; } 100% { top: 24px; opacity: 0; } } `)); }