e49b15d570
* Impl: base structure * Impl: ComparisonItem/component bg color * Style comparison items * CSS: Typography/spacing pass * Theme detailCta * Callouts: content pass * Impl: Logo grid section * Add proper logos to logoGrid * Hack: override button colors w/Nomad * Link enhancements * Clean up comments * Revert link wrapping changes * Remove paragraph after Why Nomad * Add available links * GitHub logo to GitLab * Move callouts to just under Why Nomad? for A ver. * Test comment to see if Vercel picks up this commit
39 lines
1 KiB
JavaScript
39 lines
1 KiB
JavaScript
import s from './style.module.css'
|
|
import Image from '@hashicorp/react-image'
|
|
import Button from '@hashicorp/react-button'
|
|
|
|
export default function ComparisonCallouts({ heading, details, items }) {
|
|
return (
|
|
<div className={s.comparisonCallouts}>
|
|
<div className={s.content}>
|
|
<div className={s.description}>
|
|
<h2 className="g-type-display-2">{heading}</h2>
|
|
<div className={s.details}>{details}</div>
|
|
</div>
|
|
|
|
<div className={s.comparisonItems}>
|
|
{items.map((item) => (
|
|
<ComparisonItem key={item.title} {...item} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function ComparisonItem({ imageUrl, title, description, link }) {
|
|
return (
|
|
<div className={s.comparisonItem}>
|
|
<Image url={imageUrl} />
|
|
<h4 className="g-type-display-4">{title}</h4>
|
|
<p className="g-type-body">{description}</p>
|
|
<Button
|
|
url={link.url}
|
|
title={link.text}
|
|
linkType={link.type}
|
|
theme={{ variant: 'tertiary', brand: 'nomad' }}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|