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

# Overview

> Explore different pathways for getting started on Synthetiq, from quickstarts to comprehensive guides on the foundations.

export const PlatformGraphic = () => <svg viewBox="0 0 200 200" style={{
  width: '100%',
  height: 'auto',
  maxHeight: '200px',
  overflow: 'visible'
}} xmlns="http://www.w3.org/2000/svg">
    <defs>
      <filter id="plat-layer-shadow" x="-50%" y="-50%" width="200%" height="200%">
        <feDropShadow dx="0" dy="2" stdDeviation="3" floodColor="#000" floodOpacity="0.15" />
      </filter>
    </defs>

    <style>{`
      #plat-layer7 {
        animation: plat-layer-down-4 5s ease-in-out infinite;
      }
      #plat-layer6 {
        animation: plat-layer-down-3 5s ease-in-out infinite;
      }
      #plat-layer5 {
        animation: plat-layer-down-2 5s ease-in-out infinite;
      }
      #plat-layer3 {
        animation: plat-layer-up-2 5s ease-in-out infinite;
      }
      #plat-layer2 {
        animation: plat-layer-up-3 5s ease-in-out infinite;
      }
      #plat-layer1 {
        animation: plat-layer-up-4 5s ease-in-out infinite;
      }
      @keyframes plat-layer-down-4 {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-4px); }
      }
      @keyframes plat-layer-down-3 {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-3px); }
      }
      @keyframes plat-layer-down-2 {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-2px); }
      }
      @keyframes plat-layer-up-2 {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(2px); }
      }
      @keyframes plat-layer-up-3 {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(3px); }
      }
      @keyframes plat-layer-up-4 {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(4px); }
      }
      #plat-particle1 {
        offset-path: path('M100,105 A40,40 0 1,1 100,104.9 Z');
        animation: plat-orbit 7s linear infinite;
      }
      #plat-particle2 {
        offset-path: path('M100,105 A32,32 0 1,0 100,104.9 Z');
        animation: plat-orbit 5.5s linear infinite 1s;
      }
      #plat-particle3 {
        offset-path: path('M100,105 A48,48 0 1,1 100,104.9 Z');
        animation: plat-orbit 9s linear infinite 2s;
      }
      @keyframes plat-orbit {
        0% { offset-distance: 0%; }
        100% { offset-distance: 100%; }
      }
    `}</style>

    <g filter="url(#plat-layer-shadow)">
      <g transform="translate(100, 135)">
        <g id="plat-layer7">
          <polygon points="0,0 55,27.5 0,55 -55,27.5" fill="#5B21B6" />
          <polygon points="-55,27.5 -55,35.5 0,63 0,55" fill="#4C1D95" />
          <polygon points="55,27.5 55,35.5 0,63 0,55" fill="#6D28D9" />
        </g>
      </g>

      <g transform="translate(100, 120)">
        <g id="plat-layer6">
          <polygon points="0,0 55,27.5 0,55 -55,27.5" fill="#6D28D9" />
          <polygon points="-55,27.5 -55,35.5 0,63 0,55" fill="#5B21B6" />
          <polygon points="55,27.5 55,35.5 0,63 0,55" fill="#7C3AED" />
        </g>
      </g>

      <g transform="translate(100, 105)">
        <g id="plat-layer5">
          <polygon points="0,0 55,27.5 0,55 -55,27.5" fill="#7C3AED" />
          <polygon points="-55,27.5 -55,35.5 0,63 0,55" fill="#6D28D9" />
          <polygon points="55,27.5 55,35.5 0,63 0,55" fill="#8B5CF6" />
        </g>
      </g>

      <g transform="translate(100, 90)">
        <polygon points="0,0 55,27.5 0,55 -55,27.5" fill="#8B5CF6" />
        <polygon points="-55,27.5 -55,35.5 0,63 0,55" fill="#7C3AED" />
        <polygon points="55,27.5 55,35.5 0,63 0,55" fill="#A78BFA" />
      </g>

      <g transform="translate(100, 75)">
        <g id="plat-layer3">
          <polygon points="0,0 55,27.5 0,55 -55,27.5" fill="#A78BFA" />
          <polygon points="-55,27.5 -55,35.5 0,63 0,55" fill="#8B5CF6" />
          <polygon points="55,27.5 55,35.5 0,63 0,55" fill="#C4B5FD" />
        </g>
      </g>

      <g transform="translate(100, 60)">
        <g id="plat-layer2">
          <polygon points="0,0 55,27.5 0,55 -55,27.5" fill="#C4B5FD" />
          <polygon points="-55,27.5 -55,35.5 0,63 0,55" fill="#A78BFA" />
          <polygon points="55,27.5 55,35.5 0,63 0,55" fill="#DDD6FE" />
        </g>
      </g>

      <g transform="translate(100, 45)">
        <g id="plat-layer1">
          <polygon points="0,0 55,27.5 0,55 -55,27.5" fill="#DDD6FE" />
          <polygon points="-55,27.5 -55,35.5 0,63 0,55" fill="#C4B5FD" />
          <polygon points="55,27.5 55,35.5 0,63 0,55" fill="#EDE9FE" />
        </g>
      </g>
    </g>

    <g opacity="0.4">
      <circle id="plat-particle1" r="1.2" fill="#C4B5FD" />
      <circle id="plat-particle2" r="0.9" fill="#A78BFA" />
      <circle id="plat-particle3" r="1" fill="#DDD6FE" />
    </g>

  </svg>;

export const QuickstartGraphic = () => <svg viewBox="0 0 480 480" style={{
  width: '100%',
  height: 'auto',
  maxHeight: '200px',
  overflow: 'visible'
}} xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="qs-body-main" x1="100%" y1="0%" x2="0%" y2="0%">
        <stop offset="0%" stopColor="#5B21B6" />
        <stop offset="25%" stopColor="#7C3AED" />
        <stop offset="60%" stopColor="#A78BFA" />
        <stop offset="100%" stopColor="#DDD6FE" />
      </linearGradient>
      <linearGradient id="qs-nose-main" x1="100%" y1="0%" x2="0%" y2="0%">
        <stop offset="0%" stopColor="#5B21B6" />
        <stop offset="35%" stopColor="#7C3AED" />
        <stop offset="100%" stopColor="#C4B5FD" />
      </linearGradient>
      <linearGradient id="qs-fin-back" x1="100%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" stopColor="#6D28D9" />
        <stop offset="100%" stopColor="#5B21B6" />
      </linearGradient>
      <linearGradient id="qs-fin-front" x1="100%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" stopColor="#C4B5FD" />
        <stop offset="100%" stopColor="#8B5CF6" />
      </linearGradient>
      <linearGradient id="qs-flame-outer" x1="50%" y1="0%" x2="50%" y2="100%">
        <stop offset="0%" stopColor="#7C3AED" />
        <stop offset="50%" stopColor="#A78BFA" />
        <stop offset="100%" stopColor="#C4B5FD" />
      </linearGradient>
      <linearGradient id="qs-flame-mid" x1="50%" y1="0%" x2="50%" y2="100%">
        <stop offset="0%" stopColor="#A78BFA" />
        <stop offset="100%" stopColor="#DDD6FE" />
      </linearGradient>
      <linearGradient id="qs-flame-inner" x1="50%" y1="0%" x2="50%" y2="100%">
        <stop offset="0%" stopColor="#C4B5FD" />
        <stop offset="100%" stopColor="#DDD6FE" />
      </linearGradient>
      <filter id="qs-shadow" x="-50%" y="-50%" width="200%" height="200%">
        <feDropShadow dx="-2" dy="3" stdDeviation="3" floodColor="#5B21B6" floodOpacity="0.4" />
      </filter>
      <filter id="qs-flame-glow" x="-100%" y="-100%" width="300%" height="300%">
        <feGaussianBlur stdDeviation="2.5" result="blur" />
        <feMerge>
          <feMergeNode in="blur" />
          <feMergeNode in="SourceGraphic" />
        </feMerge>
      </filter>
    </defs>

    <style>{`
      #qs-rocket {
        animation: qs-float 4s ease-in-out infinite;
      }
      @keyframes qs-float {
        0%, 100% { transform: translate(0, 0); }
        50% { transform: translate(-2px, -4px); }
      }
      #qs-particle1 {
        offset-path: path('M80,80 A25,25 0 1,1 80,79.9 Z');
        animation: qs-orbit 6s linear infinite;
      }
      #qs-particle2 {
        offset-path: path('M80,80 A20,20 0 1,0 80,79.9 Z');
        animation: qs-orbit 4.5s linear infinite 0.8s;
      }
      #qs-particle3 {
        offset-path: path('M80,80 A30,30 0 1,1 80,79.9 Z');
        animation: qs-orbit 8s linear infinite 2s;
      }
      #qs-particle4 {
        offset-path: path('M80,80 A18,18 0 1,0 80,79.9 Z');
        animation: qs-orbit 5s linear infinite 1.2s;
      }
      @keyframes qs-orbit {
        0% { offset-distance: 0%; }
        100% { offset-distance: 100%; }
      }
      #qs-flame-outer-el {
        transform-origin: center top;
        transform-box: fill-box;
        animation: qs-flame-outer-anim 0.8s ease-in-out infinite;
      }
      #qs-flame-mid-el {
        transform-origin: center top;
        transform-box: fill-box;
        animation: qs-flame-mid-anim 0.6s ease-in-out infinite 0.1s;
      }
      #qs-flame-inner-el {
        transform-origin: center top;
        transform-box: fill-box;
        animation: qs-flame-inner-anim 0.5s ease-in-out infinite 0.2s;
      }
      @keyframes qs-flame-outer-anim {
        0%, 100% { transform: scaleY(1); opacity: 0.85; }
        50% { transform: scaleY(1.05); opacity: 0.95; }
      }
      @keyframes qs-flame-mid-anim {
        0%, 100% { transform: scaleY(1); }
        50% { transform: scaleY(1.1); }
      }
      @keyframes qs-flame-inner-anim {
        0%, 100% { transform: scaleY(1); }
        50% { transform: scaleY(1.2); }
      }
    `}</style>

    <g transform="scale(3)">
      <g transform="translate(80, 80)">
        <g id="qs-rocket" filter="url(#qs-shadow)">
          <g transform="rotate(52) scale(1.3)" style={{
  transformOrigin: '0 0'
}}>
            <g filter="url(#qs-flame-glow)" transform="translate(0, 20)">
              <ellipse id="qs-flame-outer-el" cx="0" cy="16" rx="8" ry="18" fill="url(#qs-flame-outer)" opacity="0.85" />
              <ellipse id="qs-flame-mid-el" cx="0" cy="12" rx="5.5" ry="13" fill="url(#qs-flame-mid)" />
              <ellipse id="qs-flame-inner-el" cx="0" cy="9" rx="3" ry="9" fill="url(#qs-flame-inner)" />
            </g>

            <g>
              <path d="M 6 12 L 6 20 L 15 24 L 12 14 Z" fill="url(#qs-fin-back)" />
              <path d="M 6 12 L 12 14 L 10 11 L 6 10 Z" fill="#5B21B6" />
            </g>

            <ellipse cx="0" cy="18" rx="7" ry="3.5" fill="#5B21B6" />
            <path d="M -7 -6 L -7 18 A 7 3.5 0 0 0 7 18 L 7 -6 A 7 3.5 0 0 1 -7 -6" fill="url(#qs-body-main)" />

            <path d="M 4 -4 L 4 16" stroke="#6D28D9" strokeWidth="0.5" opacity="0.3" />
            <path d="M -4 -4 L -4 16" stroke="#DDD6FE" strokeWidth="0.5" opacity="0.3" />
            <path d="M -3 -3 L -3 15" stroke="#DDD6FE" strokeWidth="2" strokeLinecap="round" opacity="0.5" />
            <path d="M -5.5 -1 L -5.5 13" stroke="#DDD6FE" strokeWidth="1" strokeLinecap="round" opacity="0.25" />
            <path d="M 5 -2 L 5 14" stroke="#5B21B6" strokeWidth="1.5" strokeLinecap="round" opacity="0.4" />

            <ellipse cx="0" cy="-6" rx="7" ry="3.5" fill="url(#qs-nose-main)" />
            <path d="M -7 -6 C -7 -14 -4 -22 0 -28 C 4 -22 7 -14 7 -6 Z" fill="url(#qs-nose-main)" />
            <path d="M -2.5 -8 Q -3.5 -16 -1.5 -25" stroke="#DDD6FE" strokeWidth="1.5" strokeLinecap="round" fill="none" opacity="0.6" />
            <path d="M 4 -8 Q 5 -14 3 -22" stroke="#5B21B6" strokeWidth="1" strokeLinecap="round" fill="none" opacity="0.25" />

            <path d="M -6 12 L -6 20 L -15 24 L -12 14 Z" fill="url(#qs-fin-front)" />

            <path d="M 2.5 18 L 0 26 L -2.5 18 Z" fill="#7C3AED" />
            <path d="M 0 18 L 0 26 L -2.5 18 Z" fill="#A78BFA" />
          </g>
        </g>
      </g>

      <g opacity="0.6">
        <circle id="qs-particle1" r="1" fill="#C4B5FD" />
        <circle id="qs-particle2" r="0.8" fill="#A78BFA" />
        <circle id="qs-particle3" r="1.2" fill="#DDD6FE" />
        <circle id="qs-particle4" r="0.7" fill="#8B5CF6" />
      </g>
    </g>

  </svg>;

<div className="landing-wrapper">
  <div className="landing-hero-grid" />

  <div className="landing-hero">
    <h1 className="landing-title">Getting Started</h1>

    <p className="landing-description">
      Synthetiq is a desktop AI workspace that connects to your data and builds apps from a chat message. Follow the Quick Start tutorials or explore the Guide to learn the platform.
    </p>
  </div>

  <div className="landing-cards">
    <div className="feature-cards-grid">
      <a href="https://www.synthetiq.com/docs/quickstart/download-and-login" className="feature-card">
        <div className="feature-card-graphic">
          <QuickstartGraphic />
        </div>

        <div className="feature-card-content">
          <h3 className="feature-card-title">Quick Start</h3>

          <p className="feature-card-description">
            Step-by-step tutorials to install Synthetiq, set your API key,
            and build your first app.
          </p>
        </div>
      </a>

      <a href="https://www.synthetiq.com/docs/platform-docs" className="feature-card">
        <div className="feature-card-graphic">
          <PlatformGraphic />
        </div>

        <div className="feature-card-content">
          <h3 className="feature-card-title">Platform Docs</h3>

          <p className="feature-card-description">
            Deployments, configuration, monitoring, and platform internals.
          </p>
        </div>
      </a>
    </div>
  </div>
</div>