> ## Documentation Index
> Fetch the complete documentation index at: https://docs.squeditor.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Introduction

export const HeroCard = ({ image, title, description, href }) => {
  return (
    <a
      className="link group cursor-pointer pb-8"
      href={href}
    >
      <img src={image} alt={title} className="pointer-events-none" />
      <h3 className="text-xl mt-5 text-gray-900 dark:text-zinc-50 font-medium">
        {title}
      </h3>
      <p className="block mt-1.5">
        {description}
      </p>
    </a>
  );
};

<div className="relative overflow-hidden">
  <div className="absolute -top-14 left-0 right-0 opacity-10 pointer-events-none">
    <img src="https://mintcdn.com/squeditor/h-aOtMkmKRQT7A6J/images/pattern-light.png?fit=max&auto=format&n=h-aOtMkmKRQT7A6J&q=85&s=cc842369178b444dd013117eab515cc5" className="block w-full h-auto dark:hidden" alt="Pattern" width="1512" height="660" data-path="images/pattern-light.png" />

    <img src="https://mintcdn.com/squeditor/h-aOtMkmKRQT7A6J/images/pattern-dark.png?fit=max&auto=format&n=h-aOtMkmKRQT7A6J&q=85&s=676fb03dbd57beea4413578b6d07c998" className="block w-full h-auto hidden dark:block" alt="Pattern" width="1512" height="660" data-path="images/pattern-dark.png" />
  </div>

  <div className="relative z-10 px-4 pt-16 lg:pt-[89px] max-w-3xl mx-auto text-center">
    <div className="w-fit mx-auto mb-8">
      <img src="https://mintcdn.com/squeditor/h-aOtMkmKRQT7A6J/logo/editor-intro-light.svg?fit=max&auto=format&n=h-aOtMkmKRQT7A6J&q=85&s=071ebed22d66060559e0a83bf93aeaaf" alt="Editor" className="w-[80px] h-[80px] dark:hidden" noZoom width="55" height="65" data-path="logo/editor-intro-light.svg" />

      <img src="https://mintcdn.com/squeditor/h-aOtMkmKRQT7A6J/logo/editor-intro-dark.svg?fit=max&auto=format&n=h-aOtMkmKRQT7A6J&q=85&s=f1a774a0e9b2b19e9d8d72088c5a8081" alt="Editor" className="w-[80px] h-[80px] hidden dark:block" noZoom width="53" height="62" data-path="logo/editor-intro-dark.svg" />
    </div>

    <h1 className="block text-4xl font-medium text-gray-900 dark:text-zinc-50 tracking-tight">
      The Editor's Documentation
    </h1>

    <p className="mt-4 text-lg text-gray-500 dark:text-zinc-500 mb-8 lg:mb-12">
      The core of the Squeditor compatibility lies in a specific folder structure and a configuration file. To make your static HTML template compatible, you must adhere to the following file organization.
    </p>

    <Frame>
      <a href="https://squeditor.com" target="_blank" rel="noopener noreferrer" className="link">
        <img src="https://mintcdn.com/squeditor/6zvXJXb7HEBGtEOv/images/editor-intro.jpg?fit=max&auto=format&n=6zvXJXb7HEBGtEOv&q=85&s=3780c274e4ed4503bc0df079fe5755e6" alt="Editor" className="pointer-events-none" width="1280" height="727" data-path="images/editor-intro.jpg" />
      </a>
    </Frame>
  </div>

  <div className="relative z-10 px-4 py-16 lg:pb-28 max-w-3xl mx-auto">
    <h3 className="block text-xl font-medium text-center text-gray-900 dark:text-zinc-50 tracking-tight mb-8"> Getting Started</h3>

    <CardGroup cols={3}>
      <Card href="/editor/configuration/template" arrow="true" title="Template Metadata" icon="memo-pad" iconType="duotone" />

      <Card href="/editor/configuration/global-settings" arrow="true" title="Global Settings" icon="swatchbook" iconType="duotone" />

      <Card href="/editor/configuration/theme-config" arrow="true" title="Theme Config" icon="gear" iconType="duotone" />

      <Card href="/editor/configuration/pages" arrow="true" title="Pages" icon="book-open" iconType="duotone" />

      <Card href="/editor/configuration/sections-library" arrow="true" title="Sections Library" icon="cube" iconType="duotone" />

      <Card href="/editor/components/group-containers" arrow="true" title="Group Containers" icon="folder-open" iconType="duotone" />

      <Card href="/editor/components/controls" arrow="true" title="Controls Reference" icon="shapes" iconType="duotone" />

      <Card href="/editor/components/conditional-display" arrow="true" title="Conditional Display" icon="eye" iconType="duotone" />

      <Card href="/editor/components/ai" arrow="true" title="AI Content Generation" icon="sparkle" iconType="duotone" />
    </CardGroup>
  </div>
</div>
