From a384562f9fe54d6aad26931c86aaa0ae9187e00d Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Mon, 21 Jul 2025 09:59:47 +0000
Subject: [PATCH] Refactor home page and navigation

Move icon to navigation, update featured interactives, and add random interactives section.
---
 src/components/Navigation.tsx |  6 ++-
 src/pages/Index.tsx           | 75 +++++++++++++++++++++++++++++++----
 2 files changed, 73 insertions(+), 8 deletions(-)

diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index 444e1d6..d28c138 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -1,4 +1,5 @@
 import { Link, useLocation } from "react-router-dom";
+import { BookOpen } from "lucide-react";
 import { cn } from "@/lib/utils";
 
 const Navigation = () => {
@@ -16,8 +17,11 @@ const Navigation = () => {
         <div className="flex items-center justify-between h-16">
           <Link 
             to="/" 
-            className="text-xl font-bold text-foreground hover:text-accent transition-colors"
+            className="flex items-center gap-3 text-xl font-bold text-foreground hover:text-accent transition-colors"
           >
+            <div className="w-8 h-8 bg-accent rounded-lg flex items-center justify-center transform rotate-3">
+              <BookOpen className="w-5 h-5 text-accent-foreground" />
+            </div>
             Interactives
           </Link>
           
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index 335f2b8..553f7ea 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -2,11 +2,11 @@ import { Link } from "react-router-dom";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
-import { ArrowRight, BookOpen, Puzzle, Sparkles } from "lucide-react";
+import { ArrowRight, Sparkles } from "lucide-react";
 import Layout from "@/components/Layout";
 
-// Featured interactives to display on index page
-const featuredInteractives = [{
+// All interactives data
+const allInteractives = [{
   id: 'binary-number-game',
   title: 'Binary Number Representation',
   description: 'Learn how numbers are represented in binary (base-2) format through an interactive guessing game.',
@@ -63,16 +63,28 @@ const featuredInteractives = [{
   path: '/knights-puzzle',
   theme: 'Puzzles'
 }];
+
+// Featured interactives (3 fixed ones)
+const featuredInteractives = allInteractives.filter(interactive => 
+  ['northcotts-game', 'ternary-search-trick', 'game-of-sim'].includes(interactive.id)
+);
+
+// Function to get random interactives (excluding featured ones)
+const getRandomInteractives = (count: number) => {
+  const availableInteractives = allInteractives.filter(interactive => 
+    !['northcotts-game', 'ternary-search-trick', 'game-of-sim'].includes(interactive.id)
+  );
+  
+  const shuffled = [...availableInteractives].sort(() => 0.5 - Math.random());
+  return shuffled.slice(0, count);
+};
 const Index = () => {
+  const randomInteractives = getRandomInteractives(3);
   return <Layout>
       {/* Hero Section */}
       <section className="py-20 px-4">
         <div className="max-w-6xl mx-auto text-center">
           <div className="mb-8">
-            <div className="w-20 h-20 bg-accent rounded-2xl flex items-center justify-center mx-auto mb-6 transform rotate-3">
-              <BookOpen className="w-10 h-10 text-accent-foreground" />
-            </div>
-            
             <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
               Discover a collection of interactive educational tools designed to supplement lectures and enhance understanding across multiple disciplines. From discrete mathematics to social choice theory.
             </p>
@@ -131,6 +143,55 @@ const Index = () => {
               </Card>)}
           </div>
 
+        </div>
+      </section>
+
+      {/* Random Interactives Section */}
+      <section className="py-16 px-4">
+        <div className="max-w-6xl mx-auto">
+          <div className="text-center mb-8">
+            <div className="flex items-center justify-center gap-2 mb-4">
+              <Sparkles className="w-6 h-6 text-accent" />
+              <h2 className="text-3xl font-bold text-foreground">
+                Random Interactives
+              </h2>
+              <Sparkles className="w-6 h-6 text-accent" />
+            </div>
+            <p className="text-muted-foreground">
+              Explore something new with these randomly selected interactives
+            </p>
+          </div>
+          
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {randomInteractives.map(interactive => <Card key={interactive.id} className="hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
+                <CardHeader>
+                  <CardTitle className="text-lg leading-tight">
+                    <Link to={interactive.path} className="text-foreground hover:text-primary transition-colors">
+                      {interactive.title}
+                    </Link>
+                  </CardTitle>
+                  <Badge variant="outline" className="w-fit text-xs">
+                    {interactive.theme}
+                  </Badge>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-muted-foreground text-sm mb-4 line-clamp-3">
+                    {interactive.description}
+                  </p>
+                  <div className="flex flex-wrap gap-1 mb-4">
+                    {interactive.tags.slice(0, 3).map(tag => <Badge key={tag} variant="secondary" className="text-xs">
+                        {tag}
+                      </Badge>)}
+                  </div>
+                  <Button asChild size="sm" className="w-full">
+                    <Link to={interactive.path}>
+                      Try Interactive
+                    </Link>
+                  </Button>
+                </CardContent>
+              </Card>)}
+          </div>
+
           <div className="text-center mt-12">
             <Button asChild variant="outline" size="lg">
               <Link to="/index" className="inline-flex items-center">