> ## 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.

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-80 pointer-events-none">
    <img src="https://mintcdn.com/squeditor/HzAJYTeWsSDyCHm8/images/background-light.svg?fit=max&auto=format&n=HzAJYTeWsSDyCHm8&q=85&s=71c183c9d9f84554c16803231c5f767b" className="block w-full h-auto dark:hidden" alt="Image" width="1152" height="388" data-path="images/background-light.svg" />

    <img src="https://mintcdn.com/squeditor/HzAJYTeWsSDyCHm8/images/background-dark.svg?fit=max&auto=format&n=HzAJYTeWsSDyCHm8&q=85&s=a151efbafc17547bb349da4e747913ef" className="block w-full h-auto hidden dark:block" alt="Image" width="1152" height="388" data-path="images/background-dark.svg" />
  </div>

  <div className="relative z-10 px-4 pt-16 lg:pt-40  max-w-3xl mx-auto">
    <h1 className="block text-4xl font-medium text-center text-gray-900 dark:text-zinc-50 tracking-tight">
      Squeditor's Documentation
    </h1>

    <p className="max-w-xl mx-auto px-4 mt-4 text-lg text-center text-gray-500 dark:text-zinc-500">
      A modern visual editor and a static HTML website framework for static site templates developers. Edit locally, customize freely, and ship beautiful sites.
    </p>

    <div className="px-6 lg:px-0 mt-12 lg:mt-16 grid sm:grid-cols-2 gap-8">
      <HeroCard image="https://mintcdn.com/squeditor/_0CQRoqOWh9iuraF/images/the-editor.png?fit=max&auto=format&n=_0CQRoqOWh9iuraF&q=85&s=5f80f1d6ae1b4b1401430e7c6f434fb4" title="The Editor Docs" description="A powerful no-code HTML editor built for teams, startups and agencies" href="/editor/getting-started/introduction" width="640" height="342" data-path="images/the-editor.png" />

      <HeroCard image="https://mintcdn.com/squeditor/_0CQRoqOWh9iuraF/images/the-framework.png?fit=max&auto=format&n=_0CQRoqOWh9iuraF&q=85&s=01a24e514646120c4f7577628152336b" title="The Framework Docs" description="Build with PHP templating, Tailwind, GSAP animations, and more." href="/framework/getting-started/introduction" width="640" height="342" data-path="images/the-framework.png" />
    </div>
  </div>

  <div className="relative z-10 px-4 py-16 lg:pb-24 max-w-3xl mx-auto">
    <h2 className="block text-2xl font-medium text-center text-gray-900 dark:text-zinc-50 tracking-tight mb-8">
      Our templates core features
    </h2>

    <CardGroup cols={3}>
      <Card title="Zero-Runtime PHP Templating" icon="code" iconType="duotone" />

      <Card title="Token-Based Styling Architecture" icon="swatchbook" iconType="duotone" />

      <Card title="TailwindCSS v3 Foundation" icon="file-brackets-curly" iconType="duotone" />

      <Card title="Selective UIKit 3 Components" icon="cubes" iconType="duotone" />

      <Card title="Smooth Animations & Interactions" icon="sparkles" iconType="duotone" />

      <Card title="Well Organized & Documented" icon="file-code" iconType="duotone" />

      <Card title="Multi-Theme Schema Support" icon="shapes" iconType="duotone" />

      <Card title="Built-in Light/Dark Theme Mode" icon="moon" iconType="duotone" />

      <Card title="Section-Based Workflow" icon="cube" iconType="duotone" />
    </CardGroup>
  </div>
</div>