feat(devtools): homepage UI

Author: nikhilverma360

web-devtools/package.json

@@ -43,6 +43,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-markdown": "^8.0.7",
+    "typewriter-effect": "^2.21.0",
     "vanilla-jsoneditor": "^0.21.4",
     "viem": "^2.1.0",
     "wagmi": "^2.2.1"

web-devtools/src/app/(main)/(homepage)/Header.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import styled from "styled-components";
+
+import Typewriter from "typewriter-effect";
+
+import { responsiveSize } from "styles/responsiveSize";
+
+const StyledHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
+const StyledH1 = styled.h1`
+  display: flex;
+  gap: 8px;
+  font-size: ${responsiveSize(21, 24)};
+  font-weight: 500;
+  margin-bottom: 48px;
+  letter-spacing: 1px;
+`;
+
+const TypewriterContainer = styled.div`
+  .typewriter-text {
+    color: ${({ theme }) => theme.klerosUIComponentsSecondaryPurple};
+  }
+`;
+
+const Header: React.FC = () => {
+  const Phrases = ["Manage Courts", "Get Insights", "Edit Dispute Templates", "Get PNK Faucets", "Boost productivity"];
+
+  return (
+    <StyledHeader>
+      <StyledH1>
+        Developer Toolkit:
+        <TypewriterContainer>
+          <Typewriter
+            options={{
+              strings: Phrases,
+              autoStart: true,
+              loop: true,
+              wrapperClassName: "typewriter-text",
+            }}
+          />
+        </TypewriterContainer>
+      </StyledH1>
+    </StyledHeader>
+  );
+};
+
+export default Header;

web-devtools/src/app/(main)/(homepage)/Tools.tsx

@@ -0,0 +1,95 @@
+import React from "react";
+import styled from "styled-components";
+
+import Link from "next/link";
+
+import PaperIcon from "svgs/icons/arrow.svg";
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  border-top: 3px solid ${({ theme }) => theme.klerosUIComponentsSecondaryPurple};
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+  background-color: ${({ theme }) => theme.klerosUIComponentsWhiteBackground};
+  padding: 16px;
+`;
+
+const ToolList = styled.div`
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 8px;
+  width: 100%;
+  @media (max-width: 768px) {
+    grid-template-columns: 1fr;
+  }
+`;
+
+const ToolItem = styled.li`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 16px;
+  border: 1px solid ${({ theme }) => theme.klerosUIComponentsLightBlue};
+  border-radius: 3px;
+  background-color: ${({ theme }) => theme.klerosUIComponentsLightBackground};
+  width: 100%;
+  transition: background-color 0.3s;
+`;
+
+const ToolLink = styled.div`
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  gap: 8px;
+  color: ${({ theme }) => theme.klerosUIComponentsSecondaryText};
+  width: 100%;
+`;
+
+const SVGContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  svg {
+    fill: ${({ theme }) => theme.klerosUIComponentsSecondaryPurple};
+    height: 12px;
+    width: 12px;
+  }
+`;
+
+const ToolName = styled.span`
+  font-size: 16px;
+`;
+
+const tools = [
+  { name: "Dispute Templates Preview", route: "/dispute-template" },
+  { name: "Configure Ruler", route: "/ruler" },
+  { name: "Courts Manager (comming soon)", route: "/" },
+  { name: "Arbitrable Explorer (comming soon)", route: "/" },
+];
+
+const Tools: React.FC = () => {
+  return (
+    <Container>
+      <p>Tools</p>
+      <ToolList>
+        {tools.map((tool, index) => (
+          <ToolItem key={index}>
+            <Link href={tool.route} passHref>
+              <ToolLink>
+                <SVGContainer>
+                  <PaperIcon />
+                </SVGContainer>
+                <ToolName>{tool.name}</ToolName>
+              </ToolLink>
+            </Link>
+          </ToolItem>
+        ))}
+      </ToolList>
+    </Container>
+  );
+};
+
+export default Tools;

web-devtools/src/app/(main)/(homepage)/page.tsx

@@ -0,0 +1,32 @@
+"use client";
+import React from "react";
+import styled from "styled-components";
+
+import { responsiveSize } from "styles/responsiveSize";
+
+import HeroImage from "components/HeroImage";
+
+import Header from "./Header";
+import Tools from "./Tools";
+
+const Container = styled.div`
+  width: 100%;
+  background-color: ${({ theme }) => theme.klerosUIComponentsLightBackground};
+  padding: ${responsiveSize(32, 72)} ${responsiveSize(24, 132)} ${responsiveSize(76, 96)};
+  max-width: 1780px;
+  margin: 0 auto;
+`;
+
+const Home: React.FC = () => {
+  return (
+    <div>
+      <HeroImage />
+      <Container>
+        <Header />
+        <Tools />
+      </Container>
+    </div>
+  );
+};
+
+export default Home;

web-devtools/src/app/(main)/ChangeRuler.tsx renamed to web-devtools/src/app/(main)/ruler/ChangeRuler.tsx

@@ -30,7 +30,7 @@ const SettingsPane = styled.div`
   margin: 16px 0;
 `;
 
-const Home: React.FC = () => {
+const Ruler: React.FC = () => {
   return (
     <Container>
       <h1>Ruler</h1>
@@ -59,4 +59,4 @@ const Home: React.FC = () => {
     </Container>
   );
 };
-export default Home;
+export default Ruler;

web-devtools/src/app/(main)/RulingModes.tsx renamed to web-devtools/src/app/(main)/ruler/RulingModes.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+import HeroDarkDesktop from "svgs/hero/hero-darkmode-desktop.svg";
+import HeroDarkMobile from "svgs/hero/hero-darkmode-mobile.svg";
+
+import useIsDesktop from "hooks/useIsDesktop";
+
+const HeroImage = () => {
+  const isDesktop = useIsDesktop();
+  return <div>{isDesktop ? <HeroDesktop /> : <HeroMobile />}</div>;
+};
+
+const HeroDesktop: React.FC = () => {
+  return <HeroDarkDesktop />;
+};
+
+const HeroMobile: React.FC = () => {
+  return <HeroDarkMobile />;
+};
+
+export default HeroImage;

web-devtools/src/app/(main)/page.tsx renamed to web-devtools/src/app/(main)/ruler/page.tsx

@@ -0,0 +1,12 @@
+import { useMemo } from "react";
+
+import { useWindowSize } from "react-use";
+
+import { BREAKPOINT_LANDSCAPE } from "styles/landscapeStyle";
+
+const useIsDesktop = () => {
+  const { width } = useWindowSize();
+  return useMemo(() => width > BREAKPOINT_LANDSCAPE, [width]);
+};
+
+export default useIsDesktop;

web-devtools/src/assets/svgs/hero/hero-darkmode-desktop.svg

@@ -8065,6 +8065,7 @@ __metadata:
     react-markdown: "npm:^8.0.7"
     ts-node: "npm:^10.9.2"
     typescript: "npm:^5.5.3"
+    typewriter-effect: "npm:^2.21.0"
     vanilla-jsoneditor: "npm:^0.21.4"
     viem: "npm:^2.1.0"
     wagmi: "npm:^2.2.1"
@@ -38419,6 +38420,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typewriter-effect@npm:^2.21.0":
+  version: 2.21.0
+  resolution: "typewriter-effect@npm:2.21.0"
+  dependencies:
+    prop-types: "npm:^15.8.1"
+    raf: "npm:^3.4.1"
+  peerDependencies:
+    react: ^17.x || ^18.x
+    react-dom: ^17.x || ^18.x
+  checksum: eaefe01da5ecfc866a1031efa34ad365f4f52fc57be9acf67d4877e01361844a2798f1aba035845fc9f60edaa56bdbb6f7597341ae8e4015793795e1d7b6763d
+  languageName: node
+  linkType: hard
+
 "typical@npm:^4.0.0":
   version: 4.0.0
   resolution: "typical@npm:4.0.0"