diff --git a/website/components/callout-blade/CalloutBlade.module.css b/website/components/callout-blade/CalloutBlade.module.css index a786f6c22e..cb2e50b609 100644 --- a/website/components/callout-blade/CalloutBlade.module.css +++ b/website/components/callout-blade/CalloutBlade.module.css @@ -2,6 +2,8 @@ padding-top: 56px; padding-bottom: 56px; + --shadow-level-3: 0 16px 28px rgba(37, 38, 45, 0.12); + & .contentWrapper { & > h3 { margin-top: 0; @@ -25,10 +27,17 @@ &.twoUp { grid-template-columns: 1fr 1fr; + grid-gap: 32px; + & .linkWrap { - padding: 64px 64px; + padding: 64px 32px; display: flex; flex-direction: row; + background: var(--gray-6); + &:hover { + background: var(--gray-5); + box-shadow: var(--shadow-level-3); + } & .icon { margin-right: 48px; @@ -48,8 +57,17 @@ &.threeUp { grid-template-columns: 1fr 1fr 1fr; + grid-gap: 32px; + & .linkWrap { padding: 64px 32px; + border: 1px solid var(--gray-5); + border-radius: 2px; + &:hover { + background: var(--gray-6); + box-shadow: var(--shadow-level-3); + border-color: var(--gray-6); + } } @media (max-width: 1220px) { @@ -63,11 +81,7 @@ & .linkWrap { color: inherit; height: 100%; - background: var(--gray-6); - &:hover { - background: var(--gray-5); - } - + transition: all 0.3s ease; display: flex; flex-direction: column; diff --git a/website/components/case-study-carousel/style.css b/website/components/case-study-carousel/style.css index 554a75b4f1..e7adad1307 100644 --- a/website/components/case-study-carousel/style.css +++ b/website/components/case-study-carousel/style.css @@ -37,6 +37,7 @@ & .background-section { background: var(--gray-6); + padding-bottom: 64px; } } diff --git a/website/components/homepage-hero/carousel.css b/website/components/homepage-hero/carousel.css new file mode 100644 index 0000000000..bde785d631 --- /dev/null +++ b/website/components/homepage-hero/carousel.css @@ -0,0 +1,111 @@ +.carousel { + & .videos { + position: relative; + } + + & .video-wrapper { + height: 0; + opacity: 0; + overflow: hidden; + position: relative; + transform: translateX(-60px); + line-height: 0; + box-shadow: 0 14.3254px 14.3254px rgba(37, 41, 55, 0.16); + + &.is-active { + opacity: 1; + padding-top: calc((100% * 0.63569) + 28px); + transform: translateX(0); + transition: opacity 0.5s, transform 0.5s; + transition-timing-function: ease-out; + } + + &.is-deactivating { + opacity: 0; + transform: translateX(90px); + transition-timing-function: ease-in; + } + } + + & .bar { + align-items: center; + background: #0e1016; + border-radius: 4px 4px 0 0; + display: flex; + height: 28px; + padding: 0 12px; + position: absolute; + top: 0; + left: 0; + width: 100%; + + & span { + background: #252937; + border-radius: 50%; + display: block; + height: 9px; + margin-right: 7px; + width: 9px; + } + } + + & .video { + bottom: 0; + left: 0; + position: absolute; + top: 28px; + right: 0; + } + + & video { + position: absolute; + top: 0; + left: 0; + width: 100%; + } + + & .controls { + display: flex; + padding: 28px 20px 0; + + @media (max-width: 1119px) { + padding: 37px 0 0; + } + } + + & .control { + cursor: pointer; + text-align: left; + width: 100%; + + &:hover .control-hover { + transform: translateY(-4px); + } + + & + .control { + margin-left: 24px; + } + + & .control-hover { + transition: 0.3s ease-in-out; + transition-property: transform; + } + } + + & .progress-bar { + background-color: var(--gray-2); + height: 2px; + margin-top: 4px; + position: relative; + width: 100%; + + & span { + background: var(--white); + display: block; + height: 2px; + position: absolute; + transition: width linear 0.2s; + width: 0; + } + } +} diff --git a/website/components/homepage-hero/index.tsx b/website/components/homepage-hero/index.tsx new file mode 100644 index 0000000000..d007540c6b --- /dev/null +++ b/website/components/homepage-hero/index.tsx @@ -0,0 +1,19 @@ +import TextSplit from '@hashicorp/react-text-split' +import VideoCarousel from '@hashicorp/react-hero/carousel' +import s from './style.module.css' + +export default function HomepageHero({ title, description, links, videos }) { + return ( +
{description}
} +Multiple clouds and private datacenters with dynamic IPs, ephemeral containers, dominated by east-west traffic, no clear network perimeters.
\n' + + '