Content Container fully implemented

app/components/ContentContainer.js

@@ -2,23 +2,15 @@
 
 import React from "react";
 
-const ContentContainer = ({ post, width = "200px", variant = "vertical" }) => {
+const ContentContainer = ({ post, width = "200px", size = "responsive" }) => {
   // Get the corresponding icon based on the same logic as background images
-  const getIconImage = (slug, variant) => {
+  const getIconImage = (slug) => {
-    const verticalIcons = [
+    const icons = [
       "/assets/Content_Thumbnail/Icon_1.svg",
       "/assets/Content_Thumbnail/Icon_2.svg",
       "/assets/Content_Thumbnail/Icon_3.svg",
     ];
 
-    const horizontalIcons = [
-      "/assets/Content_Thumbnail/Icon_1.svg",
-      "/assets/Content_Thumbnail/Icon_2.svg",
-      "/assets/Content_Thumbnail/Icon_3.svg",
-    ];
-
-    const icons = variant === "vertical" ? verticalIcons : horizontalIcons;
-
     if (!slug) return icons[0];
 
     // Use the same hash logic as background images to ensure matching
@@ -30,47 +22,60 @@ const ContentContainer = ({ post, width = "200px", variant = "vertical" }) => {
     return icons[Math.abs(hash) % icons.length];
   };
 
-  const iconImage = getIconImage(post.slug, variant);
+  const iconImage = getIconImage(post.slug);
+
+  // Choose styling based on size prop
+  const containerClasses =
+    size === "xs"
+      ? "relative z-20 h-full flex flex-col gap-[var(--measures-spacing-012)]"
+      : "relative z-20 h-full flex flex-col gap-[var(--measures-spacing-012)] sm:gap-[var(--measures-spacing-016)] md:gap-[18px] lg:gap-[var(--measures-spacing-024)]";
 
   return (
-    <div className="relative z-20 h-full flex flex-col gap-3" style={{ width }}>
+    <div className={containerClasses} style={{ width }}>
-      {/* Content Container - 8px gap between icon and text */}
+      {/* Content Container - gap between icon and text */}
-      <div className="flex flex-col gap-2">
+      <div
+        className={
+          size === "xs"
+            ? "flex flex-col gap-[var(--measures-spacing-008)]"
+            : "flex flex-col gap-[var(--measures-spacing-008)] sm:gap-[var(--measures-spacing-012)] md:gap-[var(--measures-spacing-008)] lg:gap-[var(--measures-spacing-016)] xl:gap-[var(--measures-spacing-004)]"
+        }
+      >
         {/* Icon */}
-        <div className="w-6 h-6 flex items-center justify-center">
+        <div className="w-[60px] h-[30px] flex items-center justify-center">
+          {/* eslint-disable-next-line @next/next/no-img-element */}
           <img
             src={iconImage}
             alt={`Icon for ${post.frontmatter.title}`}
-            className="w-6 h-6 object-contain"
+            className="w-[60px] h-[30px] object-contain"
           />
         </div>
 
         {/* Text Container */}
-        <div className="space-y-2">
+        <div
+          className={
+            size === "xs"
+              ? "flex flex-col gap-[var(--measures-spacing-004)]"
+              : "flex flex-col gap-[var(--measures-spacing-004)] md:gap-[var(--measures-spacing-002)] lg:gap-[var(--measures-spacing-004)]"
+          }
+        >
           {/* Title */}
           <h3
-            className="text-lg font-medium group-hover:text-blue-200 transition-colors"
+            className={
-            style={{
+              size === "xs"
-              fontFamily: "Bricolage Grotesque",
+                ? "font-bricolage font-medium text-[18px] leading-[120%] text-[var(--color-content-inverse-brand-royal)] group-hover:text-blue-200 transition-colors"
-              fontWeight: 500,
+                : "font-bricolage font-medium text-[18px] leading-[120%] sm:text-[24px] sm:leading-[24px] md:text-[32px] md:leading-[110%] lg:text-[44px] lg:leading-[110%] xl:text-[64px] xl:leading-[110%] text-[var(--color-content-inverse-brand-royal)] group-hover:text-blue-200 transition-colors"
-              fontSize: "18px",
+            }
-              lineHeight: "120%",
-              color: "var(--color-content-inverse-brand-royal)",
-            }}
           >
             {post.frontmatter.title}
           </h3>
 
           {/* Description */}
           <p
-            className="max-w-md"
+            className={
-            style={{
+              size === "xs"
-              fontFamily: "Inter",
+                ? "font-inter font-normal text-[12px] leading-[16px] text-[var(--color-content-inverse-brand-royal)] max-w-md"
-              fontWeight: 400,
+                : "font-inter font-normal text-[12px] leading-[16px] sm:text-[14px] sm:leading-[20px] md:text-[14px] md:leading-[20px] lg:text-[18px] lg:leading-[130%] xl:text-[24px] xl:leading-[32px] text-[var(--color-content-inverse-brand-royal)] max-w-md"
-              fontSize: "12px",
+            }
-              lineHeight: "16px",
-              color: "var(--color-content-inverse-brand-royal)",
-            }}
           >
             {post.frontmatter.description}
           </p>
@@ -78,29 +83,25 @@ const ContentContainer = ({ post, width = "200px", variant = "vertical" }) => {
       </div>
 
       {/* Metadata Container - horizontal with 8px gap */}
-      <div className="flex items-center gap-2">
+      <div className="flex items-center gap-[var(--measures-spacing-008)]">
         {/* Author Name */}
         <span
-          style={{
+          className={
-            fontFamily: "Inter",
+            size === "xs"
-            fontWeight: 400,
+              ? "font-inter font-normal text-[10px] leading-[14px] text-[var(--color-content-inverse-brand-royal)]"
-            fontSize: "10px",
+              : "font-inter font-normal text-[10px] leading-[14px] md:text-[12px] md:leading-[16px] lg:text-[14px] lg:leading-[20px] xl:text-[18px] xl:leading-[130%] text-[var(--color-content-inverse-brand-royal)]"
-            lineHeight: "14px",
+          }
-            color: "var(--color-content-inverse-brand-royal)",
-          }}
         >
           {post.frontmatter.author}
         </span>
 
         {/* Date */}
         <span
-          style={{
+          className={
-            fontFamily: "Inter",
+            size === "xs"
-            fontWeight: 400,
+              ? "font-inter font-normal text-[10px] leading-[14px] text-[var(--color-content-inverse-brand-royal)]"
-            fontSize: "10px",
+              : "font-inter font-normal text-[10px] leading-[14px] md:text-[12px] md:leading-[16px] lg:text-[14px] lg:leading-[20px] xl:text-[18px] xl:leading-[130%] text-[var(--color-content-inverse-brand-royal)]"
-            lineHeight: "14px",
+          }
-            color: "var(--color-content-inverse-brand-royal)",
-          }}
         >
           {new Date(post.frontmatter.date).toLocaleDateString("en-US", {
             year: "numeric",

app/components/ContentThumbnailTemplate.js

@@ -71,7 +71,7 @@ const ContentThumbnailTemplate = ({
           </div>
 
           {/* Content Section - positioned within the padding constraints */}
-          <ContentContainer post={post} width="200px" variant="vertical" />
+          <ContentContainer post={post} width="200px" size="xs" />
         </div>
       </Link>
     );
@@ -105,7 +105,7 @@ const ContentThumbnailTemplate = ({
         </div>
 
         {/* Content - positioned within the padding constraints */}
-        <ContentContainer post={post} width="230px" variant="horizontal" />
+        <ContentContainer post={post} width="230px" size="xs" />
       </div>
     </Link>
   );