style: address UI commentaries

safe-global · Nov 13, 2023 · 4ba8c27 · 4ba8c27
1 parent a71f8db
commit 4ba8c27
Show file tree

Hide file tree

Showing 13 changed files with 79 additions and 45 deletions.
diff --git a/src/components/Campaign/Faq/styles.module.css b/src/components/Campaign/Faq/styles.module.css
@@ -13,7 +13,7 @@
   z-index: -1;
   width: 800px;
   height: 800px;
-  background-image: radial-gradient(rgba(18, 255, 128, 0.3), rgba(18, 19, 18, 1) 80%);
+  background-image: radial-gradient(rgba(18, 255, 128, 0.5), rgba(18, 19, 18, 1) 80%);
   filter: blur(50px);
 }
 

diff --git a/src/components/Campaign/Hero/index.tsx b/src/components/Campaign/Hero/index.tsx
@@ -48,7 +48,7 @@ const Hero = (props: HeroEntry) => {
         </Grid>
 
         {isAsset(image) && image.fields.file?.url ? (
-          <Grid item md={5}>
+          <Grid item md={5} className={css.image}>
             <img src={image.fields.file.url} alt={`Cover image for ${image.fields.description}`} />
           </Grid>
         ) : undefined}

diff --git a/src/components/Campaign/Hero/styles.module.css b/src/components/Campaign/Hero/styles.module.css
@@ -11,8 +11,8 @@
   z-index: -1;
   width: 800px;
   height: 800px;
-  background-image: radial-gradient(rgba(18, 255, 128, 0.3), rgba(18, 19, 18, 0.15) 60%, rgba(18, 19, 18, 1) 100%);
-  filter: blur(30px);
+  background-image: radial-gradient(rgba(18, 255, 128, 0.5), rgba(18, 19, 18, 0.15) 60%, rgba(18, 19, 18, 1) 100%);
+  filter: blur(50px);
 }
 
 .textBlock {
@@ -34,6 +34,10 @@
   margin: 0;
 }
 
+.image {
+  max-width: 500px;
+}
+
 .heroFooter {
   display: flex;
   flex-direction: column;
@@ -61,6 +65,7 @@
 
 @media (min-width: 900px) {
   .heroFooter {
+    margin-top: 100px;
     flex-direction: row;
     justify-content: space-between;
   }

diff --git a/src/components/Campaign/RoundCardGrid/styles.module.css b/src/components/Campaign/RoundCardGrid/styles.module.css
@@ -10,7 +10,7 @@
   z-index: -1;
   width: 800px;
   height: 800px;
-  background-image: radial-gradient(rgba(18, 255, 128, 0.3), rgba(18, 19, 18, 1) 80%);
+  background-image: radial-gradient(rgba(18, 255, 128, 0.5), rgba(18, 19, 18, 1) 80%);
   filter: blur(50px);
 }
 

diff --git a/src/components/Campaign/StepsImage/index.tsx b/src/components/Campaign/StepsImage/index.tsx
@@ -14,19 +14,21 @@ const StepsImage = (props: StepsImageEntry) => {
     <Container>
       <Grid container className={css.gridContainer}>
         <div className={css.spot} />
+        <Grid item md={1} />
         <Grid item md={5} className={css.stepListBlock}>
           <List component="ol" className={css.listWrapper}>
             {steps.map((item: any, index: number) => (
               <ListItem key={index} className={css.listItem}>
-                <div className={css.listItemNumber}>{index}</div>
+                <div className={css.listItemNumber}>{index + 1}</div>
                 <ListItemText primary={<Typography variant="h4">{item}</Typography>} />
               </ListItem>
             ))}
           </List>
         </Grid>
+        <Grid item md={2} />
 
         {isAsset(image) && image.fields.file?.url ? (
-          <Grid item md={4}>
+          <Grid item md={4} className={css.image}>
             <img src={image.fields.file.url} alt={`${image.fields.title}`} />
           </Grid>
         ) : undefined}

diff --git a/src/components/Campaign/StepsImage/styles.module.css b/src/components/Campaign/StepsImage/styles.module.css
@@ -1,6 +1,4 @@
 .gridContainer {
-  justify-content: space-between;
-  gap: 80px;
   margin-top: 48px;
   position: relative;
 }
@@ -12,8 +10,8 @@
   z-index: -1;
   width: 800px;
   height: 800px;
-  background-image: radial-gradient(rgba(18, 255, 128, 0.3), rgba(18, 19, 18, 0.15) 60%, rgba(18, 19, 18, 1) 100%);
-  filter: blur(30px);
+  background-image: radial-gradient(rgba(18, 255, 128, 0.5), rgba(18, 19, 18, 0.15) 60%, rgba(18, 19, 18, 1) 100%);
+  filter: blur(50px);
 }
 
 .stepListBlock {
@@ -50,3 +48,14 @@
   align-items: center;
   justify-content: center;
 }
+
+.image {
+  margin-top: 80px;
+  max-width: 330px;
+}
+
+@media (min-width: 600px) {
+  .image {
+    margin-top: 0px;
+  }
+}
diff --git a/src/components/Campaign/TextBlockCentered/styles.module.css b/src/components/Campaign/TextBlockCentered/styles.module.css
@@ -12,8 +12,8 @@
   z-index: -1;
   width: 400px;
   height: 400px;
-  background-image: radial-gradient(rgba(18, 255, 128, 0.3), rgba(18, 19, 18, 0.15) 60%, rgba(18, 19, 18, 1) 100%);
-  filter: blur(30px);
+  background-image: radial-gradient(rgba(18, 255, 128, 0.5), rgba(18, 19, 18, 0.15) 60%, rgba(18, 19, 18, 1) 100%);
+  filter: blur(50px);
 }
 
 .cta {

diff --git a/src/components/Campaign/TextBlockList/index.tsx b/src/components/Campaign/TextBlockList/index.tsx
@@ -6,40 +6,45 @@ import layoutCss from '@/components/common/styles.module.css'
 import type { Entry } from 'contentful'
 import type { TypeTextBlockListSkeleton } from '@/contentful/types'
 import RichText from '@/components/Campaign/RichText'
+import BackgroundImage from '@/public/images/Campaigns/faq-bg.png'
+import Image from 'next/image'
 
 type TextBlockListEntry = Entry<TypeTextBlockListSkeleton, undefined, string>
 
 const TextBlockList = (props: TextBlockListEntry) => {
   const { title, description, listItems, offset } = props.fields
 
   return (
-    <Container className={layoutCss.containerMedium}>
-      <Grid container className={css.gridContainer} position="relative">
-        <div className={css.spot} />
-        {/* offset column */}
-        <Grid item lg={offset} />
-        <Grid item lg={6}>
-          <Typography variant="h1" className={css.title}>
-            <RichText {...title} />
-          </Typography>
-          <Typography mb={5} color="primary.light" width={{ sm: '100%', lg: '66.7%' }}>
-            {description}
-          </Typography>
+    <>
+      <Image className={css.bg} src={BackgroundImage} alt="blocks background" />
+      <Container className={layoutCss.containerMedium}>
+        <Grid container className={css.gridContainer} position="relative">
+          <div className={css.spot} />
+          {/* offset column */}
+          <Grid item lg={offset} />
+          <Grid item lg={6}>
+            <Typography variant="h1" className={css.title}>
+              <RichText {...title} />
+            </Typography>
+            <Typography mb={5} color="primary.light" width={{ sm: '100%', lg: '66.7%' }}>
+              {description}
+            </Typography>
+          </Grid>
+          <Grid item lg={6 - offset}>
+            <List>
+              {listItems.map((item: any, index: number) => (
+                <ListItem key={index}>
+                  <ListItemIcon className={css.listItemIcon}>
+                    <SvgIcon component={GreenCircleCheckmarkIcon} fontSize="inherit" color="inherit" inheritViewBox />
+                  </ListItemIcon>
+                  <ListItemText primary={<Typography variant="h4">{item}</Typography>} />
+                </ListItem>
+              ))}
+            </List>
+          </Grid>
         </Grid>
-        <Grid item lg={6 - offset}>
-          <List>
-            {listItems.map((item: any, index: number) => (
-              <ListItem key={index}>
-                <ListItemIcon className={css.listItemIcon}>
-                  <SvgIcon component={GreenCircleCheckmarkIcon} fontSize="inherit" color="inherit" inheritViewBox />
-                </ListItemIcon>
-                <ListItemText primary={<Typography variant="h4">{item}</Typography>} />
-              </ListItem>
-            ))}
-          </List>
-        </Grid>
-      </Grid>
-    </Container>
+      </Container>
+    </>
   )
 }
 

diff --git a/src/components/Campaign/TextBlockList/styles.module.css b/src/components/Campaign/TextBlockList/styles.module.css
@@ -1,3 +1,7 @@
+.bg {
+  display: none;
+}
+
 .gridContainer {
   position: relative;
 }
@@ -9,8 +13,8 @@
   z-index: -1;
   width: 600px;
   height: 600px;
-  background-image: radial-gradient(rgba(18, 255, 128, 0.3), rgba(18, 19, 18, 0.15) 60%, rgba(18, 19, 18, 1) 100%);
-  filter: blur(30px);
+  background-image: radial-gradient(rgba(18, 255, 128, 0.5), rgba(18, 19, 18, 0.15) 60%, rgba(18, 19, 18, 1) 100%);
+  filter: blur(50px);
 }
 
 .title {
@@ -32,3 +36,12 @@
   min-width: min-content;
   width: 24px;
 }
+
+@media (min-width: 900px) {
+  .bg {
+    display: block;
+    position: absolute;
+    left: 0px;
+    width: 66%;
+  }
+}
diff --git a/src/components/Campaign/TitleSpaceBetweenGrid/index.tsx b/src/components/Campaign/TitleSpaceBetweenGrid/index.tsx
@@ -17,7 +17,7 @@ const TitleSpaceBetweenGrid = (props: TitleSpaceBetweenGridEntry) => {
   }))
 
   return (
-    <Container className={layoutCss.containerShort}>
+    <Container className={layoutCss.container}>
       <Typography variant="h2" textAlign="center" mb="60px">
         {title}
       </Typography>

diff --git a/src/components/Campaign/TitleSpaceBetweenGrid/styles.module.css b/src/components/Campaign/TitleSpaceBetweenGrid/styles.module.css
@@ -13,7 +13,7 @@
   z-index: -1;
   width: 600px;
   height: 600px;
-  background-image: radial-gradient(rgba(18, 255, 128, 0.3), rgba(18, 19, 18, 0.15) 60%, rgba(18, 19, 18, 1) 100%);
+  background-image: radial-gradient(rgba(18, 255, 128, 0.4), rgba(18, 19, 18, 0.15) 60%, rgba(18, 19, 18, 1) 100%);
   filter: blur(50px);
 }
 

diff --git a/src/components/Campaign/Tweets/index.tsx b/src/components/Campaign/Tweets/index.tsx
@@ -15,7 +15,7 @@ const Tweets = (props: TweetsEntry) => {
 
   return (
     <>
-      <Container className={layoutCss.containerMedium}>
+      <Container className={layoutCss.container}>
         <div className={css.titleWrapper}>
           <div className={css.spot} />
           <Typography variant="h4" className={css.cta}>

diff --git a/src/components/Campaign/Tweets/styles.module.css b/src/components/Campaign/Tweets/styles.module.css
@@ -14,7 +14,7 @@
   z-index: -1;
   width: 700px;
   height: 700px;
-  background-image: radial-gradient(rgba(18, 255, 128, 0.3), rgba(18, 19, 18, 1) 100%);
+  background-image: radial-gradient(rgba(18, 255, 128, 0.5), rgba(18, 19, 18, 1) 100%);
   filter: blur(50px);
 }