diff --git a/docs/src/_layouts/homepage.pug b/docs/src/_layouts/homepage.pug index 701b9f9b..53fcb5c6 100644 --- a/docs/src/_layouts/homepage.pug +++ b/docs/src/_layouts/homepage.pug @@ -63,8 +63,7 @@ block content img(src="assets/logos/webpack.png", alt="DocSearch + Webpack", width=60) .glide__slide img(src="assets/logos/yarn.jpg", alt="DocSearch + Yarn", width=60) - - + .max-w-md.m-auto.text-center h2.text-solstice.text-5.normal.pb-2 State-of-the-art search for 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. @@ -76,8 +75,8 @@ block content input.docsearch-live-demo-input .demo-content-wrapper - .bg-analytics.px-2 - .max-w-xl.m-auto.text-center + .bg-analytics.px-2 + .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. @@ -85,11 +84,11 @@ block content .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-3 + .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 + .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. @@ -149,14 +148,13 @@ block content img.h-2(src='assets/logos/stripe.png', alt='Stripe') .fla.pl-1.text-solstice.uppercase.bold Stripe - .bg-footer(id="join-docsearch-program").px-3 + .bg-footer(id="join-docsearch-program").px-2 .max-w-sm.m-auto.mt-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 within a few hours with everything you need to integrate your new search into your website. .pb-3.text-3.leading-2.text-white.text-center Oh, and did we mention it's FREE? No commitment. No subscription. Everything is on us! - form.m-auto.max-w-sm.elevation.p-3 - + form.m-auto.max-w-sm.elevation.p-2.md_p-3 .mb-2 label.control-label(for="url") Website input#url.form-control(name="url", placeholder="https://website.com/doc") @@ -170,24 +168,33 @@ block content input(name="owner", type="checkbox") span I'm the owner of that website .mb-2 - p Refer to + p.leading-2 Refer to a.clickable(href="https://www.algolia.com/policies/terms") Algolia's Privacy Policy | for more information on how we use and protect your data + button.c-button.c-button-primary.w-100(type="submit") Join the program - button.c-button.c-button-primary(type="submit") Join the program - - .text-center - p Docsearch 2015-2018 - Designed and built with love by Algolia - ul - li - a(href="https://github.com/algolia/docsearch") Code licensed under MIT - li - a(href="https://github.com/algolia/docsearch") Github - li - a(href="https://github.com/algolia/docsearch") Issues - li - a(href="https://github.com/algolia/docsearch") Changelog - li - a(href="https://github.com/algolia/docsearch") Discord - li - a(href="https://github.com/algolia/docsearch") Newsletter + .text-center.p-2.pb-4 + p.text-2.mb-2.leading-2 Docsearch 2015-2018 - Designed and built with love by + img.align-top.pl-1(src="assets/algolia-logo.svg", alt="search by Algolia", width=110) + ul.list-reset.inline-block.text-2.mb-4 + li.inline.p-1 + a(href="https://github.com/algolia/docsearch/blob/master/LICENSE") Code licensed under MIT + li.inline.p-1 + a(href="https://github.com/algolia/docsearch") Github + li.inline.p-1 + a(href="https://github.com/algolia/docsearch/issues") Issues + li.inline.p-1 + a(href="https://github.com/algolia/docsearch/blob/master/CHANGELOG.md") Changelog + li.inline.p-1 + a(href="https://discourse.algolia.com/tags/docsearch") Community Forum + li.inline.p-1 + a(href="https://discord.gg/ax4NkP") Discord + + + .text-5.mb-1 Sign Up to our Newsletter + .text-2.mb-2.text-nova Follow project updates and general vector loveliness + .max-w-sm.flex.m-auto.mt-1 + .fla + input#newsletter_email.form-control-primary.w-100(name="newsletter_email", placeholder="you@example.org", type="email") + .fla.pl-1 + .button.c-button.w-100 Sign Up diff --git a/docs/src/favicon.ico b/docs/src/favicon.ico index 22115f83..5bc2e7ad 100644 Binary files a/docs/src/favicon.ico and b/docs/src/favicon.ico differ diff --git a/docs/src/style.css b/docs/src/style.css index ac5883b7..547835e9 100644 --- a/docs/src/style.css +++ b/docs/src/style.css @@ -39,7 +39,7 @@ body { background-color: #FDFDFE; background-size: cover; background-repeat: no-repeat; - background-position: center -150px; + background-position: center -450px; } /* Logo slider (gslide) */ @@ -84,6 +84,7 @@ body { background-position: center -46px; } +/* Forms */ .control-label { display: inline-block; margin-bottom: 4px; @@ -99,6 +100,14 @@ body { margin-bottom: 8px; } +.form-control-primary { + background: #FFFFFF; + box-shadow: 0 2px 0 0 rgba(255,255,255,0.80), inset 0 2px 9px 0 rgba(93,100,148,0.30); + border-radius: 24px; + height: 42px; + padding: 0 16px; +} + .elevation { background-image: linear-gradient(0deg, #F5F5FA 0%, #FFFFFF 100%); box-shadow: 0 2px 4px 0 rgba(93,100,148,0.20), 0 5px 15px 0 rgba(37,44,97,0.15);