From 694534efd05ba7c6e0a3be4e392742e8d87ff6bb Mon Sep 17 00:00:00 2001 From: Pixelastic Date: Tue, 21 Aug 2018 13:48:49 +0200 Subject: [PATCH] docs(homepage): Rewriting --- docs/src/_layouts/homepage.pug | 96 ++++++++++++++++++++++++---------- 1 file changed, 68 insertions(+), 28 deletions(-) diff --git a/docs/src/_layouts/homepage.pug b/docs/src/_layouts/homepage.pug index 8150daae..34cfa980 100644 --- a/docs/src/_layouts/homepage.pug +++ b/docs/src/_layouts/homepage.pug @@ -98,9 +98,16 @@ block content .glide__caption Yarn .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. + 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 @@ -111,9 +118,17 @@ block content .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 strutured layout give the users more context to understand the product. + .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 strutured 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") @@ -122,31 +137,56 @@ block content .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 Search usage of your documentation gives you unvaluable insights about what your users need to ramp up their knowledge of your product. - .text-3.leading-2.text-center.md_text-left Follow metrics of popular queries, no results or click position to better optimize your content. + .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 all 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 the script so you can integrate Algolia 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 + 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 all 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. + .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.1/getting-started/introduction/')