[Homepage] <IoHomeCaseStudies /> (#13190)

* adds <IoHomeCaseStudies /> * adds interface * animate gradient
hashicorp · Nov 17, 2021 · 489562e · 489562e
1 parent 3ca0a44
commit 489562e
Show file tree

Hide file tree

Showing 6 changed files with 269 additions and 16 deletions.
diff --git a/website/components/io-home-case-studies/index.tsx b/website/components/io-home-case-studies/index.tsx
@@ -0,0 +1,58 @@
+import Image from 'next/image'
+import { IconArrowRight16 } from '@hashicorp/flight-icons/svg-react/arrow-right-16'
+import s from './style.module.css'
+
+interface IoHomeCaseStudiesProps {
+  primary: Array<{
+    thumbnail: string
+    alt: string
+    link: string
+    heading: string
+  }>
+  secondary: Array<{
+    link: string
+    heading: string
+  }>
+}
+
+export default function IoHomeCaseStudies({
+  primary,
+  secondary,
+}: IoHomeCaseStudiesProps) {
+  return (
+    <div className={s.caseStudies}>
+      <ul className={s.primary}>
+        {primary.map((item) => {
+          return (
+            <li className={s.primaryItem}>
+              <a className={s.card} href={item.link}>
+                <h3 className={s.cardHeading}>{item.heading}</h3>
+                <Image
+                  src={item.thumbnail}
+                  layout="fill"
+                  objectFit="cover"
+                  alt={item.alt}
+                />
+              </a>
+            </li>
+          )
+        })}
+      </ul>
+
+      <ul className={s.secondary}>
+        {secondary.map((item) => {
+          return (
+            <li className={s.secondaryItem}>
+              <a className={s.link} href={item.link}>
+                <span className={s.linkInner}>
+                  <h3 className={s.linkHeading}>{item.heading}</h3>
+                  <IconArrowRight16 />
+                </span>
+              </a>
+            </li>
+          )
+        })}
+      </ul>
+    </div>
+  )
+}
diff --git a/website/components/io-home-case-studies/style.module.css b/website/components/io-home-case-studies/style.module.css
@@ -0,0 +1,127 @@
+.caseStudies {
+  --columns: 1;
+
+  display: grid;
+  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
+  gap: 32px;
+
+  @media (--medium-up) {
+    --columns: 12;
+  }
+}
+
+.primary {
+  --columns: 1;
+
+  grid-column: 1 / -1;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
+  gap: 32px;
+
+  @media (--medium-up) {
+    --columns: 2;
+  }
+
+  @media (--large) {
+    grid-column: 1 / 9;
+  }
+}
+
+.primaryItem {
+  display: flex;
+}
+
+.card {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  justify-content: flex-end;
+  padding: 32px;
+  box-shadow: 0 8px 16px -10px rgba(101, 106, 118, 0.2);
+  background-color: #000;
+  border-radius: 6px;
+  color: var(--white);
+  transition: ease-in-out 0.2s;
+  transition-property: box-shadow;
+  min-height: 330px;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 10;
+    background-image: linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, 0),
+      rgba(0, 0, 0, 0.45)
+    );
+    transition: opacity ease-in-out 0.2s;
+  }
+
+  &:hover {
+    box-shadow: 0 2px 3px rgba(101, 106, 118, 0.15),
+      0 16px 16px -10px rgba(101, 106, 118, 0.2);
+
+    &::before {
+      opacity: 0.75;
+    }
+  }
+}
+
+.cardHeading {
+  margin: 0;
+  composes: g-type-display-4 from global;
+  z-index: 10;
+}
+
+.secondary {
+  grid-column: 1 / -1;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  @media (--large) {
+    margin-top: -32px;
+    grid-column: 9 / -1;
+  }
+}
+
+.secondaryItem {
+  border-bottom: 1px solid var(--gray-5);
+}
+
+.link {
+  display: flex;
+  width: 100%;
+  color: var(--black);
+}
+
+.linkInner {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  padding-top: 32px;
+  padding-bottom: 32px;
+  transition: transform ease-in-out 0.2s;
+
+  @nest .link:hover & {
+    transform: translateX(4px);
+  }
+
+  & svg {
+    flex-shrink: 0;
+  }
+}
+
+.linkHeading {
+  margin: 0 32px 0 0;
+  composes: g-type-display-6 from global;
+}
diff --git a/website/components/io-home-hero/index.tsx b/website/components/io-home-hero/index.tsx
@@ -61,6 +61,7 @@ export default function IoHomeHero({
             {cards.map((card, index) => {
               return (
                 <IoHomeHeroCard
+                  key={index}
                   index={index}
                   heading={card.heading}
                   description={card.description}

diff --git a/website/components/io-home-video-callout/style.module.css b/website/components/io-home-video-callout/style.module.css
@@ -1,6 +1,7 @@
 .videoCallout {
   --columns: 1;
 
+  margin: 0;
   display: grid;
   grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
   gap: 32px;

diff --git a/website/pages/home/index.tsx b/website/pages/home/index.tsx
@@ -1,5 +1,6 @@
 import IoHomeHero from 'components/io-home-hero'
 import IoHomeVideoCallout from 'components/io-home-video-callout'
+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 s from './style.module.css'
@@ -46,16 +47,18 @@ export default function Homepage({ content }) {
       />
 
       <div className={s.intro}>
-        <IoHomeVideoCallout
-          heading="How Vault works"
-          description="Vault tightly controls access to secrets and encryption keys by authenticating against trusted sources of identity such as Active Directory, LDAP, Kubernetes, CloudFoundry, and cloud platforms."
-          thumbnail="/img/TEMP-thumbnail.png"
-          person={{
-            name: 'Armon Dadgar',
-            description: 'Co-founder & CTO',
-            thumbnail: '/img/TEMP-thumbnail.png',
-          }}
-        />
+        <div className={s.container}>
+          <IoHomeVideoCallout
+            heading="How Vault works"
+            description="Vault tightly controls access to secrets and encryption keys by authenticating against trusted sources of identity such as Active Directory, LDAP, Kubernetes, CloudFoundry, and cloud platforms."
+            thumbnail="/img/TEMP-thumbnail.png"
+            person={{
+              name: 'Armon Dadgar',
+              description: 'Co-founder & CTO',
+              thumbnail: '/img/TEMP-thumbnail.png',
+            }}
+          />
+        </div>
       </div>
 
       <div className={s.inPractice}>
@@ -79,6 +82,41 @@ export default function Homepage({ content }) {
               innovative companies.
             </p>
           </header>
+          <IoHomeCaseStudies
+            primary={[
+              {
+                link: '',
+                thumbnail: '/img/TEMP-thumbnail.png',
+                alt: 'Sample alt text',
+                heading: 'Accelerating the path to modern banking',
+              },
+              {
+                link: '',
+                thumbnail: '/img/TEMP-thumbnail.png',
+                alt: 'Sample alt text',
+                heading: 'A unified plan for secrets',
+              },
+            ]}
+            secondary={[
+              {
+                link: '',
+                heading:
+                  'Uber Hadoop Cluster Process Secured with HashiCorp Vault',
+              },
+              {
+                link: '',
+                heading: 'Terraform for the lean engineering team at Compile ',
+              },
+              {
+                link: '',
+                heading: 'Seeding HashiCorp Vault with Terraform at Form3',
+              },
+              {
+                link: '',
+                heading: 'A G-Research story: 1 to 1000 Vault namespaces',
+              },
+            ]}
+          />
         </div>
       </div>
 

diff --git a/website/pages/home/style.module.css b/website/pages/home/style.module.css
@@ -15,11 +15,25 @@
  */
 
 .inPractice {
+  position: relative;
   margin: 0 auto 128px;
   max-width: 1600px;
-  width: calc(100% - 24px);
-  background-color: var(--black);
-  border-radius: 6px;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--black);
+
+    @media (--large) {
+      border-radius: 6px;
+      left: 24px;
+      right: 24px;
+    }
+  }
 }
 
 .inPracticeHeader {
@@ -51,13 +65,27 @@
  */
 
 .caseStudies {
+  position: relative;
   margin: 0 auto 128px;
   padding-top: 64px;
   padding-bottom: 64px;
   max-width: 1600px;
-  width: calc(100% - 24px);
-  background-color: var(--vault-accent);
-  border-radius: 6px;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--vault-accent);
+
+    @media (--large) {
+      border-radius: 6px;
+      left: 24px;
+      right: 24px;
+    }
+  }
 }
 
 .caseStudiesHeader {