function MainComponent() { const creators = [ { name: 'Matt (LynxAk)', description: 'is the Rocket League captain and also a streamer! He was born and raised in Alaska for 13 years and is currently living in Colorado!', socials: [ { platform: 'fa-twitch', link: '#' }, { platform: 'fa-twitter', link: '#' }, { platform: 'fa-instagram', link: '#' } ], imageSrc: './images/lynxak.png', imageAlt: 'Matt (LynxAk) playing Rocket League' } ]; const socialIconSize = 'h-6 w-6'; const navItems = [ 'HOME', 'OUR CREATORS', 'TEAMS', 'RESEARCH', 'TOURNAMENTS', 'STORE', 'TWITCH' ]; const selectedNav = 'OUR CREATORS'; const navbar = /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center p-4 bg-black bg-opacity-25 absolute top-0 left-0 right-0 z-10", __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, navItems.map((item, index)=>/*#__PURE__*/ React.createElement("a", { key: index, href: "#", className: `mx-2 text-white font-roboto uppercase ${item === selectedNav ? 'text-[#00d8ff]' : 'text-opacity-75 hover:text-opacity-100'} transition duration-300 ease-in-out`, __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, item))), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-white font-roboto uppercase text-opacity-75 hover:text-opacity-100 transition duration-300 ease-in-out", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, "LOGIN/SIGN UP")); return /*#__PURE__*/ React.createElement("div", { className: "bg-[#010101] w-full min-h-screen overflow-hidden relative", __source: { fileName: "", lineNumber: 44, columnNumber: 5 }, __self: this }, navbar, /*#__PURE__*/ React.createElement("div", { className: "text-[#00d8ff] absolute top-0 left-0 w-full pt-16", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-[100px] leading-[100px] whitespace-nowrap md:whitespace-normal transform -rotate-12 absolute top-12 left-10", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, "Our Creators"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[30px] leading-[30px] absolute top-36 left-10", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, "Take a look at our amazing creators!")), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-start h-full pt-40", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 p-10", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, creators.map((creator, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-[#121212] rounded-lg p-5", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: creator.imageSrc, alt: creator.imageAlt, className: "h-[200px] w-[200px] rounded-lg mx-auto", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-white text-center mt-4", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-xl mb-2", __source: { fileName: "", lineNumber: 64, columnNumber: 17 }, __self: this }, creator.name), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm", __source: { fileName: "", lineNumber: 65, columnNumber: 17 }, __self: this }, creator.description), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mt-3", __source: { fileName: "", lineNumber: 66, columnNumber: 17 }, __self: this }, creator.socials.map((social, sIndex)=>/*#__PURE__*/ React.createElement("a", { key: sIndex, href: social.link, target: "_blank", rel: "noreferrer", className: "mx-2", __source: { fileName: "", lineNumber: 68, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${social.platform} ${socialIconSize} text-[#00d8ff]`, __source: { fileName: "", lineNumber: 69, columnNumber: 23 }, __self: this }))))))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, ` body { background-image: url('./images/background-pattern.png'); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; } `)); }