function MainComponent() { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#17171B] text-white font-roboto", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-10", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-5xl font-bold mb-8", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, "H7 Elite Build"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-10", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-[300px] lg:w-[350px] xl:w-[400px] 2xl:w-[450px]", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#26262C] p-4 rounded-lg", __source: { fileName: "", lineNumber: 8, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-6", __source: { fileName: "", lineNumber: 9, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold", __source: { fileName: "", lineNumber: 10, columnNumber: 17 }, __self: this }, "Chipset"), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 11, columnNumber: 17 }, __self: this }, "Intel")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-4", __source: { fileName: "", lineNumber: 14, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 15, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 16, columnNumber: 19 }, __self: this }, "Case"), /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 17, columnNumber: 19 }, __self: this }, "NZXT H7 Elite")), /*#__PURE__*/ React.createElement("img", { src: "case.png", alt: "NZXT H7 Elite case", className: "w-[70px] h-[70px]", __source: { fileName: "", lineNumber: 19, columnNumber: 17 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-start mb-4", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#34343D] text-white px-5 py-2 rounded-full font-semibold", __source: { fileName: "", lineNumber: 27, columnNumber: 17 }, __self: this }, "01 Base"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#34343D] text-white px-5 py-2 rounded-full font-semibold ml-3", __source: { fileName: "", lineNumber: 28, columnNumber: 17 }, __self: this }, "02 Add-ons"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#34343D] text-white px-5 py-2 rounded-full font-semibold ml-3", __source: { fileName: "", lineNumber: 29, columnNumber: 17 }, __self: this }, "03 Summary")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-heart text-[#888888] text-2xl mr-4", __source: { fileName: "", lineNumber: 32, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-floppy-o text-[#888888] text-2xl mr-4", __source: { fileName: "", lineNumber: 33, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-repeat text-[#888888] text-2xl mr-4", __source: { fileName: "", lineNumber: 34, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-share-alt text-[#888888] text-2xl", __source: { fileName: "", lineNumber: 35, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#26262C] mt-4 p-4 rounded-lg", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold", __source: { fileName: "", lineNumber: 40, columnNumber: 17 }, __self: this }, "Cases"), /*#__PURE__*/ React.createElement("select", { name: "case-filter", className: "bg-[#34343D] text-white px-3 py-1 rounded text-sm", __source: { fileName: "", lineNumber: 41, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 42, columnNumber: 19 }, __self: this }, "All"))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1F1F23] p-4 rounded-md", __source: { fileName: "", lineNumber: 47, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 48, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 49, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold", __source: { fileName: "", lineNumber: 50, columnNumber: 23 }, __self: this }, "H6 Flow"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mt-1", __source: { fileName: "", lineNumber: 51, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-300", __source: { fileName: "", lineNumber: 52, columnNumber: 25 }, __self: this }, "Color: Black"), /*#__PURE__*/ React.createElement("span", { className: "ml-2 w-5 h-5 bg-black rounded-full border-2 border-white", __source: { fileName: "", lineNumber: 53, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2 w-5 h-5 bg-white rounded-full border-2 border-gray-500", __source: { fileName: "", lineNumber: 54, columnNumber: 25 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 57, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm text-purple-400", __source: { fileName: "", lineNumber: 58, columnNumber: 23 }, __self: this }, "New"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mt-4", __source: { fileName: "", lineNumber: 61, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-sm text-[#888888]", __source: { fileName: "", lineNumber: 62, columnNumber: 21 }, __self: this }, "INFO"), /*#__PURE__*/ React.createElement("button", { className: "text-sm bg-[#4B5264] px-3 py-1 rounded-full text-white", __source: { fileName: "", lineNumber: 63, columnNumber: 21 }, __self: this }, "ADD")))))), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-[300px] lg:w-[350px] xl:w-[400px] 2xl:w-[450px]", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#26262C] p-4 rounded-lg", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-500 mb-1", __source: { fileName: "", lineNumber: 73, columnNumber: 17 }, __self: this }, "Estimated Shipping"), /*#__PURE__*/ React.createElement("span", { className: "font-semibold mb-4", __source: { fileName: "", lineNumber: 74, columnNumber: 17 }, __self: this }, "02/09/2024"), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-500 mb-1", __source: { fileName: "", lineNumber: 75, columnNumber: 17 }, __self: this }, "Subtotal:"), /*#__PURE__*/ React.createElement("span", { className: "font-semibold mb-4", __source: { fileName: "", lineNumber: 76, columnNumber: 17 }, __self: this }, "$2,248.91"), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 77, columnNumber: 17 }, __self: this }, "Monthly payments available. Learn More")), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-[#4B5264] text-white mt-6 py-2 rounded-full", __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this }, "Next")))))); }