text: import React from 'react'
  import classnames from 'classnames'
  import Layout from '@theme/Layout'
  import Link from '@docusaurus/Link'
  import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
  import useBaseUrl from '@docusaurus/useBaseUrl'
  import styles from './styles.module.css'
  
  const features = [
    {
      title: <>Simple and Predictable</>,
      description: (
        <>
          Keep track of your database schema changes and apply them predictably.
          There is no magic involved.
        </>
      )
    },
    {
      title: <>Database Agnostic</>,
      description: (
        <>
          Doesn't matter which database you choose, SQL or NoSQL, Synor got you
          covered.
        </>
      )
    }
  ]
  
  function Feature({ imageUrl, title, description }) {
    const imgUrl = useBaseUrl(imageUrl)
    return (
      <div className={classnames('col col--4', styles.feature)}>
        <h3>{title}</h3>
        <p>{description}</p>
      </div>
    )
  }
  
  function Home() {
    const context = useDocusaurusContext()
    const { siteConfig = {} } = context
    return (
      <Layout
        title={`Database Schema Migration with Synor`}
        description="Database Schema Migration Library"
      >
        <header className={classnames('hero hero--primary', styles.heroBanner)}>
          <div className="container">
            <h1 className="hero__title">{siteConfig.title}</h1>
            <p className="hero__subtitle">{siteConfig.tagline}</p>
            <div className={styles.buttons}>
              <Link
                className={classnames(
                  'button button--secondary button--lg',
                  styles.getStarted
                )}
                to={useBaseUrl('docs/introduction')}
              >
                Get Started
              </Link>
            </div>
          </div>
        </header>
        <main>
          {features && features.length && (
            <section className={styles.features}>
              <div className="container">
                <div className="row" style={{ justifyContent: 'center' }}>
                  {features.map((props, idx) => (
                    <Feature key={idx} {...props} />
                  ))}
                </div>
              </div>
            </section>
          )}
        </main>
      </Layout>
    )
  }
  
  export default Home
  