feat: Implemented Fresh Landing Page Structure with Separate Sections…

… and Guidance. (#145)

* Feat: import SDL functionality on landing page added
* Feat: Review SDL button error fixed
* Feat: SDL guide lines section added
* Feat: medium screen errors fixed on sdl guideline section
* Feat: workded on responsiveness for each section
* Style: Tile and SDL guidelines cards  centered
* Feat: refactored code to make it readable
* Style: space added between "create deployment and review sdl button"
* Update App.tsx
* Feat: Converted the styles from vanilla css to Tailwind
* Update TileCard.tsx

package.json

@@ -12,7 +12,11 @@
         "web"
     ],
     "dependencies": {
-        "concurrently": "^7.2.1"
+        "concurrently": "^7.2.1",
+        "path": "^0.12.7"
     },
-    "version": "0.1.292"
+    "version": "0.1.292",
+    "devDependencies": {
+        "url-loader": "^4.1.1"
+    }
 }

web/craco.config.js

@@ -1,12 +1,12 @@
-const webpack = require("webpack");
-const path = require("path");
-const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
+const webpack = require('webpack');
+const path = require('path');
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 
 module.exports = {
   webpack: {
     plugins: [
       new webpack.ProvidePlugin({
-        Buffer: ["buffer", "Buffer"],
+        Buffer: ['buffer', 'Buffer'],
       }),
       new MonacoWebpackPlugin({
         languages: ['yaml'],
@@ -20,20 +20,20 @@ module.exports = {
             },
           },
         ],
-      })
+      }),
     ],
     configure: {
       externals: {
-        "node:crypto": "crypto",
+        'node:crypto': 'crypto',
       },
       resolve: {
         alias: {
-          perf_hooks: path.resolve(__dirname, "src/perf_hooks.ts"),
-          fetch: path.resolve(__dirname, "src/fetch.ts")
+          perf_hooks: path.resolve(__dirname, 'src/perf_hooks.ts'),
+          fetch: path.resolve(__dirname, 'src/fetch.ts'),
         },
-        extensions: [".tsx", ".ts", ".js"],
+        extensions: ['.tsx', '.ts', '.js', '.jsx', '.json', '.png', '.jpg', '.jpeg', '.gif'],
         fallback: {
-          buffer: require.resolve("buffer"),
+          buffer: require.resolve('buffer'),
           crypto: false,
           events: false,
           path: false,
@@ -45,9 +45,8 @@ module.exports = {
         ({ module, details }) => {
           // Here we check if warnings are coming from node_modules and are type od source-map
           // Than we remove it from console because we don't have any impact on those warnings
-          // All other warnings that are coming from App wil yield to dev console 
-          return module?.resource?.includes("node_modules") &&
-            details?.includes("source-map-loader")
+          // All other warnings that are coming from App will yield to the dev console
+          return module?.resource?.includes('node_modules') && details?.includes('source-map-loader');
         },
       ],
     },

web/package.json

@@ -14,7 +14,7 @@
         "@akashnetwork/akashjs": "^0.4.5",
         "@cosmjs/launchpad": "^0.27.1",
         "@cosmjs/proto-signing": "0.25.4",
-        "@craco/craco": "^6.4.5",
+        "@craco/craco": "^6.4.4",
         "@emeraldpay/hashicon-react": "^0.5.2",
         "@emotion/react": "^11.10.5",
         "@emotion/styled": "^11.10.5",

web/src/App.tsx

@@ -21,12 +21,13 @@ const MyDeployments = lazy(() => import('./pages/MyDeployments'));
 const UpdateDeployment = lazy(() => import('./pages/UpdateDeployment'));
 const CustomApp = lazy(() => import('./pages/CustomApp'));
 const Provider = lazy(() => import('./pages/Provider'));
+const Landing = lazy(() => import('./pages/Landing'));
 
 const Welcome = () => {
   const navigate = useNavigate();
 
   useEffect(() => {
-    navigate('/landing/node-deployment');
+    navigate('/landing');
   }, []);
 
   return <></>;
@@ -44,8 +45,9 @@ const AppRouter = () => {
       <div className="console-container">
         <SideNav>
           <Routes>
+            <Route path="/landing" element={<Landing />} />
             <Route path="/" element={<Welcome />} />
-            <Route path="landing/node-deployment" element={<DeploymentStepper />}/>
+            <Route path="landing/node-deployment" element={<DeploymentStepper />} />
             <Route path="new-deployment">
               <Route path=":folderName/" element={<DeploymentStepper />} />
               <Route path=":folderName/:templateId" element={<DeploymentStepper />} />
@@ -117,11 +119,13 @@ export default function App() {
 
   return (
     <Logging>
-      <Suspense fallback={
-        <Stack direction="column">
-          <Loading title="Loading" />
-        </Stack>
-      }>
+      <Suspense
+        fallback={
+          <Stack direction="column">
+            <Loading title="Loading" />
+          </Stack>
+        }
+      >
         <Keplr>
           <AppRouter />
         </Keplr>

web/src/Landing-Metadata/landing.ts

@@ -0,0 +1,109 @@
+import img1 from './landingIcons/first_img.png';
+import img2 from './landingIcons/www.png';
+import img3 from './landingIcons/chip.png';
+import img33 from './landingIcons/code.png';
+import img4 from './landingIcons/last_guide.png';
+import img5 from './landingIcons/sdl_2.png';
+import img6 from './landingIcons/sdl_22.png';
+
+interface Tile {
+  title: string;
+  description: string;
+  image: string;
+  buttonText: string;
+  route: string;
+  icon: string;
+  buttonEnabled: boolean;
+  buttonClass?: string;
+}
+
+interface CategoryTiles {
+  introText: string;
+  tiles: Tile[];
+}
+
+interface Metadata {
+  version: string;
+  categoriesTiles: CategoryTiles;
+  sdlGuideTiles: {
+    introText: string;
+    introDescription: string;
+    tiles: {
+      step: string;
+      text: string;
+      image: string;
+    }[];
+  };
+}
+
+export const metadata: Metadata = {
+  version: '0.0.1',
+  categoriesTiles: {
+    introText: 'What would you like to do today?',
+    tiles: [
+      {
+        title: 'Deploy a Blockchain Node',
+        description:
+          'Easy and low cost hosting for your blockchain nodes (RPC servers, Validators and more)',
+        buttonText: 'Choose a Template',
+        route: '/landing/node-deployment',
+        icon: 'xrayView',
+        image: img1,
+        buttonEnabled: true,
+      },
+      {
+        title: 'Host a Website or Web Service',
+        description:
+          'Low cost, decentralized equivalents of the services provided by mainstream cloud providers. Host websites, blogsites, databases and more.',
+        buttonText: 'Coming Soon',
+        route: '',
+        icon: 'www',
+        image: img2,
+        buttonEnabled: true,
+        buttonClass: 'coming-soon-btn-2',
+      },
+      {
+        title: 'Deploy an AI/ ML Model',
+        description:
+          'Popular AI & ML models, deployed in just a few clicks. Includes Stable Diffusion, GPT4All, Alpaca and more.',
+        buttonText: 'Coming Soon',
+        route: '',
+        icon: 'electronicsChip',
+        image: img3,
+        buttonEnabled: true,
+      },
+      {
+        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',
+        route: '',
+        icon: 'electronicsChip',
+        image: img33,
+        buttonEnabled: true,
+      },
+    ],
+  },
+  sdlGuideTiles: {
+    introText: 'How it works?',
+    introDescription:
+      'There are 3 main steps to deploying on Akash. Check out our detailed <a target="_blank" href="https://docs.akash.network/guides/deploy">help</a> for more.',
+    tiles: [
+      {
+        step: '01',
+        text: 'Start with a template or your own custom application (SDL)',
+        image: img6,
+      },
+      {
+        step: '02',
+        text: 'Choose a provider based on your preferences and desired price',
+        image: img5,
+      },
+      {
+        step: '03',
+        text: 'View & manage your deployed application',
+        image: img4,
+      },
+    ],
+  },
+};

web/src/components/Deployment/index.tsx

@@ -24,7 +24,7 @@ import { getRpcNode } from '../../hooks/useRpcNode';
 
 import { QueryDeploymentResponse as Beta3Deployment } from '@akashnetwork/akashjs/build/protobuf/akash/deployment/v1beta3/query';
 import { QueryDeploymentResponse as Beta2Deployment } from '@akashnetwork/akashjs/build/protobuf/akash/deployment/v1beta2/query';
-import DeploymentActionButton from './DeploymentActionButton';
+// import DeploymentActionButton from './DeploymentActionButton';
 
 const Deployment: React.FC<any> = () => {
   const { dseq } = useParams<any>();
@@ -271,8 +271,8 @@ const Deployment: React.FC<any> = () => {
               )}
               {deployment?.deployment && !deploymentIncomplete && (
                 <React.Fragment>
-                  <DeploymentActionButton
-                    tooltipTitle={deployment?.deployment?.state !== 1
+                    tooltipTitle={
+                      deployment?.deployment?.state !== 1
                         ? 'It is not allowed to update closed deployment'
                         : 'This SDL is deployed with another tool and can\'t be updated from here'
                     }
@@ -282,21 +282,19 @@ const Deployment: React.FC<any> = () => {
                     aria-controls="menu-appbar"
                     aria-haspopup="true"
                     startIcon={<Icon type="update" />}
-                  >
+
                     Update Deployment
-                  </DeploymentActionButton>
+
 
-                  <DeploymentActionButton
                     tooltipTitle="This SDL is deployed with another tool and can't be re-deployed from here"
                     tooltip={ReDeployTooltip}
                     linkTo={'re-deploy'}
                     aria-label="update deployment"
                     aria-controls="menu-appbar"
                     aria-haspopup="true"
                     startIcon={<Icon type="update" />}
-                  >
                     Update Deployment
-                  </DeploymentActionButton>
+
 
                   <Stack direction="row" spacing={1} marginBottom="0.75rem" alignItems="center">
                     <ConditionalLinkReDeploy
@@ -311,7 +309,7 @@ const Deployment: React.FC<any> = () => {
                         color="secondary"
                         aria-label="re-deploy"
                         sx={{
-                          justifyContent: 'left'
+                          justifyContent: 'left',
                         }}
                         startIcon={<Icon type="redeploy" />}
                       >