text: import React from 'react';
  import clsx from 'clsx';
  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';
  
  function Feature({imageUrl, title, description}) {
    const imgUrl = useBaseUrl(imageUrl);
    return (
      <div className={clsx('col col--4', styles.feature)}>
        {imgUrl && (
          <div className="text--center">
            <img className={styles.featureImage} src={imgUrl} alt={title} />
          </div>
        )}
      </div>
    );
  }
  
  function Home() {
    const context = useDocusaurusContext();
    const {siteConfig = {}} = context;
    return (
      <Layout
        title={siteConfig.title}
        description={siteConfig.tagline}>
        <header className={clsx('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
                style={{margin: '0 20px'}}
                className={clsx(
                  'button button--secondary button--lg',
                  styles.getStarted,
                )}
                to={useBaseUrl('docs/')}>
                Get Started
              </Link>
              <iframe
                src={"https://ghbtns.com/github-btn.html?user=TypeStrong&repo=ts-node&type=star&count=true&size=large"}
                frameBorder="0"
                scrolling="0"
                width="160px"
                height="30px"
                style={{ marginTop: '8px' }}
              />
            </div>
          </div>
        </header>
        <main>
          <section className={styles.features}>
            <div className="container">
                  <div className="text--center">
                      <img src={useBaseUrl('img/screenshot.png')} alt="screenshot of ts-node" />
                  </div>
            </div>
          </section>
        </main>
      </Layout>
    );
  }
  
  export default Home;
  