refactor: improve BlogPost and ArticleCard components with better spacing and updated styles for visual clarity and consistency

Author: dangthang1903

app/sections/blog-post.tsx

@@ -47,9 +47,9 @@ const BlogPost = forwardRef<HTMLElement, BlogPostProps>((props, ref) => {
             <Image data={image} sizes="90vw" />
           </div>
         )}
-        <article className="prose lg:max-w-4xl mx-auto py-4 lg:py-10">
-          <div className="space-y-5 text-left">
-            <h3 className="h3 leading-tight!">{title}</h3>
+        <article className="prose lg:max-w-4xl mx-auto py-20">
+          <div className="space-y-5 text-left mb-3">
+            <h3 className="h3 !mt-0 !mb-8 leading-tight! !tracking-tighter font-normal">{title}</h3>
             {(formattedDate || author?.name) && (
               <span className="flex items-center text-[#918379] gap-0.5 text-[14px]">
                 {formattedDate && author?.name ? (
@@ -69,29 +69,33 @@ const BlogPost = forwardRef<HTMLElement, BlogPostProps>((props, ref) => {
               suppressHydrationWarning
               dangerouslySetInnerHTML={{ __html: contentHtml }}
             />
-            <div className="border-t border-line-subtle w-1/3 mx-auto" />
-            <div className="flex flex-col md:flex-row items-center justify-between gap-2">
-              {showTags && (
-                <div>
-                  <strong>Tags:</strong>
-                  <span className="ml-2">{tags.join(", ")}</span>
+            {(showTags || showShareButtons) && (
+              <>
+                <div className="border-t border-line-subtle w-1/3 mx-auto" />
+                <div className="flex flex-col md:flex-row items-center justify-between gap-2">
+                  {showTags && (
+                    <div>
+                      <strong>Tags:</strong>
+                      <span className="ml-2">{tags.join(", ")}</span>
+                    </div>
+                  )}
+                  {showShareButtons && (
+                    <div className="flex gap-2 items-center">
+                      <strong>Share:</strong>
+                      <FacebookShareButton url={articleUrl}>
+                        <FacebookLogoIcon size={24} />
+                      </FacebookShareButton>
+                      <PinterestShareButton url={articleUrl} media={image?.url}>
+                        <PinterestLogoIcon size={24} />
+                      </PinterestShareButton>
+                      <TwitterShareButton url={articleUrl} title={title}>
+                        <XLogoIcon size={24} />
+                      </TwitterShareButton>
+                    </div>
+                  )}
                 </div>
-              )}
-              {showShareButtons && (
-                <div className="flex gap-2 items-center">
-                  <strong>Share:</strong>
-                  <FacebookShareButton url={articleUrl}>
-                    <FacebookLogoIcon size={24} />
-                  </FacebookShareButton>
-                  <PinterestShareButton url={articleUrl} media={image?.url}>
-                    <PinterestLogoIcon size={24} />
-                  </PinterestShareButton>
-                  <TwitterShareButton url={articleUrl} title={title}>
-                    <XLogoIcon size={24} />
-                  </TwitterShareButton>
-                </div>
-              )}
-            </div>
+              </>
+            )}
           </div>
         </article>
       </Section>

app/sections/blogs.tsx

@@ -178,7 +178,7 @@ export function ArticleCard({
             </div>
           )}
           <div className="flex flex-col gap-3">
-            <h5 className="font-normal text-(--accent-color) line-clamp-3">
+            <h5 className="font-normal text-(--accent-color) line-clamp-3 tracking-tighter">
               {article.title}
             </h5>
             {showSeperator && (
@@ -190,7 +190,7 @@ export function ArticleCard({
               </p>
             )}
             {(showDate || showAuthor) && (
-              <div className="flex mt-4 gap-1 text-(--accent-color) text-sm opacity-80">
+              <div className="flex mt-4 gap-1 text-(--accent-color) opacity-80">
                 {showDate && (
                   <time>
                     {new Date(article.publishedAt).toLocaleDateString("en-US", {
@@ -206,7 +206,7 @@ export function ArticleCard({
             )}
             {showReadmore && (
               <div className="mt-2">
-                <span className="text-(--accent-color) text-sm underline opacity-80 hover:opacity-100 transition-opacity">
+                <span className="text-(--accent-color) underline opacity-80 hover:opacity-100 transition-opacity uppercase">
                   Read more →
                 </span>
               </div>