function MainComponent() { const [currentSection, setCurrentSection] = React.useState('About'); const navigateToSection = (sectionName)=>{ setCurrentSection(sectionName); }; let sectionContent; const teamMembers = { John: [ 'About' ], Jane: [ 'The Issues/Core Beliefs' ], Mike: [ 'Campaign Ads' ], Lucy: [ 'Merchandise' ], Alex: [ 'The Team' ], Emma: [ 'Photo Gallery' ], Noah: [ 'Contribute' ] }; const merchandiseItems = [ { name: 'Constitution Party Pin', description: 'Wear your support with pride!', price: '$5.99', img: './images/pin.jpg' }, { name: 'Campaign T-Shirt', description: 'High-quality cotton tee featuring the campaign logo.', price: '$19.99', img: './images/tshirt.jpg' }, { name: 'Campaign Hat', description: 'Keep the sun out of your eyes with this stylish hat.', price: '$15.99', img: './images/hat.jpg' }, { name: 'Patriotic Stickers', description: 'Stick them everywhere to spread the word!', price: '$2.99', img: './images/stickers.jpg' }, { name: 'Coffee Mug', description: 'Start your day with a dose of democracy.', price: '$12.99', img: './images/mug.jpg' }, { name: 'Campaign Poster', description: 'Decorate your space with a vibrant and inspiring poster.', price: '$9.99', img: './images/poster.jpg' }, { name: 'Keychain', description: 'Keep the keys to freedom with this Constitution Party keychain.', price: '$4.99', img: './images/keychain.jpg' }, { name: 'Bumper Sticker', description: 'Drive with purpose and promote your beliefs.', price: '$3.99', img: './images/bumper_sticker.jpg' }, { name: 'Lapel Pin', description: 'Subtly show your allegiance during formal events.', price: '$6.99', img: './images/lapel_pin.jpg' } ]; // Animated fade-in style const fadeIn = ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } `; switch(currentSection){ case 'About': sectionContent = /*#__PURE__*/ React.createElement("div", { style: { animation: 'fadeIn 1s' }, __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }); break; case 'The Issues/Core Beliefs': sectionContent = /*#__PURE__*/ React.createElement("div", { style: { animation: 'fadeIn 1s' }, __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }); break; case 'Campaign Ads': sectionContent = /*#__PURE__*/ React.createElement("div", { style: { animation: 'fadeIn 1s' }, __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }); break; case 'Merchandise': sectionContent = /*#__PURE__*/ React.createElement("div", { style: { animation: 'fadeIn 1s' }, className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, merchandiseItems.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border border-gray-200 p-4 rounded-lg", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: item.img, alt: `Merchandise item: ${item.name}`, className: "w-full h-[200px] object-cover mb-3", __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "font-semibold text-lg mb-2", __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }, item.name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 mb-2", __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, item.description), /*#__PURE__*/ React.createElement("p", { className: "font-semibold", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, item.price))), /*#__PURE__*/ React.createElement("form", { className: "col-span-full lg:col-span-1 mt-6", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, "Place your order"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "fullName", placeholder: "Full Name", className: "border p-2 rounded w-full mb-3", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", placeholder: "Email", className: "border p-2 rounded w-full mb-3", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("select", { name: "item", className: "border p-2 rounded w-full mb-3", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, merchandiseItems.map((item, index)=>/*#__PURE__*/ React.createElement("option", { key: index, value: item.name, __source: { fileName: "", lineNumber: 79, columnNumber: 17 }, __self: this }, item.name))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-3", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./images/visa.png", alt: "Visa logo", className: "h-6", __source: { fileName: "", lineNumber: 83, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "./images/mastercard.png", alt: "MasterCard logo", className: "h-6", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "./images/paypal.png", alt: "PayPal logo", className: "h-6", __source: { fileName: "", lineNumber: 85, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "./images/amex.png", alt: "American Express logo", className: "h-6", __source: { fileName: "", lineNumber: 86, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "./images/discover.png", alt: "Discover logo", className: "h-6", __source: { fileName: "", lineNumber: 87, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#0056b3] text-white p-3 rounded w-full", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, "Submit Order"))); break; case 'The Team': sectionContent = /*#__PURE__*/ React.createElement("div", { style: { animation: 'fadeIn 1s' }, __source: { fileName: "", lineNumber: 96, columnNumber: 9 }, __self: this }); break; case 'Photo Gallery': sectionContent = /*#__PURE__*/ React.createElement("div", { style: { animation: 'fadeIn 1s' }, __source: { fileName: "", lineNumber: 103, columnNumber: 9 }, __self: this }); break; case 'Contribute': sectionContent = /*#__PURE__*/ React.createElement("div", { style: { animation: 'fadeIn 1s' }, __source: { fileName: "", lineNumber: 110, columnNumber: 9 }, __self: this }); break; default: sectionContent = /*#__PURE__*/ React.createElement("div", { style: { animation: 'fadeIn 1s' }, className: "text-center font-semibold text-xl p-4", __source: { fileName: "", lineNumber: 116, columnNumber: 24 }, __self: this }, "Select a section"); } let navigation = /*#__PURE__*/ React.createElement("nav", { className: "bg-[#f7f7f7] p-4", __source: { fileName: "", lineNumber: 120, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex flex-wrap justify-center gap-x-6", __source: { fileName: "", lineNumber: 121, columnNumber: 7 }, __self: this }, Object.keys(teamMembers).map((name, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "mb-2 lg:mb-0", __source: { fileName: "", lineNumber: 123, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>navigateToSection(teamMembers[name][0]), className: `font-medium text-sm px-2 py-1 rounded ${currentSection === teamMembers[name][0] ? 'text-white bg-[#0056b3]' : 'text-gray-700 hover:bg-gray-200'}`, __source: { fileName: "", lineNumber: 124, columnNumber: 13 }, __self: this }, name))))); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 137, columnNumber: 5 }, __self: this }, navigation, /*#__PURE__*/ React.createElement("main", { className: "container mx-auto px-4 py-10", __source: { fileName: "", lineNumber: 139, columnNumber: 7 }, __self: this }, sectionContent), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 142, columnNumber: 7 }, __self: this }, fadeIn)); }