Unify layout container via Tailwind @Utility container

Replace all max-w-[1200px] mx-auto px-6 patterns with a single
container utility class defined once in index.css.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: phucbm

website/src/components/CTABanner.tsx

@@ -2,11 +2,11 @@ import { GITHUB, RELEASES } from '../constants'
 
 export default function CTABanner() {
   return (
-    <section id="cta" className="border-b-2 border-ink py-[80px] px-6 bg-primary">
-      <div className="max-w-[1200px] mx-auto flex flex-col md:flex-row justify-between items-start md:items-center gap-8">
+    <section id="cta" className="border-b-2 border-ink py-[80px] bg-primary">
+      <div className="container flex flex-col md:flex-row justify-between items-start md:items-center gap-8">
         <div>
           <h2 className="font-display text-[clamp(40px,6vw,80px)] leading-[0.88] tracking-[-0.04em] uppercase text-paper mb-4">
-            STOP<br />GUESSING.
+            KNOW YOUR<br />LIMITS.
           </h2>
           <p className="font-mono text-xs text-paper/70 tracking-[0.08em] uppercase">
             Free download &nbsp;·&nbsp; No signup &nbsp;·&nbsp; Open source

website/src/components/FAQ.tsx

@@ -2,8 +2,8 @@ import { FAQS } from '../data'
 
 export default function FAQ() {
   return (
-    <section id="faq" className="border-b-2 border-ink py-[72px] px-6">
-      <div className="max-w-[1200px] mx-auto">
+    <section id="faq" className="border-b-2 border-ink py-[72px]">
+      <div className="container">
         <div className="flex justify-between items-baseline mb-9 border-b border-ink/20 pb-[14px]">
           <h2 className="font-display text-[clamp(26px,4vw,44px)] tracking-[-0.03em] uppercase text-ink">FAQ</h2>
           <span className="font-mono text-[11px] text-muted tracking-[0.1em] uppercase">{String(FAQS.length).padStart(2, '0')} ENTRIES</span>

website/src/components/Features.tsx

@@ -2,8 +2,8 @@ import { FEATURES } from '../data'
 
 export default function Features() {
   return (
-    <section id="features" className="border-b-2 border-ink py-[72px] px-6">
-      <div className="max-w-[1200px] mx-auto">
+    <section id="features" className="border-b-2 border-ink py-[72px]">
+      <div className="container">
         <div className="flex justify-between items-baseline mb-9 border-b border-ink/20 pb-[14px]">
           <h2 className="font-display text-[clamp(26px,4vw,44px)] tracking-[-0.03em] uppercase text-ink">WHAT IT DOES</h2>
           <span className="font-mono text-[11px] text-muted tracking-[0.1em] uppercase">06 MODULES</span>

website/src/components/Footer.tsx

@@ -4,7 +4,7 @@ import Logo from './Logo'
 export default function Footer() {
   return (
     <footer id="footer" className="border-t border-ink/15">
-      <div className="max-w-[1200px] mx-auto px-6 py-[22px] flex flex-col md:flex-row justify-between items-start md:items-center gap-3">
+      <div className="container py-[22px] flex flex-col md:flex-row justify-between items-start md:items-center gap-3">
         <div className="flex items-center gap-3">
           <Logo size={18} />
           <span className="font-mono text-[10px] text-muted tracking-[0.06em]">

website/src/components/Hero.tsx

@@ -25,7 +25,7 @@ export default function Hero() {
 
   return (
     <section id="hero" className="border-b-2 border-ink">
-      <div className="max-w-[1200px] mx-auto px-6">
+      <div className="container">
         <div className="grid grid-cols-1 md:grid-cols-[1fr_auto] gap-6 md:gap-10 items-end py-[40px] md:pt-16 md:pb-14">
 
           {/* Text */}

website/src/components/HowItWorks.tsx

@@ -80,15 +80,15 @@ function Step({ step, index, last }: StepProps) {
 export default function HowItWorks() {
   return (
     <section id="how-it-works" className="border-b-2 border-ink pb-12">
-      <div className="max-w-[1200px] mx-auto px-6">
+      <div className="container">
         <div className="flex justify-between items-baseline pt-12 pb-9 border-b border-ink/20">
           <h2 className="font-display text-[clamp(26px,4vw,44px)] tracking-[-0.03em] uppercase text-ink">SETUP GUIDE</h2>
           <span className="font-mono text-[11px] text-muted tracking-[0.1em] uppercase">04 STEPS</span>
         </div>
       </div>
 
       {STEPS.map((step, i) => (
-        <div key={step.n} className="max-w-[1200px] mx-auto px-6">
+        <div key={step.n} className="container">
           <Step step={step} index={i} last={i === STEPS.length - 1} />
         </div>
       ))}

website/src/components/Nav.tsx

@@ -14,7 +14,7 @@ export default function Nav() {
   return (
     <>
       <nav id="nav" className="border-b-2 border-ink sticky top-0 bg-paper z-[100]">
-        <div className="max-w-[1200px] mx-auto px-6 flex items-center justify-between h-14">
+        <div className="container flex items-center justify-between h-14">
           <a href="#" className="flex items-center gap-[10px] no-underline text-ink">
             <Logo size={26} />
             <span className="font-mono font-bold text-[12px] tracking-[0.06em] uppercase">

website/src/index.css

@@ -2,6 +2,12 @@
 @import "tailwindcss";
 @source "../src";
 
+@utility container {
+  margin-inline: auto;
+  padding-inline: 1.5rem;
+  max-width: 1200px;
+}
+
 @theme {
   --color-primary: #ea6049;
   --color-ink:     #0A0A0A;