open-consul/website/components/before-after/index.jsx

56 lines
1.4 KiB
React
Raw Normal View History

2020-04-13 18:05:52 +00:00
function BeforeAfterDiagram({
beforeHeading,
beforeSubTitle,
beforeImage,
beforeDescription,
afterHeading,
afterSubTitle,
afterImage,
afterDescription,
}) {
return (
2020-04-13 21:24:10 +00:00
<div className="g-timeline">
2020-04-13 18:05:52 +00:00
<div>
2020-04-13 21:24:10 +00:00
<span className="line"></span>
<span className="line">
2020-04-13 18:05:52 +00:00
<svg
xmlns="http://www.w3.org/2000/svg"
width="11"
height="15"
viewBox="0 0 11 15"
>
<path
fill="#CA2171"
d="M0 0v15l5.499-3.751L11 7.5 5.499 3.749.002 0z"
/>
</svg>
</span>
2020-04-13 21:24:10 +00:00
<span className="dot"></span>
2020-04-13 18:05:52 +00:00
<h3>{beforeHeading}</h3>
2020-04-13 21:24:10 +00:00
<span className="sub-heading">{beforeSubTitle}</span>
<img
src={beforeImage}
alt={beforeSubTitle}
className="static-callout"
/>
2020-04-13 18:05:52 +00:00
{beforeDescription && <p>{beforeDescription}</p>}
</div>
<div>
2020-04-13 21:24:10 +00:00
<span className="dot"></span>
2020-04-13 18:05:52 +00:00
<h3>{afterHeading}</h3>
2020-04-13 21:24:10 +00:00
<span className="sub-heading">{afterSubTitle}</span>
2020-04-13 18:05:52 +00:00
<div id="index-dynamic-animation">
2020-04-13 21:24:10 +00:00
<img
src={afterImage}
alt={afterSubTitle}
className="static-callout"
/>
2020-04-13 18:05:52 +00:00
</div>
{afterDescription && <p>{afterDescription}</p>}
</div>
</div>
)
}
export default BeforeAfterDiagram