function MainComponent() { const introductionContent = "Welcome to Lumi QA, your premium LED light store based in Qatar. We offer a wide range of high-quality and energy-efficient LED lighting solutions for all your needs."; const products = [ { id: 1, name: "LED Bulbs", description: "Eco-friendly and long-lasting bulbs.", image: "images/led-bulbs.jpg", slug: "led-bulbs" }, { id: 2, name: "LED Tubes", description: "Versatile tubes for home and office use.", image: "images/led-tubes.jpg", slug: "led-tubes" }, { id: 3, name: "LED Panels", description: "Sleek panels for modern lighting design.", image: "images/led-panels.jpg", slug: "led-panels" } ]; const handleClick = (slug)=>{ window.location.href = `/products/${slug}`; }; const productElements = products.map((product)=>/*#__PURE__*/ React.createElement("div", { onClick: ()=>handleClick(product.slug), key: product.id, className: "flex flex-col items-center bg-[#f0f0f0] m-2 p-4 rounded-lg cursor-pointer", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: product.image, alt: `Image of ${product.name}`, className: "w-[200px] h-[200px]", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "font-roboto font-bold text-xl text-[#121212] my-2", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, product.name), /*#__PURE__*/ React.createElement("p", { className: "font-roboto font-semibold text-md text-[#666666]", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, product.description))); return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "text-center p-6 bg-[url('/images/led-strip-bg.jpg')] bg-cover", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl text-[#121212] leading-tight mb-4 font-bold", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, "Lumi QA"), /*#__PURE__*/ React.createElement("p", { className: "text-md text-[#666666] font-semibold", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, introductionContent)), /*#__PURE__*/ React.createElement("section", { className: "p-6 bg-white", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl text-[#121212] mb-4 font-bold", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, "Our Products"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, productElements)), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } section { animation: fadeIn 1s ease-in-out; } `)); }