Docs/better homepage (#1591)

* Better carousel width

* Learn more button

* Learn more button

* Fix button/width

* Update introduction

* Fix outline colour

* remove custom css

* remove default css

website/i18n/en/code.json

@@ -23,6 +23,9 @@
   "homepage.ButtonText": {
     "message": "Get Started"
   },
+  "homepage.LearnMoreButtonText": {
+    "message": "Learn More"
+  },
   "theme.ErrorPageContent.title": {
     "message": "This page crashed.",
     "description": "The title of the fallback page when the page crashed"

website/i18n/zh-Hans/code.json

@@ -23,6 +23,9 @@
   "homepage.ButtonText": {
     "message": "快速入门"
   },
+  "homepage.LearnMoreButtonText": {
+    "message": "学到更多"
+  },
   "theme.ErrorPageContent.title": {
     "message": "页面已崩溃。",
     "description": "The title of the fallback page when the page crashed"

website/src/css/carousel.css

@@ -18,7 +18,7 @@
   filter: alpha(opacity=40);
   position: absolute;
   z-index: 2;
-  top: 20px;
+  top: 0px;
   background: none;
   border: 0;
   font-size: 32px;
@@ -303,9 +303,9 @@
 
 @media (min-width: 960px) {
   .carousel-root {
-    padding: 15px;
+    padding-bottom: 5px;
   }
   .carousel .slider-wrapper {
-    width: 50%;
+    width: 75%;
   }
 }

website/src/css/custom.css

@@ -4,19 +4,6 @@
  * work well for content-centric websites.
  */
 
-/* You can override the default Infima variables here. */
-:root {
-    --ifm-color-primary: #25c2a0;
-    --ifm-color-primary-dark: rgb(33, 175, 144);
-    --ifm-color-primary-darker: rgb(31, 165, 136);
-    --ifm-color-primary-darkest: rgb(26, 136, 112);
-    --ifm-color-primary-light: rgb(70, 203, 174);
-    --ifm-color-primary-lighter: rgb(102, 212, 189);
-    --ifm-color-primary-lightest: rgb(146, 224, 208);
-    --ifm-code-font-size: 95%;
-    --ifm-container-width-xl: 90%;
-}
-
 .docusaurus-highlight-code-line {
     background-color: rgba(0, 0, 0, 0.1);
     display: block;
@@ -39,7 +26,8 @@ html[data-theme="dark"] .docusaurus-highlight-code-line {
     --ifm-color-primary-lightest: rgb(146, 224, 208);
     --ifm-code-font-size: 95%;
     --ifm-button-color: white;
-    --ifm-container-width-xl: 100%;
+    --ifm-container-width-xl: 50%;
+    --ifm-font-color-base-inverse: #df0000;
 }
 
 .docusaurus-highlight-code-line {
@@ -55,6 +43,23 @@ html[data-theme="dark"] .docusaurus-highlight-code-line {
 
 .container {
     padding-left: 2%;
+    max-width: 1400px;
+    width: 85%;
+}
+
+@media screen and (max-width: 576px) {
+    .container {
+        padding-left: 2%;
+        width: 100%;
+    }
+}
+
+
+@media screen and (max-width: 966px) {
+    .container {
+        padding-left: 2%;
+        width: 90%;
+    }
 }
 
 .prism-code.language-js .token-line::before,

website/src/pages/index.js

@@ -5,17 +5,17 @@ import Link from "@docusaurus/Link";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import styles from "./index.module.css";
 import HomepageFeatures from "../components/HomepageFeatures";
-import { translate } from "@docusaurus/Translate"; // i18n component
+import {translate} from "@docusaurus/Translate"; // i18n component
 import useBaseUrl from "@docusaurus/useBaseUrl";
 
 var Carousel = require("react-responsive-carousel").Carousel;
 
 function HomepageHeader() {
-  const { siteConfig } = useDocusaurusContext();
+  const {siteConfig} = useDocusaurusContext();
   return (
-    <header className={clsx("hero", styles.heroBanner)}>
+      <header className={clsx("hero", styles.heroBanner)}>
-      <div className="container">
+        <div className="container">
-        <Carousel
+          <Carousel
           showArrows={false}
           width={"100%"}
           showThumbs={false}
@@ -53,26 +53,23 @@ function HomepageHeader() {
           </div>
         </Carousel>
 
-        {/*<ThemedImage*/}
-        {/*    alt="Wails Logo"*/}
-        {/*    width="30%"*/}
-        {/*    sources={{*/}
-        {/*        light: useBaseUrl('/img/logo-light.svg'),*/}
-        {/*        dark: useBaseUrl('/img/logo-dark.svg'),*/}
-        {/*    }}*/}
-        {/*/>*/}
-
         <p className="hero__subtitle">
-          {translate({ id: "homepage.Tagline" })}
+          {translate({id: "homepage.Tagline"})}
         </p>
-        <div className={styles.buttons}>
+          <div className={styles.buttons}>
-          <Link
+            <Link
-            className="button button--primary button--lg"
+                className="button button--outline button--lg"
-            to="/docs/gettingstarted/installation"
+                to="/docs/introduction"
-          >
+            >
-            {translate({ id: "homepage.ButtonText" })}
+              {translate({id: "homepage.LearnMoreButtonText"})}
-          </Link>
+            </Link>
-        </div>
+            <Link
+                className="button button--primary button--lg"
+                to="/docs/gettingstarted/installation"
+            >
+              {translate({id: "homepage.ButtonText"})}
+            </Link>
+          </div>
       </div>
     </header>
   );

website/src/pages/index.module.css

@@ -8,6 +8,7 @@
   text-align: center;
   position: relative;
   overflow: hidden;
+  padding-bottom: 35px;
 }
 
 @media screen and (max-width: 966px) {
@@ -17,6 +18,7 @@
 }
 
 .buttons {
+  column-gap: 2rem;
   display: flex;
   align-items: center;
   justify-content: center;

website/versioned_docs/version-v2.0.0-beta.37/introduction.mdx

@@ -11,14 +11,14 @@ Wails is a project that enables you to write desktop apps using Go and web techn
 Consider it a lightweight and fast Electron alternative for Go. You can easily build applications with the flexibility
 and power of Go, combined with a rich, modern frontend.
 
-Wails doesn't hold back with the eye candy either! This is [xbar](https://xbarapp.com) - a desktop application for MacOS
+Wails doesn't hold back with the eye candy either! This is [varly](https://varlyapp.com) - a desktop application for
-written using Wails. It has menus, supports light and dark desktop themes, and the main window uses translucency that
+MacOS & Windows written using Wails. Not only does it look great, it uses native menus and translucency - everything
-gives it that 'frosty' effect of a native app.
+you'd expect from a modern native app.
 
 <p class="text--center">
-  <a href="https://xbarapp.com">
+    <a href="https://varly.app/">
-    <img src="/img/xbar-app-preview-2.png" width="75%" />
+        <img src="/img/varly.png" width="75%"/>
-  </a>
+    </a>
 </p>
 
 ## Quick Start Templates

website/versioned_docs/version-v2.0.0-beta.38/introduction.mdx

@@ -11,13 +11,13 @@ Wails is a project that enables you to write desktop apps using Go and web techn
 Consider it a lightweight and fast Electron alternative for Go. You can easily build applications with the flexibility
 and power of Go, combined with a rich, modern frontend.
 
-Wails doesn't hold back with the eye candy either! This is [xbar](https://xbarapp.com) - a desktop application for MacOS
+Wails doesn't hold back with the eye candy either! This is [varly](https://varlyapp.com) - a desktop application for
-written using Wails. It has menus, supports light and dark desktop themes, and the main window uses translucency that
+MacOS & Windows written using Wails. Not only does it look great, it uses native menus and translucency - everything
-gives it that 'frosty' effect of a native app.
+you'd expect from a modern native app.
 
 <p class="text--center">
-    <a href="https://xbarapp.com">
+    <a href="https://varly.app/">
-        <img src="/img/xbar-app-preview-2.png" width="75%"/>
+        <img src="/img/varly.png" width="75%"/>
     </a>
 </p>