New home hero design (#58364)

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: heiskr

assets/images/banner-images/hero-home.png

@@ -29,7 +29,7 @@ featuredLinks:
     - '{% ifversion ghec %}/copilot/tutorials/roll-out-at-scale/enable-developers/drive-adoption{% endif %}'
     - '{% ifversion ghec %}/copilot/tutorials/roll-out-at-scale/enable-developers/integrate-ai-agents{% endif %}'
 layout: discovery-landing
-heroImage: /assets/images/banner-images/hero-6.png
+heroImage: /assets/images/banner-images/hero-6
 versions:
   feature: copilot
 children:

content/copilot/index.md

@@ -30,7 +30,7 @@ children:
 redirect_from:
   - /copilot/using-github-copilot/guides-on-using-github-copilot
 contentType: tutorials
-heroImage: /assets/images/banner-images/hero-3.png
+heroImage: /assets/images/banner-images/hero-3
 layout: bespoke-landing
 sidebarLink:
   text: All tutorials

content/copilot/tutorials/index.md

@@ -0,0 +1,24 @@
+.section {
+  height: 21rem;
+  background-image: image-set(
+    url("/assets/images/banner-images/hero-home.webp") type("image/webp"),
+    url("/assets/images/banner-images/hero-home.png") type("image/png")
+  );
+  background-size: cover;
+  background-position: center right;
+  background-repeat: no-repeat;
+}
+
+.section h1 {
+  font-size: 4rem;
+  line-height: 1.2;
+}
+
+.content {
+  backdrop-filter: blur(1rem);
+  background-color: color-mix(
+    in srgb,
+    var(--color-canvas-subtle) 70%,
+    transparent
+  );
+}

src/landings/components/HomePageHero.module.scss

@@ -1,21 +1,25 @@
-import { OctocatHeader } from '@/landings/components/OctocatHeader'
 import { useTranslation } from '@/languages/components/useTranslation'
+import styles from './HomePageHero.module.scss'
+import cx from 'classnames'
 
 export const HomePageHero = () => {
   const { t } = useTranslation(['header', 'homepage'])
 
   return (
-    <section id="landing" className="color-bg-subtle p-6">
-      <div className="container-xl px-xl-6">
-        <div className="gutter gutter-xl-spacious d-lg-flex flex-row-reverse flex-items-center">
-          <div className="col-lg-6 col-xl-7 mb-4 mb-lg-0">
-            <OctocatHeader />
-          </div>
-          <div className="col-lg-6 col-xl-5">
-            <h1 id="title-h1">{t('github_docs')}</h1>
-            <p className="color-fg-muted f2 mb-0">{t('description')}</p>
-          </div>
-        </div>
+    <section
+      id="landing"
+      className={cx(
+        'border-bottom color-border-muted color-bg-subtle',
+        'd-flex flex-justify-center flex-column',
+        'text-center',
+        styles.section,
+      )}
+    >
+      <div className={cx('mx-auto px-4 rounded-3', styles.content)}>
+        <h1 id="title-h1" className="text-semibold">
+          {t('github_docs')}
+        </h1>
+        <p className="f3 color-fg-muted">{t('description')}</p>
       </div>
     </section>
   )

src/landings/components/HomePageHero.tsx

@@ -9,6 +9,16 @@ type LandingHeroProps = {
   introLinks?: Record<string, string> | null
 }
 
+function heroBackgroundCss(heroImage: string | undefined) {
+  if (!heroImage) return {}
+  return {
+    backgroundImage: `image-set(
+      url("${heroImage}.webp") type('image/webp'),
+      url("${heroImage}.png") type('image/png')
+    )`,
+  }
+}
+
 export const LandingHero = ({ title, intro, heroImage, introLinks }: LandingHeroProps) => {
   const { t } = useTranslation(['product_landing'])
 
@@ -17,16 +27,7 @@ export const LandingHero = ({ title, intro, heroImage, introLinks }: LandingHero
   const secondaryAction = linkEntries[1]
 
   return (
-    <div
-      className={styles.landingHero}
-      style={
-        heroImage
-          ? {
-              backgroundImage: `url("${heroImage}")`,
-            }
-          : undefined
-      }
-    >
+    <div className={styles.landingHero} style={heroBackgroundCss(heroImage)}>
       <div className={styles.heroContent}>
         <div className={styles.heroText}>
           <h1 className={styles.heroHeading}>{title}</h1>

src/landings/components/OctocatHeader.tsx

@@ -78,7 +78,7 @@ export const getLandingContextFromRequest = async (
     renderedPage: req.context.renderedPage,
     currentLearningTrack: req.context.currentLearningTrack,
     currentLayout: req.context.currentLayoutName,
-    heroImage: page.heroImage || '/assets/images/banner-images/hero-1.png',
+    heroImage: page.heroImage || '/assets/images/banner-images/hero-1',
     introLinks: page.introLinks || null,
     recommended,
     journeyTracks,