adds feature component (#13203)

website/components/io-home-feature/index.tsx

@@ -0,0 +1,34 @@
+import { IconArrowRight16 } from '@hashicorp/flight-icons/svg-react/arrow-right-16'
+import s from './style.module.css'
+
+interface IoHomeFeatureProps {
+  link: string
+  // thumnail: string
+  heading: string
+  description: string
+}
+
+export default function IoHomeFeature({
+  link,
+  // thumbnail,
+  heading,
+  description,
+}: IoHomeFeatureProps) {
+  return (
+    <a href={link} className={s.feature}>
+      <div className={s.featureMedia}>
+        {/* <Image src={thumbnail} width={400} height={200} alt="" /> */}
+      </div>
+      <div className={s.featureContent}>
+        <h3 className={s.featureHeading}>{heading}</h3>
+        <p className={s.featureDescription}>{description}</p>
+        <span className={s.featureCta} aria-hidden={true}>
+          Learn more{' '}
+          <span>
+            <IconArrowRight16 />
+          </span>
+        </span>
+      </div>
+    </a>
+  )
+}

website/components/io-home-feature/style.module.css

@@ -0,0 +1,67 @@
+.feature {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  padding: 32px;
+  gap: 24px 64px;
+  border-radius: 6px;
+  background-color: #f9f9fa;
+  color: var(--black);
+  box-shadow: 0 2px 3px rgba(101, 106, 118, 0.1),
+    0 8px 16px -10px rgba(101, 106, 118, 0.2);
+  transition: box-shadow ease-in-out 0.2s;
+
+  @media (--medium-up) {
+    flex-direction: row;
+  }
+
+  &:hover {
+    box-shadow: 0 2px 3px rgba(101, 106, 118, 0.15),
+      0 16px 16px -10px rgba(101, 106, 118, 0.2);
+  }
+}
+
+.featureMedia {
+  flex-shrink: 0;
+  background-color: var(--gray-6);
+  aspect-ratio: 4 / 2;
+  width: 100%;
+  border-radius: 6px;
+
+  @media (--medium-up) {
+    width: 300px;
+  }
+
+  @media (--large) {
+    width: 400px;
+  }
+}
+
+.featureHeading {
+  margin: 0;
+  composes: g-type-display-4 from global;
+}
+
+.featureDescription {
+  margin: 8px 0 24px;
+  composes: g-type-body-small from global;
+  color: var(--gray-3);
+}
+
+.featureCta {
+  display: inline-flex;
+  align-items: center;
+
+  & > span {
+    display: flex;
+    margin-left: 12px;
+
+    & > svg {
+      transition: transform 0.2s;
+    }
+  }
+
+  @nest .feature:hover & span svg {
+    transform: translateX(2px);
+  }
+}

website/pages/home/index.tsx

@@ -5,7 +5,9 @@ import IoHomeCard from 'components/io-home-card'
 import IoHomeCaseStudies from 'components/io-home-case-studies'
 import IoHomeCallToAction from 'components/io-home-call-to-action'
 import IoHomePreFooter from 'components/io-home-pre-footer'
+import { IconArrowRight16 } from '@hashicorp/flight-icons/svg-react/arrow-right-16'
 import s from './style.module.css'
+import IoHomeFeature from 'components/io-home-feature'
 
 export default function Homepage({ content }) {
   return (
@@ -49,6 +51,40 @@ export default function Homepage({ content }) {
       />
 
       <div className={s.intro}>
+        <header className={s.introHeader}>
+          <div className={s.introHeaderInner}>
+            <h2 className={s.introHeading}>Identity-based security</h2>
+            <p className={s.introDescription}>
+              Vault brokers and deeply integrates with trusted identities to
+              automate access to secrets, data, and systems.
+            </p>
+          </div>
+        </header>
+
+        <ul className={s.features}>
+          <li>
+            <div className={s.container}>
+              <IoHomeFeature
+                link=""
+                heading="Application &amp; machine identity"
+                description="Secure applications and systems with machine identity and
+                automate credential issuance, rotation, and more. Enable
+                attestation of application and workload identity, using
+                Vault as the trusted authority"
+              />
+            </div>
+          </li>
+          <li>
+            <div className={s.container}>
+              <IoHomeFeature
+                link=""
+                heading="User identity with Vault"
+                description="Leverage trusted identity platforms you use everyday to secure, store, and access credentials and resources"
+              />
+            </div>
+          </li>
+        </ul>
+
         <div className={s.container}>
           <IoHomeVideoCallout
             heading="How Vault works"

website/pages/home/style.module.css

@@ -10,6 +10,45 @@
   padding-bottom: 128px;
 }
 
+.introHeader {
+  padding-top: 64px;
+  padding-bottom: 64px;
+  background-color: var(--vault);
+  text-align: center;
+}
+
+.introHeaderInner {