New sections (#444)

* changes

* remove unused code

* fix

apps/website/src/components/hero.tsx

@@ -1,10 +1,17 @@
 import { Button, Tag, Text } from '@status-im/components'
-import { DownloadIcon, WalletIcon } from '@status-im/icons'
+import {
+  CommunitiesIcon,
+  DownloadIcon,
+  MessengerIcon,
+  WalletIcon,
+} from '@status-im/icons'
 import { cx } from 'class-variance-authority'
 
 import { GridHero } from './cards'
 
+import type { IconProps } from '@status-im/icons'
 import type { StaticImageData } from 'next/image'
+import type { ComponentType } from 'react'
 
 type Props = {
   type: 'Communities' | 'Create Community' | 'Wallet' | 'Messenger'
@@ -16,6 +23,13 @@ type Props = {
   dark?: boolean
 }
 
+const icons: Record<Props['type'], ComponentType<IconProps>> = {
+  Wallet: WalletIcon,
+  Communities: CommunitiesIcon,
+  'Create Community': CommunitiesIcon,
+  Messenger: MessengerIcon,
+}
+
 export const Hero = (props: Props) => {
   const { type, title, description, color, images, maxWidth, dark } = props
 
@@ -30,7 +44,7 @@ export const Hero = (props: Props) => {
           <div className="inline-flex">
             <Tag
               size={32}
-              icon={WalletIcon}
+              icon={icons[type]}
               color={`$${color}-50`}
               label={type}
             />

apps/website/src/pages/features/communities.tsx

@@ -1,7 +1,11 @@
-// import communityCardImage01 from '@assets/communities/community-card-01.png'
-// import communityCardImage02 from '@assets/communities/community-card-02.png'
-// import communityCardImage03 from '@assets/communities/community-card-03.png'
-// import communityCardImage04 from '@assets/communities/community-card-04.png'
+import communityCardImage01 from '@assets/communities/community-card-01.png'
+import communityCardImage02 from '@assets/communities/community-card-02.png'
+import communityCardImage03 from '@assets/communities/community-card-03.png'
+import communityCardImage04 from '@assets/communities/community-card-04.png'
+import communityCardNote01 from '@assets/communities/community-card-note-01.png'
+import communityCardNote02 from '@assets/communities/community-card-note-02.png'
+import communityCardNote03 from '@assets/communities/community-card-note-03.png'
+import communityCardNote04 from '@assets/communities/community-card-note-04.png'
 import featureImage1 from '@assets/communities/feature-01.png'
 import featureImage2 from '@assets/communities/feature-02.png'
 import featureImage3 from '@assets/communities/feature-03.png'
@@ -38,13 +42,11 @@ const CommunitiesPage: Page = () => {
         images={[heroImage1, heroImage2, heroImage3, heroImage4]}
         maxWidth={702}
       />
-
       <VideoSection
         title="Fully Decentralized Communities"
         description="Status’ Waku p2p messaging network is powered by people running Status Desktop - true decentralisation."
         image={{ ...illustrationMain, width: 765, height: 725 }}
       />
-
       <div className="pb-12 lg:pb-20">
         <Section
           icon="skull"
@@ -69,26 +71,92 @@ const CommunitiesPage: Page = () => {
           color="turquoise"
         />
       </div>
-
-      <div className="mx-auto max-w-[1200px] pb-60 pt-40">
-        <div className="grid gap-4 pb-40">
-          <h2 className="text-64">Your next community</h2>
+      <div className="border-t-[1px] border-dashed border-neutral-80/20" />
+      <div className="container pt-24 lg:pt-40">
+        <div className="grid max-w-[475px] gap-4">
+          <h2 className="text-40 lg:text-64">Your next community</h2>
           <Text size={27}>
             Explore the metaverse of communities and find your kindred spirits
-            in the Status Community Directory.
+            in the Status&nbsp;Community Directory.
           </Text>
-          <div className="flex min-w-[1200px] flex-row gap-10 overflow-x-auto">
-            <Image src={heroImage4} alt="TODO" />
-            <Image src={heroImage4} alt="TODO" />
-            <Image src={heroImage4} alt="TODO" />
-            <Image src={heroImage4} alt="TODO" />
-          </div>
         </div>
       </div>
 
-      <div className="rounded-[40px] bg-customisation-turquoise/5 py-40">
+      <div className="gallery">
+        <div className="gallery-wrapper">
+          <div className="gallery-inside">
+            <div className="relative min-h-[230px] min-w-[335px] snap-start">
+              <Image
+                src={communityCardImage01}
+                alt="TODO"
+                className="relative rounded-2xl shadow-2"
+                width="335"
+                height="230"
+              />
+              <Image
+                src={communityCardNote01}
+                alt="TODO"
+                className="absolute left-[130px] top-[205px]"
+                width="173"
+                height="162"
+              />
+            </div>
+            <div className="relative min-h-[230px] min-w-[335px] snap-start">
+              <Image
+                src={communityCardImage02}
+                alt="TODO"
+                className="relative rounded-2xl shadow-2"
+                width="335"
+                height="230"
+              />
+              <Image
+                src={communityCardNote02}
+                alt="TODO"
+                className="absolute left-[55px] top-[-70px]"
+                width="258"
+                height="38"
+              />
+            </div>
+            <div className="relative min-h-[230px] min-w-[335px] snap-start">
+              <Image
+                src={communityCardImage03}
+                alt="TODO"
+                className="relative rounded-2xl shadow-2"
+                width="335"
+                height="230"
+              />
+              <Image
+                src={communityCardNote03}
+                alt="TODO"
+                className="absolute left-[-97px] top-[150px]"
+                height="166"
+                width="230"
+              />
+              <Image
+                src={communityCardNote04}
+                alt="TODO"
+                className="absolute left-[120px] top-[-130px]"
+                height="175"
+                width="184"
+              />
+            </div>
+            <div className="relative min-h-[230px] min-w-[335px] snap-start">
+              <Image
+                src={communityCardImage04}
+                alt="TODO"
+                className="relative rounded-2xl shadow-2"
+                width="335"
+                height="230"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="container rounded-[40px] bg-customisation-turquoise/5 py-40">
         <div className="mx-auto max-w-[702px] gap-4 text-center">
-          <h2 className="pb-4 text-64">A wonderful chat experience</h2>
+          <h2 className="pb-4 text-40 lg:text-64">
+            A wonderful chat experience
+          </h2>
           <Text size={27}>
             Give your community a unique look that reflects it’s passions and
             values. Or just look cool ✨

apps/website/src/pages/features/messenger.tsx

@@ -12,6 +12,7 @@ import heroImage1 from '@assets/messenger/hero-01.png'
 import heroImage2 from '@assets/messenger/hero-02.png'
 import heroImage3 from '@assets/messenger/hero-03.png'
 import heroImage4 from '@assets/messenger/hero-04.png'
+import identityNote from '@assets/messenger/identity-note.png'
 import sectionImage1 from '@assets/messenger/section-01.png'
 import sectionImage2 from '@assets/messenger/section-02.png'
 import { Text } from '@status-im/components'
@@ -98,16 +99,20 @@ const MessengerPage: Page = () => {
         </div>
       </Content>
 
-      <div className="m-auto max-w-[700px] px-16 pb-[352px] pt-[524px] text-center">
-        <h2 className="pb-3 text-64 text-white-100">
-          Keep who your friends are private
-        </h2>
-        <Text size={19} color="$white-100">
-          End to end encryption is important, but it doesn’t stop an
-          eavesdropper knowing who is talking to who. Status’ metadata privacy
-          fixes this - it means that even who you message with can’t be
-          surveilled.
-        </Text>
+      <div className="bg-[url('/assets/messenger/illustration-security-01.png')] bg-[length:100%] bg-[center_top_-5rem] bg-no-repeat lg:bg-cover lg:bg-[center_top_-10rem]">
+        <div className="bg-[url('/assets/messenger/illustration-security-02.png')] bg-cover bg-[center_bottom_-5rem] bg-no-repeat lg:bg-[center_bottom_-10rem]">
+          <div className="m-auto max-w-[700px] px-16 pb-40 pt-44 text-center md:pb-[352px] md:pt-[524px]">
+            <h2 className="pb-3 text-40 text-white-100 md:text-64">
+              Keep who your friends are private
+            </h2>
+            <Text size={19} color="$white-100">
+              End to end encryption is important, but it doesn’t stop an
+              eavesdropper knowing who is talking to who. Status’ metadata
+              privacy fixes this - it means that even who you message with can’t
+              be surveilled.
+            </Text>
+          </div>
+        </div>
       </div>
 
       <Content>
@@ -166,33 +171,45 @@ const MessengerPage: Page = () => {
         </SectionLarge>
         <div className="py-40"></div>
 
-        <div>
-          <h2 className="text-center text-64">
-            Your assets.
-            <br />
-            Your identity.
-          </h2>
-          <Text size={27}>
-            Showcase some or all of your tokens, memberships and accounts with
-            friends, the world, or keep private.
-          </Text>
+        <div className="container justify-center py-12 lg:flex lg:py-20">
+          <div className="relative z-[3]">
+            <div
+              className={cx(
+                'flex flex-col gap-12 lg:flex-row lg:items-center xl:gap-[120px]'
+              )}
+            >
+              <div className="flex flex-1 flex-col justify-start lg:justify-center">
+                <div className="flex flex-col">
+                  <div className="mb-5 flex flex-col lg:mb-16">
+                    <h2 className="text-left text-40 lg:text-64">
+                      Your assets.
+                      <br />
+                      Your identity.
+                    </h2>
+                    <div className="relative flex pt-1">
+                      <Text size={27}>
+                        Showcase some or all of your tokens, memberships and
+                        accounts with friends, the world, or keep private.
+                      </Text>
+                    </div>
+                    <Image
+                      src={identityNote}
+                      alt="Your identity"
+                      className="my-6"
+                      height="24"
+                      width="183"
+                    />
+                  </div>
+                </div>
+              </div>
 
-          <div>
-            <Text size={13} color="$neutral-40" weight="medium">
-              Preview examples
-            </Text>
-
-            <div className="flex gap-1">
-              {['blue', 'pink', 'orange', 'green'].map(color => (
-                <div
-                  key={color}
-                  style={{ ['--bg-color' as string]: color }}
-                  className={`h-[24px] w-[24px] rounded-full bg-[var(--bg-color)]`}
-                />
-              ))}
+              <div className="flex flex-1 justify-center overflow-hidden rounded-[32px]">
+                <Image src={heroImage2} alt="Your identity" className="mb-4" />
+              </div>
             </div>
           </div>
         </div>
+
         <SectionDesktopScreenshot
           title="Share your profile"
           description="Using web URLs that can be posted on Web2 social media. User doesn’t have Status? Open in browser."

apps/website/src/styles/global.css

@@ -6,9 +6,69 @@
   .container {
     @apply mx-auto max-w-[1504px] px-5 lg:px-40;
   }
+
   .border-dashed-default {
     @apply border-dashed border-neutral-80/20;
   }
+
+  .gallery {
+    width: 100%;
+    display: grid;
+    padding-bottom: 100px;
+    grid-template-columns:
+      [full-start] 1fr
+      [content-start]
+      min(1184px, 100% - 40px)
+      [content-end]
+      1fr [full-end];
+  }
+
+  .gallery-wrapper {
+    grid-column: full;
+    display: grid;
+    grid-template-columns: inherit;
+    padding-block: 150px;
+    overflow-y: hidden;
+    overflow-x: scroll;
+    overscroll-behavior-x: contain;
+    scroll-snap-type: x proximity;
+    scrollbar-width: none;
+    scroll-padding-left: 40px;
+  }
+
+  .gallery-inside {
+    grid-column: content;
+    display: flex;
+    align-items: center;
+    gap: 40px;
+  }
+
+  .gallery-inside::after {
+    content: '';
+    align-self: stretch;
+    padding-inline-end: max(20px, (100vw - 1024px) / 2 - 20px);
+  }
+
+  @media (min-width: 1024px) {
+    .gallery {
+      grid-template-columns:
+        [full-start] 1fr
+        [content-start]
+        min(1184px, 100% - 320px)
+        [content-end]
+        1fr [full-end];
+    }
+
+    .gallery-wrapper {
+      scroll-padding-left: 295px;
+    }
+
+    .gallery-inside::after {
+      content: '';
+      align-self: stretch;
+      padding-inline-end: max(160px, (100vw - 1184px) / 2 - 160px);
+    }
+  }
 }
 
 @keyframes gradient {

apps/website/tailwind.config.cjs

@@ -69,6 +69,7 @@ module.exports = {
     },
     boxShadow: {
       1: '0px 2px 20px rgba(9, 16, 28, 0.04)',
+      2: '0px 4px 20px rgba(9, 16, 28, 0.08)',
       3: '0px 8px 30px rgba(9, 16, 28, 0.12);',
     },