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/e38ee810-9d85-4253-a91b-8276475f63ab/-/format/auto/", category: "Landscape", alt: "Mountain landscape", span: "row-span-2 col-span-2", height: "h-[600px]" }, { src: "https://ucarecdn.com/24573445-389e-45b7-81ea-410d7be379be/-/format/auto/", category: "Nature", alt: "Forest scene", span: "", height: "h-[300px]" }, { src: "https://ucarecdn.com/ed122d35-fb8c-4f85-b632-0275522a26f3/-/format/auto/", category: "Seascape", alt: "Ocean waves", span: "", height: "h-[300px]" }, { src: "https://ucarecdn.com/f15360d2-c088-4faf-ab5b-b3655fc7269c/-/format/auto/", category: "Architecture", alt: "Urban building", span: "col-span-2", height: "h-[400px]" }, { src: "https://ucarecdn.com/dc06ec25-e7b3-4adc-bb42-1acc486e0903/-/format/auto/", category: "Street", alt: "City street", span: "", height: "h-[300px]" }, { src: "https://ucarecdn.com/5fb7d0e3-d4ad-4fc0-9e5d-0b5452e2cbce/-/format/auto/", category: "Nature", alt: "Natural landscape", span: "col-span-2", height: "h-[400px]" } ]; const [isMenuOpen, setIsMenuOpen] = useState(false); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#1B1B1B] flex flex-col", __source: { fileName: "", lineNumber: 50, 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: 51, 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: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-[#DFFF4E] font-inter-tight-medium text-2xl hover:text-[#F6F6F6]", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "Jessica Santos"), /*#__PURE__*/ React.createElement("div", { className: "hidden md:flex space-x-8", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-[#B1B1B1] hover:text-[#DFFF4E] font-inter-tight-regular", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, "Gallery"), /*#__PURE__*/ React.createElement("a", { href: "/about", className: "text-[#B1B1B1] hover:text-[#DFFF4E] font-inter-tight-regular", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("a", { href: "/contact", className: "text-[#B1B1B1] hover:text-[#DFFF4E] font-inter-tight-regular", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, "Contact")), /*#__PURE__*/ React.createElement("button", { className: "md:hidden text-[#DFFF4E]", onClick: ()=>setIsMenuOpen(!isMenuOpen), __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isMenuOpen ? "fa-times" : "fa-bars"}`, __source: { fileName: "", lineNumber: 83, 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: 87, 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: 88, 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: 94, 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: 100, 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: 109, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "max-w-6xl mx-auto mb-8 md:mb-16", __source: { fileName: "", lineNumber: 110, 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: 111, columnNumber: 11 }, __self: this }, "Through My Lens: A Visual Journey"), /*#__PURE__*/ React.createElement("p", { className: "text-[#B1B1B1] font-inter-tight-regular text-lg md:text-xl uppercase tracking-widest", __source: { fileName: "", lineNumber: 114, columnNumber: 11 }, __self: this }, "Photography by Jessica Santos")), /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-4 lg:grid-cols-6 gap-4 auto-rows-[300px]", __source: { fileName: "", lineNumber: 118, columnNumber: 9 }, __self: this }, portfolioImages.map((image, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `relative group cursor-pointer overflow-hidden ${image.span}`, onClick: ()=>setSelectedImage(image), __source: { fileName: "", lineNumber: 120, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image.src, alt: image.alt, className: `w-full ${image.height} md:h-full object-cover transition-transform duration-300 hover:scale-105`, __source: { fileName: "", lineNumber: 125, 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: 130, 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: 131, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#F6F6F6] font-inter-tight-regular text-sm uppercase", __source: { fileName: "", lineNumber: 132, 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: 142, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 146, 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: 147, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "absolute top-4 right-4 text-[#F6F6F6] text-xl", onClick: ()=>setSelectedImage(null), __source: { fileName: "", lineNumber: 152, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 156, columnNumber: 17 }, __self: this }))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#1B1B1B] border-t border-[#4B4B4B] py-8 md:py-12", __source: { fileName: "", lineNumber: 163, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto px-4 md:px-8", __source: { fileName: "", lineNumber: 164, 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: 165, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center md:text-left", __source: { fileName: "", lineNumber: 166, 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: 167, columnNumber: 15 }, __self: this }, "Contact"), /*#__PURE__*/ React.createElement("p", { className: "text-[#B1B1B1] font-inter-tight-regular", __source: { fileName: "", lineNumber: 170, columnNumber: 15 }, __self: this }, "info@jessicasantos.com"), /*#__PURE__*/ React.createElement("p", { className: "text-[#B1B1B1] font-inter-tight-regular", __source: { fileName: "", lineNumber: 173, columnNumber: 15 }, __self: this }, "+1 (555) 123-4567")), /*#__PURE__*/ React.createElement("div", { className: "text-center md:text-left", __source: { fileName: "", lineNumber: 177, 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: 178, columnNumber: 15 }, __self: this }, "Follow"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center md:justify-start space-x-6", __source: { fileName: "", lineNumber: 181, 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: 182, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-instagram text-2xl", __source: { fileName: "", lineNumber: 188, 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: 190, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-twitter text-2xl", __source: { fileName: "", lineNumber: 196, 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: 198, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-youtube text-2xl", __source: { fileName: "", lineNumber: 204, columnNumber: 19 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "text-center md:text-left", __source: { fileName: "", lineNumber: 208, 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: 209, columnNumber: 15 }, __self: this }, "Location"), /*#__PURE__*/ React.createElement("p", { className: "text-[#B1B1B1] font-inter-tight-regular", __source: { fileName: "", lineNumber: 212, columnNumber: 15 }, __self: this }, "San Francisco, CA"), /*#__PURE__*/ React.createElement("p", { className: "text-[#B1B1B1] font-inter-tight-regular", __source: { fileName: "", lineNumber: 215, columnNumber: 15 }, __self: this }, "United States"))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 md:mt-12 text-center", __source: { fileName: "", lineNumber: 220, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#B1B1B1] font-inter-tight-regular text-sm md:text-base", __source: { fileName: "", lineNumber: 221, columnNumber: 13 }, __self: this }, "© 2024 Jessica Santos. All rights reserved."))))); }