[Seedless Onboarding] Add alternative welcome page

src/components/sidebar/SafeList/index.tsx

@@ -82,7 +82,7 @@ const SafeList = ({ closeDrawer }: { closeDrawer?: () => void }): ReactElement =
 
   const hasWallet = !!wallet
   const hasNoSafes = Object.keys(ownedSafes).length === 0 && Object.keys(addedSafes).length === 0
-  const isWelcomePage = router.pathname === AppRoutes.welcome
+  const isWelcomePage = router.pathname === AppRoutes.welcome || router.pathname === AppRoutes.welcomeLp
   const isSingleTxPage = router.pathname === AppRoutes.transactions.tx
 
   /**

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)

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,51 +16,16 @@ 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 />
         </Grid>
         <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">

src/components/welcome/NewSafeSocial.tsx

@@ -0,0 +1,87 @@
+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 and possibly add tracking */}
+              <Link href="https://safe.global" passHref>
+                <Button startIcon={<ChevronLeftIcon />} className={css.button}>
+                  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

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

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;
+}