Rework home hero philosophy line

ASSETS.md

@@ -70,6 +70,8 @@ direction — since the current site shows almost everyone except him in that ro
 | `assets/img/idea-time.jpg` | Ideas | Portrait or TIME feature visual. |
 | `assets/img/speak-reel.jpg` | Speak | Poster frame for the speaking reel. |
 | `assets/img/speak-stage.jpg` | Speak (`stage` section) | Quentin speaking on stage (100 Black Men of America conference). |
+| `assets/img/media-bnc.jpg` | Speak (`media` credits) | Still from the BNC holiday-shopping segment with Marcel Clarke (16:9). |
+| `assets/img/media-cali.jpg` | Speak (`media` credits) | Still from the California Live fashion-trends segment (16:9). |
 | `assets/img/about-portrait.jpg` | About | A strong editorial portrait of Quentin. |
 
 ## Video — the speaking reel

content/home.yaml

@@ -7,7 +7,7 @@ seo:
 hero:
   eyebrow: "Fashion creative leadership & visual strategy"
   role: "Fashion creative leader, visual strategist, speaker & host."
-  philosophy: "I help brands and people use style to say who they are, and who they're becoming. I've spent a decade proving it look by look. Now I direct the vision."
+  philosophy: "I help brands and people use style to show the world not just who they are, but who they're becoming. I spent a decade proving it look by look. Now I direct the vision."
   buttons:
     - label: "Start a project"
       href: "contact.html"

content/speak.yaml

@@ -10,12 +10,14 @@ hero:
   intro: "I make style make sense for a leadership summit, a fashion school, a panel, a podcast, or a camera. I keynote, moderate, teach, and host, and I bring both a point of view and the on-set years to back it up."
   buttonLabel: "Book Quentin"
 stage:
+  youtubeId: "6JPdZa60miY"
+  ariaLabel: "Play: Quentin Fears speaking at the 100 Black Men of America National Conference"
   image:
     src: "assets/img/speak-stage.jpg"
     alt: "Quentin Fears speaking on stage at the 100 Black Men of America national conference"
     tag: "On stage"
     label: "100 Black Men of America National Conference"
-  caption: "On stage at the 100 Black Men of America National Conference."
+  caption: "Speaking at the 100 Black Men of America National Conference. Press play to watch."
 reel:
   youtubeId: "7EeeYig__4o"
   ariaLabel: "Play: Quentin Fears hosting on Sheen Talk Live"
@@ -57,27 +59,27 @@ formats:
 media:
   eyebrow: "On camera"
   heading: "This isn't a claim. The footage exists."
-  intro: "I host <em>The Journey</em> on Sheen Talk Live: long-form conversations with people who shape culture. A few episodes:"
+  intro: "I host <em>The Journey</em> on Sheen Talk Live: long-form conversations with people who shape culture. I've also delivered fashion segments for national television. A sample:"
   episodes:
     - href: "https://www.youtube.com/watch?v=WR8hbFuHeqg"
       thumbSrc: "assets/img/media-larry.jpg"
       thumbAlt: "Quentin Fears interviews Larry Sims"
       tag: "Sheen Talk Live"
       title: "Larry Sims"
       body: "Celebrity hairstylist, on craft and career."
-    - href: "https://www.youtube.com/watch?v=7EeeYig__4o"
-      thumbSrc: "assets/img/media-angela.jpg"
-      thumbAlt: "Quentin Fears interviews Angela Robinson"
-      tag: "Sheen Talk Live"
-      title: "Angela Robinson"
-      body: "Actor, on presence and reinvention."
-    - href: "https://www.youtube.com/watch?v=LtZsCVGCOaI"
-      thumbSrc: "assets/img/media-tanisha.jpg"
-      thumbAlt: "Quentin Fears interviews Tanisha Long"
-      tag: "Sheen Talk Live"
-      title: "Tanisha Long"
-      body: "Actor & comedian, on breaking through."
-  footnote: "Also on camera: an interview with Tommy Hilfiger and fashion segments for Black News Channel."
+    - href: "https://youtu.be/8mQbKjS_8VA"
+      thumbSrc: "assets/img/media-cali.jpg"
+      thumbAlt: "Quentin Fears presenting fashion trends on California Live"
+      tag: "California Live"
+      title: "Fashion trends, every age"
+      body: "Trend segment for NBC's California lifestyle show: style that works for all ages."
+    - href: "https://www.youtube.com/watch?v=AxFFn_2NdVI&t=49s"
+      thumbSrc: "assets/img/media-bnc.jpg"
+      thumbAlt: "Quentin Fears on Black News Channel sharing holiday shopping tips highlighting Black designers"
+      tag: "Black News Channel"
+      title: "Holiday shopping, Black designers"
+      body: "Cyber Monday and Black Friday tips with BNC's Marcel Clarke, spotlighting Black designers."
+  footnote: "Also on camera: an interview with Tommy Hilfiger."
 cta:
   heading: "Programming an event?"
   body: "Send the audience, date, and format. I'll come back with topics and availability."

keystatic.config.ts

@@ -389,6 +389,11 @@ export default config({
         ),
         stage: fields.object(
           {
+            youtubeId: fields.text({
+              label: 'YouTube video id',
+              description: 'Optional — when set, the photo becomes a click-to-play video poster',
+            }),
+            ariaLabel: fields.text({ label: 'Accessible label' }),
             image: photo('On-stage photo'),
             caption: fields.text({ label: 'Caption', multiline: true }),
           },

src/data/img-variants.json

@@ -94,23 +94,25 @@
       683
     ]
   },
-  "assets/img/media-angela.jpg": {
-    "height": 360,
-    "width": 640,
+  "assets/img/media-bnc.jpg": {
+    "height": 608,
+    "width": 1080,
     "widths": [
       400,
-      640
+      800,
+      1080
     ]
   },
-  "assets/img/media-larry.jpg": {
-    "height": 360,
-    "width": 640,
+  "assets/img/media-cali.jpg": {
+    "height": 608,
+    "width": 1080,
     "widths": [
       400,
-      640
+      800,
+      1080
     ]
   },
-  "assets/img/media-tanisha.jpg": {
+  "assets/img/media-larry.jpg": {
     "height": 360,
     "width": 640,
     "widths": [

src/pages/speak.astro

@@ -56,9 +56,18 @@ const jsonLd = {
   <!-- ON STAGE -->
   <section class="section--tight" style="padding-top:clamp(1.5rem,3vw,2.5rem);padding-bottom:0">
     <div class="wrap">
-      <figure class="ph ph--wide reveal" data-tag={speak.stage.image.tag} data-label={speak.stage.image.label}>
-        <Picture src={speak.stage.image.src} alt={speak.stage.image.alt} sizes="(min-width: 1180px) 1080px, 92vw" />
-      </figure>
+      {speak.stage.youtubeId ? (
+        <div class="reel reveal" data-yt={speak.stage.youtubeId} role="button" tabindex="0" aria-label={speak.stage.ariaLabel}>
+          <figure class="ph ph--wide" data-tag={speak.stage.image.tag} data-label={speak.stage.image.label}>
+            <Picture src={speak.stage.image.src} alt={speak.stage.image.alt} sizes="(min-width: 1180px) 1080px, 92vw" />
+          </figure>
+          <span class="reel__play"><span><svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z" fill="#f3efe6"/></svg></span></span>
+        </div>
+      ) : (
+        <figure class="ph ph--wide reveal" data-tag={speak.stage.image.tag} data-label={speak.stage.image.label}>
+          <Picture src={speak.stage.image.src} alt={speak.stage.image.alt} sizes="(min-width: 1180px) 1080px, 92vw" />
+        </figure>
+      )}
       <p style="margin-top:1rem;color:var(--ink-faint);font-size:0.9rem" class="reveal">{speak.stage.caption}</p>
     </div>
   </section>
@@ -126,7 +135,7 @@ const jsonLd = {
       <div class="grid cols-3">
         {speak.media.episodes.map((e) => (
           <a class="fcard media-card reveal" href={e.href} target="_blank" rel="noopener">
-            <figure class="ph media-card__thumb" data-tag="Episode"><Picture src={e.thumbSrc} alt={e.thumbAlt} loading="lazy" sizes="(min-width: 760px) 30vw, 46vw" /></figure>
+            <figure class="ph media-card__thumb" data-tag="Episode"><Picture src={e.thumbSrc} alt={e.thumbAlt} loading="lazy" sizes="(min-width: 760px) 30vw, 46vw" onerror="this.remove()" /></figure>
             <span class="fcard__tag">{e.tag}</span>
             <h3>{e.title}</h3>
             <p>{e.body}</p>