Merge pull request #2 from lokumai/fix/icon-everywhere

Replace old icon with new ones everywhere

Author: cevheri

src/components/Footer.astro

@@ -9,20 +9,8 @@
       <!-- Brand section -->
       <div class="lg:col-span-2">
         <div class="flex items-center space-x-3 mb-4">
-          <div class="w-8 h-8">
-            <svg viewBox="0 0 100 100" class="w-full h-full">
-              <!-- Three stacked lokum cubes - white version -->
-              <rect x="20" y="60" width="25" height="25" rx="3" fill="#FFB6C1" stroke="#FF69B4" stroke-width="1"/>
-              <rect x="30" y="40" width="25" height="25" rx="3" fill="#93C5A5" stroke="#7BA05B" stroke-width="1"/>
-              <rect x="40" y="20" width="25" height="25" rx="3" fill="#E6E6FA" stroke="#D8BFD8" stroke-width="1"/>
-              <!-- Sugar crystals effect -->
-              <circle cx="25" cy="65" r="1" fill="white" opacity="0.8"/>
-              <circle cx="35" cy="70" r="0.8" fill="white" opacity="0.6"/>
-              <circle cx="45" cy="45" r="1" fill="white" opacity="0.8"/>
-              <circle cx="55" cy="50" r="0.8" fill="white" opacity="0.6"/>
-              <circle cx="50" cy="25" r="1" fill="white" opacity="0.8"/>
-              <circle cx="60" cy="35" r="0.8" fill="white" opacity="0.6"/>
-            </svg>
+          <div class="w-12 h-12">
+            <img src="/images/icon.svg" alt="LokumAI Logo - Three Stacked Turkish Delight Cubes" class="w-full h-full" loading="lazy" decoding="async" />
           </div>
           <div>
             <h3 class="text-lg font-bold font-display">LokumAI</h3>

src/components/Header.astro

@@ -7,8 +7,8 @@
       <!-- Logo and Brand -->
       <div class="flex items-center space-x-3">
         <a href="/" class="flex items-center space-x-3 hover:opacity-80 transition-opacity">
-          <div class="w-10 h-10">
-            <img 
+          <div class="w-16 h-16">
+            <img
               src="/images/icon.svg" 
               alt="LokumAI Logo - Three Stacked Turkish Delight Cubes"
               class="w-full h-full object-contain drop-shadow-sm hover:drop-shadow-md transition-all duration-300"

src/pages/about.astro

@@ -100,49 +100,7 @@ import Footer from '../components/Footer.astro';
           <div class="flex flex-col lg:flex-row items-center gap-8">
             <div class="flex-shrink-0">
               <div class="w-48 h-48 mx-auto">
-                <svg viewBox="0 0 100 100" class="w-full h-full drop-shadow-lg">
-                  <!-- Three stacked lokum cubes with enhanced details -->
-                  <defs>
-                    <linearGradient id="pinkCube" x1="0%" y1="0%" x2="100%" y2="100%">
-                      <stop offset="0%" style="stop-color:#FFB6C1"/>
-                      <stop offset="100%" style="stop-color:#FF69B4"/>
-                    </linearGradient>
-                    <linearGradient id="greenCube" x1="0%" y1="0%" x2="100%" y2="100%">
-                      <stop offset="0%" style="stop-color:#93C5A5"/>
-                      <stop offset="100%" style="stop-color:#7BA05B"/>
-                    </linearGradient>
-                    <linearGradient id="purpleCube" x1="0%" y1="0%" x2="100%" y2="100%">
-                      <stop offset="0%" style="stop-color:#E6E6FA"/>
-                      <stop offset="100%" style="stop-color:#D8BFD8"/>
-                    </linearGradient>
-                  </defs>
-                  
-                  <!-- Bottom cube - pink -->
-                  <rect x="15" y="55" width="30" height="30" rx="4" fill="url(#pinkCube)" stroke="#FF69B4" stroke-width="1.5"/>
-                  <!-- Middle cube - green -->
-                  <rect x="25" y="35" width="30" height="30" rx="4" fill="url(#greenCube)" stroke="#7BA05B" stroke-width="1.5"/>
-                  <!-- Top cube - purple -->
-                  <rect x="35" y="15" width="30" height="30" rx="4" fill="url(#purpleCube)" stroke="#D8BFD8" stroke-width="1.5"/>
-                  
-                  <!-- Enhanced sugar crystals -->
-                  <circle cx="20" cy="60" r="2" fill="white" opacity="0.9"/>
-                  <circle cx="35" cy="75" r="1.5" fill="white" opacity="0.7"/>
-                  <circle cx="40" cy="65" r="1.8" fill="white" opacity="0.8"/>
-                  
-                  <circle cx="30" cy="40" r="2" fill="white" opacity="0.9"/>
-                  <circle cx="50" cy="55" r="1.5" fill="white" opacity="0.7"/>
-                  <circle cx="45" cy="45" r="1.8" fill="white" opacity="0.8"/>
-                  
-                  <circle cx="40" cy="20" r="2" fill="white" opacity="0.9"/>
-                  <circle cx="60" cy="35" r="1.5" fill="white" opacity="0.7"/>
-                  <circle cx="55" cy="25" r="1.8" fill="white" opacity="0.8"/>
-                  
-                  <!-- Sparkle effects -->
-                  <path d="M70 40 L72 42 L70 44 L68 42 Z" fill="white" opacity="0.8"/>
-                  <path d="M18 50 L20 52 L18 54 L16 52 Z" fill="white" opacity="0.8"/>
-                  <path d="M75 20 L77 22 L75 24 L73 22 Z" fill="white" opacity="0.8"/>
-                  <path d="M12 35 L14 37 L12 39 L10 37 Z" fill="white" opacity="0.8"/>
-                </svg>
+                <img src="/images/logo-with-background.png" alt="LokumAI Logo - Three Stacked Turkish Delight Cubes" class="w-full h-full drop-shadow-lg" loading="eager" decoding="async" />
               </div>
             </div>