Skip to content

Commit 734d287

Browse files
alexcarpenteralexcarpenter
committed
[Homepage] <IoHomeCaseStudies /> (#13190)
* adds <IoHomeCaseStudies /> * adds interface * animate gradient
1 parent 9de066a commit 734d287

File tree

6 files changed

+269
-16
lines changed

6 files changed

+269
-16
lines changed

‎website/components/io-home-case-studies/index.tsx‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import Image from 'next/image'
2+
import { IconArrowRight16 } from '@hashicorp/flight-icons/svg-react/arrow-right-16'
3+
import s from './style.module.css'
4+
5+
interface IoHomeCaseStudiesProps {
6+
primary: Array<{
7+
thumbnail: string
8+
alt: string
9+
link: string
10+
heading: string
11+
}>
12+
secondary: Array<{
13+
link: string
14+
heading: string
15+
}>
16+
}
17+
18+
export default function IoHomeCaseStudies({
19+
primary,
20+
secondary,
21+
}: IoHomeCaseStudiesProps) {
22+
return (
23+
<div className={s.caseStudies}>
24+
<ul className={s.primary}>
25+
{primary.map((item) => {
26+
return (
27+
<li className={s.primaryItem}>
28+
<a className={s.card} href={item.link}>
29+
<h3 className={s.cardHeading}>{item.heading}</h3>
30+
<Image
31+
src={item.thumbnail}
32+
layout="fill"
33+
objectFit="cover"
34+
alt={item.alt}
35+
/>
36+
</a>
37+
</li>
38+
)
39+
})}
40+
</ul>
41+
42+
<ul className={s.secondary}>
43+
{secondary.map((item) => {
44+
return (
45+
<li className={s.secondaryItem}>
46+
<a className={s.link} href={item.link}>
47+
<span className={s.linkInner}>
48+
<h3 className={s.linkHeading}>{item.heading}</h3>
49+
<IconArrowRight16 />
50+
</span>
51+
</a>
52+
</li>
53+
)
54+
})}
55+
</ul>
56+
</div>
57+
)
58+
}

‎website/components/io-home-case-studies/style.module.css‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
.caseStudies {
2+
--columns: 1;
3+
4+
display: grid;
5+
grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
6+
gap: 32px;
7+
8+
@media (--medium-up) {
9+
--columns: 12;
10+
}
11+
}
12+
13+
.primary {
14+
--columns: 1;
15+
16+
grid-column: 1 / -1;
17+
list-style: none;
18+
margin: 0;
19+
padding: 0;
20+
display: grid;
21+
grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
22+
gap: 32px;
23+
24+
@media (--medium-up) {
25+
--columns: 2;
26+
}
27+
28+
@media (--large) {
29+
grid-column: 1 / 9;
30+
}
31+
}
32+
33+
.primaryItem {
34+
display: flex;
35+
}
36+
37+
.card {
38+
position: relative;
39+
overflow: hidden;
40+
display: flex;
41+
flex-direction: column;
42+
flex-grow: 1;
43+
justify-content: flex-end;
44+
padding: 32px;
45+
box-shadow: 0 8px 16px -10px rgba(101, 106, 118, 0.2);
46+
background-color: #000;
47+
border-radius: 6px;
48+
color: var(--white);
49+
transition: ease-in-out 0.2s;
50+
transition-property: box-shadow;
51+
min-height: 330px;
52+
53+
&::before {
54+
content: '';
55+
position: absolute;
56+
top: 0;
57+
left: 0;
58+
width: 100%;
59+
height: 100%;
60+
z-index: 10;
61+
background-image: linear-gradient(
62+
to bottom,
63+
rgba(0, 0, 0, 0),
64+
rgba(0, 0, 0, 0.45)
65+
);
66+
transition: opacity ease-in-out 0.2s;
67+
}
68+
69+
&:hover {
70+
box-shadow: 0 2px 3px rgba(101, 106, 118, 0.15),
71+
0 16px 16px -10px rgba(101, 106, 118, 0.2);
72+
73+
&::before {
74+
opacity: 0.75;
75+
}
76+
}
77+
}
78+
79+
.cardHeading {
80+
margin: 0;
81+
composes: g-type-display-4 from global;
82+
z-index: 10;
83+
}
84+
85+
.secondary {
86+
grid-column: 1 / -1;
87+
list-style: none;
88+
margin: 0;
89+
padding: 0;
90+
91+
@media (--large) {
92+
margin-top: -32px;
93+
grid-column: 9 / -1;
94+
}
95+
}
96+
97+
.secondaryItem {
98+
border-bottom: 1px solid var(--gray-5);
99+
}
100+
101+
.link {
102+
display: flex;
103+
width: 100%;
104+
color: var(--black);
105+
}
106+
107+
.linkInner {
108+
display: flex;
109+
width: 100%;
110+
justify-content: space-between;
111+
padding-top: 32px;
112+
padding-bottom: 32px;
113+
transition: transform ease-in-out 0.2s;
114+
115+
@nest .link:hover & {
116+
transform: translateX(4px);
117+
}
118+
119+
& svg {
120+
flex-shrink: 0;
121+
}
122+
}
123+
124+
.linkHeading {
125+
margin: 0 32px 0 0;
126+
composes: g-type-display-6 from global;
127+
}

‎website/components/io-home-hero/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ export default function IoHomeHero({
6161
{cards.map((card, index) => {
6262
return (
6363
<IoHomeHeroCard
64+
key={index}
6465
index={index}
6566
heading={card.heading}
6667
description={card.description}

‎website/components/io-home-video-callout/style.module.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
.videoCallout {
22
--columns: 1;
33

4+
margin: 0;
45
display: grid;
56
grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
67
gap: 32px;

‎website/pages/home/index.tsx‎

Lines changed: 48 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import IoHomeHero from 'components/io-home-hero'
22
import IoHomeVideoCallout from 'components/io-home-video-callout'
3+
import IoHomeCaseStudies from 'components/io-home-case-studies'
34
import IoHomeCallToAction from 'components/io-home-call-to-action'
45
import IoHomePreFooter from 'components/io-home-pre-footer'
56
import s from './style.module.css'
@@ -46,16 +47,18 @@ export default function Homepage({ content }) {
4647
/>
4748

4849
<div className={s.intro}>
49-
<IoHomeVideoCallout
50-
heading="How Vault works"
51-
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."
52-
thumbnail="/img/TEMP-thumbnail.png"
53-
person={{
54-
name: 'Armon Dadgar',
55-
description: 'Co-founder & CTO',
56-
thumbnail: '/img/TEMP-thumbnail.png',
57-
}}
58-
/>
50+
<div className={s.container}>
51+
<IoHomeVideoCallout
52+
heading="How Vault works"
53+
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."
54+
thumbnail="/img/TEMP-thumbnail.png"
55+
person={{
56+
name: 'Armon Dadgar',
57+
description: 'Co-founder & CTO',
58+
thumbnail: '/img/TEMP-thumbnail.png',
59+
}}
60+
/>
61+
</div>
5962
</div>
6063

6164
<div className={s.inPractice}>
@@ -79,6 +82,41 @@ export default function Homepage({ content }) {
7982
innovative companies.
8083
</p>
8184
</header>
85+
<IoHomeCaseStudies
86+
primary={[
87+
{
88+
link: '',
89+
thumbnail: '/img/TEMP-thumbnail.png',
90+
alt: 'Sample alt text',
91+
heading: 'Accelerating the path to modern banking',
92+
},
93+
{
94+
link: '',
95+
thumbnail: '/img/TEMP-thumbnail.png',
96+
alt: 'Sample alt text',
97+
heading: 'A unified plan for secrets',
98+
},
99+
]}
100+
secondary={[
101+
{
102+
link: '',
103+
heading:
104+
'Uber Hadoop Cluster Process Secured with HashiCorp Vault',
105+
},
106+
{
107+
link: '',
108+
heading: 'Terraform for the lean engineering team at Compile ',
109+
},
110+
{
111+
link: '',
112+
heading: 'Seeding HashiCorp Vault with Terraform at Form3',
113+
},
114+
{
115+
link: '',
116+
heading: 'A G-Research story: 1 to 1000 Vault namespaces',
117+
},
118+
]}
119+
/>
82120
</div>
83121
</div>
84122

‎website/pages/home/style.module.css‎

Lines changed: 34 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,25 @@
1515
*/
1616

1717
.inPractice {
18+
position: relative;
1819
margin: 0 auto 128px;
1920
max-width: 1600px;
20-
width: calc(100% - 24px);
21-
background-color: var(--black);
22-
border-radius: 6px;
21+
22+
&::before {
23+
content: '';
24+
position: absolute;
25+
top: 0;
26+
left: 0;
27+
right: 0;
28+
bottom: 0;
29+
background: var(--black);
30+
31+
@media (--large) {
32+
border-radius: 6px;
33+
left: 24px;
34+
right: 24px;
35+
}
36+
}
2337
}
2438

2539
.inPracticeHeader {
@@ -51,13 +65,27 @@
5165
*/
5266

5367
.caseStudies {
68+
position: relative;
5469
margin: 0 auto 128px;
5570
padding-top: 64px;
5671
padding-bottom: 64px;
5772
max-width: 1600px;
58-
width: calc(100% - 24px);
59-
background-color: var(--vault-accent);
60-
border-radius: 6px;
73+
74+
&::before {
75+
content: '';
76+
position: absolute;
77+
top: 0;
78+
left: 0;
79+
right: 0;
80+
bottom: 0;
81+
background: var(--vault-accent);
82+
83+
@media (--large) {
84+
border-radius: 6px;
85+
left: 24px;
86+
right: 24px;
87+
}
88+
}
6189
}
6290

6391
.caseStudiesHeader {

0 commit comments

Comments
 (0)