From b65ffb7241f95165a0a25d26195695c5712b0745 Mon Sep 17 00:00:00 2001
From: Eugenia <mariaeugenia.trapani.ext@eulerhermes.com>
Date: Fri, 27 Oct 2023 15:49:07 +0200
Subject: [PATCH 01/16] Add highlight image for desktop view

---
 src/components/PostPreview/PostPreview.scss   | 42 ++++++++++++++++---
 .../PostPreview/PostPreview.stories.tsx       |  6 ++-
 src/components/PostPreview/PostPreview.tsx    | 29 ++++++-------
 3 files changed, 54 insertions(+), 23 deletions(-)

diff --git a/src/components/PostPreview/PostPreview.scss b/src/components/PostPreview/PostPreview.scss
index d09d556b5..1801235e3 100644
--- a/src/components/PostPreview/PostPreview.scss
+++ b/src/components/PostPreview/PostPreview.scss
@@ -1,4 +1,6 @@
-@use '@eleven-labs/design-system/scss/abstracts' as *;
+@use "@eleven-labs/design-system/scss/abstracts" as *;
+
+$border-radius: 4px;
 
 @mixin multi-line-ellipsis($line-height: 1.2em, $line-count: 1, $bg-color: var(--color-white)) {
   overflow: hidden;
@@ -9,14 +11,14 @@
   padding-right: 1em;
 
   &::before {
-    content: '...';
+    content: "...";
     position: absolute;
     right: 0;
     bottom: 0;
   }
 
   &::after {
-    content: '';
+    content: "";
     position: absolute;
     right: 0;
     width: 1em;
@@ -26,13 +28,18 @@
   }
 }
 
+@mixin post-preview-card {
+  box-shadow: 0 4px 4px rgb(0 0 0 / 20%);
+  border-radius: $border-radius;
+}
+
 .post-preview {
   --max-height-post-preview-mask: 44px;
 
   &--mask {
     max-height: var(--max-height-post-preview-mask);
 
-    @include create-media-queries('md') {
+    @include create-media-queries("md") {
       --max-height-post-preview-mask: 24px;
     }
 
@@ -40,10 +47,33 @@
   }
 
   &--related {
+    @include post-preview-card;
     padding: var(--spacing-s);
     background-color: var(--color-white);
-    border-radius: 4px;
-    box-shadow: 0 4px 4px rgb(0 0 0 / 20%);
+  }
+
+  &--highlighted {
+    @include post-preview-card;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+
+    div {
+      width: 30%;
+    }
+    img {
+      width: 100%;
+      height:100%;
+      max-height: 13rem;
+      object-fit: contain;
+      border-radius: $border-radius 0 0 $border-radius;
+    }
+
+    article {
+      width: 70%;
+      padding: var(--spacing-s);
+    }
   }
 
   &__excerpt {
diff --git a/src/components/PostPreview/PostPreview.stories.tsx b/src/components/PostPreview/PostPreview.stories.tsx
index 465fa6b66..5645e18ba 100644
--- a/src/components/PostPreview/PostPreview.stories.tsx
+++ b/src/components/PostPreview/PostPreview.stories.tsx
@@ -11,7 +11,11 @@ export default {
     contentType: ContentTypeEnum.ARTICLE,
     title: `Titre de l'article`,
     date: '09 fév. 2021',
-    readingTime: 24,
+    image: {
+      source: 'https://blog.eleven-labs.com/imgs/articles/2023-01-11-react-day-berlin/mnemonic.jpg',
+      alt: 'alt',
+    },
+    readingTime: '24mn',
     authors: [{ username: 'jdoe', name: 'J. Doe' }],
     excerpt:
       'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit vel tellus in molestie. Curabitur malesuada sodales consectetur. Aliquam convallis nec lacus in euismod. Vestibulum id eros vitae tellus sodales ultricies eget eu ipsum.',
diff --git a/src/components/PostPreview/PostPreview.tsx b/src/components/PostPreview/PostPreview.tsx
index 883ab9ca6..a96706a7e 100644
--- a/src/components/PostPreview/PostPreview.tsx
+++ b/src/components/PostPreview/PostPreview.tsx
@@ -15,9 +15,11 @@ export type PostPreviewOptions = {
   readingTime?: number;
   authors?: { username: string; name: string }[];
   link?: AsProps<'a'>;
+  image?: { source: string; alt: string };
   hasMask?: boolean;
   isRelated?: boolean;
   isLoading?: boolean;
+  isHighlighted?: boolean;
 };
 
 export type PostPreviewProps = PostPreviewOptions & BoxProps;
@@ -33,30 +35,25 @@ export const PostPreview: React.FC<PostPreviewProps> = ({
   hasMask,
   isRelated,
   isLoading = false,
+  isHighlighted = true,
+  image,
   ...boxProps
-}) => {
-  const titleBlock = hasMask ? (
-    (title as React.JSX.Element)
-  ) : (
-    <Link {...link} data-internal-link={isRelated ? 'relatedPost' : 'post'}>
-      {title}
-    </Link>
-  );
-  return (
+}) => (
+  <Box className={classNames({ 'post-preview--highlighted': isHighlighted })}>
+    <div>{isHighlighted && <img src={image?.source} alt={image?.alt} />}</div>
     <Box
       as="article"
       className={classNames('post-preview', { 'post-preview--mask': hasMask }, { 'post-preview--related': isRelated })}
       {...boxProps}
     >
       <Skeleton isLoading={isLoading}>
-        <Heading as="h2" color="amaranth" size="s">
-          {contentType === ContentTypeEnum.TUTORIAL ? (
-            <Flex gap="xxs">
-              <TutoTag />
-              {titleBlock}
-            </Flex>
+        <Heading as="h2" color="amaranth" size="s" mb={{ xs: 'xxs-3', md: 'xxs' }}>
+          {hasMask ? (
+            title
           ) : (
-            titleBlock
+            <Link {...link} data-internal-link={isRelated ? 'relatedPost' : 'post'}>
+              {title}
+            </Link>
           )}
         </Heading>
       </Skeleton>

From 01149e741764005fe8b7872c396908c30f5d9d68 Mon Sep 17 00:00:00 2001
From: Eugenia <mariaeugenia.trapani.ext@eulerhermes.com>
Date: Fri, 27 Oct 2023 16:35:03 +0200
Subject: [PATCH 02/16] mobile view

---
 src/components/PostPreview/PostPreview.scss | 38 ++++++++++++++-------
 1 file changed, 26 insertions(+), 12 deletions(-)

diff --git a/src/components/PostPreview/PostPreview.scss b/src/components/PostPreview/PostPreview.scss
index 1801235e3..522df3562 100644
--- a/src/components/PostPreview/PostPreview.scss
+++ b/src/components/PostPreview/PostPreview.scss
@@ -55,25 +55,39 @@ $border-radius: 4px;
   &--highlighted {
     @include post-preview-card;
     display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
+    flex-direction: column;
 
-    div {
-      width: 30%;
-    }
     img {
-      width: 100%;
-      height:100%;
-      max-height: 13rem;
-      object-fit: contain;
-      border-radius: $border-radius 0 0 $border-radius;
+      max-width: 100%;
+      border-radius: $border-radius $border-radius 0 0;
     }
 
     article {
-      width: 70%;
       padding: var(--spacing-s);
     }
+
+    @include create-media-queries('md') {
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+
+      div {
+        width: 30%;
+      }
+
+      img {
+        width: 100%;
+        height: 100%;
+        max-height: 13rem;
+        object-fit: cover;
+        border-radius: $border-radius 0 0 $border-radius;
+      }
+
+      article {
+        width: 70%;
+      }
+    }
   }
 
   &__excerpt {

From 2e9fb309acd5db170d56267812ca89343450d6f9 Mon Sep 17 00:00:00 2001
From: Eugenia <mariaeugenia.trapani.ext@eulerhermes.com>
Date: Fri, 27 Oct 2023 17:35:17 +0200
Subject: [PATCH 03/16] added sparke

---
 src/components/PostPreview/PostPreview.scss | 18 +++++++++++++++++-
 src/components/PostPreview/PostPreview.tsx  |  7 ++++++-
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/components/PostPreview/PostPreview.scss b/src/components/PostPreview/PostPreview.scss
index 522df3562..be8b60949 100644
--- a/src/components/PostPreview/PostPreview.scss
+++ b/src/components/PostPreview/PostPreview.scss
@@ -56,6 +56,7 @@ $border-radius: 4px;
     @include post-preview-card;
     display: flex;
     flex-direction: column;
+    position: relative;
 
     img {
       max-width: 100%;
@@ -66,7 +67,11 @@ $border-radius: 4px;
       padding: var(--spacing-s);
     }
 
-    @include create-media-queries('md') {
+    .sparkle {
+      display: none;
+    }
+
+    @include create-media-queries("md") {
       flex-direction: row;
       align-items: center;
       justify-content: center;
@@ -87,6 +92,17 @@ $border-radius: 4px;
       article {
         width: 70%;
       }
+
+      .sparkle {
+        display: block;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        left: 7rem;
+        width: 47px;
+        height: 108px;
+        position: absolute;
+        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><line x1="33.1063" y1="3.06202" x2="44.1118" y2="14.4606" stroke="%23F3C93D" stroke-width="5" stroke-linecap="round"/><line x1="2.5" y1="-2.5" x2="18.3445" y2="-2.5" transform="matrix(0.694595 -0.719401 -0.719401 -0.694595 29.5713 105.469)" stroke="%23F3C93D" stroke-width="5" stroke-linecap="round"/><line x1="3" y1="50.8906" x2="41.0134" y2="50.8906" stroke="%23F3C93D" stroke-width="6" stroke-linecap="round"/></svg>');
+      }
     }
   }
 
diff --git a/src/components/PostPreview/PostPreview.tsx b/src/components/PostPreview/PostPreview.tsx
index a96706a7e..fd4a2afb2 100644
--- a/src/components/PostPreview/PostPreview.tsx
+++ b/src/components/PostPreview/PostPreview.tsx
@@ -40,7 +40,12 @@ export const PostPreview: React.FC<PostPreviewProps> = ({
   ...boxProps
 }) => (
   <Box className={classNames({ 'post-preview--highlighted': isHighlighted })}>
-    <div>{isHighlighted && <img src={image?.source} alt={image?.alt} />}</div>
+    {isHighlighted && (
+      <>
+        <div className="sparkle" />
+        <div>{isHighlighted && <img src={image?.source} alt={image?.alt} />}</div>
+      </>
+    )}
     <Box
       as="article"
       className={classNames('post-preview', { 'post-preview--mask': hasMask }, { 'post-preview--related': isRelated })}

From 9118d00e079c44efbccea603a3e3ea917fb5c209 Mon Sep 17 00:00:00 2001
From: Eugenia <mariaeugenia.trapani.ext@eulerhermes.com>
Date: Fri, 27 Oct 2023 18:13:57 +0200
Subject: [PATCH 04/16] refacto in smaller components

---
 src/components/PostPreview/PostPreview.tsx    | 60 +++++++------------
 .../PostPreview/PostPreviewCard.tsx           | 52 ++++++++++++++++
 .../PostPreview/PostPreviewContent.tsx        | 38 ++++++++++++
 .../PostPreview/PostPreviewFooter.tsx         | 30 ++++++++++
 4 files changed, 143 insertions(+), 37 deletions(-)
 create mode 100644 src/components/PostPreview/PostPreviewCard.tsx
 create mode 100644 src/components/PostPreview/PostPreviewContent.tsx
 create mode 100644 src/components/PostPreview/PostPreviewFooter.tsx

diff --git a/src/components/PostPreview/PostPreview.tsx b/src/components/PostPreview/PostPreview.tsx
index fd4a2afb2..21d24cadd 100644
--- a/src/components/PostPreview/PostPreview.tsx
+++ b/src/components/PostPreview/PostPreview.tsx
@@ -1,12 +1,12 @@
-import './PostPreview.scss';
-
-import { AsProps, Box, BoxProps, Flex, Heading, Link, Skeleton, Text } from '@eleven-labs/design-system';
-import classNames from 'classnames';
+import { AsProps, BoxProps } from '@eleven-labs/design-system';
 import React from 'react';
 
 import { ArticleMetadata, TutoTag } from '@/components';
 import { ContentTypeEnum } from '@/constants';
 
+import PostPreviewCard from './PostPreviewCard';
+import PostPreviewContent from './PostPreviewContent';
+
 export type PostPreviewOptions = {
   contentType?: ContentTypeEnum.ARTICLE | ContentTypeEnum.TUTORIAL;
   title?: React.ReactNode;
@@ -37,37 +37,23 @@ export const PostPreview: React.FC<PostPreviewProps> = ({
   isLoading = false,
   isHighlighted = true,
   image,
-  ...boxProps
+  // ...boxProps ??
 }) => (
-  <Box className={classNames({ 'post-preview--highlighted': isHighlighted })}>
-    {isHighlighted && (
-      <>
-        <div className="sparkle" />
-        <div>{isHighlighted && <img src={image?.source} alt={image?.alt} />}</div>
-      </>
-    )}
-    <Box
-      as="article"
-      className={classNames('post-preview', { 'post-preview--mask': hasMask }, { 'post-preview--related': isRelated })}
-      {...boxProps}
-    >
-      <Skeleton isLoading={isLoading}>
-        <Heading as="h2" color="amaranth" size="s" mb={{ xs: 'xxs-3', md: 'xxs' }}>
-          {hasMask ? (
-            title
-          ) : (
-            <Link {...link} data-internal-link={isRelated ? 'relatedPost' : 'post'}>
-              {title}
-            </Link>
-          )}
-        </Heading>
-      </Skeleton>
-      <Skeleton isLoading={isLoading} style={{ height: 75 }}>
-        <Text size="s" className="post-preview__excerpt">
-          {excerpt}
-        </Text>
-      </Skeleton>
-      <ArticleMetadata mt={{ xs: 'xs', md: 's' }} date={date} readingTime={readingTime} authors={authors} />
-    </Box>
-  );
-};
+  <PostPreviewCard
+    isHighlighted={isHighlighted}
+    image={image}
+    hasMask={hasMask}
+    isRelated={isRelated}
+    // boxProps={boxProps} ??
+  >
+    <PostPreviewContent
+      isLoading={isLoading}
+      isRelated={isRelated}
+      title={title}
+      link={link}
+      excerpt={excerpt}
+      hasMask={hasMask}
+    />
+    <ArticleMetadata mt={{ xs: 'xs', md: 's' }} date={date} readingTime={readingTime} authors={authors} />
+  </PostPreviewCard>
+);
diff --git a/src/components/PostPreview/PostPreviewCard.tsx b/src/components/PostPreview/PostPreviewCard.tsx
new file mode 100644
index 000000000..e4dc20d91
--- /dev/null
+++ b/src/components/PostPreview/PostPreviewCard.tsx
@@ -0,0 +1,52 @@
+import './PostPreview.scss';
+
+import { Box } from '@eleven-labs/design-system';
+import classNames from 'classnames';
+import React from 'react';
+import { PropsWithChildren } from 'react';
+
+import { PostPreviewProps } from './PostPreview';
+
+const PostPreviewCard = ({
+  isHighlighted,
+  image,
+  hasMask,
+  isRelated,
+  // boxProps,
+  children,
+}: Partial<PostPreviewProps> & PropsWithChildren): React.ReactNode => {
+  if (isHighlighted) {
+    return (
+      <Box className={classNames({ 'post-preview--highlighted': isHighlighted })}>
+        {isHighlighted && (
+          <>
+            <div className="sparkle" />
+            <div>{isHighlighted && <img src={image?.source} alt={image?.alt} />}</div>
+          </>
+        )}
+        <Box
+          as="article"
+          className={classNames(
+            'post-preview',
+            { 'post-preview--mask': hasMask },
+            { 'post-preview--related': isRelated }
+          )}
+          // {...boxProps}
+        >
+          {children}
+        </Box>
+      </Box>
+    );
+  }
+  return (
+    <Box
+      as="article"
+      className={classNames('post-preview', { 'post-preview--mask': hasMask }, { 'post-preview--related': isRelated })}
+      // {...boxProps}
+    >
+      {children}
+    </Box>
+  );
+};
+
+export default PostPreviewCard;
diff --git a/src/components/PostPreview/PostPreviewContent.tsx b/src/components/PostPreview/PostPreviewContent.tsx
new file mode 100644
index 000000000..92425e80c
--- /dev/null
+++ b/src/components/PostPreview/PostPreviewContent.tsx
@@ -0,0 +1,38 @@
+import './PostPreview.scss';
+
+import { Heading, Link, Skeleton, Text } from '@eleven-labs/design-system';
+import React from 'react';
+
+import { PostPreviewOptions } from './PostPreview';
+
+const PostPreviewContent = ({
+  isLoading,
+  hasMask,
+  title,
+  link,
+  isRelated,
+  excerpt,
+}: Partial<PostPreviewOptions>): React.ReactNode => {
+  return (
+    <>
+      <Skeleton isLoading={isLoading}>
+        <Heading as="h2" color="amaranth" size="s" mb={{ xs: 'xxs-3', md: 'xxs' }}>
+          {hasMask ? (
+            title
+          ) : (
+            <Link {...link} data-internal-link={isRelated ? 'relatedPost' : 'post'}>
+              {title}
+            </Link>
+          )}
+        </Heading>
+      </Skeleton>
+      <Skeleton isLoading={isLoading} style={{ height: 75 }}>
+        <Text size="s" className="post-preview__excerpt">
+          {excerpt}
+        </Text>
+      </Skeleton>
+    </>
+  );
+};
+
+export default PostPreviewContent;
diff --git a/src/components/PostPreview/PostPreviewFooter.tsx b/src/components/PostPreview/PostPreviewFooter.tsx
new file mode 100644
index 000000000..32de8192a
--- /dev/null
+++ b/src/components/PostPreview/PostPreviewFooter.tsx
@@ -0,0 +1,30 @@
+import { Box, Skeleton, Text } from '@eleven-labs/design-system';
+import React from 'react';
+
+import { PostPreviewOptions, SeparatorCircle } from '@/components';
+
+const PostPreviewFooter = ({ isLoading, date, readingTime, authors }: Partial<PostPreviewOptions>): React.ReactNode => {
+  return (
+    <Box mt={{ xs: 'xs', md: 's' }} textSize="xs">
+      <Skeleton isLoading={isLoading} display="inline-block" style={{ width: 100 }}>
+        {date && <Text as="span">{date}</Text>}
+      </Skeleton>
+      <SeparatorCircle />
+      <Skeleton isLoading={isLoading} display="inline-block" style={{ width: 50 }}>
+        {readingTime && <Text as="span">{readingTime}</Text>}
+      </Skeleton>
+      <SeparatorCircle />
+      <Skeleton isLoading={isLoading} display="inline-block" style={{ width: 100 }}>
+        {authors &&
+          authors.map((author, authorIndex) => (
+            <Text key={author.username} as="span">
+              {author.name}
+              {authorIndex !== authors.length - 1 ? ' & ' : ''}
+            </Text>
+          ))}
+      </Skeleton>
+    </Box>
+  );
+};
+
+export default PostPreviewFooter;

From 6853c477457d3e0427f5a37c15de1be2255c4ff9 Mon Sep 17 00:00:00 2001
From: Eugenia <mariaeugenia.trapani.ext@eulerhermes.com>
Date: Tue, 31 Oct 2023 23:18:48 +0100
Subject: [PATCH 05/16] fix style try

---
 src/components/PostPreview/PostPreview.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/PostPreview/PostPreview.scss b/src/components/PostPreview/PostPreview.scss
index be8b60949..a6d0ee67d 100644
--- a/src/components/PostPreview/PostPreview.scss
+++ b/src/components/PostPreview/PostPreview.scss
@@ -48,12 +48,14 @@ $border-radius: 4px;
 
   &--related {
     @include post-preview-card;
+
     padding: var(--spacing-s);
     background-color: var(--color-white);
   }
 
   &--highlighted {
     @include post-preview-card;
+
     display: flex;
     flex-direction: column;
     position: relative;

From 6d09417b3c48baa19106fcaf20ae4551417aa1a7 Mon Sep 17 00:00:00 2001
From: Eugenia <mariaeugenia.trapani.ext@eulerhermes.com>
Date: Thu, 2 Nov 2023 10:02:05 +0100
Subject: [PATCH 06/16] add feedback

---
 .../PostPreview/PostPreview.stories.tsx       |  5 ++++
 src/components/PostPreview/PostPreview.tsx    | 18 +++++---------
 .../PostPreview/PostPreviewCard.tsx           | 24 +++++++++++--------
 .../PostPreview/PostPreviewContent.tsx        | 16 +++++++++----
 .../PostPreview/PostPreviewFooter.tsx         | 13 ++++++----
 5 files changed, 45 insertions(+), 31 deletions(-)

diff --git a/src/components/PostPreview/PostPreview.stories.tsx b/src/components/PostPreview/PostPreview.stories.tsx
index 5645e18ba..42a13e76a 100644
--- a/src/components/PostPreview/PostPreview.stories.tsx
+++ b/src/components/PostPreview/PostPreview.stories.tsx
@@ -56,3 +56,8 @@ PostPreviewIsRelated.parameters = {
 PostPreviewIsRelated.args = {
   isRelated: true,
 };
+
+export const PostPreviewIsHighlighted = Template.bind({});
+PostPreviewIsHighlighted.args = {
+  isHighlighted: true,
+};
diff --git a/src/components/PostPreview/PostPreview.tsx b/src/components/PostPreview/PostPreview.tsx
index 21d24cadd..8ebdf6145 100644
--- a/src/components/PostPreview/PostPreview.tsx
+++ b/src/components/PostPreview/PostPreview.tsx
@@ -1,11 +1,11 @@
 import { AsProps, BoxProps } from '@eleven-labs/design-system';
 import React from 'react';
 
-import { ArticleMetadata, TutoTag } from '@/components';
+import { ArticleMetadata } from '@/components';
 import { ContentTypeEnum } from '@/constants';
 
-import PostPreviewCard from './PostPreviewCard';
-import PostPreviewContent from './PostPreviewContent';
+import { PostPreviewCard } from './PostPreviewCard';
+import { PostPreviewContent } from './PostPreviewContent';
 
 export type PostPreviewOptions = {
   contentType?: ContentTypeEnum.ARTICLE | ContentTypeEnum.TUTORIAL;
@@ -35,17 +35,11 @@ export const PostPreview: React.FC<PostPreviewProps> = ({
   hasMask,
   isRelated,
   isLoading = false,
-  isHighlighted = true,
+  isHighlighted = false,
   image,
-  // ...boxProps ??
+  ...boxProps
 }) => (
-  <PostPreviewCard
-    isHighlighted={isHighlighted}
-    image={image}
-    hasMask={hasMask}
-    isRelated={isRelated}
-    // boxProps={boxProps} ??
-  >
+  <PostPreviewCard isHighlighted={isHighlighted} image={image} hasMask={hasMask} isRelated={isRelated} {...boxProps}>
     <PostPreviewContent
       isLoading={isLoading}
       isRelated={isRelated}
diff --git a/src/components/PostPreview/PostPreviewCard.tsx b/src/components/PostPreview/PostPreviewCard.tsx
index e4dc20d91..7bde71efb 100644
--- a/src/components/PostPreview/PostPreviewCard.tsx
+++ b/src/components/PostPreview/PostPreviewCard.tsx
@@ -3,25 +3,31 @@ import './PostPreview.scss';
 import { Box } from '@eleven-labs/design-system';
 import classNames from 'classnames';
 import React from 'react';
-import { PropsWithChildren } from 'react';
 
-import { PostPreviewProps } from './PostPreview';
+interface PostPreviewCardProps {
+  hasMask?: boolean;
+  isRelated?: boolean;
+  isLoading?: boolean;
+  image?: { source: string; alt: string };
+  isHighlighted?: boolean;
+  children: React.ReactNode;
+}
 
-const PostPreviewCard = ({
+export const PostPreviewCard: React.FC<PostPreviewCardProps> = ({
   isHighlighted,
   image,
   hasMask,
   isRelated,
-  // boxProps,
   children,
-}: Partial<PostPreviewProps> & PropsWithChildren): React.ReactNode => {
+  ...props
+}) => {
   if (isHighlighted) {
     return (
       <Box className={classNames({ 'post-preview--highlighted': isHighlighted })}>
         {isHighlighted && (
           <>
             <div className="sparkle" />
-            <div>{isHighlighted && <img src={image?.source} alt={image?.alt} />}</div>
+            {image && <div>{isHighlighted && <img src={image?.source} alt={image?.alt} />}</div>}
           </>
         )}
         <Box
@@ -31,7 +37,7 @@ const PostPreviewCard = ({
             { 'post-preview--mask': hasMask },
             { 'post-preview--related': isRelated }
           )}
-          // {...boxProps}
+          {...props}
         >
           {children}
         </Box>
@@ -42,11 +48,9 @@ const PostPreviewCard = ({
     <Box
       as="article"
       className={classNames('post-preview', { 'post-preview--mask': hasMask }, { 'post-preview--related': isRelated })}
-      // {...boxProps}
+      {...props}
     >
       {children}
     </Box>
   );
 };
-
-export default PostPreviewCard;
diff --git a/src/components/PostPreview/PostPreviewContent.tsx b/src/components/PostPreview/PostPreviewContent.tsx
index 92425e80c..1f265ce9c 100644
--- a/src/components/PostPreview/PostPreviewContent.tsx
+++ b/src/components/PostPreview/PostPreviewContent.tsx
@@ -1,18 +1,26 @@
 import './PostPreview.scss';
 
+import { AsProps } from '@eleven-labs/design-system';
 import { Heading, Link, Skeleton, Text } from '@eleven-labs/design-system';
 import React from 'react';
 
-import { PostPreviewOptions } from './PostPreview';
+interface PostPreviewContentProps {
+  title?: React.ReactNode;
+  excerpt?: React.ReactNode;
+  link?: AsProps<'a'>;
+  hasMask?: boolean;
+  isRelated?: boolean;
+  isLoading?: boolean;
+}
 
-const PostPreviewContent = ({
+export const PostPreviewContent: React.FC<PostPreviewContentProps> = ({
   isLoading,
   hasMask,
   title,
   link,
   isRelated,
   excerpt,
-}: Partial<PostPreviewOptions>): React.ReactNode => {
+}) => {
   return (
     <>
       <Skeleton isLoading={isLoading}>
@@ -34,5 +42,3 @@ const PostPreviewContent = ({
     </>
   );
 };
-
-export default PostPreviewContent;
diff --git a/src/components/PostPreview/PostPreviewFooter.tsx b/src/components/PostPreview/PostPreviewFooter.tsx
index 32de8192a..54d9c23b6 100644
--- a/src/components/PostPreview/PostPreviewFooter.tsx
+++ b/src/components/PostPreview/PostPreviewFooter.tsx
@@ -1,9 +1,16 @@
 import { Box, Skeleton, Text } from '@eleven-labs/design-system';
 import React from 'react';
 
-import { PostPreviewOptions, SeparatorCircle } from '@/components';
+import { SeparatorCircle } from '@/components';
 
-const PostPreviewFooter = ({ isLoading, date, readingTime, authors }: Partial<PostPreviewOptions>): React.ReactNode => {
+interface PostPreviewFooterProps {
+  isLoading?: boolean;
+  date?: React.ReactNode;
+  readingTime?: number;
+  authors?: { username: string; name: string }[];
+}
+
+export const PostPreviewFooter: React.FC<PostPreviewFooterProps> = ({ isLoading, date, readingTime, authors }) => {
   return (
     <Box mt={{ xs: 'xs', md: 's' }} textSize="xs">
       <Skeleton isLoading={isLoading} display="inline-block" style={{ width: 100 }}>
@@ -26,5 +33,3 @@ const PostPreviewFooter = ({ isLoading, date, readingTime, authors }: Partial<Po
     </Box>
   );
 };
-
-export default PostPreviewFooter;

From 3bbb4f609edb8b92ec71a3aa54df034ef3abddd8 Mon Sep 17 00:00:00 2001
From: Eugenia <mariaeugenia.trapani.ext@eulerhermes.com>
Date: Thu, 2 Nov 2023 10:26:51 +0100
Subject: [PATCH 07/16] comment image settings

---
 src/components/PostPreview/PostPreview.scss      | 16 +++++++++-------
 .../PostPreview/PostPreview.stories.tsx          | 15 ++++++++++-----
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/components/PostPreview/PostPreview.scss b/src/components/PostPreview/PostPreview.scss
index a6d0ee67d..85b725fe8 100644
--- a/src/components/PostPreview/PostPreview.scss
+++ b/src/components/PostPreview/PostPreview.scss
@@ -79,9 +79,10 @@ $border-radius: 4px;
       justify-content: center;
       height: 100%;
 
-      div {
-        width: 30%;
-      }
+      //! TO BE RESTORED WHEN COVER IMAGE IS FUNCTIONAL
+      // div {
+      //   width: 30%;
+      // }
 
       img {
         width: 100%;
@@ -91,15 +92,16 @@ $border-radius: 4px;
         border-radius: $border-radius 0 0 $border-radius;
       }
 
-      article {
-        width: 70%;
-      }
+      //! TO BE RESTORED WHEN COVER IMAGE IS FUNCTIONAL
+      // article {
+      //   width: 70%;
+      // }
 
       .sparkle {
         display: block;
         top: 50%;
         transform: translate(-50%, -50%);
-        left: 7rem;
+        left: -2rem;
         width: 47px;
         height: 108px;
         position: absolute;
diff --git a/src/components/PostPreview/PostPreview.stories.tsx b/src/components/PostPreview/PostPreview.stories.tsx
index 42a13e76a..8340f5c14 100644
--- a/src/components/PostPreview/PostPreview.stories.tsx
+++ b/src/components/PostPreview/PostPreview.stories.tsx
@@ -11,10 +11,10 @@ export default {
     contentType: ContentTypeEnum.ARTICLE,
     title: `Titre de l'article`,
     date: '09 fév. 2021',
-    image: {
-      source: 'https://blog.eleven-labs.com/imgs/articles/2023-01-11-react-day-berlin/mnemonic.jpg',
-      alt: 'alt',
-    },
+    // image: {
+    //   source: 'https://blog.eleven-labs.com/imgs/articles/2023-01-11-react-day-berlin/mnemonic.jpg',
+    //   alt: 'alt',
+    // },
     readingTime: '24mn',
     authors: [{ username: 'jdoe', name: 'J. Doe' }],
     excerpt:
@@ -29,6 +29,11 @@ export default {
 } as Meta<typeof PostPreview>;
 
 const Template: StoryFn<typeof PostPreview> = (args) => <PostPreview {...args} />;
+const TemplateWithMargin: StoryFn<typeof PostPreview> = (args) => (
+  <div style={{ margin: '0 2.5em' }}>
+    <PostPreview {...args} />
+  </div>
+);
 
 export const Overview = Template.bind({});
 
@@ -57,7 +62,7 @@ PostPreviewIsRelated.args = {
   isRelated: true,
 };
 
-export const PostPreviewIsHighlighted = Template.bind({});
+export const PostPreviewIsHighlighted = TemplateWithMargin.bind({});
 PostPreviewIsHighlighted.args = {
   isHighlighted: true,
 };

From d563e259fb5d2d97dce73797eca79141caa8ed4a Mon Sep 17 00:00:00 2001
From: Eugenia <mariaeugenia.trapani.ext@eulerhermes.com>
Date: Thu, 2 Nov 2023 10:41:40 +0100
Subject: [PATCH 08/16] update readingTime to prevent error

---
 src/components/PostPreview/PostPreview.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/PostPreview/PostPreview.stories.tsx b/src/components/PostPreview/PostPreview.stories.tsx
index 8340f5c14..e135c37dd 100644
--- a/src/components/PostPreview/PostPreview.stories.tsx
+++ b/src/components/PostPreview/PostPreview.stories.tsx
@@ -15,7 +15,7 @@ export default {
     //   source: 'https://blog.eleven-labs.com/imgs/articles/2023-01-11-react-day-berlin/mnemonic.jpg',
     //   alt: 'alt',
     // },
-    readingTime: '24mn',
+    readingTime: 24,
     authors: [{ username: 'jdoe', name: 'J. Doe' }],
     excerpt:
       'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit vel tellus in molestie. Curabitur malesuada sodales consectetur. Aliquam convallis nec lacus in euismod. Vestibulum id eros vitae tellus sodales ultricies eget eu ipsum.',

From 15eeff206fd6040c4d0eacde514cfaabab5ab904 Mon Sep 17 00:00:00 2001
From: Eugenia <mariaeugenia.trapani.ext@eulerhermes.com>
Date: Thu, 2 Nov 2023 10:47:18 +0100
Subject: [PATCH 09/16] fix style try

---
 src/components/PostPreview/PostPreview.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/PostPreview/PostPreview.scss b/src/components/PostPreview/PostPreview.scss
index 85b725fe8..4020ab808 100644
--- a/src/components/PostPreview/PostPreview.scss
+++ b/src/components/PostPreview/PostPreview.scss
@@ -79,7 +79,7 @@ $border-radius: 4px;
       justify-content: center;
       height: 100%;
 
-      //! TO BE RESTORED WHEN COVER IMAGE IS FUNCTIONAL
+      // TO BE RESTORED WHEN COVER IMAGE IS FUNCTIONAL
       // div {
       //   width: 30%;
       // }
@@ -92,7 +92,7 @@ $border-radius: 4px;
         border-radius: $border-radius 0 0 $border-radius;
       }
 
-      //! TO BE RESTORED WHEN COVER IMAGE IS FUNCTIONAL
+      // TO BE RESTORED WHEN COVER IMAGE IS FUNCTIONAL
       // article {
       //   width: 70%;
       // }

From f051d582c5b17d27b59111834a3e0efcd974d596 Mon Sep 17 00:00:00 2001
From: Eugenia <mariaeugenia.trapani.ext@eulerhermes.com>
Date: Thu, 2 Nov 2023 11:23:58 +0100
Subject: [PATCH 10/16] comment temporarily image css

---
 src/components/PostPreview/PostPreview.scss | 24 +++++++++++----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/components/PostPreview/PostPreview.scss b/src/components/PostPreview/PostPreview.scss
index 4020ab808..ffdfe8f75 100644
--- a/src/components/PostPreview/PostPreview.scss
+++ b/src/components/PostPreview/PostPreview.scss
@@ -60,10 +60,11 @@ $border-radius: 4px;
     flex-direction: column;
     position: relative;
 
-    img {
-      max-width: 100%;
-      border-radius: $border-radius $border-radius 0 0;
-    }
+    // TO BE RESTORED WHEN COVER IMAGE IS FUNCTIONAL
+    // img {
+    //   max-width: 100%;
+    //   border-radius: $border-radius $border-radius 0 0;
+    // }
 
     article {
       padding: var(--spacing-s);
@@ -84,13 +85,14 @@ $border-radius: 4px;
       //   width: 30%;
       // }
 
-      img {
-        width: 100%;
-        height: 100%;
-        max-height: 13rem;
-        object-fit: cover;
-        border-radius: $border-radius 0 0 $border-radius;
-      }
+      // TO BE RESTORED WHEN COVER IMAGE IS FUNCTIONAL
+      // img {
+      //   width: 100%;
+      //   height: 100%;
+      //   max-height: 13rem;
+      //   object-fit: cover;
+      //   border-radius: $border-radius 0 0 $border-radius;
+      // }
 
       // TO BE RESTORED WHEN COVER IMAGE IS FUNCTIONAL
       // article {

From 6db8d3cb7da7f79e759f437078c0ea3cbf27ceb4 Mon Sep 17 00:00:00 2001
From: Eugenia <mariaeugenia.trapani.ext@eulerhermes.com>
Date: Thu, 2 Nov 2023 15:27:01 +0100
Subject: [PATCH 11/16] add highlightedPost props to PostPreviewList

---
 .../PostPreviewList.stories.tsx               | 32 +++++++++++++++++++
 .../PostPreviewList/PostPreviewList.tsx       | 15 +++++++--
 2 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/src/components/PostPreviewList/PostPreviewList.stories.tsx b/src/components/PostPreviewList/PostPreviewList.stories.tsx
index 32ae4075f..cca62b654 100644
--- a/src/components/PostPreviewList/PostPreviewList.stories.tsx
+++ b/src/components/PostPreviewList/PostPreviewList.stories.tsx
@@ -4,6 +4,7 @@ import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 
 import { PostPreviewList } from '@/components';
+import { ContentTypeEnum } from '@/constants';
 
 export default {
   title: 'Components/PostPreviewList',
@@ -55,3 +56,34 @@ PostPreviewListWithPagination.args = {
     onLoadMore: action('onLoadMore'),
   },
 };
+
+export const PostPreviewListWithHighlightedPost = Template.bind({});
+PostPreviewListWithHighlightedPost.args = {
+  highlightedPost: {
+    contentType: ContentTypeEnum.ARTICLE,
+    title: `Highlighted article`,
+    date: '09 fév. 2021',
+    readingTime: 24,
+    authors: [{ username: 'jdoe', name: 'J. Doe' }],
+    excerpt:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit vel tellus in molestie. Curabitur malesuada sodales consectetur. Aliquam convallis nec lacus in euismod. Vestibulum id eros vitae tellus sodales ultricies eget eu ipsum.',
+    isLoading: false,
+    isHighlighted: true,
+  },
+};
+
+export const PostPreviewListWithHighlightedLoading = Template.bind({});
+PostPreviewListWithHighlightedLoading.args = {
+  isLoading: true,
+  highlightedPost: {
+    contentType: ContentTypeEnum.ARTICLE,
+    title: `Highlighted article`,
+    date: '09 fév. 2021',
+    readingTime: 24,
+    authors: [{ username: 'jdoe', name: 'J. Doe' }],
+    excerpt:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit vel tellus in molestie. Curabitur malesuada sodales consectetur. Aliquam convallis nec lacus in euismod. Vestibulum id eros vitae tellus sodales ultricies eget eu ipsum.',
+    isLoading: true,
+    isHighlighted: true,
+  },
+};
diff --git a/src/components/PostPreviewList/PostPreviewList.tsx b/src/components/PostPreviewList/PostPreviewList.tsx
index 66a358933..e0ee16198 100644
--- a/src/components/PostPreviewList/PostPreviewList.tsx
+++ b/src/components/PostPreviewList/PostPreviewList.tsx
@@ -1,4 +1,4 @@
-import { Button, Flex, Text } from '@eleven-labs/design-system';
+import { Box, Button, Flex, Text } from '@eleven-labs/design-system';
 import React from 'react';
 
 import { Divider, PostPreview, PostPreviewProps, ProgressBar } from '@/components';
@@ -13,10 +13,21 @@ export interface PostPreviewListProps {
     onLoadMore: () => void;
   };
   isLoading?: boolean;
+  highlightedPost?: PostPreviewProps;
 }
 
-export const PostPreviewList: React.FC<PostPreviewListProps> = ({ posts, pagination, isLoading = false }) => (
+export const PostPreviewList: React.FC<PostPreviewListProps> = ({
+  posts,
+  pagination,
+  isLoading = false,
+  highlightedPost,
+}) => (
   <>
+    {highlightedPost && (
+      <Box my="m">
+        <PostPreview {...highlightedPost} />
+      </Box>
+    )}
     {posts.map((post, index) => (
       <React.Fragment key={index}>
         <PostPreview

From ae0fbc399c4e41ed828114c1d2abe76831aeb81b Mon Sep 17 00:00:00 2001
From: Eugenia <mariaeugenia.trapani.ext@eulerhermes.com>
Date: Thu, 2 Nov 2023 15:53:56 +0100
Subject: [PATCH 12/16] add highlighted preview to PostListPage

---
 src/components/PostPreview/PostPreview.scss   |  2 +-
 .../PostPreviewList.stories.tsx               | 32 -------------------
 .../PostPreviewList/PostPreviewList.tsx       | 15 ++-------
 .../PostListPage/PostListPage.stories.tsx     | 13 ++++++++
 src/pages/PostListPage/PostListPage.tsx       | 23 +++++++++++--
 5 files changed, 36 insertions(+), 49 deletions(-)

diff --git a/src/components/PostPreview/PostPreview.scss b/src/components/PostPreview/PostPreview.scss
index ffdfe8f75..33937e129 100644
--- a/src/components/PostPreview/PostPreview.scss
+++ b/src/components/PostPreview/PostPreview.scss
@@ -103,7 +103,7 @@ $border-radius: 4px;
         display: block;
         top: 50%;
         transform: translate(-50%, -50%);
-        left: -2rem;
+        left: calc(var(--spacing-xl) * -1);
         width: 47px;
         height: 108px;
         position: absolute;
diff --git a/src/components/PostPreviewList/PostPreviewList.stories.tsx b/src/components/PostPreviewList/PostPreviewList.stories.tsx
index cca62b654..32ae4075f 100644
--- a/src/components/PostPreviewList/PostPreviewList.stories.tsx
+++ b/src/components/PostPreviewList/PostPreviewList.stories.tsx
@@ -4,7 +4,6 @@ import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 
 import { PostPreviewList } from '@/components';
-import { ContentTypeEnum } from '@/constants';
 
 export default {
   title: 'Components/PostPreviewList',
@@ -56,34 +55,3 @@ PostPreviewListWithPagination.args = {
     onLoadMore: action('onLoadMore'),
   },
 };
-
-export const PostPreviewListWithHighlightedPost = Template.bind({});
-PostPreviewListWithHighlightedPost.args = {
-  highlightedPost: {
-    contentType: ContentTypeEnum.ARTICLE,
-    title: `Highlighted article`,
-    date: '09 fév. 2021',
-    readingTime: 24,
-    authors: [{ username: 'jdoe', name: 'J. Doe' }],
-    excerpt:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit vel tellus in molestie. Curabitur malesuada sodales consectetur. Aliquam convallis nec lacus in euismod. Vestibulum id eros vitae tellus sodales ultricies eget eu ipsum.',
-    isLoading: false,
-    isHighlighted: true,
-  },
-};
-
-export const PostPreviewListWithHighlightedLoading = Template.bind({});
-PostPreviewListWithHighlightedLoading.args = {
-  isLoading: true,
-  highlightedPost: {
-    contentType: ContentTypeEnum.ARTICLE,
-    title: `Highlighted article`,
-    date: '09 fév. 2021',
-    readingTime: 24,
-    authors: [{ username: 'jdoe', name: 'J. Doe' }],
-    excerpt:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit vel tellus in molestie. Curabitur malesuada sodales consectetur. Aliquam convallis nec lacus in euismod. Vestibulum id eros vitae tellus sodales ultricies eget eu ipsum.',
-    isLoading: true,
-    isHighlighted: true,
-  },
-};
diff --git a/src/components/PostPreviewList/PostPreviewList.tsx b/src/components/PostPreviewList/PostPreviewList.tsx
index e0ee16198..66a358933 100644
--- a/src/components/PostPreviewList/PostPreviewList.tsx
+++ b/src/components/PostPreviewList/PostPreviewList.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Flex, Text } from '@eleven-labs/design-system';
+import { Button, Flex, Text } from '@eleven-labs/design-system';
 import React from 'react';
 
 import { Divider, PostPreview, PostPreviewProps, ProgressBar } from '@/components';
@@ -13,21 +13,10 @@ export interface PostPreviewListProps {
     onLoadMore: () => void;
   };
   isLoading?: boolean;
-  highlightedPost?: PostPreviewProps;
 }
 
-export const PostPreviewList: React.FC<PostPreviewListProps> = ({
-  posts,
-  pagination,
-  isLoading = false,
-  highlightedPost,
-}) => (
+export const PostPreviewList: React.FC<PostPreviewListProps> = ({ posts, pagination, isLoading = false }) => (
   <>
-    {highlightedPost && (
-      <Box my="m">
-        <PostPreview {...highlightedPost} />
-      </Box>
-    )}
     {posts.map((post, index) => (
       <React.Fragment key={index}>
         <PostPreview
diff --git a/src/pages/PostListPage/PostListPage.stories.tsx b/src/pages/PostListPage/PostListPage.stories.tsx
index 162a7cfaa..5fa1acad5 100644
--- a/src/pages/PostListPage/PostListPage.stories.tsx
+++ b/src/pages/PostListPage/PostListPage.stories.tsx
@@ -5,6 +5,7 @@ import React from 'react';
 import { PostPreviewList, PostPreviewListProps } from '@/components';
 import NewsletterBlockStories from '@/components/NewsletterBlock/NewsletterBlock.stories';
 import * as PostPreviewListStories from '@/components/PostPreviewList/PostPreviewList.stories';
+import { ContentTypeEnum } from '@/constants';
 import { PostListPage } from '@/pages';
 
 export default {
@@ -26,6 +27,18 @@ export default {
         { label: 'Bonnes pratiques' },
       ],
     },
+    highlightedPostTitle: 'Notre article du moment',
+    highlightedPost: {
+      contentType: ContentTypeEnum.ARTICLE,
+      title: `Highlighted article`,
+      date: '09 fév. 2021',
+      readingTime: 24,
+      authors: [{ username: 'jdoe', name: 'J. Doe' }],
+      excerpt:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit vel tellus in molestie. Curabitur malesuada sodales consectetur. Aliquam convallis nec lacus in euismod. Vestibulum id eros vitae tellus sodales ultricies eget eu ipsum.',
+      isLoading: false,
+      isHighlighted: true,
+    },
     title: 'Tous nos articles',
     postPreviewList: React.createElement<PostPreviewListProps>(PostPreviewList, {
       ...PostPreviewListStories.default.args,
diff --git a/src/pages/PostListPage/PostListPage.tsx b/src/pages/PostListPage/PostListPage.tsx
index a4c6567e0..beb393abc 100644
--- a/src/pages/PostListPage/PostListPage.tsx
+++ b/src/pages/PostListPage/PostListPage.tsx
@@ -1,7 +1,7 @@
-import { Text } from '@eleven-labs/design-system';
+import { Box, Text } from '@eleven-labs/design-system';
 import React from 'react';
 
-import { Container, NewsletterBlock, NewsletterBlockProps } from '@/components';
+import { Container, NewsletterBlock, NewsletterBlockProps, PostPreview, PostPreviewProps } from '@/components';
 
 import { SubHeader, SubHeaderProps } from './SubHeader';
 
@@ -10,13 +10,30 @@ export type PostListPageProps = {
   title: React.ReactNode;
   postPreviewList: React.ReactNode;
   newsletterBlock: NewsletterBlockProps;
+  highlightedPost?: PostPreviewProps;
+  highlightedPostTitle?: string;
 };
 
-export const PostListPage: React.FC<PostListPageProps> = ({ subHeader, title, postPreviewList, newsletterBlock }) => (
+export const PostListPage: React.FC<PostListPageProps> = ({
+  subHeader,
+  title,
+  postPreviewList,
+  newsletterBlock,
+  highlightedPost,
+  highlightedPostTitle,
+}) => (
   <>
     <SubHeader {...subHeader} />
     <Container variant="global" mt={{ xs: 'l', md: 'xl' }}>
       <Container variant="content">
+        {highlightedPost && (
+          <Box mb="xl">
+            <Text size="m" my="s" fontWeight="medium">
+              {highlightedPostTitle}
+            </Text>
+            <PostPreview {...highlightedPost} isHighlighted />
+          </Box>
+        )}
         <Text size="m" my="m" fontWeight="medium">
           {title}
         </Text>

From 9518817df530ef1a292929114c0f45d4b4e8c4dc Mon Sep 17 00:00:00 2001
From: Eugenia <mariaeugenia.trapani.ext@eulerhermes.com>
Date: Thu, 2 Nov 2023 16:05:03 +0100
Subject: [PATCH 13/16] remove image references

---
 src/components/PostPreview/PostPreview.scss   | 25 -------------------
 .../PostPreview/PostPreview.stories.tsx       |  4 ---
 src/components/PostPreview/PostPreview.tsx    |  3 +--
 .../PostPreview/PostPreviewCard.tsx           |  2 --
 4 files changed, 1 insertion(+), 33 deletions(-)

diff --git a/src/components/PostPreview/PostPreview.scss b/src/components/PostPreview/PostPreview.scss
index 33937e129..e3a2da785 100644
--- a/src/components/PostPreview/PostPreview.scss
+++ b/src/components/PostPreview/PostPreview.scss
@@ -60,12 +60,6 @@ $border-radius: 4px;
     flex-direction: column;
     position: relative;
 
-    // TO BE RESTORED WHEN COVER IMAGE IS FUNCTIONAL
-    // img {
-    //   max-width: 100%;
-    //   border-radius: $border-radius $border-radius 0 0;
-    // }
-
     article {
       padding: var(--spacing-s);
     }
@@ -80,25 +74,6 @@ $border-radius: 4px;
       justify-content: center;
       height: 100%;
 
-      // TO BE RESTORED WHEN COVER IMAGE IS FUNCTIONAL
-      // div {
-      //   width: 30%;
-      // }
-
-      // TO BE RESTORED WHEN COVER IMAGE IS FUNCTIONAL
-      // img {
-      //   width: 100%;
-      //   height: 100%;
-      //   max-height: 13rem;
-      //   object-fit: cover;
-      //   border-radius: $border-radius 0 0 $border-radius;
-      // }
-
-      // TO BE RESTORED WHEN COVER IMAGE IS FUNCTIONAL
-      // article {
-      //   width: 70%;
-      // }
-
       .sparkle {
         display: block;
         top: 50%;
diff --git a/src/components/PostPreview/PostPreview.stories.tsx b/src/components/PostPreview/PostPreview.stories.tsx
index e135c37dd..c2a55c09e 100644
--- a/src/components/PostPreview/PostPreview.stories.tsx
+++ b/src/components/PostPreview/PostPreview.stories.tsx
@@ -11,10 +11,6 @@ export default {
     contentType: ContentTypeEnum.ARTICLE,
     title: `Titre de l'article`,
     date: '09 fév. 2021',
-    // image: {
-    //   source: 'https://blog.eleven-labs.com/imgs/articles/2023-01-11-react-day-berlin/mnemonic.jpg',
-    //   alt: 'alt',
-    // },
     readingTime: 24,
     authors: [{ username: 'jdoe', name: 'J. Doe' }],
     excerpt:
diff --git a/src/components/PostPreview/PostPreview.tsx b/src/components/PostPreview/PostPreview.tsx
index 8ebdf6145..361757735 100644
--- a/src/components/PostPreview/PostPreview.tsx
+++ b/src/components/PostPreview/PostPreview.tsx
@@ -36,10 +36,9 @@ export const PostPreview: React.FC<PostPreviewProps> = ({
   isRelated,
   isLoading = false,
   isHighlighted = false,
-  image,
   ...boxProps
 }) => (
-  <PostPreviewCard isHighlighted={isHighlighted} image={image} hasMask={hasMask} isRelated={isRelated} {...boxProps}>
+  <PostPreviewCard isHighlighted={isHighlighted} hasMask={hasMask} isRelated={isRelated} {...boxProps}>
     <PostPreviewContent
       isLoading={isLoading}
       isRelated={isRelated}
diff --git a/src/components/PostPreview/PostPreviewCard.tsx b/src/components/PostPreview/PostPreviewCard.tsx
index 7bde71efb..43796dcb4 100644
--- a/src/components/PostPreview/PostPreviewCard.tsx
+++ b/src/components/PostPreview/PostPreviewCard.tsx
@@ -8,14 +8,12 @@ interface PostPreviewCardProps {
   hasMask?: boolean;
   isRelated?: boolean;
   isLoading?: boolean;
-  image?: { source: string; alt: string };
   isHighlighted?: boolean;
   children: React.ReactNode;
 }
 
 export const PostPreviewCard: React.FC<PostPreviewCardProps> = ({
   isHighlighted,
-  image,
   hasMask,
   isRelated,
   children,

From 74472050b8156c75491e84fe77527a05be33286c Mon Sep 17 00:00:00 2001
From: Eugenia <mariaeugenia.trapani.ext@eulerhermes.com>
Date: Thu, 2 Nov 2023 16:02:55 +0100
Subject: [PATCH 14/16] refacto

---
 .../PostPreview/PostPreviewCard.tsx           | 47 ++++++++-----------
 1 file changed, 20 insertions(+), 27 deletions(-)

diff --git a/src/components/PostPreview/PostPreviewCard.tsx b/src/components/PostPreview/PostPreviewCard.tsx
index 43796dcb4..b41bf657e 100644
--- a/src/components/PostPreview/PostPreviewCard.tsx
+++ b/src/components/PostPreview/PostPreviewCard.tsx
@@ -19,36 +19,29 @@ export const PostPreviewCard: React.FC<PostPreviewCardProps> = ({
   children,
   ...props
 }) => {
-  if (isHighlighted) {
-    return (
+  const Container: React.FC<{ children: React.ReactNode }> = ({ children }) =>
+    isHighlighted ? (
       <Box className={classNames({ 'post-preview--highlighted': isHighlighted })}>
-        {isHighlighted && (
-          <>
-            <div className="sparkle" />
-            {image && <div>{isHighlighted && <img src={image?.source} alt={image?.alt} />}</div>}
-          </>
-        )}
-        <Box
-          as="article"
-          className={classNames(
-            'post-preview',
-            { 'post-preview--mask': hasMask },
-            { 'post-preview--related': isRelated }
-          )}
-          {...props}
-        >
-          {children}
-        </Box>
+        <div className="sparkle" />
+        {image && <div>{isHighlighted && <img src={image?.source} alt={image?.alt} />}</div>}
+        {children}
       </Box>
+    ) : (
+      <>{children}</>
     );
-  }
   return (
-    <Box
-      as="article"
-      className={classNames('post-preview', { 'post-preview--mask': hasMask }, { 'post-preview--related': isRelated })}
-      {...props}
-    >
-      {children}
-    </Box>
+    <Container>
+      <Box
+        as="article"
+        className={classNames(
+          'post-preview',
+          { 'post-preview--mask': hasMask },
+          { 'post-preview--related': isRelated }
+        )}
+        {...props}
+      >
+        {children}
+      </Box>
+    </Container>
   );
 };

From 61fbbb9d25d4eeac946a818113e68ecb93bc5472 Mon Sep 17 00:00:00 2001
From: Eugenia <mariaeugenia.trapani.ext@eulerhermes.com>
Date: Thu, 2 Nov 2023 16:05:32 +0100
Subject: [PATCH 15/16] remove image references

---
 src/components/PostPreview/PostPreviewCard.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/PostPreview/PostPreviewCard.tsx b/src/components/PostPreview/PostPreviewCard.tsx
index b41bf657e..87166088c 100644
--- a/src/components/PostPreview/PostPreviewCard.tsx
+++ b/src/components/PostPreview/PostPreviewCard.tsx
@@ -23,7 +23,6 @@ export const PostPreviewCard: React.FC<PostPreviewCardProps> = ({
     isHighlighted ? (
       <Box className={classNames({ 'post-preview--highlighted': isHighlighted })}>
         <div className="sparkle" />
-        {image && <div>{isHighlighted && <img src={image?.source} alt={image?.alt} />}</div>}
         {children}
       </Box>
     ) : (

From 534c07fefcddf771b95a38e1415bc3498d7b8ac3 Mon Sep 17 00:00:00 2001
From: Eugenia <mariaeugenia.trapani.ext@eulerhermes.com>
Date: Thu, 2 Nov 2023 16:14:09 +0100
Subject: [PATCH 16/16] remove unused component

---
 .../PostPreview/PostPreviewFooter.tsx         | 35 -------------------
 1 file changed, 35 deletions(-)
 delete mode 100644 src/components/PostPreview/PostPreviewFooter.tsx

diff --git a/src/components/PostPreview/PostPreviewFooter.tsx b/src/components/PostPreview/PostPreviewFooter.tsx
deleted file mode 100644
index 54d9c23b6..000000000
--- a/src/components/PostPreview/PostPreviewFooter.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Box, Skeleton, Text } from '@eleven-labs/design-system';
-import React from 'react';
-
-import { SeparatorCircle } from '@/components';
-
-interface PostPreviewFooterProps {
-  isLoading?: boolean;
-  date?: React.ReactNode;
-  readingTime?: number;
-  authors?: { username: string; name: string }[];
-}
-
-export const PostPreviewFooter: React.FC<PostPreviewFooterProps> = ({ isLoading, date, readingTime, authors }) => {
-  return (
-    <Box mt={{ xs: 'xs', md: 's' }} textSize="xs">
-      <Skeleton isLoading={isLoading} display="inline-block" style={{ width: 100 }}>
-        {date && <Text as="span">{date}</Text>}
-      </Skeleton>
-      <SeparatorCircle />
-      <Skeleton isLoading={isLoading} display="inline-block" style={{ width: 50 }}>
-        {readingTime && <Text as="span">{readingTime}</Text>}
-      </Skeleton>
-      <SeparatorCircle />
-      <Skeleton isLoading={isLoading} display="inline-block" style={{ width: 100 }}>
-        {authors &&
-          authors.map((author, authorIndex) => (
-            <Text key={author.username} as="span">
-              {author.name}
-              {authorIndex !== authors.length - 1 ? ' & ' : ''}
-            </Text>
-          ))}
-      </Skeleton>
-    </Box>
-  );
-};