function MainComponent() { const cards = [ { img: "./card1.jpg", imgAlt: "Handmade card with melted crayons - vibrant abstract design", title: "Abstract Passion", description: "A beautiful abstraction with reds and blues.", price: "$10.00" }, { img: "./card2.jpg", imgAlt: "Handmade card with melted crayons - cheerful hearts design", title: "Hearts & Happiness", description: "Cheerful hearts on a sunny day.", price: "$8.00" }, { img: "./card3.jpg", imgAlt: "Handmade card with melted crayons - gentle floral design", title: "Floral Cheers", description: "Gentle and soothing floral design.", price: "$9.00" }, { img: "./card4.jpg", imgAlt: "Handmade card with melted crayons - ocean waves design", title: "Ocean Bliss", description: "Feel the ocean waves with this card.", price: "$12.00" } ]; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col text-gray-800 font-roboto", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#ff7043] text-white p-4", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./logo.png", alt: "Logo for handmade cards store", className: "w-[100px] mb-4", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-crimson-text my-4", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, "Jane Fitzgerald's Handmade Cards")), /*#__PURE__*/ React.createElement("nav", { className: "text-lg", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex justify-center space-x-4", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "font-semibold", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, "Shop"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, "Contact")))), /*#__PURE__*/ React.createElement("main", { className: "flex-1 p-8 bg-[#f0f8ff]", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "text-center mb-8", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-4xl font-crimson-text text-[#2e8b57]", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "Unique Handmade Cards with Melted Crayons"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl font-crimson-text mt-4 text-[#4682b4]", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, "Discover our collection of handmade cards crafted with melted crayons, perfect for any occasion.")), /*#__PURE__*/ React.createElement("section", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, cards.map((card, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "text-center border p-4 rounded-md shadow-lg bg-white transition-transform transform hover:scale-105", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: card.img, alt: card.imgAlt, className: "w-full h-[200px] object-cover rounded", __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mt-4", __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }, card.title), /*#__PURE__*/ React.createElement("p", { className: "mt-2", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, card.description), /*#__PURE__*/ React.createElement("p", { className: "mt-4 font-bold", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, card.price), /*#__PURE__*/ React.createElement("button", { className: "mt-4 bg-[#ff7043] text-white py-2 px-4 rounded hover:bg-[#d64123]", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, "Add to Cart")))))); }