spoko-design-system 0.3.3 → 0.3.9

package/src/pages/components/jumbotron.mdx

@@ -0,0 +1,360 @@
+---
+title: "Jumbotron"
+layout: "../../layouts/MainLayout.astro"
+---
+import Jumbotron from '../../components/Jumbotron.astro'
+import Button from '../../components/Button.vue'
+
+# Jumbotron
+
+A Jumbotron indicates a big box for calling extra attention to some special content or information. It provides various layouts through different variants to suit your content presentation needs.
+
+## Table of Contents
+- [Best Practices](#best-practices)
+- [Responsive Behavior](#responsive-behavior)
+- [Variants](#variants)
+  - [Default Variant](#default-variant-classic)
+  - [Small Variant](#small-variant)
+  - [Hero Variant](#hero-variant)
+  - [Post Variant](#post-variant-full-overlay)
+  - [Post Split Variant](#post-split-variant)
+- [Component API](#component-api)
+- [Accessibility](#accessibility)
+
+## Best Practices
+- Use the `default` variant for main content sections and general announcements
+- Use the `hero` variant for page headers with background images and important messaging
+- Use the `post` variant for blog posts and articles with full-width image overlays
+- Use the `post-split` variant when you need to display image alongside content
+- Consider using `small` prop for less important or secondary sections
+
+## Responsive Behavior
+The component adapts to different screen sizes:
+- On mobile: Stacks content vertically, adjusts font sizes and padding
+- On tablet: Optimizes layout and spacing
+- On desktop: Full layout with optimal content width and spacing
+
+## Default Variant (Classic)
+The default variant is ideal for primary content sections. It supports custom intro, subtitle, and CTA content with centered layout.
+
+<div class="component-preview !block">
+    <Jumbotron 
+      variant="default"
+      title={`Lorem ipsum dolor sit amet, <span class="text-accent-light">consectetur</span> adipiscing elit.`}
+    >
+        <p slot="subtitle"
+          class="mt-3 text-base text-gray-200 sm:mt-5 text-lg md:text-xl lg:mx-0 md:mt-5"
+        >Nunc posuere massa eget turpis laoreet ultrices eget vel massa.</p>
+        <Fragment slot="cta-content">
+          <Button primary rounded href="#" title="short text">
+            Read More
+          </Button>
+        </Fragment>
+    </Jumbotron>
+</div>
+
+```js
+<Jumbotron 
+  variant="default"
+  title={`Lorem ipsum dolor sit amet, <span class="text-accent-light">consectetur</span> adipiscing elit.`}
+>
+    <p slot="subtitle"
+      class="mt-3 text-base text-gray-200 sm:mt-5 text-lg md:text-xl lg:mx-0 md:mt-5"
+    >
+      Nunc posuere massa eget turpis laoreet ultrices eget vel massa.
+    </p>
+    <Fragment slot="cta-content">
+      <Button primary rounded href="#" title="short text">
+        Read More
+      </Button>
+    </Fragment>
+</Jumbotron>
+```
+
+## Small Variant
+A more compact version of the default variant, useful for secondary content sections or when vertical space is limited.
+
+<div class="component-preview">
+    <Jumbotron 
+      variant="default"
+      small
+      title={`Lorem ipsum dolor sit amet, <span class="text-accent-light">consectetur</span> adipiscing elit.`}
+    >
+        <p slot="subtitle"
+          class="mt-5 sm:mt-8 sm:flex sm:justify-center"
+        >Nunc posuere massa eget turpis laoreet ultrices eget vel massa.</p>
+    </Jumbotron>
+</div>
+
+```js
+<Jumbotron 
+  variant="default"
+  small
+  title={`Lorem ipsum dolor sit amet, <span class="text-accent-light">consectetur</span> adipiscing elit.`}
+>
+    <p slot="subtitle"
+      class="mt-5 sm:mt-8 sm:flex sm:justify-center"
+    >
+      Nunc posuere massa eget turpis laoreet ultrices eget vel massa.
+    </p>
+</Jumbotron>
+```
+
+## Hero Variant
+Perfect for page headers and key sections that need visual impact. Features a background image with gradient overlay and optional description and info text.
+
+<div class="component-preview">
+    <Jumbotron
+      variant="hero"
+      title="<b>Main Hero</b> Title"
+      description="Detailed description of the hero section goes here."
+      info="<span>Additional</span> information can be displayed here"
+      image="https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=1920&ext=jpg"
+    />
+</div>
+
+```js
+<Jumbotron
+  variant="hero"
+  title="<b>Main Hero</b> Title"
+  description="Detailed description of the hero section goes here."
+  info="<span>Additional</span> information can be displayed here"
+  image="https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=1920&ext=jpg"
+/>
+```
+
+### Hero Variant without image
+When used without an image, the hero variant provides a clean, simple header with a solid background color.
+
+<div class="component-preview">
+    <Jumbotron
+      variant="hero"
+      title="<b>Simple Hero</b> Title"
+      description="A clean and simple hero section without background image."
+      info="Perfect for text-focused content sections"
+    />
+</div>
+
+```js
+<Jumbotron
+  variant="hero"
+  title="<b>Simple Hero</b> Title"
+  description="A clean and simple hero section without background image."
+  info="Perfect for text-focused content sections"
+/>
+```
+
+### Hero Variant with Different Backgrounds
+Hero variant supports different background classes to match your design needs.
+
+<div class="component-preview">
+    <Jumbotron
+      variant="hero"
+      title="<b>Blue Darker Background</b> (Default)"
+      description="Uses the default bg-blue-darker background"
+    />
+</div>
+```js
+<div class="component-preview">
+    <Jumbotron
+      variant="hero"
+      title="<b>Blue Darker Background</b> (Default)"
+      description="Uses the default bg-blue-darker background"
+    />
+</div>
+```
+<br/>
+
+<div class="component-preview">
+    <Jumbotron
+      variant="hero"
+      title="<b>Blue Darkest Background</b>"
+      description="Uses blue-darkest background"
+      backgroundClass="bg-blue-darkest"
+    />
+</div>
+```js
+<div class="component-preview">
+    <Jumbotron
+      variant="hero"
+      title="<b>Blue Darkest Background</b>"
+      description="Uses blue-darkest background"
+      backgroundClass="bg-blue-darkest"
+    />
+</div>
+```
+<br/>
+
+<div class="component-preview">
+    <Jumbotron
+      variant="hero"
+      title="<b>Accent Background</b>"
+      description="Uses accent-darker background"
+      backgroundClass="bg-accent-darker"
+    />
+</div>
+
+```js
+<div class="component-preview">
+    <Jumbotron
+      variant="hero"
+      title="<b>Accent Background</b>"
+      description="Uses accent-darker background"
+      backgroundClass="bg-accent-darker"
+    />
+</div>
+```
+<br/>
+
+<div class="component-preview">
+    <Jumbotron
+      variant="hero"
+      title="<b>Gradient Background</b>"
+      description="Uses custom gradient background"
+      backgroundClass="bg-vw"
+    />
+</div>
+```js
+<div class="component-preview">
+    <Jumbotron
+      variant="hero"
+      title="<b>Gradient Background</b>"
+      description="Uses custom gradient background"
+      backgroundClass="bg-vw"
+    />
+</div>
+
+
+## Post Variant (Full Overlay)
+Designed for blog posts and articles, featuring a full-width image overlay with metadata support for author, date, and categories.
+
+<div class="component-preview">
+    <Jumbotron
+      variant="post"
+      title="Blog Post Title"
+      image="https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=1920&ext=jpg"
+      categories={[
+        { name: 'Technology', uri: '#' },
+        { name: 'Design', uri: '#' }
+      ]}
+      author={{
+        firstName: "John",
+        name: "John Doe"
+      }}
+      date="2024-02-12"
+    />
+</div>
+
+```js
+<Jumbotron
+  variant="post"
+  title="Blog Post Title"
+  image="https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=1920&ext=jpg"
+  categories={[
+    { name: 'Technology', uri: '#' },
+    { name: 'Design', uri: '#' }
+  ]}
+  author={{
+    firstName: "John",
+    name: "John Doe"
+  }}
+  date="2024-02-12"
+/>
+```
+
+## Post Split Variant
+A two-column layout variant for posts where image and content need equal emphasis. Great for featured articles or important announcements.
+
+<div class="component-preview pb-0 !block">
+    <Jumbotron
+      variant="post-split"
+      title="<b>Formatted</b> Blog Post Title <small>Lorem Ipsum</small>"
+      image="http://localhost:1234/_image?href=https%3A%2F%2Fimg.freepik.com%2Ffree-photo%2Fnature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg%3Fsize%3D960%26ext%3Djpg&w=1200&h=675&f=webp"
+      categories={[
+        { name: 'Technology', uri: '#' },
+        { name: 'Design', uri: '#' }
+      ]}
+      author={{
+        firstName: "John",
+        name: "John Doe"
+      }}
+      date="2024-02-12"
+    />
+</div>
+
+```js
+<Jumbotron
+  variant="post-split"
+  title="<b>Formatted</b> Blog Post Title <small>Lorem Ipsum</small>"
+  image="path/to/image.jpg"
+  categories={[
+    { name: 'Technology', uri: '#' },
+    { name: 'Design', uri: '#' }
+  ]}
+  author={{
+    firstName: "John",
+    name: "John Doe"
+  }}
+  date="2024-02-12"
+/>
+```
+
+## Custom Intro Slot Example
+Shows how to fully customize the header section using the intro slot. Useful for complex layouts or custom styling.
+
+<div class="component-preview">
+    <Jumbotron variant="default" small>
+        <h2 slot="intro" class="text-3xl text-white sm:(text-3xl pt-0) md:text-4xl lg:text-5xl">
+          Lorem ipsum dolor sit amet, <span class="text-accent-light">consectetur</span> adipiscing elit.
+        </h2>
+        <p slot="subtitle"
+          class="mt-5 sm:mt-8 sm:flex sm:justify-center"
+        >Nunc posuere massa eget turpis laoreet ultrices eget vel massa.</p>
+    </Jumbotron>
+</div>
+
+```js
+<Jumbotron variant="default" small>
+    <h2 slot="intro" class="text-3xl text-white sm:(text-3xl pt-0) md:text-4xl lg:text-5xl">
+      Lorem ipsum dolor sit amet, <span class="text-accent-light">consectetur</span> adipiscing elit.
+    </h2>
+    <p slot="subtitle"
+      class="mt-5 sm:mt-8 sm:flex sm:justify-center"
+    >
+      Nunc posuere massa eget turpis laoreet ultrices eget vel massa.
+    </p>
+</Jumbotron>
+```
+
+## Component API
+
+### Common Props
+- `variant`: Layout variant ('default' | 'hero' | 'post' | 'post-split')
+  - default: 'default'
+- `title`: Main heading text. Supports HTML markup for styling.
+- `image`: Image URL (required for hero, post and post-split variants)
+
+### Default & Hero Props
+- `small`: Reduces vertical padding (useful for secondary content)
+- `description`: Secondary text below title (hero variant only)
+- `info`: Additional information text (hero variant only)
+
+### Post Variants Props
+- `date`: Publication date string
+- `author`: Author information object
+  - `firstName`: Author's first name (used in title attribute)
+  - `name`: Full author name (displayed)
+- `categories`: Array of category objects for post categorization
+  - `name`: Category display name
+  - `uri`: Category link URL
+
+### Slots
+- `intro`: Replaces the default title with custom content. Useful for complex headings or custom markup.
+- `subtitle`: Additional content below the title. Supports markdown and HTML.
+- `cta-content`: Call to action content (buttons, links etc.) - wrapped in centered container.
+
+## Accessibility
+- Use semantic HTML markup in slots
+- Ensure proper contrast for text over background images
+- Provide meaningful alt text for images
+- Title text supports HTML markup for better semantics and styling

package/src/pages/index.astro

@@ -2,7 +2,7 @@
 import { changeLanguage } from "i18next";
 import { Icon } from "astro-icon/components";
 import { SITE } from "../config";
-import Jumbatron from "../components/Jumbatron.vue";
+import Jumbotron from "../components/Jumbotron.astro";
 import Layout from "../layouts/Layout.astro";
 import Headline from "../components/Headline.vue";
 import Button from "../components/Button.vue";
@@ -33,7 +33,7 @@ const navItems = [
 
 <Layout>
   <div class="bg-slate-100 min-h-screen text-center">
-    <Jumbatron class="w-full" intro={SITE.title}>
+    <Jumbotron title={SITE.title}>
       <p
         slot="subtitle"
         class="mt-3 text-base text-gray-200 sm:mt-5 text-lg md:text-xl lg:mx-0 md:mt-5"
@@ -41,7 +41,7 @@ const navItems = [
       />
 
       <Button
-        slot="cta"
+        slot="cta-content"
         href="/core/introduction/"
         title="Spoko Design System"
         primary
@@ -49,7 +49,7 @@ const navItems = [
       >
         Read More
       </Button>
-    </Jumbatron>
+    </Jumbotron>
     <nav>
       <div
         class="px-4 flex-col flex flex-wrap md:flex-nowrap gap-4 max-w-5xl mx-auto text-left mt-12 md:(px-0 flex-row)"
@@ -105,16 +105,16 @@ const navItems = [
       <Headline underline as="div" class="mx-auto text-gray-900" textSize="3xl">Examples:</Headline>
       <ul class="grid text-2xl pt-6 lg:(auto-cols-max grid-flow-col py-6) text-left">
         <li class="leading-5 me-6 mb-4 lg:mb-0">
-          <a href="https://catalog.polo.blue" class="transition ease-in-out delay-200 duration-300 text-blue-medium hover:(text-accent-light decoration-blue-medium) underline decoration-white" target="_blank"> catalog.polo.blue</a>
+          <a href="https://catalog.polo.blue" class="example-link" target="_blank"> catalog.polo.blue</a>
         </li>
         <li class="leading-5 me-6 mb-4 lg:mb-0">
-          <a href="https://polo.blue" class="transition ease-in-out delay-200 duration-300 text-blue-medium hover:(text-accent-light decoration-blue-medium) underline decoration-white" target="_blank"> polo.blue</a>
+          <a href="https://polo.blue" class="example-link" target="_blank"> polo.blue</a>
         </li>
         <li class="leading-5 me-6 mb-4 lg:mb-0">
-          <a href="https://spoko.space" class="transition ease-in-out delay-200 duration-300 text-blue-medium hover:(text-accent-light decoration-blue-medium) underline decoration-white" target="_blank"> spoko.space</a>
+          <a href="https://spoko.space" class="example-link" target="_blank"> spoko.space</a>
         </li>
         <li class="leading-5 me-6 mb-4 lg:mb-0">
-          <a href="https://sale.polo.blue/" class="transition ease-in-out delay-200 duration-300 text-blue-medium hover:(text-accent-light decoration-blue-medium) underline decoration-white" target="_blank">sale.polo.blue</a>
+          <a href="https://sale.polo.blue/" class="example-link" target="_blank">sale.polo.blue</a>
         </li>
       </ul>
      </div>
@@ -124,3 +124,8 @@ const navItems = [
   </div>
   <script is:inline></script>
 </Layout>
+<style>
+  .example-link {
+    @apply transition ease-in-out delay-200 duration-300 text-blue-medium hover:(text-accent-light decoration-blue-medium) underline decoration-white;
+  }
+</style>

package/uno-config/theme/colors.ts

@@ -20,7 +20,6 @@ export const colors = {
 
     // Secondary colors - accent palette
     accent: {
-        lightest: '#00b0f0',
         light: '#0099da',
         default: '#0087c1',    // Default accent
         dark: '#006ea6',
@@ -36,7 +35,6 @@ export const colors = {
         default: '#9ca3af',    // Base gray
         dark: '#6a767d',       
         darker: '#4b5563',
-        black: '#000000',      // Pure black
     },
       
     // Slate colors - gray-blue palette

package/uno-config/theme/container.ts

@@ -0,0 +1,25 @@
+// uno-config/theme/container.ts
+import { breakpoints } from './breakpoints';
+
+export const container = {
+  center: true,
+  padding: {
+    sm: '1rem',
+    md: '2rem',
+    lg: '3rem',
+    xl: '4rem',
+    '2xl': '5rem',
+    '3xl': '5rem',
+    '4xl': '5rem',
+  },
+  maxWidth: {
+    sm: breakpoints.sm,
+    md: breakpoints.md,
+    lg: breakpoints.lg,
+    xl: breakpoints.xl,
+    '2xl': breakpoints['2xl'],
+    // For larger breakpoints, keep the 2xl width
+    '3xl': breakpoints['2xl'],
+    '4xl': breakpoints['2xl'],
+  },
+};

package/uno-config/theme/index.ts

@@ -5,6 +5,7 @@ import { breakpoints } from './breakpoints';
 import { dimensions } from './dimensions';
 import { effects } from './effects';
 import { gridTemplates } from './grid';
+import { container } from './container';
 
 export const theme = {
   colors,
@@ -14,6 +15,7 @@ export const theme = {
   gridTemplateColumn: gridTemplates.columns, 
   breakpoints,
   screens: breakpoints,
+  container,
 };
 
 export {
@@ -23,4 +25,5 @@ export {
   dimensions,
   effects,
   gridTemplates,
+  container,
 };

package/uno-config/theme/shortcuts/components.ts

@@ -34,7 +34,7 @@ export const componentShortcuts = [
   // Category related
   ['category-section', `pb-4 w-full ${COLORS.bgWhite} mb-4 overflow-x-hidden ${LAYOUT.flex.wrap} max-w-full`],
   ['category-tile', `${LAYOUT.flex.wrap} sm:flex-nowrap content-between w-64 min-w-64 lg:(w-28.57% min-w-28.57%) 2xl:(w-24.09% min-w-24.09%) 3xl:(w-19.60% min-w-19.60%) flex ml-1 lg:ml-1.5 first:ml-4`],
-  ['category-toggler', `sm:bg-opacity-20 pt-1 ${LAYOUT.flex.center} hover:text-accent-light text-neutral-light hover:text-blue-lightest px-4 leading-7 pb-0.5 md:pl-0`],
+  ['category-toggler', `w-8 sm:bg-opacity-20 pt-1 ${LAYOUT.flex.center} hover:text-accent-light text-neutral-light hover:text-blue-lightest px-4 leading-7 pb-0.5 md:pl-0`],
   ['category-link', 'w-full sm:w-auto text-neutral-default hover:(bg-gray-50 sm:bg-inherit) py-2 sm:py-0 text-lg font-medium text-left px-3 block sm:(text-base leading-4 mb-1.5) md:(px-4 py-1 table-cell)'],
   ['category-carousel__link', `uppercase ml-auto px-4 text-xs ${LAYOUT.flex.alignCenter} mt-3 hover:underline`],
 

package/uno-config/theme/shortcuts/index.ts

@@ -4,6 +4,7 @@ import { buttonShortcuts } from './buttons';
 import { layoutShortcuts } from './layout';
 import { componentShortcuts } from './components';
 import { productShortcuts } from './product';
+import { jumbotronShortcuts } from './jumbotron';
 
 const convertToShortcuts = (shortcuts: string[][]): UserShortcuts => {
   return Object.fromEntries(shortcuts.map(([name, value]) => [name, value]));
@@ -13,5 +14,6 @@ export const shortcuts: UserShortcuts = {
   ...convertToShortcuts(buttonShortcuts),
   ...convertToShortcuts(layoutShortcuts),
   ...convertToShortcuts(componentShortcuts),
-  ...convertToShortcuts(productShortcuts)
+  ...convertToShortcuts(productShortcuts),
+  ...convertToShortcuts(jumbotronShortcuts),
 };

package/uno-config/theme/shortcuts/jumbotron.ts

@@ -0,0 +1,44 @@
+// shortcuts/jumbotron.ts
+import { COLORS, LAYOUT, TRANSITIONS, IMAGE_STYLES } from './constants'
+
+export const jumbotronShortcuts = [
+  // Default variant
+  ['jumbotron-header-base', 'relative mx-auto my-auto lg:w-full text-center py-8'],
+  ['jumbotron-container-small', 'md:min-h-xs sm:py-12 md:py-14 lg:py-16 xl:py-20'],
+  ['jumbotron-container-large', 'md:min-h-md sm:py-16 md:py-20 lg:py-28 xl:py-32'],
+  ['jumbotron-title-default', 'text-3xl headline-light text-white sm:(text-4xl pt-0) md:text-5xl lg:text-6xl'],
+  ['jumbotron-cta-wrapper', 'mt-5 sm:(mt-8 flex justify-center)'],
+
+  // Hero variant
+  ['jumbotron-hero-wrapper', 'relative w-full'],
+  ['jumbotron-hero-image', 'absolute inset-0 w-full h-full'],
+  ['jumbotron-hero-overlay', 'absolute inset-0 bg-gradient-to-r from-blue-900 to-transparent opacity-90 z-1'],
+  ['jumbotron-hero-container', 'xl:container mx-auto px-3.5 md:px-8 py-8 h-56 sm:h-72 md:max-h-72 items-center flex'],
+  ['jumbotron-hero-header', 'relative z-10 text-white'],
+  ['jumbotron-hero-title', 'font-headlight text-3xl sm:text-4xl md:text-5xl xl:text-6xl mt-1 line-clamp-3 leading-tight'],
+
+  // Post variant
+  ['jumbotron-post-header', 'post-header pt-11 w-full justify-center text-white z-2 relative'],
+  ['jumbotron-post-heading', 'heading text-white relative flex items-center justify-center mt-auto w-full z-[2]'],
+  ['jumbotron-post-container', 'w-full sm:max-w-[640px] md:max-w-3xl lg:max-w-5xl xl:max-w-7xl 2xl:max-w-[1536px] px-4 py-5 flex flex-col flex-wrap'],
+  ['jumbotron-post-title', 'font-headlight text-2xl mb-1 sm:text-3xl md:(text-4xl mb-3) xl:text-6xl mt-1 order-2 line-clamp-3 pb-1'],
+
+  // Metadata and categories
+  ['jumbotron-meta', 'order-3 flex items-center text-gray-100'],
+  ['jumbotron-categories', 'order-1'],
+
+  // Content styles
+  ['jumbotron-description', 'mb-1 line-clamp-3 text-base sm:text-lg leading-none mt-4'],
+  ['jumbotron-info', 'font-medium mb-4 line-clamp-1 text-base sm:text-lg mt-2'],
+
+  // Post Split variant
+  ['jumbotron-split-wrapper', 'w-full'],
+  ['jumbotron-split-container', 'xl:container mx-auto px-3.5 md:px-0'],
+  ['jumbotron-split-header', 'w-full justify-center text-white z-2 mt-auto md:(grid grid-cols-2) pb-4 mb-8'],
+  ['jumbotron-split-content', 'container px-3.5 py-5 md:py-0 flex flex-wrap'],
+  ['jumbotron-split-title', 'font-headlight text-3xl md:(text-4xl mb-3) xl:text-11 mt-1 order-2 line-clamp-3 pb-1 w-full'],
+  ['jumbotron-split-meta', 'order-3 flex items-center text-gray-100'],
+  ['jumbotron-split-image-wrapper', 'relative -mb-8 md:(mt-4 -ml-4 mr-4)'],
+  ['jumbotron-split-image', 'relative shadow-xl md:max-h-112'],
+  ['jumbotron-split-img', 'aspect-video'] // border-white border-4
+];

package/src/components/Jumbatron.vue

@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import { useSlots } from 'vue';
-
-const slots = useSlots()
-const hasSlot = (name) => {
-  return !!slots[name];
-}
-const props = defineProps({
-  small: {
-    type: Boolean,
-    default: null,
-    required: false,
-  },
-  intro: {
-    type: String,
-    default: '',
-    required: false,
-  }
-})
-</script>
-
-<template>
-  <header class="relative flow content-grid bg-vw  mx-auto my-auto py-8 lg:w-full text-center"  :class="props.small ? 'md:min-h-xs sm:py-12 md:py-14 lg:py-16 xl:py-20' : 'md:min-h-md sm:py-16 md:py-20 lg:py-28 xl:py-32'">
-      
-        <slot name="intro">
-          <h1 class="text-3xl headline-light text-white sm:(text-4xl pt-0) md:text-5xl lg:text-6xl " v-html="props.intro" />
-        </slot>
-   
-      <slot name="subtitle" />
-      <div class="mt-5 sm:(mt-8 flex justify-center)" v-if="hasSlot('cta')">
-          <slot name="cta" />
-      </div>
-    </header>
-</template>
-<style>
-.bg-vw {
-  background: radial-gradient(circle at 50% 85%,
-      #00437A 0%,
-      #001E50 100%)
-}
-</style>