Changes

src/pages/Index.tsx

@@ -8,8 +8,10 @@ import { VERIFIED_KEY, BYPASS_KEY } from '@/components/HumanVerification';
 import { useSettings } from '@/contexts/SettingsContext';
 import { useAchievements } from '@/contexts/AchievementsContext';
 import { useKonamiCode } from '@/hooks/useKonamiCode';
+import { useZenMode } from '@/hooks/useZenMode';
 import { toast } from '@/hooks/use-toast';
 import { AudioBlockedOverlay } from '@/components/AudioBlockedOverlay';
+import { motion, AnimatePresence } from 'framer-motion';
 
 // Lazy load conditionally rendered components to reduce initial bundle
 const HumanVerification = lazy(() => import('@/components/HumanVerification'));
@@ -47,6 +49,7 @@ const Index = () => {
   } = useSettings();
   const { unlockAchievement } = useAchievements();
   const { activated: konamiActivated, reset: resetKonami } = useKonamiCode();
+  const { isZenMode, toggleZenMode } = useZenMode();
   const location = useLocation();
   
   // Hide mini music player when on the full music page (to avoid UI duplication)
@@ -153,15 +156,47 @@ const Index = () => {
       {/* Moving scanline - only visible when CRT is enabled */}
       <div className="moving-scanline" />
       
+      {/* Zen Mode indicator */}
+      <AnimatePresence>
+        {isZenMode && (
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: 20 }}
+            transition={{ duration: 0.3 }}
+            className="fixed bottom-4 left-1/2 -translate-x-1/2 z-50 bg-background/80 border border-primary/50 px-4 py-2 rounded-lg backdrop-blur-sm"
+          >
+            <p className="text-primary text-sm font-minecraft">
+              ZEN MODE • Press <kbd className="bg-primary/20 px-1.5 py-0.5 rounded mx-1">Z</kbd> or <kbd className="bg-primary/20 px-1.5 py-0.5 rounded mx-1">ESC</kbd> to exit
+            </p>
+          </motion.div>
+        )}
+      </AnimatePresence>
+      
       {!isLoading && (
         <Suspense fallback={null}>
           <CryptoConsentModal isOpen={showConsentModal} onClose={handleConsentClose} />
-          <SettingsPanel onToggleTheme={toggleTheme} isRedTheme={isRedTheme} />
-          <TerminalCommand />
           
-          <div className="relative z-10 flex flex-col items-center min-h-screen pb-16">
-            <MainLayout />
-          </div>
+          {/* Hide UI elements in Zen Mode */}
+          <AnimatePresence>
+            {!isZenMode && (
+              <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{ duration: 0.3 }}
+              >
+                <SettingsPanel onToggleTheme={toggleTheme} isRedTheme={isRedTheme} />
+                <TerminalCommand />
+                
+                <div className="relative z-10 flex flex-col items-center min-h-screen pb-16">
+                  <MainLayout />
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
+          
+          {/* Music player stays visible in Zen Mode */}
           {showMiniPlayer && <MusicPlayer />}
         </Suspense>
       )}