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 [prompt, setPrompt] = useState(""); const [generatedImage, setGeneratedImage] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); 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); /*#__PURE__*/ React.createElement("nav", { className: "fixed top-0 left-0 right-0 bg-[#1B1B1B] border-b border-[#4B4B4B] z-50", __source: { fileName: "", lineNumber: 55, columnNumber: 3 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto px-8 py-6 flex justify-between items-center", __source: { fileName: "", lineNumber: 56, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-[#DFFF4E] font-inter-tight-medium text-2xl hover:text-[#F6F6F6]", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, "Barton Werner"), /*#__PURE__*/ React.createElement("div", { className: "hidden md:flex space-x-8", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-[#B1B1B1] hover:text-[#DFFF4E] font-inter-tight-regular", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, "Gallery"), /*#__PURE__*/ React.createElement("a", { href: "/about", className: "text-[#B1B1B1] hover:text-[#DFFF4E] font-inter-tight-regular", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("a", { href: "/contact", className: "text-[#B1B1B1] hover:text-[#DFFF4E] font-inter-tight-regular", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, "Contact")), /*#__PURE__*/ React.createElement("button", { className: "md:hidden text-[#DFFF4E]", onClick: ()=>setIsMenuOpen(!isMenuOpen), __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isMenuOpen ? "fa-times" : "fa-bars"}`, __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }))), isMenuOpen && /*#__PURE__*/ React.createElement("div", { className: "md:hidden bg-[#1B1B1B] border-t border-[#4B4B4B] px-8 py-4", __source: { fileName: "", lineNumber: 91, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "block py-2 text-[#B1B1B1] hover:text-[#DFFF4E] font-inter-tight-regular", __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __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: 98, columnNumber: 9 }, __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: 104, columnNumber: 9 }, __self: this }, "Contact"))); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#1B1B1B] flex flex-col", __source: { fileName: "", lineNumber: 115, 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: 116, 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: 117, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-[#DFFF4E] font-inter-tight-medium text-2xl hover:text-[#F6F6F6]", __source: { fileName: "", lineNumber: 118, columnNumber: 11 }, __self: this }, "Barton Werner"), /*#__PURE__*/ React.createElement("div", { className: "hidden md:flex space-x-8", __source: { fileName: "", lineNumber: 124, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-[#B1B1B1] hover:text-[#DFFF4E] font-inter-tight-regular", __source: { fileName: "", lineNumber: 125, columnNumber: 13 }, __self: this }, "Gallery"), /*#__PURE__*/ React.createElement("a", { href: "/about", className: "text-[#B1B1B1] hover:text-[#DFFF4E] font-inter-tight-regular", __source: { fileName: "", lineNumber: 131, columnNumber: 13 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("a", { href: "/contact", className: "text-[#B1B1B1] hover:text-[#DFFF4E] font-inter-tight-regular", __source: { fileName: "", lineNumber: 137, columnNumber: 13 }, __self: this }, "Contact")), /*#__PURE__*/ React.createElement("button", { className: "md:hidden text-[#DFFF4E]", onClick: ()=>setIsMenuOpen(!isMenuOpen), __source: { fileName: "", lineNumber: 144, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isMenuOpen ? "fa-times" : "fa-bars"}`, __source: { fileName: "", lineNumber: 148, 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: 152, 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: 153, 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: 159, 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: 165, 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: 174, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto text-center", __source: { fileName: "", lineNumber: 175, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[#F6F6F6] font-inter-tight-medium text-4xl md:text-6xl lg:text-8xl mb-8", __source: { fileName: "", lineNumber: 176, columnNumber: 11 }, __self: this }, "AI Image Generator"), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 179, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: prompt, onChange: (e)=>setPrompt(e.target.value), placeholder: "Describe the image you want to create...", className: "w-full bg-[#2C2C2C] border border-[#4B4B4B] rounded-lg p-4 text-[#F6F6F6] font-inter-tight-regular focus:outline-none focus:border-[#DFFF4E]", __source: { fileName: "", lineNumber: 180, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: async ()=>{ setLoading(true); setError(null); try { const response = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(prompt)}`); const data = await response.json(); setGeneratedImage(data.data[0]); } catch (err) { setError("Failed to generate image. Please try again."); } setLoading(false); }, disabled: loading || !prompt, className: "w-full bg-[#2C2C2C] border border-[#4B4B4B] text-[#F6F6F6] font-inter-tight-regular py-4 px-8 rounded-lg hover:bg-[#3C3C3C] transition-colors duration-300 disabled:opacity-50", __source: { fileName: "", lineNumber: 187, columnNumber: 13 }, __self: this }, loading ? "Generating..." : "Generate Image")), error && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 mt-4", __source: { fileName: "", lineNumber: 208, columnNumber: 21 }, __self: this }, error), generatedImage && /*#__PURE__*/ React.createElement("div", { className: "mt-12", __source: { fileName: "", lineNumber: 210, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: generatedImage, alt: "AI generated image from prompt", className: "w-full rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 211, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#1B1B1B] border-t border-[#4B4B4B] py-8 md:py-12", __source: { fileName: "", lineNumber: 220, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto px-4 md:px-8", __source: { fileName: "", lineNumber: 221, 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: 222, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center md:text-left", __source: { fileName: "", lineNumber: 223, 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: 224, columnNumber: 15 }, __self: this }, "Contact"), /*#__PURE__*/ React.createElement("p", { className: "text-[#B1B1B1] font-inter-tight-regular", __source: { fileName: "", lineNumber: 227, columnNumber: 15 }, __self: this }, "info@bartonwerner.com"), /*#__PURE__*/ React.createElement("p", { className: "text-[#B1B1B1] font-inter-tight-regular", __source: { fileName: "", lineNumber: 230, columnNumber: 15 }, __self: this }, "+1 (555) 123-4567")), /*#__PURE__*/ React.createElement("div", { className: "text-center md:text-left", __source: { fileName: "", lineNumber: 234, 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: 235, columnNumber: 15 }, __self: this }, "Follow"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center md:justify-start space-x-6", __source: { fileName: "", lineNumber: 238, 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: 239, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-instagram text-2xl", __source: { fileName: "", lineNumber: 245, 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: 247, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-twitter text-2xl", __source: { fileName: "", lineNumber: 253, 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: 255, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-youtube text-2xl", __source: { fileName: "", lineNumber: 261, columnNumber: 19 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "text-center md:text-left", __source: { fileName: "", lineNumber: 265, 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: 266, columnNumber: 15 }, __self: this }, "Location"), /*#__PURE__*/ React.createElement("p", { className: "text-[#B1B1B1] font-inter-tight-regular", __source: { fileName: "", lineNumber: 269, columnNumber: 15 }, __self: this }, "San Francisco, CA"), /*#__PURE__*/ React.createElement("p", { className: "text-[#B1B1B1] font-inter-tight-regular", __source: { fileName: "", lineNumber: 272, columnNumber: 15 }, __self: this }, "United States"))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 md:mt-12 text-center", __source: { fileName: "", lineNumber: 277, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#B1B1B1] font-inter-tight-regular text-sm md:text-base", __source: { fileName: "", lineNumber: 278, columnNumber: 13 }, __self: this }, "© 2024 Barton Werner. All rights reserved."))))); }