<commit_before>{% extends '_layouts/base.html' %}
{% set title = "Free Mobile App Development: Getting Started with Ionic Apps" %}
{% set id = "getting-started" %}
{% set pre_footer = false %}
{% set meta_description = "Get started with your ionic mobile app development. Start building amazing cross platform mobile, desktop, and Progressive Web Apps with the web tech you know and love today." %}
{% set stickyNav = true %}
{% set header_style = 'transparent light' %}
{% set cssPath = 'getting-started' %}
{% set recaptcha = true %}

{% block main %}
<main>
  <section id="landing" class="container u-box">
    <div class="landing__content">
      <h1 class="u-box u-font">Get started with Ionic.</h1>
      <p class="u-box u-font">Follow our step-by-step installation guide to get started with Ionic in minutes, or use our <a href="/start">App Wizard</a> to generate an app visually.</p>
    </div>
    <div class="landing__image u-box u-media">
      <svg width="902" height="502" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle cx="543" cy="288" r="189" stroke="#B2CEFF" stroke-width="8"/>
        <circle cx="543" cy="288" r="82.4" stroke="#7CABFF" stroke-width="8"/>
        <circle cx="684.37" cy="164.37" r="31.97" fill="#fff"/>
        <circle cx="684.37" cy="164.37" r="23.97" fill="#fff"/>
        <circle cx="684.37" cy="164.37" r="19.97" stroke="#639CFF" stroke-width="8"/>
        <circle r="2.44" transform="rotate(45 -222.83 927.98) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -205.55 969.73) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -193.33 940.23) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -188.27 1011.48) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -171 1053.24) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -158.78 1023.73) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -176.05 981.98) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -163.83 952.47) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -146.55 994.22) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -134.33 964.71) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -153.72 1094.99) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -136.45 1136.74) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -124.22 1107.23) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -119.17 1178.49) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -101.9 1220.24) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -89.67 1190.73) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -106.95 1148.98) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -94.73 1119.47) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -77.45 1161.22) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -65.23 1131.72) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -141.5 1065.48) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -129.28 1035.97) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -112 1077.72) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -99.78 1048.22) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -117.06 1006.46) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -104.83 976.96) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -87.56 1018.7) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -75.34 989.2) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -82.5 1089.97) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -70.28 1060.46) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -53 1102.2) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -40.78 1072.7) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -58.06 1030.95) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -45.84 1001.45) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -28.56 1043.2) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -16.34 1013.69) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 308.08 -82.1)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 290.79 -74.94)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 303.01 -69.88)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 273.5 -67.78)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 256.2 -60.62)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 268.43 -55.56)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 285.72 -62.72)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 297.94 -57.66)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 280.65 -50.5)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 292.87 -45.44)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 238.92 -53.47)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 221.63 -46.3)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 233.85 -41.25)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 204.33 -39.15)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 187.04 -31.99)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 199.27 -26.93)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 216.56 -34.09)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 228.78 -29.03)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 211.49 -21.87)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 223.71 -16.81)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 251.14 -48.4)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 263.36 -43.35)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 246.07 -36.19)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 258.3 -31.13)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 275.58 -38.28)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 287.8 -33.22)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 270.51 -26.07)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 282.74 -21)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 241 -23.97)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 253.22 -18.9)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 235.93 -11.75)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 248.15 -6.69)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 265.45 -13.85)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 277.67 -8.79)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 260.38 -1.63)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 272.6 3.43)" fill="#001A3A"/>
        <circle r="2.56" transform="rotate(-135.02 441.4 -84.86)" fill="#ACD8FB"/>
        <circle r="6.94" transform="rotate(-135.02 314.2 -38.45)" fill="#F9CCBE"/>
        <circle r="6.84" transform="rotate(-135.02 344.14 -103.43)" fill="#D1EBFF"/>
        <circle r="6.84" transform="rotate(-135.02 473.32 92.6)" fill="#D1EBFF"/>
        <circle r="10.72" transform="rotate(-135.02 223.58 180.47)" fill="#D1EBFF"/>
        <circle r="3.42" transform="rotate(-135.02 174.88 2.47)" fill="#D1EBFF"/>
        <circle r="4.48" transform="rotate(-135.02 466.02 -135.34)" fill="#78B8F8"/>
        <circle r="3.42" transform="rotate(-135.02 235.87 93.2)" fill="#FF9982"/>
        <circle r="3.42" transform="rotate(-135.02 277.13 89.58)" fill="#ACD8FB"/>
        <circle r="3.42" transform="rotate(-135.02 131.86 177.25)" fill="#ACD8FB"/>
        <path d="M771.3 60.98a13.68 13.68 0 11-18.82-18.47l1.77 3.05a10.16 10.16 0 1013.97 13.71l3.08 1.71z" fill="#639CFF"/>
        <path d="M881.54 347.53a10.25 10.25 0 1114.12 13.85l-2-3.44a6.28 6.28 0 10-8.64-8.48l-3.48-1.93z" fill="#FF9982"/>
        <path d="M275.88 233.64a14.14 14.14 0 11-19.1 19.47l4.41-2.56a9.05 9.05 0 1012.22-12.45l2.47-4.46z" fill="#639CFF"/>
    </g>
    <defs/>
      </svg>
    </div>
  </section>

  <section id="wizard" class="container">
    <div class="wizard__wrapper u-box">
      <div>
        <h2 class="u-font">Try our App Wizard</h2>
        <p class="u-box u-font">Use our App Wizard to generate an Ionic project visually. Choose a template, custom colors, app icon, and JavaScript Framework to get building quicker.</p>
      </div>
      <div>
        <a href="/start" class="wizard__btn button u-box u-font">Open Wizard <ion-icon name="arrow-forward-outline"/></a>
      </div>
    </div>
  </section>

  <section id="install" class="container u-box">
    <h2 class="u-box u-font">Installation Guide</h2>
    <div class="install_cards u-box">
      <article class="install__card u-box">
        <div class="card__step u-font">01</div>
        <h3 class="u-font">Install Ionic</h3>
        <p class="card__text u-font">Install <a href="https://nodejs.org/en/">Node.js</a>, then install the latest Ionic command-line tools in your terminal. Follow the <a href="https://ionicframework.com/docs/developing/android">Android</a> and <a href="https://ionicframework.com/docs/developing/ios">iOS</a> platform guides to install their required tools.</p>
        <div class="card__code u-box">
          <pre class="u-box"><code class="u-box u-font">npm install -g @<span class="highlight">ionic/cli</span></code></pre>
        </div>
        <p class="card__subText u-box u-font">New to command line? Read our <a class="u-box" href="https://blog.ionicframework.com/new-to-the-command-line/">Terminal tutorial <ion-icon name="arrow-forward-outline"/></a></p>
      </article>
      <article class="install__card u-box">
        <div class="card__step u-font">02</div>
        <h3 class="u-font">Start an app</h3>
        <p class="card__text u-font">Create an app using one of our ready-made app templates, or a blank one to start fresh. Check out the <a href="https://market.ionicframework.com">Market</a> for more designs.</p>
        <div class="card__code u-box">
          <pre class="u-box"><code class="u-box u-font">ionic start</span></code></pre>
        </div>
      </article>
      <article class="install__card u-box">
        <div class="card__step u-font">03</div>
        <h3 class="u-font">Run your app</h3>
        <p class="card__text u-font">Much of your app can be built in the browser with <strong class="u-font">ionic serve</strong>. We suggest starting with this workflow. When you’re ready, check out our <a href="https://ionicframework.com/docs/deployment/app-store">Deploying</a> guide.</p>
        <div class="card__code u-box">
          <pre class="u-box"><code class="u-box u-font">ionic serve</code></pre>
        </div>
      </article>
    </div>
    <div class="account__cards u-box u-media">
      <article class="">
        <h2 class="u-font">Create a free Ionic account</h3>
        <p class="card__text u-font">Sign up and get free access to the Ionic Forum, live training events, news updates, and more. Ionic developers often say the <a href="https://ionicframework.com/community">Ionic Community</a> is one of the best parts about building Ionic apps, and we'd love to have you!</p>
      </article>
      <article>
        <ionic-signup-form
          button-text="Create account"
          source="framework-getting-started"
          ga-event-name="Get started"
          ga-event-label="btn-get-started-signup-submit"
          hubspot-event-id="000006040735"
          allow-login="false"
          oauth-redirect="false"
          message=true>
        </ionic-signup-form>
      </article>
    </div>
  </section>

  <section id="nextSteps" class="container u-box">
    <h2 class="u-font">Next steps</h2><commit_msg>update install guide to include cd command<commit_after>{% extends '_layouts/base.html' %}
{% set title = "Free Mobile App Development: Getting Started with Ionic Apps" %}
{% set id = "getting-started" %}
{% set pre_footer = false %}
{% set meta_description = "Get started with your ionic mobile app development. Start building amazing cross platform mobile, desktop, and Progressive Web Apps with the web tech you know and love today." %}
{% set stickyNav = true %}
{% set header_style = 'transparent light' %}
{% set cssPath = 'getting-started' %}
{% set recaptcha = true %}

{% block main %}
<main>
  <section id="landing" class="container u-box">
    <div class="landing__content">
      <h1 class="u-box u-font">Get started with Ionic.</h1>
      <p class="u-box u-font">Follow our step-by-step installation guide to get started with Ionic in minutes, or use our <a href="/start">App Wizard</a> to generate an app visually.</p>
    </div>
    <div class="landing__image u-box u-media">
      <svg width="902" height="502" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle cx="543" cy="288" r="189" stroke="#B2CEFF" stroke-width="8"/>
        <circle cx="543" cy="288" r="82.4" stroke="#7CABFF" stroke-width="8"/>
        <circle cx="684.37" cy="164.37" r="31.97" fill="#fff"/>
        <circle cx="684.37" cy="164.37" r="23.97" fill="#fff"/>
        <circle cx="684.37" cy="164.37" r="19.97" stroke="#639CFF" stroke-width="8"/>
        <circle r="2.44" transform="rotate(45 -222.83 927.98) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -205.55 969.73) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -193.33 940.23) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -188.27 1011.48) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -171 1053.24) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -158.78 1023.73) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -176.05 981.98) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -163.83 952.47) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -146.55 994.22) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -134.33 964.71) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -153.72 1094.99) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -136.45 1136.74) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -124.22 1107.23) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -119.17 1178.49) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -101.9 1220.24) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -89.67 1190.73) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -106.95 1148.98) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -94.73 1119.47) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -77.45 1161.22) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -65.23 1131.72) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -141.5 1065.48) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -129.28 1035.97) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -112 1077.72) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -99.78 1048.22) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -117.06 1006.46) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -104.83 976.96) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -87.56 1018.7) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -75.34 989.2) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -82.5 1089.97) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -70.28 1060.46) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -53 1102.2) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -40.78 1072.7) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -58.06 1030.95) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -45.84 1001.45) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -28.56 1043.2) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(45 -16.34 1013.69) skewX(-.04)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 308.08 -82.1)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 290.79 -74.94)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 303.01 -69.88)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 273.5 -67.78)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 256.2 -60.62)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 268.43 -55.56)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 285.72 -62.72)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 297.94 -57.66)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 280.65 -50.5)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 292.87 -45.44)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 238.92 -53.47)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 221.63 -46.3)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 233.85 -41.25)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 204.33 -39.15)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 187.04 -31.99)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 199.27 -26.93)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 216.56 -34.09)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 228.78 -29.03)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 211.49 -21.87)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 223.71 -16.81)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 251.14 -48.4)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 263.36 -43.35)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 246.07 -36.19)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 258.3 -31.13)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 275.58 -38.28)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 287.8 -33.22)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 270.51 -26.07)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 282.74 -21)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 241 -23.97)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 253.22 -18.9)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 235.93 -11.75)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 248.15 -6.69)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 265.45 -13.85)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 277.67 -8.79)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 260.38 -1.63)" fill="#001A3A"/>
        <circle r="2.44" transform="rotate(-135.02 272.6 3.43)" fill="#001A3A"/>
        <circle r="2.56" transform="rotate(-135.02 441.4 -84.86)" fill="#ACD8FB"/>
        <circle r="6.94" transform="rotate(-135.02 314.2 -38.45)" fill="#F9CCBE"/>
        <circle r="6.84" transform="rotate(-135.02 344.14 -103.43)" fill="#D1EBFF"/>
        <circle r="6.84" transform="rotate(-135.02 473.32 92.6)" fill="#D1EBFF"/>
        <circle r="10.72" transform="rotate(-135.02 223.58 180.47)" fill="#D1EBFF"/>
        <circle r="3.42" transform="rotate(-135.02 174.88 2.47)" fill="#D1EBFF"/>
        <circle r="4.48" transform="rotate(-135.02 466.02 -135.34)" fill="#78B8F8"/>
        <circle r="3.42" transform="rotate(-135.02 235.87 93.2)" fill="#FF9982"/>
        <circle r="3.42" transform="rotate(-135.02 277.13 89.58)" fill="#ACD8FB"/>
        <circle r="3.42" transform="rotate(-135.02 131.86 177.25)" fill="#ACD8FB"/>
        <path d="M771.3 60.98a13.68 13.68 0 11-18.82-18.47l1.77 3.05a10.16 10.16 0 1013.97 13.71l3.08 1.71z" fill="#639CFF"/>
        <path d="M881.54 347.53a10.25 10.25 0 1114.12 13.85l-2-3.44a6.28 6.28 0 10-8.64-8.48l-3.48-1.93z" fill="#FF9982"/>
        <path d="M275.88 233.64a14.14 14.14 0 11-19.1 19.47l4.41-2.56a9.05 9.05 0 1012.22-12.45l2.47-4.46z" fill="#639CFF"/>
    </g>
    <defs/>
      </svg>
    </div>
  </section>

  <section id="wizard" class="container">
    <div class="wizard__wrapper u-box">
      <div>
        <h2 class="u-font">Try our App Wizard</h2>
        <p class="u-box u-font">Use our App Wizard to generate an Ionic project visually. Choose a template, custom colors, app icon, and JavaScript Framework to get building quicker.</p>
      </div>
      <div>
        <a href="/start" class="wizard__btn button u-box u-font">Open Wizard <ion-icon name="arrow-forward-outline"/></a>
      </div>
    </div>
  </section>

  <section id="install" class="container u-box">
    <h2 class="u-box u-font">Installation Guide</h2>
    <div class="install_cards u-box">
      <article class="install__card u-box">
        <div class="card__step u-font">01</div>
        <h3 class="u-font">Install Ionic</h3>
        <p class="card__text u-font">Install <a href="https://nodejs.org/en/">Node.js</a>, then install the latest Ionic command-line tools in your terminal. Follow the <a href="https://ionicframework.com/docs/developing/android">Android</a> and <a href="https://ionicframework.com/docs/developing/ios">iOS</a> platform guides to install their required tools.</p>
        <div class="card__code u-box">
          <pre class="u-box"><code class="u-box u-font">npm install -g @<span class="highlight">ionic/cli</span></code></pre>
        </div>
        <p class="card__subText u-box u-font">New to command line? Read our <a class="u-box" href="https://blog.ionicframework.com/new-to-the-command-line/">Terminal tutorial <ion-icon name="arrow-forward-outline"/></a></p>
      </article>
      <article class="install__card u-box">
        <div class="card__step u-font">02</div>
        <h3 class="u-font">Start an app</h3>
        <p class="card__text u-font">Create an app using one of our ready-made app templates, or a blank one to start fresh. Check out the <a href="https://market.ionicframework.com">Market</a> for more designs.</p>
        <div class="card__code u-box">
          <pre class="u-box"><code class="u-box u-font">ionic start</span></code></pre>
        </div>
      </article>
      <article class="install__card u-box">
        <div class="card__step u-font">03</div>
        <h3 class="u-font">Run your app</h3>
        <p class="card__text u-font">Much of your app can be built in the browser with <strong class="u-font">ionic serve</strong>. We suggest starting with this workflow. When you’re ready, check out our <a href="https://ionicframework.com/docs/deployment/app-store">Deploying</a> guide.</p>
        <div class="card__code u-box">
          <pre class="u-box"><code class="u-box u-font">cd myApp<br/>ionic serve</code></pre>
        </div>
      </article>
    </div>
    <div class="account__cards u-box u-media">
      <article class="">
        <h2 class="u-font">Create a free Ionic account</h3>
        <p class="card__text u-font">Sign up and get free access to the Ionic Forum, live training events, news updates, and more. Ionic developers often say the <a href="https://ionicframework.com/community">Ionic Community</a> is one of the best parts about building Ionic apps, and we'd love to have you!</p>
      </article>
      <article>
        <ionic-signup-form
          button-text="Create account"
          source="framework-getting-started"
          ga-event-name="Get started"
          ga-event-label="btn-get-started-signup-submit"
          hubspot-event-id="000006040735"
          allow-login="false"
          oauth-redirect="false"
          message=true>
        </ionic-signup-form>
      </article>
    </div>
  </section>

  <section id="nextSteps" class="container u-box">
    <h2 class="u-font">Next steps</h2>
{'fraction_non_alphanumeric': 0.21419553381204134, 'fraction_numerical': 0.15544859149372683, 'mean_word_length': 3.102120084156012, 'pattern_counts': {'":': 0, '<': 418, '<?xml version=': 0, '>': 418, 'https://': 14, 'lorem ipsum': 0, 'www.': 2, 'xml': 2}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '106855', 'n_tokens_mistral': 11600, 'n_tokens_neox': 9225, 'n_words': 2038}