Dynamic logo

src/app/page.tsx

@@ -6,6 +6,7 @@ import { Input } from "@/components/ui/input";
 import { MessageCircle, Users, Shield } from "lucide-react";
 import { motion } from "framer-motion";
 import { useRouter } from "next/navigation";
+import Logo from "@/components/Logo";
 
 export default function LandingPage() {
   const router = useRouter();
@@ -14,13 +15,14 @@ export default function LandingPage() {
     <div className="min-h-screen flex flex-col">
       {/* Header */}
       <header className="flex items-center justify-between px-8 py-6 border-b bg-background/60 backdrop-blur-md sticky top-0 z-50">
-        <motion.img
+        <motion.div
           initial={{ opacity: 0, y: -10 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.5 }}
           className="text-2xl font-bold"
-          src="/voxa.svg"
+        >
-        />
+          <Logo />
+        </motion.div>
         <div className="flex gap-4">
           <Button variant="ghost" onClick={() => router.push("/login")}>
             Login

src/components/Logo.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+type Props = React.SVGProps<SVGSVGElement>;
+
+export default function Logo(props: Props) {
+  return (
+    <svg
+      width={159}
+      height={29}
+      viewBox="0 0 159 29"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden={props["aria-hidden"] ?? true}
+      role={props.role ?? "img"}
+      {...props}
+    >
+      <path
+        d="M12 13.96C12.6667 15.2133 13.0133 15.8667 13.04 15.92C13.4933 16.7467 13.5067 17.5733 13.08 18.4L11.6 21.12L0.6 0.479998H3.12C4.26667 0.479998 5.09333 0.959998 5.6 1.92C7.89333 6.21333 10.0267 10.2267 12 13.96ZM35.24 0.479998C29.8 10.72 25.32 19.12 21.8 25.68C20.9467 27.3067 20.5067 28.1333 20.48 28.16C20.1867 28.72 19.72 29 19.08 29H15.8C21.0533 19.16 25.8667 10.1333 30.24 1.92C30.7733 0.959998 31.6 0.479998 32.72 0.479998H35.24ZM71.8041 7.6C73.1374 9.78667 73.8041 12.1733 73.8041 14.76C73.8041 17.32 73.1374 19.7067 71.8041 21.92C70.4707 24.1067 68.6574 25.84 66.3641 27.12C64.0974 28.3733 61.6174 29 58.9241 29C56.2307 29 53.7374 28.3733 51.4441 27.12C49.1507 25.84 47.3374 24.1067 46.0041 21.92C44.6707 19.7067 44.0041 17.32 44.0041 14.76C44.0041 12.1733 44.6707 9.78667 46.0041 7.6C47.3374 5.41333 49.1507 3.68 51.4441 2.4C53.7374 1.12 56.2307 0.479998 58.9241 0.479998C61.6174 0.479998 64.0974 1.12 66.3641 2.4C68.6574 3.68 70.4707 5.41333 71.8041 7.6ZM66.8441 7.2C64.6574 5.09333 62.0041 4.04 58.8841 4.04C55.7907 4.04 53.1507 5.09333 50.9641 7.2C48.7774 9.28 47.6841 11.8 47.6841 14.76C47.6841 17.6933 48.7774 20.2133 50.9641 22.32C53.1507 24.4 55.7907 25.44 58.8841 25.44C62.0041 25.44 64.6574 24.4 66.8441 22.32C69.0307 20.2133 70.1241 17.6933 70.1241 14.76C70.1241 11.8 69.0307 9.28 66.8441 7.2ZM113.389 0.479998L99.7494 14.72L113.389 29H110.149C109.323 29 108.603 28.68 107.989 28.04L97.5094 17.08L87.0294 28.04C86.416 28.68 85.696 29 84.8694 29H81.3094C84.5894 25.56 93.376 16.3733 107.669 1.44C108.283 0.799998 109.003 0.479998 109.829 0.479998H113.389ZM92.5094 9.56C92.1894 9.88 91.816 10.04 91.3894 10.04C90.9627 10.04 90.5894 9.88 90.2694 9.56L81.6294 0.479998H84.8694C85.696 0.479998 86.416 0.799998 87.0294 1.44L93.6294 8.36L92.5094 9.56ZM140.693 4.52C131.413 20.2 126.679 28.1867 126.493 28.48C126.306 28.8267 126.013 29 125.613 29H122.053C129.279 16.6 134.479 7.65333 137.653 2.16C137.919 1.65333 138.306 1.25333 138.813 0.959999C139.346 0.639998 139.919 0.479998 140.533 0.479998H142.773C145.066 4.77333 150.146 14.28 158.013 29H155.093C154.213 29 153.559 28.6133 153.133 27.84C152.013 25.7067 150.453 22.7867 148.453 19.08L140.693 4.52Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}