feat: create section-header component for marketing site (#3070)

* adding section header component

* add pseudo class part

* rename attribute

* changed short attribute to a <p> tag

* removed attributes to use slots

* Update hero and page section to use section-header component. Removed global background and color style

* changed subheading to badge

* swap default with badge slot. update component implementation on page

sites/fast-website/src/app/components/index.ts

@@ -1 +1,2 @@
 export { GradientPicker } from "./gradient-picker";
+export { FASTSectionHeader } from "./section-header";

sites/fast-website/src/app/components/section-header/index.ts

@@ -0,0 +1,14 @@
+import { customElement } from "@microsoft/fast-element";
+import { SectionHeader } from "./section-header";
+import { SectionHeaderTemplate as template } from "./section-header.template";
+import { SectionHeaderStyles as styles } from "./section-header.styles";
+
+@customElement({
+    name: "fast-section-header",
+    template,
+    styles,
+})
+export class FASTSectionHeader extends SectionHeader {}
+export * from "./section-header.template";
+export * from "./section-header.styles";
+export * from "./section-header";

sites/fast-website/src/app/components/section-header/section-header.styles.ts

@@ -0,0 +1,12 @@
+import { css } from "@microsoft/fast-element";
+import { display } from "@microsoft/fast-components";
+
+export const SectionHeaderStyles = css`
+    ${display("flex")} :host {
+        flex-direction: column;
+        font-family: var(--body-font);
+        color: var(--neutral-foreground-rest);
+        box-sizing: border-box;
+        text-align: center;
+    }
+`;

sites/fast-website/src/app/components/section-header/section-header.template.ts

@@ -0,0 +1,11 @@
+import { html } from "@microsoft/fast-element";
+import { SectionHeader } from "./section-header";
+
+export const SectionHeaderTemplate = html<SectionHeader>`
+    <template>
+        <slot name="badge"></slot>
+        <slot></slot>
+        <slot name="body"></slot>
+        <slot name="action"></slot>
+    </template>
+`;

sites/fast-website/src/app/components/section-header/section-header.ts

@@ -0,0 +1,3 @@
+import { FASTElement } from "@microsoft/fast-element";
+
+export class SectionHeader extends FASTElement {}

sites/fast-website/src/public/index.html

@@ -25,14 +25,24 @@
         <!-- hero-section:start -->
         <section class="section">
           <div class="section-content">
-            Hero section header
+            <fast-section-header>
+              <fast-badge slot="badge" class="section-badge">ADAPTIVE UI SYSTEM, UTILITIES, & TOOLS</fast-badge>
+              <p class="section-heading-hero">The adaptive interface system for modern web experiences</p>
+              <p slot="body">Interfaces bult with FAST adapt to your design system and can be used with any modern UI Framework by leveraging industry standard Web Components.</p>
+              <fast-button slot="action" appearance="outline">Get start</fast-button>
+            </fast-section-header>
           </div>
         </section>
         <!-- hero-section:end -->
 
         <section class="section">
           <div class="section-content">
-            Page section header
+            <fast-section-header>
+              <fast-badge slot="badge" class="section-badge">FLEXIBLE AND ADAPTABLE</fast-badge>
+              <p class="section-heading">One component, many faces</p>
+              <p slot="body">Using an unopinionated architecture and Adaptive Styling, one suite of components can blend into any environment.</p>
+              <fast-button slot="action" appearance="outline">Explore components</fast-button>
+            </fast-section-header>
           </div>
         </section>
 
@@ -48,7 +58,11 @@
 
         <section class="section">
           <div class="section-content">
-            Page section header
+            <fast-section-header>
+              <fast-badge slot="badge" class="section-badge">FULLY INTEGRATED</fast-badge>
+              <p class="section-heading">Works with existing frameworks</p>
+              <fast-button slot="action" appearance="outline">Learn more</fast-button>
+            </fast-section-header>
           </div>
         </section>
 
@@ -62,7 +76,11 @@
 
         <section class="section">
           <div class="section-content">
-            Page section header
+            <fast-section-header>
+              <fast-badge slot="badge" class="section-badge">A COMPREHENSIVE TOOLKIT</fast-badge>
+              <p class="section-heading">Feature and Utilities</p>
+              <fast-button slot="action" appearance="outline">Read documentation</fast-button>
+            </fast-section-header>
           </div>
         </section>
 
@@ -76,7 +94,10 @@
 
         <section class="section">
           <div class="section-content">
-            Page section header
+            <fast-section-header>
+              <fast-badge slot="badge" class="section-badge">LEARN, MODIFY AND FOLLOW</fast-badge>
+              <p class="section-heading">Join the community</p>
+            </fast-section-header>
           </div>
         </section>
 

sites/fast-website/src/public/style.css

@@ -1,8 +1,6 @@
 body {
   margin: 0;
   padding: 0;
-  background: #242424;
-  color: #ddd;
 }
 
 .wrapper {
@@ -26,7 +24,8 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 300px;
+  min-height: 300px;
+  margin: 20px 0;
 }
 
 .section-component {
@@ -50,4 +49,20 @@ body {
 
 .footer-copyright-group {
   display: flex;
+}
+
+.section-badge {
+  font-weight: bold;
+}
+
+.section-heading-hero {
+  font-size: 60px;
+  line-height: 72px;
+  margin: 0;
+}
+
+.section-heading {
+  font-size: 46px;
+  line-height: 56px;
+  margin: 0;
 }