feat(design): complete redesign of website

Redesign the website with a more modern look.

src/components/AboutSection.astro

@@ -0,0 +1,96 @@
+---
+interface Props {
+  introduction: string;
+  summary: string;
+  about: string;
+  license: string;
+}
+
+const { introduction, summary, about, license } = Astro.props;
+---
+
+<section id="about" class="py-20 sm:py-28">
+  <div class="section-container">
+    <div class="max-w-3xl mx-auto">
+      <!-- Section header -->
+      <div class="mb-12 text-center">
+        <h2 class="text-3xl sm:text-4xl mb-4">About Common-Flow</h2>
+        <p
+          class="text-lg text-[var(--color-text-secondary)]
+                 dark:text-[var(--color-dark-text-secondary)]"
+        >
+          A practical git workflow that combines the best of GitHub Flow with
+          versioned releases
+        </p>
+      </div>
+
+      <!-- Introduction -->
+      <div class="prose-spec mb-12">
+        <div class="spec-content" set:html={introduction} />
+      </div>
+
+      <!-- Summary as feature cards -->
+      <div class="mb-16">
+        <h3
+          class="text-xl font-display font-semibold mb-6
+                 text-[var(--color-text-primary)]
+                 dark:text-[var(--color-dark-text-primary)]"
+        >
+          Key Principles
+        </h3>
+        <div class="spec-content prose-spec" set:html={summary} />
+      </div>
+
+      <!-- Author & License -->
+      <div
+        class="pt-8 border-t border-[var(--color-border)]
+               dark:border-[var(--color-dark-border)]"
+      >
+        <div class="grid sm:grid-cols-2 gap-8">
+          <div>
+            <h4
+              class="text-sm font-semibold uppercase tracking-wider mb-3
+                     text-[var(--color-text-muted)]
+                     dark:text-[var(--color-dark-text-muted)]"
+            >
+              Author
+            </h4>
+            <div
+              class="spec-content text-[var(--color-text-secondary)]
+                     dark:text-[var(--color-dark-text-secondary)]"
+              set:html={about}
+            />
+          </div>
+          <div>
+            <h4
+              class="text-sm font-semibold uppercase tracking-wider mb-3
+                     text-[var(--color-text-muted)]
+                     dark:text-[var(--color-dark-text-muted)]"
+            >
+              License
+            </h4>
+            <div
+              class="spec-content text-[var(--color-text-secondary)]
+                     dark:text-[var(--color-dark-text-secondary)]"
+              set:html={license}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<style>
+  .spec-content :global(p:last-child) {
+    margin-bottom: 0;
+  }
+
+  .spec-content :global(a) {
+    color: var(--color-accent);
+  }
+
+  .spec-content :global(a:hover) {
+    color: var(--color-accent-light);
+  }
+</style>