first commit

.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+.next

.eslintrc

@@ -0,0 +1,44 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:jsx-a11y/recommended"
+  ],
+  "rules": {
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "react/prop-types": "off",
+    "react/react-in-jsx-scope": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/ban-ts-ignore": "off",
+    "jsx-a11y/label-has-associated-control": [
+      "error",
+      {
+        "labelComponents": [],
+        "labelAttributes": [],
+        "controlComponents": [],
+        "assert": "either",
+        "depth": 25
+      }
+    ],
+    "@typescript-eslint/no-explicit-any": "off"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}

.gitignore

@@ -0,0 +1,14 @@
+// .gitnignore
+# next.js build output
+.next
+# dotenv environment variables file 
+.env
+.env.build
+# Dependency directories
+node_modules/
+# Logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.DS_Store

.pretterrc

@@ -0,0 +1,4 @@
+{
+  "proseWrap": "always",
+  "jsxBracketSameLine": true
+}

.prettierignore

@@ -0,0 +1,2 @@
+node_modules
+.next

README.md

@@ -0,0 +1,21 @@
+# The Web3 Index
+
+The Web3 Index provides usage data across the web3 stack with an initial focus on middleware network revenue.
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.

components/Box/index.tsx

@@ -0,0 +1,8 @@
+import { styled } from "../../stitches.config";
+
+const Box = styled("div", {
+  // Reset
+  boxSizing: "border-box",
+});
+
+export default Box;

components/Button/index.tsx

@@ -0,0 +1,21 @@
+import { styled } from "../../stitches.config";
+
+const StyledButton = styled("button", {
+  // Reset
+  boxSizing: "border-box",
+  border: 0,
+  borderRadius: "$round",
+  fontWeight: 700,
+  fontSize: "$1",
+  backgroundColor: "$hiContrast",
+  color: "$loContrast",
+  py: "$3",
+  px: "$4",
+  cursor: "pointer",
+});
+
+const Button = ({ children, ...props }) => (
+  <StyledButton {...props}>{children}</StyledButton>
+);
+
+export default Button;

components/CallToAction/index.tsx

@@ -0,0 +1,24 @@
+import Box from "../Box";
+import Button from "../Button";
+import { PlusCircledIcon } from "@modulz/radix-icons";
+import { styled } from "../../stitches.config";
+
+const StyledIcon = styled(PlusCircledIcon, {
+  ml: "$2",
+});
+
+const CallToAction = ({ ...props }) => {
+  return (
+    <Box {...props}>
+      <Box as="h2" css={{ fontSize: "$9", mb: "$3", fontFamily: "$heading" }}>
+        Help Grow the Index
+      </Box>
+      <Button css={{ mx: "auto", display: "flex", alignItems: "center" }}>
+        Submit a Project{" "}
+        <StyledIcon css={{ width: 15, height: 15, color: "$lowContrast" }} />
+      </Button>
+    </Box>
+  );
+};
+
+export default CallToAction;

components/Container/index.tsx

@@ -0,0 +1,36 @@
+import { styled, StitchesCss, StitchesVariants } from "../../stitches.config";
+
+export type ContainerProps = StitchesCss<typeof Container>;
+export type ContainerVariants = StitchesVariants<typeof Container>;
+
+const Container = styled("div", {
+  // Reset
+  boxSizing: "border-box",
+  flexShrink: 0,
+
+  // Custom
+  mx: "auto",
+  px: "$4",
+
+  variants: {
+    size: {
+      "1": {
+        maxWidth: "430px",
+      },
+      "2": {
+        maxWidth: "715px",
+      },
+      "3": {
+        maxWidth: "1145px",
+      },
+      "4": {
+        maxWidth: "1400px",
+      },
+      "5": {
+        maxWidth: "none",
+      },
+    },
+  },
+});
+
+export default Container;

components/Faq/index.tsx

@@ -0,0 +1,137 @@
+import Box from "../Box";
+import * as Accordion from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "@modulz/radix-icons";
+import { styled } from "../../stitches.config";
+import { filterCssFromProps } from "../../lib/utils";
+
+const AccordionChevron = styled(ChevronDownIcon, {
+  transition: "transform 300ms",
+  "[data-state=open] &": {
+    transform: "rotate(180deg)",
+  },
+});
+
+const Item = ({ emoji, question, answer }) => (
+  <Box
+    as={Accordion.Item}
+    value={emoji}
+    css={{
+      borderBottom: "1px solid",
+      borderColor: "$border",
+      h3: {
+        m: 0,
+      },
+      "&:last-child": {
+        borderBottom: 0,
+      },
+    }}
+  >
+    <Box as={Accordion.Header} css={{ margin: 0 }}>
+      <Box
+        as={Accordion.Button}
+        css={{
+          display: "flex",
+          alignItems: "center",
+          backgroundColor: "transparent",
+          border: "none",
+          py: "$4",
+          outline: "none",
+          flex: 1,
+          textAlign: "left",
+          background: "transparent",
+          my: 0,
+          width: "100%",
+          fontSize: "$4",
+          cursor: "pointer",
+          fontWeight: 600,
+        }}
+      >
+        <Box css={{ display: "flex", alignItems: "center", mr: "auto" }}>
+          <Box css={{ mr: "$3" }}>
+            <Box role="img" aria-label="What is Web3">
+              {emoji}
+            </Box>
+          </Box>
+          {question}
+        </Box>
+        <AccordionChevron />
+      </Box>
+    </Box>
+    <Box
+      as={Accordion.Panel}
+      css={{ pb: "$3", mb: 0, fontSize: "$2", lineHeight: "$3" }}
+    >
+      {answer}
+    </Box>
+  </Box>
+);
+
+const items = [
+  {
+    emoji: "🌐",
+    question: "What is Web3?",
+    answer: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+velit esse cillum dolore eu fugiat nulla pariatur.`,
+  },
+  {
+    emoji: "🤙🏻",
+    question: "What’s the purpose of The Web3 Index?",
+    answer: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+velit esse cillum dolore eu fugiat nulla pariatur.`,
+  },
+
+  {
+    emoji: "🔢",
+    question: "How do we calculate total participant revenue (TPR)?",
+    answer: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+velit esse cillum dolore eu fugiat nulla pariatur.`,
+  },
+  {
+    emoji: "🤘🏻",
+    question: "How do I get involved in Web3?",
+    answer: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+velit esse cillum dolore eu fugiat nulla pariatur.`,
+  },
+  {
+    emoji: "✅",
+    question: "How do I get my project listed on The Web3 Index?",
+    answer: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+velit esse cillum dolore eu fugiat nulla pariatur.`,
+  },
+];
+const Faq = ({ ...props }) => {
+  return (
+    <Box
+      css={{ maxWidth: 600, mx: "auto", ...props?.css }}
+      {...filterCssFromProps(props)}
+    >
+      <Accordion.Root type="single" defaultValue="🌐">
+        {items.map((item, i) => (
+          <Item
+            key={i}
+            emoji={item.emoji}
+            question={item.question}
+            answer={item.answer}
+          />
+        ))}
+      </Accordion.Root>
+    </Box>
+  );
+};
+
+export default Faq;

components/Footer/index.tsx

@@ -0,0 +1,48 @@
+import Box from "../Box";
+import { TwitterLogoIcon, GitHubLogoIcon } from "@modulz/radix-icons";
+import ThemeToggle from "../ThemeToggle";
+
+const Footer = ({ ...props }) => {
+  return (
+    <Box
+      css={{
+        borderTop: "1px solid",
+        borderColor: "$border",
+        py: "$4",
+        display: "grid",
+        gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
+        margin: "0 auto",
+        fontSize: "$1",
+      }}
+      {...props}
+    >
+      <Box css={{ textAlign: "left", display: "flex", alignItems: "center" }}>
+        <Box css={{ display: "flex", alignItems: "center", mr: "$3" }}>
+          <TwitterLogoIcon />
+          <Box css={{ ml: "$2" }}>Twitter</Box>
+        </Box>
+        <Box css={{ display: "flex", alignItems: "center", mr: "$3" }}>
+          <GitHubLogoIcon />
+          <Box css={{ ml: "$2" }}>Github</Box>
+        </Box>
+        <Box css={{ display: "flex", alignItems: "center" }}>
+          <TwitterLogoIcon />
+          <Box css={{ ml: "$2" }}>Discord</Box>
+        </Box>
+      </Box>
+      <Box css={{ textAlign: "center" }}>
+        The Web3 Index™. All rights reserved
+      </Box>
+      <Box
+        css={{
+          display: "flex",
+          justifyContent: "flex-end",
+        }}
+      >
+        <ThemeToggle />
+      </Box>
+    </Box>
+  );
+};
+
+export default Footer;