Websites/interactives
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Visual edit in Lovable

Browse source 
Edited UI in Lovable
This commit is contained in:
gpt-engineer-app[bot] 2025-07-21 09:52:16 +00:00
parent 0d506339c8
commit ad504df7ae
1 changed files with 58 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

136
src/pages/Index.tsx
View file

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