Add Hoverkraft logo to footer with gradient branding

Co-authored-by: neilime <314088+neilime@users.noreply.github.com>

Author: Copilot

packages/theme/src/theme/Footer/index.tsx

@@ -1,11 +1,47 @@
+import type React from "react";
+
 import "./styles.css";
 
+function HoverkraftLogo(): React.ReactElement {
+  return (
+    <svg
+      className="hoverkraft-footer__logo"
+      viewBox="0 0 200 60"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-label="Hoverkraft Logo"
+    >
+      <defs>
+        <linearGradient id="logoGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+          <stop offset="0%" stopColor="#1998ff" />
+          <stop offset="100%" stopColor="#ff5a02" />
+        </linearGradient>
+      </defs>
+      {/* Stylized "H" icon */}
+      <rect x="10" y="15" width="8" height="30" fill="url(#logoGradient)" rx="2" />
+      <rect x="32" y="15" width="8" height="30" fill="url(#logoGradient)" rx="2" />
+      <rect x="18" y="27" width="14" height="6" fill="url(#logoGradient)" rx="2" />
+      {/* Text "Hoverkraft" */}
+      <text
+        x="55"
+        y="38"
+        fontFamily="Inter, sans-serif"
+        fontSize="24"
+        fontWeight="700"
+        fill="#ffffff"
+      >
+        Hoverkraft
+      </text>
+    </svg>
+  );
+}
+
 export default function HoverkraftFooter(): JSX.Element {
   return (
     <footer className="hoverkraft-footer" role="contentinfo">
       <div className="hoverkraft-footer__content">
-        <div className="hoverkraft-footer__section">
-          <h4>Hoverkraft</h4>
+        <div className="hoverkraft-footer__section hoverkraft-footer__brand">
+          <HoverkraftLogo />
           <p>Building the future of technology.</p>
         </div>
 

packages/theme/src/theme/Footer/styles.css

@@ -29,6 +29,26 @@
   z-index: 1;
 }
 
+.hoverkraft-footer__brand {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.hoverkraft-footer__logo {
+  height: 50px;
+  width: auto;
+  max-width: 200px;
+  transition: transform 0.3s ease;
+}
+
+/* Respect user motion preferences for logo animation */
+@media (prefers-reduced-motion: no-preference) {
+  .hoverkraft-footer__logo:hover {
+    transform: scale(1.05);
+  }
+}
+
 .hoverkraft-footer__section h4 {
   color: var(--hk-color-primary);
   margin-bottom: 1rem;