Skip to content

feat: Add modern homepage and guest mode authentication#3

Merged
rivka14 merged 3 commits intomy-featurefrom
feat/homepage-and-deploy
Jan 12, 2026
Merged

feat: Add modern homepage and guest mode authentication#3
rivka14 merged 3 commits intomy-featurefrom
feat/homepage-and-deploy

Conversation

@rivka14
Copy link
Collaborator

@rivka14 rivka14 commented Jan 12, 2026

Summary

  • Add modern, responsive homepage with dark/light theme support and animations
  • Implement guest mode for playing without OAuth authentication
  • Create new layout components (Navbar, Footer) with theme toggle

Changes

Homepage Features

  • HeroSection: Animated landing section with gradient backgrounds
  • AboutSection: Game features showcase
  • DemoSection: Interactive preview of gameplay
  • Theme Support: Dark/light mode toggle with ThemeContext
  • Responsive Design: Mobile-friendly layouts

Guest Mode

  • Allow users to play without Google OAuth
  • Guest login option added to Login page
  • Maintains existing OAuth flow for registered users

UI Components

  • Navbar: Header with theme toggle and navigation
  • Footer: Footer with links and branding
  • Updated SideNavigation styling for better UX

Files Changed

  • New home page components and styles
  • Theme context implementation
  • Updated login flow with guest option
  • Enhanced global styles with CSS variables for theming

🤖 Generated with Claude Code

rivka14 and others added 3 commits January 12, 2026 09:03
- Add 'Play as Guest' button in Login.jsx with guest user creation
- Make Google OAuth optional in index.jsx (app works without VITE_GOOGLE_CLIENT_ID)
- Guest users get default stats (100 coins, 100 energy, 0 score)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Implement a professional landing page for Netropolise cybersecurity game with:
- React Router integration for / (home) and /game routes
- Dark/light theme toggle with ThemeContext and localStorage persistence
- ShaderGradient 3D animated backgrounds
- Anime.js micro-animations for smooth entrance effects
- Responsive navbar with colorful gradient accents
- Hero section with Orbitron font (cyberpunk aesthetic)
- About section with feature cards showcasing game capabilities
- Demo section with video placeholder
- Footer with contact information and navigation links
- Colorful accents added to in-game sidebar navigation

Dependencies added:
- react-router-dom@6 for client-side routing
- @shadergradient/react for 3D gradient backgrounds
- animejs@3 for UI animations

Design features:
- Orbitron font for all text (tech/cyberpunk theme)
- Multi-color gradient borders (cyan, purple, pink, yellow)
- Glassmorphism effects with backdrop blur
- Smooth theme transitions without animation retriggering
- Mobile-responsive layout

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
@rivka14 rivka14 merged commit f31e96b into my-feature Jan 12, 2026
0 of 2 checks passed
@rivka14 rivka14 self-assigned this Jan 13, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant