function MainComponent() { return /*#__PURE__*/ React.createElement("div", { className: "font-roboto flex flex-col items-center bg-[#fafafa] min-h-screen", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-white w-full border-b border-gray-300", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center max-w-6xl mx-auto py-2 px-3", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-instagram text-3xl text-[#262626]", __source: { fileName: "", lineNumber: 7, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "border-l border-gray-400 mx-3 h-8", __source: { fileName: "", lineNumber: 8, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-2xl text-[#262626] font-semibold", __source: { fileName: "", lineNumber: 9, columnNumber: 13 }, __self: this }, "Instagram")), /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", placeholder: "Search", className: "bg-[#fafafa] border border-gray-300 text-sm rounded-sm p-2", __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-compass text-2xl text-[#262626] mx-4", __source: { fileName: "", lineNumber: 18, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "far fa-heart text-2xl text-[#262626] mx-4", __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "far fa-user text-2xl text-[#262626] mx-4", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("main", { className: "flex-grow", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-4 p-4", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "col-span-2 bg-white border border-gray-300", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center p-3", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./profile.jpg", alt: "User's profile picture", className: "w-8 h-8 rounded-full mr-3", __source: { fileName: "", lineNumber: 28, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-semibold text-sm", __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this }, "username")), /*#__PURE__*/ React.createElement("img", { src: "./post-image.jpg", alt: "User's post content", className: "w-full", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-heart text-2xl mr-4", __source: { fileName: "", lineNumber: 34, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "far fa-comment text-2xl mr-4", __source: { fileName: "", lineNumber: 35, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "far fa-paper-plane text-2xl", __source: { fileName: "", lineNumber: 36, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-3", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold mr-2", __source: { fileName: "", lineNumber: 39, columnNumber: 17 }, __self: this }, "username"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 40, columnNumber: 17 }, __self: this }, "Caption for the post goes here")), /*#__PURE__*/ React.createElement("div", { className: "text-gray-400 text-sm mt-2", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, "2 HOURS AGO"))), /*#__PURE__*/ React.createElement("div", { className: "hidden md:block bg-white border border-gray-300 p-4", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-3", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./profile-sidebar.jpg", alt: "User's profile on sidebar", className: "w-16 h-16 rounded-full mr-3", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 49, columnNumber: 17 }, __self: this }, "username"), /*#__PURE__*/ React.createElement("div", { className: "text-gray-400 text-sm", __source: { fileName: "", lineNumber: 50, columnNumber: 17 }, __self: this }, "User's Full Name"))), /*#__PURE__*/ React.createElement("div", { className: "text-gray-500 text-sm mb-4", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, "Suggestions For You"), /*#__PURE__*/ React.createElement("div", { className: "mb-3", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 56, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./suggestion-profile.jpg", alt: "Suggested user's profile picture", className: "w-8 h-8 rounded-full mr-3", __source: { fileName: "", lineNumber: 57, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-semibold text-sm", __source: { fileName: "", lineNumber: 58, columnNumber: 19 }, __self: this }, "suggested_user")), /*#__PURE__*/ React.createElement("button", { className: "text-blue-500 text-sm", __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this }, "Follow")))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-white w-full border-t border-gray-300 py-3", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto flex justify-center text-gray-600 text-sm", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, "About Us"), /*#__PURE__*/ React.createElement("div", { className: "mx-3", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, "Support"), /*#__PURE__*/ React.createElement("div", { className: "mx-3", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, "Press"), /*#__PURE__*/ React.createElement("div", { className: "mx-3", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, "API"), /*#__PURE__*/ React.createElement("div", { className: "mx-3", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, "Jobs"), /*#__PURE__*/ React.createElement("div", { className: "mx-3", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, "Privacy"), /*#__PURE__*/ React.createElement("div", { className: "mx-3", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, "Terms"), /*#__PURE__*/ React.createElement("div", { className: "mx-3", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, "Locations"), /*#__PURE__*/ React.createElement("div", { className: "mx-3", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, "Top Accounts"), /*#__PURE__*/ React.createElement("div", { className: "mx-3", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, "Hashtags"), /*#__PURE__*/ React.createElement("div", { className: "mx-3", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, "Language")))); }