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

feat: Implement website structure

Browse source 
- Add navigation with Themes, Puzzles, and Miscellany.
- Create "coming soon" pages for Puzzles and Miscellany.
- Create a Themes page with cards for various topics.
- Implement basic boxy layout.
- Prepare for future interactive additions and filtering.
- Set up for Netlify deployment.
This commit is contained in:
gpt-engineer-app[bot] 2025-07-19 13:01:09 +00:00
parent 9debcb7e0b
commit fb7bb4aca4
18 changed files with 682 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

123
src/pages/Index.tsx
View file

@ -1,12 +1,123 @@
// Update this page (the content is just a fallback if you fail to update the page)
import { Link } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { ArrowRight, BookOpen, Puzzle, Sparkles } from "lucide-react";
import Navigation from "@/components/Navigation";
const Index = () => {
return (
<div className="min-h-screen flex items-center justify-center bg-background">
<div className="text-center">
<h1 className="text-4xl font-bold mb-4">Welcome to Your Blank App</h1>
<p className="text-xl text-muted-foreground">Start building your amazing project here!</p>
</div>
<div className="min-h-screen bg-background">
<Navigation />
{/* 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>
<h1 className="text-5xl font-bold text-foreground mb-6 leading-tight">
Interactive Learning
<span className="block text-accent">Made Simple</span>
</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>
</div>
<div className="flex justify-center gap-4 mb-16">
<Button asChild size="lg" className="bg-accent hover:bg-accent/90">
<Link to="/themes" className="inline-flex items-center">
Explore Themes
<ArrowRight className="ml-2 w-4 h-4" />
</Link>
</Button>
<Button asChild variant="outline" size="lg">
<Link to="/puzzles">
Try Puzzles
</Link>
</Button>
</div>
</div>
</section>
{/* Feature Cards */}
<section className="py-16 px-4 bg-surface-variant">
<div className="max-w-6xl mx-auto">
<h2 className="text-3xl font-bold text-center text-foreground mb-12">
What You'll Find Here
</h2>
<div className="grid md:grid-cols-3 gap-8">
<div className="bg-surface border border-outline rounded-lg p-8 text-center shadow-card">
<div className="w-16 h-16 bg-accent/10 rounded-full flex items-center justify-center mx-auto mb-6">
<BookOpen className="w-8 h-8 text-accent" />
</div>
<h3 className="text-xl font-semibold text-foreground mb-4">Educational Themes</h3>
<p className="text-muted-foreground">
Comprehensive interactive modules covering computer science, mathematics, and algorithm design fundamentals.
</p>
</div>
<div className="bg-surface border border-outline rounded-lg p-8 text-center shadow-card">
<div className="w-16 h-16 bg-accent/10 rounded-full flex items-center justify-center mx-auto mb-6">
<Puzzle className="w-8 h-8 text-accent" />
</div>
<h3 className="text-xl font-semibold text-foreground mb-4">Interactive Puzzles</h3>
<p className="text-muted-foreground">
Engaging problem-solving activities that reinforce theoretical concepts through hands-on practice.
</p>
</div>
<div className="bg-surface border border-outline rounded-lg p-8 text-center shadow-card">
<div className="w-16 h-16 bg-accent/10 rounded-full flex items-center justify-center mx-auto mb-6">
<Sparkles className="w-8 h-8 text-accent" />
</div>
<h3 className="text-xl font-semibold text-foreground mb-4">Creative Tools</h3>
<p className="text-muted-foreground">
Unique educational experiments and miscellaneous interactive content to spark curiosity and creativity.
</p>
</div>
</div>
</div>
</section>
{/* CTA Section */}
<section className="py-20 px-4">
<div className="max-w-4xl mx-auto text-center">
<h2 className="text-3xl font-bold text-foreground mb-6">
Ready to Start Learning?
</h2>
<p className="text-lg text-muted-foreground mb-8">
Choose your path and dive into interactive educational content designed to make complex concepts accessible and engaging.
</p>
<div className="grid sm:grid-cols-3 gap-4 max-w-2xl mx-auto">
<Button asChild variant="outline" className="h-auto p-6">
<Link to="/themes" className="flex flex-col items-center">
<BookOpen className="w-6 h-6 mb-2" />
<span className="font-semibold">Themes</span>
<span className="text-xs text-muted-foreground">Structured Learning</span>
</Link>
</Button>
<Button asChild variant="outline" className="h-auto p-6">
<Link to="/puzzles" className="flex flex-col items-center">
<Puzzle className="w-6 h-6 mb-2" />
<span className="font-semibold">Puzzles</span>
<span className="text-xs text-muted-foreground">Problem Solving</span>
</Link>
</Button>
<Button asChild variant="outline" className="h-auto p-6">
<Link to="/miscellany" className="flex flex-col items-center">
<Sparkles className="w-6 h-6 mb-2" />
<span className="font-semibold">Miscellany</span>
<span className="text-xs text-muted-foreground">Creative Tools</span>
</Link>
</Button>
</div>
</div>
</section>
</div>
);
};