diff --git a/assets/dividers/animated/unique_effects/divider_arc_reactor.svg b/assets/dividers/animated/unique_effects/divider_arc_reactor.svg
index b0fa384..4a100f4 100644
--- a/assets/dividers/animated/unique_effects/divider_arc_reactor.svg
+++ b/assets/dividers/animated/unique_effects/divider_arc_reactor.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 60" width="1000" height="60">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 60" width="100%" height="60" preserveAspectRatio="none">
   <defs>
     <filter id="glow">
       <feGaussianBlur stdDeviation="3" result="blur"/>
@@ -9,10 +9,12 @@
     </filter>
   </defs>
 
-  <line x1="0" y1="30" x2="330" y2="30" stroke="#1e293b" stroke-width="2"/>
-  <line x1="470" y1="30" x2="800" y2="30" stroke="#1e293b" stroke-width="2"/>
+  <!-- full width lines -->
+  <line x1="0" y1="30" x2="450" y2="30" stroke="#1e293b" stroke-width="2"/>
+  <line x1="550" y1="30" x2="1000" y2="30" stroke="#1e293b" stroke-width="2"/>
 
-  <g transform="translate(400,30)" filter="url(#glow)">
+  <!-- perfectly centered -->
+  <g transform="translate(500,30)" filter="url(#glow)">
     <circle r="16" fill="none" stroke="#22d3ee" stroke-width="2"/>
     <circle r="8" fill="#22d3ee" opacity="0.9">
       <animate attributeName="r" values="8;10;8" dur="1.8s" repeatCount="indefinite"/>
diff --git a/assets/dividers/animated/unique_effects/divider_celestial_gate.svg b/assets/dividers/animated/unique_effects/divider_celestial_gate.svg
index 9f710f8..3593504 100644
--- a/assets/dividers/animated/unique_effects/divider_celestial_gate.svg
+++ b/assets/dividers/animated/unique_effects/divider_celestial_gate.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 90" width="1000" height="90">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 90" width="100%" height="90" preserveAspectRatio="none">
   <defs>
     <filter id="gateglow">
       <feGaussianBlur stdDeviation="4" result="b"/>
@@ -9,10 +9,12 @@
     </filter>
   </defs>
 
-  <line x1="0" y1="45" x2="290" y2="45" stroke="#334155" stroke-width="2"/>
-  <line x1="510" y1="45" x2="800" y2="45" stroke="#334155" stroke-width="2"/>
+  <!-- full width lines -->
+  <line x1="0" y1="45" x2="450" y2="45" stroke="#334155" stroke-width="2"/>
+  <line x1="550" y1="45" x2="1000" y2="45" stroke="#334155" stroke-width="2"/>
 
-  <g transform="translate(400,45)" filter="url(#gateglow)">
+  <!-- centered -->
+  <g transform="translate(500,45)" filter="url(#gateglow)">
     <ellipse rx="42" ry="22" fill="none" stroke="#22d3ee" stroke-width="2"/>
     <ellipse rx="24" ry="42" fill="none" stroke="#a855f7" stroke-width="2"/>
     <circle r="6" fill="#f8fafc">
diff --git a/assets/dividers/animated/unique_effects/divider_pulse_wave.svg b/assets/dividers/animated/unique_effects/divider_pulse_wave.svg
new file mode 100644
index 0000000..28b1c7f
--- /dev/null
+++ b/assets/dividers/animated/unique_effects/divider_pulse_wave.svg
@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" width="100%" height="120">
+  <defs>
+    <linearGradient id="plasma" x1="0%" x2="100%">
+      <stop offset="0%" stop-color="#22d3ee"/>
+      <stop offset="50%" stop-color="#67e8f9"/>
+      <stop offset="100%" stop-color="#8b5cf6"/>
+    </linearGradient>
+
+    <filter id="glow">
+      <feGaussianBlur stdDeviation="6"/>
+    </filter>
+  </defs>
+
+  <path d="M0 60 Q200 20 400 60 T800 60 T1200 60"
+        stroke="url(#plasma)"
+        stroke-width="4"
+        fill="none"
+        filter="url(#glow)"
+        opacity="0.8">
+    <animate attributeName="d"
+      values="
+      M0 60 Q200 20 400 60 T800 60 T1200 60;
+      M0 60 Q200 100 400 60 T800 60 T1200 60;
+      M0 60 Q200 20 400 60 T800 60 T1200 60"
+      dur="6s"
+      repeatCount="indefinite"/>
+  </path>
+</svg>
\ No newline at end of file
diff --git a/assets/headers/animated/header_collaboration.svg b/assets/headers/animated/header_collaboration.svg
new file mode 100644
index 0000000..d7a35da
--- /dev/null
+++ b/assets/headers/animated/header_collaboration.svg
@@ -0,0 +1,109 @@
+<svg width="1600" height="320" viewBox="0 0 1600 320" fill="none" xmlns="http://www.w3.org/2000/svg">
+
+  <defs>
+    <linearGradient id="bgGrad" x1="0" y1="0" x2="1600" y2="320">
+      <stop offset="0%" stop-color="#07111F"/>
+      <stop offset="50%" stop-color="#0B1F35"/>
+      <stop offset="100%" stop-color="#07111F"/>
+    </linearGradient>
+
+    <linearGradient id="lineGrad" x1="0" y1="0" x2="1600" y2="0">
+      <stop offset="0%" stop-color="#00E5FF" stop-opacity="0"/>
+      <stop offset="50%" stop-color="#8B5CF6"/>
+      <stop offset="100%" stop-color="#00E5FF" stop-opacity="0"/>
+
+      <!-- animated gradient -->
+      <animateTransform attributeName="gradientTransform"
+                        type="translate"
+                        from="-400 0"
+                        to="400 0"
+                        dur="6s"
+                        repeatCount="indefinite"/>
+    </linearGradient>
+
+    <linearGradient id="textGrad" x1="500" y1="90" x2="1100" y2="230">
+      <stop offset="0%" stop-color="#E0F2FE"/>
+      <stop offset="50%" stop-color="#67E8F9"/>
+      <stop offset="100%" stop-color="#A78BFA"/>
+    </linearGradient>
+
+    <filter id="glow">
+      <feGaussianBlur stdDeviation="4" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+
+    <filter id="softGlow">
+      <feGaussianBlur stdDeviation="10" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+
+  </defs>
+
+  <!-- Background -->
+  <rect width="1600" height="320" rx="28" fill="url(#bgGrad)"/>
+
+  <!-- Animated lines -->
+  <path d="M180 92H1420" stroke="url(#lineGrad)" stroke-width="2" filter="url(#glow)"/>
+  <path d="M220 230H1380" stroke="url(#lineGrad)" stroke-width="2" filter="url(#glow)"/>
+
+  <!-- Pulsing nodes -->
+  <circle cx="220" cy="92" r="4" fill="#22D3EE">
+    <animate attributeName="r" values="3;6;3" dur="2s" repeatCount="indefinite"/>
+  </circle>
+
+  <circle cx="1380" cy="230" r="4" fill="#A78BFA">
+    <animate attributeName="r" values="3;6;3" dur="2.5s" repeatCount="indefinite"/>
+  </circle>
+
+  <!-- Collaboration icon (breathing glow) -->
+  <g filter="url(#glow)">
+    <circle cx="800" cy="110" r="6" fill="#22D3EE"/>
+    <circle cx="770" cy="140" r="6" fill="#22D3EE"/>
+    <circle cx="830" cy="140" r="6" fill="#22D3EE"/>
+
+    <line x1="800" y1="110" x2="770" y2="140" stroke="#22D3EE" stroke-width="2"/>
+    <line x1="800" y1="110" x2="830" y2="140" stroke="#22D3EE" stroke-width="2"/>
+    <line x1="770" y1="140" x2="830" y2="140" stroke="#22D3EE" stroke-width="2"/>
+
+    <animateTransform attributeName="transform"
+                      type="scale"
+                      values="1;1.05;1"
+                      dur="3s"
+                      repeatCount="indefinite"/>
+  </g>
+
+  <!-- Subtitle -->
+  <text x="800" y="170"
+        text-anchor="middle"
+        font-family="Segoe UI, Arial, sans-serif"
+        font-size="24"
+        letter-spacing="6"
+        fill="#67E8F9"
+        opacity="0.85">
+    OPEN • BUILD • CONNECT
+  </text>
+
+  <!-- Main title with glow pulse -->
+  <text x="800" y="240"
+        text-anchor="middle"
+        font-family="Segoe UI, Arial, sans-serif"
+        font-size="64"
+        font-weight="800"
+        letter-spacing="5"
+        fill="url(#textGrad)"
+        filter="url(#softGlow)">
+    COLLABORATION
+
+    <animate attributeName="opacity"
+             values="0.85;1;0.85"
+             dur="4s"
+             repeatCount="indefinite"/>
+  </text>
+
+</svg>
\ No newline at end of file
diff --git a/assets/headers/animated/header_collaboration_premium.svg b/assets/headers/animated/header_collaboration_premium.svg
new file mode 100644
index 0000000..5e229d0
--- /dev/null
+++ b/assets/headers/animated/header_collaboration_premium.svg
@@ -0,0 +1,161 @@
+<svg width="1600" height="320" viewBox="0 0 1600 320" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bgGrad" x1="0" y1="0" x2="1600" y2="320">
+      <stop offset="0%" stop-color="#07111F"/>
+      <stop offset="50%" stop-color="#0B1F35"/>
+      <stop offset="100%" stop-color="#07111F"/>
+    </linearGradient>
+
+    <linearGradient id="lineGrad" x1="160" y1="0" x2="1440" y2="0">
+      <stop offset="0%" stop-color="#00E5FF" stop-opacity="0"/>
+      <stop offset="20%" stop-color="#00E5FF"/>
+      <stop offset="50%" stop-color="#8B5CF6"/>
+      <stop offset="80%" stop-color="#00E5FF"/>
+      <stop offset="100%" stop-color="#00E5FF" stop-opacity="0"/>
+
+      <!-- flowing energy -->
+      <animateTransform attributeName="gradientTransform"
+                        type="translate"
+                        values="-200 0;200 0;-200 0"
+                        dur="6s"
+                        repeatCount="indefinite"/>
+    </linearGradient>
+
+    <linearGradient id="textGrad" x1="500" y1="90" x2="1100" y2="230">
+      <stop offset="0%" stop-color="#E0F2FE"/>
+      <stop offset="50%" stop-color="#67E8F9"/>
+      <stop offset="100%" stop-color="#A78BFA"/>
+    </linearGradient>
+
+    <filter id="glow">
+      <feGaussianBlur stdDeviation="6" result="blur">
+        <animate attributeName="stdDeviation" values="5;7;5" dur="3s" repeatCount="indefinite"/>
+      </feGaussianBlur>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+
+    <filter id="softGlow">
+      <feGaussianBlur stdDeviation="12" result="blur">
+        <animate attributeName="stdDeviation" values="10;14;10" dur="4s" repeatCount="indefinite"/>
+      </feGaussianBlur>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+
+    <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
+      <path d="M 40 0 L 0 0 0 40" stroke="#38BDF8" stroke-opacity="0.08" stroke-width="1">
+        <animateTransform attributeName="transform"
+                          type="translate"
+                          values="0 0;40 40;0 0"
+                          dur="20s"
+                          repeatCount="indefinite"/>
+      </path>
+    </pattern>
+  </defs>
+
+  <rect width="1600" height="320" rx="28" fill="url(#bgGrad)"/>
+  <rect width="1600" height="320" rx="28" fill="url(#grid)"/>
+
+  <!-- Pulsing nodes -->
+  <circle cx="220" cy="78" r="3" fill="#22D3EE" filter="url(#glow)">
+    <animate attributeName="r" values="2.5;4;2.5" dur="2s" repeatCount="indefinite"/>
+  </circle>
+
+  <circle cx="1320" cy="84" r="3" fill="#A78BFA" filter="url(#glow)">
+    <animate attributeName="r" values="2.5;4;2.5" dur="2.5s" repeatCount="indefinite"/>
+  </circle>
+
+  <circle cx="1420" cy="242" r="2.5" fill="#22D3EE" filter="url(#glow)">
+    <animate attributeName="r" values="2;3.5;2" dur="2.2s" repeatCount="indefinite"/>
+  </circle>
+
+  <circle cx="280" cy="252" r="2.5" fill="#A78BFA" filter="url(#glow)">
+    <animate attributeName="r" values="2;3.5;2" dur="2.7s" repeatCount="indefinite"/>
+  </circle>
+
+  <!-- Lines (now animated via gradient) -->
+  <path d="M180 92H540" stroke="url(#lineGrad)" stroke-width="2" filter="url(#glow)"/>
+  <path d="M1060 92H1420" stroke="url(#lineGrad)" stroke-width="2" filter="url(#glow)"/>
+  <path d="M220 230H520" stroke="url(#lineGrad)" stroke-width="2" filter="url(#glow)"/>
+  <path d="M1080 230H1380" stroke="url(#lineGrad)" stroke-width="2" filter="url(#glow)"/>
+
+  <!-- Breathing boxes -->
+  <g filter="url(#softGlow)">
+    <rect x="130" y="70" width="84" height="84" rx="16" stroke="#22D3EE" stroke-width="2">
+      <animate attributeName="opacity" values="0.7;1;0.7" dur="3s" repeatCount="indefinite"/>
+    </rect>
+
+    <rect x="1386" y="166" width="84" height="84" rx="16" stroke="#A78BFA" stroke-width="2">
+      <animate attributeName="opacity" values="0.7;1;0.7" dur="3.5s" repeatCount="indefinite"/>
+    </rect>
+
+    <rect x="1370" y="50" width="42" height="42" rx="10" stroke="#22D3EE" stroke-width="1.5">
+      <animate attributeName="opacity" values="0.4;0.8;0.4" dur="4s" repeatCount="indefinite"/>
+    </rect>
+
+    <rect x="188" y="210" width="42" height="42" rx="10" stroke="#A78BFA" stroke-width="1.5">
+      <animate attributeName="opacity" values="0.4;0.8;0.4" dur="4.2s" repeatCount="indefinite"/>
+    </rect>
+  </g>
+
+  <!-- Subtle network pulse -->
+  <g opacity="0.85" filter="url(#glow)">
+    <circle cx="172" cy="112" r="6" fill="#22D3EE"/>
+    <circle cx="138" cy="146" r="6" fill="#22D3EE"/>
+    <circle cx="206" cy="146" r="6" fill="#22D3EE"/>
+
+    <animateTransform attributeName="transform"
+                      type="scale"
+                      values="1;1.05;1"
+                      dur="3s"
+                      repeatCount="indefinite"/>
+  </g>
+
+  <g opacity="0.85" filter="url(#glow)">
+    <circle cx="1428" cy="208" r="6" fill="#A78BFA"/>
+    <circle cx="1394" cy="242" r="6" fill="#A78BFA"/>
+    <circle cx="1462" cy="242" r="6" fill="#A78BFA"/>
+
+    <animateTransform attributeName="transform"
+                      type="scale"
+                      values="1;1.05;1"
+                      dur="3.5s"
+                      repeatCount="indefinite"/>
+  </g>
+
+  <!-- Subtitle -->
+  <text x="800" y="138"
+        text-anchor="middle"
+        font-family="Segoe UI, Arial, sans-serif"
+        font-size="26"
+        font-weight="600"
+        letter-spacing="7"
+        fill="#67E8F9">
+    OPEN • BUILD • CONNECT
+  </text>
+
+  <!-- Title shimmer -->
+  <text x="800" y="208"
+        text-anchor="middle"
+        font-family="Segoe UI, Arial, sans-serif"
+        font-size="72"
+        font-weight="800"
+        letter-spacing="5"
+        fill="url(#textGrad)"
+        filter="url(#softGlow)">
+    COLLABORATION
+
+    <animate attributeName="opacity"
+             values="0.85;1;0.85"
+             dur="4s"
+             repeatCount="indefinite"/>
+  </text>
+
+  <rect x="540" y="228" width="520" height="2" rx="1" fill="url(#lineGrad)" filter="url(#glow)"/>
+
+</svg>
\ No newline at end of file
diff --git a/assets/headers/static/header_collaboration_static.svg b/assets/headers/static/header_collaboration_static.svg
new file mode 100644
index 0000000..abff608
--- /dev/null
+++ b/assets/headers/static/header_collaboration_static.svg
@@ -0,0 +1,105 @@
+<svg width="1600" height="320" viewBox="0 0 1600 320" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bgGrad" x1="0" y1="0" x2="1600" y2="320" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#07111F"/>
+      <stop offset="50%" stop-color="#0B1F35"/>
+      <stop offset="100%" stop-color="#07111F"/>
+    </linearGradient>
+
+    <linearGradient id="lineGrad" x1="160" y1="0" x2="1440" y2="0" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#00E5FF" stop-opacity="0"/>
+      <stop offset="20%" stop-color="#00E5FF"/>
+      <stop offset="50%" stop-color="#8B5CF6"/>
+      <stop offset="80%" stop-color="#00E5FF"/>
+      <stop offset="100%" stop-color="#00E5FF" stop-opacity="0"/>
+    </linearGradient>
+
+    <linearGradient id="textGrad" x1="500" y1="90" x2="1100" y2="230" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#E0F2FE"/>
+      <stop offset="50%" stop-color="#67E8F9"/>
+      <stop offset="100%" stop-color="#A78BFA"/>
+    </linearGradient>
+
+    <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur stdDeviation="6" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+
+    <filter id="softGlow" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur stdDeviation="12" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+
+    <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
+      <path d="M 40 0 L 0 0 0 40" stroke="#38BDF8" stroke-opacity="0.08" stroke-width="1"/>
+    </pattern>
+  </defs>
+
+  <rect width="1600" height="320" rx="28" fill="url(#bgGrad)"/>
+  <rect width="1600" height="320" rx="28" fill="url(#grid)"/>
+
+  <circle cx="220" cy="78" r="3" fill="#22D3EE" filter="url(#glow)"/>
+  <circle cx="1320" cy="84" r="3" fill="#A78BFA" filter="url(#glow)"/>
+  <circle cx="1420" cy="242" r="2.5" fill="#22D3EE" filter="url(#glow)"/>
+  <circle cx="280" cy="252" r="2.5" fill="#A78BFA" filter="url(#glow)"/>
+
+  <path d="M180 92H540" stroke="url(#lineGrad)" stroke-width="2" filter="url(#glow)"/>
+  <path d="M1060 92H1420" stroke="url(#lineGrad)" stroke-width="2" filter="url(#glow)"/>
+  <path d="M220 230H520" stroke="url(#lineGrad)" stroke-width="2" filter="url(#glow)"/>
+  <path d="M1080 230H1380" stroke="url(#lineGrad)" stroke-width="2" filter="url(#glow)"/>
+
+  <g filter="url(#softGlow)">
+    <rect x="130" y="70" width="84" height="84" rx="16" stroke="#22D3EE" stroke-width="2" stroke-opacity="0.9"/>
+    <rect x="1386" y="166" width="84" height="84" rx="16" stroke="#A78BFA" stroke-width="2" stroke-opacity="0.9"/>
+    <rect x="1370" y="50" width="42" height="42" rx="10" stroke="#22D3EE" stroke-width="1.5" stroke-opacity="0.6"/>
+    <rect x="188" y="210" width="42" height="42" rx="10" stroke="#A78BFA" stroke-width="1.5" stroke-opacity="0.6"/>
+  </g>
+
+  <g opacity="0.85" filter="url(#glow)">
+    <circle cx="172" cy="112" r="6" fill="#22D3EE"/>
+    <circle cx="138" cy="146" r="6" fill="#22D3EE"/>
+    <circle cx="206" cy="146" r="6" fill="#22D3EE"/>
+    <line x1="172" y1="112" x2="138" y2="146" stroke="#22D3EE" stroke-width="2"/>
+    <line x1="172" y1="112" x2="206" y2="146" stroke="#22D3EE" stroke-width="2"/>
+    <line x1="138" y1="146" x2="206" y2="146" stroke="#22D3EE" stroke-width="2"/>
+  </g>
+
+  <g opacity="0.85" filter="url(#glow)">
+    <circle cx="1428" cy="208" r="6" fill="#A78BFA"/>
+    <circle cx="1394" cy="242" r="6" fill="#A78BFA"/>
+    <circle cx="1462" cy="242" r="6" fill="#A78BFA"/>
+    <line x1="1428" y1="208" x2="1394" y2="242" stroke="#A78BFA" stroke-width="2"/>
+    <line x1="1428" y1="208" x2="1462" y2="242" stroke="#A78BFA" stroke-width="2"/>
+    <line x1="1394" y1="242" x2="1462" y2="242" stroke="#A78BFA" stroke-width="2"/>
+  </g>
+
+  <text x="800" y="138"
+        text-anchor="middle"
+        font-family="Segoe UI, Arial, sans-serif"
+        font-size="26"
+        font-weight="600"
+        letter-spacing="7"
+        fill="#67E8F9"
+        opacity="0.9">
+    OPEN • BUILD • CONNECT
+  </text>
+
+  <text x="800" y="208"
+        text-anchor="middle"
+        font-family="Segoe UI, Arial, sans-serif"
+        font-size="72"
+        font-weight="800"
+        letter-spacing="5"
+        fill="url(#textGrad)"
+        filter="url(#softGlow)">
+    COLLABORATION
+  </text>
+
+  <rect x="540" y="228" width="520" height="2" rx="1" fill="url(#lineGrad)" filter="url(#glow)"/>
+</svg>
\ No newline at end of file
diff --git a/assets/visuals/ai_domains.svg b/assets/visuals/ai_domains.svg
new file mode 100644
index 0000000..e779dff
--- /dev/null
+++ b/assets/visuals/ai_domains.svg
@@ -0,0 +1,128 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 650" width="100%" height="100%">
+  <defs>
+
+    <!-- background -->
+    <radialGradient id="bg" cx="50%" cy="50%" r="75%">
+      <stop offset="0%" stop-color="#0b1220"/>
+      <stop offset="100%" stop-color="#020617"/>
+    </radialGradient>
+
+    <!-- core -->
+    <radialGradient id="coreGrad" cx="50%" cy="50%" r="60%">
+      <stop offset="0%" stop-color="#ffffff"/>
+      <stop offset="25%" stop-color="#67e8f9"/>
+      <stop offset="60%" stop-color="#8b5cf6"/>
+      <stop offset="100%" stop-color="#020617"/>
+    </radialGradient>
+
+    <!-- link -->
+    <linearGradient id="linkGrad" x1="0%" y1="0%" x2="100%">
+      <stop offset="0%" stop-color="#22d3ee" stop-opacity="0.1"/>
+      <stop offset="50%" stop-color="#22d3ee" stop-opacity="0.9"/>
+      <stop offset="100%" stop-color="#8b5cf6" stop-opacity="0.1"/>
+    </linearGradient>
+
+    <!-- glow -->
+    <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur stdDeviation="8"/>
+    </filter>
+
+    <filter id="bigGlow" x="-80%" y="-80%" width="260%" height="260%">
+      <feGaussianBlur stdDeviation="18"/>
+    </filter>
+
+    <style>
+      .title {
+        font: 700 26px 'Segoe UI', Arial;
+        fill: #e2e8f0;
+        letter-spacing: 2px;
+      }
+      .nodeText {
+        font: 600 12px 'Segoe UI', Arial;
+        fill: #e2e8f0;
+      }
+    </style>
+  </defs>
+
+  <!-- background -->
+  <rect width="500" height="650" fill="url(#bg)"/>
+
+  <!-- ambient energy -->
+  <g opacity="0.25" filter="url(#bigGlow)">
+    <circle cx="250" cy="320" r="200" fill="#22d3ee" opacity="0.05">
+      <animate attributeName="r" values="190;220;190" dur="8s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="250" cy="320" r="160" fill="#8b5cf6" opacity="0.07">
+      <animate attributeName="r" values="150;180;150" dur="6s" repeatCount="indefinite"/>
+    </circle>
+  </g>
+
+  <!-- main system -->
+  <g transform="translate(250 320)">
+
+    <!-- rotating rings -->
+    <circle r="180" fill="none" stroke="#1e293b" stroke-width="2"/>
+    <circle r="150" fill="none" stroke="#22d3ee" stroke-opacity="0.25" stroke-dasharray="6 16">
+      <animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="28s" repeatCount="indefinite"/>
+    </circle>
+    <circle r="120" fill="none" stroke="#8b5cf6" stroke-opacity="0.25" stroke-dasharray="4 14">
+      <animateTransform attributeName="transform" type="rotate" from="360" to="0" dur="20s" repeatCount="indefinite"/>
+    </circle>
+
+    <!-- connections -->
+    <g stroke="url(#linkGrad)" stroke-width="2.5" stroke-linecap="round">
+      <line x1="0" y1="0" x2="0" y2="-200"/>
+      <line x1="0" y1="0" x2="170" y2="-120"/>
+      <line x1="0" y1="0" x2="180" y2="70"/>
+      <line x1="0" y1="0" x2="0" y2="200"/>
+      <line x1="0" y1="0" x2="-180" y2="70"/>
+      <line x1="0" y1="0" x2="-170" y2="-120"/>
+    </g>
+
+    <!-- signal packets -->
+    <circle r="3" fill="#ffffff">
+      <animateMotion dur="2.8s" repeatCount="indefinite"
+        path="M0,0 C0,-100 0,-150 0,-200"/>
+    </circle>
+
+    <circle r="3" fill="#67e8f9">
+      <animateMotion dur="3.2s" repeatCount="indefinite"
+        path="M0,0 C80,-60 120,-100 170,-120"/>
+    </circle>
+
+    <!-- core -->
+    <g filter="url(#glow)">
+      <circle r="70" fill="url(#coreGrad)">
+        <animate attributeName="r" values="65;85;65" dur="4s" repeatCount="indefinite"/>
+      </circle>
+      <circle r="28" fill="#ffffff"/>
+    </g>
+
+    <!-- nodes -->
+    <g filter="url(#glow)">
+      <circle cx="0" cy="-200" r="16" fill="#67e8f9">
+        <animate attributeName="r" values="14;18;14" dur="4s" repeatCount="indefinite"/>
+      </circle>
+      <circle cx="170" cy="-120" r="14" fill="#8b5cf6"/>
+      <circle cx="180" cy="70" r="14" fill="#8b5cf6"/>
+      <circle cx="0" cy="200" r="16" fill="#67e8f9"/>
+      <circle cx="-180" cy="70" r="14" fill="#8b5cf6"/>
+      <circle cx="-170" cy="-120" r="14" fill="#8b5cf6"/>
+    </g>
+
+  </g>
+
+  <!-- labels -->
+  <text x="250" y="90" text-anchor="middle" class="nodeText">ML / DL</text>
+  <text x="400" y="200" class="nodeText">GenAI</text>
+  <text x="410" y="420" class="nodeText">Multi-Agent</text>
+  <text x="250" y="610" text-anchor="middle" class="nodeText">RL</text>
+  <text x="40" y="420" class="nodeText">MLOps</text>
+  <text x="40" y="200" class="nodeText">Robotics</text>
+
+  <!-- title -->
+  <text x="250" y="45" text-anchor="middle" class="title">
+    AI DOMAINS
+  </text>
+
+</svg>
\ No newline at end of file
diff --git a/templates/ml-project.md b/templates/ml-project.md
index e69de29..0fab3c7 100644
--- a/templates/ml-project.md
+++ b/templates/ml-project.md
@@ -0,0 +1,48 @@
+
+
+<p align="center">
+  <img src="https://github-readme-activity-graph.vercel.app/graph?username=HiradEmami&theme=react-dark" />
+</p>
+
+<p align="center">
+  <img src="https://github-readme-stats.vercel.app/api/top-langs/?username=HiradEmami&layout=compact&theme=radical" />
+</p>
+
+<p align="center">
+  <img src="https://github-readme-stats.vercel.app/api?username=HiradEmami&show_icons=true&theme=radical" />
+</p>
+
+
+
+<p align="center">
+  <img src="https://github-readme-activity-graph.vercel.app/graph?username=HiradEmami&theme=react-dark" />
+</p>
+
+<p align="center">
+  <img src="https://github-readme-stats.vercel.app/api/top-langs/?username=HiradEmami&layout=compact&theme=radical" />
+</p>
+
+<p align="center">
+  <img src="https://img.shields.io/badge/Python-3.12-blue?style=for-the-badge" />
+  <img src="https://img.shields.io/badge/MLOps-System-purple?style=for-the-badge" />
+  <img src="https://img.shields.io/badge/Status-Active-success?style=for-the-badge" />
+</p>
+
+<img src="https://github.com/HiradEmami/readme-ux-kit/actions/workflows/semantic_release.yml/badge.svg" />
+
+<h2 align="center">📦 Repository Highlights</h2>
+
+<p align="center">
+  <img src="https://github-readme-stats.vercel.app/api/pin/?username=HiradEmami&repo=future-iran-ai-think-tank&theme=radical" />
+  <img src="https://github-readme-stats.vercel.app/api/pin/?username=HiradEmami&repo=ThirtyoneCard&theme=radical" />
+</p>
+
+<p align="center">
+  <img src="https://github-readme-stats.vercel.app/api/pin/?username=HiradEmami&repo=readme-ux-kit&theme=radical" />
+  <img src="https://github-readme-stats.vercel.app/api/pin/?username=HiradEmami&repo=MARL&theme=radical" />
+</p>
+
+<p align="center">
+  <img src="https://github-readme-stats.vercel.app/api/pin/?username=HiradEmami&repo=SpaceInvadersModel&theme=radical" />
+  <img src="https://github-readme-stats.vercel.app/api/pin/?username=PLAYERUNKNOWN-Productions&repo=research-paperops&theme=radical" />
+</p>
\ No newline at end of file
diff --git a/templates/open-source-lib.md b/templates/open-source-lib.md
index e69de29..d7adf74 100644
--- a/templates/open-source-lib.md
+++ b/templates/open-source-lib.md
@@ -0,0 +1,14 @@
+> [!NOTE]  
+> Highlights information that users should take into account, even when skimming.
+
+> [!TIP]
+> Optional information to help a user be more successful.
+
+> [!IMPORTANT]  
+> Crucial information necessary for users to succeed.
+
+> [!WARNING]  
+> Critical content demanding immediate user attention due to potential risks.
+
+> [!CAUTION]
+> Negative potential consequences of an action.
\ No newline at end of file