wasp/web/blog/components/InBlogCta.js
Shah 4020295740
Make blog intro / CTA visually distinguishable (#748)
* Add class to paragraph containing CTA

Add class to the paragraph containing CTA elements. The class is used to target the container paragraph element to create a box to distinguish CTA section from the content.

* Add css properties for paragraphy containing CTA

Added css properties for paragraph element to create a box around the CTA, centering the text and providing padding.

* Add media query for CTA box

Add media query for CTA box for small screens to prevent individual CTA from breaking. Each CTA appears on an individual line and look clean. CTA dividers are not shown on small screens.
2022-10-12 11:54:29 +02:00

29 lines
829 B
JavaScript

import React from 'react'
import Link from '@docusaurus/Link';
import useBaseUrl from '@docusaurus/useBaseUrl';
const Divider = () => (
<span className='in-blog-cta--divider'> </span>
)
const InBlogCta = () => (
<p className='in-blog-cta-link-container'>
<Link className='in-blog-cta--link'
to='https://e44cy1h4s0q.typeform.com/to/ycUzQa5A'>
We are in Alpha (try it out)!
</Link>
<Divider />
<Link className='in-blog-cta--link' to='https://discord.gg/rzdnErX'>
Join our community
</Link>
<Divider />
<Link className='in-blog-cta--link'
to='https://wasp-lang.notion.site/Founding-Engineer-at-Wasp-402274568afa4d7eb7f428f8fa2c0816'>
Work with us
</Link>
</p>
)
export default InBlogCta