+
-First, run the development server:
+# 🚪 Gateway Network - Source code
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
+This repo contains the code for [Gateway dApp](https://gateway.network) website. Powered by [Next.js](https://nextjs.org).
+
+# 🔧 Installation
+
+Make sure you have [Git](https://git-scm.com/), [Node.js 16 LTS](https://nodejs.org/) and [pnpm](https://pnpm.io/) installed
+
+1. Clone this repo
+
+```sh
+git clone https://github.com/Gateway-DAO/network-ui
```
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+2. Install dependencies using pnpm
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+```sh
+pnpm i
+```
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+3. Create the env file. Ask about it to your manager
-## Learn More
+4. Generate the typings
-To learn more about Next.js, take a look at the following resources:
+```sh
+pnpm generate
+```
+
+5. Start the development server
+
+```sh
+pnpm dev
+```
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+# 👍 Contribute
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+If you want to say thank you and/or support the active development of the `dApp`:
-## Deploy on Vercel
+1. Add a [GitHub Star](https://github.com/Gateway-DAO/network-ui/stargazers) to the project.
+2. Talk to us on our [Discord](https://discord.gg/tgt3KjcHGs)
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+# E2E
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+Copy your `next-auth.session-token` and set the value in your dotenv file (`TEST_NEXT_AUTH_TOKEN`).
diff --git a/__backup.jest.config.mjs b/__backup.jest.config.mjs
new file mode 100644
index 000000000..50cb65a19
--- /dev/null
+++ b/__backup.jest.config.mjs
@@ -0,0 +1,22 @@
+import nextJest from 'next/jest.js';
+
+const createJestConfig = nextJest({
+ // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+ dir: './',
+});
+
+// Add any custom config to be passed to Jest
+/** @type {import('jest').Config} */
+const config = {
+ // Add more setup options before each test is run
+ setupFilesAfterEnv: ['Gateway Protocol Status
+ LIVE +Gateway Docs Version
+1.0.1
+ +
+ Gateway is the foundation to securely create, own, manage,
+ and verify private data assets (PDAs) across the digital world.
+
+ All you need to know to
+ start you journey
+
{card.description}
+ + ))} +{card.description}
+ + ))} +
+ We have built the technology needed to facilitate
regulatory
+ compliant data sharing, ownership, and usage
that was never
+ possible before.
+
+ © 2023 Gateway Inc. All rights reserved. +
+ ++ Subscribe to our newsletter +
++ Receive news about developments and updates. +
+ + setEmail(e.target.value)} + /> + + +
+ Gateway powers private data usage across the web
+ for organizations, users, and applications.
+
{step.text}
+{step.text}
+(textPdasParagraphRefs.current[0] = ref)} + > + (textPdasRefs.current[0] = ref)}> + Private Data Assets (PDAs) + + (slashRefs.current[0] = ref)} + > + _ + +
+(textPdasParagraphRefs.current[1] = ref)} + > + (textPdasRefs.current[1] = ref)}> + The key to sovereignty across the web. Turn raw data into + encrypted, secure, portable, and publicly verifiable assets. + + (slashRefs.current[1] = ref)} + > + _ + +
+(textPdasParagraphRefs.current[0] = ref)} + > + (textPdasRefs.current[0] = ref)}> + Private Data Assets (PDAs) + + (slashRefs.current[0] = ref)} + > + _ + +
+(textPdasParagraphRefs.current[1] = ref)} + > + (textPdasRefs.current[1] = ref)}> + The key to sovereignty across the web. Turn raw data into + encrypted, secure, portable, and publicly verifiable assets. + + (slashRefs.current[1] = ref)} + > + _ + +
+{children}
; +} diff --git a/src/app/(landing)/learn/components/hero/hero.module.scss b/src/app/(landing)/learn/components/hero/hero.module.scss new file mode 100644 index 000000000..0678741d5 --- /dev/null +++ b/src/app/(landing)/learn/components/hero/hero.module.scss @@ -0,0 +1,267 @@ +.element { + background-color: #e6d5fa; + padding-top: 185px; + padding-bottom: 200px; + overflow: hidden; + + @media (max-width: 599px) { + padding-bottom: 61px; + } +} + +.title { + color: rgba(0, 0, 0, 0.87); + font-size: 82px; + font-style: normal; + font-weight: 400; + line-height: 82px; + letter-spacing: 0.412px; + padding-bottom: 87px; + + strong { + color: #771ac9; + font-weight: 400; + } + + @media (max-width: 969px) { + br { + display: none; + } + } + + @media (max-width: 599px) { + font-size: 36px; + font-style: normal; + font-weight: 400; + line-height: 36px; + letter-spacing: 0.412px; + padding-bottom: 56px; + } +} + +.title { + margin: 0; +} + +.concepts_head { + align-items: center; + display: flex; + justify-content: space-between; + flex-wrap: wrap; + margin-bottom: 40px; + width: 100%; +} + +.concepts_title { + color: rgba(0, 0, 0, 0.87); + font-size: 20px; + font-weight: 400; + line-height: 28px; + letter-spacing: 0.412px; +} + +.concepts_buttons { + display: flex; + + @media (max-width: 599px) { + display: none; + } +} + +.concepts_link, +.solutions_link { + button { + border-color: #771ac9; + color: #771ac9; + padding: 8px 22px; + + &:hover { + color: #fff; + } + } + + &:not(:last-child) { + margin-right: 8px; + } +} + +.concepts { + display: flex; + justify-content: space-between; + padding-bottom: 80px; + margin-bottom: 40px; + position: relative; + + &:after { + background-color: rgba(0, 0, 0, 0.5); + bottom: 0; + content: ''; + height: 1px; + left: 0; + opacity: 0.4; + position: absolute; + width: 100%; + } + + @media (max-width: 599px) { + display: none; + } +} + +.mobile_concepts { + display: none; + padding-bottom: 56px; + margin-bottom: 56px; + position: relative; + + &:after { + background-color: rgba(0, 0, 0, 0.5); + bottom: 0; + content: ''; + height: 1px; + left: 0; + opacity: 0.4; + position: absolute; + width: 100%; + } + + @media (max-width: 599px) { + display: block; + } +} + +.card { + background-color: #771ac9; + border-radius: 16px; + padding: 30px 20px; + transition: background-color 0.8s ease; + text-decoration: none; + + &--concept { + height: 368px; + width: calc(33% - 12px); + + @media (max-width: 1199px) and (min-width: 600px) { + height: 260px; + } + + @media (max-width: 599px) { + height: 280px; + margin-right: 12px; + width: 70vw !important; + } + } + + &--solution { + height: 227px; + width: calc(50% - 12px); + + @media (max-width: 599px) { + height: 280px; + width: 100%; + + &:not(:last-child) { + margin-bottom: 12px; + } + } + } + + &:hover { + background-color: #591597; + } +} + +.card_container { + display: flex; + flex-direction: column; + height: 100%; + justify-content: space-between; + position: relative; + word-wrap: 100%; +} + +.card_title { + color: #e6d5fa; + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: 26px; + letter-spacing: 0.46px; + margin: 0; +} + +.card_description { + color: #fff; + font-size: 24px; + font-style: normal; + font-weight: 400; + line-height: 33.6px; + letter-spacing: 0.412px; + margin: 0; +} + +.solutions_title { + color: rgba(0, 0, 0, 0.87); + font-size: 48px; + font-style: normal; + font-weight: 400; + line-height: 67.2px; + letter-spacing: 0.412px; + margin-top: 0; + margin-bottom: 20px; + + @media (max-width: 599px) { + font-size: 34px; + font-style: normal; + font-weight: 400; + line-height: 50.4px; + letter-spacing: 0.412px; + } +} + +.solutions_subtitle { + color: rgba(0, 0, 0, 0.6); + font-size: 20px; + font-style: normal; + font-weight: 400; + line-height: 28px; + letter-spacing: 0.412px; + margin-top: 0; + margin-bottom: 60px; + + @media (max-width: 599px) { + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 22.4px; + letter-spacing: 0.412px; + margin-bottom: 40px; + + br { + display: none; + } + } +} + +.solutions_cards_container { + display: flex; + justify-content: space-between; + margin-bottom: 40px; + + @media (max-width: 599px) { + flex-direction: column; + justify-content: initial; + } +} + +.mobile_comcepts_buttons { + margin-top: 24px; + + a { + display: block; + + &:not(:last-child) { + margin-bottom: 12px; + } + } +} diff --git a/src/app/(landing)/learn/components/hero/index.tsx b/src/app/(landing)/learn/components/hero/index.tsx new file mode 100644 index 000000000..27844e877 --- /dev/null +++ b/src/app/(landing)/learn/components/hero/index.tsx @@ -0,0 +1,179 @@ +import { useRef } from 'react'; + +import Button from '@/app/(landing)/components/button'; +import Wrapper from '@/app/(landing)/components/wrapper'; +import useHeaderVariantDetection from '@/app/(landing)/hooks/use-header-variant-detection'; +import { joinClasses } from '@/app/(landing)/utils/function'; +import GTWLink from '@/components/gtw-link'; +import Slider from 'react-slick'; + +import styles from './hero.module.scss'; +import { DOCS_BASE_URL } from '@/constants/docs'; +import routes from '@/constants/routes'; + +const conceptsCards = [ + { + title: 'Getting Started', + description: 'Learn the basics of our protocol', + href: `${DOCS_BASE_URL}docs/what-is-the-gatewayprotocol`, + target: '_blank', + }, + { + title: 'Architecture', + description: 'How the protocol is structured', + href: routes.build, + target: '_self', + }, + { + title: 'API', + description: 'Use GraphQL API to power your applications', + href: `${DOCS_BASE_URL}graphql`, + target: '_blank', + }, +]; + +const solutionsCards = [ + { + title: 'Sample Data Models', + description: + 'Read through various data models we suggest you can build and use.', + href: `${DOCS_BASE_URL}docs/data-model`, + }, + { + title: 'Automate Issuance', + description: 'SDK integration step-by-step', + href: `${DOCS_BASE_URL}docs/start-issuing`, + }, +]; + +export default function Hero() { + const sectionRef = useRef+ The basic concepts to play with Gateway +
+ +{card.description}
+{card.description}
+
+ We create different solutions with our protocol to help
+ organizations find the one that fits better to their context.
+
{card.description}
+
+ We create different solutions with our protocol to help
+ organizations find the one that fits better to their context.
+
+ {product.description} +
+ + ))} +{protocol.description}
+ + ))} ++ {feature.description} +
+{highlight.text}
++ {highlight.info.description} +
+ +nada ainda
} -