feat(Wallet): Vertical Slide (#449)

* feat: Hero section

* fix: lint

* feat: add "Watch demo" play button

* fix: control video play

* feat: add a bottom gradient over the paused video

* styles: fix border-radius on video

* feat: temporarily use /wallet-new slug because page path  conflct with the current version

* feat: commonCMS/Marquee

* feat: generic Card grid

* feat: Vertical Slide

* feat: display images when clicking the cards

* fix: lint

* fix: undo unrelated changes

* feat: declare VerticalSlide content in wallet.json

* styles: mobile styles

* fix: extract expression to a variable

src/components/Wallet/VerticalSlide/index.tsx

@@ -0,0 +1,84 @@
+import { useEffect, useState } from 'react'
+import { ButtonBase, Container, Grid, Typography } from '@mui/material'
+import type { BaseBlock } from '@/components/Home/types'
+import BracketLeft from '@/public/images/Wallet/VerticalSlide/bracket-left.svg'
+import RecoveryIcon from '@/public/images/Wallet/VerticalSlide/recovery.svg'
+import ScanIcon from '@/public/images/Wallet/VerticalSlide/scan.svg'
+import MultipleKeysIcon from '@/public/images/Wallet/VerticalSlide/multiple-keys.svg'
+import BracketRight from '@/public/images/Wallet/VerticalSlide/bracket-right.svg'
+import layoutCss from '@/components/common/styles.module.css'
+import css from './styles.module.css'
+
+const icons = [<RecoveryIcon key="recovery" />, <ScanIcon key="scan" />, <MultipleKeysIcon key="multiple-keys" />]
+
+const VerticalSlide = ({ title, items = [] }: BaseBlock) => {
+  const [selectedIndex, setSelectedIndex] = useState(0)
+
+  const itemsImages = items.map((item) => item.image)
+  const selectedImage = itemsImages[selectedIndex]
+
+  const handleCardClick = (index: number) => {
+    setSelectedIndex(index)
+  }
+
+  // Change index every 5 seconds
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setSelectedIndex((prevIndex) => (prevIndex + 1) % items?.length)
+    }, 5000)
+
+    return () => clearInterval(interval) // Cleanup interval on component unmount
+  }, [items.length])
+
+  return (
+    <Container className={layoutCss.containerShort}>
+      <Typography variant="h2" className={css.title}>
+        {title}
+      </Typography>
+
+      <Grid container spacing="40px" justifyContent="flex-end">
+        <Grid item md={7} className={css.imageItem}>
+          <div className={css.showInMd}>
+            <BracketLeft />
+            {icons.map((icon, index) => (
+              <span key={index} className={index === selectedIndex ? css.selected : undefined}>
+                {icon}
+              </span>
+            ))}
+            <BracketRight />
+          </div>
+
+          {selectedImage ? <img src={selectedImage.src} alt={selectedImage.alt} className={css.image} /> : null}
+        </Grid>
+
+        <Grid item xs={12} md={5}>
+          <div className={css.cardWrapper}>
+            {items.map((item, index) => {
+              const { title, text } = item
+
+              return (
+                <Grid item key={index} xs={12}>
+                  <ButtonBase
+                    onClick={() => handleCardClick(index)}
+                    disableRipple
+                    className={`${css.card} ${index === selectedIndex ? css.selected : ''}`}
+                  >
+                    <Typography variant="h5">{title}</Typography>
+
+                    {text && (
+                      <Typography color="primary.light" component="div">
+                        {text}
+                      </Typography>
+                    )}
+                  </ButtonBase>
+                </Grid>
+              )
+            })}
+          </div>
+        </Grid>
+      </Grid>
+    </Container>
+  )
+}
+
+export default VerticalSlide

src/components/Wallet/VerticalSlide/styles.module.css

@@ -0,0 +1,65 @@
+.title {
+  text-align: center;
+  max-width: 650px;
+  margin-bottom: 48px;
+}
+
+.image {
+  height: 300px;
+  object-fit: contain;
+}
+
+.showInMd {
+  display: none;
+}
+
+.cardWrapper {
+  border-radius: 6px;
+  border: 1px solid var(--mui-palette-border-light);
+  overflow: hidden;
+}
+
+.card {
+  border-bottom: 1px solid var(--mui-palette-border-light);
+  margin-bottom: -1px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 48px 40px;
+  text-align: left;
+}
+
+.card.selected::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 4px;
+  background-color: var(--mui-palette-primary-main);
+}
+
+.selected {
+  color: var(--mui-palette-primary-main);
+}
+
+@media (min-width: 900px) {
+  .title {
+    margin-bottom: 80px;
+  }
+
+  .imageItem {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 40px;
+  }
+
+  .image {
+    height: 450px;
+  }
+
+  .showInMd {
+    display: block;
+  }
+}

src/content/wallet.json

@@ -78,6 +78,36 @@
     ],
     "component": "common/TitleSlidingIcons"
   },
+  {
+    "component": "Wallet/VerticalSlide",
+    "title": "Defend assets with <b>multi-signature</b> security",
+    "items": [
+      {
+        "title": "Eliminate single points of failure",
+        "text": "Distribute control across multiple owners and require for enhanced security.",
+        "image": {
+          "src": "/images/Wallet/VerticalSlide/eliminate-single-pof.png",
+          "alt": "Execute multisig"
+        }
+      },
+      {
+        "title": "Simulate and scan transactions",
+        "text": "Transact with confidence with risk scanning and transaction simulation before executing.",
+        "image": {
+          "src": "/images/Wallet/VerticalSlide/simulate-scan-tx.png",
+          "alt": "Simulate and scan transactions"
+        }
+      },
+      {
+        "title": "Restore access to your account",
+        "text": "Never lose access to your account. Restore account control easily with secure recovery mechanisms.",
+        "image": {
+          "src": "/images/Wallet/VerticalSlide/restore-access.png",
+          "alt": "Activate recovery"
+        }
+      }
+    ]
+  },
   {
     "items": [
       {