style: add the background stains

safe-global · Nov 8, 2023 · a4b3f9e · a4b3f9e
1 parent e5185bd
commit a4b3f9e
Show file tree

Hide file tree

Showing 19 changed files with 173 additions and 35 deletions.
diff --git a/src/components/Campaign/Faq/index.tsx b/src/components/Campaign/Faq/index.tsx
@@ -25,7 +25,8 @@ const Faq = (props: FaqEntry) => {
 
   return (
     <Container className={layoutCss.containerMedium}>
-      <Grid container>
+      <Grid container position="relative">
+        <div className={css.spot} />
         <Grid item md={1} />
         <Grid item md={4}>
           <Typography variant="h1">{props.fields.title}</Typography>

diff --git a/src/components/Campaign/Faq/styles.module.css b/src/components/Campaign/Faq/styles.module.css
@@ -1,3 +1,14 @@
+.spot {
+  position: absolute;
+  left: -300px;
+  top: -150px;
+  z-index: -1;
+  width: 800px;
+  height: 800px;
+  background-image: radial-gradient(rgba(18, 255, 128, 0.3), rgba(18, 19, 18, 1) 80%);
+  filter: blur(50px);
+}
+
 .accordion {
   background-color: unset;
   box-shadow: none;

diff --git a/src/components/Campaign/Hero/index.tsx b/src/components/Campaign/Hero/index.tsx
@@ -13,7 +13,8 @@ const Hero = (props: HeroEntry) => {
 
   return (
     <Container className={layoutCss.containerTiny}>
-      <Grid container justifyContent="space-between" gap={10}>
+      <Grid container className={css.gridContainer}>
+        <div className={css.spot} />
         <Grid item md={5} className={css.textBlock}>
           {caption && (
             <Chip

diff --git a/src/components/Campaign/Hero/styles.module.css b/src/components/Campaign/Hero/styles.module.css
@@ -1,3 +1,20 @@
+.gridContainer {
+  justify-content: space-between;
+  gap: 80px;
+  position: relative;
+}
+
+.spot {
+  position: absolute;
+  right: -35px;
+  top: -110px;
+  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);
+}
+
 .textBlock {
   display: flex;
   gap: 24px;

diff --git a/src/components/Campaign/LogoTextBlockCentered/index.tsx b/src/components/Campaign/LogoTextBlockCentered/index.tsx
@@ -16,6 +16,7 @@ const LogoTextBlockCentered = (props: LogoTextBlockCenteredEntry) => {
   return (
     <Container className={layoutCss.containerMedium}>
       <div className={css.container}>
+        <div className={css.spot} />
         {isAsset(logo) && logo.fields.file?.url ? (
           <Image src={logo.fields.file.url} alt={`Cover Image for ${title}`} width="84" height="84" />
         ) : undefined}

diff --git a/src/components/Campaign/LogoTextBlockCentered/styles.module.css b/src/components/Campaign/LogoTextBlockCentered/styles.module.css
@@ -3,6 +3,17 @@
   flex-direction: column;
   align-items: center;
   gap: 24px;
+  position: relative;
+}
+
+.spot {
+  position: absolute;
+  top: -130px;
+  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);
 }
 
 .cta {

diff --git a/src/components/Campaign/RoundCardGrid/index.tsx b/src/components/Campaign/RoundCardGrid/index.tsx
@@ -50,7 +50,8 @@ const RoundCardGrid = (props: RoundCardGridEntry) => {
       <HeaderCTA title={title} text={text} link={headerLink} />
 
       {images ? (
-        <Grid container spacing={4} mt={4}>
+        <Grid container className={css.gridContainer} spacing={4}>
+          <div className={css.spot} />
           {Array.isArray(items) &&
             items.map((item, index: number) => (
               <Grid item xs={12} md={6} key={index}>

diff --git a/src/components/Campaign/RoundCardGrid/styles.module.css b/src/components/Campaign/RoundCardGrid/styles.module.css
@@ -1,3 +1,19 @@
+.gridContainer {
+  margin-top: 32px;
+  position: relative;
+}
+
+.spot {
+  position: absolute;
+  left: -200px;
+  top: -450px;
+  z-index: -1;
+  width: 800px;
+  height: 800px;
+  background-image: radial-gradient(rgba(18, 255, 128, 0.3), rgba(18, 19, 18, 1) 80%);
+  filter: blur(50px);
+}
+
 .card {
   border: 1px solid var(--mui-palette-border-main);
   border-radius: 24px;

diff --git a/src/components/Campaign/SocialLogin/index.tsx b/src/components/Campaign/SocialLogin/index.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import { capitalizeFirstLetter } from '@/lib/capitalizeFirstLetter'
+import getComponentByName from '@/lib/getComponentByName'
+import type { InferGetStaticPropsType } from 'next'
+import type { getStaticProps } from '@/pages/campaigns/social-login'
+import css from './styles.module.css'
+
+const NotFoundComponent = () => <div>Component not found</div>
+
+const SocialLogin = ({ content, fetchedEntries }: InferGetStaticPropsType<typeof getStaticProps>) => {
+  return (
+    <div className={css.pageContainer}>
+      {fetchedEntries.map((entry, index) => {
+        const campaignComponentName = `Campaign/${capitalizeFirstLetter(content[index])}`
+
+        const Component = getComponentByName(campaignComponentName, NotFoundComponent)
+
+        return <Component {...entry.items[0]} key={content[index]} />
+      })}
+    </div>
+  )
+}
+
+export default SocialLogin
diff --git a/src/components/Campaign/SocialLogin/styles.module.css b/src/components/Campaign/SocialLogin/styles.module.css
@@ -0,0 +1,9 @@
+.pageContainer {
+  overflow: hidden;
+}
+
+@media (min-width: 900px) {
+  .pageContainer {
+    overflow: visible;
+  }
+}
diff --git a/src/components/Campaign/StepListImage/index.tsx b/src/components/Campaign/StepListImage/index.tsx
@@ -12,7 +12,8 @@ const StepListImage = (props: StepListImageEntry) => {
 
   return (
     <Container>
-      <Grid container justifyContent="space-between" marginTop={6} gap={10}>
+      <Grid container className={css.gridContainer}>
+        <div className={css.spot} />
         <Grid item md={5} className={css.stepListBlock}>
           <List component="ol" className={css.listWrapper}>
             {steps.map((item: any, index: number) => (

diff --git a/src/components/Campaign/StepListImage/styles.module.css b/src/components/Campaign/StepListImage/styles.module.css
@@ -1,3 +1,21 @@
+.gridContainer {
+  justify-content: space-between;
+  gap: 80px;
+  margin-top: 48px;
+  position: relative;
+}
+
+.spot {
+  position: absolute;
+  right: -35px;
+  top: -110px;
+  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);
+}
+
 .stepListBlock {
   display: flex;
   flex-direction: column;

diff --git a/src/components/Campaign/TextBlockListCentered/index.tsx b/src/components/Campaign/TextBlockListCentered/index.tsx
@@ -13,7 +13,8 @@ const TextBlockListCentered = (props: TextBlockListCenteredEntry) => {
 
   return (
     <Container className={layoutCss.containerMedium}>
-      <Grid container>
+      <Grid container position="relative">
+        <div className={css.spot} />
         {/* offset column */}
         <Grid item lg={1} />
         <Grid item lg={6}>

diff --git a/src/components/Campaign/TextBlockListCentered/styles.module.css b/src/components/Campaign/TextBlockListCentered/styles.module.css
@@ -1,3 +1,14 @@
+.spot {
+  position: absolute;
+  left: -200px;
+  top: -50px;
+  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);
+}
+
 .listItemIcon {
   border-radius: 50%;
   text-align: center;

diff --git a/src/components/Campaign/TitleSpaceBetweenGrid/index.tsx b/src/components/Campaign/TitleSpaceBetweenGrid/index.tsx
@@ -18,6 +18,7 @@ const TitleSpaceBetweenGrid = (props: TitleSpaceBetweenGridEntry) => {
 
       {Array.isArray(stats) ? (
         <div className={css.wrapper}>
+          <div className={css.spot} />
           {stats.map((item) => (
             <div className={css.item} key={item.text}>
               <Typography variant="h4" color="text.secondary" textAlign="center" mb="20px">

diff --git a/src/components/Campaign/TitleSpaceBetweenGrid/styles.module.css b/src/components/Campaign/TitleSpaceBetweenGrid/styles.module.css
@@ -1,10 +1,22 @@
 .wrapper {
+  position: relative;
   align-items: center;
   display: flex;
   flex-direction: column;
   gap: 40px;
 }
 
+.spot {
+  position: absolute;
+  right: -150px;
+  top: -330px;
+  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(50px);
+}
+
 .item {
   width: max-content;
 }

diff --git a/src/components/Campaign/TitleTweets/index.tsx b/src/components/Campaign/TitleTweets/index.tsx
@@ -20,12 +20,13 @@ const TitleTweets = (props: TitleTweetsEntry) => {
   return (
     <>
       <Container className={layoutCss.containerMedium}>
-        <Typography variant="h4" className={css.cta}>
-          {cta}
-        </Typography>
-        <Typography variant="h2" className={css.title}>
-          {title}
-        </Typography>
+        <div className={css.titleWrapper}>
+          <div className={css.spot} />
+          <Typography variant="h4" className={css.cta}>
+            {cta}
+          </Typography>
+          <Typography variant="h2">{title}</Typography>
+        </div>
       </Container>
 
       <div className={css.tweetsGrid}>

diff --git a/src/components/Campaign/TitleTweets/styles.module.css b/src/components/Campaign/TitleTweets/styles.module.css
@@ -1,17 +1,31 @@
+.titleWrapper {
+  position: relative;
+  margin: 0 auto;
+  width: fit-content;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 60px;
+}
+
+.spot {
+  position: absolute;
+  top: -200px;
+  z-index: -1;
+  width: 700px;
+  height: 700px;
+  background-image: radial-gradient(rgba(18, 255, 128, 0.3), rgba(18, 19, 18, 1) 100%);
+  filter: blur(50px);
+}
+
 .cta {
   margin-bottom: 40px;
-  text-align: center;
   background: linear-gradient(260.13deg, #12ff80 1.24%, #5fddff 102.14%);
   background-clip: text;
   -webkit-background-clip: text;
   color: transparent;
 }
 
-.title {
-  text-align: center;
-  margin-bottom: 60px;
-}
-
 .tweetsGrid {
   padding-left: 16px;
   padding-right: 16px;

diff --git a/src/pages/campaigns/social-login.tsx b/src/pages/campaigns/social-login.tsx
@@ -1,23 +1,10 @@
 import type { InferGetStaticPropsType, NextPage } from 'next'
 import client from '@/lib/contentful'
 import type { TypeContentOrderSkeleton } from '@/contentful/types'
-import { capitalizeFirstLetter } from '@/lib/capitalizeFirstLetter'
-import getComponentByName from '@/lib/getComponentByName'
+import SocialLogin from '@/components/Campaign/SocialLogin'
 
-const NotFoundComponent = () => <div>Component not found</div>
-
-const Campaigns: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({ content, fetchedEntries }) => {
-  return (
-    <div>
-      {fetchedEntries.map((entry, index) => {
-        const campaignComponentName = `Campaign/${capitalizeFirstLetter(content[index])}`
-
-        const Component = getComponentByName(campaignComponentName, NotFoundComponent)
-
-        return <Component {...entry.items[0]} key={content[index]} />
-      })}
-    </div>
-  )
+const Campaigns: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = (props) => {
+  return <SocialLogin {...props} />
 }
 
 export const getStaticProps = async () => {
@@ -31,8 +18,8 @@ export const getStaticProps = async () => {
 
   return {
     props: {
-      content: content,
-      fetchedEntries: fetchedEntries,
+      content,
+      fetchedEntries,
     },
   }
 }