feat: add homepage coach positioning sections

frontend/src/pages/index.tsx

@@ -44,6 +44,30 @@ const stats = [
   ],
 ];
 
+const audiences = [
+  [
+    'Founders in transition',
+    'Leaders moving from founder-led decisions to a stronger operating team.',
+  ],
+  [
+    'Senior operators',
+    'Executives carrying complex teams, unclear ownership, and pressure from every side.',
+  ],
+  [
+    'Leadership teams',
+    'Small teams that need cleaner decision rights, meeting rhythm, and follow-through.',
+  ],
+];
+
+const specialties = [
+  'Delegation and decision rights',
+  'Founder visibility and executive presence',
+  'Operating rhythm and accountability',
+  'Difficult conversations and feedback',
+  'Board, investor, and senior-team communication',
+  'Leadership transition from doing to leading',
+];
+
 const workflow = [
   [
     'After every session',
@@ -338,6 +362,43 @@ export default function Starter() {
           </div>
         </section>
 
+        <section className={ui.section}>
+          <div className='grid grid-cols-1 gap-10 lg:grid-cols-[0.9fr_1.1fr]'>
+            <div>
+              <p className={ui.overline}>Who this is for</p>
+              <h2
+                className={`${ui.heading} mt-4 text-5xl leading-tight md:text-6xl`}
+              >
+                Coaching for leaders who need the work to continue after the call.
+              </h2>
+              <p className={`mt-6 text-lg leading-8 ${ui.muted}`}>
+                The public site should make the coach&apos;s niche obvious before
+                a visitor reaches the intake form. These starter segments and
+                specialties can be personalized for each coach.
+              </p>
+            </div>
+            <div className='grid grid-cols-1 gap-4'>
+              {audiences.map(([title, copy]) => (
+                <div key={title} className={`p-6 ${ui.card}`}>
+                  <h3 className='text-xl font-semibold'>{title}</h3>
+                  <p className={`mt-3 leading-7 ${ui.muted}`}>{copy}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className='mt-10 grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3'>
+            {specialties.map((item) => (
+              <div
+                key={item}
+                className={`border-l-4 border-[#35b7a5] p-4 font-semibold ${ui.softSurface}`}
+              >
+                {item}
+              </div>
+            ))}
+          </div>
+        </section>
+
         <section id='how-it-works' className={ui.section}>
           <div className='grid grid-cols-1 gap-10 lg:grid-cols-[0.8fr_1.2fr]'>
             <div>