feat: add new landing page with separate sections and guidelines

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 />} />

web/src/components/Icons/index.tsx

@@ -613,6 +613,25 @@ export const IconAdd: React.FC<Record<string, never>> = () => {
   );
 };
 
+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,
@@ -643,6 +662,10 @@ const iconMap = {
   share: IconShare,
   newDeploy: IconNewDeployment,
   logoAkashConsole: IconLogoAkashConsole,
+  www: IconWWW,
+  xrayView: IconXRayView,
+  electronicsChip: IconElectronicsChip,
+  code: IconCode,
 };
 
 export type IconType = keyof typeof iconMap;

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%;
+`;

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;
+`;