styling updates - blog landing and posts (#67)

Author: nahiyankhan

src/components/Header.astro

@@ -8,7 +8,7 @@ import { isActivePage } from '@/lib/utils';
 const currentPath = Astro.url.pathname;
 ---
 
-<header class="sticky top-0 z-50 w-full bg-background/95 backdrop-blur-sm supports-[backdrop-filter]:bg-background/60">
+<header class="sticky top-0 z-50 w-full bg-background/95 backdrop-blur-sm border-b supports-[backdrop-filter]:bg-background/60">
   <div class="flex h-16 items-center gap-8 px-6">
     <!-- Left Section: Logo + Navigation -->
     <div class="flex items-center gap-8 whitespace-nowrap">
@@ -23,7 +23,7 @@ const currentPath = Astro.url.pathname;
             href={getUrlRelativeToBase(item.href)}
             class={`relative py-2 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground whitespace-nowrap ${
               isActivePage(item.href, currentPath) 
-                ? 'text-foreground after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-primary after:rounded-sm' 
+                ? 'text-foreground after:absolute after:top-12 after:left-0 after:right-0 after:h-0.5 after:bg-primary after:rounded-sm' 
                 : ''
             }`}
           >

src/components/block/CTASection.astro

@@ -33,7 +33,7 @@ const {
   secondaryButtonText,
   secondaryButtonHref = "#",
   secondaryButtonIconName,
-  layout = 'centered',
+  layout = 'minimal',
   isDark = false,
   descriptionClasses = `text-xl leading-relaxed m-0 ${isDark ? "text-muted-background" : "text-muted-foreground"}`,
   className = '',
@@ -163,10 +163,15 @@ const sectionClasses = [
       <div class="flex flex-col content-width-responsive">
         <div class="text-content mb-8">
           {tagline && (
-            <h5 class="uppercase text-left mb-0">
-              {tagline}
-            </h5>
-          )}
+          <div class="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium bg-muted text-foreground border border-border w-fit">
+            {taglineIconName && (
+              <div class="pr-2">
+                <Icon name={taglineIconName} class="w-4 h-4"/>
+              </div>
+            )}
+            {tagline}
+          </div>
+        )}
 
           {title && (
             <h1 class="text-left mb-0 mt-0">
@@ -175,9 +180,7 @@ const sectionClasses = [
           )}
 
           {description && (
-            <h3 class="text-left mb-0 mt-3">
-              {description}
-            </h3>
+            <p class="text-xl leading-relaxed m-0 text-muted-foreground" data-astro-cid-apxu3dfi=""> {description} </p>
           )}
         </div>