src/assets/images/bg_l.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 319.87">
+  <g id="Layer_1-2" data-name="Layer 1">
+    <path d="M113.31,3.31C73.23,10.93,35.28,18.5,0,24.8V307.11c30.14,8.31,61.89,12.76,94.68,12.76,30.67,0,60.43-3.88,88.82-11.19C378.31,258.56,310.93-34.23,113.31,3.31Z"/>
+  </g>
+</svg>

src/assets/images/bg_r.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 319.87">
+  <g id="Layer_1-2" data-name="Layer 1">
+    <path d="M205.32,0c-30.67,0-60.43,3.88-88.82,11.19C-78.31,61.31-10.93,354.1,186.69,316.56c40.08-7.61,78.02-15.18,113.31-21.49V12.76C269.86,4.45,238.11,0,205.32,0Z"/>
+  </g>
+</svg>

src/pages/landing/index.tsx

@@ -6,6 +6,8 @@ import { saveVisitedLink } from '../../utils'
 import { CardComponent } from '../../components/Landing/CardComponent/CardComponent'
 import { Container } from '../../components/Container'
 import styles from './style.module.scss'
+import bg_l from '../../assets/images/bg_l.svg'
+import bg_r from '../../assets/images/bg_r.svg'
 
 export const LandingPage = () => {
   const navigate = useNavigate()
@@ -160,49 +162,61 @@ export const LandingPage = () => {
   }, [location])
 
   return (
-    <Container className={styles.container}>
-      <img className={styles.logo} src="/logo.svg" alt="Logo" width={300} />
-      <div className={styles.titleSection}>
-        <h1 className={styles.title}>Secure &amp; Private Document Signing</h1>
-        <p className={styles.subTitle}>
-          An open-source and self-hostable solution for secure document signing
-          and verification.
+    <div className={styles.background}>
+      <Container className={styles.container}>
+        <img className={styles.logo} src="/logo.svg" alt="Logo" width={300} />
+        <div className={styles.titleSection}>
+          <h1 className={styles.title}>
+            Secure &amp; Private Document Signing
+          </h1>
+          <p className={styles.subTitle}>
+            An open-source and self-hostable solution for secure document
+            signing and verification.
+          </p>
+        </div>
+        <Box
+          display={'grid'}
+          gap={'25px'}
+          sx={{
+            gridTemplateColumns: {
+              xs: '1fr',
+              sm: 'repeat(2, 1fr)',
+              xl: 'repeat(3, 1fr)'
+            }
+          }}
+        >
+          {cards.map((c, i) => (
+            <CardComponent key={i} {...c} />
+          ))}
+        </Box>
+
+        <p className={styles.description}>
+          SIGit is a secure &amp; private document signing service where you can
+          create, sign, and verify any document from any device with a browser.
         </p>
-      </div>
-      <Box
-        display={'grid'}
-        gap={'25px'}
-        sx={{
-          gridTemplateColumns: {
-            xs: '1fr',
-            sm: 'repeat(2, 1fr)',
-            xl: 'repeat(3, 1fr)'
-          }
-        }}
-      >
-        {cards.map((c, i) => (
-          <CardComponent key={i} {...c} />
-        ))}
-      </Box>
 
-      <p className={styles.description}>
-        SIGit is a secure &amp; private document signing service where you can
-        create, sign, and verify any document from any device with a browser.
-      </p>
+        <Button
+          sx={{
+            fontSize: '22px',
+            padding: '16px 32px',
+            backgroundColor: 'var(--secondary-main)'
+          }}
+          variant="contained"
+          onClick={onSignInClick}
+        >
+          GET STARTED
+        </Button>
 
-      <Button
-        sx={{
-          fontSize: '22px',
-          padding: '16px 32px',
-          backgroundColor: 'var(--secondary-main)'
-        }}
-        variant="contained"
-        onClick={onSignInClick}
-      >
-        GET STARTED
-      </Button>
-
-      <Outlet />
-    </Container>
+        <Outlet />
+      </Container>
+      <div
+        className={`${styles.backgroundBlob} ${styles.backgroundBlobLeft}`}
+        style={{ backgroundImage: `url(${bg_l})` }}
+      ></div>
+      <div
+        className={`${styles.backgroundBlob} ${styles.backgroundBlobRight}`}
+        style={{ backgroundImage: `url(${bg_r})` }}
+      ></div>
+    </div>
   )
 }

src/pages/landing/style.module.scss

@@ -1,6 +1,10 @@
 @import '../../styles/colors.scss';
 @import '../../styles/sizes.scss';
 
+.background {
+  position: relative;
+}
+
 .container {
   display: flex;
   gap: 45px;
@@ -39,3 +43,28 @@
   text-align: center;
   color: rgba(0, 0, 0, 0.5);
 }
+
+.backgroundBlob {
+  position: absolute;
+  opacity: 0.05;
+  width: 13%;
+  height: 349px;
+  pointer-events: none;
+  background: no-repeat center / contain;
+
+  &Right {
+    top: 50px;
+    right: 0;
+    background-position: right;
+  }
+
+  &Left {
+    bottom: 50px;
+    left: 0;
+    background-position: left;
+  }
+
+  @media (max-width: 1200px) {
+    display: none;
+  }
+}