Enhance homepage (#459)

* Upgrade Tailwind and refactor opening section * Update remaining visible sections * Use docusaurus logo and apply minor fix * Add helper function for adding utm params and update css * Cleanup * Add description and nav icon dimension * Convert image to webp * Fix error
game-ci · Mar 28, 2024 · bde2b60 · bde2b60
1 parent e3cec5b
commit bde2b60
Show file tree

Hide file tree

Showing 17 changed files with 503 additions and 398 deletions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -114,6 +114,8 @@ const config = {
           alt: 'GameCI Logo',
           src: 'assets/images/game-ci-brand-logo-wordmark-light.svg',
           srcDark: 'assets/images/game-ci-brand-logo-wordmark.svg',
+          width: 32,
+          height: 32,
         },
         items: [
           {
@@ -277,8 +279,8 @@ const config = {
         ],
         copyright: `<p>
           Made with ❤ by open source contributors using
-          <a href="https://docusaurus.io" target="_blank" rel="noreferrer noopener">
-            <span aria-label="Docusaurus">🦖</span>
+          <a href="https://docusaurus.io?utm_source=game-ci" target="_blank" rel="noreferrer noopener" style="text-decoration: none;">
+            <svg title=""Docusaurus width="1em" viewBox="0 0 256 217.631"><g transform="matrix(1.312821 0 0 1.312821 -3.938461 -22.614974)" fill-rule="evenodd"><path d="M99 52h84v34H99z" fill="#fff"/><g fill="#3ecc5f"><path d="M23 163c-7.398 0-13.843-4.027-17.303-10C3.992 155.944 3 159.353 3 163c0 11.046 8.954 20 20 20h20v-20H23z"/><path d="M112.98 57.376L183 53V43c0-11.046-8.955-20-20-20H73l-2.5-4.33a2.89 2.89 0 0 0-5 0L63 23l-2.5-4.33a2.89 2.89 0 0 0-5 0L53 23l-2.5-4.33a2.89 2.89 0 0 0-5 0L43 23c-.022 0-.043.003-.065.003l-4.142-4.14a2.89 2.89 0 0 0-4.829 1.294l-1.368 5.104-5.193-1.392a2.89 2.89 0 0 0-3.535 3.536l1.4 5.193-5.103 1.367a2.89 2.89 0 0 0-1.295 4.83L23 42.937c0 .02-.002.042-.002.064l-4.33 2.5a2.89 2.89 0 0 0 0 5L23 53l-4.33 2.5a2.89 2.89 0 0 0 0 5L23 63l-4.33 2.5a2.89 2.89 0 0 0 0 5L23 73l-4.33 2.5a2.89 2.89 0 0 0 0 5L23 83l-4.33 2.5a2.89 2.89 0 0 0 0 5L23 93l-4.33 2.5a2.89 2.89 0 0 0 0 5L23 103l-4.33 2.5a2.89 2.89 0 0 0 0 5L23 113l-4.33 2.5a2.89 2.89 0 0 0 0 5L23 123l-4.33 2.5a2.89 2.89 0 0 0 0 5L23 133l-4.33 2.5a2.89 2.89 0 0 0 0 5L23 143l-4.33 2.5a2.89 2.89 0 0 0 0 5L23 153l-4.33 2.5a2.89 2.89 0 0 0 0 5L23 163c0 11.046 8.954 20 20 20h120c11.045 0 20-8.954 20-20V83l-70.02-4.376C107.37 78.273 103 73.62 103 68s4.37-10.273 9.98-10.624"/><path d="M143 183h30v-40h-30z"/></g><path d="M193 158c-.22 0-.428.037-.64.064l-.116-.45c1.806-.754 3.075-2.534 3.075-4.613a5 5 0 0 0-5-5 4.96 4.96 0 0 0-3.016 1.036l-.335-.336c.627-.836 1-1.862 1-2.987a5 5 0 0 0-9.599-1.959l-.445-.115c.027-.2.064-.42.064-.64a5 5 0 1 0-10 0c0 .22.037.428.064.64l-.445.115a5 5 0 0 0-9.599 1.959c0 1.125.384 2.15 1 2.987A19.93 19.93 0 0 0 153 163c0 11.046 8.954 20 20 20 9.34 0 17.16-6.4 19.36-15.064.2.027.42.064.64.064a5 5 0 1 0 0-10" fill="#44d860"/><path d="M153 123h30v-20h-30z" fill="#3ecc5f"/><use xlink:href="#A" fill="#44d860"/><path d="M63 55.5a2.5 2.5 0 0 1-2.5-2.5 7.51 7.51 0 0 0-7.5-7.5 7.51 7.51 0 0 0-7.5 7.5 2.5 2.5 0 1 1-5 0c0-6.893 5.607-12.5 12.5-12.5S65.5 46.107 65.5 53a2.5 2.5 0 0 1-2.5 2.5"/><path d="M103 183h60c11.046 0 20-8.954 20-20V93h-60c-11.046 0-20 8.954-20 20v70z" fill="#ffff50"/><use xlink:href="#B"/><use xlink:href="#B" y="20"/><use xlink:href="#B" y="40"/><use xlink:href="#B" y="-9.814"/><use xlink:href="#B" y="10"/><use xlink:href="#B" y="30"/><path d="M183 61.6c-.012 0-.022-.006-.034-.005-3.1.105-4.552 3.196-5.842 5.923-1.346 2.85-2.387 4.703-4.093 4.647-1.9-.068-2.97-2.202-4.113-4.46-1.314-2.593-2.814-5.535-5.963-5.425-3.046.104-4.513 2.794-5.807 5.167-1.377 2.528-2.314 4.065-4.12 3.994-1.927-.07-2.95-1.805-4.136-3.813-1.32-2.236-2.848-4.75-5.936-4.664-2.994.103-4.465 2.385-5.763 4.4-1.373 2.13-2.335 3.428-4.165 3.35-1.973-.07-2.992-1.5-4.17-3.177-1.324-1.873-2.816-3.993-5.895-3.9-2.928.1-4.4 1.97-5.696 3.618-1.232 1.564-2.194 2.802-4.23 2.724a1 1 0 1 0-.072 2c3.017.1 4.545-1.8 5.872-3.487 1.177-1.496 2.193-2.787 4.193-2.855 1.926-.082 2.83 1.115 4.195 3.045 1.297 1.834 2.77 3.914 5.73 4.02 3.103.104 4.596-2.215 5.918-4.267 1.182-1.834 2.202-3.417 4.15-3.484 1.793-.067 2.77 1.35 4.145 3.68 1.297 2.197 2.766 4.686 5.787 4.796 3.125.108 4.634-2.62 5.95-5.035 1.14-2.088 2.214-4.06 4.12-4.126 1.793-.042 2.728 1.595 4.1 4.33 1.292 2.553 2.757 5.445 5.825 5.556l.17.003c3.064 0 4.518-3.075 5.805-5.794 1.14-2.4 2.217-4.68 4.067-4.773v-2z"/><path d="M83 183h40v-40H83z" fill="#3ecc5f"/><path d="M143 158c-.22 0-.428.037-.64.064l-.116-.45c1.806-.754 3.075-2.534 3.075-4.613a5 5 0 0 0-5-5 4.96 4.96 0 0 0-3.016 1.036l-.335-.336c.627-.836 1-1.862 1-2.987a5 5 0 0 0-9.599-1.959l-.445-.115c.027-.2.064-.42.064-.64a5 5 0 1 0-10 0c0 .22.037.428.064.64l-.445.115a5 5 0 0 0-9.599 1.959c0 1.125.384 2.15 1 2.987A19.93 19.93 0 0 0 103 163c0 11.046 8.954 20 20 20 9.34 0 17.16-6.4 19.36-15.064.2.027.42.064.64.064a5 5 0 1 0 0-10" fill="#44d860"/><path d="M83 123h40v-20H83z" fill="#3ecc5f"/><use xlink:href="#A" x="-60" fill="#44d860"/><path d="M143 41.75a2.92 2.92 0 0 1-.5-.05 2.52 2.52 0 0 1-.47-.14c-.15-.06-.3-.14-.43-.23l-.38-.3c-.1-.12-.22-.24-.3-.38a2.63 2.63 0 0 1-.231-.43 2.62 2.62 0 0 1-.139-.47c-.03-.16-.05-.33-.05-.5s.02-.33.05-.5.08-.3.14-.47a2.63 2.63 0 0 1 .231-.43l.3-.38c.12-.1.25-.22.38-.3a1.99 1.99 0 0 1 .43-.23 2.52 2.52 0 0 1 .47-.14c.32-.07.65-.07.98 0 .16.03.32.08.47.14s.3.14.43.23l.38.3a3.68 3.68 0 0 1 .31.38 2.55 2.55 0 0 1 .23.43c.06.16.1.3.14.47a2.81 2.81 0 0 1 .05.49 2.55 2.55 0 0 1-.73 1.77c-.12.1-.25.22-.38.3a1.99 1.99 0 0 1-.43.23c-.15.06-.3.1-.47.14a2.07 2.07 0 0 1-.5.05M163 40.5a2.55 2.55 0 0 1-1.77-.73 3.68 3.68 0 0 1-.31-.38 2.63 2.63 0 0 1-.231-.43 2.62 2.62 0 0 1-.139-.47c-.03-.16-.05-.33-.05-.5a2.55 2.55 0 0 1 .73-1.77c.12-.1.25-.22.38-.3a1.99 1.99 0 0 1 .43-.23 2.52 2.52 0 0 1 .47-.14c.32-.07.66-.07.98 0 .16.03.32.08.47.14s.3.14.43.23l.38.3a2.53 2.53 0 0 1 .73 1.77 2.81 2.81 0 0 1-.05.49c-.03.16-.08.32-.14.47a3.55 3.55 0 0 1-.23.43 3.68 3.68 0 0 1-.31.38c-.12.1-.25.22-.38.3a1.99 1.99 0 0 1-.43.23c-.15.06-.3.1-.47.14a2.07 2.07 0 0 1-.5.05"/></g><defs><path id="A" d="M193 115.5a2.5 2.5 0 1 0 0-5c-.1 0-.214.02-.32.032l-.058-.225a2.5 2.5 0 0 0-.963-4.807 2.47 2.47 0 0 0-1.508.518l-.168-.168a2.47 2.47 0 0 0 .506-1.494 2.5 2.5 0 0 0-4.8-.979c-.857-.24-1.756-.377-2.7-.377-5.522 0-10 4.478-10 10s4.478 10 10 10c.934 0 1.833-.138 2.7-.377a2.5 2.5 0 0 0 4.8-.979c0-.563-.192-1.077-.506-1.494.057-.055.113-.1.168-.168a2.48 2.48 0 0 0 1.508.518 2.5 2.5 0 0 0 .963-4.807l.058-.225c.105.013.2.032.32.032"/><path id="B" d="M168.02 124h-50.04a1 1 0 1 1 0-2h50.04a1 1 0 1 1 0 2"/></defs></svg>
           </a>
           and hosted by
           <a href="https://firebase.com?utm_source=game-ci" target="_blank" rel="noreferrer noopener">

diff --git a/src/components/pages/home/section/getting-started.tsx b/src/components/pages/home/section/getting-started.tsx
@@ -1,33 +1,56 @@
 import Link from '@docusaurus/Link';
-import React from 'react';
-import cx from 'classnames';
-import styles from '@site/src/components/pages/home/section/section.module.scss';
-import FadeIntoView from '@site/src/components/molecules/animations/fade-into-view';
+import React, { SVGProps, ComponentType } from 'react';
 import GitHubLogo from '@site/static/assets/images/icons/github.svg';
 import GitLabLogo from '@site/static/assets/images/icons/gitlab.svg';
 import CircleCiLogo from '@site/static/assets/images/icons/circleci.svg';
 
+const list = [
+  {
+    name: 'github',
+    logo: GitHubLogo,
+    url: '/docs/github/getting-started',
+  },
+  {
+    name: 'gitlab',
+    logo: GitLabLogo,
+    url: '/docs/gitlab/getting-started',
+  },
+  {
+    name: 'circleci',
+    logo: CircleCiLogo,
+    url: '/docs/circleci/getting-started',
+  },
+];
+
+type LinkButtonProps = {
+  url: string;
+  logo: ComponentType<SVGProps<SVGSVGElement>>;
+};
+
+const LinkButton = ({ url, logo: Logo }: LinkButtonProps) => (
+  <Link
+    to={url}
+    className="group flex items-center justify-center border-gray-600 border-solid rounded-sm border-2 px-6 py-3 w-[200px] h-[70px] transition-all duration-200 hover:scale-110 hover:bg-gray-600"
+  >
+    <Logo className="fill-brand-text-light dark:fill-brand-text-dark group-hover:fill-white" />
+  </Link>
+);
+
 const GettingStarted = () => {
   return (
-    <span className={styles.gettingStartedSection}>
-      <FadeIntoView>
-        <h2 className={cx('text-center font-bold mb-4', styles.subtitle)}>Get Started Using:</h2>
-      </FadeIntoView>
+    <>
+      <h2 className="text-center font-bold mb-4 text-3xl md:text-6xl text-primary-light dark:text-primary-dark">
+        Get Started Using:
+      </h2>
 
-      <FadeIntoView className={styles.gettingStartedLinks}>
-        <div className="w-full mt-6 inline-flex gap-10 flex-col md:flex-row items-center justify-center pb-16">
-          <Link to="/docs/github/getting-started" className={styles.button}>
-            <GitHubLogo />
-          </Link>
-          <Link to="/docs/gitlab/getting-started" className={styles.button}>
-            <GitLabLogo />
-          </Link>
-          <Link to="/docs/circleci/getting-started" className={styles.button}>
-            <CircleCiLogo />
-          </Link>
-        </div>
-      </FadeIntoView>
-    </span>
+      <ul className="list-none px-0 w-full mt-6 inline-flex gap-10 flex-col md:flex-row items-center justify-center pb-16">
+        {list.map(({ url, name, logo }) => (
+          <li key={name}>
+            <LinkButton url={url} logo={logo} />
+          </li>
+        ))}
+      </ul>
+    </>
   );
 };
 

diff --git a/src/components/pages/home/section/opening-section.tsx b/src/components/pages/home/section/opening-section.tsx
@@ -1,54 +1,46 @@
 import React, { createRef } from 'react';
-import cx from 'classnames';
-import { useColorMode } from '@docusaurus/theme-common';
 import GameCiLogo from '@site/static/assets/images/game-ci-brand-logo-wordmark.svg';
 import GameCiLogoLight from '@site/static/assets/images/game-ci-brand-logo-wordmark-light.svg';
 import Section from '@site/src/components/pages/home/section/section';
 import FadeIntoView from '@site/src/components/molecules/animations/fade-into-view';
-import styles from './section.module.scss';
 import GettingStarted from './getting-started';
 
 const OpeningSection = () => {
   const ref = createRef<HTMLDivElement>();
 
-  const { colorMode } = useColorMode();
-  const isDarkTheme = colorMode === 'dark';
-  const Logo = isDarkTheme ? GameCiLogo : GameCiLogoLight;
-
   const scrollToNextSection = () => {
     const element = ref.current.getBoundingClientRect();
     window.scrollTo({ top: element.height, behavior: 'smooth' });
   };
 
   return (
-    <Section ref={ref} className={styles.openingSection}>
+    <Section ref={ref} className="!py-0 !px-4 !min-h-[calc(100vh-60px)]">
       <FadeIntoView>
-        <Logo className={styles.logo} />
+        <h1>
+          <span className="invisible absolute w-0 h-0">GameCI</span>
+          <GameCiLogoLight className="block dark:hidden select-none w-full max-w-[320px] h-auto" />
+          <GameCiLogo className="hidden dark:block select-none w-full max-w-[320px] h-auto" />
+        </h1>
       </FadeIntoView>
 
       <FadeIntoView delay={150}>
-        <h1 className={cx('text-sm md:text-2xl', styles.title)}>
+        <h2 className="text-base md:text-2xl text-center w-full max-w-[500px]">
           The fastest and <strong>easiest</strong> way to automatically test and build your game
           projects
-        </h1>
+        </h2>
       </FadeIntoView>
 
-      <GettingStarted />
+      <FadeIntoView delay={200}>
+        <div className="mt-8 md:mt-12">
+          <GettingStarted />
+        </div>
+      </FadeIntoView>
 
       <button
         type="button"
         onClick={scrollToNextSection}
-        className="hidden md:block"
-        style={{
-          fontSize: '7vmin',
-          background: 'none',
-          border: 'none',
-          cursor: 'pointer',
-          position: 'absolute',
-          bottom: '0',
-          left: '50%',
-          transform: 'translateX(-50%)',
-        }}
+        className="hidden md:block bg-transparent border-none cursor-pointer text-7xl absolute bottom-0 mb-2 focus-visible:outline focus-visible:outline-2"
+        aria-label="Click to scroll to the next section"
       >
         ⇩
       </button>

diff --git a/src/components/pages/home/section/pricing-section.tsx b/src/components/pages/home/section/pricing-section.tsx
@@ -1,9 +1,7 @@
-import React, { useState } from 'react';
-import cx from 'classnames';
+import React, { ComponentType, MouseEventHandler, SVGProps, useState } from 'react';
 import { SiGitlab, SiGithub, SiCircleci } from 'react-icons/si';
-import { useColorMode } from '@docusaurus/theme-common';
 import Section from '@site/src/components/pages/home/section/section';
-import styles from './section.module.scss';
+import FadeIntoView from '@site/src/components/molecules/animations/fade-into-view';
 
 const currencyToSymbol = (currency: string) => {
   switch (currency) {
@@ -27,81 +25,100 @@ const currencyToSymbol = (currency: string) => {
   }
 };
 
+const list = [
+  {
+    name: 'github',
+    logo: SiGithub,
+  },
+  {
+    name: 'gitlab',
+    logo: SiGitlab,
+  },
+  {
+    name: 'circleci',
+    logo: SiCircleci,
+  },
+];
+
+type ButtonProps = {
+  name: string;
+  isSelected: boolean;
+  onClick: MouseEventHandler<HTMLButtonElement>;
+  logo: ComponentType<SVGProps<SVGSVGElement>>;
+};
+
+const Button = ({ name, onClick, isSelected, logo: Logo }: ButtonProps) => {
+  const isSelectedClassNames = isSelected
+    ? '!border-primary-light !dark:border-primary-dark border-4'
+    : '';
+
+  return (
+    <button
+      onClick={onClick}
+      className={`rounded-md p-1 mx-1 aspect-square w-11 h-11 transition-all duration-300 cursor-pointer bg-transparent border border-solid border-secondary-light dark:border-secondary-dark ${isSelectedClassNames}`}
+      type="button"
+    >
+      <Logo className="w-5 h-5" aria-label={name} />
+    </button>
+  );
+};
+
 const PricingSection = () => {
   const [minutes, setMinutes] = useState(0);
   const [currency, setCurrency] = useState('EUR');
-  const [selectedVsc, setVsc] = useState(0);
-  const { colorMode } = useColorMode();
-  const isDarkTheme = colorMode === 'dark';
-
-  const backgroundClassName = isDarkTheme ? 'bg-black' : 'bg-white';
-  const totalPriceBackgroundClassName = isDarkTheme ? 'bg-gray-800' : 'bg-gray-200';
+  const [selectedVsc, setVsc] = useState('github');
 
   return (
-    <Section className={styles.pricingSection}>
-      <h2 className={cx('text-center text-5xl font-bold mb-10', styles.title)}>
-        Pricing calculator
-      </h2>
-
-      <div className="p-3 rounded-md flex gap-3 h-52">
-        <div className={`${backgroundClassName} p-3 rounded-md flex flex-col justify-between`}>
-          <div>
-            <button
-              onClick={() => setVsc(0)}
-              className={`${styles.vscButton} ${selectedVsc === 0 && styles.selected}`}
-              type="button"
-            >
-              <SiGithub />
-            </button>
-            <button
-              onClick={() => setVsc(1)}
-              className={`${styles.vscButton} ${selectedVsc === 1 && styles.selected}`}
-              type="button"
-            >
-              <SiGitlab />
-            </button>
-            <button
-              onClick={() => setVsc(2)}
-              className={`${styles.vscButton} ${selectedVsc === 2 && styles.selected}`}
-              type="button"
-            >
-              <SiCircleci />
-            </button>
-            <br />
-          </div>
-          <label htmlFor="minutes">
-            <h4>Minutes:</h4>
-            <div className="flex items-center gap-1">
-              <input
-                id="minutes"
-                min={0}
-                max={1000}
-                defaultValue={0}
-                type="range"
-                onChange={(event) => {
-                  setMinutes(Number.parseInt(event.target.value, 10));
-                }}
-              />
-              <span className="w-8">{minutes <= 999 ? minutes : <>&infin;</>}</span>
+    <Section title="Pricing calculator">
+      <FadeIntoView>
+        <div className="p-3 rounded-md flex gap-3 h-52 bg-primary-light dark:bg-primary-dark">
+          <div className="bg-white dark:bg-black p-3 rounded-md flex flex-col justify-between">
+            <div>
+              {list.map(({ name, logo }) => (
+                <Button
+                  key={name}
+                  name={name}
+                  isSelected={selectedVsc === name}
+                  logo={logo}
+                  onClick={() => setVsc(name)}
+                />
+              ))}
             </div>
-          </label>
-        </div>
+            <label htmlFor="minutes">
+              <p className="font-bold">Minutes:</p>
+              <div className="flex items-center gap-1">
+                <input
+                  name="minutes"
+                  min={0}
+                  max={1000}
+                  defaultValue={0}
+                  type="range"
+                  step={10}
+                  onChange={(event) => {
+                    setMinutes(Number.parseInt(event.target.value, 10));
+                  }}
+                />
+                <span className="w-8">{minutes === 1000 ? <>&infin;</> : minutes}</span>
+              </div>
+            </label>
+          </div>
 
-        <div className={`${backgroundClassName} p-3 rounded-md flex flex-col justify-between`}>
-          <select onChange={(event) => setCurrency(event.target.value)}>
-            <option value="EUR">EUR &euro;</option>
-            <option value="USD">USD $</option>
-            <option value="ILS">ILS &#x20aa;</option>
-            <option value="CAD">CAD $</option>
-            <option value="AUD">AUD $</option>
-            <option value="RUB">RUB &#x20bd;</option>
-            <option value="JYP">JYP &yen;</option>
-          </select>
-          <span className={`${totalPriceBackgroundClassName} p-2 rounded-sm`}>
-            <h5 className="m-0 text-center">0.00 {currencyToSymbol(currency)}</h5>
-          </span>
+          <div className="bg-white dark:bg-black p-3 rounded-md flex flex-col justify-between">
+            <select onChange={(event) => setCurrency(event.target.value)} aria-label="currency">
+              <option value="EUR">EUR &euro;</option>
+              <option value="USD">USD $</option>
+              <option value="ILS">ILS &#x20aa;</option>
+              <option value="CAD">CAD $</option>
+              <option value="AUD">AUD $</option>
+              <option value="RUB">RUB &#x20bd;</option>
+              <option value="JYP">JYP &yen;</option>
+            </select>
+            <span className="bg-gray-200 dark:bg-gray-800 p-2 rounded-sm">
+              <p className="m-0 text-center font-bold">0.00 {currencyToSymbol(currency)}</p>
+            </span>
+          </div>
         </div>
-      </div>
+      </FadeIntoView>
     </Section>
   );
 };