From c7655a45817d68e38e37679aef55f06611c2f413 Mon Sep 17 00:00:00 2001
From: Usame Algan <usame@safe.global>
Date: Mon, 30 Oct 2023 16:44:31 +0100
Subject: [PATCH] feat: Add alternative welcome page

---
 src/components/sidebar/Sidebar/index.tsx      |   2 +-
 src/components/welcome/NewSafe.tsx            |  50 +------
 src/components/welcome/NewSafeSocial.tsx      |  85 +++++++++++
 .../{ => SafeListDrawer}/DataWidget.tsx       |   0
 .../welcome/SafeListDrawer/index.tsx          |  55 +++++++
 .../welcome/SafeListDrawer/styles.module.css  |  33 +++++
 src/components/welcome/styles.module.css      | 135 ++++++++++--------
 src/config/routes.ts                          |   1 +
 src/pages/welcome-lp.tsx                      |  17 +++
 9 files changed, 274 insertions(+), 104 deletions(-)
 create mode 100644 src/components/welcome/NewSafeSocial.tsx
 rename src/components/welcome/{ => SafeListDrawer}/DataWidget.tsx (100%)
 create mode 100644 src/components/welcome/SafeListDrawer/index.tsx
 create mode 100644 src/components/welcome/SafeListDrawer/styles.module.css
 create mode 100644 src/pages/welcome-lp.tsx

diff --git a/src/components/sidebar/Sidebar/index.tsx b/src/components/sidebar/Sidebar/index.tsx
index f25d8798d3..b8b46e9a5c 100644
--- a/src/components/sidebar/Sidebar/index.tsx
+++ b/src/components/sidebar/Sidebar/index.tsx
@@ -10,7 +10,7 @@ import SidebarFooter from '@/components/sidebar/SidebarFooter'
 
 import css from './styles.module.css'
 import { trackEvent, OVERVIEW_EVENTS } from '@/services/analytics'
-import { DataWidget } from '@/components/welcome/DataWidget'
+import { DataWidget } from '@/components/welcome/SafeListDrawer/DataWidget'
 
 const Sidebar = (): ReactElement => {
   const [isDrawerOpen, setIsDrawerOpen] = useState<boolean>(false)
diff --git a/src/components/welcome/NewSafe.tsx b/src/components/welcome/NewSafe.tsx
index 409b495b16..46d51deb55 100644
--- a/src/components/welcome/NewSafe.tsx
+++ b/src/components/welcome/NewSafe.tsx
@@ -1,17 +1,10 @@
-import React, { useState } from 'react'
-import { Accordion, AccordionSummary, Box, Drawer, Grid, IconButton, SvgIcon, Typography } from '@mui/material'
-import SafeList from '@/components/sidebar/SafeList'
+import React from 'react'
+import { Box, Grid, SvgIcon, Typography } from '@mui/material'
 import css from './styles.module.css'
 import CheckFilled from '@/public/images/common/check-filled.svg'
 
-import ChevronRightIcon from '@mui/icons-material/ChevronRight'
-import { DataWidget } from '@/components/welcome/DataWidget'
 import WelcomeLogin from './WelcomeLogin'
-import { useAppSelector } from '@/store'
-import { selectTotalAdded } from '@/store/addedSafesSlice'
-
-import drawerCSS from '@/components/sidebar/Sidebar/styles.module.css'
-import useOwnedSafes from '@/hooks/useOwnedSafes'
+import SafeListDrawer from '@/components/welcome/SafeListDrawer'
 
 const BulletListItem = ({ text }: { text: string }) => (
   <li>
@@ -23,26 +16,8 @@ const BulletListItem = ({ text }: { text: string }) => (
 )
 
 const NewSafe = () => {
-  const numberOfAddedSafes = useAppSelector(selectTotalAdded)
-  const ownedSafes = useOwnedSafes()
-  const numberOfOwnedSafes = Object.values(ownedSafes).reduce((acc, curr) => acc + curr.length, 0)
-  const totalNumberOfSafes = numberOfOwnedSafes + numberOfAddedSafes
-
-  const [showSidebar, setShowSidebar] = useState(false)
-
-  const closeSidebar = () => setShowSidebar(false)
-
   return (
     <>
-      <Drawer variant="temporary" anchor="left" open={showSidebar} onClose={closeSidebar}>
-        <div className={drawerCSS.drawer}>
-          <SafeList closeDrawer={closeSidebar} />
-
-          <div className={drawerCSS.dataWidget}>
-            <DataWidget />
-          </div>
-        </div>
-      </Drawer>
       <Grid container spacing={3} p={3} pb={0} flex={1} direction="row-reverse">
         <Grid item xs={12} lg={6}>
           <WelcomeLogin />
@@ -50,24 +25,7 @@ const NewSafe = () => {
         <Grid item xs={12} lg={6} flex={1}>
           <div className={css.content}>
             <Box minWidth={{ md: 480 }} className={css.sidebar}>
-              {totalNumberOfSafes > 0 ? (
-                <Box display="flex" flexDirection="column">
-                  <Box flex={1}>
-                    <Accordion className={css.accordion} onClick={() => setShowSidebar(true)} expanded={false}>
-                      <AccordionSummary>
-                        <Box display="flex" flexDirection="row" alignItems="center" width="100%" gap={2}>
-                          <IconButton sx={{ mr: 'auto', padding: '4px' }}>
-                            <ChevronRightIcon />
-                          </IconButton>
-                          <Typography sx={{ mr: 'auto' }} variant="h4" display="inline" fontWeight={700}>
-                            My Safe Accounts ({totalNumberOfSafes})
-                          </Typography>
-                        </Box>
-                      </AccordionSummary>
-                    </Accordion>
-                  </Box>
-                </Box>
-              ) : null}
+              <SafeListDrawer />
             </Box>
 
             <Typography variant="h1" fontSize={[44, null, 52]} lineHeight={1} letterSpacing={-1.5} color="static.main">
diff --git a/src/components/welcome/NewSafeSocial.tsx b/src/components/welcome/NewSafeSocial.tsx
new file mode 100644
index 0000000000..96ff544259
--- /dev/null
+++ b/src/components/welcome/NewSafeSocial.tsx
@@ -0,0 +1,85 @@
+import React from 'react'
+import { Box, Button, Grid, Typography } from '@mui/material'
+import css from './styles.module.css'
+import Link from 'next/link'
+
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'
+import WelcomeLogin from './WelcomeLogin'
+import GnosisChainLogo from '@/public/images/common/gnosis-chain-logo.png'
+import Image from 'next/image'
+import SafeListDrawer from '@/components/welcome/SafeListDrawer'
+
+const BulletListItem = ({ text }: { text: string }) => (
+  <li>
+    <Typography color="static.main" fontWeight={700}>
+      {text}
+    </Typography>
+  </li>
+)
+
+const MarqueeItem = () => {
+  return (
+    <li className={css.marqueeItem}>
+      Free on
+      <Image src={GnosisChainLogo} alt="Gnosis Chain logo" width={24} height={24} />
+      Gnosis Chain
+    </li>
+  )
+}
+
+const NewSafeSocial = () => {
+  return (
+    <>
+      <Grid container spacing={3} p={3} pb={0} flex={1} direction="row-reverse">
+        <Grid item xs={12} lg={6}>
+          <WelcomeLogin />
+        </Grid>
+        <Grid item xs={12} lg={6} flex={1}>
+          <div className={css.content}>
+            <Box minWidth={{ md: 480 }} className={css.sidebar}>
+              <SafeListDrawer />
+            </Box>
+
+            <Box pt={5} alignSelf="center" margin="auto">
+              <Typography
+                variant="h1"
+                fontSize={[44, null, 52]}
+                lineHeight={1.15}
+                letterSpacing={-1.5}
+                color="static.main"
+              >
+                Get started in 30 seconds with your Google Account
+              </Typography>
+
+              <ul className={css.numberList}>
+                <BulletListItem text="Choose your Google Account" />
+                <BulletListItem text="Review, wait and you’re done!" />
+                <BulletListItem text="Add more signers later to level up your security" />
+              </ul>
+
+              {/* TODO: Replace with actual link */}
+              <Link href="https://safe.global" passHref>
+                <Button startIcon={<ChevronLeftIcon />}>Back to landing page</Button>
+              </Link>
+            </Box>
+
+            <div className={css.marquee}>
+              <ul className={css.marqueeContent}>
+                <MarqueeItem />
+                <MarqueeItem />
+                <MarqueeItem />
+              </ul>
+              <ul className={css.marqueeContent} aria-hidden="true">
+                <MarqueeItem />
+                <MarqueeItem />
+                <MarqueeItem />
+              </ul>
+            </div>
+          </div>
+        </Grid>
+      </Grid>
+    </>
+  )
+}
+
+export default NewSafeSocial
diff --git a/src/components/welcome/DataWidget.tsx b/src/components/welcome/SafeListDrawer/DataWidget.tsx
similarity index 100%
rename from src/components/welcome/DataWidget.tsx
rename to src/components/welcome/SafeListDrawer/DataWidget.tsx
diff --git a/src/components/welcome/SafeListDrawer/index.tsx b/src/components/welcome/SafeListDrawer/index.tsx
new file mode 100644
index 0000000000..afa8f5418d
--- /dev/null
+++ b/src/components/welcome/SafeListDrawer/index.tsx
@@ -0,0 +1,55 @@
+import React, { useState } from 'react'
+import SafeList from '@/components/sidebar/SafeList'
+import { DataWidget } from '@/components/welcome/SafeListDrawer/DataWidget'
+import { Button, Drawer, Typography } from '@mui/material'
+import ChevronRightIcon from '@mui/icons-material/ChevronRight'
+import { useAppSelector } from '@/store'
+import { selectTotalAdded } from '@/store/addedSafesSlice'
+import useOwnedSafes from '@/hooks/useOwnedSafes'
+import drawerCSS from '@/components/sidebar/Sidebar/styles.module.css'
+import css from './styles.module.css'
+
+const SafeListDrawer = () => {
+  const numberOfAddedSafes = useAppSelector(selectTotalAdded)
+  const ownedSafes = useOwnedSafes()
+  const numberOfOwnedSafes = Object.values(ownedSafes).reduce((acc, curr) => acc + curr.length, 0)
+  const totalNumberOfSafes = numberOfOwnedSafes + numberOfAddedSafes
+  const [showSidebar, setShowSidebar] = useState(false)
+
+  const closeSidebar = () => setShowSidebar(false)
+
+  if (totalNumberOfSafes <= 0) {
+    return null
+  }
+
+  return (
+    <>
+      <Drawer variant="temporary" anchor="left" open={showSidebar} onClose={closeSidebar}>
+        <div className={drawerCSS.drawer}>
+          <SafeList closeDrawer={closeSidebar} />
+
+          <div className={drawerCSS.dataWidget}>
+            <DataWidget />
+          </div>
+        </div>
+      </Drawer>
+      <Button
+        className={css.button}
+        fullWidth
+        variant="contained"
+        color="background"
+        startIcon={<ChevronRightIcon />}
+        onClick={() => setShowSidebar(true)}
+      >
+        <Typography className={css.buttonText} fontWeight="bold">
+          My Safe Accounts{' '}
+          <Typography color="text.secondary" fontWeight="bold">
+            ({totalNumberOfSafes})
+          </Typography>
+        </Typography>
+      </Button>
+    </>
+  )
+}
+
+export default SafeListDrawer
diff --git a/src/components/welcome/SafeListDrawer/styles.module.css b/src/components/welcome/SafeListDrawer/styles.module.css
new file mode 100644
index 0000000000..5aed51e96f
--- /dev/null
+++ b/src/components/welcome/SafeListDrawer/styles.module.css
@@ -0,0 +1,33 @@
+.button {
+  padding: var(--space-2);
+}
+
+.buttonText {
+  align-self: center;
+  margin: auto;
+  display: flex;
+  gap: var(--space-1);
+}
+
+.fileIcon {
+  display: flex;
+  align-items: center;
+  padding: var(--space-1);
+  background-color: var(--color-background-main);
+}
+
+.card {
+  padding: var(--space-3);
+  gap: var(--space-2);
+  display: flex;
+  flex-direction: column;
+}
+
+.card :global .MuiCardHeader-root,
+.card :global .MuiCardContent-root {
+  padding: 0;
+}
+
+.cardHeader {
+  text-align: left;
+}
diff --git a/src/components/welcome/styles.module.css b/src/components/welcome/styles.module.css
index 2b8c377b76..a56f403253 100644
--- a/src/components/welcome/styles.module.css
+++ b/src/components/welcome/styles.module.css
@@ -1,22 +1,3 @@
-.accordion :global .MuiAccordionDetails-root > div > div:first-child {
-  display: none;
-}
-
-.accordion {
-  border: 0;
-  height: 100%;
-}
-
-.accordion :global .MuiAccordionSummary-root {
-  background: transparent !important;
-  padding: var(--space-2);
-  border-bottom: 1px solid var(--color-border-light);
-}
-
-.accordion :global .MuiAccordionSummary-content {
-  margin: 0;
-}
-
 .sidebar {
   max-height: calc(100vh - var(--header-height) - var(--footer-height) - 8px);
   overflow-y: auto;
@@ -39,52 +20,83 @@
   margin-bottom: var(--space-2);
 }
 
-.content {
-  background: linear-gradient(-90deg, #10ff84, #5fddff);
-  background-size: 200% 200%;
-  animation: gradient 15s ease infinite;
-  border-radius: 6px;
-  padding: var(--space-3);
+.numberList {
+  margin: var(--space-5) 0;
+  padding: 0;
+  list-style: none;
+}
+
+.numberList li {
   display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: var(--space-2);
-  width: 100%;
-  height: 100%;
+  flex-direction: row;
+  gap: var(--space-1);
+  align-items: center;
+  margin-bottom: var(--space-2);
+  counter-increment: item;
 }
 
-.checkIcon {
-  color: var(--color-static-main);
+.numberList li:before {
+  margin-right: var(--space-1);
+  content: counter(item);
+  background: var(--color-primary-main);
+  border-radius: 100%;
+  color: white;
+  width: 32px;
+  height: 32px;
+  line-height: 32px;
+  font-size: 18px;
+  text-align: center;
+  flex-shrink: 0;
 }
 
-.createAddCard {
+.marquee {
   display: flex;
-  flex-direction: column;
-  padding: var(--space-4);
-  height: 100%;
+  overflow: hidden;
+  user-select: none;
+  gap: var(--space-6);
+  background-color: var(--color-static-main);
+  color: white;
+  padding: 20px;
+  margin: var(--space-3) calc(-1 * var(--space-9)) calc(-1 * var(--space-3));
+}
+
+.marqueeContent {
+  margin: 0;
+  padding: 0;
+  flex-shrink: 0;
+  display: flex;
+  justify-content: space-around;
+  min-width: 100%;
+  gap: var(--space-6);
+  animation: scroll 10s linear infinite;
 }
 
-.fileIcon {
+.marqueeItem {
+  font-size: 18px;
   display: flex;
   align-items: center;
-  padding: var(--space-1);
-  background-color: var(--color-background-main);
 }
 
-.card {
-  padding: var(--space-3);
-  gap: var(--space-2);
-  display: flex;
-  flex-direction: column;
+.marqueeItem img {
+  margin: 0 var(--space-1);
 }
 
-.card :global .MuiCardHeader-root,
-.card :global .MuiCardContent-root {
-  padding: 0;
+.content {
+  background: linear-gradient(-90deg, #10ff84, #5fddff);
+  background-size: 200% 200%;
+  animation: gradient 15s ease infinite;
+  border-radius: 6px;
+  padding: var(--space-9);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--space-2);
+  width: 100%;
+  height: 100%;
 }
 
-.cardHeader {
-  text-align: left;
+.checkIcon {
+  color: var(--color-static-main);
 }
 
 @media (max-width: 899.95px) {
@@ -92,23 +104,23 @@
     height: 100%;
   }
 
-  .accordion {
-    height: auto;
-  }
-
-  .accordion :global .MuiAccordionSummary-expandIconWrapper {
-    display: block;
-  }
-
   .content {
     padding: var(--space-6);
   }
+
+  .marquee {
+    margin: var(--space-3) calc(-1 * var(--space-6)) calc(-1 * var(--space-3));
+  }
 }
 
 @media (max-width: 599.95px) {
   .content {
     padding: var(--space-4);
   }
+
+  .marquee {
+    margin: var(--space-3) calc(-1 * var(--space-4)) 0;
+  }
 }
 
 @keyframes gradient {
@@ -122,3 +134,12 @@
     background-position: 0 50%;
   }
 }
+
+@keyframes scroll {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(calc(-100% - var(--space-6)));
+  }
+}
diff --git a/src/config/routes.ts b/src/config/routes.ts
index 34b6848e00..0bd0b64ff4 100644
--- a/src/config/routes.ts
+++ b/src/config/routes.ts
@@ -1,6 +1,7 @@
 export const AppRoutes = {
   '404': '/404',
   welcome: '/welcome',
+  welcomeLp: '/welcome-lp',
   terms: '/terms',
   privacy: '/privacy',
   licenses: '/licenses',
diff --git a/src/pages/welcome-lp.tsx b/src/pages/welcome-lp.tsx
new file mode 100644
index 0000000000..13cdb87486
--- /dev/null
+++ b/src/pages/welcome-lp.tsx
@@ -0,0 +1,17 @@
+import type { NextPage } from 'next'
+import Head from 'next/head'
+import NewSafeSocial from '@/components/welcome/NewSafeSocial'
+
+const Welcome: NextPage = () => {
+  return (
+    <>
+      <Head>
+        <title>{'Safe{Wallet} – Welcome'}</title>
+      </Head>
+
+      <NewSafeSocial />
+    </>
+  )
+}
+
+export default Welcome