function FramerMotion(props) { const [mounted, setMounted] = useState(false); const ref = useRef(null); useEffect(()=>{ const checkRef = setInterval(()=>{ if (window.Motion) { clearInterval(checkRef); } if (ref.current) { clearInterval(checkRef); window.React = React; const script = document.createElement("script"); script.src = "https://cdn.jsdelivr.net/npm/framer-motion@11.11.17/dist/framer-motion.min.js"; script.type = "module"; script.onload = ()=>{ setMounted(true); }; ref.current.appendChild(script); } }, 100); return ()=>{ clearInterval(checkRef); if (ref.current) { const script = ref.current.querySelector("script"); if (script) { ref.current.removeChild(script); } } delete window.motion; }; }, []); const mountElm = /*#__PURE__*/ React.createElement("div", { className: "hidden", ref: ref, __source: { fileName: "", lineNumber: 35, columnNumber: 20 }, __self: this }); return mounted ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(window.Motion.motion.div, { ...props, __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }), mountElm) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { ...props, __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }), mountElm); } function FramerMotionStory() { return /*#__PURE__*/ React.createElement(FramerMotion, { __source: { fileName: "", lineNumber: 50, columnNumber: 10 }, __self: this }); } function MainComponent() { const [selectedImage, setSelectedImage] = useState(null); const portfolioImages = [ { src: "https://ucarecdn.com/cf68fda6-b3e8-498c-9ecc-f191ea6c7d1d/-/format/auto/", alt: "Long empty road leading to snow-capped mountains in Iceland", category: "Outside" }, { src: "https://ucarecdn.com/5285970c-dc4d-406e-9a8e-8118db63ccea/-/format/auto/", alt: "Silhouette of bare tree against moody sky", category: "Nature" }, { src: "https://ucarecdn.com/1abef9a0-b603-4dce-bef1-38d50cbac9c5/-/format/auto/", alt: "Majestic mountain peaks in winter", category: "Landscape" }, { src: "https://ucarecdn.com/e36fd215-daad-42d7-82d7-fe215a24edc3/-/format/auto/", alt: "Dramatic black and white lighthouse with crashing waves", category: "Seascape" }, { src: "https://ucarecdn.com/305b1353-ea0e-4a3b-981e-216983293fe1/-/format/auto/", alt: "Aerial view of coastal cliffs with turquoise bay", category: "Seascape" }, { src: "https://ucarecdn.com/68b8f2bd-783d-4891-9661-bebbd52d0226/-/format/auto/", alt: "Aerial black and white view of solitary house surrounded by dense forest", category: "Aerial" }, { src: "https://ucarecdn.com/d01693e1-b7dc-4c1f-af73-c8189d64ba09/-/format/auto/", alt: "Misty mountain peaks at sunrise", category: "Landscape" }, { src: "https://ucarecdn.com/2b21741e-009f-4737-b3d1-8f07a19b356e/-/format/auto/", alt: "Northern lights dancing over snowy mountains", category: "Night" }, { src: "https://ucarecdn.com/0b40b8fc-d3c9-4cf9-b106-071ecf105f82/-/format/auto/", alt: "Dramatic sunset with pink clouds reflecting in still lake", category: "Landscape" } ]; const [isMenuOpen, setIsMenuOpen] = useState(false); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#1B1B1B] flex flex-col", __source: { fileName: "", lineNumber: 53, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "fixed top-0 left-0 right-0 bg-[#1B1B1B] border-b border-[#4B4B4B] z-50", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto px-8 py-6 flex justify-between items-center", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-[#DFFF4E] font-inter-tight-medium text-2xl hover:text-[#F6F6F6]", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, "SetFlow Pro"), /*#__PURE__*/ React.createElement("div", { className: "hidden md:flex space-x-8", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-[#B1B1B1] hover:text-[#DFFF4E] font-inter-tight-regular", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, "Gallery"), /*#__PURE__*/ React.createElement("a", { href: "/about", className: "text-[#B1B1B1] hover:text-[#DFFF4E] font-inter-tight-regular", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("a", { href: "/contact", className: "text-[#B1B1B1] hover:text-[#DFFF4E] font-inter-tight-regular", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, "Contact")), /*#__PURE__*/ React.createElement("button", { className: "md:hidden text-[#DFFF4E]", onClick: ()=>setIsMenuOpen(!isMenuOpen), __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isMenuOpen ? "fa-times" : "fa-bars"}`, __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }))), isMenuOpen && /*#__PURE__*/ React.createElement("div", { className: "md:hidden bg-[#1B1B1B] border-t border-[#4B4B4B] px-8 py-4", __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "block py-2 text-[#B1B1B1] hover:text-[#DFFF4E] font-inter-tight-regular", __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, "Gallery"), /*#__PURE__*/ React.createElement("a", { href: "/about", className: "block py-2 text-[#B1B1B1] hover:text-[#DFFF4E] font-inter-tight-regular", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("a", { href: "/contact", className: "block py-2 text-[#B1B1B1] hover:text-[#DFFF4E] font-inter-tight-regular", __source: { fileName: "", lineNumber: 103, columnNumber: 13 }, __self: this }, "Contact"))), /*#__PURE__*/ React.createElement("div", { className: "pt-[100px] md:pt-[160px] px-4 md:px-8 flex-grow", __source: { fileName: "", lineNumber: 112, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "max-w-6xl mx-auto mb-8 md:mb-16", __source: { fileName: "", lineNumber: 113, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[#F6F6F6] font-inter-tight-medium text-3xl md:text-5xl lg:text-7xl mb-4", __source: { fileName: "", lineNumber: 114, columnNumber: 11 }, __self: this }, "SetFlow Pro"), /*#__PURE__*/ React.createElement("p", { className: "text-[#B1B1B1] font-inter-tight-regular text-lg md:text-xl uppercase tracking-widest", __source: { fileName: "", lineNumber: 117, columnNumber: 11 }, __self: this }, "Professional DJ Set Management")), /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 md:gap-0", __source: { fileName: "", lineNumber: 121, columnNumber: 9 }, __self: this }, portfolioImages.map((image, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "relative group cursor-pointer overflow-hidden", onClick: ()=>setSelectedImage(image), __source: { fileName: "", lineNumber: 123, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image.src, alt: image.alt, className: "w-full h-[300px] md:h-[400px] object-cover transition-transform duration-300 hover:scale-105", __source: { fileName: "", lineNumber: 128, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black bg-opacity-20 md:bg-opacity-0 group-hover:bg-opacity-40 transition-all duration-300", __source: { fileName: "", lineNumber: 133, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 left-0 p-4 md:translate-y-full group-hover:translate-y-0 transition-transform duration-300", __source: { fileName: "", lineNumber: 134, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#F6F6F6] font-inter-tight-regular text-sm uppercase", __source: { fileName: "", lineNumber: 135, columnNumber: 19 }, __self: this }, image.category)))))), selectedImage && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50 p-4", onClick: ()=>setSelectedImage(null), __source: { fileName: "", lineNumber: 145, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 149, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: selectedImage.src, alt: selectedImage.alt, className: "max-h-[90vh] max-w-[90vw] object-contain", __source: { fileName: "", lineNumber: 150, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "absolute top-4 right-4 text-[#F6F6F6] text-xl", onClick: ()=>setSelectedImage(null), __source: { fileName: "", lineNumber: 155, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 159, columnNumber: 17 }, __self: this }))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#1B1B1B] border-t border-[#4B4B4B] py-8 md:py-12", __source: { fileName: "", lineNumber: 166, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto px-4 md:px-8", __source: { fileName: "", lineNumber: 167, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8", __source: { fileName: "", lineNumber: 168, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center md:text-left", __source: { fileName: "", lineNumber: 169, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-[#DFFF4E] font-inter-tight-medium text-xl mb-3 md:mb-4", __source: { fileName: "", lineNumber: 170, columnNumber: 15 }, __self: this }, "Contact"), /*#__PURE__*/ React.createElement("p", { className: "text-[#B1B1B1] font-inter-tight-regular", __source: { fileName: "", lineNumber: 173, columnNumber: 15 }, __self: this }, "info@setflowpro.com"), /*#__PURE__*/ React.createElement("p", { className: "text-[#B1B1B1] font-inter-tight-regular", __source: { fileName: "", lineNumber: 176, columnNumber: 15 }, __self: this }, "+1 (555) 123-4567")), /*#__PURE__*/ React.createElement("div", { className: "text-center md:text-left", __source: { fileName: "", lineNumber: 180, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-[#DFFF4E] font-inter-tight-medium text-xl mb-3 md:mb-4", __source: { fileName: "", lineNumber: 181, columnNumber: 15 }, __self: this }, "Follow"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center md:justify-start space-x-6", __source: { fileName: "", lineNumber: 184, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://www.instagram.com/create_xyz/", target: "_blank", rel: "noopener noreferrer", className: "text-[#B1B1B1] hover:text-[#DFFF4E]", __source: { fileName: "", lineNumber: 185, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-instagram text-2xl", __source: { fileName: "", lineNumber: 191, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "https://x.com/create_xyz", target: "_blank", rel: "noopener noreferrer", className: "text-[#B1B1B1] hover:text-[#DFFF4E]", __source: { fileName: "", lineNumber: 193, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-twitter text-2xl", __source: { fileName: "", lineNumber: 199, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "https://www.youtube.com/@createdotxyz", target: "_blank", rel: "noopener noreferrer", className: "text-[#B1B1B1] hover:text-[#DFFF4E]", __source: { fileName: "", lineNumber: 201, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-youtube text-2xl", __source: { fileName: "", lineNumber: 207, columnNumber: 19 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "text-center md:text-left", __source: { fileName: "", lineNumber: 211, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-[#DFFF4E] font-inter-tight-medium text-xl mb-3 md:mb-4", __source: { fileName: "", lineNumber: 212, columnNumber: 15 }, __self: this }, "Location"), /*#__PURE__*/ React.createElement("p", { className: "text-[#B1B1B1] font-inter-tight-regular", __source: { fileName: "", lineNumber: 215, columnNumber: 15 }, __self: this }, "San Francisco, CA"), /*#__PURE__*/ React.createElement("p", { className: "text-[#B1B1B1] font-inter-tight-regular", __source: { fileName: "", lineNumber: 218, columnNumber: 15 }, __self: this }, "United States"))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 md:mt-12 text-center", __source: { fileName: "", lineNumber: 223, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#B1B1B1] font-inter-tight-regular text-sm md:text-base", __source: { fileName: "", lineNumber: 224, columnNumber: 13 }, __self: this }, "© 2024 SetFlow Pro. All rights reserved."))))); }