Add custom SVG logo to Claude How To project

Created a professional SVG logo for the project featuring:
- Modern gradient design with code brackets symbol
- Book/guide icon representing learning and documentation
- "Claude How To" branding with subtitle
- Decorative elements and professional color scheme

Added logo to all major documentation files:
- README.md
- INDEX.md
- QUICK_REFERENCE.md
- claude_concepts_guide.md

The logo provides consistent branding across the project and improves visual appeal on GitHub and other markdown viewers.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

claude-howto-logo.svg

@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="800" height="200" viewBox="0 0 800 200" xmlns="http://www.w3.org/2000/svg">
+  <!-- Background gradient -->
+  <defs>
+    <linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#1a1a2e;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#16213e;stop-opacity:1" />
+    </linearGradient>
+
+    <linearGradient id="iconGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#ff6b6b;stop-opacity:1" />
+      <stop offset="50%" style="stop-color:#ee5a6f;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#c44569;stop-opacity:1" />
+    </linearGradient>
+
+    <linearGradient id="textGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#4ecdc4;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#44a08d;stop-opacity:1" />
+    </linearGradient>
+
+    <filter id="glow">
+      <feGaussianBlur stdDeviation="2" result="coloredBlur"/>
+      <feMerge>
+        <feMergeNode in="coloredBlur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+  </defs>
+
+  <!-- Background -->
+  <rect width="800" height="200" rx="20" fill="url(#bgGradient)"/>
+
+  <!-- Icon - Stylized book/guide with code symbol -->
+  <g transform="translate(40, 50)">
+    <!-- Book -->
+    <rect x="0" y="0" width="100" height="100" rx="8" fill="url(#iconGradient)" opacity="0.9"/>
+    <rect x="5" y="5" width="90" height="90" rx="6" fill="#1a1a2e" opacity="0.3"/>
+
+    <!-- Pages effect -->
+    <line x1="15" y1="25" x2="85" y2="25" stroke="#fff" stroke-width="2" opacity="0.3"/>
+    <line x1="15" y1="45" x2="85" y2="45" stroke="#fff" stroke-width="2" opacity="0.3"/>
+    <line x1="15" y1="65" x2="85" y2="65" stroke="#fff" stroke-width="2" opacity="0.3"/>
+
+    <!-- Code brackets -->
+    <text x="25" y="60" font-family="monospace" font-size="40" font-weight="bold" fill="#4ecdc4" filter="url(#glow)">&lt;/&gt;</text>
+
+    <!-- Sparkle -->
+    <circle cx="90" cy="15" r="4" fill="#ffd93d" opacity="0.8"/>
+    <circle cx="95" cy="10" r="2" fill="#ffd93d" opacity="0.6"/>
+  </g>
+
+  <!-- Text -->
+  <g transform="translate(170, 100)">
+    <!-- Main title -->
+    <text x="0" y="0" font-family="Arial, sans-serif" font-size="56" font-weight="bold" fill="url(#textGradient)">
+      Claude How To
+    </text>
+
+    <!-- Subtitle -->
+    <text x="2" y="35" font-family="Arial, sans-serif" font-size="20" fill="#a8b2d1" opacity="0.8">
+      Complete Guide to Claude Code Features
+    </text>
+  </g>
+
+  <!-- Decorative elements -->
+  <circle cx="750" cy="50" r="30" fill="#ff6b6b" opacity="0.1"/>
+  <circle cx="730" cy="150" r="20" fill="#4ecdc4" opacity="0.1"/>
+  <circle cx="770" cy="120" r="15" fill="#ffd93d" opacity="0.1"/>
+
+  <!-- Bottom accent line -->
+  <rect x="40" y="175" width="720" height="3" rx="1.5" fill="url(#textGradient)" opacity="0.5"/>
+</svg>