feat: start landing page sections

apps/developer-hub/src/app/(homepage)/page.tsx

@@ -1,7 +1,5 @@
-// export { Homepage as default } from "../../components/Pages/Homepage";
-
-import { DeveloperHubPreview } from "../../components/Pages/TempPage"
+import { DeveloperHubPreview } from "../../components/Pages/TempPage";
 
 export default function Page() {
-  return <DeveloperHubPreview />
-}
+  return <DeveloperHubPreview />;
+}

apps/developer-hub/src/components/Pages/TempPage/index.module.scss

@@ -17,7 +17,6 @@
   margin: 0;
 }
 
-
 .preview {
   display: flex;
   flex-direction: column;
@@ -31,7 +30,8 @@
   background: linear-gradient(
     180deg,
     theme.color("background", "primary") 0%,
-    color-mix(in srgb, theme.color("background", "secondary") 70%, transparent) 100%
+    color-mix(in srgb, theme.color("background", "secondary") 70%, transparent)
+      100%
   );
 }
 
@@ -75,35 +75,6 @@
   padding: theme.spacing(20) theme.spacing(4);
 }
 
-.sectionProductsContent {
-  margin: 0 auto;
-  max-width: 1400px;
-  display: flex;
-  flex-direction: column;
-  gap: theme.spacing(2);
-}
-
-.sectionHeader {
-  display: flex;
-  flex-direction: column;
-  gap: theme.spacing(2);
-  color: var(--color-fd-foreground);
-}
-
-.sectionHeaderTitle {
-  margin: 0;
-  font-size: 1.5625rem;
-  font-weight: 600;
-  letter-spacing: -0.03em;
-}
-
-.sectionHeaderSubtitle {
-  margin: 0;
-  font-size: 1.25rem;
-  font-weight: 400;
-  opacity: 0.55;
-}
-
 .productsGrid {
   display: grid;
   gap: theme.spacing(8);

apps/developer-hub/src/components/Pages/TempPage/index.tsx

@@ -1,21 +1,19 @@
-import { Cards, Card } from "fumadocs-ui/components/card";
-
 import styles from "./index.module.scss";
+import ResourcesForBuildersImage from "./resources-for-builders.svg";
+import { Section } from "./section";
+import { SectionCards, SectionCard } from "./section-card";
+import SignalImage from "./signal.svg";
 import { ProductCard } from "../../ProductCard";
 
-
-
 export function DeveloperHubPreview() {
   return (
     <div className={styles.preview}>
       <section className={styles.sectionHero}>
         <div className={styles.sectionHeroContent}>
           <div className={styles.heroCopy}>
-            <h1 className={styles.heroTitle}>
-              Developer Hub
-            </h1>
+            <h1 className={styles.heroTitle}>Developer Hub</h1>
             <p className={styles.heroSubtitle}>
-            Integrate with the global price layer.
+              Integrate with the global price layer.
             </p>
           </div>
         </div>
@@ -46,36 +44,83 @@ export function DeveloperHubPreview() {
         </div>
       </section>
 
-      <GradientDivider />
-
-      <section className={styles.sectionProducts}>
-        <div className={styles.sectionProductsContent}>
-          <header className={styles.sectionHeader}>
-            <p className={styles.sectionHeaderTitle}>AdditionalResources</p>
-          </header>
-          <Cards>
-            <Card title="Network Metrics" />
-            <Card title="OIS"/>
-            <Card title="Pyth Token"/>
-            <Card title="Whitepaper"/>
-            <Card title="Security"/>
-          </Cards>
-        </div>
-      </section>
+      <Section
+        title="Resources for builders"
+        subtitle="Get the most from Pyth Network"
+        isHighlight
+        image={<ResourcesForBuildersImage />}
+      >
+        <SectionCards>
+          <SectionCard
+            title="Grants"
+            description="Handles most of the logic, including document search, content source adapters, and Markdown extensions."
+            url="/price-feeds/pro"
+            urlLabel="Link"
+            image={<SignalImage />}
+          />
+          <SectionCard
+            title="Grants"
+            description="Handles most of the logic, including document search, content source adapters, and Markdown extensions."
+            url="/price-feeds/pro"
+            urlLabel="Link"
+            image={<SignalImage />}
+          />
+          <SectionCard
+            title="Grants"
+            description="Handles most of the logic, including document search, content source adapters, and Markdown extensions."
+            url="/price-feeds/pro"
+            urlLabel="Link"
+            image={<SignalImage />}
+          />
+        </SectionCards>
+      </Section>
+      <Section
+        title="Resources for builders"
+        subtitle="Get the most from Pyth Network"
+      >
+        <SectionCards>
+          <SectionCard
+            title="Pyth Pro"
+            description="Subscription-based price data for institutions and advanced use cases."
+            url="/price-feeds/pro"
+            urlLabel="Link"
+            image={<SignalImage />}
+          />
+          <SectionCard
+            title="Pyth Pro"
+            description="Subscription-based price data for institutions and advanced use cases."
+            url="/price-feeds/pro"
+            urlLabel="Link"
+            image={<SignalImage />}
+          />
+          <SectionCard
+            title="Pyth Pro"
+            description="Subscription-based price data for institutions and advanced use cases."
+            url="/price-feeds/pro"
+            urlLabel="Link"
+            image={<SignalImage />}
+          />
+          <SectionCard
+            title="Pyth Pro"
+            description="Subscription-based price data for institutions and advanced use cases."
+            url="/price-feeds/pro"
+            urlLabel="Link"
+            image={<SignalImage />}
+          />
+        </SectionCards>
+      </Section>
 
+      <GradientDivider />
 
+      <p>footer...</p>
     </div>
   );
 }
 
-
 function GradientDivider() {
   return <div className={styles.gradientDivider} role="presentation" />;
 }
 
-
-
-
 const products: ProductCardConfig[] = [
   {
     title: "Pyth Pro",
@@ -145,8 +190,6 @@ const products: ProductCardConfig[] = [
   },
 ];
 
-
-
 type ProductCardConfig = {
   title: string;
   description: string;
@@ -156,6 +199,3 @@ type ProductCardConfig = {
   features: { label: string }[];
   quickLinks: { label: string; href: string }[];
 };
-
-
-

apps/developer-hub/src/components/Pages/TempPage/section-card.module.scss

@@ -0,0 +1,42 @@
+@use "@pythnetwork/component-library/theme";
+
+.sectionCard {
+  display: flex;
+  flex-direction: column;
+  gap: theme.spacing(2);
+  padding: theme.spacing(6);
+  border: 1px solid theme.color("border");
+  border-radius: theme.border-radius("2xl");
+  background-color: theme.color("background", "secondary");
+  flex: 1;
+  .sectionCardHeader {
+    display: flex;
+    flex-direction: row;
+    gap: theme.spacing(2);
+    align-items: flex-end;
+    justify-content: space-between;
+    .sectionCardTitle {
+      @include theme.text("lg", "medium");
+    }
+  }
+  .sectionCardDescription {
+    line-height: 140%;
+    color: light-dark(
+      theme.pallette-color("stone", 500),
+      theme.pallette-color("steel", 400)
+    );
+  }
+  .sectionCardUrl {
+    font-weight: theme.font-weight("medium");
+    text-decoration: underline;
+  }
+}
+
+.sectionCards {
+  display: flex;
+  gap: theme.spacing(10);
+  flex-direction: column;
+  @include theme.breakpoint("lg") {
+    flex-direction: row;
+  }
+}

apps/developer-hub/src/components/Pages/TempPage/section-card.tsx

@@ -0,0 +1,35 @@
+import Link from "next/link";
+import type { ReactNode } from "react";
+
+import styles from "./section-card.module.scss";
+
+export const SectionCard = ({
+  title,
+  description,
+  urlLabel,
+  url,
+  image,
+}: {
+  title: string;
+  description: string;
+  urlLabel?: string;
+  url?: string;
+  image?: ReactNode;
+}) => (
+  <div className={styles.sectionCard}>
+    <div className={styles.sectionCardHeader}>
+      <h3 className={styles.sectionCardTitle}>{title}</h3>
+      {image}
+    </div>
+    <p className={styles.sectionCardDescription}>{description}</p>
+    {url && urlLabel && (
+      <Link href={url} className={styles.sectionCardUrl}>
+        {urlLabel}
+      </Link>
+    )}
+  </div>
+);
+
+export const SectionCards = ({ children }: { children: ReactNode }) => (
+  <div className={styles.sectionCards}>{children}</div>
+);

apps/developer-hub/src/components/Pages/TempPage/section.module.scss

@@ -0,0 +1,34 @@
+@use "@pythnetwork/component-library/theme";
+
+.section {
+  padding: theme.spacing(34) theme.spacing(4);
+  .sectionContent {
+    margin: 0 auto;
+    width: 100%;
+    max-width: theme.$max-width;
+  }
+  .sectionHeader {
+    display: flex;
+    gap: theme.spacing(2);
+    align-items: center;
+    justify-content: space-between;
+    padding-bottom: theme.spacing(12);
+  }
+  .sectionHeaderTitle {
+    @include theme.text("3xl", "medium");
+    color: theme.color("heading");
+    margin-top: 0;
+    margin-bottom: theme.spacing(4);
+  }
+  .sectionHeaderSubtitle {
+    @include theme.text("3xl", "medium");
+    color: light-dark(
+      theme.pallette-color("stone", 500),
+      theme.pallette-color("steel", 400)
+    );
+  }
+
+  &[data-highlight] {
+    background-color: theme.color("background", "secondary");
+  }
+}

apps/developer-hub/src/components/Pages/TempPage/section.tsx

@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+
+import styles from "./section.module.scss";
+
+export const Section = ({
+  title,
+  subtitle,
+  image,
+  isHighlight,
+  children,
+}: {
+  title: string;
+  subtitle: string;
+  image?: ReactNode;
+  isHighlight?: boolean;
+  children: React.ReactNode;
+}) => (
+  <section data-highlight={isHighlight} className={styles.section}>
+    <div className={styles.sectionContent}>
+      <div className={styles.sectionHeader}>
+        <div>
+          <h2 className={styles.sectionHeaderTitle}>{title}</h2>
+          <p className={styles.sectionHeaderSubtitle}>{subtitle}</p>
+        </div>
+        {image}
+      </div>
+      {children}
+    </div>
+  </section>
+);

apps/developer-hub/src/components/Pages/TempPage/signal.svg

@@ -0,0 +1,12 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M37.2283 42.4857L60.7141 40.7143L38.9998 19L37.2283 42.4857Z" fill="#0F0B0B"/>
+<path d="M42.9427 36.7714L66.4284 34.9999L44.7141 13.2856L42.9427 36.7714Z" stroke="#0F0B0B" stroke-width="0.909091" stroke-miterlimit="10"/>
+<path d="M30.9427 49.3428L54.4284 47.5713L32.7141 25.8571L30.9427 49.3428Z" fill="url(#paint0_linear_176_704)"/>
+<path d="M22.1427 66.7143C26.8766 66.7143 30.7141 62.8767 30.7141 58.1428C30.7141 53.409 26.8766 49.5714 22.1427 49.5714C17.4088 49.5714 13.5713 53.409 13.5713 58.1428C13.5713 62.8767 17.4088 66.7143 22.1427 66.7143Z" fill="#0F0B0B"/>
+<defs>
+<linearGradient id="paint0_linear_176_704" x1="30.9322" y1="37.5967" x2="54.4284" y2="37.5967" gradientUnits="userSpaceOnUse">
+<stop stop-color="#835FFF"/>
+<stop offset="1" stop-color="#FF917E"/>
+</linearGradient>
+</defs>
+</svg>