> ## Documentation Index
> Fetch the complete documentation index at: https://contentful-test-pr.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Introduction

> Welcome to the new home for your documentation

export const HeroBanner = () => {
  return <div className="bg-[#EFF2F6] dark:bg-black py-16 px-8 rounded-3xl mb-12 relative overflow-hidden">
      <div className="flex items-center justify-between max-w-6xl mx-auto gap-16">
        <div className="flex-1 max-w-lg">
          <h3 className="text-3xl font-semibold text-gray-800 dark:text-white mb-6 leading-tight">Get started with Contentful</h3>
          <p className="text-lg text-gray-600 dark:text-gray-300 mb-6 leading-relaxed">
            Learn the basics and get up and running with Contentful across a variety of 
            common frameworks. Our docs will help you set up your first project in no time.
          </p>
          <button className="block w-fit bg-transparent text-gray-700 dark:text-gray-300 px-6 py-3 border-2 border-gray-700 dark:border-gray-300 rounded-full text-base font-medium cursor-pointer transition-all duration-200 mt-4 hover:border-blue-500 hover:text-blue-500 dark:hover:border-blue-400 dark:hover:text-blue-400 hover:-translate-y-px">Start building</button>
        </div>
        <div className="flex-1 flex items-center justify-center">
          <img src="/images/hero.png" alt="Hero visual showing code snippets and UI elements" className="max-w-full h-auto max-h-80" />
        </div>
      </div>
    </div>;
};

<div class="wrapper">
  <HeroBanner />

  ## Docs by product

  <CardGroup cols={3}>
    <Card
      title="Personalization"
      href="/"
      icon={  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" {...props}>
<path fill="none" d="M0 0h256v256H0z" />
<path
  fill="none"
  stroke="currentColor"
  strokeLinecap="round"
  strokeLinejoin="round"
  strokeWidth={16}
  d="M216 112c0 48.6-56 120-88 120s-88-71.4-88-120a88 88 0 0 1 176 0Z"
/>
<path
  fill="none"
  stroke="currentColor"
  strokeLinecap="round"
  strokeLinejoin="round"
  strokeWidth={16}
  d="M104 144h0a32 32 0 0 1-32-32h0a8 8 0 0 1 8-8h0a32 32 0 0 1 32 32h0a8 8 0 0 1-8 8ZM176 104h0a8 8 0 0 1 8 8v0a32 32 0 0 1-32 32h0a8 8 0 0 1-8-8v0a32 32 0 0 1 32-32ZM112 184h32"
/>
</svg>}
    >
      I use a Phosphor icon!
    </Card>

    <Card title="Studio" href="/" />

    <Card title="Extensibility" href="/webhooks" />
  </CardGroup>

  ## Tutorials by platform

  <CardGroup cols={4}>
    <Card title="Next.js" href="/" />

    <Card title="GraphQL" href="/" />

    <Card title="Deploy with Vercel" href="/" />

    <Card title="React" href="/" />
  </CardGroup>

  {/* ## Example of pulling content from Contentful! */}

  {/* <PromoCard /> */}
</div>