fix: add landing page (#12)

apps/codeblock/components/home/Cards.tsx

@@ -0,0 +1,33 @@
+import { Card, CardContent, Stack, Typography } from "@mui/material";
+import React from "react";
+
+interface Props {
+  data: string[];
+}
+
+export default function Cards({ data }: Props) {
+  return (
+    <div className="container py-8" id="projects">
+      <h2 className="text-2xl font-bold mb-6">Supported Langages </h2>
+      <div className="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 col-span-1 md:col-span-2 lg:col-span-3">
+        {data.map((d) => (
+          <Card key={d}>
+            <CardContent>
+              <Stack
+                direction={"row"}
+                justifyContent={"center"}
+                alignContent="center"
+                height={"100%"}
+                width="100%"
+              >
+                <Typography variant="h6" textTransform={"capitalize"}>
+                  {d}
+                </Typography>
+              </Stack>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}

apps/codeblock/components/home/Intro.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import Image from "next/image";
+import Link from "next/link";
+
+interface Props {
+  onClick: () => void;
+}
+
+export default function Intro(props: Props) {
+  return (
+    <div className="bg-[url('/assets/illustrations/overlay.svg')] bg-contain bg-right-top bg-no-repeat pb-16">
+      <div className="container py-16 flex items-center flex-col md:flex-row justify-between">
+        <div className="flex-1 w-full md:w-1/2 mb-8 md:mb-0">
+          <h1 className="mb-8 text-3xl md:text-5xl font-bold text-brand-primary dark:text-white typography">
+            CodeBlock
+          </h1>
+          <h2 className="mb-[2.5rem] text-2xl md:text-4xl text-brand-secondary dark:text-slate-200 typography">
+            Configure your code without headache
+          </h2>
+          <button onClick={props.onClick}>
+            <a className="button button-primary">Try it now!</a>
+          </button>
+        </div>
+        <div className="flex-1 w-full md:w-1/2">
+          <Image
+            src="/assets/illustrations/dev.svg"
+            alt="I’m John and I’m a JAMStack engineer!"
+            width={463}
+            height={273}
+            priority
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

apps/codeblock/components/home/Skills.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import Image from "next/image";
+
+export default function Skills() {
+  return (
+    <div
+      className="bg-[url('/assets/illustrations/details.svg')] bg-contain bg-no-repeat bg-left-top"
+      id="about"
+    >
+      <div className="container py-16 flex flex-col lg:flex-row justify-between items-center">
+        <div className="flex-none lg:flex-1">
+          <Image
+            src="/assets/illustrations/skills.svg"
+            width={447}
+            height={326}
+          />
+        </div>
+        <div className="flex-none lg:flex-1 pl-0 lg:pl-8">
+          <h2 className="mb-8 text-3xl font-bold text-brand-primary dark:text-white typography">
+            Features
+          </h2>
+          <p className="mb-[2.5rem] font-normal text-xl md:text-[26px] text-brand-secondary dark:text-slate-200 leading-[34px] typography">
+            Codeblock is a code visualization tool that helps you to visualize
+            your code configurable parameters and their values. It is a designed
+            for non-technical users to understand the code and its parameters.
+            Users typically can config the code parameters without any coding
+            knowledge.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/codeblock/package.json

@@ -18,7 +18,10 @@
     "react-dom": "18.2.0",
     "codevis": "workspace:codevis",
     "glob": "8.0.3",
-    "@types/glob": "8.0.0"
+    "@types/glob": "8.0.0",
+    "postcss": "^8.4.16",
+    "tailwindcss": "^3.1.8",
+    "autoprefixer": "^10.4.8"
   },
   "devDependencies": {
     "@types/node": "18.7.9",

apps/codeblock/pages/[language]/[name].tsx

@@ -3,13 +3,17 @@ import {
   Box,
   CircularProgress,
   Collapse,
+  createTheme,
+  CssBaseline,
   Divider,
   FormControl,
   Grid,
   InputLabel,
   Select,
   Stack,
+  ThemeProvider,
   Toolbar,
+  Typography,
 } from "@mui/material";
 import { ConfigPanel, Editor } from "codevis";
 import { useCodeVisulization } from "codevis/src/hooks/useCodeVis";
@@ -26,6 +30,7 @@ import { CodePickerInterface } from "../../lib/types/CodePicker";
 import { getMenus } from "../../lib/utils/getMenus";
 import fs from "fs";
 import { useRouter } from "next/router";
+import Link from "next/link";
 
 const url = process.env.NEXT_PUBLIC_URL!;
 
@@ -36,6 +41,23 @@ interface Props {
   selectedName: string;
 }
 
+const darkTheme = createTheme({
+  palette: {
+    mode: "dark",
+  },
+  // override app bar theme
+  components: {
+    MuiAppBar: {
+      styleOverrides: {
+        root: {
+          borderLeft: 0,
+          borderRight: 0,
+        },
+      },
+    },
+  },
+});
+
 const Home: NextPage<Props> = (props: Props) => {
   const { isLoading } = useCodeVisulization();
   const router = useRouter();
@@ -47,60 +69,69 @@ const Home: NextPage<Props> = (props: Props) => {
   }, [props.selectedLanguage]);
 
   return (
-    <div>
-      <Head>
-        <title>CodeBlock Demo</title>
-      </Head>
-      <AppBar>
-        <Toolbar>
-          <Stack justifyContent={"space-between"} width="100vw" direction="row">
-            <Box flex={1}>
-              <Collapse in={isLoading} mountOnEnter unmountOnExit>
-                <CircularProgress size={30} />
-              </Collapse>
-            </Box>
-            <Box flex={10} />
-            <Stack flex={3} direction="row" spacing={2}>
-              <FormControl fullWidth variant="standard">
-                <InputLabel>Language</InputLabel>
-                <Select
-                  native
-                  value={props.selectedLanguage}
-                  onChange={(e) => {
-                    router.push(`/${e.target.value}/${props.selectedName}`);
-                  }}
-                >
-                  {props.menus.map((menu) => (
-                    <option key={menu.language} value={menu.language}>
-                      {menu.language}
-                    </option>
-                  ))}
-                </Select>
-              </FormControl>
-              <FormControl variant="standard" fullWidth>
-                <InputLabel>File Name</InputLabel>
-                <Select
-                  native
-                  value={props.selectedName}
-                  onChange={(e) => {
-                    router.push(`/${props.selectedLanguage}/${e.target.value}`);
-                  }}
-                >
-                  {selectedMenu.files.map((file) => (
-                    <option key={file} value={file}>
-                      {file}
-                    </option>
-                  ))}
-                </Select>
-              </FormControl>
+    <ThemeProvider theme={darkTheme}>
+      <CssBaseline />
+      <div>
+        <AppBar>
+          <Toolbar>
+            <Stack
+              justifyContent={"space-between"}
+              width="100vw"
+              direction="row"
+            >
+              <Stack flex={1} spacing={2} alignItems={"center"} direction="row">
+                <Typography variant="h6">
+                  <Link href={"/"}>CodeBlock</Link>
+                </Typography>
+                <Collapse in={isLoading} mountOnEnter unmountOnExit>
+                  <CircularProgress size={30} />
+                </Collapse>
+              </Stack>
+              <Box flex={10} />
+              <Stack flex={3} direction="row" spacing={2}>
+                <FormControl fullWidth variant="standard">
+                  <InputLabel>Language</InputLabel>
+                  <Select
+                    native
+                    value={props.selectedLanguage}
+                    onChange={(e) => {
+                      router.push(`/${e.target.value}/${props.selectedName}`);
+                    }}
+                  >
+                    {props.menus.map((menu) => (
+                      <option key={menu.language} value={menu.language}>
+                        {menu.language}
+                      </option>
+                    ))}
+                  </Select>
+                </FormControl>
+                <FormControl variant="standard" fullWidth>
+                  <InputLabel>File Name</InputLabel>
+                  <Select
+                    native
+                    value={props.selectedName}
+                    onChange={(e) => {
+                      router.push(
+                        `/${props.selectedLanguage}/${e.target.value}`
+                      );
+                    }}
+                  >
+                    {selectedMenu.files.map((file) => (
+                      <option key={file} value={file}>
+                        {file}
+                      </option>
+                    ))}
+                  </Select>
+                </FormControl>
+              </Stack>
             </Stack>
-          </Stack>
-        </Toolbar>
-      </AppBar>
-      <Box pt={12} component="main">
-        <Body language={props.selectedLanguage} code={props.code} />
-      </Box>
-    </div>
+          </Toolbar>
+        </AppBar>
+        <Box pt={12} component="main">
+          <Body language={props.selectedLanguage} code={props.code} />
+        </Box>
+      </div>
+    </ThemeProvider>
   );
 };
 
@@ -165,8 +196,6 @@ export const getStaticProps: GetStaticProps<Props> = async (context) => {
     "utf8"
   );
 
-  console.log(code);
-
   return {
     props: {
       menus,

apps/codeblock/pages/_app.tsx

@@ -3,6 +3,7 @@ import type { AppProps } from "next/app";
 import { CodeVisulizationProvider } from "codevis";
 import { ThemeProvider } from "@emotion/react";
 import { createTheme, CssBaseline } from "@mui/material";
+import Head from "next/head";
 
 const darkTheme = createTheme({
   palette: {
@@ -23,12 +24,14 @@ const darkTheme = createTheme({
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
-    <ThemeProvider theme={darkTheme}>
-      <CssBaseline />
+    <div>
+      <Head>
+        <title>CodeBlock Demo</title>
+      </Head>
       <CodeVisulizationProvider>
         <Component {...pageProps} />
       </CodeVisulizationProvider>
-    </ThemeProvider>
+    </div>
   );
 }
 

apps/codeblock/pages/index.tsx

@@ -2,6 +2,9 @@ import { Box, Button, Stack } from "@mui/material";
 import { GetServerSideProps, GetStaticProps, NextPage } from "next";
 import { useRouter } from "next/router";
 import path from "path";
+import Cards from "../components/home/Cards";
+import Intro from "../components/home/Intro";
+import Skills from "../components/home/Skills";
 import { CodePickerInterface } from "../lib/types/CodePicker";
 import { getMenus } from "../lib/utils/getMenus";
 
@@ -11,26 +14,17 @@ interface Props {
 
 const Home: NextPage<Props> = (props: Props) => {
   const router = useRouter();
+
   return (
-    <Stack
-      height={"100vh"}
-      width="100vw"
-      alignContent="center"
-      justifyContent={"center"}
-    >
-      <Box display={"flex"} alignContent="center" justifyContent={"center"}>
-        <Button
-          variant="contained"
-          onClick={() => {
-            router.push(
-              `/${props.menus[0].language}/${props.menus[0].files[0]}`
-            );
-          }}
-        >
-          Explore CodeBlock
-        </Button>
-      </Box>
-    </Stack>
+    <Box>
+      <Intro
+        onClick={() => {
+          router.push(`/${props.menus[0].language}/${props.menus[0].files[0]}`);
+        }}
+      />
+      <Skills />
+      <Cards data={props.menus.map((m) => m.language)} />
+    </Box>
   );
 };
 

apps/codeblock/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};