feat: add coaching public site imagery

frontend/src/pages/about.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { ReactElement } from 'react';
 import Head from 'next/head';
+import Image from 'next/image';
 import Link from 'next/link';
 import PublicSiteNav from '../components/PublicSiteNav';
 import LayoutGuest from '../layouts/Guest';
@@ -67,6 +68,14 @@ export default function AboutCoach() {
           </div>
 
           <div className={`${ui.card} p-6`}>
+            <Image
+              src='/images/coaching/coach-portrait.jpg'
+              alt='Executive coach portrait'
+              width={1122}
+              height={1402}
+              sizes='(min-width: 1024px) 45vw, 100vw'
+              className='mb-6 aspect-[4/5] w-full object-cover'
+            />
             <div className='border-b border-[#19192d]/10 pb-5'>
               <p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#35b7a5]'>
                 Coach profile

frontend/src/pages/how-it-works.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { ReactElement } from 'react';
 import Head from 'next/head';
+import Image from 'next/image';
 import Link from 'next/link';
 import PublicSiteNav from '../components/PublicSiteNav';
 import LayoutGuest from '../layouts/Guest';
@@ -429,6 +430,17 @@ export default function HowItWorks() {
             the workspace keeps client context, session memory, and follow-up in
             one coach-supervised flow.
           </p>
+          <div className={`mx-auto mt-10 max-w-4xl overflow-hidden border ${ui.border}`}>
+            <Image
+              src='/images/coaching/coaching-process.jpg'
+              alt='Coaching workspace prepared for session planning'
+              width={1672}
+              height={941}
+              sizes='(min-width: 1024px) 64vw, 100vw'
+              className='aspect-[16/9] w-full object-cover'
+              priority
+            />
+          </div>
           <div className='mt-9 flex flex-wrap justify-center gap-4'>
             <Link
               href='/intake/'

frontend/src/pages/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { ReactElement } from 'react';
 import Head from 'next/head';
+import Image from 'next/image';
 import Link from 'next/link';
 import PublicSiteNav from '../components/PublicSiteNav';
 import LayoutGuest from '../layouts/Guest';
@@ -219,6 +220,18 @@ export default function Starter() {
             </div>
           </div>
 
+          <div className={`mx-auto mt-12 max-w-5xl overflow-hidden border ${ui.border}`}>
+            <Image
+              src='/images/coaching/coaching-session.jpg'
+              alt='Executive coach and founder in a focused coaching conversation'
+              width={1672}
+              height={941}
+              sizes='(min-width: 1024px) 72vw, 100vw'
+              className='aspect-[16/9] w-full object-cover'
+              priority
+            />
+          </div>
+
           <div className='relative mx-auto mt-12 max-w-4xl'>
             <div
               className={`relative rounded-none border p-4  ${ui.border} ${ui.surface}`}

frontend/src/pages/services.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { ReactElement } from 'react';
 import Head from 'next/head';
+import Image from 'next/image';
 import Link from 'next/link';
 import PublicSiteNav from '../components/PublicSiteNav';
 import LayoutGuest from '../layouts/Guest';
@@ -96,12 +97,22 @@ export default function Services() {
                 the scenes: clients, sessions, notes, resources, and follow-up.
               </p>
             </div>
-            <div className='grid gap-3 sm:grid-cols-2'>
+            <div>
-              {publicCoachSite.outcomes.map((item) => (
+              <Image
-                <div key={item} className='rounded-none bg-[#fffdf9] p-4 font-semibold'>
+                src='/images/coaching/coaching-workspace.jpg'
-                  {item}
+                alt='Coaching workspace with notes and client context'
-                </div>
+                width={1672}
-              ))}
+                height={941}
+                sizes='(min-width: 1024px) 48vw, 100vw'
+                className='mb-5 aspect-[16/9] w-full object-cover'
+              />
+              <div className='grid gap-3 sm:grid-cols-2'>
+                {publicCoachSite.outcomes.map((item) => (
+                  <div key={item} className='rounded-none bg-[#fffdf9] p-4 font-semibold'>
+                    {item}
+                  </div>
+                ))}
+              </div>
             </div>
           </div>
         </section>