feat(sections): add Themes section

Author: usmonovshohruxmirzo

src/components/sections/Themes.astro

@@ -0,0 +1,45 @@
+<section id="themes" class="py-16 bg-[#1a1a1a]">
+  <div class="max-w-7xl mx-auto">
+    <h2 class="text-4xl md:text-5xl font-bold text-white text-center mb-12">Available Themes</h2>
+    
+    <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+      
+      <div class="bg-[#222222]/80 backdrop-blur-md rounded-2xl p-6 border border-white/10 hover:scale-105 transition-transform duration-300 shadow-lg">
+        <h3 class="text-xl font-semibold text-white mb-2">Sunset</h3>
+        <p class="text-gray-400 text-sm mb-4">Vibrant red-orange theme</p>
+        <img src="/app.png" alt="Sunset Theme Preview" class="rounded-lg w-full h-48 object-cover">
+      </div>
+
+      <div class="bg-[#222222]/80 backdrop-blur-md rounded-2xl p-6 border border-white/10 hover:scale-105 transition-transform duration-300 shadow-lg">
+        <h3 class="text-xl font-semibold text-white mb-2">Oceanic</h3>
+        <p class="text-gray-400 text-sm mb-4">Cool, deep blue shades</p>
+        <img src="/app.png" alt="Oceanic Theme Preview" class="rounded-lg w-full h-48 object-cover">
+      </div>
+
+      <div class="bg-[#222222]/80 backdrop-blur-md rounded-2xl p-6 border border-white/10 hover:scale-105 transition-transform duration-300 shadow-lg">
+        <h3 class="text-xl font-semibold text-white mb-2">Violet</h3>
+        <p class="text-gray-400 text-sm mb-4">Rich purple gradients</p>
+        <img src="/app.png" alt="Violet Theme Preview" class="rounded-lg w-full h-48 object-cover">
+      </div>
+
+      <div class="bg-[#222222]/80 backdrop-blur-md rounded-2xl p-6 border border-white/10 hover:scale-105 transition-transform duration-300 shadow-lg">
+        <h3 class="text-xl font-semibold text-white mb-2">Emerald</h3>
+        <p class="text-gray-400 text-sm mb-4">Fresh green tones</p>
+        <img src="/app.png" alt="Emerald Theme Preview" class="rounded-lg w-full h-48 object-cover">
+      </div>
+
+      <div class="bg-[#222222]/80 backdrop-blur-md rounded-2xl p-6 border border-white/10 hover:scale-105 transition-transform duration-300 shadow-lg">
+        <h3 class="text-xl font-semibold text-white mb-2">Amber</h3>
+        <p class="text-gray-400 text-sm mb-4">Bright yellow-orange gradient</p>
+        <img src="/app.png" alt="Amber Theme Preview" class="rounded-lg w-full h-48 object-cover">
+      </div>
+
+      <div class="bg-[#222222]/80 backdrop-blur-md rounded-2xl p-6 border border-white/10 hover:scale-105 transition-transform duration-300 shadow-lg">
+        <h3 class="text-xl font-semibold text-white mb-2">Midnight</h3>
+        <p class="text-gray-400 text-sm mb-4">Dark sleek theme with subtle highlights</p>
+        <img src="/app.png" alt="Midnight Theme Preview" class="rounded-lg w-full h-48 object-cover">
+      </div>
+
+    </div>
+  </div>
+</section>