docsearch/docs/source/index.html.haml

---
layout: default
---

.jumbotron.gradient-dark.h800
  .container.pos-rel.z-10
    .spacer120
    .col-md-12
      %header.text-center.color-white
        %h1
          %span.hidden
            DocSearch
          %img.logo{src: 'assets/images/docsearch-logo-horizontal_light.svg', height: 48}
        %h3 The easiest way to add search to your documentation
    .inline.spacer40
    .row.pull-left.m100p.w100p.no-margin
      .col-md-7
        #demo-screens
          %img#placeholder.w100p{src: 'assets/images/screens/screen_react.png', alt: ''}
      .col-md-5
        = partial 'partials/join-form'
  .spacer64


#section_why.page-section.pos-rel
  .spacer40
  .m800.m-l-r-auto.pos-rel.z-10
    %h2.page-section-title.upper-case.text-demi Why DocSearch?
    .spacer32
    %p.color-east-bay.text-regular 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.color-east-bay.text-regular No one's to blame, building a good search for a documentation is a complex challenge.
 We just happen to have a lot of experience doing that, and we want to share it with the world.
  .spacer40

#section_examples.page-section.fill-royal-blue
  .spacer120
  .spacer40
  .container.pos-rel.z-10
    %header
      .text-center.color-white
        %h2.page-section-title.upper-case.text-demi
          DocSearch is live
        .spacer16
        %h3.text-lg
          We’ve integrated DocSearch into several open source projects. Take a look.
        .spacer80
      .row
      - app_data.showcase.each do |entry|
        .col-md-4.col-sm-12.showcase.p-large
          %a.elevation1.fill-white.block.h300.p-large.radius6{href: entry.url, target: '_blank'}
            .screen-wrapper.pos-rel.h200.unscroll
              %img.img-responsive.example.m100p{src: entry.gif, alt: "#{entry.name} docsearch demo", 'data-type-gif': 'true'}
              %img.img-responsive.screen-mask.m100p.pos-abt{src: 'assets/images/mask.png', alt: 'mask'}
            .spacer32.hidden-sm
            .col-md-4.col-sm-12.no-padding.img-container.text-center.vertical-align-middle
              %img.img-responsive.logo{src: entry.logo, alt: entry.name}
            .col-md-8.col-sm-12.vertical-align-middle
              %p.text-lg.color-bunting.text-demi.no-margin
                = entry.name

      .col-md-4.col-sm-12.showcase.p-large.you
        %div.elevation1.fill-white.block.h300.p-large.radius6
          .placeholder-screen.text-center.radius6
            .spacer64
            .spacer32.hidden-sm
            %p.text-lg.color-bunting.text-demi.no-margin
              750+ other websites
              %span.visible-sm.cf
                implementations
            .spacer64.visible-sm




  .spacer64


#section_how.page-section.pos-rel
  .container.pos-rel.z-10
    .row.text-center
      %h2.page-section-title.upper-case.text-demi
        How it works
      .spacer32
    .row
      .col-sm-12
        %img.img-responsive.m100p{src: 'assets/images/illus-howitworks.svg', alt: 'How it works'}
    .spacer32
    .row
      .col-sm-10.col-sm-offset-1
        .row
          .col-sm-4.how-it-works.p-small
            %h3
              %span.how-it-works-number.text-lg.color-royal-blue.text-lg.m-r-small 1
              %span.text-demi
                We crawl your documentation pages
            .spacer16
            %p.color-east-bay.text-regular
              We built a website crawler designed to index every section of your documentation.
            %p.color-east-bay.text-regular
              Just send us the URL of your documentation, and we’ll periodically run the crawler so you’re always up-to-date.
            .spacer30
          .col-sm-4.how-it-works.p-small
            %h3
              %span.how-it-works-number.text-lg.color-royal-blue.text-lg.m-r-small 2
              %span.text-demi
                We configure your search experience
            .spacer16
            %p.color-east-bay.text-regular
              You don’t need to configure any settings or even have an Algolia account.
            %p.color-east-bay.text-regular
              We take care of all of this automatically to ensure the best documentation search experience.
            .spacer30
          .col-sm-4.how-it-works.p-small
            %h3
              %span.how-it-works-number.text-lg.color-royal-blue.text-lg.m-r-small 3
              %span.text-demi
                You add the search autocomplete to your UI
            .spacer16
            %p.color-east-bay.text-regular
              We’ll send you a few lines of code to integrate Algolia autocomplete and power your search.
            %p.color-east-bay.text-regular
              You will receive the same speed, relevance and best-in-class UX as our paying customers.


#section_get-started.page-section.fill-royal-blue
  .spacer120
  .spacer56
  .container.col-md-12.fill-royal-blue.z-10
    %header.text-center
      %h2.page-section-title.color-white.upper-case.text-demi Get started
      .spacer32
      .text-center.color-white
        %p
          We’ll get back to you within a few hours with everything you need to integrate your new search into your website.
          %br
          Oh, and did we mention it's FREE? No commitment. No subscription. Everything is on us! And it won't change.
    .spacer64
  .col-md-12.fill-royal-blue
    = partial 'partials/join-form'
  .inline.spacer120
  .inline.spacer64

%script{src: 'assets/javascripts/main.js'}