homepage.pug

extends main.pug

block script
  script(src="https://unpkg.com/@glidejs/glide@3.2.3/dist/glide.min.js")
  script(src="https://unpkg.com/popper.js/dist/umd/popper.min.js")
  script(src="js/home.js")

block nav
  .flex.justify-start.items-center.mx-1
    a.text-1.text-solstice.hover_text-nebula.hover_no-underline.mr-1(href="./what-is-docsearch.html") Documentation
    a.h-1x.w-1x.text-solstice.fill-current.items-center.hover_text-grey-darker.mr-1(href=site.repo, target="_blank")
      include ../assets/icons/github.svg

block content
  .bg-docsearch-hero
    .max-w-md.m-auto.text-center.px-2
      img.mt-3.mb-1.ml-auto.mr-auto(src="assets/docsearch-logo.svg", alt="DocSearch logo" width=480)
      .text-2.text-nova.mb-3 The best search experience for docs, integrates in minutes, for free
      .text-5.text-telluric.mb-3 Providing search for 1 500+ docs, and counting.
      a.c-button.c-button-primary(href="#join-docsearch-program") Join the Program
  
  .bg-moon.px-2
    .max-w-xl.m-auto.text-center.mt-3.mb-2
      .glide
        .glide__track(data-glide-el="track")
          .glide__slides
            .glide__slide
              img(src="assets/logos/babel.jpg", alt="DocSearch + Babel", width=60)
              .glide__caption Babel
            .glide__slide
              img(src="assets/logos/bootstrap.jpg", alt="DocSearch + Bootstrap", width=60)
              .glide__caption Bootstrap
            .glide__slide
              img(src="assets/logos/circleio.jpg", alt="DocSearch + CircleCI", width=60)
              .glide__caption CircleCI
            .glide__slide
              img(src="assets/logos/electron.jpg", alt="DocSearch + Electron", width=60)
              .glide__caption Electron
            .glide__slide
              img(src="assets/logos/ember.jpg", alt="DocSearch + Ember", width=60)
              .glide__caption Ember
            .glide__slide
              img(src="assets/logos/eslint.jpg", alt="DocSearch + EsLint", width=60)
              .glide__caption EsLint
            .glide__slide
              img(src="assets/logos/gitlab.jpg", alt="DocSearch + Gitlab", width=60)
              .glide__caption Gitlab
            .glide__slide
              img(src="assets/logos/jquery.jpg", alt="DocSearch + jQuery", width=60)
              .glide__caption jQuery
            .glide__slide
              img(src="assets/logos/grafana.jpg", alt="DocSearch + Grafana", width=60)
              .glide__caption Grafana
            .glide__slide
              img(src="assets/logos/brew.png", alt="DocSearch + Brew", width=60)
              .glide__caption Brew
            .glide__slide
              img(src="assets/logos/graphql.jpg", alt="DocSearch + GraphQL", width=60)
              .glide__caption GraphQL
            .glide__slide
              img(src="assets/logos/jekyll.jpg", alt="DocSearch + Jekyll", width=60)
              .glide__caption Jekyll
            .glide__slide
              img(src="assets/logos/jest.png", alt="DocSearch + Jest", width=60)
              .glide__caption Jest
            .glide__slide
              img(src="assets/logos/momentjs.jpg", alt="DocSearch + MomentJS", width=60)
              .glide__caption MomentJS
            .glide__slide
              img(src="assets/logos/netlify.jpg", alt="DocSearch + Netlify", width=60)
              .glide__caption Netlify
            .glide__slide
              img(src="assets/logos/paypal.jpg", alt="DocSearch + PayPal", width=60)
              .glide__caption PayPal
            .glide__slide
              img(src="assets/logos/postman.png", alt="DocSearch + Postman", width=60)
              .glide__caption Postman
            .glide__slide
              img(src="assets/logos/react.jpg", alt="DocSearch + React", width=60)
              .glide__caption React
            .glide__slide
              img(src="assets/logos/scala.jpg", alt="DocSearch + Scala", width=60)
              .glide__caption Scala
            .glide__slide
              img(src="assets/logos/serverless.jpg", alt="DocSearch + Serverless", width=60)
              .glide__caption Serverless
            .glide__slide
              img(src="assets/logos/pipenv.png", alt="DocSearch + pipenv", width=60)
              .glide__caption pipenv
            .glide__slide
              img(src="assets/logos/requests.png", alt="DocSearch + Requests", width=60)
              .glide__caption Requests
            .glide__slide
              img(src="assets/logos/socketio.jpg", alt="DocSearch + Socket.io" , width=60)
              .glide__caption Socket.io
            .glide__slide
              img(src="assets/logos/trello.jpg", alt="DocSearch + Trello", width=60)
              .glide__caption Trello
            .glide__slide
              img(src="assets/logos/vue.jpg", alt="DocSearch + Vue", width=60)
              .glide__caption Vue
            .glide__slide
              img(src="assets/logos/webpack.jpg", alt="DocSearch + Webpack", width=60)
              .glide__caption Webpack
            .glide__slide
              img(src="assets/logos/yarn.jpg", alt="DocSearch + Yarn", width=60)
              .glide__caption Yarn
            .glide__slide
              img(src="assets/logos/gatsby.png", alt="DocSearch + Gatsby", width=60)
              .glide__caption Gatsby
            .glide__slide
              img(src="assets/logos/gradle.png", alt="DocSearch + Gradle", width=60)
              .glide__caption Gradle
            .glide__slide
              img(src="assets/logos/twilio.png", alt="DocSearch + Twilio", width=60)
              .glide__caption Twilio
            .glide__slide
              img(src="assets/logos/hugo.png", alt="DocSearch + Hugo", width=60)
              .glide__caption Hugo
            .glide__slide
              img(src="assets/logos/cordova.png", alt="DocSearch + Cordova", width=60)
              .glide__caption Cordova
            .glide__slide
              img(src="assets/logos/vuetify.png", alt="DocSearch + Vuetify", width=60)
              .glide__caption Vuetify
            .glide__slide
              img(src="assets/logos/ant-design.png", alt="DocSearch + Ant Design", width=60)
              .glide__caption Ant Design
            .glide__slide
              img(src="assets/logos/home-assistant.png", alt="DocSearch + Home Assistant", width=60)
              .glide__caption Home Assistant
                    
    .max-w-md.m-auto.text-center
      h2.text-solstice.text-5.normal.pb-2
        |State-of-the-art search for technical documentation
      p.text-3.pb-1.text-telluric
        |We're kind of scratching our own itch here. As developers, we spend
        |a lot of time reading documentation, and it isn’t always easy to find
        |the information we need.
      p.text-3.pb-2.text-telluric
        |No one's to blame, building a good search is a complex challenge. We
        |just happen to have a lot of experience doing that, and we want to
        |share it with the developer community.
    
    .max-w-xl.m-auto.pt-3.mb-2
      .demo-header-wrapper
        .docsearch-live-demo-input-wrapper
          input.docsearch-live-demo-input
      .demo-content-wrapper

  .px-2.bg-analytics
    .max-w-xl.m-auto.text-center.mb-2
      .max-w-md.m-auto.mb-3
        .text-solstice.text-5.normal.pb-2
          |Learn-as-you-type experience
        .pb-1.text-3.leading-2 
          |Documentation speaks to your users. Ideally, this conversation will
          |be pleasant and efficient. Everyone visiting your documentation page
          |has a different need: Some are exploring your product, some are
          |trying to get started, and some are stuck and need help.
        .text-3.leading-2 
          |DocSearch is designed to provide relevant search results at every
          |level. Its structured layout give the users more context to understand
          |the product.
      .max-w-xl.m-auto
        img.hidden.md_block(src="assets/docsearch-UI-anatomy.png", alt="Anatomy of DocSearch UI")
        
    .max-w-lg.m-auto.mb-2
      .flex.flrw
        .fln.w-100.md_w-40.text-center
          img(src="assets/illus-analytics.svg", alt="DocSearch Analytics", width=400)
        .fln.w-100.md_w-50.px-1.md_pt-3.mb-3
          .text-solstice.text-5.normal.pb-2.text-center.md_text-left
            |Powerful Analytics with Algolia
          .text-3.leading-2.text-center.md_text-left.pb-1
            |Follow your users' search behavior to get invaluable insights into
            |what they are doing and to improve their experience - and to help
            |them learn more about your product.
          .text-3.leading-2.text-center.md_text-left
            |Use metrics such as Popular Queries, No Results, and Click Position
            |to better optimize your content. 
              
    .max-w-xl.m-auto 
      h2.text-solstice.text-5.normal.pb-2.text-center.mb-1 
        | How it works 
      img(src="assets/docsearch-how-it-works.png", alt="how DocSearch works") 
      .max-w-lg.m-auto 
        .flex.flrw 
          .fln.w-100.md_w-33.px-2.p-2
            h3.pb-1.text-3.leading-2
              |We crawl your documentation pages
            p.text-1.leading-2 
              |We built a website crawler designed to index every section of your
              |documentation.
            p.text-1.leading-2 
              |Just send us the URL of your documentation, and we’ll run the
              |crawler every 24h so you’re always up-to-date.
          .fln.w-100.md_w-33.px-2.p-2 
            h3.pb-1.text-3.leading-2
              |We configure your search experience
            p.text-1.leading-2
              |You don’t need to configure any settings or even have an Algolia
              |account.
            p.text-1.leading-2
              |We take care of this automatically to ensure the best
              |documentation search experience.
          .fln.w-100.md_w-33.px-2.p-2 
            h3.pb-1.text-3.leading-2
              |You add the search autocomplete to your UI
            p.text-1.leading-2
              | We'll send you a script that integrates Algolia's autocomplete to
              | power your search.
            p.text-1.leading-2
              |You will receive the same speed, relevance, and best-in-class UX as
              |our paying customers. 
  
    .max-w-xl.m-auto.mt-3.px-1.pb-3
      .text-solstice.text-5.normal.pb-2.text-center
        |Try it live
      .pb-2.text-3.leading-2.text-center
        |We helped integrate DocSearch into several open source projects. Have
        |a look.
      .flex.flrw
        .fln.w-100.sm_w-50.md_w-25.p-1.flex.flrnw
          a.c-card.custom-demo.fla.flex.flcnw.p-05(href='http://getbootstrap.com/docs/4.4/getting-started/introduction/')
            .fln.flc.relative.text-0.max-w-5.m-auto
              img(src='assets/demos/example-bootstrap.gif', alt='Bootstrap')
            .fln.pt-1.flex.flrnw.flc
              .fln.text-0
                img.h-2(src='assets/logos/bootstrap.jpg', alt='Bootstrap')
              .fla.pl-1.text-solstice.uppercase.bold Bootstrap
        .fln.w-100.sm_w-50.md_w-25.p-1.flex.flrnw
          a.c-card.custom-demo.fla.flex.flcnw.p-05(href='https://vuejs.org/v2/guide/')
            .fln.flc.relative.text-0.max-w-5.m-auto
              img(src='assets/demos/example-vuejs.gif', alt='Vue')
            .fln.pt-1.flex.flrnw.flc
              .fln.text-0
                img.h-2(src='assets/logos/vue.jpg', alt='Vue')
              .fla.pl-1.text-solstice.uppercase.bold Vue
        .fln.w-100.sm_w-50.md_w-25.p-1.flex.flrnw
          a.c-card.custom-demo.fla.flex.flcnw.p-05(href='https://reactjs.org/docs/getting-started.html')
            .fln.flc.relative.text-0.max-w-5.m-auto
              img(src='assets/demos/example-react.gif', alt='React')
            .fln.pt-1.flex.flrnw.flc
              .fln.text-0
                img.h-2(src='assets/logos/react.jpg', alt='React')
              .fla.pl-1.text-solstice.uppercase.bold React
        .fln.w-100.sm_w-50.md_w-25.p-1.flex.flrnw
          a.c-card.custom-demo.fla.flex.flcnw.p-05(href='https://momentjs.com/')
            .fln.flc.relative.text-0.max-w-5.m-auto
              img(src='assets/demos/example-momentjs.gif', alt='MomentJS')
            .fln.pt-1.flex.flrnw.flc
              .fln.text-0
                img.h-2(src='assets/logos/momentjs.jpg', alt='MomentJS')
              .fla.pl-1.text-solstice.uppercase.bold MomentJS

  .relative.bg-white-pure
    .bg-footer
    .relative.max-w-sm.m-auto.mt-2.z-2
      .max-w-md.m-auto.py-3
        .text-5.normal.pb-2.text-white.text-center Get started
        .pb-1.text-3.leading-2.text-white.text-center We’ll get back to you with everything you need to integrate your new search into your website.
        .text-3.leading-2.text-white.text-center Oh, and did we mention it's FREE?
        .text-3.leading-2.text-white.text-center No commitment. No subscription. Everything is on us!
        .block.pt-3(id="join-docsearch-program")
          include ../_includes/apply-form.pug

    .text-center.mt-2
      .text-1.mb-3.leading-2
        span.block.mb-1.sm_inline.whitespace-no-wrap DocSearch 2015-now
        span.block.hidden.sm_inline.mx-1 •
        span.block.sm_inline.whitespace-no-wrap Designed and built by
          a(href="https://www.algolia.com/")
            img.align-top.pl-05.inline-block(src="assets/algolia-logo.svg", alt="search by Algolia", width=100)
      ul.inline-block.text-2.mb-3
        li.p-1.w-100.md_w-auto.inline-block
          a(href="https://github.com/algolia/docsearch/blob/master/LICENSE") Code licensed under MIT
        li.p-1.w-100.md_w-auto.inline-block
          a(href="https://github.com/algolia/docsearch") GitHub
        li.p-1.w-100.md_w-auto.inline-block
          a(href="https://github.com/algolia/docsearch/issues") Issues
        li.p-1.w-100.md_w-auto.inline-block
          a(href="https://github.com/algolia/docsearch/blob/master/CHANGELOG.md") Changelog
        li.p-1.w-100.md_w-auto.inline-block
          a(href="https://discourse.algolia.com/tags/docsearch") Community Forum
        li.p-1.w-100.md_w-auto.inline-block
          a(href="https://discord.gg/qqCWs99") Discord
      
      //include ../_includes/newsletter.pug

  .my-popper
    .popper__arrow(x-arrow='right')
    img(src='https://docsearch-shared.netlify.com/docsearch-logo.png', alt='DocSearch', width=200)
    p
      | Try to search for expressions like 
      a.ds-sample-query(data-sample='grid', href='#') grid
      | , 
      a.ds-sample-query(data-sample='form group', href='#') form group
      |  or 
      a.ds-sample-query(data-sample='invisble', href='#') invisble
      |  (sic) .