function MainComponent() { const [isActive, setIsActive] = React.useState(false); const [isFeaturesVisible, setIsFeaturesVisible] = React.useState(false); const toggleActiveState = ()=>setIsActive(!isActive); const toggleFeaturesVisibility = ()=>setIsFeaturesVisible(!isFeaturesVisible); return /*#__PURE__*/ React.createElement("div", { className: `flex flex-col items-center justify-center min-h-screen ${isActive ? 'bg-[#555555]' : 'bg-[#000000]'} p-4 transition-colors duration-500 ease-in-out`, __source: { fileName: "", lineNumber: 7, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: `text-${isActive ? '[#FFFFFF]' : '[#AAAAAA]'} font-bold text-4xl mb-8 font-roboto transition-colors duration-500 ease-in-out`, __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, "The Only All-in-One 360 Photo Booth, Video Booth, and Spinner 360 Software Solution"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap items-center justify-center w-full", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `m-4 p-8 ${isActive ? 'bg-[#1C1C1C]' : 'bg-[#1A1A2A]'} rounded-lg shadow-lg w-full max-w-md transition-colors duration-500 ease-in-out`, __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: isActive ? "/active-360-photo.jpg" : "/placeholder-360-photo.jpg", alt: isActive ? "Active 360-degree experience activated" : "360-degree experience placeholder", className: "w-full h-auto rounded-md", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: toggleFeaturesVisibility, className: `text-[#FFFFFF] py-2 px-4 rounded-lg mt-4 border border-[#FFFFFF] hover:bg-[#444444] transition-colors font-roboto`, __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, isFeaturesVisible ? 'Hide Details' : 'Show Details'), /*#__PURE__*/ React.createElement("div", { className: `overflow-hidden transition-max-height duration-700 ease-in-out ${isFeaturesVisible ? 'max-h-full' : 'max-h-0'}`, __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#D9D9D9] mt-5 font-roboto", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, "Download the app and start capturing your moments in immersive 360!")))), /*#__PURE__*/ React.createElement("button", { onClick: toggleActiveState, className: `fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-[#FFFFFF] text-[#000000] p-3 rounded-full shadow-lg hover:bg-[#f2f2f2] transition-colors ${isActive ? 'animate-spin' : ''}`, __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fa ${isActive ? 'fa-stop' : 'fa-camera-retro'} fa-2x`, __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-10 text-center", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#download", className: "bg-[#4CAF50] text-[#FFFFFF] px-6 py-3 rounded-lg shadow-lg hover:bg-[#46a049] transition-colors font-roboto", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, "Download App")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, ` .animate-spin { animation: rotate 4s linear infinite; } `)); }