chore(website) - update text and compress images (#1863)

* chore(website): update language and compress images

* ran linter

* - update aria text

Author: Shane Afsar

packages/website/src/components/ApplyForm.js

@@ -189,48 +189,55 @@ function ApplyForm() {
               required={true}
               id="public"
               name="public"
-              aria-label="Confirm my website is publicly available"
+              aria-label="Confirm my website is a publicly available developer documentation or a technical blog."
               type="checkbox"
               className="uil-mr-8"
             />
-            My website is publicly available
+            My website is a publicly available developer documentation or a
+            technical blog.
           </LabelText>
 
           <LabelText
             className="uil-pt-12 apply-text"
             tag="label"
-            htmlFor="opensource"
-            key="opensource"
+            htmlFor="owner"
+            key="owner"
           >
             <input
               required={true}
-              id="opensource"
-              name="opensource"
-              aria-label="Confirm my website is an technical documentation of an open-source project or technical blog"
+              id="owner"
+              name="owner"
+              aria-label="Confirm I am the owner of the website, or otherwise have obtained and
+              continue to maintain any required consents necessary to use
+              DocSearch on the requested domain. And I have read the checklist."
               type="checkbox"
               className="uil-mr-8"
             />
-            My website is a technical documentation of an open-source project or
-            a technical blog
+            I am the owner of the website, or otherwise have obtained and
+            continue to maintain any required consents necessary to use
+            DocSearch on the requested domain. And I have{' '}
+            <InlineLink href={withBaseUrl('docs/who-can-apply')}>
+              read the checklist.
+            </InlineLink>
           </LabelText>
 
           <LabelText
             className="uil-pt-12 apply-text"
             tag="label"
-            htmlFor="owner"
-            key="owner"
+            htmlFor="opensource"
+            key="opensource"
           >
             <input
               required={true}
-              id="owner"
-              name="owner"
-              aria-label="Confirm I am owner of the website"
+              id="opensource"
+              name="opensource"
+              aria-label="Confirm I understand that this is a Free Service as described in Algolia's Terms of Service"
               type="checkbox"
               className="uil-mr-8"
             />
-            I'm the owner of the website and I have{' '}
-            <InlineLink href={withBaseUrl('docs/who-can-apply')}>
-              read the checklist
+            I understand that this is a Free Service as described in Algolia's{' '}
+            <InlineLink href="https://www.algolia.com/policies/terms/">
+              Terms of Service.
             </InlineLink>
           </LabelText>
 
@@ -247,7 +254,7 @@ function ApplyForm() {
         </div>
 
         <Text small={true} className="uil-ta-center">
-          <InlineLink href="https://www.algolia.com/policies/terms">
+          <InlineLink href="https://www.algolia.com/policies/privacy/">
             Refer to Algolia's Privacy Policy for more information on how we use
             and protect your data
           </InlineLink>

packages/website/src/components/Home.js

@@ -22,7 +22,14 @@ function Home() {
     return (
       <Hero
         id="hero"
-        title={<DocSearchLogo width="100%" />}
+        title={
+          <>
+            <DocSearchLogo width="100%" />
+            <span className="hero-title text-3xl leading-9 font-extrabold md:text-3xl lg:text-3xl md:leading-10 max-w-xxs inline-block">
+              Free Algolia Search For Developer Docs
+            </span>
+          </>
+        }
         background="curves"
         cta={[
           <Button
@@ -68,7 +75,7 @@ function Home() {
                           className="order-2 mt-2 text-lg leading-6 font-medium text-description"
                           id="item-1"
                         >
-                          Free
+                          Free Service
                         </dt>
                         <dd
                           className="order-1 text-5xl leading-none font-extrabold text-indigo-600"
@@ -339,7 +346,7 @@ function Home() {
                 <p className="mt-3 text-lg leading-7 text-description">
                   Search doesn't have to be painful — when a user searches
                   through your docs, they'll get a frictionless modal dialog to
-                  work in.
+                  work in. And it's a Free Service!
                 </p>
 
                 <ul className="mt-10">

packages/website/src/css/custom.css

@@ -128,6 +128,18 @@ html[data-theme='dark'] #hero > div:first-child {
   opacity: 0.4;
 }
 
+/**
+  * Hero component title overrides to match other heading styles
+  */
+.hero-title {
+  color: rgb(28, 30, 33);
+  font-family: var(--ifm-heading-font-family);
+}
+
+html[data-theme='dark'] .hero-title {
+  color: rgb(227, 227, 227);
+}
+
 .docsearch-logo {
   color: #21243d;
 }