[website] - Add Wallet page (#419)

* feat: add wallet page and all its necessary components

* feat: border and address element

* feat: add navigation with responsive view

* feat: add floating menu for mobile version

* fix: floating menu mobile

* fix: menu floating and footer

* feat: adds prefooter and fixes footer and pages layouts

* fix: footer mobile border

* fix: pages with new layout

* fix: minor fixes

* fix: some minor fixes

* fix: changes from review

* fix: performance safari issue

* fix: changes from review

* feat: add grid hero component with proper variants

* fix: remove unnecessary prop

* feat: some improvements to shared components

* fix: nav-desktop z-index

* add passive option to scroll listener

* lint tailwind classnames

---------

Co-authored-by: Pavel Prichodko <14926950+prichodko@users.noreply.github.com>

apps/website/src/components/cards/grid-hero.tsx

@@ -0,0 +1,161 @@
+import { cva } from 'class-variance-authority'
+import Image from 'next/image'
+
+import type { StaticImageData } from 'next/image'
+
+// Variants for the grid hero class names
+const biggerCardClassNames = cva(
+  [
+    'min-w-[350px] rounded-[40px]',
+    'px-[22px] py-6 sm:min-w-0 sm:px-[35px] sm:py-[48px] lg:px-5 xl:px-[34px] xl:py-[68px] 2xl:px-[73px]',
+  ],
+  {
+    variants: {
+      color: {
+        yellow: ['bg-customisation-yellow/10'],
+        turquoise: ['bg-customisation-turquoise/10'],
+        purple: ['bg-customisation-purple/10'],
+      },
+    },
+  }
+)
+
+const imagesWithBorders = cva(['border-4', 'rounded-3xl'], {
+  variants: {
+    color: {
+      yellow: ['border-customisation-yellow/5'],
+      turquoise: ['border-customisation-turquoise/5'],
+      purple: ['border-customisation-purple/5'],
+    },
+  },
+})
+
+const imagesWithBordersTopOrBottom = cva(['border-4', 'rounded-3xl'], {
+  variants: {
+    color: {
+      yellow: ['border-customisation-yellow/5'],
+      turquoise: ['border-customisation-turquoise/5'],
+      purple: ['border-customisation-purple/5'],
+    },
+    alignment: {
+      top: ['border-t-0'],
+      bottom: ['border-b-0'],
+    },
+  },
+})
+
+const thirdCardClassNames = cva(
+  [
+    'flex min-w-[calc(50%-10px)] rounded-[40px]',
+    'px-[22px] sm:min-w-0 sm:px-[35px] lg:px-5 xl:px-[34px]  2xl:px-[73px]',
+  ],
+  {
+    variants: {
+      color: {
+        yellow: ['bg-customisation-yellow/10'],
+        turquoise: ['bg-customisation-turquoise/10'],
+        purple: ['bg-customisation-purple/10'],
+      },
+      alignment: {
+        top: [
+          'pt-0',
+          'pb-6 sm:pb-[48px] xl:pb-[68px]',
+          'items-start',
+          'justify-start',
+        ],
+        bottom: [
+          'pb-0',
+          'pt-6 sm:pt-[48px] xl:pt-[68px]',
+          'items-end',
+          'justify-end',
+        ],
+      },
+    },
+  }
+)
+
+const fourthCardClassNames = cva(
+  [
+    'flex min-w-[calc(50%-10px)] rounded-[40px]',
+    'grow items-center justify-center px-0 sm:px-5 md:px-10 lg:px-5 2xl:px-10',
+  ],
+  {
+    variants: {
+      color: {
+        yellow: ['bg-customisation-yellow/10'],
+        turquoise: ['bg-customisation-turquoise/10'],
+        purple: ['bg-customisation-purple/10'],
+      },
+    },
+  }
+)
+
+type Props = {
+  color: 'yellow' | 'turquoise' | 'purple'
+  cardOne: {
+    image: StaticImageData
+    alt: string
+  }
+  cardTwo: {
+    image: StaticImageData
+    alt: string
+  }
+  cardThree: {
+    image: StaticImageData
+    alt: string
+    alignment?: 'top' | 'bottom'
+  }
+  cardFour: {
+    image: StaticImageData
+    alt: string
+  }
+}
+
+const GridHero = (props: Props) => {
+  const { color, cardOne, cardTwo, cardThree, cardFour } = props
+
+  return (
+    <div className="relative z-[2] flex w-full max-w-[1504px] justify-start overflow-x-auto px-5 sm:justify-center sm:px-10">
+      <div className="flex min-w-[712px] flex-row gap-3 sm:min-w-fit sm:flex-col sm:gap-5 lg:flex-row">
+        <div className="flex flex-row gap-3 sm:gap-5">
+          <div className={biggerCardClassNames({ color })}>
+            <Image
+              src={cardOne.image}
+              alt={cardOne.alt}
+              className={imagesWithBorders({ color })}
+            />
+          </div>
+          <div className={biggerCardClassNames({ color })}>
+            <Image
+              src={cardTwo.image}
+              alt={cardTwo.alt}
+              className={imagesWithBorders({ color })}
+            />
+          </div>
+        </div>
+        <div className="flex min-w-[350px] flex-col gap-3 pr-5 sm:min-w-0 sm:flex-row sm:gap-5 sm:pr-0 lg:flex-col">
+          <div
+            className={thirdCardClassNames({
+              color,
+              alignment: cardThree.alignment || 'bottom',
+            })}
+          >
+            <Image
+              src={cardThree.image}
+              alt={cardThree.alt}
+              className={imagesWithBordersTopOrBottom({
+                color,
+                alignment: cardThree.alignment || 'bottom',
+              })}
+            />
+          </div>
+          <div className={fourthCardClassNames({ color })}>
+            <Image src={cardFour.image} alt={cardFour.alt} />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export { GridHero }

apps/website/src/components/cards/index.ts

@@ -0,0 +1,2 @@
+export { GridHero } from './grid-hero'
+export { Section } from './section'

apps/website/src/components/cards/section.tsx

@@ -0,0 +1,149 @@
+import { Text } from '@status-im/components'
+import { PopupIcon } from '@status-im/icons'
+import { cva } from 'class-variance-authority'
+import Image from 'next/image'
+
+import { Border } from './border'
+
+import type { StaticImageData } from 'next/image'
+
+type Props = {
+  direction?: 'ltr' | 'rtl'
+  title: string
+  description: string
+  image: StaticImageData
+  imageAlt: string
+  imageSecondary: StaticImageData
+  imageSecondaryAlt: string
+  secondaryDescription: string
+  secondaryTitle: string
+  customNode?: React.ReactNode
+  color: 'yellow' | 'turquoise' | 'purple'
+  information?: string
+}
+
+const containerClassNames = cva(
+  [
+    'relative flex w-full justify-center',
+    'overflow-hidden',
+    'max-h-[854px]',
+    'max-w-[582px]',
+    'rounded-[32px]',
+    'py-[65px]',
+  ],
+  {
+    variants: {
+      color: {
+        yellow: ['bg-customisation-yellow/10'],
+        turquoise: ['bg-customisation-turquoise/10'],
+        purple: ['bg-customisation-purple/10'],
+      },
+    },
+  }
+)
+
+const imageClassNames = cva(
+  ['rounded-3xl', 'border-4', 'h-auto max-h-[724px] w-auto'],
+  {
+    variants: {
+      color: {
+        yellow: ['border-customisation-yellow/5'],
+        turquoise: ['border-customisation-turquoise/5'],
+        purple: ['border-customisation-purple/5'],
+      },
+    },
+  }
+)
+
+const borderContainerClassNames = cva(
+  ['absolute left-0 top-0', 'w-full', 'h-[100%]'],
+  {
+    variants: {
+      color: {
+        yellow: ['text-customisation-yellow/5'],
+        turquoise: ['text-customisation-turquoise/5'],
+        purple: ['text-customisation-purple/5'],
+      },
+    },
+  }
+)
+
+const Section = (props: Props) => {
+  const {
+    title,
+    color,
+    description,
+    image,
+    imageAlt,
+    imageSecondary,
+    imageSecondaryAlt,
+    secondaryDescription,
+    secondaryTitle,
+    direction = 'ltr',
+  } = props
+
+  const directionOrder = direction === 'ltr' ? 'order-0' : 'order-1'
+
+  return (
+    <div className="flex justify-center">
+      <div className="relative z-[3] grid auto-cols-auto grid-flow-dense auto-rows-[1fr] grid-cols-1 gap-24 px-5 md:grid-cols-2 lg:gap-12 lg:px-[100px] xl:gap-[140px]">
+        <div
+          className={`${directionOrder} flex max-w-[1504px] justify-center overflow-hidden rounded-[32px]`}
+        >
+          <div className={containerClassNames({ color })}>
+            <div className={borderContainerClassNames({ color })}>
+              <Border />
+            </div>
+            <div className="absolute left-0 top-0 h-full w-full bg-[url('/assets/wallet/texture.png')] bg-contain bg-[left_top_0] bg-no-repeat" />
+            <Image
+              src={image}
+              alt={imageAlt}
+              className={imageClassNames({ color })}
+            />
+          </div>
+        </div>
+        <div className="flex flex-col justify-start md:justify-center">
+          <div className="flex flex-col">
+            <Image
+              src={imageSecondary}
+              alt={imageSecondaryAlt}
+              width={48}
+              height={48}
+            />
+
+            <div className="flex flex-col pt-4">
+              <Text size={27} weight="semibold">
+                {title}
+              </Text>
+              <div className="relative flex pt-1">
+                <Text size={27}>{description}</Text>
+              </div>
+            </div>
+
+            <div className="mt-16 flex flex-col rounded-[20px] border border-dashed border-neutral-80/20 p-4">
+              <Text size={19} weight="semibold">
+                {secondaryTitle}
+              </Text>
+              <div className="flex pt-1">
+                <Text size={19}>
+                  {secondaryDescription}
+                  {props.information && (
+                    <span className="relative left-1 top-1 inline-block">
+                      <PopupIcon size={20} color="$neutral-50" />
+                    </span>
+                  )}
+                </Text>
+              </div>
+
+              {props.customNode && (
+                <div className="mt-4 flex flex-col">{props.customNode}</div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export { Section }

apps/website/src/components/datepicker/datepicker.tsx

@@ -17,16 +17,16 @@ const DatePicker = (props: Props) => {
   return (
     <div className="sticky bottom-5 flex justify-center">
       <Popover alignOffset={8} align="center" sideOffset={8}>
-        <button className="border-neutral-80/5 bg-blur-neutral-5/70 active inline-flex min-h-[30px] cursor-pointer items-center justify-center gap-2 rounded-xl border-solid pl-3 pr-2 uppercase text-neutral-100 backdrop-blur-sm">
-          <span className="text-blur-neutral-80/80 text-[13px] font-medium">
+        <button className="active inline-flex min-h-[30px] cursor-pointer items-center justify-center gap-2 rounded-xl border-solid border-neutral-80/5 bg-blur-neutral-5/70 pl-3 pr-2 uppercase text-neutral-100 backdrop-blur-sm">
+          <span className="text-[13px] font-medium text-blur-neutral-80/80">
             Filter between
           </span>
           <span className="text-[13px] font-medium text-neutral-100">
             {`${selected?.from ? formatDate(selected.from) : 'Start Date'} → ${
               selected?.to ? formatDate(selected.to) : 'End Date'
             }`}
           </span>
-          <div className="bg-neutral-80/5 h-full w-[1px]" />
+          <div className="h-full w-[1px] bg-neutral-80/5" />
           <EditIcon size={20} color="$neutral-80-opa-40" />
         </button>
         <Popover.Content>

apps/website/src/components/error-page.tsx

@@ -13,7 +13,7 @@ export const ErrorPage = (props: Props) => {
     // todo!: design review, not in designs
     case ERROR_CODES.NOT_FOUND:
       return (
-        <div className="flex h-full w-full flex-col items-center justify-center gap-8 bg-white text-center">
+        <div className="bg-white flex h-full w-full flex-col items-center justify-center gap-8 text-center">
           <div className="h-[160px] w-[160px] rounded-full bg-[#b3b3b3]" />
           <Text size={27} weight="semibold">
             Page not found.
@@ -24,7 +24,7 @@ export const ErrorPage = (props: Props) => {
     case ERROR_CODES.INTERNAL_SERVER_ERROR:
     default:
       return (
-        <div className="flex h-full w-full flex-col items-center justify-center gap-8 bg-white text-center">
+        <div className="bg-white flex h-full w-full flex-col items-center justify-center gap-8 text-center">
           <div className="h-[160px] w-[160px] rounded-full bg-[hsla(355,47%,50%,1)]" />
           <div className="flex flex-col gap-2">
             <Text size={27} weight="semibold">

apps/website/src/components/footer/action-card.tsx

@@ -0,0 +1,29 @@
+import { Button, Text } from '@status-im/components'
+
+type Props = {
+  title: string
+  description: string
+  action: string
+}
+
+const ActionCard = (props: Props) => {
+  const { title, description, action } = props
+
+  return (
+    <div className="flex items-center rounded-[20px] border border-neutral-90 bg-neutral-95 px-5 py-3">
+      <div className="grid flex-1 gap-px">
+        <Text size={19} color="$white-100" weight="semibold">
+          {title}
+        </Text>
+        <Text size={15} color="$white-100">
+          {description}
+        </Text>
+      </div>
+      <Button size={32} variant="darkGrey">
+        {action}
+      </Button>
+    </div>
+  )
+}
+
+export { ActionCard }

apps/website/src/components/footer/components/dot.tsx

@@ -0,0 +1,13 @@
+export const Dot = () => (
+  <span className="flex self-center">
+    <svg
+      width="2"
+      height="2"
+      viewBox="0 0 2 2"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="1" cy="1" r="1" fill="#647084" />
+    </svg>
+  </span>
+)