Merge pull request #21 from illacloud/feat/update-translation

Feat/update translation

src/ILLATheme/BlogTOC/index.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
-import clsx from 'clsx';
-import { useLocation, useHistory } from '@docusaurus/router';
-import { Tags } from '@site/src/components/blog/Tags';
+import React from "react"
+import clsx from "clsx"
+import { useLocation, useHistory } from "@docusaurus/router"
+import { Tags } from "@site/src/components/blog/Tags"
 
 export const BlogTOCItem = ({
   id,
@@ -10,89 +10,89 @@ export const BlogTOCItem = ({
   activeId,
   onIdChange,
 }: {
-  id: string;
-  value: string;
-  level: number;
-  activeId: string;
-  onIdChange?: (id: string) => void;
+  id: string
+  value: string
+  level: number
+  activeId: string
+  onIdChange?: (id: string) => void
 }) => {
   React.useEffect(() => {
-    const targetElement = document.getElementById(id);
+    const targetElement = document.getElementById(id)
 
     if (targetElement) {
       const observer = new IntersectionObserver(
         (entries) => {
           entries.forEach((entry) => {
             if (entry.isIntersecting) {
-              onIdChange(id);
+              onIdChange(id)
             }
-          });
+          })
         },
         {
-          rootMargin: '0px 0px -80% 0px',
+          rootMargin: "0px 0px -80% 0px",
         },
-      );
+      )
 
-      observer.observe(targetElement);
+      observer.observe(targetElement)
 
       return () => {
-        observer.unobserve(targetElement);
-      };
+        observer.unobserve(targetElement)
+      }
     }
-  }, [id]);
+  }, [id])
 
   return (
     <a
       href={`#${id}`}
       className={clsx(
-        'refine-toc-item',
-        level === 2 && 'pl-3',
-        level === 3 && 'pl-7',
-        level === 4 && 'pl-11',
-        'py-2 pr-3',
+        "refine-toc-item",
+        level === 2 && "pl-3",
+        level === 3 && "pl-7",
+        level === 4 && "pl-11",
+        "py-2 pr-3",
         activeId === id &&
-          ` dark:bg-gray-700 bg-gray-100 text-gray-900 dark:text-gray-0 hover:text-gray-900`,
+          ` dark:bg-gray-700 bg-gray-100 text-text-white-04 dark:text-gray-0 hover:text-white-04`,
         activeId !== id &&
-          `dark:text-gray-500 hover:text-gray-900 text-gray-500`,
-        'rounded-lg',
-        'transition-colors duration-200 ease-in-out',
-        'block',
-        'text-sm',
-        'leading-6',
-        'no-underline hover:no-underline',
+          `dark:text-white-04 hover:text-white-01 text-white-04`,
+        "rounded-lg",
+        "transition-colors duration-200 ease-in-out",
+        "block",
+        "text-sm",
+        "leading-6",
+        "no-underline hover:no-underline",
       )}
       dangerouslySetInnerHTML={{
         __html: value,
       }}
     />
-  );
-};
+  )
+}
 
 export const BlogTOC = (props) => {
-  const history = useHistory();
-  const location = useLocation();
-  const { toc, hasTOC, activeId, setActiveId } = useTOC(props.toc);
+  const history = useHistory()
+  const location = useLocation()
+  const { toc, hasTOC, activeId, setActiveId } = useTOC(props.toc)
 
   const onIdChange = (id) => {
-    if (id !== `${location.hash ?? ''}`.replace('#', '')) {
-      setActiveId(id);
-      window.history.replaceState({}, '', `#${id}`);
+    if (id !== `${location.hash ?? ""}`.replace("#", "")) {
+      setActiveId(id)
+      window.history.replaceState({}, "", `#${id}`)
     }
-  };
+  }
 
   return (
     <div
       className={clsx(
-        'hidden blog-md:block',
-        'w-full',
-        'sticky right-0 top-[67px]',
-        'max-w-[280px]',
-        'overflow-auto',
-        'h-[calc(100vh-67px)]',
-        'px-3',
-        'blog-md:py-16',
-        'border-l dark:border-l-gray-700 border-l-gray-100',
-        !hasTOC && 'invisible',
+        "hidden blog-md:block",
+        "w-full",
+        "sticky right-0 top-[67px]",
+        "max-w-[280px]",
+        "overflow-auto",
+        "h-[calc(100vh-67px)]",
+        "px-3",
+        "blog-md:py-16",
+        "border-l dark:border-l-gray-700 border-l-gray-100",
+        !hasTOC && "invisible",
       )}
     >
       <Tags />
@@ -108,32 +108,32 @@ export const BlogTOC = (props) => {
                 onIdChange={onIdChange}
               />
             </li>
-          );
+          )
         })}
       </ul>
     </div>
-  );
-};
+  )
+}
 
 export const useTOC = (toc) => {
-  const { hash } = useLocation();
+  const { hash } = useLocation()
 
-  const baseActiveId = `${hash}`.replace('#', '');
+  const baseActiveId = `${hash}`.replace("#", "")
 
   const [activeId, setActiveId] = React.useState<string | undefined>(
     baseActiveId,
-  );
+  )
 
   React.useEffect(() => {
-    setActiveId(baseActiveId);
-  }, [baseActiveId]);
+    setActiveId(baseActiveId)
+  }, [baseActiveId])
 
-  const hasTOC = toc?.length > 0;
+  const hasTOC = toc?.length > 0
 
   return {
     toc,
     activeId,
     setActiveId,
     hasTOC,
-  };
-};
+  }
+}

src/ILLATheme/CommonFooter/FooterItem/index.tsx

@@ -4,9 +4,11 @@ import style from "../index.module.css"
 import clsx from "clsx"
 import Link from "@docusaurus/Link"
 import Translate from "@docusaurus/Translate"
+import { useUtmParams } from "@site/src/hooks/useUtmParams"
 
 export const FooterItems = ({ items, whiteTheme }) => {
   const [showMore, setShowMore] = useState(false)
+  const getUtmParams = useUtmParams()
 
   const handleShowMore = () => {
     setShowMore(!showMore)
@@ -21,7 +23,11 @@ export const FooterItems = ({ items, whiteTheme }) => {
   return (
     <>
       {items.slice(0, 6).map(({ label, href = "", tagCategory }) => (
-        <Link key={label} to={href} className="hover:no-underline">
+        <Link
+          key={label}
+          to={getUtmParams(href)}
+          className="hover:no-underline"
+        >
           <span
             className={clsx(
               style.footerItem,
@@ -40,7 +46,11 @@ export const FooterItems = ({ items, whiteTheme }) => {
       ))}
       {showMore &&
         items.slice(6).map(({ label, href = "", tagCategory }) => (
-          <Link key={label} href={href} className="hover:no-underline">
+          <Link
+            key={label}
+            to={getUtmParams(href)}
+            className="hover:no-underline"
+          >
             <span
               className={clsx(
                 style.footerItem,

src/ILLATheme/CommonFooter/constants.tsx

@@ -81,47 +81,47 @@ const Solution: IFootContentItem[] = [
       id: "ai_header.solutions_title.image_generator",
       message: "Image generator",
     }),
-    href: "image-generator",
+    href: "/image-generator",
     tagCategory: "homepage_menu_solutions_image_generator_click",
   },
   {
     label: translate({
       id: "ai_header.solutions_title.ai_voice_generator",
       message: "AI Voice Generator",
     }),
-    href: "image-generator",
+    href: "/ai-voice-generator",
     tagCategory: "homepage_menu_solutions_ai_voice_generator_click",
   },
   {
     label: translate({
       id: "ai_header.solutions_title.dashboard",
       message: "Dashboard",
     }),
-    href: "image-generator",
+    href: "/dashboard",
     tagCategory: "homepage_menu_solutions_dashboard_click",
   },
   {
     label: translate({
       id: "ai_header.solutions_title.cms",
       message: "CMS",
     }),
-    href: "image-generator",
+    href: "/cms",
     tagCategory: "homepage_menu_solutions_dashboard_click",
   },
   {
     label: translate({
       id: "ai_header.solutions_title.crm",
       message: "CRM",
     }),
-    href: "image-generator",
+    href: "/crm",
     tagCategory: "homepage_menu_solutions_dashboard_click",
   },
   {
     label: translate({
       id: "ai_header.solutions_title.admin_panel",
       message: "Admin Panel",
     }),
-    href: "image-generator",
+    href: "/admin-panel",
     tagCategory: "homepage_menu_solutions_dashboard_click",
   },
 ]

src/ILLATheme/CommonFooter/index.tsx

@@ -13,6 +13,8 @@ import LocaleDropdownNavbarItem from "@theme/NavbarItem/LocaleDropdownNavbarItem
 import { FOOTER_CONTENT } from "./constants"
 import Translate, { translate } from "@docusaurus/Translate"
 import { ICommonFooterProps } from "./interface"
+import { useUtmParams } from "@site/src/hooks/useUtmParams"
+import { POLICY, SERVICE } from "@site/src/constants/url"
 
 const CommonFooter: FC<ICommonFooterProps> = ({
   whiteTheme = false,
@@ -27,6 +29,7 @@ const CommonFooter: FC<ICommonFooterProps> = ({
     })
   }, [])
   useElementFirstShow(ref, reportShow)
+  const getUtmParams = useUtmParams()
 
   const { scrollYProgress } = useScroll()
   const translateY = useTransform(
@@ -86,7 +89,7 @@ const CommonFooter: FC<ICommonFooterProps> = ({
                       return (
                         <Link
                           key={label}
-                          href={href}
+                          to={getUtmParams(href)}
                           className="hover:no-underline"
                         >
                           {icon ? (
@@ -171,10 +174,7 @@ const CommonFooter: FC<ICommonFooterProps> = ({
                 )}
               />
             </div>
-            <Link
-              href="https://docs.illacloud.com/privacy-policy"
-              className="hover:no-underline"
-            >
+            <Link to={getUtmParams(POLICY)} className="hover:no-underline">
               <span
                 className={clsx(
                   style.footerItem,
@@ -190,10 +190,7 @@ const CommonFooter: FC<ICommonFooterProps> = ({
                 <Translate id="footer.privacy-policy">Privacy policy</Translate>
               </span>
             </Link>
-            <Link
-              href="https://docs.illacloud.com/terms-of-service"
-              className="hover:no-underline"
-            >
+            <Link to={getUtmParams(SERVICE)} className="hover:no-underline">
               <span
                 className={clsx(
                   style.footerItem,

src/ILLATheme/CommonHeader/Menu/index.tsx

@@ -84,7 +84,7 @@ export const HeaderMenu: FC<IHeaderMenuProps> = (props) => {
                           className={clsx(
                             style.panelItemContainerStyle,
                             whiteTheme
-                              ? "text-gray-02 hover:bg-garyBlue-09"
+                              ? "text-gray-02 hover:bg-grayBlue-09"
                               : "text-white-01 hover:bg-white-09",
                           )}
                           onClick={() => {

src/ILLATheme/CommonHeader/SolutionsItem/index.module.css

@@ -11,7 +11,7 @@
 }
 
 .lightPopoverPanelStyle {
-  @apply border-garyBlue-09 bg-white-01;
+  @apply border-grayBlue-09 bg-white-01;
   box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
 }
 
@@ -27,7 +27,7 @@
   @apply hover:bg-white/[0.04];
 }
 .lightPanelItemContainerStyle {
-  @apply hover:bg-garyBlue-09;
+  @apply hover:bg-grayBlue-09;
 }
 
 .panelItemStyle {

src/ILLATheme/SolutionLayout/FirstScreen/index.tsx

@@ -37,8 +37,8 @@ const FirstScreen: FC<IFirstScreenProps> = ({
   const containerRef = useRef<HTMLDivElement>(null)
   const { scrollYProgress } = useScroll()
 
-  const rotateX = useTransform(scrollYProgress, [0, 0.002], [10, 0])
-  const scale = useTransform(scrollYProgress, [0, 0.002], [0.95, 1])
+  const rotateX = useTransform(scrollYProgress, [0, 0.015], [15, 0])
+  const scale = useTransform(scrollYProgress, [0, 0.015], [0.95, 1])
 
   usePaintBg(canvasRef, containerRef)
 

src/ILLATheme/TagList/index.tsx

@@ -88,7 +88,7 @@ const Desktop = ({
           "no-underline hover:no-underline",
           "text-xs",
           "bg-gray-100 dark:bg-gray-600",
-          "text-gray-600 dark:text-gray-400",
+          "text-gray-600 dark:text-white-04 dark:hover:text-white-01",
           "rounded",
           "py-1",
           "px-2",

src/components/blog/FeaturedBlogPostItem/index.js

@@ -46,7 +46,7 @@ export const FeaturedBlogPostItem = () => {
               className={clsx(
                 "text-xs",
                 "bg-gray-100 dark:bg-gray-700",
-                "text-gray-600 hover:text-gray-600 dark:text-gray-400 dark:hover:text-gray-400",
+                "text-white-04 hover:text-white-01 dark:text-white-04",
                 "no-underline",
                 "rounded",
                 "px-2 py-1",
@@ -92,7 +92,7 @@ export const FeaturedBlogPostItem = () => {
           <span
             className={clsx(
               "text-gray-600 hover:text-gray-600",
-              "dark:text-gray-400 hover:dark:text-gray-400",
+              "dark:text-white-04 hover:dark:text-white-01",
               "text-xs 2xl:text-base",
               "leading-6",
               "no-underline",