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,59 +183,29 @@ section.faq {
         display: flex;
     }
 
+    h3 {
+        color: var(--brand-1);
+    }
+
     ul {
         list-style-type: none;
         margin: 0;
         padding: 0;
-
-        li {
-            margin-bottom: 1em;
-
-            &:last-of-type {
-                margin-bottom: 0;
-            }            
-
-            .card {
-                border: 1px solid transparent;
-            }
-
-            &.selected .card {
-                border: 1px solid var(--brand-1);
-            }            
-        }
-    }
-
-    .details {
-        flex-basis: 50%;
-        flex-shrink: 0;
-
-        @media (max-width: 719px) {
-            margin-top: 1em;
-        }
-    }
-
-    &.horizontal {
-        flex-direction: column-reverse;
-
-        ul {
         gap: 1em;
         display: grid;
         
         @media (min-width: 720px) {
             grid-template-columns: 1fr 1fr 1fr;                
         }
-        }
 
         li {
             margin: 0;        
-        }
 
             .card {
+                border: 1px solid transparent;
                 height: 100%;
             }     
-
+        }
-        h3 {
-            color: var(--brand-1);
     }
 
     .details {
@@ -244,11 +214,12 @@ section.faq {
         display: flex;
         flex-direction: column;
 
+        @media (max-width: 719px) {
+            margin-top: 1em;
+        }
+    }
+
     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>
     )
 }