feat: NFT Explore Value prop row (#4603)

* NFT Explore: value prop row

* Changes from PR feedback

* Tweak opacity values

* Style cleanup

* Adjust bg image on smaller screen sizes

* Remove unnecessary media query
Co-authored-by: gbugyis <greg@bugyis.com>

src/nft/components/explore/Banner.tsx

@@ -13,7 +13,7 @@ import { useEffect, useState } from 'react'
 import { useQuery } from 'react-query'
 import { Link } from 'react-router-dom'
 
-import * as styles from './Banner.css'
+import * as styles from './Explore.css'
 
 const Banner = () => {
   /* Sets initially displayed collection to random number between 0 and 4  */

src/nft/components/explore/Banner.css.ts → src/nft/components/explore/Explore.css.ts

@@ -106,3 +106,68 @@ export const carouselIndicator = sprinkles({
   borderRadius: 'round',
   display: 'inline-block',
 })
+
+/* Value Prop Styles */
+export const valuePropWrap = style([
+  {
+    backgroundRepeat: 'no-repeat',
+    backgroundSize: 'auto',
+    '@media': {
+      [`(max-width: ${breakpoints.sm}px)`]: {
+        backgroundPosition: 'top 0 left 100px',
+      },
+      [`(min-width: ${breakpoints.sm}px)`]: {
+        backgroundPosition: 'top 0 right 0',
+      },
+    },
+  },
+  sprinkles({
+    width: 'full',
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    borderColor: 'outline',
+    borderRadius: '12',
+    paddingLeft: '16',
+    paddingRight: '16',
+    marginTop: '60',
+    position: 'relative',
+  }),
+])
+
+export const valuePropOverlay = style([
+  {
+    height: '135px',
+  },
+  sprinkles({
+    position: 'absolute',
+    zIndex: '0',
+    width: 'full',
+    backgroundColor: 'grey900',
+    left: '0',
+    top: '0',
+    opacity: { sm: '0.7', xl: '0.1' },
+  }),
+])
+
+export const valuePropContent = style([
+  sprinkles({
+    position: 'relative',
+    zIndex: '1',
+    paddingLeft: { sm: '20', md: '28', lg: '36' },
+    paddingBottom: '18',
+    fontSize: { sm: '20', md: '28' },
+    paddingTop: { sm: '28', md: '32' },
+  }),
+  {
+    lineHeight: '28px',
+    '@media': {
+      [`(max-width: 400px)`]: { width: '88%' },
+      [`(min-width: 400px)`]: { width: '67%' },
+      [`(min-width: ${breakpoints.md}px)`]: {
+        width: '58%',
+        lineHeight: '36px',
+      },
+      [`(min-width: ${breakpoints.lg}px)`]: { width: '50%' },
+    },
+  },
+])

src/nft/components/explore/ValueProp.tsx

+import clsx from 'clsx'
+import { Box } from 'nft/components/Box'
+import { Column } from 'nft/components/Flex'
+
+import MarketplacesImage from '../../../assets/images/nft-marketplaces.png'
+import * as styles from './Explore.css'
+
+const ValueProp = () => {
+  return (
+    <Box width="full">
+      <Column as="section" className={styles.section}>
+        <Box
+          className={clsx(styles.bannerWrap, styles.valuePropWrap)}
+          style={{
+            height: '135px',
+            backgroundImage: `url(${MarketplacesImage})`,
+          }}
+        >
+          <Box className={styles.valuePropOverlay} width="full" />
+          <Box className={styles.valuePropContent}>
+            Discover, buy, and{' '}
+            <Box as="span" color="pink400">
+              sell NFTs
+            </Box>{' '}
+            across all NFT marketplaces
+          </Box>
+        </Box>
+      </Column>
+    </Box>
+  )
+}
+
+export default ValueProp

src/nft/css/sprinkles.css.ts

@@ -164,6 +164,7 @@ export const vars = createGlobalTheme(':root', {
     grey50: '#EDEFF7',
     accentActionSoft: 'rgba(76, 130, 251, 0.24)',
     accentTextLightTertiary: 'rgba(255, 255, 255, 0.12)',
+    outline: 'rgba(153, 161, 189, 0.24)',
     lightGrayOverlay: '#99A1BD14',
     accentActiveSoft: '#4c82fb3d',
   },
@@ -300,7 +301,7 @@ const layoutStyles = defineProperties({
     position: ['absolute', 'fixed', 'relative', 'sticky', 'static'],
     objectFit: ['contain', 'cover'],
     order: [0, 1],
-    opacity: ['auto', '0', '0.3', '0.5', '0.7', '1'],
+    opacity: ['auto', '0', '0.1', '0.3', '0.5', '0.7', '1'],
   } as const,
   shorthands: {
     paddingX: ['paddingLeft', 'paddingRight'],

src/nft/pages/explore/index.tsx

 import Banner from 'nft/components/explore/Banner'
+import ValueProp from 'nft/components/explore/ValueProp'
 
 const NftExplore = () => {
   return (
     <>
       <Banner />
+      <ValueProp />
     </>
   )
 }