First cut

src/components/sections/FeaturesSection.astro

@@ -0,0 +1,57 @@
+---
+interface FeatureItem {
+  title: string;
+  description: string;
+  icon?: string;
+}
+interface Props {
+  title: string;
+  items: FeatureItem[];
+}
+const { title, items } = Astro.props;
+---
+<section class="features">
+  <div class="container">
+    <h2>{title}</h2>
+    <div class="features-grid">
+      {items.map((item) => (
+        <div class="feature-card">
+          <h3>{item.title}</h3>
+          <p>{item.description}</p>
+        </div>
+      ))}
+    </div>
+  </div>
+</section>
+
+<style>
+  .features h2 {
+    font-family: var(--font-display);
+    font-size: 1.8rem;
+    color: var(--color-primary-dark);
+    margin-bottom: 2rem;
+  }
+  .features-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 1.5rem;
+  }
+  .feature-card {
+    padding: 1.5rem;
+    background: white;
+    border: 1px solid var(--color-border);
+    border-radius: 6px;
+  }
+  .feature-card h3 {
+    font-family: var(--font-display);
+    font-size: 1.1rem;
+    color: var(--color-primary);
+    margin-bottom: 0.5rem;
+  }
+  .feature-card p {
+    font-size: 0.92rem;
+    color: var(--color-text-muted);
+    line-height: 1.65;
+    font-weight: 300;
+  }
+</style>