docs: add the new landing page

.eslintrc

@@ -54,7 +54,11 @@
   },
   "overrides": [
     {
-      "files": ["site/snippets/**/*.ts", "site/snippets/**/*.tsx"],
+      "files": [
+        "site/snippets/**/*.ts",
+        "site/snippets/**/*.tsx",
+        "**/site/**/*.mdx"
+      ],
       "rules": {
         "@typescript-eslint/no-unused-vars": "off",
         "import/extensions": ["off", "ignorePackages"],
@@ -64,7 +68,9 @@
     {
       "files": ["**/*.mdx"],
       "extends": ["plugin:mdx/recommended"],
-      "settings": {}
+      "settings": {
+        "import/extensions": ["off", "ignorePackages"]
+      }
     }
   ]
 }

site/components/TileButton.tsx

@@ -0,0 +1,55 @@
+import { ReactNode } from "react";
+
+type TileButtonProps = {
+  icon: ReactNode;
+  title: string;
+  description: string;
+  href: string;
+  target?: string;
+};
+
+export const TileButton = ({
+  icon,
+  title,
+  description,
+  href,
+  target,
+}: TileButtonProps) => {
+  return (
+    <a href={href} target={target}>
+      <div className="flex flex-col gap-2 border border-gray-200 rounded-lg p-6 cursor-pointer">
+        {icon}
+        <div className="font-medium text-lg">{title}</div>
+        <div className="text-md">{description}</div>
+      </div>
+    </a>
+  );
+};
+
+type SmallTileProps = {
+  icon: ReactNode;
+  title: string;
+  description: string;
+  href: string;
+};
+
+export const SmallTileRow = ({
+  icon,
+  title,
+  description,
+  href,
+}: SmallTileProps) => {
+  return (
+    <a href={href}>
+      <div className="flex flex-row gap-3 flex-1 content-center items-center cursor-pointer">
+        <div className="flex items-center justify-center rounded-lg border border-gray-200 w-[48px] h-[48px] flex-0">
+          {icon}
+        </div>
+        <div className="flex flex-col">
+          <div className="font-medium text-md">{title}</div>
+          <div className="text-md">{description}</div>
+        </div>
+      </div>
+    </a>
+  );
+};

site/components/icons/ClockForwardIcon.tsx

@@ -0,0 +1,19 @@
+import { SVGProps } from "react";
+
+export const ClockForwardIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={20}
+    height={20}
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="#E82594"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="m12.097 12-3-1V6.819m8 3.181a8 8 0 1 0-1.07 4m-1.124-4.878 2 2 2-2"
+    />
+  </svg>
+);

site/components/icons/DotsIcon.tsx

@@ -0,0 +1,16 @@
+import { SVGProps } from "react";
+
+export const DotsIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={20}
+    height={20}
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="#E82594"
+      d="M6.046 10a2 2 0 1 1-4 0 2 2 0 0 1 4 0ZM12 10a2 2 0 1 1-4 0 2 2 0 0 1 4 0ZM18.089 10a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"
+    />
+  </svg>
+);

site/components/icons/InfraIcon.tsx

@@ -0,0 +1,16 @@
+import { SVGProps } from "react";
+
+export const InfraIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={20}
+    height={20}
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="#E82594"
+      d="M6.389 12.778c-1.775 0-3.283-.621-4.525-1.864C.62 9.672 0 8.164 0 6.39c0-.309.022-.617.067-.926.045-.309.12-.605.226-.888a.823.823 0 0 1 .288-.38c.121-.081.258-.14.41-.178a.904.904 0 0 1 .46.009.952.952 0 0 1 .423.254l2.96 2.938 2.384-2.385-2.927-2.938A.951.951 0 0 1 4.028 1c.037-.15.098-.287.184-.408a.865.865 0 0 1 .374-.289A3.95 3.95 0 0 1 5.47.067C5.776.022 6.083 0 6.39 0c1.775 0 3.283.621 4.525 1.863 1.243 1.243 1.864 2.751 1.864 4.526 0 .469-.044.905-.133 1.31-.088.404-.22.795-.397 1.173l6.038 6.004c.466.464.699 1.032.699 1.704 0 .672-.232 1.24-.696 1.706a2.315 2.315 0 0 1-1.705.699 2.295 2.295 0 0 1-1.708-.716l-6.004-6.021c-.392.17-.79.3-1.195.392a5.807 5.807 0 0 1-1.288.138Zm0-1.667c.486 0 .972-.072 1.459-.217a4.11 4.11 0 0 0 1.334-.678l6.9 6.9c.135.135.304.2.508.194a.72.72 0 0 0 .508-.212.69.69 0 0 0 .203-.508.69.69 0 0 0-.203-.509l-6.9-6.882c.313-.385.543-.823.69-1.313.149-.491.223-.99.223-1.497 0-1.232-.44-2.323-1.32-3.272-.88-.948-1.995-1.413-3.342-1.395L8.857 4.13c.2.201.301.436.301.703 0 .268-.1.502-.301.703l-3.32 3.321c-.202.2-.436.301-.704.301a.964.964 0 0 1-.703-.301L1.722 6.449c.003 1.426.482 2.56 1.438 3.4.956.842 2.032 1.262 3.229 1.262Z"
+    />
+  </svg>
+);

site/components/icons/PointerIcon.tsx

@@ -0,0 +1,16 @@
+import { SVGProps } from "react";
+
+export const PointerIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={20}
+    height={20}
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="#E82594"
+      d="M1.966 9.16h.966c.273 0 .503.093.688.278a.935.935 0 0 1 .278.689.934.934 0 0 1-.278.688.935.935 0 0 1-.688.278h-.966a.935.935 0 0 1-.688-.278.934.934 0 0 1-.278-.688c0-.274.093-.503.278-.689a.935.935 0 0 1 .688-.277Zm1.642 5.217.676-.676a.885.885 0 0 1 .676-.278c.258.008.483.1.676.278a.985.985 0 0 1 .302.688.9.9 0 0 1-.277.688l-.677.676a.899.899 0 0 1-.688.278.985.985 0 0 1-.966-.978.885.885 0 0 1 .278-.676Zm.676-7.824-.676-.676A.885.885 0 0 1 3.33 5.2c.008-.258.1-.483.278-.677a.985.985 0 0 1 .688-.301.899.899 0 0 1 .688.277l.677.676a.899.899 0 0 1 .277.689.985.985 0 0 1-.302.688c-.193.177-.418.27-.676.278a.885.885 0 0 1-.676-.278Zm11.494 11.59-3.912-3.911-.724 2.173a.426.426 0 0 1-.181.254.466.466 0 0 1-.555-.012.481.481 0 0 1-.182-.266L8.148 9.475a.701.701 0 0 1 .012-.387c.04-.128.1-.233.18-.314.081-.08.186-.14.315-.18a.701.701 0 0 1 .386-.013l6.955 2.077a.427.427 0 0 1 .253.181.51.51 0 0 1 .085.278c0 .096-.024.189-.073.277a.378.378 0 0 1-.241.182l-2.173.772 3.863 3.864c.193.193.29.419.29.676a.927.927 0 0 1-.29.676l-.58.58a.927.927 0 0 1-.675.29.927.927 0 0 1-.677-.29ZM8.728 4.332v-.966c0-.273.092-.503.277-.688a.935.935 0 0 1 .688-.278c.274 0 .503.093.688.278a.935.935 0 0 1 .278.688v.966a.935.935 0 0 1-.278.688.935.935 0 0 1-.688.278.935.935 0 0 1-.688-.278.935.935 0 0 1-.278-.688Zm4.998.845.7-.7a.944.944 0 0 1 .664-.278.9.9 0 0 1 .688.278c.178.177.27.399.278.664a.94.94 0 0 1-.253.688l-.7.725a.827.827 0 0 1-.665.278 1.033 1.033 0 0 1-.688-.278.985.985 0 0 1-.302-.688.899.899 0 0 1 .278-.689Z"
+    />
+  </svg>
+);

site/components/icons/SignerIcon.tsx

@@ -0,0 +1,19 @@
+import { SVGProps } from "react";
+
+export const SignerIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={20}
+    height={20}
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="#E82594"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="m10.447 18.035.619-.693c.758-.85 2.12-.74 2.732.222a1.719 1.719 0 0 0 2.598.356l1.121-1.006M4 13l3.5 3m-4-3 9.86-10.204a2.718 2.718 0 1 1 3.844 3.845L7 16.5 2 18l1.5-5Z"
+    />
+  </svg>
+);

site/components/icons/SmartContractIcon.tsx

@@ -0,0 +1,16 @@
+import { SVGProps } from "react";
+
+export const SmartContractIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={20}
+    height={20}
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="#E82594"
+      d="M2.564 19.487a2.475 2.475 0 0 1-1.82-.744A2.475 2.475 0 0 1 0 16.923V15.82c0-.51.182-.947.545-1.31.363-.363.8-.544 1.31-.544h1.222V1.855c0-.51.181-.947.545-1.31C3.985.182 4.422 0 4.93 0h10.65c.51 0 .947.182 1.31.545.363.363.545.8.545 1.31v15.068c0 .717-.248 1.323-.745 1.82a2.475 2.475 0 0 1-1.82.744H2.565Zm12.308-1.538c.29 0 .534-.099.73-.295a.992.992 0 0 0 .295-.73V1.853a.307.307 0 0 0-.088-.227.307.307 0 0 0-.227-.089H4.93a.307.307 0 0 0-.227.09.307.307 0 0 0-.089.226v12.11h7.377c.51 0 .946.182 1.31.545.363.363.544.8.544 1.31v1.104c0 .29.098.534.295.73.197.197.44.296.73.296ZM6.607 6.35a.744.744 0 0 1-.548-.221.744.744 0 0 1-.22-.548c0-.219.073-.401.22-.548a.744.744 0 0 1 .548-.221h7.298c.218 0 .401.073.548.22.148.148.222.331.222.55 0 .217-.074.4-.222.547a.744.744 0 0 1-.548.221H6.607Zm0 2.959a.744.744 0 0 1-.548-.222.745.745 0 0 1-.22-.548c0-.218.073-.4.22-.548a.745.745 0 0 1 .548-.22h7.298c.218 0 .401.073.548.22.148.148.222.33.222.549 0 .218-.074.4-.222.548a.744.744 0 0 1-.548.22H6.607Zm-4.043 8.639h9.744v-2.13a.307.307 0 0 0-.089-.227.307.307 0 0 0-.227-.09H1.854a.307.307 0 0 0-.227.09.307.307 0 0 0-.089.226v1.105c0 .29.099.534.295.73.197.197.44.296.731.296Zm0 0H1.538h10.77-9.744Z"
+    />
+  </svg>
+);

site/pages/index.mdx

@@ -1,6 +1,69 @@
 ---
 title: Account Kit
 description: Account Kit is a vertically integrated stack for building apps that support ERC-4337 smart accounts, Signer integrations, sponsoring gas, bundlers, and an SDK.
+layout: docs
 ---
 
-# TODO -- Julia's Grid Layout
+import { TileButton, SmallTileRow } from "../components/TileButton";
+import { ClockForwardIcon } from "../components/icons/ClockForwardIcon";
+import { PointerIcon } from "../components/icons/PointerIcon";
+import { DotsIcon } from "../components/icons/DotsIcon";
+import { InfraIcon } from "../components/icons/InfraIcon";
+import { SmartContractIcon } from "../components/icons/SmartContractIcon";
+import { SignerIcon } from "../components/icons/SignerIcon";
+
+# Build Embedded Accounts with Account Kit
+
+Build zero friction sign up and transaction flows with smart accounts. Sign up with email, login with passkeys, transact with sponsored gas, and checkout in one click with transaction batching.
+
+<img
+  src="/images/account-kit-doc-overview.png"
+  alt="alchemy account ui overview"
+/>
+
+## React
+
+<div className="flex flex-row gap-4">
+  <TileButton
+    icon={<ClockForwardIcon />}
+    title="Quickstart"
+    description="Start building in minutes with UI components and powerful React hooks."
+    href="/react/quick-start"
+  />
+  <TileButton
+    icon={<PointerIcon />}
+    title="Demo"
+    description="Customize React components, export your config, and start building."
+    href="https://aa-sdk-ui-demo.vercel.app"
+    target="_blank"
+  />
+</div>
+
+## Advanced
+
+<div className="grid grid-cols-2 gap-8">
+  <SmallTileRow
+    icon={<DotsIcon />}
+    title="Vanilla Typescript"
+    description="Other frameworks i.e. svelt, vue, etc."
+    href="/core/overview"
+  />
+  <SmallTileRow
+    icon={<InfraIcon />}
+    title="Infra"
+    description="Integrate with Alchemy's infra"
+    href="/infra/overview"
+  />
+  <SmallTileRow
+    icon={<SmartContractIcon />}
+    title="Smart Contracts"
+    description="Use Alchemy's Smart Contracts"
+    href="/smart-contracts/overview"
+  />
+  <SmallTileRow
+    icon={<SignerIcon />}
+    title="Signer"
+    description="Use Alchemy's Signer"
+    href="/signer/overview"
+  />
+</div>

site/pages/react/quickstart.mdx

@@ -0,0 +1,6 @@
+---
+title: React Quickstart
+description: Learn how to get started with Alchemy Account Kit in React.
+---
+
+# React Quickstart

site/vocs.config.tsx

@@ -1,7 +1,7 @@
 import { defineConfig } from "vocs";
 import { coreSidebar } from "./sidebar/core.js";
+import { indexSidebar } from "./sidebar/index.js";
 import { infraSidebar } from "./sidebar/infra.js";
-import { introSidebar } from "./sidebar/intro.js";
 import { reactSidebar } from "./sidebar/react.js";
 import { aaSdkCoreReferenceSidebar } from "./sidebar/reference/aa-sdk/core.js";
 import { aaSdkEthersReferenceSidebar } from "./sidebar/reference/aa-sdk/ethers.js";
@@ -55,11 +55,11 @@ export default defineConfig({
     </>
   ),
   topNav: [
-    { text: "React", link: "/react/overview" },
-    { text: "Core", link: "/core/overview" },
     {
-      text: "More",
+      text: "Guides",
       items: [
+        { text: "React", link: "/react/overview" },
+        { text: "Core", link: "/core/overview" },
         {
           text: "Infra",
           link: "/infra/overview",
@@ -108,7 +108,7 @@ export default defineConfig({
     },
   ],
   sidebar: {
-    "/": introSidebar,
+    "/": indexSidebar,
     "/react": reactSidebar,
     "/core": coreSidebar,
     "/infra": infraSidebar,