perubahann icon/logo

public/nova40-icon.svg

@@ -1,87 +1,20 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
   <defs>
-    <!-- Core glow gradient -->
-    <radialGradient id="coreGlow" cx="50%" cy="50%" r="50%">
-      <stop offset="0%" stop-color="#FFFFFF"/>
-      <stop offset="30%" stop-color="#80F0FF"/>
-      <stop offset="70%" stop-color="#00CFFF"/>
-      <stop offset="100%" stop-color="#0080CC"/>
-    </radialGradient>
-    <!-- Outer glow -->
-    <radialGradient id="outerGlow" cx="50%" cy="50%" r="50%">
-      <stop offset="0%" stop-color="#00E5FF" stop-opacity="0.6"/>
-      <stop offset="50%" stop-color="#CC44FF" stop-opacity="0.2"/>
-      <stop offset="100%" stop-color="#CC44FF" stop-opacity="0"/>
-    </radialGradient>
-    <!-- Ray gradient -->
-    <linearGradient id="rayGrad" x1="0%" y1="0%" x2="100%" y2="0%">
-      <stop offset="0%" stop-color="#FF44CC" stop-opacity="0.9"/>
-      <stop offset="100%" stop-color="#FF44CC" stop-opacity="0"/>
-    </linearGradient>
-    <!-- Background gradient -->
     <linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" stop-color="#0D1230"/>
+      <stop offset="0%" stop-color="#2D1B69"/>
-      <stop offset="100%" stop-color="#080C1A"/>
+      <stop offset="100%" stop-color="#1A1145"/>
+    </linearGradient>
+    <linearGradient id="goldGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#FFD700"/>
+      <stop offset="100%" stop-color="#B8860B"/>
+    </linearGradient>
+    <linearGradient id="greenGrad" x1="0%" y1="100%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#00C9A7"/>
+      <stop offset="100%" stop-color="#00E676"/>
     </linearGradient>
-    <!-- Blur filter for glow -->
-    <filter id="softGlow" x="-50%" y="-50%" width="200%" height="200%">
-      <feGaussianBlur stdDeviation="15" result="blur"/>
-      <feComposite in="SourceGraphic" in2="blur" operator="over"/>
-    </filter>
-    <filter id="bigGlow" x="-100%" y="-100%" width="300%" height="300%">
-      <feGaussianBlur stdDeviation="30"/>
-    </filter>
-    <filter id="rayGlow" x="-50%" y="-50%" width="200%" height="200%">
-      <feGaussianBlur stdDeviation="4"/>
-    </filter>
   </defs>
-
-  <!-- Background -->
   <rect width="512" height="512" rx="100" fill="url(#bgGrad)"/>
-
+  <text x="256" y="300" text-anchor="middle" font-family="Arial Black, sans-serif" font-weight="900" font-size="220" fill="url(#goldGrad)">40</text>
-  <!-- Stars -->
+  <path d="M340 180 L370 120 L380 155 L410 145 L370 200 Z" fill="url(#greenGrad)"/>
-  <circle cx="80" cy="90" r="1.5" fill="white" opacity="0.5"/>
+  <text x="256" y="420" text-anchor="middle" font-family="Arial, sans-serif" font-weight="700" font-size="72" fill="white" letter-spacing="12">NOVA40</text>
-  <circle cx="430" cy="70" r="1" fill="white" opacity="0.4"/>
-  <circle cx="400" cy="400" r="1.5" fill="white" opacity="0.3"/>
-  <circle cx="60" cy="380" r="1" fill="white" opacity="0.5"/>
-  <circle cx="150" cy="50" r="1" fill="white" opacity="0.3"/>
-  <circle cx="350" cy="450" r="1" fill="white" opacity="0.4"/>
-  <circle cx="450" cy="200" r="1" fill="white" opacity="0.3"/>
-  <circle cx="70" cy="250" r="1.5" fill="white" opacity="0.4"/>
-  <circle cx="200" cy="440" r="1" fill="white" opacity="0.3"/>
-  <circle cx="440" cy="130" r="1" fill="white" opacity="0.5"/>
-
-  <!-- Outer glow behind everything -->
-  <circle cx="256" cy="256" r="120" fill="url(#outerGlow)" filter="url(#bigGlow)"/>
-
-  <!-- Starburst rays -->
-  <g transform="translate(256,256)" filter="url(#rayGlow)">
-    <!-- 16 rays at various angles -->
-    <line x1="0" y1="0" x2="160" y2="0" stroke="#FF44CC" stroke-width="2.5" opacity="0.8" transform="rotate(0)"/>
-    <line x1="0" y1="0" x2="130" y2="0" stroke="#FF44CC" stroke-width="2" opacity="0.7" transform="rotate(22.5)"/>
-    <line x1="0" y1="0" x2="155" y2="0" stroke="#FF44CC" stroke-width="2.5" opacity="0.8" transform="rotate(45)"/>
-    <line x1="0" y1="0" x2="125" y2="0" stroke="#FF44CC" stroke-width="2" opacity="0.7" transform="rotate(67.5)"/>
-    <line x1="0" y1="0" x2="160" y2="0" stroke="#FF44CC" stroke-width="2.5" opacity="0.8" transform="rotate(90)"/>
-    <line x1="0" y1="0" x2="130" y2="0" stroke="#FF44CC" stroke-width="2" opacity="0.7" transform="rotate(112.5)"/>
-    <line x1="0" y1="0" x2="155" y2="0" stroke="#FF44CC" stroke-width="2.5" opacity="0.8" transform="rotate(135)"/>
-    <line x1="0" y1="0" x2="125" y2="0" stroke="#FF44CC" stroke-width="2" opacity="0.7" transform="rotate(157.5)"/>
-    <line x1="0" y1="0" x2="160" y2="0" stroke="#FF44CC" stroke-width="2.5" opacity="0.8" transform="rotate(180)"/>
-    <line x1="0" y1="0" x2="130" y2="0" stroke="#FF44CC" stroke-width="2" opacity="0.7" transform="rotate(202.5)"/>
-    <line x1="0" y1="0" x2="155" y2="0" stroke="#FF44CC" stroke-width="2.5" opacity="0.8" transform="rotate(225)"/>
-    <line x1="0" y1="0" x2="125" y2="0" stroke="#FF44CC" stroke-width="2" opacity="0.7" transform="rotate(247.5)"/>
-    <line x1="0" y1="0" x2="160" y2="0" stroke="#FF44CC" stroke-width="2.5" opacity="0.8" transform="rotate(270)"/>
-    <line x1="0" y1="0" x2="130" y2="0" stroke="#FF44CC" stroke-width="2" opacity="0.7" transform="rotate(292.5)"/>
-    <line x1="0" y1="0" x2="155" y2="0" stroke="#FF44CC" stroke-width="2.5" opacity="0.8" transform="rotate(315)"/>
-    <line x1="0" y1="0" x2="125" y2="0" stroke="#FF44CC" stroke-width="2" opacity="0.7" transform="rotate(337.5)"/>
-  </g>
-
-  <!-- Orbital ring -->
-  <ellipse cx="256" cy="256" rx="170" ry="55" fill="none" stroke="#00D4FF" stroke-width="3" opacity="0.8" transform="rotate(-25, 256, 256)"/>
-  <ellipse cx="256" cy="256" rx="170" ry="55" fill="none" stroke="#00E5FF" stroke-width="1.5" opacity="0.4" transform="rotate(-25, 256, 256)" filter="url(#rayGlow)"/>
-
-  <!-- Core sphere -->
-  <circle cx="256" cy="256" r="55" fill="url(#coreGlow)" filter="url(#softGlow)"/>
-  <!-- Core highlight -->
-  <circle cx="245" cy="244" r="25" fill="white" opacity="0.15"/>
-  <circle cx="240" cy="240" r="12" fill="white" opacity="0.2"/>
 </svg>

src/components/Nova40Icon.jsx

@@ -1,9 +1,7 @@
 import React from 'react'
 
 /**
- * Nova40 Icon — matches the mobile app icon:
+ * Nova40 Icon — renders the actual app icon PNG from assets.
- * Glowing cyan sphere with magenta starburst rays and an orbital ring
- * on a dark navy background.
  */
 export default function Nova40Icon({ size = 48, className = '', rounded = true }) {
   return (
@@ -23,74 +21,22 @@ export default function Nova40Icon({ size = 48, className = '', rounded = true }
 }
 
 /**
- * Animated CSS-only version of the Nova40 icon for decorative use
+ * Same PNG icon but with a subtle glow pulse animation around it.
  */
 export function Nova40IconAnimated({ size = 64, className = '' }) {
-  const coreSize = size * 0.3
-  const rayLength = size * 0.38
-  const ringRx = size * 0.42
-  const ringRy = size * 0.14
-
   return (
     <div
       className={`relative flex-shrink-0 ${className}`}
       style={{ width: size, height: size }}
     >
-      <svg viewBox="0 0 100 100" className="w-full h-full" xmlns="http://www.w3.org/2000/svg">
+      <div className="absolute -inset-2 bg-nova-primary/20 rounded-2xl blur-xl animate-pulse-slow" />
-        <defs>
+      <img
-          <radialGradient id="iconCoreGlow" cx="50%" cy="50%" r="50%">
+        src="/icon.png"
-            <stop offset="0%" stopColor="#FFFFFF" />
+        alt="Nova40"
-            <stop offset="30%" stopColor="#80F0FF" />
+        width={size}
-            <stop offset="70%" stopColor="#00CFFF" />
+        height={size}
-            <stop offset="100%" stopColor="#0080CC" />
+        className="relative w-full h-full object-cover rounded-xl"
-          </radialGradient>
+      />
-          <filter id="iconSoftGlow" x="-50%" y="-50%" width="200%" height="200%">
-            <feGaussianBlur stdDeviation="3" />
-          </filter>
-          <filter id="iconRayGlow" x="-50%" y="-50%" width="200%" height="200%">
-            <feGaussianBlur stdDeviation="1" />
-          </filter>
-        </defs>
-
-        {/* Outer glow */}
-        <circle cx="50" cy="50" r="25" fill="#00E5FF" opacity="0.15" filter="url(#iconSoftGlow)" />
-        <circle cx="50" cy="50" r="30" fill="#CC44FF" opacity="0.08" filter="url(#iconSoftGlow)" />
-
-        {/* Starburst rays */}
-        <g filter="url(#iconRayGlow)">
-          {Array.from({ length: 16 }).map((_, i) => {
-            const angle = (i * 360) / 16
-            const len = i % 2 === 0 ? 38 : 30
-            const rad = (angle * Math.PI) / 180
-            return (
-              <line
-                key={i}
-                x1="50"
-                y1="50"
-                x2={50 + len * Math.cos(rad)}
-                y2={50 + len * Math.sin(rad)}
-                stroke="#FF44CC"
-                strokeWidth={i % 2 === 0 ? '0.8' : '0.5'}
-                opacity={i % 2 === 0 ? 0.8 : 0.6}
-              />
-            )
-          })}
-        </g>
-
-        {/* Orbital ring */}
-        <ellipse
-          cx="50" cy="50" rx="42" ry="14"
-          fill="none" stroke="#00D4FF" strokeWidth="0.8" opacity="0.8"
-          transform="rotate(-25, 50, 50)"
-        />
-
-        {/* Core sphere */}
-        <circle cx="50" cy="50" r="12" fill="url(#iconCoreGlow)">
-          <animate attributeName="r" values="12;13;12" dur="3s" repeatCount="indefinite" />
-        </circle>
-        {/* Highlight */}
-        <circle cx="47" cy="47" r="5" fill="white" opacity="0.15" />
-      </svg>
     </div>
   )
 }