feat: homepage featured section

src/components/PostCard/PostCard.Label.tsx

@@ -20,9 +20,9 @@ export const PostCardLabel: FC<Props> = ({
 }) => {
   return (
     <Container {...props} className={`post-card__label ${props.className}`}>
-      <Typography variant="subtitle2" genericFontFamily="sans-serif">
-        {contentType.toUpperCase()}
-      </Typography>
+      <ContentType variant="subtitle2" genericFontFamily="sans-serif">
+        {contentType}
+      </ContentType>
       {date && (
         <>
           <DotIcon color="primary" />
@@ -59,3 +59,7 @@ const Container = styled.div`
 const Date = styled(Typography)`
   text-transform: uppercase;
 `
+
+const ContentType = styled(Typography)`
+  text-transform: capitalize;
+`

src/containers/HomePage/HomePage.tsx

@@ -87,6 +87,23 @@ export const HomePage: React.FC<HomePageProps> = ({
               },
             ]}
           />
+          <Featured>
+            <PostsGrid
+              shows={shows}
+              posts={[...highlighted.slice(0, 1), ...highlighted.slice(0, 1)]}
+              pattern={[{ cols: 2, size: 'large' }]}
+              breakpoints={[
+                {
+                  breakpoint: 'xs',
+                  pattern: [{ cols: 1, size: 'small' }],
+                },
+                {
+                  breakpoint: 'md',
+                  pattern: [{ cols: 1, size: 'large' }],
+                },
+              ]}
+            />
+          </Featured>
           <Section title="Latest posts" bordered={highlighted.length > 0}>
             <PostsGrid
               shows={shows}
@@ -299,3 +316,35 @@ const ShowMoreTagsButton = styled.div`
     display: none;
   }
 `
+
+const Featured = styled.div`
+  margin-bottom: var(--lsd-spacing-64);
+
+  h3 {
+    font-size: var(--lsd-h3-fontSize) !important;
+    font-weight: var(--lsd-h3-fontWeight) !important;
+    line-height: var(--lsd-h3-lineHeight) !important;
+  }
+
+  .post-card-wrapper {
+    border-top: 1px solid rgb(var(--lsd-border-primary));
+  }
+
+  ${(props) => lsdUtils.breakpoint(props.theme, 'xs', 'exact')} {
+    margin-top: var(--lsd-spacing-40);
+    margin-bottom: var(--lsd-spacing-80);
+
+    .post-card-wrapper {
+      width: 327px;
+
+      & > div {
+        width: 327px;
+      }
+    }
+
+    & > div > div {
+      display: flex !important;
+      overflow-x: auto !important;
+    }
+  }
+`