diff --git a/docs/src/_layouts/homepage.pug b/docs/src/_layouts/homepage.pug index 125f2627..62f5a0bb 100644 --- a/docs/src/_layouts/homepage.pug +++ b/docs/src/_layouts/homepage.pug @@ -5,10 +5,11 @@ block content .max-w-lg.m-auto.text-center img.mt-3(src="assets/docsearch-logo.svg", alt="DocSearch logo" width=520) .text-2.text-nova.mb-3 The best search experience for docs, integrates in minutes, for free. - .text-5.text-telluric.mb-2 Already 847 docs are providing search through DocSearch + .text-5.text-telluric.mb-3 Already 847 docs are providing search through DocSearch a.c-button.c-button-primary(href="what-is-talksearch.html") Join the Program - .bg-moon - .max-w-lg.m-auto.text-center + + .bg-moon.p-3 + .max-w-lg.m-auto.text-center.mb-2 .glide .glide__track(data-glide-el="track") .glide__slides @@ -63,50 +64,47 @@ block content .glide__slide img(src="assets/logos/yarn.jpg", alt="DocSearch + ", width=80) - .bgtb-moon-white-pure .max-w-md.m-auto.text-center h2.text-solstice.text-5.normal.pb-2 Offer your docs a Learn-as-you-type experience p.text-3.pb-2.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.text-telluric 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. - .max-w-xl.m-auto - img(src="assets/bg-docsearch-live-demo-bootstrap.png", alt="DocSearch logo") - + .max-w-xl.m-auto.pt-3 + img(src="assets/bg-docsearch-live-demo-bootstrap.png", alt="Live Demo Docsearch on Bootsrap") .max-w-xl.m-auto.text-center - .max-w-md.m-auto + .max-w-md.m-auto.mb-3 .text-solstice.text-5.normal.pb-2 Search Designed for Documentation .pb-2.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. - .pb-2.text-3.leading-2 DocSearch is designed to provide relevant search results at every level. Its strutured layout give the users more context to understand the product. We call it the “Learn as you type” effect. - .max-w-xl.m-auto + .max-w-xl.m-auto.mb-3 img(src="assets/docsearch-UI-anatomy.png", alt="Anatomy of DocSearch UI") - - - .max-w-lg.m-auto.text-center - h2.text-solstice.text-5.normal.pb-2 How it works + .max-w-md.m-auto + .pb-2.text-3.leading-2 DocSearch is designed to provide relevant search results at every level. Its strutured layout give the users more context to understand the product. We call it the “Learn as you type” effect. + + .max-w-lg.m-auto.mt-4 + h2.text-solstice.text-5.normal.pb-2.text-center How it works img(src="assets/docsearch-how-it-works.png", alt="how DocSearch works") .flex.flrw .fln.w-100.sm_w-50.md_w-33.p-1 - h3.pb-2.text-3.leading-2 We crawl your documentation pages - p.text-3 We built a website crawler designed to index every section of your documentation. - p.text-3 Just send us the URL of your documentation, and we’ll run the crawler every 24h so you’re always up-to-date. + h3.pb-1.text-3.leading-2 We crawl your documentation pages + p.text-2.leading-2 We built a website crawler designed to index every section of your documentation. + p.text-2.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.sm_w-50.md_w-33.p-1 - h3.pb-2.text-3.leading-2 We configure your search experience - p.text-3 You don’t need to configure any settings or even have an Algolia account. - p.text-3 We take care of all of this automatically to ensure the best documentation search experience. + h3.pb-1.text-3.leading-2 We configure your search experience + p.text-2.leading-2 You don’t need to configure any settings or even have an Algolia account. + p.text-2.leading-2 We take care of all of this automatically to ensure the best documentation search experience. .fln.w-100.sm_w-50.md_w-33.p-1 - h3.pb-2.text-3.leading-2 You add the search autocomplete to your UI - p.text-3 We’ll send you the script so you can integrate Algolia autocomplete to power your search. - p.text-3 You will receive the same speed, relevance and best-in-class UX as our paying customers. + h3.pb-1.text-3.leading-2 You add the search autocomplete to your UI + p.text-2.leading-2 We’ll send you the script so you can integrate Algolia autocomplete to power your search. + p.text-2.leading-2 You will receive the same speed, relevance and best-in-class UX as our paying customers. - - - .max-w-xl.m-auto.pt-1 + .max-w-xl.m-auto.mt-4 .max-w-md.m-auto.px-1.text-center .text-solstice.text-5.normal.pb-2 Powerful Analytics with Algolia .pb-2.text-3.leading-2 Search usage of your documentation givese you unvaluable insights about what your users need to ramp up their knowledge of your product. Follow metrics of popular queries, no results or click position to better optimize your content. + .max-w-lg.m-auto.mt-1 img(src="assets/illus-analytics.svg", alt="DocSearch Analytics") - .max-w-xl.m-auto.pt-1 + .max-w-xl.m-auto.mt-4 .max-w-md.m-auto.px-1.text-center .text-solstice.text-5.normal.pb-2 Try it live .pb-2.text-3.leading-2 We’ve helped to integrate DocSearch into several open source projects. Take a look. @@ -160,8 +158,7 @@ block content img.h-2(src='demos/takeoffconference/logo-small.png', alt='Logo of TakeOff Conf') .fla.pl-1.text-solstice.uppercase.bold TakeOff Conf - - .max-w-xl.m-auto.pt-1 + .max-w-xl.m-auto.mt-4 .max-w-md.m-auto.px-1.text-center .text-solstice.text-5.normal.pb-2 Get started .pb-2.text-3.leading-2 We’ll get back to you within a few hours with everything you need to integrate your new search into your website. Oh, and did we mention it's FREE? No commitment. No subscription. Everything is on us! diff --git a/docs/src/assets/bg-docsearch-live-demo-bootstrap.png b/docs/src/assets/bg-docsearch-live-demo-bootstrap.png index eaa9a813..84965114 100644 Binary files a/docs/src/assets/bg-docsearch-live-demo-bootstrap.png and b/docs/src/assets/bg-docsearch-live-demo-bootstrap.png differ diff --git a/docs/src/style.css b/docs/src/style.css index 9583d47d..81a70156 100644 --- a/docs/src/style.css +++ b/docs/src/style.css @@ -12,12 +12,16 @@ -moz-osx-font-smoothing: grayscale; } +body { + background-color: #f5f5fa; +} + /* Hero */ .bg-docsearch-hero { background-image: url('assets/bg-docsearch.svg'), linear-gradient(#fff, #f5f5fa); background-size: cover; background-repeat: no-repeat; - background-position: center bottom; + background-position: center calc(100% - 18px); } /* Gradients */