function ProductDisplayGrid({ sections, products }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center px-4 py-8", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(IconicSectionsDisplay, { sections: sections, __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-8", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, "Our Products"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 w-full max-w-screen-lg", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, products.map((product, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "relative bg-white shadow-lg rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: product.image, alt: product.alt, className: "w-full h-64 object-cover", __source: { fileName: "", lineNumber: 9, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "absolute top-2 right-2 bg-red-500 text-white text-sm px-2 py-1 rounded-full", __source: { fileName: "", lineNumber: 10, columnNumber: 13 }, __self: this }, product.discount), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 11, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold", __source: { fileName: "", lineNumber: 12, columnNumber: 15 }, __self: this }, product.title), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 13, columnNumber: 15 }, __self: this }, product.description), /*#__PURE__*/ React.createElement("div", { className: "text-lg font-bold", __source: { fileName: "", lineNumber: 14, columnNumber: 15 }, __self: this }, product.currentPrice), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500 line-through", __source: { fileName: "", lineNumber: 15, columnNumber: 15 }, __self: this }, product.originalPrice)))))); } function ProductDisplayGridStory() { const sections = [ { iconClass: "fas fa-trophy", title: "High Quality", description: "crafted from top materials" }, { iconClass: "fas fa-shield-alt", title: "Warranty Protection", description: "Over 2 years" }, { iconClass: "fas fa-shipping-fast", title: "Free Shipping", description: "Order over 150 $" }, { iconClass: "fas fa-headset", title: "24 / 7 Support", description: "Dedicated support" } ]; const products = [ { image: "/images/product1.jpg", alt: "Stylish cafe chair in a light room", discount: "-30%", title: "Syltherine", description: "Stylish cafe chair", currentPrice: "Rp 2.500.000", originalPrice: "Rp 3.500.000" }, { image: "/images/product2.jpg", alt: "Stylish cafe chair with white background", discount: "-30%", title: "Leoxy", description: "Stylish cafe chair", currentPrice: "Rp 2.500.000", originalPrice: "Rp 3.500.000" } ]; return /*#__PURE__*/ React.createElement(ProductDisplayGrid, { sections: sections, products: products, __source: { fileName: "", lineNumber: 69, columnNumber: 10 }, __self: this }); } function IconicSectionsDisplay({ sections }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-around w-full mb-8", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, sections.map((section, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${section.iconClass} text-2xl mb-2`, __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, section.title), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }, section.description)))); } function IconicSectionsDisplayStory() { const sections = [ { iconClass: "fas fa-trophy", title: "High Quality", description: "crafted from top materials" }, { iconClass: "fas fa-shield-alt", title: "Warranty Protection", description: "Over 2 years" }, { iconClass: "fas fa-shipping-fast", title: "Free Shipping", description: "Order over 150 $" }, { iconClass: "fas fa-headset", title: "24 / 7 Support", description: "Dedicated support" } ]; return /*#__PURE__*/ React.createElement(IconicSectionsDisplay, { sections: sections, __source: { fileName: "", lineNumber: 39, columnNumber: 10 }, __self: this }); } function MainComponent() { const teamMembers = [ { image: "/images/alex.jpg", alt: "Alex, the founder with determined expression", name: "ALEX", role: "FOUNDER" }, { image: "/images/nady.jpg", alt: "Nady Porg, the artist with creative energy", name: "NADY PORG", role: "ARTIST" }, { image: "/images/mari.jpg", alt: "Mari, the community lead with friendly smile", name: "MARI", role: "COMMUNITY LEAD" }, { image: "/images/kisa.jpg", alt: "Kisa Miyamura, the creative director with artistic flair", name: "KISA MIYAMURA", role: "CREATIVE DIRECTOR" } ]; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#fdf6f0] min-h-screen p-8", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-center mb-12 font-crimson-text", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, "Our Team"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, teamMembers.map((member, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `relative border-2 border-black ${index % 2 === 0 ? "skew-x-6" : "-skew-x-6"}`, __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `relative overflow-hidden ${index % 2 === 0 ? "-skew-x-6" : "skew-x-6"}`, __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: member.image, alt: member.alt, className: "w-full h-[300px] object-cover grayscale hover:grayscale-0 transition-all duration-300", __source: { fileName: "", lineNumber: 44, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 left-0 right-0 bg-black bg-opacity-70 text-white p-4", __source: { fileName: "", lineNumber: 49, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 50, columnNumber: 19 }, __self: this }, member.name), /*#__PURE__*/ React.createElement("p", { className: "text-sm opacity-80", __source: { fileName: "", lineNumber: 51, columnNumber: 19 }, __self: this }, member.role)))))))); }