Feat/128 demos

src/components/Demos.astro

@@ -0,0 +1,90 @@
+---
+import { Tag, Typography } from "@chainlink/blocks"
+import styles from "./Demos.module.css"
+
+export interface Demo {
+  image: string
+  title: string
+  description: string
+  tags: string[]
+  href: string
+}
+
+const demos: Demo[] = [
+  {
+    image: "/images/demos/Demos thumbnails 1.png",
+    title: "Custom Data Feed",
+    description:
+      "See how you can bring your financial data onchain in a variety of different ways by creating a Net Asset Value feed, Proof of Reserve feed, or other custom data feed.",
+    tags: ["CRE", "DATA FEEDS"],
+    href: "/",
+  },
+  {
+    image: "/images/demos/Demos thumbnails 2.png",
+    title: "Delivery vs. Payment (DvP)",
+    description:
+      "Learn how to sell a variety of assets via a Delivery vs. Payment transaction using the Chainlink Runtime Environment (CRE).",
+    tags: ["CRE"],
+    href: "/",
+  },
+  {
+    image: "/images/demos/Demos thumbnails 3.png",
+    title: "Digital Transfer Agent (DTA)",
+    description:
+      "Learn how to invest in a variety of funds via a Digital Transfer Agent (DTA) transaction using the Chainlink Runtime Environment (CRE).",
+    tags: ["CRE"],
+    href: "/",
+  },
+  {
+    image: "/images/demos/Demos thumbnails 4.png",
+    title: "Explore Chainlink",
+    description: "Explore how the Chainlink standard powers tokenization and onchain finance through",
+    tags: ["CRE", "CCIP", "DATA FEEDS"],
+    href: "/",
+  },
+]
+---
+
+<section class={styles.demosSection}>
+  <Typography variant="h2">Demos</Typography>
+  <div class={styles.grid}>
+    {
+      demos.map((demo) => (
+        <a href={demo.href} class={styles.card}>
+          <div class={styles.imageContainer}>
+            <img src={demo.image} alt={demo.title} class={styles.image} />
+          </div>
+          <div class={styles.content}>
+            <div class={styles.body}>
+              <Typography
+                variant="h6"
+                style={{
+                  fontWeight: "500",
+                  marginBottom: "var(--space-4x)",
+                }}
+              >
+                {demo.title}
+              </Typography>
+              <Typography variant="body-s" color="muted">
+                {demo.description}
+              </Typography>
+            </div>
+            <footer class={styles.footer}>
+              <div class={styles.tags}>
+                {demo.tags.map((tag) => (
+                  <Tag size="sm" className={styles.footerTag}>
+                    {tag}
+                  </Tag>
+                ))}
+              </div>
+
+              <div class={styles.footerArrow}>
+                <img src="/assets/icons/upper-right-arrow.svg" alt="" />
+              </div>
+            </footer>
+          </div>
+        </a>
+      ))
+    }
+  </div>
+</section>

src/components/Demos.module.css

@@ -0,0 +1,95 @@
+.demosSection {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6x);
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  border: 1px solid var(--border);
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  padding: var(--space-6x);
+  overflow: hidden;
+  transition: box-shadow 0.2s ease;
+  gap: var(--space-4x);
+
+  &:hover {
+    background-color: var(--muted);
+  }
+
+  &:hover .footerTag {
+    background-color: var(--background);
+  }
+
+  &:hover .footerArrow {
+    opacity: 1;
+  }
+}
+
+.card:not(:last-child) {
+  border-right: 1px solid var(--border);
+}
+
+.imageContainer {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+}
+
+.image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.body {
+  margin-bottom: var(--space-4x);
+}
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4x);
+  flex: 1;
+}
+
+.tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-1x);
+}
+
+.footer {
+  display: flex;
+  justify-content: space-between;
+
+  margin-top: auto;
+  padding-top: var(--space-4x);
+}
+
+.footerArrow {
+  opacity: 0;
+  display: flex;
+  align-items: end;
+}
+@media screen and (max-width: 1024px) {
+  .grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media screen and (max-width: 570px) {
+  .grid {
+    grid-template-columns: repeat(1, 1fr);
+  }
+
+  .card:not(:last-child) {
+    border-bottom: 1px solid var(--border);
+    border-right: none;
+  }
+}

src/components/JourneyCards/JourneyCards.astro

@@ -92,36 +92,39 @@ const columns = [
 ]
 ---
 
-<div class="journey-cards">
-  {
-    columns.map((column) => (
-      <div class="journey-column">
-        <header class="column-header">
-          <Typography variant="h5" className="column-title">
-            {column.title}
-          </Typography>
-        </header>
-        {column.items.map((item) => (
-          <a href={item.href} class="journey-card">
-            <div class="card-content">
-              <Typography variant="body-semi">{item.title}</Typography>
-              <Typography variant="body-s" color="muted">
-                {item.description}
-              </Typography>
-            </div>
-
-            <footer class="journey-footer">
-              <Tag size="sm" className="footer-tag">
-                <Typography variant="code-s">{item.badge}</Typography>
-              </Tag>
-              <img src="/assets/icons/upper-right-arrow.svg" class="footer-icon" />
-            </footer>
-          </a>
-        ))}
-      </div>
-    ))
-  }
-</div>
+<section>
+  <Typography variant="h4" className="section-title">Start your Chainlink journey</Typography>
+  <div class="journey-cards">
+    {
+      columns.map((column) => (
+        <div class="journey-column">
+          <header class="column-header">
+            <Typography variant="h5" className="column-title">
+              {column.title}
+            </Typography>
+          </header>
+          {column.items.map((item) => (
+            <a href={item.href} class="journey-card">
+              <div class="card-content">
+                <Typography variant="body-semi">{item.title}</Typography>
+                <Typography variant="body-s" color="muted">
+                  {item.description}
+                </Typography>
+              </div>
+
+              <footer class="journey-footer">
+                <Tag size="sm" className="footer-tag">
+                  <Typography variant="code-s">{item.badge}</Typography>
+                </Tag>
+                <img src="/assets/icons/upper-right-arrow.svg" class="footer-icon" />
+              </footer>
+            </a>
+          ))}
+        </div>
+      ))
+    }
+  </div>
+</section>
 
 <style>
   .journey-cards {
@@ -165,6 +168,11 @@ const columns = [
     justify-content: space-between;
   }
 
+  .section-title {
+    font-size: 32px;
+    margin-bottom: var(--space-10x);
+  }
+
   .footer {
     padding-top: var(--space-1x);
   }

src/pages/index.astro

@@ -4,6 +4,7 @@ import JourneyCards from "~/components/JourneyCards/JourneyCards.astro"
 import BaseLayout from "~/layouts/BaseLayout.astro"
 
 import * as CONFIG from "../config"
+import Demos from "~/components/Demos.astro"
 import { Typography } from "@chainlink/blocks"
 
 const formattedContentTitle = `${CONFIG.PAGE.titleFallback} | ${CONFIG.SITE.title}`
@@ -19,12 +20,10 @@ const formattedContentTitle = `${CONFIG.PAGE.titleFallback} | ${CONFIG.SITE.titl
         <ProductTabs />
       </div>
     </div>
-
     <div class="wrapper">
-      <div class="section">
-        <Typography variant="h4" className="section-title">Start your Chainlink journey</Typography>
-        <JourneyCards />
-      </div>
+      <JourneyCards />
+
+      <Demos />
 
       <div class="recommended">
         <h4>Recommended reading</h4>
@@ -143,15 +142,6 @@ const formattedContentTitle = `${CONFIG.PAGE.titleFallback} | ${CONFIG.SITE.titl
     background-color: var(--blue-100);
   }
 
-  .section-title {
-    font-size: 32px;
-    margin-bottom: var(--space-10x);
-  }
-
-  .section {
-    margin: 0 var(--space-6x);
-  }
-
   .wrapper {
     display: flex;
     flex-direction: column;
@@ -204,8 +194,12 @@ const formattedContentTitle = `${CONFIG.PAGE.titleFallback} | ${CONFIG.SITE.titl
     }
   }
   @media (min-width: 72em) {
-    .hero,
-    .wrapper {
+    .hero {
+      max-width: min(1200px, calc(100% - 2 * var(--space-16x)));
+      padding: 0;
+    }
+
+    .recommended {
       max-width: min(1200px, calc(100% - 2 * var(--space-16x)));
       padding: 0;
     }