83 lines
2.7 KiB
JavaScript
83 lines
2.7 KiB
JavaScript
import { motion } from 'framer-motion';
|
|
import Image from 'next/image';
|
|
import {
|
|
BookOpenIcon,
|
|
RocketLaunchIcon,
|
|
PuzzlePieceIcon
|
|
} from '@heroicons/react/24/outline';
|
|
|
|
export default function Projects() {
|
|
const projects = [
|
|
{
|
|
title: 'Textbased Survival',
|
|
description: 'Ein spannendes Textbasiertes Survival Abenteuer mit fesselnder Story.',
|
|
image: '/assets/images/fantasy-quest.png',
|
|
icon: BookOpenIcon,
|
|
},
|
|
{
|
|
title: 'Space Explorer',
|
|
description: 'Erkunde das Universum in diesem actiongeladenen Weltraumabenteuer.',
|
|
image: '/assets/images/space-explorer.png',
|
|
icon: RocketLaunchIcon,
|
|
},
|
|
{
|
|
title: 'Puzzle Master',
|
|
description: 'Fordere deinen Verstand mit kniffligen Rätseln heraus.',
|
|
image: '/assets/images/puzzle-master.png',
|
|
icon: PuzzlePieceIcon,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
>
|
|
<section className="py-20 bg-gray-50">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className="text-center mb-16"
|
|
>
|
|
<h1 className="text-4xl font-bold mb-6">Unsere Projekte</h1>
|
|
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
|
Entdecken Sie einige unserer neuesten Apps und Spiele, die wir mit Leidenschaft entwickelt haben.
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{projects.map((project, index) => {
|
|
const Icon = project.icon;
|
|
return (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: index * 0.2 }}
|
|
className="bg-white p-6 rounded-lg shadow-sm"
|
|
>
|
|
<div className="flex items-center justify-center mb-4">
|
|
<Icon className="h-12 w-12 text-pb-turquoise" />
|
|
</div>
|
|
<div className="relative w-full h-48 mb-4 rounded-lg overflow-hidden">
|
|
<Image
|
|
src={project.image}
|
|
alt={project.title}
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
<h3 className="text-xl font-semibold mb-2">{project.title}</h3>
|
|
<p className="text-gray-600">{project.description}</p>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</motion.div>
|
|
);
|
|
}
|