Landing page

services/postgres/migrations/20240324212229_drop_key_id/migration.sql

@@ -0,0 +1,8 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `keyId` on the `RelayLedger` table. All the data in the column will be lost.
+
+*/
+-- AlterTable
+ALTER TABLE "RelayLedger" DROP COLUMN "keyId";

web-portal/frontend/app/page.tsx

@@ -1,5 +1,10 @@
-import { Title } from "@mantine/core";
+import { HeroSection } from "@frontend/components/home / 01-Hero";
+import { Stack } from "@mantine/core";
 
 export default function Home() {
-  return <Title order={3}>Welcome to Gateway Demo Portal!</Title>;
+  return (
+    <Stack bg="cream.1">
+      <HeroSection />
+    </Stack>
+  );
 }

web-portal/frontend/components/home / 01-Hero.tsx

@@ -0,0 +1,77 @@
+"use client";
+import React from "react";
+import {
+  Container,
+  Title,
+  Button,
+  Flex,
+  Group,
+  Text,
+  Box,
+  em,
+} from "@mantine/core";
+import Image from "next/image";
+import logo from "@frontend/public/monochrome_logo.png";
+import heroImage from "@frontend/public/hero_image.png";
+import backgroundOne from "@frontend/public/background_1.png";
+import Link from "next/link";
+import { useMediaQuery } from "@mantine/hooks";
+
+export function HeroSection() {
+  const isMobile = useMediaQuery(`(max-width: ${em(750)})`);
+
+  return (
+    <Container size="md">
+      <Flex align="center" justify="space-between" gap={100} mb={40} p={10}>
+        <Image src={logo.src} alt="hello" width={160} height={58} />
+        {!isMobile && (
+          <Flex
+            align="center"
+            justify="space-evenly"
+            w={800}
+            wrap="wrap"
+            color="umbra.1"
+          >
+            <Title order={3} fw={700}>
+              Home
+            </Title>
+            <Title order={3} fw={500}>
+              Tools
+            </Title>
+            <Title order={3} fw={500}>
+              Pricing
+            </Title>
+            <Title order={3} fw={500}>
+              Swap
+            </Title>
+            <Title order={3} fw={500}>
+              Documentation
+            </Title>
+          </Flex>
+        )}
+      </Flex>
+      <Flex align="center" justify="space-between" gap={100}>
+        <Box>
+          <Title>Your Gateway to Web3</Title>
+          <Text c="dimmed" mt="md" maw={isMobile ? 400 : 500}>
+            Accelerate your Web3 journey with our plug-and-play platform
+            offering comprehensive analytics, Web3-native developer suite and
+            hassle-free access to POKT’s Decentralised RPC Service – simplifying
+            your build from concept to execution.
+          </Text>
+
+          <Group mt={30}>
+            <Link href="#">
+              <Button>Coming Soon</Button>
+            </Link>
+          </Group>
+        </Box>
+        {!isMobile && (
+          <Box>
+            <Image src={heroImage.src} alt="hello" width={400} height={400} />
+          </Box>
+        )}
+      </Flex>
+    </Container>
+  );
+}

web-portal/frontend/utils/Web3Provider.tsx

@@ -1,7 +1,14 @@
 "use client";
 import { APP_NAME } from "@frontend/utils/consts";
 import { FC, PropsWithChildren } from "react";
-import { WagmiProvider, createConfig, http, fallback } from "wagmi";
+import {
+  WagmiProvider,
+  createConfig,
+  http,
+  fallback,
+  cookieStorage,
+  createStorage,
+} from "wagmi";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { mainnet } from "wagmi/chains";
 import {
@@ -25,6 +32,10 @@ export const config = createConfig(
       [mainnet.id]: fallback([http(process.env.NEXT_PUBLIC_RPC_ENDPOINT)]),
     },
     walletConnectProjectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID!,
+    ssr: true,
+    storage: createStorage({
+      storage: cookieStorage,
+    }),
   }),
 );
 const queryClient = new QueryClient();