Create AeThex OS Logo Component

cgen-4845a911b17d4f80b9bce1edbec367f4
2025-11-13 05:23:24 +00:00 · 2025-11-13 05:23:24 +00:00 · 4daa6b797a
commit 4daa6b797a
parent 57491d84d2
1 changed files with 139 additions and 0 deletions
--- a/client/components/AeThexOSLogo.tsx
+++ b/client/components/AeThexOSLogo.tsx
@ -0,0 +1,139 @@
+import { cn } from "@/lib/utils";
+
+interface AeThexOSLogoProps {
+  size?: "sm" | "md" | "lg" | "xl";
+  animate?: boolean;
+  className?: string;
+  variant?: "default" | "light" | "header" | "footer";
+}
+
+const GRADIENTS = {
+  default: { id: "osGradient", stops: [{ offset: "0%", color: "#a78bfa" }, { offset: "100%", color: "#60a5fa" }] },
+  light: { id: "osGradientLight", stops: [{ offset: "0%", color: "#e9d5ff" }, { offset: "100%", color: "#bfdbfe" }] },
+  header: { id: "osGradientHeader", stops: [{ offset: "0%", color: "#a78bfa" }, { offset: "100%", color: "#60a5fa" }] },
+  footer: { id: "osGradientFooter", stops: [{ offset: "0%", color: "#818cf8" }, { offset: "100%", color: "#a78bfa" }] },
+};
+
+const SIZES = {
+  sm: "h-6 w-6",
+  md: "h-10 w-10",
+  lg: "h-16 w-16",
+  xl: "h-24 w-24",
+};
+
+export default function AeThexOSLogo({
+  size = "md",
+  animate = false,
+  className,
+  variant = "default",
+}: AeThexOSLogoProps) {
+  const gradient = GRADIENTS[variant];
+
+  return (
+    <svg
+      className={cn(
+        SIZES[size],
+        animate && "transition-all duration-300 hover:scale-110",
+        className
+      )}
+      viewBox="0 0 64 64"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <defs>
+        <linearGradient
+          id={gradient.id}
+          x1="0%"
+          y1="0%"
+          x2="100%"
+          y2="100%"
+        >
+          {gradient.stops.map((stop, idx) => (
+            <stop key={idx} offset={stop.offset} stopColor={stop.color} />
+          ))}
+        </linearGradient>
+        <filter id="glow">
+          <feGaussianBlur stdDeviation="1.5" result="coloredBlur" />
+          <feMerge>
+            <feMergeNode in="coloredBlur" />
+            <feMergeNode in="SourceGraphic" />
+          </feMerge>
+        </filter>
+      </defs>
+
+      {/* OS Window Frame */}
+      <rect
+        x="6"
+        y="6"
+        width="52"
+        height="52"
+        rx="6"
+        fill="none"
+        stroke={`url(#${gradient.id})`}
+        strokeWidth="2"
+        opacity="0.8"
+      />
+
+      {/* Title Bar */}
+      <rect
+        x="6"
+        y="6"
+        width="52"
+        height="12"
+        rx="6"
+        fill={`url(#${gradient.id})`}
+        opacity="0.15"
+      />
+      <line
+        x1="6"
+        y1="18"
+        x2="58"
+        y2="18"
+        stroke={`url(#${gradient.id})`}
+        strokeWidth="1"
+        opacity="0.3"
+      />
+
+      {/* System Dots */}
+      <circle cx="12" cy="12" r="1.5" fill="#a78bfa" opacity="0.7" />
+      <circle cx="18" cy="12" r="1.5" fill="#60a5fa" opacity="0.7" />
+      <circle cx="24" cy="12" r="1.5" fill="#c4b5fd" opacity="0.7" />
+
+      {/* Central OS Symbol */}
+      <g transform="translate(32, 35)">
+        <line
+          x1="-6"
+          y1="6"
+          x2="0"
+          y2="-8"
+          stroke={`url(#${gradient.id})`}
+          strokeWidth="2"
+          strokeLinecap="round"
+          filter="url(#glow)"
+        />
+        <line
+          x1="6"
+          y1="6"
+          x2="0"
+          y2="-8"
+          stroke={`url(#${gradient.id})`}
+          strokeWidth="2"
+          strokeLinecap="round"
+          filter="url(#glow)"
+        />
+        <line
+          x1="-3"
+          y1="0"
+          x2="3"
+          y2="0"
+          stroke={`url(#${gradient.id})`}
+          strokeWidth="2"
+          strokeLinecap="round"
+          filter="url(#glow)"
+        />
+        <circle cx="-6" cy="6" r="1.5" fill="#a78bfa" opacity="0.9" />
+        <circle cx="6" cy="6" r="1.5" fill="#60a5fa" opacity="0.9" />
+      </g>
+    </svg>
+  );
+}