safient · rohanreddy888 · Aug 19, 2022 · Aug 19, 2022 · Aug 22, 2022
diff --git a/pages/_document.js b/pages/_document.js
@@ -1,55 +1,55 @@
-import Document, { Head, Html, Main, NextScript } from 'next/document';
-import { ServerStyleSheet } from 'styled-components';
+import Document, { Head, Html, Main, NextScript } from "next/document";
+import { ServerStyleSheet } from "styled-components";
 
 export default class MyDocument extends Document {
-	render() {
-		return (
-			<Html lang='en'>
-				<Head>
-					<link rel='preconnect' href='https://fonts.googleapis.com' />
-					{/* <link rel='preconnect' href='https://fonts.gstatic.com' crossorigin /> */}
-					<link
-						href='https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500;600&family=Inter:wght@100;200;300;400;500;600;700;800&display=swap'
-						rel='stylesheet'
-					/>
-					<link
-						rel='stylesheet'
-						href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css'
-						integrity='sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A=='
-						crossOrigin='anonymous'
-						referrerpolicy='no-referrer'
-					/>
-				</Head>
-				<body>
-					<Main />
-					<NextScript />
-				</body>
-			</Html>
-		);
-	}
-	static async getInitialProps(ctx) {
-		const sheet = new ServerStyleSheet();
-		const originalRenderPage = ctx.renderPage;
+  render() {
+    return (
+      <Html lang="en">
+        <Head>
+          <link rel="preconnect" href="https://fonts.googleapis.com" />
+          {/* <link rel='preconnect' href='https://fonts.gstatic.com' crossorigin /> */}
+          <link
+            href="https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500;600&family=Inter:wght@100;200;300;400;500;600;700;800&display=swap"
+            rel="stylesheet"
+          />
+          <link
+            rel="stylesheet"
+            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
+            integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A=="
+            crossOrigin="anonymous"
+            referrerPolicy="no-referrer"
+          />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+  static async getInitialProps(ctx) {
+    const sheet = new ServerStyleSheet();
+    const originalRenderPage = ctx.renderPage;
 
-		try {
-			ctx.renderPage = () =>
-				originalRenderPage({
-					enhanceApp: (App) => (props) =>
-						sheet.collectStyles(<App {...props} />),
-				});
+    try {
+      ctx.renderPage = () =>
+        originalRenderPage({
+          enhanceApp: (App) => (props) =>
+            sheet.collectStyles(<App {...props} />),
+        });
 
-			const initialProps = await Document.getInitialProps(ctx);
-			return {
-				...initialProps,
-				styles: (
-					<>
-						{initialProps.styles}
-						{sheet.getStyleElement()}
-					</>
-				),
-			};
-		} finally {
-			sheet.seal();
-		}
-	}
+      const initialProps = await Document.getInitialProps(ctx);
+      return {
+        ...initialProps,
+        styles: (
+          <>
+            {initialProps.styles}
+            {sheet.getStyleElement()}
+          </>
+        ),
+      };
+    } finally {
+      sheet.seal();
+    }
+  }
 }
diff --git a/pages/index.js b/pages/index.js
@@ -1,4 +1,4 @@
-import Head from 'next/head';
+import Head from "next/head";
 import {
   Features,
   Faq,
@@ -9,21 +9,23 @@ import {
   DeveloperResources,
   ProductSection,
   Container,
-} from '../src/components';
+} from "../src/components";
 
 export default function Home() {
   return (
     <>
       <Head>
-        <title>Safient- Non-custodial secret Recovery and Inheritance Protocol</title>
-        <meta name='description' content='Safient Protocol official website' />
-        <link rel='icon' href='/favicon.ico' />
+        <title>
+          Safient- Non-custodial secret Recovery and Inheritance Protocol
+        </title>
+        <meta name="description" content="Safient Protocol official website" />
+        <link rel="icon" href="/favicon.ico" />
         <link
-          rel='stylesheet'
-          href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css'
-          integrity='sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=='
-          crossOrigin='anonymous'
-          referrerpolicy='no-referrer'
+          rel="stylesheet"
+          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
+          integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
+          crossOrigin="anonymous"
+          referrerPolicy="no-referrer"
         />
       </Head>
       <Hero />

diff --git a/src/components/button/button.js b/src/components/button/button.js
@@ -1,5 +1,5 @@
-import React from 'react';
-import styled from 'styled-components';
+import React from "react";
+import styled from "styled-components";
 
 export const StyledButton = styled.button`
   background: linear-gradient(90deg, transparent, transparent),
@@ -12,8 +12,15 @@ export const StyledButton = styled.button`
   border: none;
   border-radius: 5px;
   cursor: pointer;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
   &:hover {
-    background: linear-gradient(89.58deg, #44bcf0 -19.85%, #818cf8 54.07%, #a099ff 120.75%);
+    background: linear-gradient(
+      89.58deg,
+      #44bcf0 -19.85%,
+      #818cf8 54.07%,
+      #a099ff 120.75%
+    );
   }
 `;
 

diff --git a/src/components/common/footer/footer.component.styles.js b/src/components/common/footer/footer.component.styles.js
@@ -3,7 +3,7 @@ import styled from "styled-components";
 export const FooterContainer = styled.footer`
   margin: 5rem 0 1rem;
   @media (max-width: 57.6rem) {
-    padding: 0rem 2rem 0rem 2rem;
+    padding: 0rem 2rem;
   }
 `;
 

diff --git a/src/components/common/navbar/navbar.component.js b/src/components/common/navbar/navbar.component.js
@@ -38,21 +38,33 @@ export const Navbar = () => {
           <img src="logo.svg" alt="" />
         </Link>
         <ul>
-          <li className={pathname === "/about" && "active"}>
+          <li
+            className={
+              pathname === "/about" && "active" ? "active" : "disabled"
+            }>
             <Link href="/about">About</Link>
           </li>
-          <li className={pathname === "/blog" && "active"}>
+          <li
+            className={
+              pathname === "/blog" && "active" ? "active" : "disabled"
+            }>
             <a href="https://blog.safient.io" target="_blank" rel="noreferrer">
               Blog
             </a>
           </li>
-          <li className={pathname === "/docs" && "active"}>
+          <li
+            className={
+              pathname === "/docs" && "active" ? "active" : "disabled"
+            }>
             <a href="https://docs.safient.io" target="_blank" rel="noreferrer">
               Docs
             </a>
           </li>
 
-          <li className={pathname === "/developers" && "active"}>
+          <li
+            className={
+              pathname === "/developers" && "active" ? "active" : "disabled"
+            }>
             <a href="https://code.safient.io" target="_blank" rel="noreferrer">
               Developers
             </a>
@@ -84,37 +96,51 @@ export const Navbar = () => {
               onClick={() => setIsActive(!isActive)}
               ref={ref}>
               <ul onClick={() => setIsActive(!isActive)}>
-                <li className={pathname === "/about" && "active"}>
+                <li
+                  className={
+                    pathname === "/roadmap" && "active" ? "active" : "disabled"
+                  }>
                   <Link href="/roadmap">Roadmap</Link>
                 </li>
-                <li className={pathname === "/blog" && "active"}>
+                <li
+                  className={
+                    pathname === "/blog" && "active" ? "active" : "disabled"
+                  }>
                   <a
                     href="https://blog.safient.io"
                     target="_blank"
                     rel="noreferrer">
                     Blog
                   </a>
                 </li>
-                <li className={pathname === "/docs" && "active"}>
+                <li
+                  className={
+                    pathname === "/docs" && "active" ? "active" : "disabled"
+                  }>
                   <a
                     href="https://docs.safient.io"
-                    target='_next'
+                    target="_next"
                     rel="noreferrer">
                     Docs
                   </a>
                 </li>
 
-                <li className={pathname === "/developers" && "active"}>
+                <li
+                  className={
+                    pathname === "/developers" && "active"
+                      ? "active"
+                      : "disabled"
+                  }>
                   <a
                     href="https://code.safient.io"
-                    target='_next'
+                    target="_next"
                     rel="noreferrer">
                     Developers
                   </a>
                 </li>
 
                 {/* <li className={pathname === '/app' && 'active'}> */}
-                <Link href="/get-started" >
+                <Link href="/get-started">
                   <Button>Try Now</Button>
                 </Link>
               </ul>

diff --git a/src/components/common/navbar/navbar.component.styles.js b/src/components/common/navbar/navbar.component.styles.js
@@ -81,7 +81,7 @@ export const NavbarContainer = styled.nav`
 
 export const MobileMenuContainer = styled.div`
   width: 100%;
-  padding: 4rem;
+  padding: 1rem 2rem;
   background: #1d1f22;
 
   ul {

diff --git a/src/components/developer-resources/developer-resources.component.styles.js b/src/components/developer-resources/developer-resources.component.styles.js
@@ -20,13 +20,14 @@ export const FeaturesContainer = styled.div`
     }
     .sub-heading {
       font-size: 1.8rem;
+      margin: 0rem 1rem 0rem 1rem;
     }
   }
 `;
 
 export const FeatureCard = styled.div`
   background: #181628;
-  padding: 2rem 3rem 2rem 3rem;
+  padding: 2rem 3rem;
   flex: 0 0 38.4rem;
   transition: box-shadow 0.3s;
 
@@ -67,6 +68,8 @@ export const CardsContainer = styled.div`
   }
   @media (max-width: 57.6rem) {
     justify-content: center;
+    flex-direction: column;
+    margin: 1rem 2rem;
   }
 `;
 

diff --git a/src/components/faq/faq.component.styles.js b/src/components/faq/faq.component.styles.js
@@ -44,7 +44,7 @@ export const AnswersContainer = styled.div`
 `;
 
 export const ItemsContainer = styled.div`
-  margin: 6rem 0 8rem 0;
+  margin: 6rem 1rem 8rem 1rem;
 
   h2 {
     text-align: center;

diff --git a/src/components/features/features.component.styles.js b/src/components/features/features.component.styles.js
@@ -19,7 +19,7 @@ export const FeaturesContainer = styled.div`
 
 export const FeatureCard = styled.div`
   background: #181628;
-  padding: 2rem 3rem 2rem 3rem;
+  padding: 2rem 3rem;
   flex: 0 0 38.4rem;
   transition: box-shadow 0.3s;
   border-radius: 0.5rem;
@@ -59,6 +59,8 @@ export const CardsContainer = styled.div`
   }
   @media (max-width: 57.6rem) {
     justify-content: center;
+    flex-direction: column;
+    margin: 1rem 2rem;
   }
 `;
 

diff --git a/src/components/guardian-early-access/guardian-early-access.component.styles.js b/src/components/guardian-early-access/guardian-early-access.component.styles.js
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from "styled-components";
 
 export const HeroContainer = styled.div`
   display: flex;
@@ -118,7 +118,12 @@ export const SubmitContainer = styled.div`
     cursor: pointer;
 
     &:hover {
-      background: linear-gradient(89.58deg, #44bcf0 -19.85%, #818cf8 54.07%, #a099ff 120.75%);
+      background: linear-gradient(
+        89.58deg,
+        #44bcf0 -19.85%,
+        #818cf8 54.07%,
+        #a099ff 120.75%
+      );
     }
   }
 `;
diff --git a/src/components/join-community/join-community.component.js b/src/components/join-community/join-community.component.js
@@ -6,6 +6,9 @@ export const JoinContainer = styled.section`
     linear-gradient(209.87deg, #14acb6 31.2%, #7141d7 71.49%);
   color: #fff;
   border-radius: 5px;
+  @media (max-width: 57.6rem) {
+    border-radius: 0px;
+  }
 `;
 export const BlobContainer = styled.div`
   position: absolute;
@@ -53,7 +56,7 @@ export const NewsLetterContainer = styled.div`
 
     input {
       width: 100%;
-      margin: 2rem 0 2rem 0;
+      margin: 2rem 0;
     }
 
     h3 {