Neues WEBklar-Logo, Favicon und Tab-Titel

src/components/Footer.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import Logo from '@/components/Logo';
 
 const DevStudio: React.FC = () => {
   return (
@@ -15,7 +16,7 @@ const Footer: React.FC = () => {
         <div>
           <div className="mr-0 mb-4 md:mr-4 md:flex">
             <a className="relative z-20 mr-4 flex items-center space-x-2 px-2 py-1 text-sm font-normal text-white" href="/">
-              <img alt="logo" width="30" height="30" src="https://assets.aceternity.com/logo-dark.png" />
+              <Logo width={30} height={30} />
               <span className="font-medium text-white">WEBklar</span>
             </a>
           </div>

src/components/Header.tsx

@@ -13,6 +13,7 @@ import {
   MobileNavToggle,
   MobileNavMenu,
 } from "@/components/ui/resizable-navbar";
+import Logo from "@/components/Logo";
 
 const Header = () => {
   const navItems = [
@@ -30,6 +31,7 @@ const Header = () => {
         {/* Desktop Navigation */}
         <NavBody>
           <NavbarLogo href="#">
+            <Logo width={30} height={30} />
             <span className="font-display text-lg font-medium tracking-tight">
               Webklar
             </span>
@@ -52,6 +54,7 @@ const Header = () => {
         <MobileNav>
           <MobileNavHeader>
             <NavbarLogo href="#">
+              <Logo width={30} height={30} />
               <span className="font-display text-lg font-medium tracking-tight">
                 Webklar
               </span>

src/components/Logo.tsx

@@ -0,0 +1,39 @@
+interface LogoProps {
+  className?: string;
+  width?: number;
+  height?: number;
+}
+
+const Logo = ({ className, width = 30, height = 30 }: LogoProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 512 512"
+    className={className}
+    aria-hidden
+  >
+    {/* rounded square background */}
+    <rect x="48" y="48" width="416" height="416" rx="92" fill="#FFFFFF" />
+    {/* tilted oval */}
+    <ellipse cx="256" cy="256" rx="210" ry="150" fill="#111111" transform="rotate(-28 256 256)" />
+    {/* small dot */}
+    <circle cx="356" cy="172" r="18" fill="#FFFFFF" />
+    {/* enlarged sparkle star */}
+    <g transform="translate(256 256) rotate(-28)">
+      <path
+        d="
+          M 0,-170
+          C 22,-105 60,-72 120,-56
+          C 60,-40 22,-8 0,64
+          C -22,-8 -60,-40 -120,-56
+          C -60,-72 -22,-105 0,-170
+          Z
+        "
+        fill="#FFFFFF"
+      />
+    </g>
+  </svg>
+);
+
+export default Logo;