Visual edit in Lovable
Edited UI in Lovable
This commit is contained in:
gpt-engineer-app[bot]
parent
0d506339c8
commit
ad504df7ae
1 changed files with 58 additions and 78 deletions
|
|
@ -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 = [
|
||||
{
|
||||
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 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 (
|
||||
<Layout>
|
||||
return <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 => (
|
||||
<Card key={interactive.id} className="hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
|
||||
{featuredInteractives.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"
|
||||
>
|
||||
<Link 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 => (
|
||||
<Badge key={tag} variant="secondary" className="text-xs">
|
||||
{interactive.tags.slice(0, 3).map(tag => <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;
|
||||
Loading…
Add table
Add a link
Reference in a new issue