Talks Tutorials grid and Sessions at the same time (#1692)

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

Author: nikoshell

src/components/FeatureCardGrid.astro

@@ -0,0 +1,95 @@
+---
+interface Props {
+  items: {
+    title: string;
+    description?: string;
+    href?: string;
+    highlight?: boolean;
+  }[];
+  columns?: number;
+}
+
+const { items, columns = 4 } = Astro.props;
+---
+
+<div
+  class="feature-card-grid"
+  style={`--grid-columns: ${columns}`}
+>
+  {items.map((item) =>
+    item.href ? (
+      <a
+        href={item.href}
+        class:list={["feature-card", item.highlight && "feature-card--highlight"]}
+      >
+        <strong class="feature-card-title">{item.title}</strong>
+        {item.description && <span class="feature-card-desc">{item.description}</span>}
+      </a>
+    ) : (
+      <div class="feature-card">
+        <strong class="feature-card-title">{item.title}</strong>
+        {item.description && <span class="feature-card-desc">{item.description}</span>}
+      </div>
+    )
+  )}
+</div>
+
+<style is:global>
+  .feature-card-grid {
+    display: grid;
+    grid-template-columns: repeat(var(--grid-columns, 4), 1fr);
+    gap: 6px;
+    list-style: none;
+    padding: 0;
+    margin: 0 0 2.5rem;
+  }
+
+  .feature-card {
+    display: flex;
+    flex-direction: column;
+    padding: 1.6rem;
+    font-size: 1.2rem;
+    color: var(--color-text-secondary);
+    line-height: 1.6;
+    border: 1px solid var(--color-border);
+    border-radius: 4px;
+    text-decoration: none;
+    transition: border-color 0.2s;
+  }
+
+  .feature-card:hover {
+    border-color: var(--color-accent-themed);
+    text-decoration: none;
+  }
+
+  .feature-card-title {
+    display: block;
+    font-size: 1.3rem;
+    font-weight: 800;
+    color: var(--color-text);
+    margin-bottom: 0.4rem;
+  }
+
+  .feature-card-desc {
+    font-size: 1.2rem;
+    color: var(--color-text-secondary);
+  }
+
+  .feature-card--highlight {
+    outline: 2px solid var(--color-accent-themed);
+    outline-offset: -1px;
+    background: var(--color-surface-medium);
+  }
+
+  @media (max-width: 900px) {
+    .feature-card-grid {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  @media (max-width: 500px) {
+    .feature-card-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>