adds intro page and meta data

safient · Sep 2, 2022 · 20eeb1f · 20eeb1f
1 parent 80321c5
commit 20eeb1f
Show file tree

Hide file tree

Showing 8 changed files with 316 additions and 0 deletions.
diff --git a/pages/intro/index.js b/pages/intro/index.js
@@ -0,0 +1,41 @@
+import Head from 'next/head';
+import { Container, IntroBody, IntroHeader } from '../../src/components';
+
+function WalletPage() {
+  return (
+    <>
+    <Head>
+        <title>Safient- Non-custodial secret Recovery and Inheritance Protocol</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name='description' content='Recover and Inherit digital secrets in a non-custodial way with security and convenience' />
+        <meta property="og:type" content="website"/><meta property="og:url" content="https://safient.io"/>
+        <meta property="og:title" content="Safient- Non-custodial secret Recovery and Inheritance Protocol" />
+        <meta property="og:site_name" content="Safient"/>
+        <meta property="twitter:card" content="summary_large_image"/>
+        <meta property="twitter:url" content="https://safient.io/intro"/>
+        <meta property="twitter:title" content="Safient- Non-custodial secret Recovery and Inheritance Protocol"/>
+        <meta property="twitter:description" content="Recover and Inherit digital secrets in a non-custodial way with security and convenience"/>
+        <meta property="twitter:image" content="https://safient.io/cover.jpg"/>
+        <meta name="next-head-count" content="17"/>
+    <meta
+      property="og:image"
+      content="https://safient.io/cover.jpg"
+    />
+        <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'
+        />
+      </Head>
+    <Container>
+      <IntroHeader />
+      <IntroBody />
+    </Container>
+    </>
+  );
+}
+
+export default WalletPage;
diff --git a/public/cover.jpg b/public/cover.jpg
diff --git a/src/components/common/footer/footer.component.js b/src/components/common/footer/footer.component.js
@@ -19,6 +19,11 @@ export const Footer = () => {
 								<Link href='/about'>About</Link>
 							</li>
 						</ul>
+						<ul>
+							<li>
+								<Link href='/intro'>Intro</Link>
+							</li>
+						</ul>
 					</StyledDiv>
 					<StyledDiv>
 						<h3>Developer Resources</h3>

diff --git a/src/components/index.js b/src/components/index.js
@@ -12,3 +12,5 @@ export * from './why-section/why-section.component';
 export * from './developer-resources/developer-resources.component';
 export * from './span/span.component';
 export * from './products/product-section.component';
+export * from './intro-header/header.component';
+export * from './intro-body/body.component';
diff --git a/src/components/intro-body/body.component.js b/src/components/intro-body/body.component.js
@@ -0,0 +1,46 @@
+import { FeatureCard, FeaturesContainer, CardsContainer, IconContainer } from './body.component.styles';
+import { Span } from '../span/span.component';
+
+export const IntroBody = () => {
+  return (
+    <FeaturesContainer>
+      <CardsContainer>
+          <FeatureCard >
+            <h4>Safient Solutions</h4>
+            <p>We at Safient have built a few solutions leveraging our own secret recovery and inheritance mechanism.</p>
+             <p>  <span className='solutionText'> Safient Wallet 📱</span>   <a className='linkText' href='https://wallet.safient.io/gm' target='_next'>
+              ( https://wallet.safient.io )</a> - A Non-custodial Recoverable and Inheritable wallet application</p>
+
+              <p>  <span className='solutionText'> Safient Voucher 🎁</span>   <a className='linkText' href='https://voucher.safient.io' target='_next'>
+              ( https://voucher.safient.io )</a> - Safest and Convenient way to gift Crypto without intermediaries </p>
+
+              <p>  <span className='solutionText'>  Inheritable Safes 🔒 </span>   <a className='linkText' href='https://safient.io/safes ' target='_next'>
+              ( https://safient.io/safes )</a> - Recovery and Inheritance solution for crypto and other digital assets.</p>
+
+            <p className='whiteText'>Feel free to get in touch with us through any of the below mediums 🤝.</p>
+            <ul>
+
+            <li>
+							<a href="https://discord.safient.io" target='_next'>
+								<i className='fa-brands fa-discord' />
+							</a>
+						</li>
+
+						<li>
+							<a href="https://twitter.com/safientio" target='_next'>
+								<i className='fa-brands fa-twitter' />
+							</a>
+						</li>
+
+            <li>
+							<a href="https://github.com/safient" target='_next'>
+								<i className='fa-brands fa-github' />
+							</a>
+						</li>
+				</ul>
+          </FeatureCard>
+
+      </CardsContainer>
+    </FeaturesContainer>
+  );
+};
diff --git a/src/components/intro-body/body.component.styles.js b/src/components/intro-body/body.component.styles.js
@@ -0,0 +1,85 @@
+import styled from "styled-components";
+
+export const FeaturesContainer = styled.div`
+  margin: 10rem 0;
+  h2 {
+    text-align: center;
+    font-size: 36px;
+  }
+  @media (max-width: 576px) {
+    h2 {
+      text-align: center;
+      font-size: 2.2rem;
+    }
+    p {
+      font-size: 1.8rem;
+    }
+  }
+`;
+
+export const FeatureCard = styled.div`
+  background: #181628;
+  padding: 2rem 3rem 2rem 3rem;
+  flex: 0 0 38.4rem;
+  border-radius: 0.5rem;
+  @media (max-width: 57.6rem) {
+    flex: 0 0 34.4rem;
+  }
+`;
+
+export const CardsContainer = styled.div`
+  gap: 2.4rem;
+  margin-top: 4rem;
+
+  h4 {
+    margin-top: 2rem;
+    color: #d9e3ea;
+    font-size: 2rem;
+  }
+
+  p {
+    margin-top: 1rem;
+    line-height: 1.9;
+    color: #9ba9b4;
+    font-weight: 500;
+  }
+  @media (max-width: 57.6rem) {
+    justify-content: center;
+  }
+  ul {
+		display: flex;
+		color: #fff;
+		margin-top: 2rem;
+		gap: 2rem;
+		cursor: pointer;
+	}
+	i {
+		font-size: 2.4rem;
+		&:hover {
+			color: #6663fd;
+		}
+	}
+	a {
+		color: #fff;
+	}
+  .linkText {
+    color: #5d5dff;
+  }
+  .solutionText {
+    color: #14acb6;
+  }
+  .whiteText {
+    color: #fff;
+  }
+`;
+
+export const IconContainer = styled.div`
+  background: linear-gradient(90deg, transparent, transparent),
+    linear-gradient(209.87deg, #14acb6 31.2%, #7141d7 71.49%);
+  display: inline-flex;
+  border-radius: 50%;
+  img {
+    padding: 2rem;
+  }
+`;
+
diff --git a/src/components/intro-header/header.component.js b/src/components/intro-header/header.component.js
@@ -0,0 +1,70 @@
+import { Span } from '../span/span.component';
+import { HeaderContainer, StyledDiv } from './header.component.styles';
+
+export const IntroHeader = () => {
+  return (
+    <HeaderContainer>
+      <h2>
+      Introducing <Span> Safient Protocol</Span>
+      </h2>
+      {/* <p className='sub-heading'>
+      Safient proudly introduces an unique Secret Recovery and inheritance mechanism performed in a non-custodial way. The protocol can be used
+      to create recovery and inheritance plans for all the self custodied crypto assets. Since the protocol is generic it can be used 
+      to build solution for recovery of any digital assets, information and secrets.
+        <a className='linkText' href='https://resources.safient.io/' target='_next'>
+          resources page{' '}
+        </a>
+        . You can straight away dive into our{' '}
+        <a className='linkText' href='https://docs.safient.io/core-getting-started' target='_next'>
+          developer documentation
+        </a>{' '}
+        if you are looking to integrate a service or build on top of the protocol. Getting started with Safient to
+        create claimable safes is a breeze. But feel free to reach out to us on{' '}
+        <a className='linkText' href='https://discord.safient.io' target='_next'>
+          Discord{' '}
+        </a>{' '}
+        for any queries.
+      </p> */}
+      <StyledDiv>
+        <div className='info'>
+          <p>
+            Have you ever wondered how will you recover or pass on your{' '}
+            <Span>valuable crypto assets, secret instructions </Span> to your loved ones in case of an unfortunate
+            event, or what happens when you no longer have access to your unsafe secret backup ?
+          </p>
+
+          <p>
+            Worry no more, Safient protocol will help you securely manage all the critical information in a
+            non-custodial way and help recover or inherit the assets so that your loved ones have access to them with{' '}
+            <Span> 100 % surety </Span> at the right time, even incase of any tragic event.
+            Since the protocol is generic it can be used 
+      to build solution for recovery of any digital assets, information and secrets.
+          </p>
+        </div>
+
+        <div className='graphics'>
+          <img src='./images/why.png' alt='graphics' />
+        </div>
+      </StyledDiv>
+
+      {/* <p className='sub-heading'>
+      Safient proudly introduces an unique Secret Recovery and inheritance mechanism performed in a non-custodial way. The protocol can be used
+      to create recovery and inheritance plans for all the self custodied crypto assets. Since the protocol is generic it can be used 
+      to build solution for recovery of any digital assets, information and secrets.
+        <a className='linkText' href='https://resources.safient.io/' target='_next'>
+          resources page{' '}
+        </a>
+        . You can straight away dive into our{' '}
+        <a className='linkText' href='https://docs.safient.io/core-getting-started' target='_next'>
+          developer documentation
+        </a>{' '}
+        if you are looking to integrate a service or build on top of the protocol. Getting started with Safient to
+        create claimable safes is a breeze. But feel free to reach out to us on{' '}
+        <a className='linkText' href='https://discord.safient.io' target='_next'>
+          Discord{' '}
+        </a>{' '}
+        for any queries.
+      </p> */}
+    </HeaderContainer>
+  );
+};
diff --git a/src/components/intro-header/header.component.styles.js b/src/components/intro-header/header.component.styles.js
@@ -0,0 +1,67 @@
+import styled from 'styled-components';
+
+export const HeaderContainer = styled.div`
+  margin: 10rem 0 2rem 0;
+  .sub-heading {
+    font-size: 2.2rem;
+    line-height: 40px;
+    font-weight: 500;
+  }
+  h2 {
+    text-align: center;
+    font-size: 3.5rem;
+    margin-bottom: 2rem;
+  }
+
+  p {
+    margin: 1.5rem 0;
+    font-size: 2rem;
+    line-height: 36px;
+    font-weight: 500;
+  }
+
+  .linkText {
+    color: #5d5dff;
+  }
+
+  @media (max-width: 576px) {
+    margin-top: 2rem;
+    padding: 2rem;
+    h2 {
+      text-align: center;
+      font-size: 3.0rem;
+    }
+    .sub-heading {
+      font-size: 1.8rem;
+    }
+  }
+`;
+
+
+export const StyledDiv = styled.div`
+  display: flex;
+
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 8rem;
+
+  img {
+    display: block;
+    width: 45rem;
+    height: auto;
+  }
+
+  .info {
+    flex: 1;
+  }
+  .graphics {
+    align-self: flex-end !important;
+  }
+
+  @media (max-width: 57.6rem) {
+    img {
+      width: 85%;
+    }
+  }
+`;