| 1 | import Head from 'next/head' |
| 2 | import { Button } from 'components/Button' |
| 3 | import Marp from 'public/assets/marp.svg' |
| 4 | |
| 5 | const heroBg = '/assets/hero-background.svg' as const |
| 6 | |
| 7 | export const Hero = () => ( |
| 8 | <> |
| 9 | <Head> |
| 10 | <link rel="preload" href={heroBg} as="image" /> |
| 11 | </Head> |
| 12 | <section className="border-b py-16 px-4 md:py-24 md:tracking-wider"> |
| 13 | <h1 className="font-rounded text-center font-bold sm:text-xl md:text-2xl"> |
| 14 | <Marp className="mx-auto mb-5 h-auto w-4/5 max-w-xl p-3" /> |
| 15 | <span className="sr-only">Marp:</span> |
| 16 | Markdown Presentation Ecosystem |
| 17 | </h1> |
| 18 | <p className="mt-10 text-center"> |
| 19 | <Button |
| 20 | href="#get-started" |
| 21 | color="primary" |
| 22 | className="text-xl md:text-2xl" |
| 23 | > |
| 24 | Get started! |
| 25 | </Button> |
| 26 | </p> |
| 27 | <p className="mt-5 text-center"> |
| 28 | <Button |
| 29 | href="https://github.com/marp-team/marp" |
| 30 | target="_blank" |
| 31 | rel="noopener noreferrer" |
| 32 | className="text-sm md:text-base" |
| 33 | color="primary" |
| 34 | outline |
| 35 | > |
| 36 | Find Marp tools on GitHub! |
| 37 | </Button> |
| 38 | </p> |
| 39 | <style jsx>{` |
| 40 | section { |
| 41 | background: #fcfcfc url('${heroBg}') no-repeat right center; |
| 42 | background-size: cover; |
| 43 | } |
| 44 | `}</style> |
| 45 | </section> |
| 46 | </> |
| 47 | ) |
| 48 |