feat(dev-hub) Landing page improvements

apps/developer-hub/content/docs/price-feeds/index.mdx

@@ -27,7 +27,7 @@ Pyth offers two main versions of price feeds, each optimized for different use c
     description="Subscription-based price data for institutions and advanced use cases. Previously known as Lazer."
     features={[
       { label: "Ultra-low latency" },
-      { label: "Crypto, equities, and indexes" },
+      { label: "Crypto, Equities & Indexes" },
       { label: "Customizable channels and latency" },
       { label: "Dedicated support" },
     ]}

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

@@ -1,26 +1,10 @@
 @use "@pythnetwork/component-library/theme";
 
-.heroTitle {
-  @include theme.text("5xl", "semibold");
-
-  line-height: 115%;
-  letter-spacing: theme.letter-spacing("tight");
-  color: theme.color("heading");
-  margin: 0;
-}
-
-.heroSubtitle {
-  @include theme.text("xl", "normal");
-
-  line-height: 140%;
-  color: theme.color("paragraph");
-  margin: 0;
-}
 
 .preview {
   display: flex;
   flex-direction: column;
-  gap: theme.spacing(24);
+  gap: theme.spacing(20);
   background-color: var(--color-fd-background);
 }
 
@@ -37,7 +21,6 @@
 
 .sectionHeroContent {
   @include theme.max-width;
-
   display: flex;
   flex-direction: column;
   gap: theme.spacing(10);
@@ -46,10 +29,10 @@
 
   @include theme.breakpoint("lg") {
     flex-direction: row;
-    align-items: center;
+    align-items: flex-start;
     gap: theme.spacing(18);
-    padding-top: theme.spacing(24);
-    padding-bottom: theme.spacing(24);
+    padding-left: theme.spacing(20);
+    padding-right: theme.spacing(20);
   }
 }
 
@@ -66,179 +49,62 @@
   }
 }
 
-.gradientDivider {
-  height: 12px;
-  background: linear-gradient(90deg, var(--color-fd-ring) 0%, #ffad81 100%);
-}
-
-.sectionProducts {
-  padding: theme.spacing(20) theme.spacing(4);
-}
 
-.productsGrid {
-  display: grid;
-  gap: theme.spacing(8);
-
-  @include theme.breakpoint("lg") {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}
+.heroTitle {
+  @include theme.text("5xl", "semibold");
 
-.productsCardWrapper {
-  position: relative;
+  line-height: 115%;
+  letter-spacing: theme.letter-spacing("tight");
+  color: theme.color("heading");
+  margin: 0;
 }
 
-.productBadge {
-  position: absolute;
-  top: -12px;
-  left: 20px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 4px 12px;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  letter-spacing: 0.02em;
-  border-radius: 9999px;
-  color: var(--color-fd-card);
-  z-index: 1;
-}
+.heroSubtitle {
+  @include theme.text("2xl", "normal");
 
-.productBadgePurple {
-  background: color-mix(in srgb, var(--color-fd-ring) 70%, #141125);
+  line-height: 140%;
+  color: theme.color("paragraph");
+  margin: 0;
 }
 
-.productBadgeOrange {
-  background: linear-gradient(135deg, #f9771d, #742be1);
-}
 
-.productGlyph {
-  position: absolute;
-  top: 18px;
-  right: 38px;
-  width: 40px;
-  height: 40px;
-  border-radius: 12px;
-  background: linear-gradient(180deg, rgb(0 0 0 / 6%), transparent);
-  mask: linear-gradient(180deg, black 0%, transparent 100%);
+.sectionProducts {
+  padding: theme.spacing(10) theme.spacing(20) theme.spacing(10) theme.spacing(20);
 }
 
-.productGlyphPurple {
-  background: linear-gradient(
-    180deg,
-    rgb(122 84 255 / 90%),
-    rgb(247 119 29 / 90%)
-  );
-}
 
-.productGlyphOrange {
-  background: linear-gradient(
-    180deg,
-    rgb(247 119 29 / 90%),
-    rgb(122 84 255 / 90%)
-  );
-}
 
-.sectionResources {
-  padding: theme.spacing(20) theme.spacing(4);
-  background-color: color-mix(in srgb, var(--color-fd-card) 90%, transparent);
+.sectionHeaderTitle {
+  @include theme.text("3xl", "medium");
+  color: theme.color("heading");
+  margin-bottom: theme.spacing(2);
 }
 
-.sectionResourcesContent {
-  margin: 0 auto;
-  max-width: 1400px;
-  display: flex;
-  flex-direction: column;
-  gap: theme.spacing(12);
+.sectionHeaderSubtitle {
+  @include theme.text("xl", "normal");
+  color: light-dark(
+    theme.pallette-color("stone", 500),
+    theme.pallette-color("steel", 400)
+  );
+  margin-top: theme.spacing(4);
+  margin-bottom: theme.spacing(12);
 }
 
-.sectionResourcesIllustrated .resourcesLayout {
+.productsGrid {
   display: grid;
-  gap: theme.spacing(10);
+  gap: theme.spacing(8);
 
   @include theme.breakpoint("lg") {
-    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
-  }
-}
-
-.resourcesCards {
-  display: grid;
-  gap: theme.spacing(6);
-}
-
-.resourcesIllustration {
-  margin: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  img {
-    width: min(100%, 320px);
-    height: auto;
-  }
-}
-
-.sectionResourcesDense .resourcesRow {
-  display: grid;
-  gap: theme.spacing(6);
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-}
-
-.resourceCard {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  gap: theme.spacing(6);
-  padding: theme.spacing(6);
-  background-color: var(--color-fd-card);
-  border: 1px solid var(--color-fd-border);
-  border-radius: theme.border-radius("2xl");
-  min-height: 220px;
-}
-
-.resourceCardHeader {
-  display: flex;
-  align-items: flex-start;
-  gap: theme.spacing(4);
-}
-
-.resourceIcon {
-  width: 52px;
-  height: 52px;
-  border-radius: 16px;
-  background: color-mix(in srgb, var(--color-fd-muted) 50%, transparent);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 }
 
-.resourceTitle {
-  margin: 0;
-  font-size: 1.1875rem;
-  font-weight: 600;
-  color: var(--color-fd-foreground);
+.productsCardWrapper {
+  position: relative;
 }
 
-.resourceDescription {
-  margin: theme.spacing(2) 0 0;
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.6;
-  color: color-mix(in srgb, var(--color-fd-foreground) 70%, transparent);
-}
 
-.resourceLink {
-  align-self: flex-start;
-  font-size: 1rem;
-  font-weight: 500;
-  color: var(--color-fd-foreground);
-  text-decoration: underline;
-  text-decoration-skip-ink: none;
-  text-underline-position: from-font;
+.gradientDivider {
+  height: 12px;
+  background: linear-gradient(90deg, var(--color-fd-ring) 0%, #ffad81 100%);
 }

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

@@ -20,13 +20,10 @@ export function DeveloperHubPreview() {
       </section>
 
       <section className={styles.sectionProducts}>
-        <div className={styles.sectionProductsContent}>
-          <header className={styles.sectionHeader}>
             <p className={styles.sectionHeaderTitle}>Products</p>
             <p className={styles.sectionHeaderSubtitle}>
-              Integrate with the global price layer.
+            Connect to the global market data and randomness layer.
             </p>
-          </header>
           <div className={styles.productsGrid}>
             {products.map((product: ProductCardConfig) => (
               <div key={product.title} className={styles.productsCardWrapper}>
@@ -41,32 +38,31 @@ export function DeveloperHubPreview() {
               </div>
             ))}
           </div>
-        </div>
       </section>
 
       <Section
-        title="Resources for builders"
-        subtitle="Get the most from Pyth Network"
+        title="Additional Resources"
+        subtitle="Explore the Pyth Network"
         isHighlight
         image={<ResourcesForBuildersImage />}
       >
         <SectionCards>
           <SectionCard
-            title="Grants"
+            title="Pyth Token"
             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"
+            title="Oracle Integrity Staking"
             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"
+            title="Pyth Metrics"
             description="Handles most of the logic, including document search, content source adapters, and Markdown extensions."
             url="/price-feeds/pro"
             urlLabel="Link"
@@ -111,8 +107,6 @@ export function DeveloperHubPreview() {
       </Section>
 
       <GradientDivider />
-
-      <p>footer...</p>
     </div>
   );
 }
@@ -125,10 +119,8 @@ const products: ProductCardConfig[] = [
   {
     title: "Pyth Pro",
     description:
-      "Subscription-based price data for institutions and advanced use cases.",
+      "Subscription-based price data for institutions and advanced use cases. Previously known as Lazer.",
     href: "/price-feeds/pro",
-    badgeLabel: "Price Feeds",
-    badgeVariant: "Purple",
     features: [
       { label: "Ultra-low latency" },
       { label: "Crypto, Equities & Indexes" },
@@ -141,16 +133,14 @@ const products: ProductCardConfig[] = [
         href: "/price-feeds/pro/access-token",
       },
       { label: "Browse Supported Feeds", href: "/price-feeds/pro/price-feeds" },
-      { label: "Error Codes", href: "/price-feeds/pro/error-codes" },
+      { label: "Pricing", href: "https://www.pyth.network/pricing" },
     ],
   },
   {
     title: "Pyth Core",
     description:
-      "Subscription-based price data for institutions and advanced use cases.",
+      "Decentralized price feeds for DeFi and TradFi builders with deterministic on-chain delivery.",
     href: "/price-feeds/core",
-    badgeLabel: "Price Feeds",
-    badgeVariant: "Purple",
     features: [
       { label: "400ms update frequency" },
       { label: "100+ blockchains" },
@@ -159,33 +149,30 @@ const products: ProductCardConfig[] = [
     ],
     quickLinks: [
       {
-        label: "Get Pyth Pro Access Token",
-        href: "/price-feeds/pro/access-token",
+        label: "Supported Blockchains",
+        href: "/price-feeds/core/contract-addresses",
       },
-      { label: "Browse Supported Feeds", href: "/price-feeds/pro/price-feeds" },
-      { label: "Error Codes", href: "/price-feeds/pro/error-codes" },
+      { label: "Browse Supported Feeds", href: "/price-feeds/core/price-feeds" },
+      { label: "API Reference", href: "/price-feeds/core/api-reference" },
     ],
   },
   {
-    title: "Secure Randomness",
+    title: "Entropy",
     description:
-      "Subscription-based price data for institutions and advanced use cases.",
+      "Secure, Verifiable Random Number Generator for EVM-based smart contracts.",
     href: "/entropy",
-    badgeLabel: "Entropy",
-    badgeVariant: "Orange",
     features: [
-      { label: "400ms update frequency" },
-      { label: "100+ blockchains" },
-      { label: "Supports Pull and Push updates" },
-      { label: "Decentralized Oracle" },
+      { label: "On-chain randomness" },
+      { label: "Verifiable results" },
+      { label: "Pay in native token" },
     ],
     quickLinks: [
       {
-        label: "Get Pyth Pro Access Token",
-        href: "/price-feeds/pro/access-token",
+        label: "Chainlist",
+        href: "/entropy/chainlist",
       },
-      { label: "Browse Supported Feeds", href: "/price-feeds/pro/price-feeds" },
-      { label: "Error Codes", href: "/price-feeds/pro/error-codes" },
+      { label: "Protocol Design", href: "/entropy/protocol-design" },
+      { label: "Entropy Explorer", href: "https://entropy-explorer.pyth.network/" },
     ],
   },
 ];
@@ -194,8 +181,6 @@ type ProductCardConfig = {
   title: string;
   description: string;
   href: string;
-  badgeLabel: string;
-  badgeVariant: "Purple" | "Orange";
   features: { label: string }[];
   quickLinks: { label: string; href: string }[];
 };

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

@@ -1,7 +1,9 @@
 @use "@pythnetwork/component-library/theme";
 
 .section {
-  padding: theme.spacing(34) theme.spacing(4);
+  padding: theme.spacing(34) 0;
+  padding-left: theme.spacing(20);
+  padding-right: theme.spacing(20);
   .sectionContent {
     margin: 0 auto;
     width: 100%;