docs/src/pages/index.js

import React from 'react';
import clsx from 'clsx';
import Layout from '@theme/Layout';
import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import styles from './index.module.css';
import HomepageFeatures from '../components/HomepageFeatures';

function HomepageHeader() {
  const {siteConfig} = useDocusaurusContext();
  return (
    <header className={clsx('hero hero--primary', styles.heroBanner)} style={{backgroundImage: "linear-gradient(to right, #f472b6, #a78bfa, #22d3ee)"}}>

      <div className="container">

        <h1 className="hero__title">{siteConfig.title}</h1>

        <p className="hero__subtitle">{siteConfig.tagline}</p>

        <div className={styles.buttons}>

          <Link

            className="button button--secondary button--lg"

            to="/docs/gpt-researcher/getting-started/getting-started">

            Getting Started - 5 min ⏱️

          </Link>

        </div>

      </div>

    </header>
  );
}

export default function Home() {
  const {siteConfig} = useDocusaurusContext();
  return (
    <Layout

      title={`Documentation`}

      description="GPT Researcher is the leading autonomous agent designed for comprehensive online research on a variety of tasks.">

      <HomepageHeader />

      <main>

        <HomepageFeatures />

      </main>

    </Layout>
  );
}