[Assembly] homepage refresh (#1558)
* Updates <BrandedCta /> * Add <WhyBoundary /> section * Add <HowBoundaryWorks /> section * Updates <UseCases /> content * Adjust <HomepageHero /> content * Update <HowItWorks /> section * Content updates * Update icon directory * Update how it works title * Removes extra grid container * Adds lang attribute to document * Fix heading level usage * Content updates * Remove secure * Captialize works * Content update * Update use case links * Update background * CTA text * Convert ssh to svg * Convert to SVG * Coming soon to feature blockpull/1572/head
Alex Carpenter
5 years ago
committed by
GitHub
|
Before Width: | Height: | Size: 27 KiB |
@ -0,0 +1,28 @@
|
||||
import s from './style.module.css'
|
||||
|
||||
export default function HowBoundaryWorks({ heading, description, items, img }) {
|
||||
return (
|
||||
<div className={s.root}>
|
||||
<div className={s.inner}>
|
||||
<div className="content">
|
||||
<h2 className={s.heading}>{heading}</h2>
|
||||
<p className={s.description}>{description}</p>
|
||||
<ul className={s.items}>
|
||||
{items.map((item, index) => {
|
||||
// Index is stable
|
||||
// eslint-disable-next-line react/no-array-index-key
|
||||
return (
|
||||
<li key={index} className={s.item}>
|
||||
{item}
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
<div className={s.media}>
|
||||
<img src={img.src} alt={img.alt} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,70 @@
|
||||
.root {
|
||||
composes: g-grid-container from global;
|
||||
}
|
||||
|
||||
.inner {
|
||||
--columns: 1;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
|
||||
grid-gap: 48px 32px;
|
||||
padding: 48px 32px;
|
||||
background-color: var(--white);
|
||||
box-shadow: 0 8px 12px rgba(37, 38, 45, 0.08);
|
||||
border-radius: 1px;
|
||||
|
||||
@media (--medium-up) {
|
||||
--columns: 2;
|
||||
|
||||
padding: 100px 75px;
|
||||
}
|
||||
}
|
||||
|
||||
.heading {
|
||||
margin: 0;
|
||||
composes: g-type-display-3 from global;
|
||||
}
|
||||
|
||||
.description {
|
||||
margin: 32px 0 0;
|
||||
composes: g-type-body-small from global;
|
||||
}
|
||||
|
||||
.items {
|
||||
list-style: none;
|
||||
margin: 15px 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 24px;
|
||||
padding-bottom: 24px;
|
||||
color: var(--gray-2);
|
||||
composes: g-type-display-5 from global;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
flex-shrink: 0;
|
||||
display: block;
|
||||
margin-right: 20px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 9999px;
|
||||
background-color: #c4c4c4;
|
||||
}
|
||||
|
||||
& + .item {
|
||||
border-top: 2px solid var(--gray-6);
|
||||
}
|
||||
}
|
||||
|
||||
.media {
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
& img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@ -1,190 +1,32 @@
|
||||
.root {
|
||||
--transition-time: 0.7s;
|
||||
display: grid;
|
||||
|
||||
@media (--medium-up) {
|
||||
position: sticky;
|
||||
top: calc(50vh - (249px));
|
||||
}
|
||||
|
||||
& > svg {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
& .boundaryLetter,
|
||||
& .spacer,
|
||||
& .iconBg {
|
||||
fill: var(--white);
|
||||
}
|
||||
|
||||
& .iconLines,
|
||||
& .iconBg {
|
||||
stroke-linecap: round;
|
||||
stroke-width: 1.5px;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
& .boundaryFill,
|
||||
& .arrowHead {
|
||||
fill: var(--boundary, #ec585d);
|
||||
}
|
||||
|
||||
& .arrowHead,
|
||||
& .arrowSegment,
|
||||
& .spacer {
|
||||
transition: var(--transition-time) ease;
|
||||
transition-property: opacity;
|
||||
}
|
||||
|
||||
& .arrowSegment {
|
||||
stroke-width: 2px;
|
||||
stroke: var(--boundary, #ec585d);
|
||||
stroke-miterlimit: 10;
|
||||
stroke-linecap: round;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
& .dropShadow {
|
||||
opacity: 0.08;
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
& > * {
|
||||
grid-area: 1 / 1;
|
||||
opacity: 0;
|
||||
transition: opacity ease-in 0.5s;
|
||||
|
||||
& .iconLines {
|
||||
stroke: var(--white);
|
||||
fill: none;
|
||||
transition: var(--transition-time) ease;
|
||||
transition-property: stroke;
|
||||
}
|
||||
|
||||
& .subtitle {
|
||||
fill: #b6b8c3;
|
||||
}
|
||||
|
||||
& .iconBg {
|
||||
stroke: #e5e6ec;
|
||||
stroke-width: 1px;
|
||||
transition: var(--transition-time) ease;
|
||||
transition-property: fill, stroke;
|
||||
&:last-child {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
& .authenticate {
|
||||
& .iconBg {
|
||||
fill: var(--white);
|
||||
}
|
||||
|
||||
& .iconLines {
|
||||
stroke: #e5e6ec;
|
||||
stroke-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
& .authorize {
|
||||
& .spacer {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
& .iconBg {
|
||||
fill: var(--black);
|
||||
stroke: var(--black);
|
||||
}
|
||||
|
||||
& .iconLines {
|
||||
stroke: #e5e6ec;
|
||||
}
|
||||
}
|
||||
|
||||
& .access {
|
||||
& .spacer {
|
||||
@media (--medium-up) {
|
||||
& > *:last-child {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
& .iconBg {
|
||||
fill: var(--black);
|
||||
stroke: var(--black);
|
||||
}
|
||||
|
||||
& .vaultIcon {
|
||||
fill: var(--white);
|
||||
}
|
||||
}
|
||||
|
||||
& .hostsAndServices {
|
||||
opacity: 1;
|
||||
transform: translate(0, 0);
|
||||
transition: var(--transition-time) ease;
|
||||
transition-property: opacity, transform;
|
||||
|
||||
& .leadingLine {
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
stroke-miterlimit: 10;
|
||||
stroke-width: 1.5px;
|
||||
stroke: var(--black);
|
||||
}
|
||||
}
|
||||
|
||||
& .arrowOne .arrowHead,
|
||||
& .arrowTwo .arrowHead {
|
||||
@media (--small) {
|
||||
opacity: 0;
|
||||
& > *.active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
& .inactive {
|
||||
& .arrowHead,
|
||||
& .arrowSegment,
|
||||
& .spacer {
|
||||
@media (--medium-up) {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.authorize {
|
||||
& .spacer {
|
||||
@media (--medium-up) {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
& .iconBg {
|
||||
@media (--medium-up) {
|
||||
fill: var(--white);
|
||||
stroke: #e5e6ec;
|
||||
}
|
||||
}
|
||||
|
||||
& .iconLines {
|
||||
@media (--medium-up) {
|
||||
stroke: #b6b8c3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.access {
|
||||
& .spacer {
|
||||
@media (--medium-up) {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
& .iconBg {
|
||||
@media (--medium-up) {
|
||||
fill: var(--white);
|
||||
stroke: var(--white);
|
||||
}
|
||||
}
|
||||
|
||||
& .vaultIcon {
|
||||
@media (--medium-up) {
|
||||
fill: var(--black);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.hostsAndServices {
|
||||
@media (--medium-up) {
|
||||
opacity: 0;
|
||||
transform: translate(0, 10px);
|
||||
}
|
||||
}
|
||||
& > svg {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,22 @@
|
||||
import s from './style.module.css'
|
||||
|
||||
export default function WhyBoundary({ heading, items }) {
|
||||
return (
|
||||
<div className={s.root}>
|
||||
<h2 className={s.heading}>{heading}</h2>
|
||||
<ul className={s.items}>
|
||||
{items.map((item, index) => {
|
||||
return (
|
||||
// Index is stable
|
||||
// eslint-disable-next-line react/no-array-index-key
|
||||
<li key={index}>
|
||||
<img className={s.itemIcon} src={item.icon} alt={item.heading} />
|
||||
<h3 className={s.itemHeading}>{item.heading}</h3>
|
||||
<p className={s.itemDescription}>{item.description}</p>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,33 @@
|
||||
.root {
|
||||
composes: g-grid-container from global;
|
||||
}
|
||||
|
||||
.heading {
|
||||
margin: 0;
|
||||
composes: g-type-display-2 from global;
|
||||
}
|
||||
|
||||
.items {
|
||||
--columns: 1;
|
||||
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 90px 0 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
|
||||
grid-gap: 48px 32px;
|
||||
|
||||
@media (--medium-up) {
|
||||
--columns: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.itemHeading {
|
||||
margin: 38px 0 0;
|
||||
composes: g-type-display-4 from global;
|
||||
}
|
||||
|
||||
.itemDescription {
|
||||
margin: 12px 0 0;
|
||||
composes: g-type-body from global;
|
||||
}
|
||||
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 294 B |
|
After Width: | Height: | Size: 421 B |
|
Before Width: | Height: | Size: 597 B After Width: | Height: | Size: 597 B |
|
Before Width: | Height: | Size: 793 B After Width: | Height: | Size: 793 B |
|
After Width: | Height: | Size: 331 B |
|
After Width: | Height: | Size: 451 B |
|
After Width: | Height: | Size: 495 B |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 545 B |
|
Before Width: | Height: | Size: 649 B After Width: | Height: | Size: 649 B |
|
Before Width: | Height: | Size: 725 B After Width: | Height: | Size: 725 B |
|
After Width: | Height: | Size: 380 B |
|
After Width: | Height: | Size: 434 B |
|
After Width: | Height: | Size: 505 B |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 885 B |
|
After Width: | Height: | Size: 8.0 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 5.8 KiB |
|
After Width: | Height: | Size: 561 B |
|
After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 31 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 31 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 13 KiB |