@conduction/docusaurus-preset 3.10.0 → 3.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/docusaurus-preset",
-  "version": "3.10.0",
+  "version": "3.11.0",
   "scripts": {
     "prepack": "node scripts/prepack-bundle-css.js"
   },

package/src/components/DetailHero/DetailHero.jsx

@@ -73,6 +73,7 @@ export default function DetailHero({
   locales,
   title,
   tagline,
+  intro,
   primaryCta,
   secondaryCta,
   tertiaryCta,
@@ -262,6 +263,7 @@ export default function DetailHero({
             </h1>
           )}
           {tagline && <p className={styles.tagline}>{tagline}</p>}
+          {intro && <div className={styles.intro}>{intro}</div>}
 
           {(primaryCta || secondaryCta || tertiaryCta) && (
             <div className={styles.actions}>

package/src/components/DetailHero/DetailHero.module.css

@@ -42,6 +42,8 @@
 .bgCobalt .titleText { color: white; }
 .bgCobalt .tagline { color: var(--c-cobalt-100); }
 .bgCobalt .tagline :global(.next-blue) { color: var(--c-nextcloud-cyan); }
+.bgCobalt .intro { color: var(--c-cobalt-100); }
+.bgCobalt .intro :global(.next-blue) { color: var(--c-nextcloud-cyan); }
 
 .crumb {
   font-family: var(--conduction-typography-font-family-code);
@@ -165,6 +167,18 @@
 }
 .tagline :global(.next-blue) { color: var(--c-nextcloud-blue); }
 
+/* Optional supporting paragraph below the tagline. Longer than the
+   tagline (SEO/intro lede). Wider read-measure (70ch) and a quieter
+   colour so the eye still lands on the title + tagline first. */
+.intro {
+  font-size: 17px;
+  line-height: 1.6;
+  color: var(--c-cobalt-700);
+  max-width: 70ch;
+  margin: 0 0 32px;
+}
+.intro :global(.next-blue) { color: var(--c-nextcloud-blue); }
+
 .actions {
   display: flex;
   gap: 14px;