feat: refactor blog components

src/styles/utilities.css

@@ -37,7 +37,7 @@
 
 @utility button-bg-teal {
   @apply transition-all duration-300
-         bg-bermuda hover:bg-turquoise dark:bg-turquoise dark:hover:bg-bermuda
+         bg-bermuda hover:bg-turquoise group-hover:bg-turquoise dark:bg-turquoise dark:hover:bg-bermuda dark:group-hover:bg-bermuda 
 }
 
 @utility button-bg-neutral {
@@ -53,12 +53,20 @@
 
 /* Card classes */
 @utility card-base {
-  @apply rounded-xl
+  @apply transition-all duration-300
+         rounded-xl
          border border-neutral-100 dark:border-stone-500/20
          bg-neutral-100/80 hover:bg-neutral-100 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/90
          shadow-xs hover:shadow-md dark:shadow-md dark:hover:shadow-lg
 }
 
+@utility card-base-hidden {
+  @apply transition-all duration-300
+         rounded-xl
+         border border-transparent
+         hover:bg-neutral-400/20 dark:hover:bg-neutral-800/40
+}
+
 @utility card-hover-icon-color {
   @apply transition-all duration-300
          text-primary
@@ -79,9 +87,8 @@
 
 @utility card-text-header-minor {
   @apply text-header
-         md:text-3xl
-         text-2xl
-         font-semibold
+         text-2xl md:text-3xl
+         font-semibold leading-tight tracking-tight text-balance
 }
 
 @utility card-text-header-description {
@@ -95,6 +102,12 @@
          font-bold
 }
 
+@utility card-text-title-major {
+  @apply text-header
+         text-4xl md:text-3xl
+         font-bold leading-tight tracking-tight text-balance
+}
+
 @utility card-hover-text-title {
   @apply transition-all duration-300
          group-hover:text-main