Initial commit

src_frontend_orig/components/Header.jsx

@@ -0,0 +1,69 @@
+import { CountUp } from './CountUp.jsx';
+import { ArrowPathIcon, HomeIcon } from '@heroicons/react/24/outline';
+import { motion, useReducedMotion } from 'framer-motion';
+import { useNavigate } from 'react-router-dom';
+import logo from '../assets/logolang.png';
+import { Button } from './Button.jsx';
+
+export function Header({ count, title = 'Kenteken Generator', onRestart, onHome }) {
+  const navigate = useNavigate();
+  const reduceMotion = useReducedMotion();
+  return (
+    <motion.header
+      className="header"
+      initial={reduceMotion ? { opacity: 1 } : { y: -20, opacity: 0 }}
+      animate={{ y: 0, opacity: 1 }}
+      transition={{ duration: reduceMotion ? 0 : 0.28 }}
+    >
+      <div className="header-inner">
+        <div
+          className="flex flex-col items-center cursor-pointer"
+          onClick={() => navigate('/generate')}
+        >
+          <motion.img
+            src={logo}
+            alt="CarKiddo"
+            className="h-10 w-auto"
+            whileHover={reduceMotion ? undefined : { rotate: 2, y: -1 }}
+            transition={{ type: 'spring', stiffness: 300, damping: 20 }}
+          />
+          <motion.div
+            className="header-title mt-1"
+            initial={reduceMotion ? false : { opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.3 }}
+          >
+            {title}
+          </motion.div>
+        </div>
+        <div className="flex items-center gap-3">
+          <div className="subtle flex items-center gap-1 text-sm">
+            🚗 <CountUp value={count} /> kinderauto’s
+          </div>
+          {onHome && (
+            <Button
+              type="button"
+              variant="ghost"
+              className="px-3 py-1.5 text-xs flex items-center gap-1"
+              onClick={onHome}
+            >
+              <HomeIcon className="w-4 h-4" />
+              Home
+            </Button>
+          )}
+          {onRestart && (
+            <Button
+              type="button"
+              variant="ghost"
+              className="px-3 py-1.5 text-xs flex items-center gap-1"
+              onClick={onRestart}
+            >
+              <ArrowPathIcon className="w-4 h-4" />
+              Opnieuw
+            </Button>
+          )}
+        </div>
+      </div>
+    </motion.header>
+  );
+}