devsuoa · emac129 · Apr 18, 2026 · Apr 18, 2026 · Apr 18, 2026 · Apr 18, 2026
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -28,6 +28,8 @@ jobs:
 
       - run: npm ci
       - run: npm run build
+        env:
+          VITE_GEMINI_API_KEY: ${{ secrets.VITE_GEMINI_API_KEY }}
 
       - uses: actions/configure-pages@v5
 

diff --git a/.gitignore b/.gitignore
@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+.env
+.env.local
+.env.*.local
diff --git a/index.html b/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/png" href="/SSTRUK-logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>devs-sesa-beginner-hackathon-2026</title>
+    <title>SSTRUK</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "framer-motion": "^12.38.0",
     "lucide-react": "^1.8.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",

diff --git a/public/alien_crystal.png b/public/alien_crystal.png
diff --git a/public/alien_cyra.jpeg b/public/alien_cyra.jpeg
diff --git a/public/alien_fungal.png b/public/alien_fungal.png
diff --git a/public/alien_ignis.jpeg b/public/alien_ignis.jpeg
diff --git a/public/alien_kaelen.jpeg b/public/alien_kaelen.jpeg
diff --git a/public/alien_lumina.webp b/public/alien_lumina.webp
diff --git a/public/alien_plasma.png b/public/alien_plasma.png
diff --git a/public/alien_sparky.jpeg b/public/alien_sparky.jpeg
diff --git a/public/alien_squish.webp b/public/alien_squish.webp
diff --git a/public/alien_xeno.webp b/public/alien_xeno.webp
diff --git a/public/alien_zarok.webp b/public/alien_zarok.webp
diff --git a/src/App.tsx b/src/App.tsx
@@ -4,27 +4,25 @@ import Preferences from './pages/Preferences';
 import Home from './pages/home/Home';
 import Explore from './pages/Explore';
 import Chat from './pages/Chat';
-import { Rocket } from 'lucide-react';
+import { Starfield } from './components/Starfield';
+import { RocketTransition } from './components/RocketTransition';
+
 
 function App() {
   const location = useLocation();
-  const hideExploreLink = location.pathname === '/' || location.pathname === '/preferences';
   const isHomePage = location.pathname === '/';
 
   return (
     <div className="app-container">
-      <nav className="navbar">
-        <Link to="/" className="navbar-brand">
-          <Rocket className="inline-block mr-2" size={24} style={{ verticalAlign: 'text-bottom', color: 'var(--color-secondary)' }} />
-          SSTRUK
-        </Link>
-        {!hideExploreLink && (
-          <div style={{ display: 'flex', gap: '16px' }}>
-            <Link to="/explore" className="btn-outline" style={{ padding: '6px 16px', fontSize: '0.9rem' }}>Explore</Link>
-          </div>
-        )}
-      </nav>
-
+      <Starfield />
+      {!isHomePage && (
+        <div style={{ position: 'absolute', top: '24px', left: '32px', zIndex: 100 }}>
+          <Link to="/" style={{ display: 'inline-block' }}>
+            <img src={`${import.meta.env.BASE_URL}SSTRUK-logo.png?v=5`} alt="SSTRUK Logo" style={{ height: '80px', objectFit: 'contain' }} />
+          </Link>
+        </div>
+      )}
+
       <main className="main-content">
         <Routes>
           <Route path="/" element={<Home />} />
@@ -34,6 +32,8 @@ function App() {
           <Route path="/chat/:id" element={<Chat />} />
         </Routes>
       </main>
+
+      <RocketTransition />
     </div>
   );
 }

diff --git a/src/components/MatchOverlay.tsx b/src/components/MatchOverlay.tsx
@@ -1,23 +1,23 @@
 import { useEffect } from 'react';
 import type { AlienProfile } from '../data/mockAliens';
-import { useNavigate } from 'react-router';
 import { Heart } from 'lucide-react';
+import { useRocketNav } from '../context/TransitionContext';
 
 interface MatchOverlayProps {
   alien: AlienProfile;
   userName: string;
 }
 
 export default function MatchOverlay({ alien, userName }: MatchOverlayProps) {
-  const navigate = useNavigate();
+  const triggerRocketNav = useRocketNav();
 
   useEffect(() => {
-    // Automatically redirect to chat after 3 seconds
+    // Trigger rocket navigation after 2 seconds (giving time to see the match)
     const timer = setTimeout(() => {
-      navigate(`/chat/${alien.id}`);
-    }, 3000);
+      triggerRocketNav(`/chat/${alien.id}`);
+    }, 2000);
     return () => clearTimeout(timer);
-  }, [navigate, alien.id]);
+  }, [triggerRocketNav, alien.id]);
 
   return (
     <div style={{
@@ -45,8 +45,8 @@ export default function MatchOverlay({ alien, userName }: MatchOverlayProps) {
         }
       `}</style>
 
-      <h1 style={{ fontSize: '4rem', fontStyle: 'italic', marginBottom: '40px', textShadow: '0 4px 20px rgba(0,0,0,0.5)' }}>
-        IT'S A MATCH!
+      <h1 style={{ fontSize: '3.5rem', fontStyle: 'italic', marginBottom: '40px', textShadow: '0 4px 20px rgba(0,0,0,0.5)', textAlign: 'center' }}>
+        YOU'VE BEEN STARSTRUCK!
       </h1>
 
       <div style={{ display: 'flex', alignItems: 'center', gap: '32px', marginBottom: '40px' }}>