diff --git a/pages/intro/index.js b/pages/intro/index.js new file mode 100644 index 0000000..9207451 --- /dev/null +++ b/pages/intro/index.js @@ -0,0 +1,41 @@ +import Head from 'next/head'; +import { Container, IntroBody, IntroHeader } from '../../src/components'; + +function WalletPage() { + return ( + <> + + Safient- Non-custodial secret Recovery and Inheritance Protocol + + + + + + + + + + + + + + + + + + + + + ); +} + +export default WalletPage; diff --git a/public/cover.jpg b/public/cover.jpg new file mode 100644 index 0000000..8f55c66 Binary files /dev/null and b/public/cover.jpg differ diff --git a/src/components/common/footer/footer.component.js b/src/components/common/footer/footer.component.js index ef1a34a..afb28cc 100644 --- a/src/components/common/footer/footer.component.js +++ b/src/components/common/footer/footer.component.js @@ -19,6 +19,11 @@ export const Footer = () => { About +

Developer Resources

diff --git a/src/components/index.js b/src/components/index.js index 6485107..ce42baf 100644 --- 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 new file mode 100644 index 0000000..95b6a3a --- /dev/null +++ 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 ( + + + +

Safient Solutions

+

We at Safient have built a few solutions leveraging our own secret recovery and inheritance mechanism.

+

Safient Wallet 📱 + ( https://wallet.safient.io ) - A Non-custodial Recoverable and Inheritable wallet application

+ +

Safient Voucher 🎁 + ( https://voucher.safient.io ) - Safest and Convenient way to gift Crypto without intermediaries

+ +

Inheritable Safes 🔒 + ( https://safient.io/safes ) - Recovery and Inheritance solution for crypto and other digital assets.

+ +

Feel free to get in touch with us through any of the below mediums 🤝.

+ +
+ +
+
+ ); +}; diff --git a/src/components/intro-body/body.component.styles.js b/src/components/intro-body/body.component.styles.js new file mode 100644 index 0000000..94d0db4 --- /dev/null +++ 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 new file mode 100644 index 0000000..d929c80 --- /dev/null +++ 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 ( + +

+ Introducing Safient Protocol +

+ {/*

+ 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. + + resources page{' '} + + . You can straight away dive into our{' '} + + developer documentation + {' '} + 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{' '} + + Discord{' '} + {' '} + for any queries. +

*/} + +
+

+ Have you ever wondered how will you recover or pass on your{' '} + valuable crypto assets, secret instructions to your loved ones in case of an unfortunate + event, or what happens when you no longer have access to your unsafe secret backup ? +

+ +

+ 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{' '} + 100 % surety 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. +

+
+ +
+ graphics +
+
+ + {/*

+ 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. + + resources page{' '} + + . You can straight away dive into our{' '} + + developer documentation + {' '} + 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{' '} + + Discord{' '} + {' '} + for any queries. +

*/} +
+ ); +}; diff --git a/src/components/intro-header/header.component.styles.js b/src/components/intro-header/header.component.styles.js new file mode 100644 index 0000000..c98473e --- /dev/null +++ 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%; + } + } +`; \ No newline at end of file