a new start

components/ui/awesome-icon.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+interface AwesomeIconProps {
+  className?: string
+  size?: number
+}
+
+export function AwesomeIcon({ className, size = 24 }: AwesomeIconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 48 48"
+      width={size}
+      height={size}
+      className={cn('awesome-icon', className)}
+      aria-label="Awesome Logo"
+    >
+      {/* Main structure */}
+      <path
+        className="fill-(--color-primary-dark)"
+        d="m39.4 23l-.8-4L26 21.6V8h-4v12.3l-13.9-9l-2.2 3.4l15.2 9.8L9.4 39.8l3.2 2.4l11.3-14.8l8.4 12.7l3.4-2.2l-8.4-12.5z"
+      />
+
+      {/* Center circle */}
+      <circle
+        cx="24"
+        cy="24"
+        r="7"
+        className="fill-secondary"
+      />
+
+      {/* Outer circles - themed */}
+      <circle
+        cx="24"
+        cy="8"
+        r="5"
+        className="fill-primary"
+      />
+      <circle
+        cx="39"
+        cy="21"
+        r="5"
+        className="fill-secondary"
+      />
+      <circle
+        cx="7"
+        cy="13"
+        r="5"
+        className="fill-(--color-primary-dark)"
+      />
+      <circle
+        cx="11"
+        cy="41"
+        r="5"
+        className="fill-(--color-secondary-dark)"
+      />
+      <circle
+        cx="34"
+        cy="39"
+        r="5"
+        className="fill-(--color-primary-light)"
+      />
+    </svg>
+  )
+}