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

# Quickstart

> Launch your first page in minutes.

<div className="not-prose w-full">
  <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 py-6 md:py-8">
    <div className="relative">
      <div className="relative z-10 space-y-16 md:space-y-24">
        <div className="flex flex-col md:flex-row gap-8 md:gap-12 lg:gap-16 items-center">
          <div className="flex-1 w-full">
            <div className="flex items-center gap-3 mb-4">
              <span className="inline-flex items-center justify-center w-10 h-10 rounded-full font-bold text-lg" style={{ background: '#59D38C', color: '#ffffff' }}>
                1
              </span>

              <h2 className="text-2xl md:text-3xl font-bold tracking-tight">Create</h2>
            </div>

            <p className="text-base md:text-lg text-gray-500 mb-4 leading-relaxed">
              Tell the agent what page you want to make and what you need. The agent assembles the layout and content for you as you watch it build live.
            </p>

            <div className="bg-gray-50 border border-gray-200 p-4 mt-4">
              <p className="text-sm font-medium mb-1">Example</p>

              <p className="text-sm text-gray-600">
                "Create an ad landing page for Access Control. Use a single primary CTA, include social proof, and keep the page focused on demo requests."
              </p>
            </div>
          </div>

          <div className="flex-1 w-full">
            <div className="rounded-xl overflow-hidden border border-gray-200 bg-gray-50">
              <img alt="Example landing page layout focused on a single CTA" loading="lazy" decoding="async" className="w-full h-auto" src="https://mintcdn.com/architect-d889a35e/2fk-dUKTarOSj_MH/overview/images/make-page.png?fit=max&auto=format&n=2fk-dUKTarOSj_MH&q=85&s=41967028ca36ca08e4cd040391333584" width="872" height="536" data-path="overview/images/make-page.png" />
            </div>
          </div>
        </div>

        <div className="flex flex-col md:flex-row-reverse gap-8 md:gap-12 lg:gap-16 items-center">
          <div className="flex-1 w-full">
            <div className="flex items-center gap-3 mb-4">
              <span className="inline-flex items-center justify-center w-10 h-10 rounded-full font-bold text-lg" style={{ background: '#59D38C', color: '#ffffff' }}>
                2
              </span>

              <h2 className="text-2xl md:text-3xl font-bold tracking-tight">Edit</h2>
            </div>

            <p className="text-base md:text-lg text-gray-500 mb-4 leading-relaxed">
              Use the agent to iterate fast: tighten the headline, swap sections, adjust the CTA, and tailor the copy to your campaign.
            </p>

            <div className="bg-gray-50 border border-gray-200 p-4 mt-4">
              <p className="text-sm font-medium mb-1">Example</p>

              <p className="text-sm text-gray-600">
                "Rewrite this hero for IT directors, shorten the features section, and add a testimonial block above the fold."
              </p>
            </div>
          </div>

          <div className="flex-1 w-full">
            <div className="rounded-xl overflow-hidden border border-gray-200 bg-gray-50">
              <img alt="Settings checklist for title, description, favicon, and analytics" loading="lazy" decoding="async" className="w-full h-auto" src="https://mintcdn.com/architect-d889a35e/2fk-dUKTarOSj_MH/overview/images/edit-agent.png?fit=max&auto=format&n=2fk-dUKTarOSj_MH&q=85&s=12fee26534def21b0a5890fd7a3a1116" width="2612" height="1586" data-path="overview/images/edit-agent.png" />
            </div>
          </div>
        </div>

        <div className="flex flex-col md:flex-row gap-8 md:gap-12 lg:gap-16 items-center rounded-2xl p-4" style={{ border: '1px solid #59D38C', background: 'rgba(89,211,140,0.06)', boxShadow: '0 0 0 1px rgba(89,211,140,0.2), 0 0 58px rgba(89,211,140,0.32)' }}>
          <div className="flex-1 w-full">
            <div className="flex items-center gap-3 mb-4">
              <span className="inline-flex items-center justify-center w-10 h-10 rounded-full font-bold text-lg" style={{ background: '#59D38C', color: '#ffffff' }}>
                3
              </span>

              <h2 className="text-2xl md:text-3xl font-bold tracking-tight">Publish</h2>
            </div>

            <p className="text-base md:text-lg text-gray-500 mb-4 leading-relaxed">
              Click Publish to generate a live link, then copy the URL.
            </p>

            <p className="text-sm text-gray-500 leading-relaxed">
              Open the page and interact with it to see how the experience adapts to each visitor.
            </p>
          </div>

          <div className="flex-1 w-full">
            <div className="rounded-xl overflow-hidden border border-gray-200 bg-gray-50">
              <img alt="Ad setup example showing final URL pointing to a campaign page" loading="lazy" decoding="async" className="w-full h-auto" src="https://mintcdn.com/architect-d889a35e/2fk-dUKTarOSj_MH/overview/images/Screenshot_2026-02-01_at_17.20.06.png?fit=max&auto=format&n=2fk-dUKTarOSj_MH&q=85&s=8c22a8598acd8bb36e9c4c43deb5d3f3" width="1148" height="896" data-path="overview/images/Screenshot_2026-02-01_at_17.20.06.png" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>