80 lines
3.9 KiB
TypeScript
80 lines
3.9 KiB
TypeScript
'use client'
|
|
|
|
import {demoCategories} from './data/demos'
|
|
import Link from 'next/link'
|
|
import {motion} from 'framer-motion'
|
|
|
|
export default function Home() {
|
|
return (
|
|
<main className="min-h-screen bg-zinc-900 text-white py-10 px-6 font-sans">
|
|
<h1 className="text-4xl font-bold text-center mb-12">Demos</h1>
|
|
|
|
{demoCategories.map((section) => (
|
|
<section key={section.label} className="mb-16">
|
|
<h2 className="text-2xl font-semibold mb-6">{section.label}</h2>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{section.items.map((demo) => (
|
|
<motion.div
|
|
key={demo.name}
|
|
className="flex flex-col rounded-lg border border-zinc-700 shadow-md overflow-hidden bg-zinc-800"
|
|
initial={{opacity: 0, y: 20}}
|
|
animate={{opacity: 1, y: 0}}
|
|
transition={{duration: 0.4}}
|
|
>
|
|
{/* Preview iframe */}
|
|
<div className="relative w-full h-[270px] overflow-hidden bg-black">
|
|
<motion.div
|
|
className="absolute inset-0"
|
|
style={{height: '200%', width: '100%'}}
|
|
animate={{y: ['0%', '-50%']}}
|
|
transition={{
|
|
repeat: Infinity,
|
|
repeatType: 'reverse',
|
|
duration: 7,
|
|
ease: 'easeInOut',
|
|
}}
|
|
>
|
|
<iframe
|
|
src={demo.url}
|
|
className="w-full h-full"
|
|
style={{
|
|
border: 'none',
|
|
pointerEvents: 'none',
|
|
}}
|
|
/>
|
|
</motion.div>
|
|
</div>
|
|
|
|
{/* Info and button */}
|
|
<div className="flex flex-col flex-1 p-4">
|
|
<h3 className="text-xl font-semibold mb-2">{demo.name}</h3>
|
|
|
|
{demo.description?.length > 0 && (
|
|
<ul className="text-sm text-zinc-400 list-disc list-inside space-y-1 mb-4">
|
|
{demo.description.map((line, i) => (
|
|
<li key={i}>{line}</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
|
|
<div className="mt-auto">
|
|
<Link
|
|
href={demo.url}
|
|
target="_blank"
|
|
prefetch={false}
|
|
className="block text-center bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded w-full transition-colors"
|
|
>
|
|
Demo Öffnen
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
))}
|
|
</main>
|
|
)
|
|
}
|