fix: styling updates

apps/marketing/src/app/(marketing)/blog/[post]/page.tsx

@@ -1,7 +1,9 @@
 import Image from 'next/image';
+import Link from 'next/link';
 import { notFound } from 'next/navigation';
 
 import { allBlogPosts } from 'contentlayer/generated';
+import { ChevronLeft } from 'lucide-react';
 import type { MDXComponents } from 'mdx/types';
 import { useMDXComponent } from 'next-contentlayer/hooks';
 
@@ -54,8 +56,8 @@ export default function BlogPostPage({ params }: { params: { post: string } }) {
           </div>
 
           <div className="text-sm leading-6">
-            <p className="text-left font-semibold text-gray-900">{post.authorName}</p>
-            <p className="text-gray-600">{post.authorRole}</p>
+            <p className="text-foreground text-left font-semibold">{post.authorName}</p>
+            <p className="text-muted-foreground">{post.authorRole}</p>
           </div>
         </div>
       </div>
@@ -67,13 +69,20 @@ export default function BlogPostPage({ params }: { params: { post: string } }) {
           {post.tags.map((tag, i) => (
             <li
               key={`tag-${i}`}
-              className="relative z-10 whitespace-nowrap rounded-full bg-gray-50 px-3 py-1.5 font-medium text-gray-600 hover:bg-gray-100"
+              className="bg-muted hover:bg-muted/60 text-foreground relative z-10 whitespace-nowrap rounded-full px-3 py-1.5 text-sm font-medium"
             >
               {tag}
             </li>
           ))}
         </ul>
       )}
+
+      <hr />
+
+      <Link href="/blog" className="text-muted-foreground flex items-center hover:opacity-60">
+        <ChevronLeft className="mr-2 h-6 w-6" />
+        Back to all posts
+      </Link>
     </article>
   );
 }

apps/marketing/src/app/(marketing)/blog/page.tsx

@@ -19,14 +19,14 @@ export default function BlogPage() {
         </p>
       </div>
 
-      <div className="mt-10 divide-y divide-gray-100 border-t border-gray-200 ">
+      <div className="mt-10 divide-y divide-slate-100 border-t border-slate-200 ">
         {blogPosts.map((post, i) => (
           <article
             key={`blog-${i}`}
             className="mx-auto mt-8 flex max-w-xl flex-col items-start justify-between pt-8 first:pt-0 sm:mt-16 sm:pt-16"
           >
             <div className="flex items-center gap-x-4 text-xs">
-              <time dateTime={post.date} className="text-gray-500">
+              <time dateTime={post.date} className="text-muted-foreground">
                 {new Date(post.date).toLocaleDateString()}
               </time>
 
@@ -35,7 +35,7 @@ export default function BlogPage() {
                   {post.tags.map((tag, j) => (
                     <li
                       key={`blog-${i}-tag-${j}`}
-                      className="relative z-10 whitespace-nowrap rounded-full bg-gray-50 px-3 py-1.5 font-medium text-gray-600 hover:bg-gray-100"
+                      className="text-foreground bg-muted hover:bg-muted/60 relative z-10 whitespace-nowrap rounded-full px-3 py-1.5 font-medium"
                     >
                       {tag}
                     </li>
@@ -45,31 +45,31 @@ export default function BlogPage() {
             </div>
 
             <div className="group relative">
-              <h3 className="mt-3 text-lg font-semibold leading-6 text-gray-900 group-hover:text-gray-600">
+              <h3 className="text-foreground group-hover:text-foreground/60 mt-3 text-lg font-semibold leading-6">
                 <a href={post.href}>
                   <span className="absolute inset-0" />
                   {post.title}
                 </a>
               </h3>
-              <p className="mt-5 line-clamp-3 text-sm leading-6 text-gray-600">
+              <p className="text-foreground/60 mt-5 line-clamp-3 text-sm leading-6">
                 {post.description}
               </p>
             </div>
 
             <div className="relative mt-4 flex items-center gap-x-4">
-              <div className="h-10 w-10 rounded-full bg-gray-50">
+              <div className="h-10 w-10 rounded-full bg-slate-50">
                 {post.authorImage && (
                   <img
                     src={post.authorImage}
                     alt={`Image of ${post.authorName}`}
-                    className="h-10 w-10 rounded-full bg-gray-50"
+                    className="h-10 w-10 rounded-full bg-slate-50"
                   />
                 )}
               </div>
 
               <div className="text-sm leading-6">
-                <p className="font-semibold text-gray-900">{post.authorName}</p>
-                <p className="text-gray-600">{post.authorRole}</p>
+                <p className="text-foreground font-semibold">{post.authorName}</p>
+                <p className="text-foreground/60">{post.authorRole}</p>
               </div>
             </div>
           </article>