feat: update homepage first section

vtexdocs · Dec 21, 2023 · 84b03bd · 84b03bd
1 parent b6c2b47
commit 84b03bd
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 133 deletions.
diff --git a/public/images/landing-product.png b/public/images/landing-product.png
diff --git a/public/images/landing.png b/public/images/landing.png
diff --git a/src/components/newsletter-section/index.tsx b/src/components/newsletter-section/index.tsx
@@ -1,41 +1,35 @@
 import { Box, Flex, Text } from '@vtex/brand-ui'
 
 import Image from 'next/image'
-import landingProduct from '../../../public/images/Diversity-2.png'
 import styles from 'components/newsletter-section/styles'
-import imgStyle from './styles.module.css'
 
 import { FormattedMessage } from 'react-intl'
 import { SearchInput } from '@vtexdocs/components'
 
 const NewsletterSection = () => {
   return (
     <Box sx={styles.section}>
-      <Box sx={styles.newsletter}>
-        <Box sx={styles.newsletterContainer}>
-          <Flex sx={styles.newsletterBackground}>
-            <Flex sx={styles.newsletterBox}>
-              <Text sx={styles.newsletterTitle}>
-                <FormattedMessage id="landing_page_newsletter.title" />
-              </Text>
-              <Box sx={styles.searchContainer}>
-                <SearchInput />
-              </Box>
-            </Flex>
-          </Flex>
-          <div className={imgStyle.wrapper}>
-            <div className={imgStyle.imageGradient}></div>
-            <Image
-              src={landingProduct}
-              alt=""
-              style={{
-                maxWidth: '100%',
-                height: 'auto',
-              }}
-            />
-          </div>
-        </Box>
+      <Box sx={styles.imageContainer}>
+        <Image
+          src={'/images/landing.png'}
+          alt=""
+          fill
+          style={{
+            width: '100%',
+            height: '100%',
+            objectFit: 'contain',
+          }}
+        />
       </Box>
+      <Flex sx={styles.newsletterBox}>
+        <Text sx={styles.newsletterTitle}>
+          <FormattedMessage id="landing_page_newsletter.title" />
+        </Text>
+        <Text sx={styles.newsletterDescription}>
+          <FormattedMessage id="landing_page_newsletter.description" />
+        </Text>
+        <SearchInput />
+      </Flex>
     </Box>
   )
 }

diff --git a/src/components/newsletter-section/styles.ts b/src/components/newsletter-section/styles.ts
@@ -3,132 +3,42 @@ import { SxStyleProp } from '@vtex/brand-ui'
 const section: SxStyleProp = {
   width: '100%',
   borderBottom: '1px solid #E7E9EE',
+  pb: ['32px', '50px'],
+  pt: ['0px', '36px', '50px'],
 }
 
-const newsletter: SxStyleProp = {
-  width: ['100%', '100%', '100%', '100%', '1280px', '1920px', '2560px'],
-  margin: 'auto',
-}
-
-const newsletterContainer: SxStyleProp = {
+const imageContainer: SxStyleProp = {
   position: 'relative',
-  pl: ['0px', '0px', '0px', '223px', '223px', '313px', '530px'],
-  borderBottom: '1px solid #E7E9EE',
-  display: ['flex', 'flex', 'flex', 'block', 'flex'],
-  flexDirection: ['column-reverse', 'row'],
-  overflow: 'hidden',
-  width: ['100%', '100%', '100%', 'auto'],
-  justifyContent: ['center', 'center', 'center', 'center', 'initial'],
-}
-
-const newsletterBackground: SxStyleProp = {
-  position: 'relative',
-  height: 'auto',
-  paddingBlock: ['0px', '64px 46px', '86px', '300px', '300px 72px'],
-  background: ['#FFFFFF', 'transparent'],
-  mt: ['-80px', '0'],
-  zIndex: '3',
-  justifyContent: ['center', 'normal'],
+  maxWidth: '100%',
+  height: ['142px', '203px', '268px', '352px', '367px'],
+  padding: '100px',
 }
 
 const newsletterBox: SxStyleProp = {
   flexDirection: 'column',
-  maxWidth: ['472px', '650px', '650px', '650px', '650px', '650px', '868px'],
   px: ['16px', '32px', '0px'],
-  position: 'relative',
-  zIndex: '1',
+  width: '100%',
+  alignItems: 'center',
+  textAlign: 'center',
 }
 
 const newsletterTitle: SxStyleProp = {
-  width: ['auto', '434px', '100%'],
-  mx: ['0px', 'auto'],
-  pb: ['20px', '20px'],
-  textAlign: ['center', 'center', 'center', 'initial'],
-  fontSize: ['24px', '40px', '40px', '52px'],
-  lineHeight: ['34px', '50px', '50px', '62px'],
-  mt: ['0px', '-80px'],
+  mb: '16px',
+  fontSize: ['28px', '28px', '52px', '52px'],
+  lineHeight: ['34px', '34px', '62px', '62px'],
 }
 
 const newsletterDescription: SxStyleProp = {
-  textAlign: ['center', 'center', 'center', 'initial'],
-  mx: ['0px', '24px', '62px', '0px'],
-  pr: ['0px', '0px', '0px', '0px', '78px'],
-  fontSize: ['16px', '16px', '16px', '22px'],
-  lineHeight: ['22px', '22px', '22px', '32px'],
-  marginBlock: ['12px 16px', '24px', '24px', '24px 16px'],
-}
-
-const newsletterInputContainer: SxStyleProp = {
-  flexDirection: ['column', 'row'],
-  pr: ['0px', '0px', '39px', '78px'],
-  pl: ['0px', '0px', '39px', '0px'],
-}
-
-const newsletterInputBox: SxStyleProp = {
-  width: ['auto', '100%'],
-}
-
-const newsletterInput: SxStyleProp = {
-  mb: '0',
-  'div:nth-last-of-type(1n)': {
-    mt: '0',
-    pl: '12px',
-  },
-  label: {
-    fontSize: '14px',
-    width: 'auto',
-  },
-}
-
-const newsletterButton: SxStyleProp = {
-  ml: ['0px', '16px'],
-  mt: ['16px', '4px'],
-  mb: ['32px', '0px'],
-}
-
-const image: SxStyleProp = {
-  position: 'absolute',
-  right: '0',
-  width: 'auto',
-  height: '100%',
-  top: '0',
-}
-
-const policyText: SxStyleProp = {
-  mt: ['4px', '8px'],
-  fontSize: ['12px'],
-  lineHeight: ['16px'],
-  color: 'muted.0',
-}
-const policyLink: SxStyleProp = {
-  color: '#E31C58',
-}
-
-const searchContainer: SxStyleProp = {
-  alignItems: 'center',
-  justifyContent: 'center',
-  background: '#F4F4F4',
-  width: '388px',
-  height: '40px',
-  borderRadius: '4px',
-  mb: '50px',
-  cursor: 'pointer',
+  fontSize: ['16px', '16px', '22px', '22px'],
+  lineHeight: ['22px', '22px', '32px', '32px'],
+  mb: '24px',
+  maxWidth: ['319px', '419px', '531px', '642px'],
 }
 
 export default {
   section,
-  newsletter,
-  newsletterContainer,
-  newsletterBackground,
+  imageContainer,
   newsletterBox,
   newsletterTitle,
   newsletterDescription,
-  newsletterInputContainer,
-  newsletterInputBox,
-  newsletterInput,
-  newsletterButton,
-  image,
-  policyText,
-  policyLink,
-  searchContainer,
 }