Visual edit in Lovable

Edited UI in Lovable

src/pages/Index.tsx

@@ -6,68 +6,58 @@ import { ArrowRight, BookOpen, Puzzle, Sparkles } from "lucide-react";
 import Layout from "@/components/Layout";
 
 // Featured interactives to display on index page
-const featuredInteractives = [
+const featuredInteractives = [{
-  {
   id: 'binary-number-game',
   title: 'Binary Number Representation',
   description: 'Learn how numbers are represented in binary (base-2) format through an interactive guessing game.',
   tags: ['binary', 'numbers', 'conversion'],
   path: '/binary-number-game',
   theme: 'Discrete Math'
-  },
+}, {
-  {
   id: 'ternary-number-game',
   title: 'Ternary Number Representation',
   description: 'Learn how numbers are represented in ternary (base-3) format by toggling between 0, 1, or 2 copies of powers of three.',
   tags: ['ternary', 'numbers', 'base-3'],
   path: '/ternary-number-game',
   theme: 'Discrete Math'
-  },
+}, {
-  {
   id: 'balanced-ternary-game',
   title: 'Balanced Ternary Number Representation',
   description: 'Explore balanced ternary using digits T (-1), 0, and 1. Add or subtract powers of three to match the target number.',
   tags: ['balanced-ternary', 'numbers', 'signed-digits'],
   path: '/balanced-ternary-game',
   theme: 'Discrete Math'
-  },
+}, {
-  {
   id: 'binary-search-trick',
   title: 'Binary Search Magic Trick',
   description: 'Perform an amazing magic trick that reveals how binary numbers work. Think of a number and watch the magic happen!',
   tags: ['binary', 'magic', 'trick'],
   path: '/binary-search-trick',
   theme: 'Data Structures'
-  },
+}, {
-  {
   id: 'game-of-sim',
   title: 'Game of Sim',
   description: 'A strategic two-player game where you take turns coloring edges between vertices, trying to avoid creating a triangle of your own color.',
   tags: ['strategy', 'graph-theory', 'two-player'],
   path: '/game-of-sim',
   theme: 'Games'
-  },
+}, {
-  {
   id: 'ternary-search-trick',
   title: 'Ternary Search Magic Trick',
   description: 'Experience the magic of ternary search! Think of a number and watch as the cards reveal it through mathematical calculations.',
   tags: ['ternary', 'magic', 'search'],
   path: '/ternary-search-trick',
   theme: 'Data Structures'
-  },
+}, {
-  {
   id: 'northcotts-game',
   title: "Northcott's Game",
   description: 'A strategic board game where players move their pieces to outmaneuver their opponent in a tactical race.',
   tags: ['strategy', 'board-game', 'two-player'],
   path: '/northcotts-game',
   theme: 'Games'
-  }
+}];
-];
-
 const Index = () => {
-  return (
+  return <Layout>
-    <Layout>
       {/* Hero Section */}
       <section className="py-20 px-4">
         <div className="max-w-6xl mx-auto text-center">
@@ -75,9 +65,7 @@ const Index = () => {
             <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>
-            <h1 className="text-5xl font-bold text-foreground mb-6 leading-tight">
+            
-              Interactive Learning Hub
-            </h1>
             <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>
@@ -107,14 +95,10 @@ const Index = () => {
           </h2>
           
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {featuredInteractives.map(interactive => (
+            {featuredInteractives.map(interactive => <Card key={interactive.id} className="hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
-              <Card key={interactive.id} className="hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
                 <CardHeader>
                   <CardTitle className="text-lg leading-tight">
-                    <Link 
+                    <Link to={interactive.path} className="text-foreground hover:text-primary transition-colors">
-                      to={interactive.path}
-                      className="text-foreground hover:text-primary transition-colors"
-                    >
                       {interactive.title}
                     </Link>
                   </CardTitle>
@@ -127,11 +111,9 @@ const Index = () => {
                     {interactive.description}
                   </p>
                   <div className="flex flex-wrap gap-1 mb-4">
-                    {interactive.tags.slice(0, 3).map(tag => (
+                    {interactive.tags.slice(0, 3).map(tag => <Badge key={tag} variant="secondary" className="text-xs">
-                      <Badge key={tag} variant="secondary" className="text-xs">
                         {tag}
-                      </Badge>
+                      </Badge>)}
-                    ))}
                   </div>
                   <Button asChild size="sm" className="w-full">
                     <Link to={interactive.path}>
@@ -139,8 +121,7 @@ const Index = () => {
                     </Link>
                   </Button>
                 </CardContent>
-              </Card>
+              </Card>)}
-            ))}
           </div>
 
           <div className="text-center mt-12">
@@ -153,7 +134,6 @@ const Index = () => {
           </div>
         </div>
       </section>
-    </Layout>
+    </Layout>;
-  );
 };
 export default Index;