function ContactForm({ onSubmit = async ()=>{} }) { const [formData, setFormData] = useState({ name: "", email: "", message: "" }); const [status, setStatus] = useState({ loading: false, error: null, success: false }); const handleSubmit = async (e)=>{ e.preventDefault(); setStatus({ loading: true, error: null, success: false }); try { const response = await fetch("/api/contact/submit", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(formData) }); const data = await response.json(); if (!response.ok) { throw new Error(data.error || "Something went wrong"); } setStatus({ loading: false, error: null, success: true }); setFormData({ name: "", email: "", message: "" }); await onSubmit(formData); } catch (error) { console.error(error); setStatus({ loading: false, error: error.message, success: false }); } }; const handleChange = (e)=>{ setFormData((prev)=>({ ...prev, [e.target.name]: e.target.value })); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-white dark:bg-gray-900 p-8 rounded-lg shadow-lg max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 47, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold text-gray-900 dark:text-white font-inter mb-6", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, "Contact Us"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-6", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "name", className: "block text-sm font-medium text-gray-700 dark:text-gray-300 font-inter", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, "Name"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "name", name: "name", required: true, value: formData.name, onChange: handleChange, className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-white", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "email", className: "block text-sm font-medium text-gray-700 dark:text-gray-300 font-inter", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, "Email"), /*#__PURE__*/ React.createElement("input", { type: "email", id: "email", name: "email", required: true, value: formData.email, onChange: handleChange, className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-white", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 89, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "message", className: "block text-sm font-medium text-gray-700 dark:text-gray-300 font-inter", __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, "Message"), /*#__PURE__*/ React.createElement("textarea", { id: "message", name: "message", required: true, rows: 4, value: formData.message, onChange: handleChange, className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-white", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 107, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: status.loading, className: "inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed font-inter", __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this }, status.loading ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 114, columnNumber: 15 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane mr-2", __source: { fileName: "", lineNumber: 116, columnNumber: 15 }, __self: this }), status.loading ? "Sending..." : "Send Message")), status.error && /*#__PURE__*/ React.createElement("div", { className: "text-red-600 dark:text-red-400 font-inter", __source: { fileName: "", lineNumber: 123, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle mr-2", __source: { fileName: "", lineNumber: 124, columnNumber: 13 }, __self: this }), status.error), status.success && /*#__PURE__*/ React.createElement("div", { className: "text-green-600 dark:text-green-400 font-inter", __source: { fileName: "", lineNumber: 130, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check-circle mr-2", __source: { fileName: "", lineNumber: 131, columnNumber: 13 }, __self: this }), "Message sent successfully!"))); } function ContactFormStory() { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 dark:bg-gray-800 py-12 px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 142, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ContactForm, { onSubmit: async (data)=>console.log("Form submitted:", data), __source: { fileName: "", lineNumber: 143, columnNumber: 7 }, __self: this })); } function Footer() { return /*#__PURE__*/ React.createElement("footer", { className: "bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white font-inter mb-4", __source: { fileName: "", lineNumber: 7, columnNumber: 13 }, __self: this }, "Contact Us"), /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 10, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 dark:text-gray-300 font-inter flex items-center", __source: { fileName: "", lineNumber: 11, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-map-marker-alt w-5", __source: { fileName: "", lineNumber: 12, columnNumber: 17 }, __self: this }), "123 Logistics Way, Business District"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 dark:text-gray-300 font-inter flex items-center", __source: { fileName: "", lineNumber: 15, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-phone w-5", __source: { fileName: "", lineNumber: 16, columnNumber: 17 }, __self: this }), "(555) 123-4567"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 dark:text-gray-300 font-inter flex items-center", __source: { fileName: "", lineNumber: 19, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-envelope w-5", __source: { fileName: "", lineNumber: 20, columnNumber: 17 }, __self: this }), "info@mainstreamgroup.com"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white font-inter mb-4", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, "Follow Us"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://facebook.com", className: "text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400", __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-facebook fa-2x", __source: { fileName: "", lineNumber: 35, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "https://twitter.com", className: "text-gray-600 dark:text-gray-300 hover:text-blue-400 dark:hover:text-blue-300", __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-twitter fa-2x", __source: { fileName: "", lineNumber: 41, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "https://linkedin.com", className: "text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-500", __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-linkedin fa-2x", __source: { fileName: "", lineNumber: 47, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "https://instagram.com", className: "text-gray-600 dark:text-gray-300 hover:text-pink-500 dark:hover:text-pink-400", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-instagram fa-2x", __source: { fileName: "", lineNumber: 53, columnNumber: 17 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white font-inter mb-4", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, "Business Hours"), /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 dark:text-gray-300 font-inter", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, "Monday - Friday: 9:00 AM - 6:00 PM"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 dark:text-gray-300 font-inter", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, "Saturday: 10:00 AM - 4:00 PM"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 dark:text-gray-300 font-inter", __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, "Sunday: Closed")))), /*#__PURE__*/ React.createElement("div", { className: "mt-12 pt-8 border-t border-gray-200 dark:border-gray-700", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-center text-gray-500 dark:text-gray-400 font-inter", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, "© 2025 Mainstream Group Logistics. All rights reserved.")))); } function FooterStory() { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col", __source: { fileName: "", lineNumber: 88, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-grow", __source: { fileName: "", lineNumber: 89, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "p-4 text-gray-700 font-inter", __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }, "Main content area")), /*#__PURE__*/ React.createElement(Footer, { __source: { fileName: "", lineNumber: 92, columnNumber: 7 }, __self: this })); } function Navigation() { const [isMenuOpen, setIsMenuOpen] = useState(false); return /*#__PURE__*/ React.createElement("nav", { className: "fixed w-full bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 z-50", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between h-16 items-center", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-shrink-0", __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "flex items-center", __source: { fileName: "", lineNumber: 9, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/mainstream-group-logo.png", alt: "Mainstream Group Logistics logo", className: "h-8 w-auto", __source: { fileName: "", lineNumber: 10, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "hidden md:flex items-center space-x-8", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-gray-900 dark:text-white font-inter hover:text-gray-600 dark:hover:text-gray-300", __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "/about", className: "text-gray-900 dark:text-white font-inter hover:text-gray-600 dark:hover:text-gray-300", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("a", { href: "/gallery", className: "text-gray-900 dark:text-white font-inter hover:text-gray-600 dark:hover:text-gray-300", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, "Gallery"), /*#__PURE__*/ React.createElement("a", { href: "/contact", className: "text-gray-900 dark:text-white font-inter hover:text-gray-600 dark:hover:text-gray-300", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, "Contact")), /*#__PURE__*/ React.createElement("div", { className: "md:hidden", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsMenuOpen(!isMenuOpen), className: "text-gray-900 dark:text-white hover:text-gray-600 dark:hover:text-gray-300", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isMenuOpen ? "fa-times" : "fa-bars"} text-xl`, __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this })))), isMenuOpen && /*#__PURE__*/ React.createElement("div", { className: "md:hidden", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "px-2 pt-2 pb-3 space-y-1", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "block px-3 py-2 text-gray-900 dark:text-white font-inter hover:text-gray-600 dark:hover:text-gray-300", __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "/about", className: "block px-3 py-2 text-gray-900 dark:text-white font-inter hover:text-gray-600 dark:hover:text-gray-300", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("a", { href: "/gallery", className: "block px-3 py-2 text-gray-900 dark:text-white font-inter hover:text-gray-600 dark:hover:text-gray-300", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, "Gallery"), /*#__PURE__*/ React.createElement("a", { href: "/contact", className: "block px-3 py-2 text-gray-900 dark:text-white font-inter hover:text-gray-600 dark:hover:text-gray-300", __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }, "Contact"))))); } function NavigationStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 94, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Navigation, { __source: { fileName: "", lineNumber: 95, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-16 p-4", __source: { fileName: "", lineNumber: 96, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 font-inter", __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }, "Content below navigation"))); } function MainComponent() { const [images, setImages] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const fetchImages = async ()=>{ setLoading(true); setError(null); try { const response = await fetch("/api/get-gallery-images", { method: "POST" }); if (!response.ok) { throw new Error(`Failed to fetch images: ${response.status}`); } const data = await response.json(); if (data.error) { throw new Error(data.error); } setImages(data.images); } catch (err) { console.error(err); setError("Failed to load gallery images"); } finally{ setLoading(false); } }; useEffect(()=>{ fetchImages(); }, []); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 dark:bg-gray-800", __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Navigation, { __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("main", { className: "pt-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "py-12", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-gray-900 dark:text-white font-inter text-center", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "Our Operations Gallery"), /*#__PURE__*/ React.createElement("p", { className: "mt-4 text-xl text-gray-600 dark:text-gray-300 font-inter text-center", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "Experience the scale and efficiency of Mainstream Group's logistics operations")), loading && /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center min-h-[400px]", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-4xl text-blue-600", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this })), error && /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-[400px]", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-red-600 dark:text-red-400 font-inter mb-4", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle mr-2", __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }), error), /*#__PURE__*/ React.createElement("button", { onClick: fetchImages, className: "px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors font-inter", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-redo mr-2", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }), "Try Again")), !loading && !error && /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, images.map((image)=>/*#__PURE__*/ React.createElement("div", { key: image.id, className: "relative group overflow-hidden rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300", __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "aspect-w-16 aspect-h-9", __source: { fileName: "", lineNumber: 79, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image.url, alt: image.title, className: "object-cover w-full h-full transform group-hover:scale-105 transition-transform duration-300", __source: { fileName: "", lineNumber: 80, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300", __source: { fileName: "", lineNumber: 87, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 left-0 right-0 p-4", __source: { fileName: "", lineNumber: 88, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white font-semibold font-inter text-lg mb-2", __source: { fileName: "", lineNumber: 89, columnNumber: 21 }, __self: this }, image.title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-200 font-inter text-sm", __source: { fileName: "", lineNumber: 92, columnNumber: 21 }, __self: this }, image.description)))))), !loading && !error && images.length === 0 && /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center min-h-[400px]", __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 dark:text-gray-300 font-inter", __source: { fileName: "", lineNumber: 104, columnNumber: 13 }, __self: this }, "No images available"))), /*#__PURE__*/ React.createElement(Footer, { __source: { fileName: "", lineNumber: 111, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 112, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .grid { animation: fadeIn 0.5s ease-in-out; } `)); }