feat: redesign mobile menu with improved structure and styles

Reviewed-on: #2

src/components/sections/BlogPreview.astro

@@ -39,6 +39,7 @@ const blogPosts = [
             </h2>
             <p class="font-['Instrument_Sans'] theme-secondary text-lg sm:text-xl max-w-3xl mt-4">
               Thoughts, insights, and tutorials on software development and tech.
+<<<<<<< HEAD
               <span class="inline-flex items-center px-3 py-1 ml-2 rounded-full text-xs font-medium bg-black/20 text-white font-['Instrument_Sans']">Coming Soon</span>
             </p>
           </div>
@@ -75,6 +76,44 @@ const blogPosts = [
         {blogPosts.map((post) => (
           <div 
             class="flex flex-col h-full theme-accent border theme-border rounded-xl overflow-hidden opacity-80 group"
+=======
+            </p>
+          </div>
+          <div class="hidden sm:block">
+            <button 
+              class="animate-button inline-flex items-center justify-center gap-2 px-6 py-3 bg-transparent border theme-border theme-text-50 rounded-xl transition-all text-sm tracking-tight font-medium shadow-sm font-['Instrument_Sans'] cursor-not-allowed opacity-75"
+              title="Coming soon!"
+            >
+              View All Posts
+              <svg 
+                class="w-4 h-4" 
+                viewBox="0 0 24 24" 
+                fill="none" 
+                stroke="currentColor" 
+                stroke-width="2"
+                stroke-linecap="round" 
+                stroke-linejoin="round"
+              >
+                <path d="M5 12h14M12 5l7 7-7 7"/>
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+      
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8 relative p-12">
+        <div class="absolute inset-0 backdrop-blur-sm z-10 flex items-center justify-center rounded-xl">
+          <div class="bg-black/80 px-6 py-5 rounded-xl border border-white/20 text-center">
+            <span class="text-xl font-semibold text-white font-['DM_Sans']">Blog Coming Soon!</span>
+            <p class="text-white/80 mt-2 font-['Instrument_Sans']">The blog feature is currently in development.</p>
+          </div>
+        </div>
+        
+        {blogPosts.map((post) => (
+          <a 
+            href={`/blog/${post.slug}`} 
+            class="flex flex-col h-full theme-accent border theme-border rounded-xl overflow-hidden hover:shadow-lg transition-all duration-300 group"
+>>>>>>> 69efdf7 (feat: add portfolio, blog, and contact features)
           >
             <div class="p-6 sm:p-8 flex flex-col h-full">
               <div class="flex-grow space-y-4">
@@ -84,16 +123,26 @@ const blogPosts = [
                       <span class="inline-flex px-2.5 py-1 rounded-lg text-xs font-medium theme-text-70 bg-black/10 font-['Instrument_Sans']">{tag}</span>
                     ))}
                   </div>
+<<<<<<< HEAD
                   <h3 class="text-xl font-bold theme-primary font-['DM_Sans']">{post.title}</h3>
+=======
+                  <h3 class="text-xl font-bold theme-primary group-hover:underline decoration-1 underline-offset-2 font-['DM_Sans']">{post.title}</h3>
+>>>>>>> 69efdf7 (feat: add portfolio, blog, and contact features)
                 </div>
                 <p class="theme-secondary font-['Instrument_Sans'] text-sm sm:text-base leading-relaxed">{post.excerpt}</p>
               </div>
               
               <div class="mt-6 pt-6 border-t theme-border flex items-center justify-between">
                 <span class="text-sm theme-text-70 font-['Instrument_Sans']">{post.date}</span>
+<<<<<<< HEAD
                 <div class="p-2 rounded-full theme-accent">
                   <svg 
                     class="w-4 h-4 theme-primary" 
+=======
+                <div class="p-2 rounded-full theme-accent group-hover:bg-opacity-100 transition-all">
+                  <svg 
+                    class="w-4 h-4 theme-primary transform group-hover:translate-x-1 transition-transform" 
+>>>>>>> 69efdf7 (feat: add portfolio, blog, and contact features)
                     viewBox="0 0 24 24" 
                     fill="none" 
                     stroke="currentColor" 
@@ -104,6 +153,7 @@ const blogPosts = [
                 </div>
               </div>
             </div>
+<<<<<<< HEAD
           </div>
         ))}
       </div>
@@ -127,6 +177,11 @@ const blogPosts = [
           </svg>
         </button>
       </div>
+=======
+          </a>
+        ))}
+      </div>
+>>>>>>> 69efdf7 (feat: add portfolio, blog, and contact features)
     </FadeIn>
   </div>
 </section>