wip: add Hero element to Homepage

Author: aaronbassett

apps/developer-hub/package.json

@@ -23,6 +23,7 @@
     "@phosphor-icons/react": "catalog:",
     "@pythnetwork/component-library": "workspace:*",
     "@react-hookz/web": "catalog:",
+    "@rive-app/react-canvas": "^4.19.1",
     "@solana/web3.js": "catalog:",
     "bs58": "catalog:",
     "clsx": "catalog:",
@@ -37,6 +38,7 @@
     "react-aria": "catalog:",
     "react-dom": "catalog:",
     "recharts": "catalog:",
+    "shiki": "catalog:",
     "superjson": "catalog:",
     "swr": "catalog:",
     "zod": "catalog:",

apps/developer-hub/public/price_feeds_stack.riv

@@ -1,9 +1,14 @@
 
+import { Homepage } from "../components/Homepage/index.js";
+import { HomepageHero } from "../components/HomepageHero/index.js";
+
 const Page = () => {
   return (
-    <div>
-      <h1>Developer Hub</h1>
-    </div>
+    <Homepage>
+      <HomepageHero />
+      
+      {/* Other sections will be added here */}
+    </Homepage>
   );
 };
 

apps/developer-hub/src/app/page.tsx

@@ -0,0 +1,23 @@
+@use "@pythnetwork/component-library/theme";
+
+.homepage {
+  @include theme.max-width;
+
+  align-items: center;
+
+  > section {
+    width: 100%;
+
+    & + section {
+      margin-top: theme.spacing(12);
+
+      @include theme.breakpoint(md) {
+        margin-top: theme.spacing(16);
+      }
+
+      @include theme.breakpoint(lg) {
+        margin-top: theme.spacing(20);
+      }
+    }
+  }
+}

apps/developer-hub/src/components/Homepage/index.module.scss

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+
+import styles from "./index.module.scss";
+
+type Props = {
+  children: ReactNode;
+};
+
+export const Homepage = ({ children }: Props) => {
+  return <div className={styles.homepage}>{children}</div>;
+};

apps/developer-hub/src/components/Homepage/index.tsx

@@ -0,0 +1,59 @@
+@use "@pythnetwork/component-library/theme";
+
+.heroContent {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  @include theme.breakpoint(md) {
+    grid-column: 1 / 2;
+  }
+
+  @include theme.breakpoint(lg) {
+    grid-column: 1 / 3;
+  }
+}
+
+.title {
+  font-size: theme.spacing(6);
+  line-height: 1.2;
+  font-weight: theme.font-weight(bold);
+  margin-bottom: theme.spacing(3);
+  color: theme.color("foreground");
+
+  @include theme.breakpoint(md) {
+    font-size: theme.spacing(8);
+  }
+}
+
+.subtitle {
+  font-size: theme.spacing(4);
+  line-height: 1.5;
+  margin-bottom: theme.spacing(6);
+  color: theme.color("muted");
+
+  @include theme.breakpoint(md) {
+    font-size: theme.spacing(5);
+  }
+}
+
+.ctaGroup {
+  display: flex;
+  flex-direction: column;
+  gap: theme.spacing(4);
+
+  @include theme.breakpoint(sm) {
+    flex-direction: row;
+    align-items: center;
+  }
+}
+
+.secondaryLink {
+  color: theme.color("foreground");
+  text-decoration: none;
+  font-weight: theme.font-weight(medium);
+
+  &:hover {
+    text-decoration: underline;
+  }
+}

apps/developer-hub/src/components/HomepageHero/HeroContent/index.module.scss

@@ -0,0 +1,25 @@
+import { Button } from "@pythnetwork/component-library/Button";
+import { Link } from "@pythnetwork/component-library/Link";
+
+import styles from "./index.module.scss";
+
+export const HeroContent = () => {
+  return (
+    <div className={styles.heroContent}>
+      <h1 className={styles.title}>
+        Real-time price data for your applications
+      </h1>
+      <p className={styles.subtitle}>
+        Access accurate, decentralized price feeds for DeFi, trading, and more
+      </p>
+      <div className={styles.ctaGroup}>
+        <Button variant="primary" size="lg" href="/pyth-core/getting-started">
+          Get started with Price Feeds
+        </Button>
+        <Link href="#product-grid" className={styles.secondaryLink ?? ""}>
+          Explore all products
+        </Link>
+      </div>
+    </div>
+  );
+};

apps/developer-hub/src/components/HomepageHero/HeroContent/index.tsx

@@ -0,0 +1,30 @@
+@use "@pythnetwork/component-library/theme";
+
+.heroGraphic {
+  position: relative;
+  width: 100%;
+  height: 400px;
+  perspective: 1000px;
+
+  @include theme.breakpoint(md) {
+    grid-column: 2 / 3;
+    height: 500px;
+  }
+
+  @include theme.breakpoint(lg) {
+    grid-column: 3 / 4;
+    height: 600px;
+  }
+}
+
+.graphicContainer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: transform 0.5s ease-out;
+
+  &[data-animation-complete] {
+    transform: rotateX(20deg) translateZ(-50px);
+  }
+}

apps/developer-hub/src/components/HomepageHero/HeroGraphic/index.module.scss

@@ -0,0 +1,18 @@
+"use client";
+
+import Rive from "@rive-app/react-canvas";
+
+import styles from "./index.module.scss";
+
+export const HeroGraphic = () => {
+  return (
+    <div className={styles.heroGraphic}>
+      <div className={styles.graphicContainer}>
+        <Rive
+          src="/price_feeds_stack.riv"
+          style={{ width: "500px", height: "700px" }}
+        />
+      </div>
+    </div>
+  );
+};

apps/developer-hub/src/components/HomepageHero/HeroGraphic/index.tsx

@@ -0,0 +1,27 @@
+@use "@pythnetwork/component-library/theme";
+
+.homepageHero {
+  width: 100%;
+  padding: theme.spacing(8) theme.spacing(4);
+  position: relative;
+  overflow: hidden;
+
+  @include theme.breakpoint(md) {
+    padding: theme.spacing(12) theme.spacing(6);
+  }
+}
+
+.container {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: theme.spacing(6);
+  margin: 0 auto;
+
+  @include theme.breakpoint(md) {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  @include theme.breakpoint(lg) {
+    grid-template-columns: 2fr 1fr;
+  }
+}