chore(dev-hub) Design Fixes for Product Cards

Author: aditya520

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

@@ -1,19 +1,20 @@
 @use "@pythnetwork/component-library/theme";
 
 .landing {
-  @include theme.max-width;
+  padding: theme.spacing(4) theme.spacing(2);
 
-  padding: 2rem 1rem;
+  @include theme.max-width;
 
-  @media (width >= 768px) {
-    padding: 3rem 1.5rem;
+  @include theme.breakpoint("md") {
+    padding: theme.spacing(6) theme.spacing(3);
   }
 }
 
 .cards {
   display: flex;
   gap: theme.spacing(10);
   flex-direction: column;
+
   @include theme.breakpoint("md") {
     flex-direction: row;
   }

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

@@ -8,6 +8,35 @@ export const Homepage = () => {
     <div className={styles.landing}>
       <h2>Homepage Landing Page</h2>
       <div className={styles.cards}>
+        <ProductCard
+          title="Pyth Core"
+          description="Stable, secure, and decentralized price data source for DeFi and TradFi applications."
+          features={[
+            { label: "400ms frequency", icon: <Lightning size={12.5} /> },
+            {
+              label: "100+ blockchains",
+              icon: <Lightning size={12.5} />,
+            },
+            {
+              label: "Confidence intervals",
+              icon: <Lightning size={12.5} />,
+            },
+            { label: "2500+ price feeds", icon: <Lightning size={12.5} /> },
+          ]}
+          quickLinks={[
+            {
+              label: "Getting Started",
+              href: "/price-feeds/v1/getting-started",
+            },
+            { label: "API Reference", href: "/openapi/hermes" },
+            {
+              label: "Contract Addresses",
+              href: "/price-feeds/v1/contract-addresses",
+            },
+          ]}
+          buttonLabel="Get started"
+          buttonHref="/price-feeds/v1"
+        />
         <ProductCard
           title="Pyth Pro"
           description="Subscription-based price data for institutions and advanced use cases."
@@ -26,13 +55,13 @@ export const Homepage = () => {
           quickLinks={[
             {
               label: "Get Pyth Pro Access Token",
-              href: "/docs/price-feeds/v2/acquire-an-access-token",
+              href: "/price-feeds/v2/acquire-an-access-token",
             },
-            { label: "Browse Supported Feeds", href: "/docs/price-feeds" },
-            { label: "Error Codes", href: "/docs/price-feeds" },
+            { label: "Browse Supported Feeds", href: "/price-feeds" },
+            { label: "Error Codes", href: "/price-feeds" },
           ]}
           buttonLabel="Get started"
-          buttonHref="/docs/price-feeds"
+          buttonHref="/price-feeds"
         />
         <ProductCard
           title="Entropy"
@@ -45,13 +74,13 @@ export const Homepage = () => {
           quickLinks={[
             {
               label: "Getting Started",
-              href: "/docs/entropy/create-your-first-entropy-app",
+              href: "/entropy/create-your-first-entropy-app",
             },
-            { label: "Protocol Design", href: "/docs/entropy/protocol-design" },
-            { label: "Examples", href: "/docs/entropy/examples" },
+            { label: "Protocol Design", href: "/entropy/protocol-design" },
+            { label: "Examples", href: "/entropy/examples" },
           ]}
           buttonLabel="Get started"
-          buttonHref="/docs/entropy"
+          buttonHref="/entropy"
         />
       </div>
     </div>

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

@@ -12,50 +12,26 @@
 .content {
   display: flex;
   flex-direction: column;
-  gap: 2rem; // 32px
+  gap: theme.spacing(8);
   height: 100%;
   flex: 1;
-  overflow: visible;
 }
 
 .mainContent {
   display: flex;
   flex-direction: column;
-  gap: 3rem;
-  padding-top: 0;
-  padding-bottom: 0;
+  gap: theme.spacing(12);
   flex: 1;
-  overflow: visible;
 }
 
 .header {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem; // 12px
+  gap: theme.spacing(3);
   min-height: 7rem; // 88px - fixed height to keep FEATURES at consistent position
   height: 7rem; // 88px - fixed height
 }
 
-.decorativeIcon {
-  position: absolute;
-  right: 1.5rem; // 24px from right
-  top: 1.5rem;
-  pointer-events: none;
-  z-index: 0;
-}
-
-.barChart {
-  position: relative;
-  width: 30px; // Space for all bars
-  height: 32px;
-}
-
-.bar {
-  position: absolute;
-  width: 3px;
-  border-radius: 1.5px;
-}
-
 .title {
   margin: 0;
   font-size: 1.875rem; // 30px
@@ -64,7 +40,6 @@
   letter-spacing: -0.03em; // -0.9px
   color: var(--color-fd-foreground);
   white-space: nowrap;
-  overflow: visble;
   text-overflow: ellipsis;
   flex-shrink: 0;
 }
@@ -77,7 +52,6 @@
   letter-spacing: -0.01em; // -0.16px
   color: var(--color-fd-foreground);
   opacity: 0.9;
-  overflow: visible;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   line-clamp: 3;
@@ -88,16 +62,15 @@
 .featuresSection {
   display: flex;
   flex-direction: column;
-  gap: 1.5rem; // 24px
+  gap: theme.spacing(6);
   min-height: 12rem;
   max-height: 12rem;
-  overflow: visible;
 }
 
 .quickLinksSection {
   display: flex;
   flex-direction: column;
-  gap: 1.5rem;
+  gap: theme.spacing(6);
 }
 
 .sectionLabel {
@@ -115,19 +88,19 @@
 .features {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem; // 8px
+  gap: theme.spacing(2);
 }
 
 .featureItem {
   position: relative;
   display: flex;
   align-items: center;
-  gap: 0.5rem; // 8px
+  gap: theme.spacing(2);
   padding: 0.3125rem 0.8125rem 0.3125rem 0.5rem;
-  border: 1px solid var(--color-fd-border, #ddd4d4);
+  border: 1px solid var(--color-fd-border);
   border-radius: 1.3125rem; // 21px
   background-color: var(--color-fd-card);
-  justify-content: left;
+  justify-content: flex-start;
   box-shadow: 0 0 4px 0 rgb(255 255 255 / 25%) inset;
 }
 
@@ -161,7 +134,7 @@
 .quickLinks {
   display: flex;
   flex-direction: column;
-  gap: 1rem; // 16px
+  gap: theme.spacing(4);
 }
 
 .quickLink {
@@ -187,17 +160,15 @@
   display: flex;
   align-items: center;
   justify-content: flex-start;
+}
 
-  :global(button) {
-    padding: 0.625rem; // 10px
-    border-radius: 0.5rem; // 8px
-    background-color: #27253d;
-    color: #f8f9fc;
-    font-size: 1rem; // 16px
-    font-weight: 500;
-    line-height: 1.25; // 20px
-    letter-spacing: -0.01em; // -0.16px
-    width: auto;
-    min-width: auto;
-  }
+.button {
+  padding: 0.625rem; // 10px
+  border-radius: 0.5rem; // 8px
+  background-color: #27253d;
+  color: #f8f9fc;
+  font-size: 1rem; // 16px
+  font-weight: 500;
+  line-height: 1.25; // 20px
+  letter-spacing: -0.01em; // -0.16px
 }

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

@@ -101,7 +101,15 @@ export function ProductCard({
 
         {buttonLabel && (
           <div className={styles.buttonWrapper}>
-            <Button onPress={handleButtonClick} size="md" variant="primary">
+            <Button
+              onClick={(e) => {
+                e.preventDefault();
+                handleButtonClick();
+              }}
+              size="md"
+              variant="primary"
+              className={clsx(styles.button, className)}
+            >
               {buttonLabel}
             </Button>
           </div>