wip-add-new-page

components/ProductBox.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+export const ProductBox = ({
+  icon,
+  title,
+  description,
+  link,
+}: {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  link: string;
+}) => (
+  <a
+    href={link}
+    className="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors"
+  >
+    <div className="text-purple-400 mb-2">{icon}</div>
+    <h3 className="text-lg font-semibold mb-2">{title}</h3>
+    <p className="text-sm text-gray-300">{description}</p>
+  </a>
+);

components/icons/BenchmarkIcon.tsx

@@ -0,0 +1,18 @@
+const BenchmarkIcon = () => {
+  return (
+    <svg
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M24 0C10.7486 0 0 10.7486 0 24C0 37.2514 10.7486 48 24 48C37.2514 48 48 37.2514 48 24C48 10.7486 37.2686 0 24 0ZM23.9314 8.46857C25.2343 8.46857 26.3143 9.53143 26.3143 10.8514C26.3143 12.1714 25.2171 13.2343 23.9314 13.2343C22.6457 13.2343 21.5657 12.1371 21.5657 10.8514C21.5657 9.56571 22.6114 8.46857 23.9314 8.46857ZM14.7771 12.5143C16.0971 12.5143 17.16 13.6114 17.16 14.8971C17.16 16.1829 16.0971 17.28 14.7771 17.28C13.4571 17.28 12.3943 16.1829 12.3943 14.8971C12.3943 13.6114 13.4914 12.5143 14.7771 12.5143ZM8.52 24C8.52 22.68 9.61714 21.6171 10.9029 21.6171C12.1886 21.6171 13.2857 22.68 13.2857 24C13.2857 25.32 12.2229 26.3829 10.9029 26.3829C9.58286 26.3829 8.52 25.2857 8.52 24ZM14.8114 35.4857C13.5086 35.4857 12.4286 34.3886 12.4286 33.1029C12.4286 31.8171 13.5257 30.72 14.8114 30.72C16.0971 30.72 17.1943 31.7829 17.1943 33.1029C17.1943 34.4229 16.1314 35.4857 14.8114 35.4857ZM20.2971 27.6514C18.3771 25.6629 18.7886 22.92 21.0686 21.36L33.2743 12.9429C34.6457 12.0171 36.0343 13.3886 35.0914 14.7771L26.5714 26.8629C24.9943 29.1429 22.2857 29.5714 20.2971 27.6514ZM33.0857 35.4857C31.7657 35.4857 30.7029 34.3886 30.7029 33.1029C30.7029 31.8171 31.7657 30.72 33.0857 30.72C34.4057 30.72 35.4686 31.7829 35.4686 33.1029C35.4686 34.4229 34.3714 35.4857 33.0857 35.4857ZM36.9771 26.3829C35.6571 26.3829 34.5943 25.2857 34.5943 24C34.5943 22.7143 35.6571 21.6171 36.9771 21.6171C38.2971 21.6171 39.36 22.68 39.36 24C39.36 25.32 38.2629 26.3829 36.9771 26.3829Z"
+        fill="#E6DAFE"
+      />
+    </svg>
+  );
+};
+
+export default BenchmarkIcon;

components/icons/EntropyIcon.tsx

@@ -0,0 +1,30 @@
+const EntropyIcon = () => {
+  return (
+    <svg
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12.7033 21C11.3833 21 10.269 22.0971 10.269 23.4171C10.269 24.7371 11.3833 25.8343 12.7033 25.8343C14.0233 25.8343 15.1204 24.72 15.1204 23.4171C15.1204 22.1143 14.0061 21 12.7033 21Z"
+        fill="#E6DAFE"
+      />
+      <path
+        d="M29.675 15.6857C30.9778 15.6857 32.075 14.5885 32.075 13.2685C32.075 11.9485 30.9778 10.8685 29.675 10.8685C28.3721 10.8685 27.2578 11.9828 27.2578 13.2685C27.2578 14.5542 28.355 15.6857 29.675 15.6857Z"
+        fill="#E6DAFE"
+      />
+      <path
+        d="M29.675 31.1486C28.355 31.1486 27.2578 32.2458 27.2578 33.5486C27.2578 34.8515 28.355 35.9658 29.675 35.9658C30.995 35.9658 32.075 34.8515 32.075 33.5486C32.075 32.2458 30.9778 31.1486 29.675 31.1486Z"
+        fill="#E6DAFE"
+      />
+      <path
+        d="M24 0C10.7486 0 0 10.7486 0 24C0 37.2514 10.7486 48 24 48C37.2514 48 48 37.2514 48 24C48 10.7486 37.2686 0 24 0ZM29.6743 8.05714C32.52 8.05714 34.8857 10.44 34.8857 13.2686C34.8857 16.0971 32.52 18.48 29.6743 18.48C26.8286 18.48 24.4457 16.1314 24.4457 13.2686C24.4457 10.4057 26.8286 8.05714 29.6743 8.05714ZM18.3429 8.05714C21.2057 8.05714 23.5714 10.44 23.5714 13.2686C23.5714 16.0971 21.2057 18.48 18.3429 18.48C15.48 18.48 13.1314 16.1314 13.1314 13.2686C13.1314 10.4057 15.5143 8.05714 18.3429 8.05714ZM7.49143 23.4171C7.49143 20.5714 9.85714 18.2057 12.7029 18.2057C15.5486 18.2057 17.9143 20.5714 17.9143 23.4171C17.9143 26.2629 15.5314 28.6114 12.7029 28.6114C9.87429 28.6114 7.49143 26.2457 7.49143 23.4171ZM18.3429 38.76C15.5143 38.76 13.1314 36.3943 13.1314 33.5486C13.1314 30.7029 15.4971 28.3371 18.3429 28.3371C21.1886 28.3371 23.5714 30.7029 23.5714 33.5486C23.5714 36.3943 21.2057 38.76 18.3429 38.76ZM18.8057 23.4171C18.8057 20.5714 21.1714 18.2057 24.0171 18.2057C26.8629 18.2057 29.2114 20.5714 29.2114 23.4171C29.2114 26.2629 26.8457 28.6114 24.0171 28.6114C21.1886 28.6114 18.8057 26.2457 18.8057 23.4171ZM29.6743 38.76C26.8286 38.76 24.4457 36.3943 24.4457 33.5486C24.4457 30.7029 26.8114 28.3371 29.6743 28.3371C32.5371 28.3371 34.8857 30.7029 34.8857 33.5486C34.8857 36.3943 32.52 38.76 29.6743 38.76ZM35.3143 28.6114C32.4857 28.6114 30.12 26.2457 30.12 23.4171C30.12 20.5886 32.4857 18.2057 35.3143 18.2057C38.1429 18.2057 40.5257 20.5714 40.5257 23.4171C40.5257 26.2629 38.16 28.6114 35.3143 28.6114Z"
+        fill="#E6DAFE"
+      />
+    </svg>
+  );
+};
+
+export default EntropyIcon;

components/icons/ExpressRelayIcon.tsx

@@ -0,0 +1,18 @@
+const ExpressRelayIcon = () => {
+  return (
+    <svg
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M24 0C10.75 0 0 10.75 0 24C0 29.68 1.98 34.9 5.28 39.01L11.82 32.47L12.85 31.44L15.95 28.34L19.67 32.06L16.57 35.16L15.54 36.19L9 42.73C13.11 46.03 18.33 48.01 24.01 48.01C37.26 48.01 48.01 37.26 48.01 24.01C48.01 10.76 37.25 0 24 0ZM12.54 23.07C11.68 23.93 10.3 23.93 9.44 23.07C8.58 22.21 8.58 20.83 9.44 19.97L19.97 9.44C20.83 8.58 22.21 8.58 23.07 9.44C23.93 10.3 23.93 11.68 23.07 12.54L12.54 23.07ZM24 33.91L14.09 24L24 14.09L33.91 24L24 33.91ZM38.56 28.03L28.03 38.56C27.17 39.42 25.79 39.42 24.93 38.56C24.07 37.7 24.07 36.32 24.93 35.46L35.46 24.93C36.32 24.07 37.7 24.07 38.56 24.93C39.42 25.79 39.42 27.17 38.56 28.03Z"
+        fill="#E6DAFE"
+      />
+    </svg>
+  );
+};
+
+export default ExpressRelayIcon;

components/icons/PriceFeedIcon.tsx

@@ -0,0 +1,18 @@
+const PriceFeedIcon = () => {
+  return (
+    <svg
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M24 0C10.7486 0 0 10.7486 0 24C0 37.2514 10.7486 48 24 48C37.2514 48 48 37.2514 48 24C48 10.7486 37.2514 0 24 0ZM40.4571 16.5771C39.9943 17.5714 39.5486 18.5486 39.12 19.5429C38.2629 21.4971 37.3714 23.5029 36.3257 25.44L36.24 25.6114C35.4514 27.6 33.96 29.2286 32.0571 30.2057C29.2286 31.3371 25.9886 30.5657 24 28.2514C23.28 27.36 22.6457 26.4171 22.0629 25.44C20.9314 23.6229 19.5257 21.36 18.12 21.0686C17.9143 21.0343 17.2971 20.8971 16.1657 21.7029C15.2743 22.4057 14.5886 23.3314 14.1771 24.3943C13.4743 25.92 12.84 27.5143 12.2229 29.0571C11.7257 30.3257 11.2114 31.5771 10.6629 32.8286C10.3886 33.4457 9.78857 33.8571 9.10286 33.8571C8.86286 33.8571 8.64 33.8229 8.41714 33.72C7.54286 33.3429 7.14857 32.3314 7.52571 31.4571C8.05714 30.24 8.55429 29.0229 9.03429 27.7886C9.66857 26.1943 10.32 24.5657 11.0571 22.9543C11.7257 21.36 12.8057 19.9543 14.1771 18.9086C15.48 17.8629 17.1429 17.4343 18.7886 17.7086C21.6514 18.2914 23.4171 21.12 24.96 23.6229C25.44 24.4629 25.9886 25.2514 26.5886 26.0057C27.6171 27.2057 29.28 27.6171 30.7543 27.0343C31.8514 26.5714 32.4857 25.3886 33.2229 24L33.3086 23.8457C34.2857 21.9943 35.1429 20.04 35.9829 18.1543C36.4286 17.1429 36.8743 16.1314 37.3371 15.1371C37.7314 14.28 38.76 13.9029 39.6171 14.2971C40.4743 14.6914 40.8514 15.72 40.4571 16.5771Z"
+        fill="#E6DAFE"
+      />
+    </svg>
+  );
+};
+
+export default PriceFeedIcon;

pages/home/index.mdx

@@ -1,20 +1,67 @@
-# Introduction
+import React from "react";
+import { ProductBox } from "../../components/ProductBox";
+import PriceFeedIcon from "../../components/icons/PriceFeedIcon";
+import EntropyIcon from "../../components/icons/EntropyIcon";
+import ExpressRelayIcon from "../../components/icons/ExpressRelayIcon";
+import BenchmarkIcon from "../../components/icons/BenchmarkIcon";
 
-Pyth Network is an oracle protocol that connects the owners of market data to applications on multiple blockchains.
-Pyth's market data is contributed by over 100 [first-party publishers](https://pyth.network/publishers/), including some of the biggest exchanges and market making firms in the world.
-[Over 350 protocols](https://defillama.com/oracles/Pyth) on 55+ blockchains trust Pyth to secure their applications.
-
-Pyth Network offers several products for developers:
-
-- [Price Feeds](../price-feeds) provide real-time prices for 500+ assets on 55+ blockchain ecosystems, including Solana, many EVM chains,
-  Aptos, Sui, NEAR, and several Cosmos chains.
-- [Benchmarks](../benchmarks) provides historical Pyth prices for both on- and off-chain use.
-- [Express Relay](../express-relay/) enables protocols to eliminate their MEV while gaining access to active searchers and liquidators.
-- [Entropy](../entropy) allows developers to generate secure random numbers on the blockchain.
-
-Please follow the links above to learn about each product and how to integrate them into your application.
-
-Other useful links may be:
-
-- [Pyth Token](home/pyth-token) -- Learn more about the Pyth governance token PYTH.
-- [Pyth Metrics](home/metrics) -- See metrics of the network's adoption and growth.
+<div className="text-white p-8">
+  <div className="flex mb-8">
+    <div className="w-full max-w-4xl mx-auto">
+      <h1 className="text-4xl font-extrabold">
+        Introduction to Pyth Documentation
+      </h1>
+      <div className="mt-16">
+        <p className="text-gray-300 mb-8">
+          Pyth Network is the permissionless data infrastructure that empowers
+          the next generation of decentralized applications. Pyth provides
+          builders with the supercharged infrastructure to create dApps that
+          compete with apps.
+        </p>
+      </div>
+    </div>
+  </div>
+  <div className="w-full max-w-4xl mx-auto mb-8">
+    <h2 className="text-3xl font-bold text-left">Products</h2>
+    <hr className="border-t border-gray-600 my-4" />
+  </div>
+  <div className="grid grid-cols-3 gap-4 mb-8">
+    <ProductBox
+      icon={<PriceFeedIcon className="w-8 h-8" />}
+      title="Price Feeds"
+      description="Price Feeds provide real-time prices for crypto, stocks, forex, and metals on number of blockchains, including Solana, many EVM chains, Aptos, Sui, NEAR, and several Cosmos chains."
+      link="/price-feeds"
+    />
+    <ProductBox
+      icon={<BenchmarkIcon className="w-8 h-8" />}
+      title="Benchmarks"
+      description="Benchmarks provides historical Pyth prices for both on- and off-chain use."
+      link="/benchmarks"
+    />
+    <ProductBox
+      icon={<EntropyIcon className="w-8 h-8" />}
+      title="Entropy"
+      description="Entropy allows developers to generate secure random numbers on the blockchain."
+    />
+    <ProductBox
+      icon={<ExpressRelayIcon className="w-8 h-8" />}
+      title="Express Relay"
+      description="Express Relayer provides a secure and reliable way to connect your application to the Pyth network."
+      link="/express-relayer"
+    />
+  </div>
+  <div className="grid grid-cols-2 gap-4">
+    <ProductBox
+      icon={<div className="w-8 h-8 bg-purple-500 rounded-full" />}
+      title="Pyth Token"
+      description="Learn more about the Pyth governance token PYTH."
+      link="/pyth-token"
+    />
+    <ProductBox
+      icon={<div className="w-8 h-8 bg-purple-500 rounded-full" />}
+      title="Pyth Metrics"
+      description="See metrics of the network's adoption and growth."
+      link="/metrics"
+    />
+  </div>
+</div>