style(website): redesign list with screenshot

apps/website/public/translations/en/translation.json

@@ -97,8 +97,7 @@
     "get_started": "Get started"
   },
   "components": {
-    "link_learn_more": "Learn more...",
+    "link_learn_more": "Learn more..."
-    "list_with_screenshot_alt": "Screenshot of the feature being selected"
   },
   "download_now": {
     "text": "Download now ",

apps/website/src/pages/Home/index.css

@@ -183,72 +183,43 @@ section.faq {
         display: flex;
     }
 
+    h3 {
+        color: var(--brand-1);
+    }
+
     ul {
         list-style-type: none;
         margin: 0;
         padding: 0;
+        gap: 1em;
+        display: grid;
+        
+        @media (min-width: 720px) {
+            grid-template-columns: 1fr 1fr 1fr;                
+        }
 
         li {
-            margin-bottom: 1em;
+            margin: 0;        
-
-            &:last-of-type {
-                margin-bottom: 0;
-            }            
 
             .card {
                 border: 1px solid transparent;
-            }
+                height: 100%;
-
-            &.selected .card {
-                border: 1px solid var(--brand-1);
             }     
         }
     }
 
     .details {
-        flex-basis: 50%;
+        max-height: 35vh;
-        flex-shrink: 0;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
 
         @media (max-width: 719px) {
             margin-top: 1em;
         }
     }
 
-    &.horizontal {
+    img {
-        flex-direction: column-reverse;
+        object-fit: contain;
-
-        ul {
-            gap: 1em;
-            display: grid;
-            
-            @media (min-width: 720px) {
-                grid-template-columns: 1fr 1fr 1fr;                
-            }
-        }
-
-        li {
-            margin: 0;
-        }
-
-        .card {
-            height: 100%;
-        }
-
-        h3 {
-            color: var(--brand-1);
-        }
-
-        .details {
-            max-height: 35vh;
-            overflow: hidden;
-            display: flex;
-            flex-direction: column;
-
-            img {
-                height: 100%;
-                width: auto;
-                object-fit: contain;
-            }
-        }
     }
 }

apps/website/src/pages/Home/index.tsx

@@ -132,7 +132,7 @@ function NoteTypesSection() {
     const { t } = useTranslation();
     return (
         <Section className="note-types" title={t("note_types.title")}>
-            <ListWithScreenshot horizontal items={[
+            <ListWithScreenshot items={[
                 {
                     title: t("note_types.text_title"),
                     imageUrl: "/type_text.webp",
@@ -246,39 +246,26 @@ function CollectionsSection() {
     );
 }
 
-function ListWithScreenshot({ items, horizontal, cardExtra }: {
+function ListWithScreenshot({ items, cardExtra }: {
     items: { title: string, imageUrl: string, description: string, moreInfo: string, iconSvg?: string }[];
-    horizontal?: boolean;
     cardExtra?: ComponentChildren;
 }) {
-    const [ selectedItem, setSelectedItem ] = useState(items[0]);
-    const { t } = useTranslation();
-
     return (
-        <div className={`list-with-screenshot ${horizontal ? "horizontal" : ""}`}>
+        <div className={`list-with-screenshot`}>
             <ul>
                 {items.map(item => (
-                    <li className={`${item === selectedItem ? "selected" : ""}`}>
+                    <li>
                         <Card
                             title={item.title}
-                            onMouseEnter={() => setSelectedItem(item)}
-                            onClick={() => setSelectedItem(item)}
                             moreInfoUrl={item.moreInfo}
                             iconSvg={item.iconSvg}
+                            imageUrl={item.imageUrl}
                         >
                             {item.description}
                         </Card>
                     </li>
                 ))}
             </ul>
-
-            <div className="details">
-                {selectedItem && (
-                    <>
-                        <img src={selectedItem.imageUrl} alt={t("components.list_with_screenshot_alt")} loading="lazy" />
-                    </>
-                )}
-            </div>
         </div>
     )
 }