From 05b984c829be4805f28fa08d101628ef06ce0d61 Mon Sep 17 00:00:00 2001
From: Kaushik Rishi <rishi.cp01@gmail.com>
Date: Sun, 16 Apr 2023 02:36:26 +0530
Subject: [PATCH 01/10] wip: make main tiles configurable via deploy-templates

---
 web/src/pages/FeaturedApps.tsx |  25 ++-
 web/src/pages/SelectApp.tsx    |  13 +-
 web/src/recoil/api/sdl.ts      | 304 +++++++++++++++++----------------
 3 files changed, 187 insertions(+), 155 deletions(-)

diff --git a/web/src/pages/FeaturedApps.tsx b/web/src/pages/FeaturedApps.tsx
index 23a1150..6257ab4 100644
--- a/web/src/pages/FeaturedApps.tsx
+++ b/web/src/pages/FeaturedApps.tsx
@@ -1,13 +1,15 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import styled from '@emotion/styled';
 import { Template } from '../components/Template';
 import { Button } from '@mui/material';
 import { css } from '@emotion/react';
-import { templateList } from '../recoil/api/sdl';
+import { fetchTemplateList } from '../recoil/api/sdl';
 import Document from '../assets/images/document.svg';
 import { SdlEditor } from '../components/SdlConfiguration/SdllEditor';
 import { HelpCenterSDL } from '../components/HelpCenter/HelpCenterSDL';
 import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
+import { useQuery } from 'react-query';
+import { templateIcons } from '../assets/templates';
 
 const DocumentIcon = () => <img src={Document} alt="Document Icon" />;
 
@@ -23,10 +25,14 @@ export default function FeaturedApps(
     callback,
     setFieldValue
   }: FeaturedAppsProps): JSX.Element {
-  const [numberOfTemplates, setNumberOfTemplates] = useState(templateList.length);
+  // const [numberOfTemplates, setNumberOfTemplates] = useState(templateList.length);
   const [reviewSdl, showSdlReview] = useState(false);
   const closeReviewModal = useCallback(() => showSdlReview(false), []);
   const [isHelpCenterOpen, setIsHelpCenterOpen] = useState(false);
+  const { data: templateListConfig } = useQuery('templateList', fetchTemplateList, {
+    refetchOnWindowFocus: false,
+    keepPreviousData: true,
+  });
 
   const toggleHelpCenter = useCallback(() => {
     setIsHelpCenterOpen((prevIsOpen) => !prevIsOpen);
@@ -55,18 +61,19 @@ export default function FeaturedApps(
       </FeaturedAppsPageHeader>
       <Divider />
       <FeaturedAppsPageWrapper>
-        {templateList.slice(0, numberOfTemplates).map((template: any) => {
+        {templateListConfig.tiles.map((template: any) => {
           return <Template
-            key={template.id}
-            id={template.id}
+            key={template.name}
+            id={template.name}
             title={template.title}
             description={template.description}
-            logo={template.logo}
+            // logo={'https://raw.githubusercontent.com/akash-network/deploy-templates/main' + template.logo}
+            logo={templateIcons[template.logoFileNameWithoutExt]}
             onNextButtonClick={() => onDeployNowClick(template.name)}
           />;
         })}
       </FeaturedAppsPageWrapper>
-      <ViewAllButtonContainer>
+      {/* <ViewAllButtonContainer>
         {templateList.length > numberOfTemplates && (
           <ViewAllButton
             fullWidth
@@ -76,7 +83,7 @@ export default function FeaturedApps(
             View All Apps
           </ViewAllButton>
         )}
-      </ViewAllButtonContainer>
+      </ViewAllButtonContainer> */}
       <SdlEditor
         reviewSdl={reviewSdl}
         closeReviewModal={closeReviewModal}
diff --git a/web/src/pages/SelectApp.tsx b/web/src/pages/SelectApp.tsx
index 7961755..dbea06a 100644
--- a/web/src/pages/SelectApp.tsx
+++ b/web/src/pages/SelectApp.tsx
@@ -10,7 +10,8 @@ import SocialIcon from '../components/Icons/SocialIcon';
 import { isSDLSpec } from '../components/SdlConfiguration/settings';
 import { Template } from '../components/SdlConfiguration/settings';
 import { WalletDeployButtons } from '../components/WalletDeployButton';
-import { fetchSdlList, templateList } from '../recoil/api/sdl';
+import { fetchSdlList, fetchTemplateList } from '../recoil/api/sdl';
+import { templateIcons } from '../assets/templates';
 
 type SocialNetwork = {
   socialNetwork: string,
@@ -36,6 +37,11 @@ export default function SelectApp(props: SelectAppProps): JSX.Element {
     )
   );
 
+  const { data: templateListConfig } = useQuery('templateList', fetchTemplateList, {
+    refetchOnWindowFocus: false,
+    keepPreviousData: true,
+  });
+
   const [social, setSocial] = useState<SocialNetwork[]>([]);
 
   useEffect(() => {
@@ -80,7 +86,8 @@ export default function SelectApp(props: SelectAppProps): JSX.Element {
     }
   };
 
-  const template = templateList.find((template) => template.name === folderName);
+  const template = templateListConfig.tiles.find((template: any) => template.name === folderName);
+  console.log({template});
 
   return (
     <Stack className="items-center">
@@ -88,7 +95,7 @@ export default function SelectApp(props: SelectAppProps): JSX.Element {
         <SdlIntro>
           {folderName && template && (
             <Avatar
-              src={template.logo}
+              src={templateIcons[template.logoFileNameWithoutExt]}
               alt="Logo"
             />
           )}
diff --git a/web/src/recoil/api/sdl.ts b/web/src/recoil/api/sdl.ts
index 8cd764f..dbd4e48 100644
--- a/web/src/recoil/api/sdl.ts
+++ b/web/src/recoil/api/sdl.ts
@@ -1,5 +1,5 @@
 import { QueryFunction } from 'react-query';
-import { templateIcons } from '../../assets/templates';
+// import { templateIcons } from '../../assets/templates';
 import { Octokit } from '@octokit/rest';
 
 export const fetchSdlList: QueryFunction<any, [string, { folderName: string }]> = async ({ queryKey }) => {
@@ -23,145 +23,163 @@ export const fetchSdlList: QueryFunction<any, [string, { folderName: string }]>
   return JSON.parse(data);
 };
 
-export const templateList = [
-  {
-    id: 'akash-games',
-    name: 'akash-games',
-    logo: templateIcons.helloworld,
-    title: 'Fun & Games',
-    description: 'Some fun games that you can experiment with',
-  },
-  {
-    id: 'akash',
-    name: 'akash',
-    logo: templateIcons.akash,
-    title: 'Akash',
-    description: 'A Validator Node, RPC Node or Sentry Node that runs on the Akash Network',
-  },
-  {
-    id: 'cosmos',
-    name: 'cosmos',
-    logo: templateIcons.cosmos,
-    title: 'Cosmos',
-    description: 'An RPC Node that runs on the Cosmos Blockchain',
-  },
-  {
-    id: 'kava',
-    name: 'kava',
-    logo: templateIcons.kava,
-    title: 'Kava',
-    description: 'An RPC Node that runs on the Kava Blockchain',
-  },
-  {
-    id: 'chia',
-    name: 'chia',
-    logo: templateIcons.chia,
-    title: 'Chia',
-    description: 'Bladebit, Bladebit-disk or Madmax plotter for the Chia Network',
-  },
-  {
-    id: 'osmosis',
-    name: 'osmosis',
-    logo: templateIcons.osmosis,
-    title: 'Osmosis',
-    description: 'An RPC Node that runs on the Osmosis Blockchain',
-  },
-  {
-    id: 'juno',
-    name: 'juno',
-    logo: templateIcons.juno,
-    title: 'Juno',
-    description: 'An RPC Node that runs on the Juno Blockchain',
-  },
-  {
-    id: 'persistence',
-    name: 'persistence',
-    logo: templateIcons.persistance,
-    title: 'Persistence',
-    description: 'An RPC Node that runs on the Persistence Blockchain',
-  },
-  {
-    id: 'regen',
-    name: 'regen',
-    logo: templateIcons.regan,
-    title: 'Regen',
-    description: 'An RPC Node that runs on the Regen Blockchain',
-  },
-  {
-    id: 'sentinel',
-    name: 'sentinel',
-    logo: templateIcons.sentinel,
-    title: 'Sentinel',
-    description: 'An RPC Node that runs on the Sentinel Blockchain',
-  },
-  {
-    id: 'sifchain',
-    name: 'sifchain',
-    logo: templateIcons.sifchain,
-    title: 'Sifchain',
-    description: 'An RPC Node that runs on the SifChain Blockchain',
-  },
-  {
-    id: 'sommelier',
-    name: 'sommelier',
-    logo: templateIcons.sommelier,
-    title: 'Sommelier',
-    description: 'An RPC Node that runs on the Sommelier Blockchain',
-  },
-  {
-    id: 'irisnet',
-    name: 'irisnet',
-    logo: templateIcons.irisnet,
-    title: 'IRISNet',
-    description: 'An RPC Node that runs on the IRISNet Blockchain',
-  },
-  {
-    id: 'assetmantle',
-    name: 'assetmantle',
-    logo: templateIcons.assetmantle,
-    title: 'Asset Mantle',
-    description: 'An RPC Node that runs on the Asset Mantle Blockchain',
-  },
-  {
-    id: 'bitcanna',
-    name: 'bitcanna',
-    logo: templateIcons.bitcanna,
-    title: 'Bit Canna',
-    description: 'An RPC Node that runs on the Bit Canna Blockchain',
-  },
-  {
-    id: 'digchain',
-    name: 'digchain',
-    logo: templateIcons.digchain,
-    title: 'Dig Chain',
-    description: 'An RPC Node that runs on the Dig Chain Blockchain',
-  },
-  {
-    id: 'evmos',
-    name: 'evmos',
-    logo: templateIcons.evmos,
-    title: 'Evmos',
-    description: 'An RPC Node that runs on the Evmos Blockchain',
-  },
-  {
-    id: 'ixo',
-    name: 'ixo',
-    logo: templateIcons.ixo,
-    title: 'Ixo',
-    description: 'An RPC Node that runs on the Ixo Blockchain',
-  },
-  {
-    id: 'omniflix',
-    name: 'omniflix',
-    logo: templateIcons.omniflix,
-    title: 'Omniflix',
-    description: 'An RPC Node that runs on the Omniflix Blockchain',
-  },
-  {
-    id: 'passage',
-    name: 'passage',
-    logo: templateIcons.passage,
-    title: 'Passage',
-    description: 'An RPC Node that runs on the Passage Blockchain',
-  },
-];
+export const fetchTemplateList: QueryFunction<any, string> = async ({queryKey}) => {
+  const octokit = new Octokit({});
+
+  const repository = await octokit.request('GET /repos/{owner}/{repo}/contents/{path}/metadata.json', {
+    owner: 'kaushik-rishi',
+    repo: 'deploy-templates',
+    path: 'nodes-master',
+  });
+
+  const data = Buffer.from(
+    repository.data.content,
+    repository.data.encoding
+  ).toString('utf-8');
+
+  return JSON.parse(data);
+};
+
+
+// export const templateList = [
+//   {
+//     id: 'akash-games',
+//     name: 'akash-games',
+//     logo: templateIcons.helloworld,
+//     title: 'Fun & Games',
+//     description: 'Some fun games that you can experiment with',
+//   },
+//   {
+//     id: 'akash',
+//     name: 'akash',
+//     logo: templateIcons.akash,
+//     title: 'Akash',
+//     description: 'A Validator Node, RPC Node or Sentry Node that runs on the Akash Network',
+//   },
+//   {
+//     id: 'cosmos',
+//     name: 'cosmos',
+//     logo: templateIcons.cosmos,
+//     title: 'Cosmos',
+//     description: 'An RPC Node that runs on the Cosmos Blockchain',
+//   },
+//   {
+//     id: 'kava',
+//     name: 'kava',
+//     logo: templateIcons.kava,
+//     title: 'Kava',
+//     description: 'An RPC Node that runs on the Kava Blockchain',
+//   },
+//   {
+//     id: 'chia',
+//     name: 'chia',
+//     logo: templateIcons.chia,
+//     title: 'Chia',
+//     description: 'Bladebit, Bladebit-disk or Madmax plotter for the Chia Network',
+//   },
+//   {
+//     id: 'osmosis',
+//     name: 'osmosis',
+//     logo: templateIcons.osmosis,
+//     title: 'Osmosis',
+//     description: 'An RPC Node that runs on the Osmosis Blockchain',
+//   },
+//   {
+//     id: 'juno',
+//     name: 'juno',
+//     logo: templateIcons.juno,
+//     title: 'Juno',
+//     description: 'An RPC Node that runs on the Juno Blockchain',
+//   },
+//   {
+//     id: 'persistence',
+//     name: 'persistence',
+//     logo: templateIcons.persistance,
+//     title: 'Persistence',
+//     description: 'An RPC Node that runs on the Persistence Blockchain',
+//   },
+//   {
+//     id: 'regen',
+//     name: 'regen',
+//     logo: templateIcons.regan,
+//     title: 'Regen',
+//     description: 'An RPC Node that runs on the Regen Blockchain',
+//   },
+//   {
+//     id: 'sentinel',
+//     name: 'sentinel',
+//     logo: templateIcons.sentinel,
+//     title: 'Sentinel',
+//     description: 'An RPC Node that runs on the Sentinel Blockchain',
+//   },
+//   {
+//     id: 'sifchain',
+//     name: 'sifchain',
+//     logo: templateIcons.sifchain,
+//     title: 'Sifchain',
+//     description: 'An RPC Node that runs on the SifChain Blockchain',
+//   },
+//   {
+//     id: 'sommelier',
+//     name: 'sommelier',
+//     logo: templateIcons.sommelier,
+//     title: 'Sommelier',
+//     description: 'An RPC Node that runs on the Sommelier Blockchain',
+//   },
+//   {
+//     id: 'irisnet',
+//     name: 'irisnet',
+//     logo: templateIcons.irisnet,
+//     title: 'IRISNet',
+//     description: 'An RPC Node that runs on the IRISNet Blockchain',
+//   },
+//   {
+//     id: 'assetmantle',
+//     name: 'assetmantle',
+//     logo: templateIcons.assetmantle,
+//     title: 'Asset Mantle',
+//     description: 'An RPC Node that runs on the Asset Mantle Blockchain',
+//   },
+//   {
+//     id: 'bitcanna',
+//     name: 'bitcanna',
+//     logo: templateIcons.bitcanna,
+//     title: 'Bit Canna',
+//     description: 'An RPC Node that runs on the Bit Canna Blockchain',
+//   },
+//   {
+//     id: 'digchain',
+//     name: 'digchain',
+//     logo: templateIcons.digchain,
+//     title: 'Dig Chain',
+//     description: 'An RPC Node that runs on the Dig Chain Blockchain',
+//   },
+//   {
+//     id: 'evmos',
+//     name: 'evmos',
+//     logo: templateIcons.evmos,
+//     title: 'Evmos',
+//     description: 'An RPC Node that runs on the Evmos Blockchain',
+//   },
+//   {
+//     id: 'ixo',
+//     name: 'ixo',
+//     logo: templateIcons.ixo,
+//     title: 'Ixo',
+//     description: 'An RPC Node that runs on the Ixo Blockchain',
+//   },
+//   {
+//     id: 'omniflix',
+//     name: 'omniflix',
+//     logo: templateIcons.omniflix,
+//     title: 'Omniflix',
+//     description: 'An RPC Node that runs on the Omniflix Blockchain',
+//   },
+//   {
+//     id: 'passage',
+//     name: 'passage',
+//     logo: templateIcons.passage,
+//     title: 'Passage',
+//     description: 'An RPC Node that runs on the Passage Blockchain',
+//   },
+// ];

From 0919746e1a13e289aa5ebe546b552968576ad0cb Mon Sep 17 00:00:00 2001
From: Kaushik Rishi <rishi.cp01@gmail.com>
Date: Sun, 16 Apr 2023 16:02:25 +0530
Subject: [PATCH 02/10] fix: asset filenames

---
 .../templates/{persistance.png => persistence.png}  | Bin
 web/src/assets/templates/{regan.png => regen.png}   | Bin
 2 files changed, 0 insertions(+), 0 deletions(-)
 rename web/src/assets/templates/{persistance.png => persistence.png} (100%)
 rename web/src/assets/templates/{regan.png => regen.png} (100%)

diff --git a/web/src/assets/templates/persistance.png b/web/src/assets/templates/persistence.png
similarity index 100%
rename from web/src/assets/templates/persistance.png
rename to web/src/assets/templates/persistence.png
diff --git a/web/src/assets/templates/regan.png b/web/src/assets/templates/regen.png
similarity index 100%
rename from web/src/assets/templates/regan.png
rename to web/src/assets/templates/regen.png

From 83e2c07f195d16be47e3830981eac9bbdeaab805 Mon Sep 17 00:00:00 2001
From: Kaushik Rishi <rishi.cp01@gmail.com>
Date: Sun, 16 Apr 2023 16:02:58 +0530
Subject: [PATCH 03/10] feat: view all button for templates

---
 web/src/pages/FeaturedApps.tsx | 16 ++++++++++------
 web/src/pages/SelectApp.tsx    |  1 -
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/web/src/pages/FeaturedApps.tsx b/web/src/pages/FeaturedApps.tsx
index 6257ab4..159f3dc 100644
--- a/web/src/pages/FeaturedApps.tsx
+++ b/web/src/pages/FeaturedApps.tsx
@@ -25,7 +25,9 @@ export default function FeaturedApps(
     callback,
     setFieldValue
   }: FeaturedAppsProps): JSX.Element {
-  // const [numberOfTemplates, setNumberOfTemplates] = useState(templateList.length);
+  // initially showing 12 templates on the main page
+  const initialTemplatesToShowPerPage = 12;
+  const [numberOfTemplates, setNumberOfTemplates] = useState(initialTemplatesToShowPerPage);
   const [reviewSdl, showSdlReview] = useState(false);
   const closeReviewModal = useCallback(() => showSdlReview(false), []);
   const [isHelpCenterOpen, setIsHelpCenterOpen] = useState(false);
@@ -61,7 +63,7 @@ export default function FeaturedApps(
       </FeaturedAppsPageHeader>
       <Divider />
       <FeaturedAppsPageWrapper>
-        {templateListConfig.tiles.map((template: any) => {
+        {templateListConfig?.tiles?.slice(0, numberOfTemplates).map((template: any) => {
           return <Template
             key={template.name}
             id={template.name}
@@ -73,17 +75,19 @@ export default function FeaturedApps(
           />;
         })}
       </FeaturedAppsPageWrapper>
-      {/* <ViewAllButtonContainer>
-        {templateList.length > numberOfTemplates && (
+
+      {/* on clicking view all templates, load all the templates onto the UI */}
+      <ViewAllButtonContainer>
+        {templateListConfig?.tiles?.length > numberOfTemplates && (
           <ViewAllButton
             fullWidth
             variant="outlined"
-            onClick={() => setNumberOfTemplates(templateList.length)}
+            onClick={() => setNumberOfTemplates(templateListConfig?.tiles?.length)}
           >
             View All Apps
           </ViewAllButton>
         )}
-      </ViewAllButtonContainer> */}
+      </ViewAllButtonContainer>
       <SdlEditor
         reviewSdl={reviewSdl}
         closeReviewModal={closeReviewModal}
diff --git a/web/src/pages/SelectApp.tsx b/web/src/pages/SelectApp.tsx
index dbea06a..2e3db89 100644
--- a/web/src/pages/SelectApp.tsx
+++ b/web/src/pages/SelectApp.tsx
@@ -87,7 +87,6 @@ export default function SelectApp(props: SelectAppProps): JSX.Element {
   };
 
   const template = templateListConfig.tiles.find((template: any) => template.name === folderName);
-  console.log({template});
 
   return (
     <Stack className="items-center">

From 6c40c0ac86ab124683cafcfd1efdb118c03e25d6 Mon Sep 17 00:00:00 2001
From: Kaushik Rishi <rishi.cp01@gmail.com>
Date: Sun, 16 Apr 2023 20:02:14 +0530
Subject: [PATCH 04/10] change: route from new-deployment to
 landing/node-deployment

---
 web/src/App.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index b0c68c0..4e6d1e3 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -24,7 +24,7 @@ const Welcome = () => {
   const navigate = useNavigate();
 
   useEffect(() => {
-    navigate('/new-deployment');
+    navigate('/landing/node-deployment');
   }, []);
 
   return <></>;
@@ -43,7 +43,7 @@ const AppRouter = () => {
         <SideNav>
           <Routes>
             <Route path="/" element={<Welcome />} />
-            <Route path="new-deployment">
+            <Route path="landing/node-deployment">
               <Route path="" element={<DeploymentStepper />} />
               <Route path=":folderName/" element={<DeploymentStepper />} />
               <Route path=":folderName/:templateId" element={<DeploymentStepper />} />

From 909cb6ed72e3043adf386e057c53c9a97db656fd Mon Sep 17 00:00:00 2001
From: Kaushik Rishi <rishi.cp01@gmail.com>
Date: Tue, 18 Apr 2023 00:12:10 +0530
Subject: [PATCH 05/10] fix: keep the deployment creation pages still at
 /new-deployment route

---
 web/src/App.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index 4e6d1e3..e07cfd8 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -43,8 +43,8 @@ const AppRouter = () => {
         <SideNav>
           <Routes>
             <Route path="/" element={<Welcome />} />
-            <Route path="landing/node-deployment">
-              <Route path="" element={<DeploymentStepper />} />
+            <Route path="landing/node-deployment" element={<DeploymentStepper />}/>
+            <Route path="new-deployment">
               <Route path=":folderName/" element={<DeploymentStepper />} />
               <Route path=":folderName/:templateId" element={<DeploymentStepper />} />
               <Route path=":folderName/:templateId/:intentId" element={<DeploymentStepper />} />

From 3c6849298f146ae4c7879ab3aff4c9f9a2494f7a Mon Sep 17 00:00:00 2001
From: Kaushik Rishi <rishi.cp01@gmail.com>
Date: Tue, 18 Apr 2023 02:17:47 +0530
Subject: [PATCH 06/10] wip

---
 web/src/App.tsx                         |   8 +-
 web/src/components/Icons/index.tsx      |  23 +++
 web/src/components/NewLanding/index.tsx | 198 ++++++++++++++++++++++++
 web/src/components/SideNav/index.tsx    |  13 ++
 web/src/components/Template/index.tsx   |   2 +-
 web/src/style/app.css                   |   8 +
 web/src/style/app.scss                  |   7 +
 7 files changed, 256 insertions(+), 3 deletions(-)
 create mode 100644 web/src/components/NewLanding/index.tsx

diff --git a/web/src/App.tsx b/web/src/App.tsx
index e07cfd8..7b96770 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -11,6 +11,7 @@ import { loadActiveCertificate } from './recoil/api';
 import { useWallet } from './hooks/useWallet';
 
 // Lazy loading all pages in appropriate time
+const NewLanding = lazy(() => import('./components/NewLanding'));
 const DeploymentStepper = lazy(() => import('./components/DeploymentStepper'));
 const Deployment = lazy(() => import('./components/Deployment'));
 const ReDeploy = lazy(() => import('./pages/ReDeploy'));
@@ -24,7 +25,7 @@ const Welcome = () => {
   const navigate = useNavigate();
 
   useEffect(() => {
-    navigate('/landing/node-deployment');
+    navigate('/landing');
   }, []);
 
   return <></>;
@@ -43,7 +44,10 @@ const AppRouter = () => {
         <SideNav>
           <Routes>
             <Route path="/" element={<Welcome />} />
-            <Route path="landing/node-deployment" element={<DeploymentStepper />}/>
+            <Route path="landing">
+              <Route path="" element={<NewLanding />} />
+              <Route path="node-deployment" element={<DeploymentStepper />}/>
+            </Route>
             <Route path="new-deployment">
               <Route path=":folderName/" element={<DeploymentStepper />} />
               <Route path=":folderName/:templateId" element={<DeploymentStepper />} />
diff --git a/web/src/components/Icons/index.tsx b/web/src/components/Icons/index.tsx
index f883542..4271f09 100644
--- a/web/src/components/Icons/index.tsx
+++ b/web/src/components/Icons/index.tsx
@@ -542,6 +542,25 @@ export const IconAdd: React.FC<Record<string, never>> = () => {
   </svg>;
 };
 
+export const IconWWW: React.FC<Record<string, never>> = () => {
+  return <svg width="24px" height="24px" strokeWidth="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
+    color="#000000">
+    <path
+      d="M3.338 17A9.996 9.996 0 0012 22a9.996 9.996 0 008.662-5M3.338 7A9.996 9.996 0 0112 2a9.996 9.996 0 018.662 5M13 21.95s1.408-1.853 2.295-4.95M13 2.05S14.408 3.902 15.295 7M11 21.95S9.592 20.098 8.705 17M11 2.05S9.592 3.902 8.705 7M9 10l1.5 5 1.5-5 1.5 5 1.5-5M1 10l1.5 5L4 10l1.5 5L7 10M17 10l1.5 5 1.5-5 1.5 5 1.5-5"
+      stroke="#000000" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"></path>
+  </svg>;
+};
+
+export const IconXRayView: React.FC<Record<string, never>> = () => {
+  return <svg width="24px" height="24px" strokeWidth="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000"><path d="M21 7.353v9.294a.6.6 0 01-.309.525l-8.4 4.666a.6.6 0 01-.582 0l-8.4-4.666A.6.6 0 013 16.647V7.353a.6.6 0 01.309-.524l8.4-4.667a.6.6 0 01.582 0l8.4 4.667a.6.6 0 01.309.524z" stroke="#000000" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"></path><path d="M20.5 16.722l-8.209-4.56a.6.6 0 00-.582 0L3.5 16.722M3.528 7.294l8.18 4.544a.6.6 0 00.583 0l8.209-4.56M12 21V3" stroke="#000000" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"></path></svg>;
+};
+export const IconElectronicsChip: React.FC<Record<string, never>> = () => {
+  return <svg width="24px" height="24px" strokeWidth="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000"><path d="M7 19.4V4.6a.6.6 0 01.6-.6h8.8a.6.6 0 01.6.6v14.8a.6.6 0 01-.6.6H7.6a.6.6 0 01-.6-.6zM14 20v2.5M10 20v2.5M14 4V1.5M10 4V1.5M7 12H4.5M19.5 12H17M7 6.5H4.5M19.5 6.5H17M7 17.5H4.5M19.5 17.5H17" stroke="#000000" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"></path></svg>;
+};
+export const IconCode: React.FC<Record<string, never>> = () => {
+  return <svg width="24px" height="24px" strokeWidth="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000"><path d="M13.5 6L10 18.5M6.5 8.5L3 12l3.5 3.5M17.5 8.5L21 12l-3.5 3.5" stroke="#000000" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"></path></svg>;
+};
+
 const iconMap = {
   redeploy: IconRedeploy,
   edit: IconEdit,
@@ -572,6 +591,10 @@ const iconMap = {
   share: IconShare,
   newDeploy: IconNewDeployment,
   logoAkashConsole: IconLogoAkashConsole,
+  www: IconWWW,
+  xrayView: IconXRayView,
+  electronicsChip: IconElectronicsChip,
+  code: IconCode,
 };
 
 export type IconType = keyof typeof iconMap;
diff --git a/web/src/components/NewLanding/index.tsx b/web/src/components/NewLanding/index.tsx
new file mode 100644
index 0000000..7e56f76
--- /dev/null
+++ b/web/src/components/NewLanding/index.tsx
@@ -0,0 +1,198 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+import { useNavigate} from 'react-router-dom';
+import {
+  Box,
+  Button,
+  Divider,
+} from '@mui/material';
+import { Icon, IconType } from '../Icons';
+
+export interface DeploymentStepperProps {
+  dseq?: string;
+  leaseId?: string;
+}
+
+const DeploymentStepper: React.FC<DeploymentStepperProps> = () => {
+  const navigate = useNavigate();
+  const customSDLTile = {
+    'title': 'Custom Application',
+    'description': 'Define your unique deployment requirements and preferences with SDL and deploy with ease on the flexible and reliable Akash network.',
+    'buttonText': 'Import SDL',
+    'icon': 'code',
+    'buttonEnabled': true
+  };
+
+  return (
+    <Box sx={{ width: '100%', minHeight: '450px', marginBottom: '25px' }}>
+      <IntroHeading>What would you like to do today?</IntroHeading>
+      <Divider style={{ marginTop: '20px', marginBottom: '32px' }} />
+      <FeaturedAppsPageWrapper>
+        {landingMetadata?.categoriesTiles?.tiles?.map(c => {
+          return <CategoryCard key={c.title}>
+            <CategoryCardHeaderWithIcon>
+              <IconWrapper>
+                <Icon type={(c.icon as IconType)} />
+              </IconWrapper>
+              <CategoryCardHeading>
+                {c.title}
+              </CategoryCardHeading>
+            </CategoryCardHeaderWithIcon>
+            <CategoryCardDescription>
+              {c.description}
+            </CategoryCardDescription>
+            <ChooseTemplateButton
+              fullWidth
+              variant='outlined'
+              onClick={() => {
+                navigate(c.route);
+              }}
+              disabled={!c.buttonEnabled}
+            >
+              {c.buttonEnabled ? c.buttonText : 'Coming soon...'}
+            </ChooseTemplateButton>
+          </CategoryCard>;
+        })}
+
+        <CategoryCard key={customSDLTile.title}>
+          <CategoryCardHeaderWithIcon>
+            <IconWrapper>
+              <Icon type={(customSDLTile.icon as IconType)} />
+            </IconWrapper>
+            <CategoryCardHeading>
+              {customSDLTile.title}
+            </CategoryCardHeading>
+          </CategoryCardHeaderWithIcon>
+          <CategoryCardDescription>
+            {customSDLTile.description}
+          </CategoryCardDescription>
+          <ChooseTemplateButton
+            fullWidth
+            variant='outlined'
+            onClick={() => {
+              // PRODUCT-CLARIFY: what's the import sdl even doing on the /landing/node-deployment route
+              // TODO: re-create the flow of Import SDL on /landing/node-deployment
+            }}
+            disabled={!customSDLTile.buttonEnabled}
+          >
+            {customSDLTile.buttonEnabled ? customSDLTile.buttonText : 'Coming soon...'}
+          </ChooseTemplateButton>
+        </CategoryCard>
+
+      </FeaturedAppsPageWrapper>
+    </Box>
+  );
+};
+
+const IntroHeading = styled.h2<{ fontWeight?: number }>`
+  font-weight: ${(props) => props?.fontWeight ?? 700};
+  font-size: 24px;
+  line-height: 32px;
+  color: #111827;
+`;
+
+const FeaturedAppsPageWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  gap: 16px;
+`;
+
+const CategoryCard = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 24px;
+  gap: 24px;
+
+  background: #FFFFFF;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+
+  flex: 1;
+  min-width: 330.75px;
+  min-height: 288px;
+`;
+
+const CategoryCardDescription = styled.div`
+  font-style: normal;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 24px;
+  color: rgba(0, 0, 0, 0.5);
+`;
+
+const CategoryCardHeading = styled.h2`
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 22px;
+  color: #111827;
+`;
+
+const CategoryCardHeaderWithIcon = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0px;
+  gap: 16px;
+`;
+
+const IconWrapper = styled.div`
+  width: 56px;
+  height: 56px;
+  background: #EDEDED;
+  border-radius: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const GeneralButtonStyle = css`
+  font-family: 'Satoshi-medium', serif;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 16px;
+  padding: 13px 25px 13px 25px;
+  line-height: 15px;
+  color: #1C1B1B;
+  width: auto;
+  margin-top: 20px;
+  gap: 8px;
+  text-transform: capitalize;
+  background-color: #FFFFFF;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  border: 1px solid #D7D7D7;
+  border-radius: 6px;
+
+  &:hover {
+    background-color: #F9FAFB;
+    border: 1px solid #D1D5DB;
+  }
+`;
+
+const ChooseTemplateButton = styled(Button)`
+  ${GeneralButtonStyle}
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 8px 16px;
+  gap: 10px;
+
+  background: #FFFFFF;
+  border: 1px solid #D8D7D7;
+  border-radius: 6px;
+
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 24px;
+  color: #0F172A;
+
+  /* overriding GeneralButtonStyle */
+  width: 100%;
+`;
+
+export default DeploymentStepper;
diff --git a/web/src/components/SideNav/index.tsx b/web/src/components/SideNav/index.tsx
index e13930a..5f1b12a 100644
--- a/web/src/components/SideNav/index.tsx
+++ b/web/src/components/SideNav/index.tsx
@@ -162,6 +162,19 @@ export default function SideNav(props: any) {
                 <SideNavMenuItemLabel>My Deployments</SideNavMenuItemLabel>
               </SideNavMenuItem>
             </NavLink>
+            {/* PRODUCT-CLARIFY: where should providers navlink be linked to, we only have the /providers/:providerId route */}
+            <NavLink
+              to="providers"
+              id="link_providers"
+              className={({ isActive }) => (isActive ? 'selected-active' : 'selected-inactive')}
+            >
+              <SideNavMenuItem>
+                <IconWrapper>
+                  <Icon type="providers" />
+                </IconWrapper>
+                <SideNavMenuItemLabel>Providers</SideNavMenuItemLabel>
+              </SideNavMenuItem>
+            </NavLink>
             <div className="grow">
               <button onClick={handleToggleDrawer} style={{ width: 260, height: '100%' }}></button>
             </div>
diff --git a/web/src/components/Template/index.tsx b/web/src/components/Template/index.tsx
index 2858015..6969824 100644
--- a/web/src/components/Template/index.tsx
+++ b/web/src/components/Template/index.tsx
@@ -4,7 +4,7 @@ import ArrowRight from '../../assets/images/arrow-right-gray.svg';
 import React from 'react';
 
 interface TemplateProps {
-  id: number
+  id: string
   title: string
   description: string
   logo?: string
diff --git a/web/src/style/app.css b/web/src/style/app.css
index 1859ab7..69db40f 100644
--- a/web/src/style/app.css
+++ b/web/src/style/app.css
@@ -1266,6 +1266,7 @@ a {
 
 #link_new_deployment,
 #link_my_deployments,
+#link_providers,
 #link_settings,
 #link_help {
   width: 100%;
@@ -1276,6 +1277,7 @@ a {
 
 #link_new_deployment:hover,
 #link_my_deployments:hover,
+#link_providers:hover,
 #link_settings:hover,
 #link_help:hover {
   border: 1px solid #f0f1f4;
@@ -1293,6 +1295,12 @@ a {
   fill: #6b7280;
 }
 
+#link_providers:hover * {
+  color: #111827;
+  stroke: #6b7280;
+}
+
+
 #link_my_deployments:hover * {
   color: #111827;
   stroke: #6b7280;
diff --git a/web/src/style/app.scss b/web/src/style/app.scss
index 24acfaf..7ed997a 100644
--- a/web/src/style/app.scss
+++ b/web/src/style/app.scss
@@ -246,6 +246,7 @@ a {
 
 #link_new_deployment,
 #link_my_deployments,
+#link_providers,
 #link_settings,
 #link_help {
     width: 100%;
@@ -256,6 +257,7 @@ a {
 
 #link_new_deployment:hover,
 #link_my_deployments:hover,
+#link_providers:hover,
 #link_settings:hover,
 #link_help:hover {
     border: 1px solid #f0f1f4;
@@ -272,6 +274,11 @@ a {
     fill: #6b7280;
 }
 
+#link_providers:hover * {
+    color: #111827;
+    stroke: #6b7280;
+}
+
 #link_my_deployments:hover * {
     color: #111827;
     stroke: #6b7280;

From 88bab808045381ff8366b75b471050eb32dd5319 Mon Sep 17 00:00:00 2001
From: Kaushik Rishi <rishi.cp01@gmail.com>
Date: Tue, 18 Apr 2023 03:27:09 +0530
Subject: [PATCH 07/10] fix dev bug

---
 web/src/recoil/api/sdl.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/recoil/api/sdl.ts b/web/src/recoil/api/sdl.ts
index dbd4e48..db27548 100644
--- a/web/src/recoil/api/sdl.ts
+++ b/web/src/recoil/api/sdl.ts
@@ -27,7 +27,7 @@ export const fetchTemplateList: QueryFunction<any, string> = async ({queryKey})
   const octokit = new Octokit({});
 
   const repository = await octokit.request('GET /repos/{owner}/{repo}/contents/{path}/metadata.json', {
-    owner: 'kaushik-rishi',
+    owner: 'akash-network',
     repo: 'deploy-templates',
     path: 'nodes-master',
   });

From fbb4f9ad6e0cc305e621e2a6485131b6f8334aad Mon Sep 17 00:00:00 2001
From: Kaushik Rishi <rishi.cp01@gmail.com>
Date: Tue, 18 Apr 2023 03:32:25 +0530
Subject: [PATCH 08/10] fetch metadata from deploy-templates

---
 web/src/components/NewLanding/index.tsx | 10 +++++++++-
 web/src/recoil/api/sdl.ts               | 17 +++++++++++++++++
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/web/src/components/NewLanding/index.tsx b/web/src/components/NewLanding/index.tsx
index 7e56f76..2153fc1 100644
--- a/web/src/components/NewLanding/index.tsx
+++ b/web/src/components/NewLanding/index.tsx
@@ -8,6 +8,8 @@ import {
   Divider,
 } from '@mui/material';
 import { Icon, IconType } from '../Icons';
+import { useQuery } from 'react-query';
+import { fetchLandingPageMetadata } from '../../recoil/api/sdl';
 
 export interface DeploymentStepperProps {
   dseq?: string;
@@ -24,12 +26,18 @@ const DeploymentStepper: React.FC<DeploymentStepperProps> = () => {
     'buttonEnabled': true
   };
 
+  const { data: landingPageMetadata } = useQuery('landingPageMetadata', fetchLandingPageMetadata, {
+    refetchOnWindowFocus: false,
+    keepPreviousData: true,
+  });
+  console.log(landingPageMetadata);
+
   return (
     <Box sx={{ width: '100%', minHeight: '450px', marginBottom: '25px' }}>
       <IntroHeading>What would you like to do today?</IntroHeading>
       <Divider style={{ marginTop: '20px', marginBottom: '32px' }} />
       <FeaturedAppsPageWrapper>
-        {landingMetadata?.categoriesTiles?.tiles?.map(c => {
+        {landingPageMetadata?.categoriesTiles?.tiles?.map((c: any) => {
           return <CategoryCard key={c.title}>
             <CategoryCardHeaderWithIcon>
               <IconWrapper>
diff --git a/web/src/recoil/api/sdl.ts b/web/src/recoil/api/sdl.ts
index db27548..d575d3a 100644
--- a/web/src/recoil/api/sdl.ts
+++ b/web/src/recoil/api/sdl.ts
@@ -40,6 +40,23 @@ export const fetchTemplateList: QueryFunction<any, string> = async ({queryKey})
   return JSON.parse(data);
 };
 
+export const fetchLandingPageMetadata: QueryFunction<any, string> = async ({queryKey}) => {
+  const octokit = new Octokit({});
+
+  const repository = await octokit.request('GET /repos/{owner}/{repo}/contents/{path}/metadata.json', {
+    owner: 'kaushik-rishi',
+    repo: 'deploy-templates',
+    path: 'landing',
+  });
+
+  const data = Buffer.from(
+    repository.data.content,
+    repository.data.encoding
+  ).toString('utf-8');
+
+  return JSON.parse(data);
+};
+
 
 // export const templateList = [
 //   {

From fa63d69dae9e52911fec9a7e3032aaf6101364e1 Mon Sep 17 00:00:00 2001
From: Kaushik Rishi <rishi.cp01@gmail.com>
Date: Fri, 21 Apr 2023 03:15:36 +0530
Subject: [PATCH 09/10] wip: new landing page designs and rough flow of import
 sdl

---
 web/src/components/NewLanding/index.tsx | 334 +++++++++++++++++++-----
 1 file changed, 274 insertions(+), 60 deletions(-)

diff --git a/web/src/components/NewLanding/index.tsx b/web/src/components/NewLanding/index.tsx
index 2153fc1..f331eb4 100644
--- a/web/src/components/NewLanding/index.tsx
+++ b/web/src/components/NewLanding/index.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
+import React, {useState, useCallback, Suspense} from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
-import { useNavigate} from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import {
   Box,
   Button,
@@ -10,14 +10,39 @@ import {
 import { Icon, IconType } from '../Icons';
 import { useQuery } from 'react-query';
 import { fetchLandingPageMetadata } from '../../recoil/api/sdl';
+import { SdlEditor } from '../SdlConfiguration/SdllEditor';
+import { useRecoilState, useRecoilValue } from 'recoil';
+import { Formik } from 'formik';
+import { deploymentSdl, keplrState, myDeployments as myDeploymentsAtom } from '../../recoil/atoms';
+import { createDeployment } from '../../recoil/api';
+import { Dialog } from '../Dialog';
 
 export interface DeploymentStepperProps {
   dseq?: string;
   leaseId?: string;
 }
 
+import { initialValues, InitialValuesProps } from '../SdlConfiguration/settings';
+import { myDeploymentFormat } from '../../_helpers/my-deployment-utils';
+import { Deployment } from '@akashnetwork/akashjs/build/protobuf/akash/deployment/v1beta2/deployment';
+
+
 const DeploymentStepper: React.FC<DeploymentStepperProps> = () => {
+  const keplr = useRecoilValue(keplrState);
   const navigate = useNavigate();
+  const [deploymentId, setDeploymentId] = React.useState<{ owner: string; dseq: string }>();
+  const { folderName, templateId, intentId, dseq } = useParams();
+  const [sdl, setSdl] = useRecoilState(deploymentSdl);
+  const [progressVisible, setProgressVisible] = useState(false);
+  const [cardMessage, setCardMessage] = useState('');
+  const [activeStep, setActiveStep] = useState({ currentCard: 0 });
+  const [open, setOpen] = React.useState(false);
+  const [errorTitle, setErrorTitle] = React.useState<string>();
+  const [errorMessage, setErrorMessage] = React.useState<string>();
+  const [myDeployments, setMyDeployments] = useRecoilState(myDeploymentsAtom);
+  const [reviewSdl, showSdlReview] = useState(false);
+  const closeReviewModal = useCallback(() => showSdlReview(false), []);
+
   const customSDLTile = {
     'title': 'Custom Application',
     'description': 'Define your unique deployment requirements and preferences with SDL and deploy with ease on the flexible and reliable Akash network.',
@@ -30,69 +55,236 @@ const DeploymentStepper: React.FC<DeploymentStepperProps> = () => {
     refetchOnWindowFocus: false,
     keepPreviousData: true,
   });
-  console.log(landingPageMetadata);
+
+  React.useEffect(() => {
+    if (dseq) {
+      setDeploymentId({
+        owner: keplr.accounts[0].address,
+        dseq,
+      });
+      setActiveStep({ currentCard: 4 });
+      return;
+    }
+  }, [dseq, keplr]);
+
+
+  const handleDeployment = (key: string, deployment: any) => {
+    const newDeployments: { [key: string]: Deployment } = { ...myDeployments };
+    newDeployments[key] = deployment;
+    setMyDeployments(newDeployments);
+  };
+
+  // Error handling dialog
+  const handleClose = (reason: string) => {
+    if (reason === 'closeButtonClick') {
+      setOpen(false);
+    }
+  };
+
+  // TODO: this should be changed to use the logging system, and not throw
+  // additional exceptions.
+  const handleError = async (maybeError: unknown, method: string) => {
+    const error = maybeError && Object.prototype.hasOwnProperty.call(maybeError, 'message')
+      ? (maybeError as Error)
+      : { message: 'Unknown error' };
+
+    let title = 'Error';
+    let message = 'An error occurred while sending your request.';
+    if (method === 'acceptBid') {
+      title = 'Error Select Provider';
+      message = 'An error occurred while selecting a provider.';
+    }
+    if (method === 'createDeployment') {
+      title = 'Error Create Deployment';
+      message = 'An error occurred while trying to deploy.';
+      if (error.message.includes('Query failed with (6)')) {
+        message = 'There was an RPC error. This may happen during upgrades to the Akash Network.';
+      }
+    }
+    setErrorTitle(title);
+    setErrorMessage(message);
+    setProgressVisible(false);
+    setCardMessage('');
+    setOpen(true);
+    throw new Error(`${method}: ${error.message}`);
+  };
 
   return (
     <Box sx={{ width: '100%', minHeight: '450px', marginBottom: '25px' }}>
-      <IntroHeading>What would you like to do today?</IntroHeading>
-      <Divider style={{ marginTop: '20px', marginBottom: '32px' }} />
-      <FeaturedAppsPageWrapper>
-        {landingPageMetadata?.categoriesTiles?.tiles?.map((c: any) => {
-          return <CategoryCard key={c.title}>
-            <CategoryCardHeaderWithIcon>
-              <IconWrapper>
-                <Icon type={(c.icon as IconType)} />
-              </IconWrapper>
-              <CategoryCardHeading>
-                {c.title}
-              </CategoryCardHeading>
-            </CategoryCardHeaderWithIcon>
-            <CategoryCardDescription>
-              {c.description}
-            </CategoryCardDescription>
-            <ChooseTemplateButton
-              fullWidth
-              variant='outlined'
-              onClick={() => {
-                navigate(c.route);
-              }}
-              disabled={!c.buttonEnabled}
-            >
-              {c.buttonEnabled ? c.buttonText : 'Coming soon...'}
-            </ChooseTemplateButton>
-          </CategoryCard>;
-        })}
-
-        <CategoryCard key={customSDLTile.title}>
-          <CategoryCardHeaderWithIcon>
-            <IconWrapper>
-              <Icon type={(customSDLTile.icon as IconType)} />
-            </IconWrapper>
-            <CategoryCardHeading>
-              {customSDLTile.title}
-            </CategoryCardHeading>
-          </CategoryCardHeaderWithIcon>
-          <CategoryCardDescription>
-            {customSDLTile.description}
-          </CategoryCardDescription>
-          <ChooseTemplateButton
-            fullWidth
-            variant='outlined'
-            onClick={() => {
-              // PRODUCT-CLARIFY: what's the import sdl even doing on the /landing/node-deployment route
-              // TODO: re-create the flow of Import SDL on /landing/node-deployment
-            }}
-            disabled={!customSDLTile.buttonEnabled}
-          >
-            {customSDLTile.buttonEnabled ? customSDLTile.buttonText : 'Coming soon...'}
-          </ChooseTemplateButton>
-        </CategoryCard>
-
-      </FeaturedAppsPageWrapper>
-    </Box>
-  );
+      <Formik
+        enableReinitialize
+        initialValues={initialValues}
+        onSubmit={async (value: InitialValuesProps) => {
+          setProgressVisible(true);
+          console.log('sometime soon');
+          setCardMessage('Creating deployment');
+
+          try {
+            const result = await createDeployment(keplr, value.sdl, value.depositor);
+            if (result && result.deploymentId) {
+              setDeploymentId(result.deploymentId);
+              setSdl(value.sdl);
+
+              // wait a second to give the blockchain a chance to setup
+              // the bids for the deployment
+              setTimeout(() => {
+                setProgressVisible(false);
+                navigate(`/configure-deployment/${result.deploymentId.dseq}`);
+              }, 2000);
+
+              // set deployment to localStorage object using Atom
+              const _deployment = await myDeploymentFormat(result, value);
+              handleDeployment(_deployment.key, JSON.stringify(_deployment.data));
+
+              // set deployment to localStorage item by dseq (deprecate ?)
+              localStorage.setItem(_deployment.key, JSON.stringify(_deployment.data));
+            }
+          } catch (error) {
+            await handleError(error, 'createDeployment');
+          }
+        }}
+      >
+        {({ setFieldValue }) => {
+          return (
+            <>
+              <IntroHeading>What would you like to do today?</IntroHeading>
+              <Divider style={{ marginTop: '20px', marginBottom: '32px' }} />
+              <FeaturedAppsPageWrapper>
+                {landingPageMetadata?.categoriesTiles?.tiles?.map((c: any) => {
+                  return <CategoryCard key={c.title}>
+                    <CategoryCardHeaderWithIcon>
+                      <IconWrapper>
+                        <Icon type={(c.icon as IconType)} />
+                      </IconWrapper>
+                      <CategoryCardHeading>
+                        {c.title}
+                      </CategoryCardHeading>
+                    </CategoryCardHeaderWithIcon>
+                    <CategoryCardDescription>
+                      {c.description}
+                    </CategoryCardDescription>
+                    <ChooseTemplateButton
+                      fullWidth
+                      variant='outlined'
+                      onClick={() => {
+                        navigate(c.route);
+                      }}
+                      disabled={!c.buttonEnabled}
+                    >
+                      {c.buttonEnabled ? c.buttonText : 'Coming soon...'}
+                    </ChooseTemplateButton>
+                  </CategoryCard>;
+                })}
+
+                <CategoryCard key={customSDLTile.title}>
+                  <CategoryCardHeaderWithIcon>
+                    <IconWrapper>
+                      <Icon type={(customSDLTile.icon as IconType)} />
+                    </IconWrapper>
+                    <CategoryCardHeading>
+                      {customSDLTile.title}
+                    </CategoryCardHeading>
+                  </CategoryCardHeaderWithIcon>
+                  <CategoryCardDescription>
+                    {customSDLTile.description}
+                  </CategoryCardDescription>
+                  <ChooseTemplateButton
+                    fullWidth
+                    variant='outlined'
+                    onClick={() => {
+                      showSdlReview(true);
+                      setFieldValue('sdl', {});
+                    }}
+                    disabled={!customSDLTile.buttonEnabled}
+                  >
+                    {customSDLTile.buttonEnabled ? customSDLTile.buttonText : 'Coming soon...'}
+                  </ChooseTemplateButton>
+                </CategoryCard>
+                <SdlEditor
+                  reviewSdl={reviewSdl}
+                  closeReviewModal={closeReviewModal}
+                  callback={(sdl) =>
+                    navigate('/new-deployment/custom-sdl', { state: { sdl: sdl } })
+                  }
+                />
+              </FeaturedAppsPageWrapper>
+
+              <Divider style={{ marginTop: '32px', marginBottom: '72px' }} />
+
+              <HowItWorksGuideContainer>
+                <GuideContainerHeaderElement>
+                  <GuidedHeader>
+                    {landingPageMetadata?.sdlGuideTiles?.introText}
+                  </GuidedHeader>
+                  <GuidedHeaderDescription>
+                    {landingPageMetadata?.sdlGuideTiles?.introDescription}
+                  </GuidedHeaderDescription>
+                </GuideContainerHeaderElement>
+                {landingPageMetadata?.sdlGuideTiles?.tiles?.map((c: any) => {
+                  return (
+                    <GuideContainerElement key={c.text}>
+                      <GuideImageWrapper>
+                        <img src={'https://raw.githubusercontent.com/akash-network/deploy-templates/main' + c.image} />
+                      </GuideImageWrapper>
+                      <GuidedHeader2>{c.step}</GuidedHeader2>
+                      <GuidedHeader2>{c.text}</GuidedHeader2>
+                    </GuideContainerElement>
+                  );
+                })}
+              </HowItWorksGuideContainer>
+            </>
+          );
+        }}
+      </Formik>
+      <Dialog open={open} onClose={handleClose} title={errorTitle || ''} message={errorMessage || ''} />
+    </Box>);
 };
 
+const GuideImageWrapper = styled.div`
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 6px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+
+const GuidedHeaderDescription = styled.div`
+  font-size: 16px;
+  line-height: 24px;
+  margin-top: 8px;
+
+  color: rgba(0, 0, 0, 0.5);
+`;
+
+const GuidedHeader2 = styled.h3`
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 20px;
+  /* identical to box height, or 111% */
+
+
+  color: #111827;
+`;
+
+const GuidedHeader = styled.h2`
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 32px;
+
+  color: #111827;
+`;
+
+const GuideContainerElement = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+
+  flex: 1;
+  min-width: 318.75px;
+  height: 280px;
+`;
+
 const IntroHeading = styled.h2<{ fontWeight?: number }>`
   font-weight: ${(props) => props?.fontWeight ?? 700};
   font-size: 24px;
@@ -107,6 +299,21 @@ const FeaturedAppsPageWrapper = styled.div`
   gap: 16px;
 `;
 
+const HowItWorksGuideContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+
+  padding: 24px;
+  gap: 24px;
+
+  width: 100%;
+
+  background: #FFFFFF;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+`;
+
 const CategoryCard = styled.div`
   display: flex;
   flex-direction: column;
@@ -203,4 +410,11 @@ const ChooseTemplateButton = styled(Button)`
   width: 100%;
 `;
 
+const GuideContainerHeaderElement = styled(GuideContainerElement)`
+  justify-content: flex-start;
+  height: auto;
+`;
+
+
 export default DeploymentStepper;
+

From 7f1af8a2bdf05306139d11f1ce4ef265f1e6685d Mon Sep 17 00:00:00 2001
From: Kaushik Rishi <rishi.cp01@gmail.com>
Date: Fri, 21 Apr 2023 11:41:19 +0530
Subject: [PATCH 10/10] refactor: split new landing page into components

---
 .../NewLanding/CategoryCardsContainer.tsx     | 197 +++++++++++++
 .../NewLanding/SdlGuideContainer.tsx          | 102 +++++++
 web/src/components/NewLanding/index.tsx       | 277 +-----------------
 web/src/recoil/api/sdl.ts                     |   2 +-
 4 files changed, 308 insertions(+), 270 deletions(-)
 create mode 100644 web/src/components/NewLanding/CategoryCardsContainer.tsx
 create mode 100644 web/src/components/NewLanding/SdlGuideContainer.tsx

diff --git a/web/src/components/NewLanding/CategoryCardsContainer.tsx b/web/src/components/NewLanding/CategoryCardsContainer.tsx
new file mode 100644
index 0000000..93384b5
--- /dev/null
+++ b/web/src/components/NewLanding/CategoryCardsContainer.tsx
@@ -0,0 +1,197 @@
+import React, { useCallback, useState } from 'react';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+import { Icon, IconType } from '../Icons';
+import { useNavigate } from 'react-router-dom';
+import { SdlEditor } from '../SdlConfiguration/SdllEditor';
+import { Button } from '@mui/material';
+
+export const CategoryCardsContainer: React.FC<{
+  categoriesTiles: {
+    tiles: {
+      title: string,
+      description: string,
+      route: string,
+      icon: string,
+      buttonEnabled: boolean,
+      buttonText: string,
+    }[],
+  },
+  setFieldValue: any,
+}> = ({categoriesTiles, setFieldValue }) => {
+  const navigate = useNavigate();
+  const [reviewSdl, showSdlReview] = useState(false);
+  const closeReviewModal = useCallback(() => showSdlReview(false), []);
+
+
+  const customSDLTile = {
+    title: 'Custom Application',
+    description: 'Define your unique deployment requirements and preferences with SDL and deploy with ease on the flexible and reliable Akash network.',
+    buttonText: 'Import SDL',
+    icon: 'code',
+    buttonEnabled: true
+  };
+
+  return <CategoryCardsWrapper>
+    {categoriesTiles?.tiles?.map((c) => {
+      return <CategoryCard key={c.title}>
+        <CategoryCardHeaderWithIcon>
+          <IconWrapper>
+            <Icon type={(c.icon as IconType)} />
+          </IconWrapper>
+          <CategoryCardHeading>
+            {c.title}
+          </CategoryCardHeading>
+        </CategoryCardHeaderWithIcon>
+        <CategoryCardDescription>
+          {c.description}
+        </CategoryCardDescription>
+        <ChooseTemplateButton
+          fullWidth
+          variant='outlined'
+          onClick={() => {
+            navigate(c.route);
+          }}
+          disabled={!c.buttonEnabled}
+        >
+          {c.buttonEnabled ? c.buttonText : 'Coming soon...'}
+        </ChooseTemplateButton>
+      </CategoryCard>;
+    })}
+
+    <CategoryCard key={customSDLTile.title}>
+      <CategoryCardHeaderWithIcon>
+        <IconWrapper>
+          <Icon type={(customSDLTile.icon as IconType)} />
+        </IconWrapper>
+        <CategoryCardHeading>
+          {customSDLTile.title}
+        </CategoryCardHeading>
+      </CategoryCardHeaderWithIcon>
+      <CategoryCardDescription>
+        {customSDLTile.description}
+      </CategoryCardDescription>
+      <ChooseTemplateButton
+        fullWidth
+        variant='outlined'
+        onClick={() => {
+          showSdlReview(true);
+          setFieldValue('sdl', {});
+        }}
+        disabled={!customSDLTile.buttonEnabled}
+      >
+        {customSDLTile.buttonEnabled ? customSDLTile.buttonText : 'Coming soon...'}
+      </ChooseTemplateButton>
+    </CategoryCard>
+    <SdlEditor
+      reviewSdl={reviewSdl}
+      closeReviewModal={closeReviewModal}
+      callback={(sdl) =>
+        navigate('/new-deployment/custom-sdl', { state: { sdl: sdl } })
+      }
+    />
+  </CategoryCardsWrapper>;
+};
+
+const CategoryCardsWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  gap: 16px;
+`;
+
+const CategoryCard = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 24px;
+  gap: 24px;
+
+  background: #FFFFFF;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+
+  flex: 1;
+  min-width: 330.75px;
+  min-height: 288px;
+`;
+
+const CategoryCardDescription = styled.div`
+  font-style: normal;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 24px;
+  color: rgba(0, 0, 0, 0.5);
+`;
+
+const CategoryCardHeading = styled.h2`
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 22px;
+  color: #111827;
+`;
+
+const CategoryCardHeaderWithIcon = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0px;
+  gap: 16px;
+`;
+
+const IconWrapper = styled.div`
+  width: 56px;
+  height: 56px;
+  background: #EDEDED;
+  border-radius: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const GeneralButtonStyle = css`
+  font-family: 'Satoshi-medium', serif;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 16px;
+  padding: 13px 25px 13px 25px;
+  line-height: 15px;
+  color: #1C1B1B;
+  width: auto;
+  margin-top: 20px;
+  gap: 8px;
+  text-transform: capitalize;
+  background-color: #FFFFFF;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  border: 1px solid #D7D7D7;
+  border-radius: 6px;
+
+  &:hover {
+    background-color: #F9FAFB;
+    border: 1px solid #D1D5DB;
+  }
+`;
+
+const ChooseTemplateButton = styled(Button)`
+  ${GeneralButtonStyle}
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 8px 16px;
+  gap: 10px;
+
+  background: #FFFFFF;
+  border: 1px solid #D8D7D7;
+  border-radius: 6px;
+
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 24px;
+  color: #0F172A;
+
+  /* overriding GeneralButtonStyle */
+  width: 100%;
+`;
diff --git a/web/src/components/NewLanding/SdlGuideContainer.tsx b/web/src/components/NewLanding/SdlGuideContainer.tsx
new file mode 100644
index 0000000..6cd514a
--- /dev/null
+++ b/web/src/components/NewLanding/SdlGuideContainer.tsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+
+export const SdlGuideContainer: React.FC<{
+  sdlGuideTiles: {
+    introText: string; 
+    introDescription: string; 
+    tiles: {
+      step: string; 
+      text: string; 
+      image: string }[] 
+    }
+}> = ({ sdlGuideTiles }) => {
+  return <SdlGuideCardsWrapper>
+    <GuideIntroCard>
+      <GuideIntroHeader>
+        {sdlGuideTiles?.introText}
+      </GuideIntroHeader>
+      <GuideIntroDescription>
+        {sdlGuideTiles?.introDescription}
+      </GuideIntroDescription>
+    </GuideIntroCard>
+
+    {sdlGuideTiles?.tiles?.map((c) => {
+      return (
+        <GuideCard key={c.text}>
+          <GuideImageWrapper>
+            <img src={'https://raw.githubusercontent.com/akash-network/deploy-templates/main' + c.image} />
+          </GuideImageWrapper>
+          <GuideHeader>{c.step}</GuideHeader>
+          <GuideHeader>{c.text}</GuideHeader>
+        </GuideCard>
+      );
+    })}
+  </SdlGuideCardsWrapper>;
+};
+
+const SdlGuideCardsWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+
+  padding: 24px;
+  gap: 24px;
+
+  width: 100%;
+
+  background: #FFFFFF;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+`;
+
+
+const GuideImageWrapper = styled.div`
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 6px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+
+const GuideIntroDescription = styled.div`
+  font-size: 16px;
+  line-height: 24px;
+  margin-top: 8px;
+
+  color: rgba(0, 0, 0, 0.5);
+`;
+
+const GuideHeader = styled.h3`
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 20px;
+
+
+  color: #111827;
+`;
+
+const GuideIntroHeader = styled.h2`
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 32px;
+
+  color: #111827;
+`;
+
+const GuideCard = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+
+  flex: 1;
+  min-width: 318.75px;
+  height: 280px;
+`;
+
+const GuideIntroCard = styled(GuideCard)`
+  justify-content: flex-start;
+  height: auto;
+`;
\ No newline at end of file
diff --git a/web/src/components/NewLanding/index.tsx b/web/src/components/NewLanding/index.tsx
index f331eb4..8152ea6 100644
--- a/web/src/components/NewLanding/index.tsx
+++ b/web/src/components/NewLanding/index.tsx
@@ -1,31 +1,28 @@
-import React, {useState, useCallback, Suspense} from 'react';
+import React, {useState } from 'react';
 import styled from '@emotion/styled';
-import { css } from '@emotion/react';
 import { useNavigate, useParams } from 'react-router-dom';
 import {
   Box,
-  Button,
   Divider,
 } from '@mui/material';
-import { Icon, IconType } from '../Icons';
 import { useQuery } from 'react-query';
 import { fetchLandingPageMetadata } from '../../recoil/api/sdl';
-import { SdlEditor } from '../SdlConfiguration/SdllEditor';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { Formik } from 'formik';
 import { deploymentSdl, keplrState, myDeployments as myDeploymentsAtom } from '../../recoil/atoms';
 import { createDeployment } from '../../recoil/api';
 import { Dialog } from '../Dialog';
+import { initialValues, InitialValuesProps } from '../SdlConfiguration/settings';
+import { myDeploymentFormat } from '../../_helpers/my-deployment-utils';
+import { Deployment } from '@akashnetwork/akashjs/build/protobuf/akash/deployment/v1beta2/deployment';
+import { SdlGuideContainer } from './SdlGuideContainer';
+import { CategoryCardsContainer } from './CategoryCardsContainer';
 
 export interface DeploymentStepperProps {
   dseq?: string;
   leaseId?: string;
 }
 
-import { initialValues, InitialValuesProps } from '../SdlConfiguration/settings';
-import { myDeploymentFormat } from '../../_helpers/my-deployment-utils';
-import { Deployment } from '@akashnetwork/akashjs/build/protobuf/akash/deployment/v1beta2/deployment';
-
 
 const DeploymentStepper: React.FC<DeploymentStepperProps> = () => {
   const keplr = useRecoilValue(keplrState);
@@ -40,16 +37,7 @@ const DeploymentStepper: React.FC<DeploymentStepperProps> = () => {
   const [errorTitle, setErrorTitle] = React.useState<string>();
   const [errorMessage, setErrorMessage] = React.useState<string>();
   const [myDeployments, setMyDeployments] = useRecoilState(myDeploymentsAtom);
-  const [reviewSdl, showSdlReview] = useState(false);
-  const closeReviewModal = useCallback(() => showSdlReview(false), []);
 
-  const customSDLTile = {
-    'title': 'Custom Application',
-    'description': 'Define your unique deployment requirements and preferences with SDL and deploy with ease on the flexible and reliable Akash network.',
-    'buttonText': 'Import SDL',
-    'icon': 'code',
-    'buttonEnabled': true
-  };
 
   const { data: landingPageMetadata } = useQuery('landingPageMetadata', fetchLandingPageMetadata, {
     refetchOnWindowFocus: false,
@@ -149,89 +137,9 @@ const DeploymentStepper: React.FC<DeploymentStepperProps> = () => {
             <>
               <IntroHeading>What would you like to do today?</IntroHeading>
               <Divider style={{ marginTop: '20px', marginBottom: '32px' }} />
-              <FeaturedAppsPageWrapper>
-                {landingPageMetadata?.categoriesTiles?.tiles?.map((c: any) => {
-                  return <CategoryCard key={c.title}>
-                    <CategoryCardHeaderWithIcon>
-                      <IconWrapper>
-                        <Icon type={(c.icon as IconType)} />
-                      </IconWrapper>
-                      <CategoryCardHeading>
-                        {c.title}
-                      </CategoryCardHeading>
-                    </CategoryCardHeaderWithIcon>
-                    <CategoryCardDescription>
-                      {c.description}
-                    </CategoryCardDescription>
-                    <ChooseTemplateButton
-                      fullWidth
-                      variant='outlined'
-                      onClick={() => {
-                        navigate(c.route);
-                      }}
-                      disabled={!c.buttonEnabled}
-                    >
-                      {c.buttonEnabled ? c.buttonText : 'Coming soon...'}
-                    </ChooseTemplateButton>
-                  </CategoryCard>;
-                })}
-
-                <CategoryCard key={customSDLTile.title}>
-                  <CategoryCardHeaderWithIcon>
-                    <IconWrapper>
-                      <Icon type={(customSDLTile.icon as IconType)} />
-                    </IconWrapper>
-                    <CategoryCardHeading>
-                      {customSDLTile.title}
-                    </CategoryCardHeading>
-                  </CategoryCardHeaderWithIcon>
-                  <CategoryCardDescription>
-                    {customSDLTile.description}
-                  </CategoryCardDescription>
-                  <ChooseTemplateButton
-                    fullWidth
-                    variant='outlined'
-                    onClick={() => {
-                      showSdlReview(true);
-                      setFieldValue('sdl', {});
-                    }}
-                    disabled={!customSDLTile.buttonEnabled}
-                  >
-                    {customSDLTile.buttonEnabled ? customSDLTile.buttonText : 'Coming soon...'}
-                  </ChooseTemplateButton>
-                </CategoryCard>
-                <SdlEditor
-                  reviewSdl={reviewSdl}
-                  closeReviewModal={closeReviewModal}
-                  callback={(sdl) =>
-                    navigate('/new-deployment/custom-sdl', { state: { sdl: sdl } })
-                  }
-                />
-              </FeaturedAppsPageWrapper>
-
+              <CategoryCardsContainer categoriesTiles={landingPageMetadata?.categoriesTiles} setFieldValue={setFieldValue} />
               <Divider style={{ marginTop: '32px', marginBottom: '72px' }} />
-
-              <HowItWorksGuideContainer>
-                <GuideContainerHeaderElement>
-                  <GuidedHeader>
-                    {landingPageMetadata?.sdlGuideTiles?.introText}
-                  </GuidedHeader>
-                  <GuidedHeaderDescription>
-                    {landingPageMetadata?.sdlGuideTiles?.introDescription}
-                  </GuidedHeaderDescription>
-                </GuideContainerHeaderElement>
-                {landingPageMetadata?.sdlGuideTiles?.tiles?.map((c: any) => {
-                  return (
-                    <GuideContainerElement key={c.text}>
-                      <GuideImageWrapper>
-                        <img src={'https://raw.githubusercontent.com/akash-network/deploy-templates/main' + c.image} />
-                      </GuideImageWrapper>
-                      <GuidedHeader2>{c.step}</GuidedHeader2>
-                      <GuidedHeader2>{c.text}</GuidedHeader2>
-                    </GuideContainerElement>
-                  );
-                })}
-              </HowItWorksGuideContainer>
+              <SdlGuideContainer sdlGuideTiles={landingPageMetadata?.sdlGuideTiles} />
             </>
           );
         }}
@@ -240,51 +148,6 @@ const DeploymentStepper: React.FC<DeploymentStepperProps> = () => {
     </Box>);
 };
 
-const GuideImageWrapper = styled.div`
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-radius: 6px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-
-
-const GuidedHeaderDescription = styled.div`
-  font-size: 16px;
-  line-height: 24px;
-  margin-top: 8px;
-
-  color: rgba(0, 0, 0, 0.5);
-`;
-
-const GuidedHeader2 = styled.h3`
-  font-weight: 700;
-  font-size: 18px;
-  line-height: 20px;
-  /* identical to box height, or 111% */
-
-
-  color: #111827;
-`;
-
-const GuidedHeader = styled.h2`
-  font-weight: 700;
-  font-size: 24px;
-  line-height: 32px;
-
-  color: #111827;
-`;
-
-const GuideContainerElement = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-
-  flex: 1;
-  min-width: 318.75px;
-  height: 280px;
-`;
-
 const IntroHeading = styled.h2<{ fontWeight?: number }>`
   font-weight: ${(props) => props?.fontWeight ?? 700};
   font-size: 24px;
@@ -292,129 +155,5 @@ const IntroHeading = styled.h2<{ fontWeight?: number }>`
   color: #111827;
 `;
 
-const FeaturedAppsPageWrapper = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  gap: 16px;
-`;
-
-const HowItWorksGuideContainer = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-
-  padding: 24px;
-  gap: 24px;
-
-  width: 100%;
-
-  background: #FFFFFF;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-radius: 8px;
-`;
-
-const CategoryCard = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: space-between;
-  padding: 24px;
-  gap: 24px;
-
-  background: #FFFFFF;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-radius: 8px;
-
-  flex: 1;
-  min-width: 330.75px;
-  min-height: 288px;
-`;
-
-const CategoryCardDescription = styled.div`
-  font-style: normal;
-  font-weight: 500;
-  font-size: 16px;
-  line-height: 24px;
-  color: rgba(0, 0, 0, 0.5);
-`;
-
-const CategoryCardHeading = styled.h2`
-  font-weight: 700;
-  font-size: 18px;
-  line-height: 22px;
-  color: #111827;
-`;
-
-const CategoryCardHeaderWithIcon = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 0px;
-  gap: 16px;
-`;
-
-const IconWrapper = styled.div`
-  width: 56px;
-  height: 56px;
-  background: #EDEDED;
-  border-radius: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
-const GeneralButtonStyle = css`
-  font-family: 'Satoshi-medium', serif;
-  font-style: normal;
-  font-weight: 500;
-  font-size: 16px;
-  padding: 13px 25px 13px 25px;
-  line-height: 15px;
-  color: #1C1B1B;
-  width: auto;
-  margin-top: 20px;
-  gap: 8px;
-  text-transform: capitalize;
-  background-color: #FFFFFF;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-  border: 1px solid #D7D7D7;
-  border-radius: 6px;
-
-  &:hover {
-    background-color: #F9FAFB;
-    border: 1px solid #D1D5DB;
-  }
-`;
-
-const ChooseTemplateButton = styled(Button)`
-  ${GeneralButtonStyle}
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  padding: 8px 16px;
-  gap: 10px;
-
-  background: #FFFFFF;
-  border: 1px solid #D8D7D7;
-  border-radius: 6px;
-
-  font-style: normal;
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 24px;
-  color: #0F172A;
-
-  /* overriding GeneralButtonStyle */
-  width: 100%;
-`;
-
-const GuideContainerHeaderElement = styled(GuideContainerElement)`
-  justify-content: flex-start;
-  height: auto;
-`;
-
-
 export default DeploymentStepper;
 
diff --git a/web/src/recoil/api/sdl.ts b/web/src/recoil/api/sdl.ts
index d575d3a..08a2c68 100644
--- a/web/src/recoil/api/sdl.ts
+++ b/web/src/recoil/api/sdl.ts
@@ -44,7 +44,7 @@ export const fetchLandingPageMetadata: QueryFunction<any, string> = async ({quer
   const octokit = new Octokit({});
 
   const repository = await octokit.request('GET /repos/{owner}/{repo}/contents/{path}/metadata.json', {
-    owner: 'kaushik-rishi',
+    owner: 'akash-network',
     repo: 'deploy-templates',
     path: 'landing',
   });