Merge pull request #49 from illacloud/fix/bugs

Fix/bugs

docusaurus.config.ts

@@ -9,12 +9,12 @@ const config: Config = {
   favicon: "img/public/favicon.ico",
 
   // Set the production url of your site here
-  url: process.env.ILLA_URL,
+  url: process.env.ILLA_URL ?? "https://illacloud.com",
   // Set the /<baseUrl>/ pathname under which your site is served
   // For GitHub pages deployment, it is often '/<projectName>/'
-  baseUrl: process.env.ILLA_BASE_URL?process.env.ILLA_BASE_URL:"/",
-  organizationName: process.env.ILLA_BASE_URL?"illacloud":"", // Usually your GitHub org/user name.
-  projectName: process.env.ILLA_BASE_URL?"illa-website":"", // Usually your repo name.
+  baseUrl: process.env.ILLA_BASE_URL ? process.env.ILLA_BASE_URL : "/",
+  organizationName: process.env.ILLA_BASE_URL ? "illacloud" : "", // Usually your GitHub org/user name.
+  projectName: process.env.ILLA_BASE_URL ? "illa-website" : "", // Usually your repo name.
   staticDirectories: ["public", "static"],
 
   onBrokenLinks: "warn",

src/ILLATheme/CommonHeader/MobileMenu/index.tsx

@@ -6,8 +6,6 @@ import { sendTagEvent } from "@site/src/utils/gtag"
 import { MENU_ITEMS, SOLUTIONS } from "../constants"
 import LocaleDropdownNavbarItem from "@theme/NavbarItem/LocaleDropdownNavbarItem"
 import CloseWhiteIcon from "@site/static/img/public/close.svg"
-import { CONTACT_US_URL } from "./constant"
-import Translate from "@docusaurus/Translate"
 import { Disclosure } from "@headlessui/react"
 import { MenuItem } from "./menuItem"
 import style from "./index.module.css"
@@ -71,19 +69,6 @@ const MobileMenu = ({ menuExpand, closeMenu }) => {
           )
         })}
       </div>
-      <Link
-        href={CONTACT_US_URL}
-        onClick={() => {
-          sendTagEvent({
-            action: "click",
-            category: "homepage_menu_contact_click",
-          })
-          closeMenu && closeMenu()
-        }}
-        className={style.menuItemStyle}
-      >
-        <Translate id="nav.contact">Book demo</Translate>
-      </Link>
 
       <div className="max-h-[180px] overflow-y-auto list-none	">
         <LocaleDropdownNavbarItem

src/components/banner/modal.tsx

@@ -143,37 +143,6 @@ export const BannerModal: FC<Props> = ({
                         loading="lazy"
                       />
                     </Link>
-                    <p
-                      className={clsx(
-                        "text-2xl",
-                        "font-semibold",
-                        variant === "gray" && "bg-clip-text",
-                        variant === "gray" && "text-transparent",
-                        variant === "gray" && "bg-banner-examples-text",
-                        variant === "purple" && "text-gray-0",
-                      )}
-                    >
-                      {title}
-                    </p>
-                    {/* <LandingRainbowButton
-                      className={clsx('w-max')}
-                      buttonClassname={clsx('!px-4', '!py-4')}
-                      href={button.href}
-                      onClick={button.onClick}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      <div
-                        className={clsx(
-                          'text-gray-900',
-                          'text-base',
-                          'font-bold',
-                        )}
-                      >
-                        {button.text}
-                      </div>
-                      <ArrowRightIcon className={clsx('w-4', 'h-4')} />
-                    </LandingRainbowButton> */}
                   </div>
                   <button
                     className={clsx(

src/components/common/LinkButton/index.module.css

@@ -11,7 +11,7 @@
 }
 
 .normalSizeStyle {
-  @apply min-w-[320px] h-[56px] rounded-[24px] text-[16px];
+  @apply min-w-[320px] h-[56px] rounded-[28px] text-[16px];
 }
 
 .largeSizeStyle {

src/components/home/Index/PC/index.module.css

@@ -7,7 +7,14 @@
 }
 
 .bgStyle {
-  @apply absolute top-[0px] z-[0] w-full h-[382px] object-top object-none;
+  @apply hidden lg:block absolute top-[0px] z-[0] w-full h-[382px] object-top object-none;
+}
+
+.bgStyle::-webkit-media-controls-enclosure,
+.bgStyle::-webkit-media-controls-panel,
+.bgStyle::-webkit-media-controls-play-button,
+.bgStyle::-webkit-media-controls-start-playback-button {
+  display: none;
 }
 
 .bannerContentContainer {

src/components/home/Index/components/Solutions/index.tsx

@@ -106,23 +106,22 @@ const Solutions: FC = () => {
               >
                 {item.content}
               </div>
-            </div>
-
-            <div className={style.linkButtonStyle}>
-              <LinkButton
-                href={handleDemoHref(item.appID)}
-                size="small"
-                colorType="dark"
-                handleClick={() => {
-                  sendTagEvent({
-                    action: "solution_try_for_free",
-                  })
-                }}
-              >
-                <Translate id="website_4.solution.use_this_template">
-                  Try now
-                </Translate>
-              </LinkButton>
+              <div className={style.linkButtonStyle}>
+                <LinkButton
+                  href={handleDemoHref(item.appID)}
+                  size="small"
+                  colorType="dark"
+                  handleClick={() => {
+                    sendTagEvent({
+                      action: "solution_try_for_free",
+                    })
+                  }}
+                >
+                  <Translate id="website_4.solution.use_this_template">
+                    Try now
+                  </Translate>
+                </LinkButton>
+              </div>
             </div>
           </Fragment>
         ))}

src/pages/index.tsx

@@ -22,7 +22,7 @@ export default function Home(): JSX.Element {
         </script>
       </Head>
       <CommonLayout {...HOME_META_INFO}>
-        <div className="bg-black overflow-visible w-full relative z-[1] font-sans">
+        <div className="bg-black overflow-visible w-full relative z-[1]">
           <CommonHeader />
           <BannerPC githubStarts={githubStarts} />
           <BannerMobile githubStarts={githubStarts} />

src/pages/pricing/index.tsx

@@ -37,7 +37,7 @@ const Pricing: FC = () => {
       </Head>
       <CommonLayout {...PRICING_META_INFO}>
         <PricingMask height={containerHeight} />
-        <div ref={ref} className="w-full px-0 font-sans">
+        <div ref={ref} className="w-full px-0">
           <div className="w-full relative z-[1]">
             <CommonHeader />
             <div className="w-full text-white flex flex-col lg:gap-[120px] gap-[60px] lg:pt-[40px] bg-transparent">

src/theme/NavbarItem/DropdownNavbarItem/index.js

@@ -1,28 +1,28 @@
-import React, {useState, useRef, useEffect} from 'react';
-import clsx from 'clsx';
+import React, { useState, useRef, useEffect } from "react"
+import clsx from "clsx"
 import {
   isRegexpStringMatch,
   useCollapsible,
   Collapsible,
-} from '@docusaurus/theme-common';
-import {isSamePath, useLocalPathname} from '@docusaurus/theme-common/internal';
-import NavbarNavLink from '@theme/NavbarItem/NavbarNavLink';
-import NavbarItem from '@theme/NavbarItem';
-import styles from './styles.module.css';
+} from "@docusaurus/theme-common"
+import { isSamePath, useLocalPathname } from "@docusaurus/theme-common/internal"
+import NavbarNavLink from "@theme/NavbarItem/NavbarNavLink"
+import NavbarItem from "@theme/NavbarItem"
+import styles from "./styles.module.css"
 function isItemActive(item, localPathname) {
   if (isSamePath(item.to, localPathname)) {
-    return true;
+    return true
   }
   if (isRegexpStringMatch(item.activeBaseRegex, localPathname)) {
-    return true;
+    return true
   }
   if (item.activeBasePath && localPathname.startsWith(item.activeBasePath)) {
-    return true;
+    return true
   }
-  return false;
+  return false
 }
 function containsActiveItems(items, localPathname) {
-  return items.some((item) => isItemActive(item, localPathname));
+  return items.some((item) => isItemActive(item, localPathname))
 }
 function DropdownNavbarItemDesktop({
   items,
@@ -31,45 +31,50 @@ function DropdownNavbarItemDesktop({
   onClick,
   ...props
 }) {
-  const dropdownRef = useRef(null);
-  const [showDropdown, setShowDropdown] = useState(false);
+  const dropdownRef = useRef(null)
+  const [showDropdown, setShowDropdown] = useState(false)
   useEffect(() => {
     const handleClickOutside = (event) => {
       if (!dropdownRef.current || dropdownRef.current.contains(event.target)) {
-        return;
+        return
       }
-      setShowDropdown(false);
-    };
-    document.addEventListener('mousedown', handleClickOutside);
-    document.addEventListener('touchstart', handleClickOutside);
-    document.addEventListener('focusin', handleClickOutside);
+      setShowDropdown(false)
+    }
+    document.addEventListener("mousedown", handleClickOutside)
+    document.addEventListener("touchstart", handleClickOutside)
+    document.addEventListener("focusin", handleClickOutside)
     return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-      document.removeEventListener('touchstart', handleClickOutside);
-      document.removeEventListener('focusin', handleClickOutside);
-    };
-  }, [dropdownRef]);
+      document.removeEventListener("mousedown", handleClickOutside)
+      document.removeEventListener("touchstart", handleClickOutside)
+      document.removeEventListener("focusin", handleClickOutside)
+    }
+  }, [dropdownRef])
   return (
     <div
       ref={dropdownRef}
-      className={clsx('navbar__item', 'dropdown', 'dropdown--hoverable', {
-        'dropdown--right': position === 'right',
-        'dropdown--show': showDropdown,
-      })}>
+      className={clsx("navbar__item", "dropdown", {
+        "dropdown--right": position === "right",
+        "dropdown--show": showDropdown,
+      })}
+      onClick={() => {
+        setShowDropdown(!showDropdown)
+      }}
+    >
       <NavbarNavLink
         aria-haspopup="true"
         aria-expanded={showDropdown}
         role="button"
-        href={props.to ? undefined : '#'}
-        className={clsx('navbar__link', className)}
+        href={props.to ? undefined : "#"}
+        className={clsx("navbar__link", className)}
         {...props}
         onClick={props.to ? undefined : (e) => e.preventDefault()}
         onKeyDown={(e) => {
-          if (e.key === 'Enter') {
-            e.preventDefault();
-            setShowDropdown(!showDropdown);
+          if (e.key === "Enter") {
+            e.preventDefault()
+            setShowDropdown(!showDropdown)
           }
-        }}>
+        }}
+      >
         {props.children ?? props.label}
       </NavbarNavLink>
       <ul className="dropdown__menu">
@@ -83,7 +88,7 @@ function DropdownNavbarItemDesktop({
         ))}
       </ul>
     </div>
-  );
+  )
 }
 function DropdownNavbarItemMobile({
   items,
@@ -92,34 +97,36 @@ function DropdownNavbarItemMobile({
   onClick,
   ...props
 }) {
-  const localPathname = useLocalPathname();
-  const containsActive = containsActiveItems(items, localPathname);
-  const {collapsed, toggleCollapsed, setCollapsed} = useCollapsible({
+  const localPathname = useLocalPathname()
+  const containsActive = containsActiveItems(items, localPathname)
+  const { collapsed, toggleCollapsed, setCollapsed } = useCollapsible({
     initialState: () => !containsActive,
-  });
+  })
   // Expand/collapse if any item active after a navigation
   useEffect(() => {
     if (containsActive) {
-      setCollapsed(!containsActive);
+      setCollapsed(!containsActive)
     }
-  }, [localPathname, containsActive, setCollapsed]);
+  }, [localPathname, containsActive, setCollapsed])
   return (
     <li
-      className={clsx('menu__list-item', {
-        'menu__list-item--collapsed': collapsed,
-      })}>
+      className={clsx("menu__list-item", {
+        "menu__list-item--collapsed": collapsed,
+      })}
+    >
       <NavbarNavLink
         role="button"
         className={clsx(
           styles.dropdownNavbarItemMobile,
-          'menu__link menu__link--sublist menu__link--sublist-caret',
+          "menu__link menu__link--sublist menu__link--sublist-caret",
           className,
         )}
         {...props}
         onClick={(e) => {
-          e.preventDefault();
-          toggleCollapsed();
-        }}>
+          e.preventDefault()
+          toggleCollapsed()
+        }}
+      >
         {props.children ?? props.label}
       </NavbarNavLink>
       <Collapsible lazy as="ul" className="menu__list" collapsed={collapsed}>
@@ -135,9 +142,9 @@ function DropdownNavbarItemMobile({
         ))}
       </Collapsible>
     </li>
-  );
+  )
 }
-export default function DropdownNavbarItem({mobile = false, ...props}) {
-  const Comp = mobile ? DropdownNavbarItemMobile : DropdownNavbarItemDesktop;
-  return <Comp {...props} />;
+export default function DropdownNavbarItem({ mobile = false, ...props }) {
+  const Comp = mobile ? DropdownNavbarItemMobile : DropdownNavbarItemDesktop
+  return <Comp {...props} />
 }

tailwind.config.js

@@ -212,7 +212,7 @@ module.exports = {
         titleWeb: "5rem",
       },
       fontFamily: {
-        sans: ["var(--primary-font-sans)", ...defaultTheme.fontFamily.sans],
+        sans: [...defaultTheme.fontFamily.sans],
         mono: ["Source Code Pro", ...defaultTheme.fontFamily.mono],
         montserrat: ["Montserrat", ...defaultTheme.fontFamily.serif],
         disket: ["Disket Mono", ...defaultTheme.fontFamily.mono],