Refactor website to use shadcn components

frontend/app/legal/page.tsx

@@ -1,10 +1,60 @@
-import React from 'react';
+'use client'
 
-const LegalPage = () => {
+import Link from 'next/link'
+import {motion} from 'framer-motion'
+import SmallHero from '@/components/Helper/SmallHero'
+import {Card, CardContent} from '@/components/ui/card'
+
+const legalLinks = [
+    {
+        label: 'Impressum',
+        href: '/legal/imprint',
+    },
+    {
+        label: 'Datenschutz',
+        href: '/legal/privacy',
+    },
+    {
+        label: 'Widerrufsrecht',
+        href: '/legal/revocation',
+    },
+    {
+        label: 'Nutzungsbedingungen',
+        href: '/legal/terms-of-use',
+    },
+]
+
+export default function LegalOverviewPage() {
     return (
-        <div>
-        </div>
-    );
-};
+        <>
+            <SmallHero
+                title="Rechtliches"
+                subtitle="Alle rechtlich relevanten Informationen auf einen Blick."
+                backgroundImage="/images/contact.png"
+                blurBackground
+            />
 
-export default LegalPage;
+            <section className="px-6 sm:px-12 py-16 max-w-6xl mx-auto">
+                <motion.div
+                    className="grid grid-cols-1 sm:grid-cols-2 gap-6"
+                    initial={{opacity: 0, y: 20}}
+                    animate={{opacity: 1, y: 0}}
+                    transition={{duration: 0.5, delay: 0.3}}
+                >
+                    {legalLinks.map(({label, href}) => (
+                        <Card key={href} className="hover:shadow-md transition-shadow">
+                            <CardContent className="p-6">
+                                <Link
+                                    href={href}
+                                    className="text-primary font-medium text-lg hover:underline"
+                                >
+                                    {label}
+                                </Link>
+                            </CardContent>
+                        </Card>
+                    ))}
+                </motion.div>
+            </section>
+        </>
+    )
+}