v0.1.5 Release Oct 17

package.json

@@ -34,6 +34,7 @@
     "@solana/wallet-adapter-wallets": "^0.19.22",
     "@solana/web3.js": "^1.87.1",
     "@studio-freight/lenis": "^1.0.26",
+    "@studio-freight/react-lenis": "^0.0.36",
     "@tanstack/react-query": "^4.36.1",
     "@tanstack/react-query-devtools": "^4.36.1",
     "@vercel/analytics": "^1.1.0",
@@ -54,6 +55,7 @@
     "next-nprogress-bar": "^2.1.2",
     "notistack": "^3.0.1",
     "react": "18.2.0",
+    "react-code-blocks": "^0.1.4",
     "react-dom": "18.2.0",
     "react-easy-crop": "^5.0.2",
     "react-hook-form": "^7.47.0",

src/app/(landing)/build/components/hero/index.tsx

@@ -6,22 +6,23 @@ import GTWLink from '@/components/gtw-link';
 import Slider from 'react-slick';
 
 import styles from './hero.module.scss';
+import { DOCS_BASE_URL } from '@/constants/docs';
 
 const journeySteps = [
   {
     title: 'Getting Started',
     description: 'Learn the basics of our protocol',
-    href: '/',
+    href: `${DOCS_BASE_URL}docs/what-is-the-gatewayprotocol`,
   },
   {
     title: 'Architecture',
     description: 'How the protocol is structured',
-    href: '/',
+    href: `${DOCS_BASE_URL}docs/what-is-the-gatewayprotocol`,
   },
   {
     title: 'API & SDK',
     description: 'Use the SDK from your applications',
-    href: '/',
+    href: `${DOCS_BASE_URL}graphql`,
   },
 ];
 
@@ -34,14 +35,22 @@ const Box = ({ type }: { type: 'desktop' | 'mobile' }) => {
       <p className={styles.box_text}>1.0.1</p>
 
       <div className={styles.box_buttons_container}>
-        <GTWLink href="/" className={styles.box_link}>
+        <GTWLink
+          href={DOCS_BASE_URL}
+          className={styles.box_link}
+          target={'_blank'}
+        >
           <Button variant="outlined">
             <span>Full Documentation</span>
             <Link className={styles.box_button_icon} />
           </Button>
         </GTWLink>
 
-        <GTWLink href="/" className={styles.box_link}>
+        <GTWLink
+          href={`${DOCS_BASE_URL}docs/get-started-here`}
+          className={styles.box_link}
+          target={'_blank'}
+        >
           <Button variant="outlined">
             <span>V2 API</span>
             <Link className={styles.box_button_icon} />
@@ -89,7 +98,12 @@ export default function Hero() {
 
         <div className={styles.steps}>
           {journeySteps.map((card, index) => (
-            <a className={styles.card} key={index} href={card.href}>
+            <a
+              className={styles.card}
+              key={index}
+              href={card.href}
+              target={'_blank'}
+            >
               <h3 className={styles.card_title}>{card.title}</h3>
               <p className={styles.card_description}>{card.description}</p>
             </a>
@@ -102,7 +116,7 @@ export default function Hero() {
           <Slider {...settings}>
             {journeySteps.map((card, index) => (
               <div key={index}>
-                <a className={styles.card} href={card.href}>
+                <a className={styles.card} href={card.href} target={'_blank'}>
                   <h3 className={styles.card_title}>{card.title}</h3>
                   <p className={styles.card_description}>{card.description}</p>
                 </a>

src/app/(landing)/build/components/template-docs-section/index.tsx

@@ -13,7 +13,7 @@ type Props = {
   cards: {
     title: string;
     description: string;
-    href: '/';
+    href: string;
   }[];
 };
 
@@ -23,14 +23,19 @@ export default function TemplateDocsSection({ title, button, cards }: Props) {
       <Wrapper className={styles.wrapper}>
         <div className={styles.head}>
           <h2 className={styles.title}>{title}</h2>
-          <GTWLink href={button.href}>
+          <GTWLink href={button.href} target={'_blank'}>
             <Button variant="outlined">{button.text}</Button>
           </GTWLink>
         </div>
 
         <div className={styles.cards}>
           {cards.map((card, index) => (
-            <a className={styles.card} key={index} href={card.href}>
+            <a
+              className={styles.card}
+              key={index}
+              href={card.href}
+              target={'_blank'}
+            >
               <h4 className={styles.card_title}>{card.title}</h4>
               <p className={styles.card_description}>{card.description}</p>
             </a>

src/app/(landing)/build/page.tsx

@@ -1,24 +1,14 @@
 'use client';
 
-import { useEffect } from 'react';
-
 import { HeaderContextProvider } from '@/app/(landing)/contexts/header-context';
 
 import Hero from '../build/components/hero';
 import Footer from '../components/footer';
 import Header from '../components/header';
-import LenisManager, { initializeLenis } from '../utils/scroll';
 import TemplateDocsSection from './components/template-docs-section';
+import { DOCS_BASE_URL } from '@/constants/docs';
 
 export default function BuildPage() {
-  useEffect(() => {
-    initializeLenis();
-    LenisManager?.start();
-    return () => {
-      LenisManager?.destroy();
-    };
-  }, []);
-
   return (
     <HeaderContextProvider>
       <Header />
@@ -27,28 +17,28 @@ export default function BuildPage() {
         title="Become an Issuer"
         button={{
           text: 'Open issuer docs',
-          href: '/',
+          href: `${DOCS_BASE_URL}docs/issuers-1`,
         }}
         cards={[
           {
             title: 'Create Unique Data-Models',
-            description: 'Easy create Data models that fits your needs',
-            href: '/',
+            description: 'Easily define and standardize data fields.',
+            href: `${DOCS_BASE_URL}docs/data-model`,
           },
           {
             title: 'Automate Issuance',
             description: 'SDK integration step-by-step',
-            href: '/',
+            href: `${DOCS_BASE_URL}docs/start-issuing`,
           },
           {
             title: 'Control PDA Status',
             description: 'How to Upgrade, Revoke, suspend and Update PDAs',
-            href: '/',
+            href: `${DOCS_BASE_URL}docs/private-data-assets-pda`,
           },
           {
             title: 'Monetize Data-Sharing',
             description: 'How to monetize using our Verification System',
-            href: '/',
+            href: `${DOCS_BASE_URL}docs/data-proof`,
           },
         ]}
       />
@@ -57,18 +47,19 @@ export default function BuildPage() {
         title="Become a Verifier"
         button={{
           text: 'Open verifier docs',
-          href: '/',
+          href: `${DOCS_BASE_URL}docs/verifiers`,
         }}
         cards={[
           {
             title: 'Creating a Data Request',
-            description: 'Easily create Data models that fits your needs',
-            href: '/',
+            description:
+              'How to create data models for requesting Data Assets.',
+            href: `${DOCS_BASE_URL}docs/data-request`,
           },
           {
             title: 'Verification Widget Integration',
             description: 'How to integrate our widget into your platform',
-            href: '/',
+            href: `${DOCS_BASE_URL}docs/data-proof`,
           },
         ]}
       />

src/app/(landing)/components/Link/index.tsx

@@ -3,10 +3,9 @@ import { usePathname } from 'next/navigation';
 import { useRouter } from 'next/navigation';
 import { ReactNode, MouseEvent } from 'react';
 
+import { useLenis } from '@studio-freight/react-lenis';
 import gsap from 'gsap';
 
-import LenisManager from '../../utils/scroll';
-
 type Props = {
   children: ReactNode;
   href: string;
@@ -18,6 +17,8 @@ export default function Link({ href, children, className, onClick }: Props) {
   const pathname = usePathname();
   const router = useRouter();
 
+  const lenis = useLenis();
+
   const handleClick = (e: MouseEvent) => {
     e.preventDefault();
 
@@ -28,7 +29,7 @@ export default function Link({ href, children, className, onClick }: Props) {
     const tl = gsap.timeline();
     tl.to('main', { opacity: 0, duration: 0.3 });
     tl.add(() => {
-      LenisManager?.scrollTo(0, { duration: 0.01 });
+      lenis?.scrollTo(0, { duration: 0.01 });
       router.push(href);
     });
   };

src/app/(landing)/components/burger-button/burger-button.module.scss

@@ -7,6 +7,7 @@
   position: relative;
   transition: border-color 0.8s ease;
   width: 36px;
+  cursor: pointer;
 
   &--light {
     border: 1px solid #fff;

src/app/(landing)/components/footer/index.tsx

@@ -15,6 +15,8 @@ import LogoSubstrack from '../icons/logo-substrack';
 import LogoTwitter from '../icons/logo-twitter';
 import Wrapper from '../wrapper';
 import styles from './footer.module.scss';
+import routes from '@/constants/routes';
+import { DOCS_BASE_URL } from '@/constants/docs';
 
 function splitElementByBrTag(element: HTMLElement): HTMLElement[] {
   // Split the innerHTML of the element using the <br/> tag as the delimiter
@@ -48,58 +50,57 @@ type Props = {
 const linksSocial = [
   {
     icon: LogoTwitter,
-    href: '/',
+    href: 'https://twitter.com/gateway_xyz',
   },
   {
     icon: LogoDiscord,
-    href: '/',
+    href: 'https://discord.gg/tgt3KjcHGs',
   },
   {
     icon: LogoLinkedin,
-    href: '/',
+    href: 'https://www.linkedin.com/company/mygateway/',
   },
   {
     icon: LogoSubstrack,
-    href: '/',
+    href: 'https://mygateway.substack.com/',
   },
   {
     icon: LogoGithub,
-    href: '/',
+    href: 'https://github.com/Gateway-DAO',
   },
 ];
 
 const linksList = [
   {
     title: 'Learn',
-    href: '/',
+    href: routes.learn,
+    target: '_self',
   },
   {
     title: 'Build',
-    href: '/',
-  },
-  {
-    title: 'Explorer',
-    href: '/',
+    href: routes.build,
+    target: '_self',
   },
   {
     title: 'Dashboard',
-    href: '/',
+    href: routes.auth,
+    target: '_self',
   },
   {
     title: 'Privacy',
-    href: '/',
-  },
-  {
-    title: 'Terms & Conditions',
-    href: '/',
+    href: `${DOCS_BASE_URL}docs/privacy-security-standards`,
+    target: '_blank',
   },
+
   {
     title: 'Brand Kit',
-    href: '/',
+    href: 'https://live.standards.site/gateway',
+    target: '_blank',
   },
   {
     title: 'Contact',
-    href: '/',
+    href: 'mailto:ayyan@mygateway.xyz?subject=Contact Us',
+    target: '',
   },
 ];
 
@@ -168,13 +169,19 @@ export default function Footer({ variant }: Props) {
             </span>
           </h2>
           <p className={styles.text} ref={textRef}>
-            Natively integrate our products to enable a new paradigm <br />
-            in digital data. We have built the middleware needed to <br />
-            facilitate and manage data sharing, ownership, and usage <br />
-            that was never possible before.
+            We have built the technology needed to facilitate <br /> regulatory
+            compliant data sharing, ownership, and usage <br /> that was never
+            possible before.
           </p>
 
-          <Button className={styles.button} variant="contained" ref={buttonRef}>
+          <Button
+            className={styles.button}
+            variant="contained"
+            onClick={() =>
+              window.open(`${DOCS_BASE_URL}docs/get-started-here`, '_blank')
+            }
+            ref={buttonRef}
+          >
             Start now
           </Button>
         </InView>
@@ -204,12 +211,12 @@ export default function Footer({ variant }: Props) {
 
             <div className={styles.column}>
               <ul className={styles.links_list}>
-                {linksList.map(({ title, href }, index) => (
+                {linksList.map(({ title, href, target }, index) => (
                   <li className={styles.links_item} key={index}>
                     <GTWLink
                       className={styles.links_link}
                       href={href}
-                      target="_blank"
+                      target={target}
                     >
                       {title}
                     </GTWLink>

src/app/(landing)/components/header/header.module.scss

@@ -1,6 +1,7 @@
 .element {
   left: 0;
-  height: 100px;
+  height: 140px;
+  padding-top: 40px;
   position: fixed;
   top: 0;
   transition: transform 0.6s ease;