feat: update style

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/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-white-04",
+          "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-white-04 hover:text-white-01 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",

src/components/blog/Tags/index.js

@@ -15,7 +15,7 @@ export const Tags = () => {
           className={clsx(
             "text-xs",
             "bg-gray-100 dark:bg-gray-700",
-            "text-gray-600 dark:text-white-04",
+            "text-gray-600 dark:text-white-04 dark:hover:text-white-01",
             "rounded",
             "py-1",
             "px-2",

src/constants/url.ts

@@ -2,3 +2,5 @@ export const CLOUD_URL = "https://cloud.illacloud.com"
 export const MARKET_URL = "https://illa.ai"
 export const OAUTH_URL = "https://cloud.illacloud.com/oauth"
 export const DEMO_BASE_URL = "https://illa.ai/app"
+export const POLICY = "https://docs.illacloud.com/privacy-policy"
+export const SERVICE = "https://docs.illacloud.com/terms-of-service"

src/theme/BlogPostItem/index.js

@@ -48,7 +48,7 @@ export default function BlogPostItem({ className }) {
               className={clsx(
                 "text-xs",
                 "bg-gray-100 dark:bg-gray-700",
-                "text-white-04 hover:text-white-01 dark:text-gray-400 dark:hover:text-gray-400",
+                "text-white-04 hover:text-white-01 dark:text-white-04 dark:hover:text-white-01",
                 "no-underline",
                 "rounded",
                 "px-2 py-1",

src/theme/BlogPostItems/index.js

@@ -56,7 +56,7 @@ export default function BlogPostItems({
                 "text-sm blog-md:text-base blog-lg:text-xl",
                 "blog-md:max-w-[624px]",
                 "mt-6 lg:mt-0",
-                "text-gray-500 dark:text-white-04",
+                "text-gray-500 dark:text-gray-200",
               )}
             >
               <b>

src/theme/Tag/index.js

@@ -13,12 +13,13 @@ export default function Tag({ permalink, label, isActive, className }) {
         "no-underline hover:no-underline",
         "text-xs",
         !isActive && "bg-gray-100 dark:bg-gray-700",
-        !isActive && "text-gray-600 dark:text-white-04",
+        !isActive &&
+          "text-gray-600 dark:text-white-04 dark:hover:text-white-01",
         "rounded",
         "py-1",
         "px-2",
         isActive && "bg-gray-200 text-gray-500",
-        isActive && "dark-bg-gray-700 text-gray-300",
+        isActive && "dark-bg-gray-700 dark:text-white-01",
         className,
       )}
     >