79 lines
2.5 KiB
JavaScript
79 lines
2.5 KiB
JavaScript
import { motion } from 'framer-motion';
|
|
import {
|
|
ArrowRightIcon,
|
|
ComputerDesktopIcon,
|
|
MagnifyingGlassIcon,
|
|
CodeBracketIcon
|
|
} from '@heroicons/react/24/outline';
|
|
import { useRouter } from 'next/router';
|
|
|
|
export default function Home() {
|
|
const router = useRouter();
|
|
const features = [
|
|
{
|
|
icon: ComputerDesktopIcon,
|
|
title: 'App-Design',
|
|
description: 'Kreative und benutzerfreundliche Designs für mobile Apps.'
|
|
},
|
|
{
|
|
icon: CodeBracketIcon,
|
|
title: 'App-Entwicklung',
|
|
description: 'Hochwertige mobile Anwendungen für iOS und Android.'
|
|
},
|
|
{
|
|
icon: MagnifyingGlassIcon,
|
|
title: 'Spieleentwicklung',
|
|
description: 'Fesselnde Spiele mit modernster Technologie.'
|
|
}
|
|
];
|
|
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
>
|
|
<section className="relative h-screen flex items-center">
|
|
<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 }}
|
|
transition={{ duration: 0.8 }}
|
|
className="text-center"
|
|
>
|
|
<h1 className="text-4xl md:text-6xl font-bold mb-6">
|
|
Wir entwickeln <span className="text-pb-turquoise">Apps und Spiele</span>
|
|
</h1>
|
|
<p className="text-xl mb-8 text-gray-600">
|
|
Was uns antreibt, ist unsere Leidenschaft für innovative Apps und Spiele.
|
|
</p>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="py-20 bg-gray-50">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{features.map((feature, index) => {
|
|
const Icon = feature.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"
|
|
>
|
|
<Icon className="h-12 w-12 text-pb-turquoise mb-4" />
|
|
<h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
|
|
<p className="text-gray-600">{feature.description}</p>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</motion.div>
|
|
);
|
|
}
|