mirror of https://github.com/hashicorp/packer
Nav, hero, and callout updates (#11342)
Update image Add fallback Update graphic Update hcp-callout.svg Update CTAs to point to cloud landing Fix link update blog post link Co-authored-by: Alex Carpenter <im.alexcarpenter@gmail.com>update-alert-banner
Mike Wickett
5 years ago
committed by
GitHub
parent
76d7504aa5
commit
38fe22062b
|
After Width: | Height: | Size: 2.3 KiB |
@ -1,22 +1,44 @@
|
||||
import Image from 'next/image'
|
||||
import Button from '@hashicorp/react-button'
|
||||
import InlineSvg from '@hashicorp/react-inline-svg'
|
||||
import s from './style.module.css'
|
||||
|
||||
export default function SectionBreakCta({ heading, description, link }) {
|
||||
export default function SectionBreakCta({
|
||||
badge,
|
||||
heading,
|
||||
description,
|
||||
link,
|
||||
media,
|
||||
}) {
|
||||
return (
|
||||
<div className={s.sectionBreakCta}>
|
||||
<hr />
|
||||
<h4 className={s.heading}>{heading}</h4>
|
||||
{description && <p className={s.description}>{description}</p>}
|
||||
<Button
|
||||
title={link.text}
|
||||
url={link.url}
|
||||
theme={{
|
||||
brand: 'neutral',
|
||||
variant: 'tertiary-neutral',
|
||||
background: 'light',
|
||||
}}
|
||||
linkType="outbound"
|
||||
/>
|
||||
<div className={s.content}>
|
||||
<div className={s.eyebrow}>
|
||||
<InlineSvg
|
||||
className={s.logo}
|
||||
src={require('./hcp-packer.svg?include')}
|
||||
/>
|
||||
<span className={s.badge}>{badge}</span>
|
||||
</div>
|
||||
<h2 className={s.heading}>{heading}</h2>
|
||||
<p className={s.description}>{description}</p>
|
||||
<Button
|
||||
title={link.text}
|
||||
url={link.url}
|
||||
theme={{
|
||||
brand: 'packer',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className={s.media}>
|
||||
<Image
|
||||
src={media.src}
|
||||
width={media.width}
|
||||
height={media.height}
|
||||
alt={media.alt}
|
||||
layout="responsive"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,41 +1,74 @@
|
||||
.sectionBreakCta {
|
||||
padding: 88px 24px;
|
||||
max-width: 800px;
|
||||
display: grid;
|
||||
grid-gap: 24px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
box-shadow: 0 8px 12px rgba(37, 38, 45, 0.08);
|
||||
margin: 0 16px;
|
||||
background-color: var(--white);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
padding: 32px 0 32px 24px;
|
||||
background-color: var(--black);
|
||||
background-image: radial-gradient(
|
||||
88.57% 111.76% at 51.65% 103.99%,
|
||||
rgba(99, 208, 255, 0.4) 0%,
|
||||
rgba(0, 0, 0, 0) 100%
|
||||
),
|
||||
linear-gradient(0deg, #000, #000);
|
||||
border-radius: 3px;
|
||||
color: var(--white);
|
||||
overflow: hidden;
|
||||
|
||||
@media (--medium-up) {
|
||||
margin: 0 auto 104px auto;
|
||||
flex-direction: row;
|
||||
padding: 50px 0 50px 50px;
|
||||
}
|
||||
& hr {
|
||||
position: absolute;
|
||||
top: 56px;
|
||||
left: calc(50% - 32px);
|
||||
width: 64px;
|
||||
background-color: var(--packer);
|
||||
margin-top: 0;
|
||||
margin-bottom: 24px;
|
||||
|
||||
@media (--large) {
|
||||
padding: 50px 0 50px 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.heading {
|
||||
composes: g-type-display-4 from global;
|
||||
margin: 0;
|
||||
.content {
|
||||
margin-bottom: 48px;
|
||||
padding-right: 24px;
|
||||
|
||||
@media (--medium-up) {
|
||||
padding: 0 88px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
composes: g-type-body-large from global;
|
||||
margin: 0;
|
||||
.media {
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
|
||||
@media (--medium-up) {
|
||||
padding: 0 80px;
|
||||
width: 45%;
|
||||
margin-left: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin-bottom: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.badge {
|
||||
margin-left: 16px;
|
||||
padding: 2px 10px;
|
||||
background-color: var(--packer-secondary);
|
||||
color: var(--black);
|
||||
composes: g-type-label from global;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.heading {
|
||||
margin: 0;
|
||||
composes: g-type-display-3 from global;
|
||||
}
|
||||
|
||||
.description {
|
||||
margin: 16px 0 32px;
|
||||
composes: g-type-body from global;
|
||||
color: var(--gray-5);
|
||||
}
|
||||
|
||||
|
After Width: | Height: | Size: 208 KiB |
Loading…
Reference in new issue