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

Feat/update translation
illacloud · Jan 3, 2024 · f6a0e60 · f6a0e60
2 parents 797c0da + f0d76cb
commit f6a0e60
Show file tree

Hide file tree

Showing 13 changed files with 71 additions and 65 deletions.
diff --git a/src/ILLATheme/CommonHeader/constants.tsx b/src/ILLATheme/CommonHeader/constants.tsx
@@ -157,14 +157,6 @@ export const MENU_ITEMS: MenuItemType[] = [
 ]
 
 export const OPERATE_MENU_ITEMS = [
-  {
-    label: translate({
-      id: "nav.contact",
-      message: "Book demo",
-    }),
-    href: "https://calendly.com/illa-demo/0295",
-    category: "homepage_menu_contact_click",
-  },
   {
     label: translate({
       id: "nav.login",

diff --git a/src/ILLATheme/SolutionLayout/FirstScreen/index.module.css b/src/ILLATheme/SolutionLayout/FirstScreen/index.module.css
@@ -1,21 +1,21 @@
 .containerStyle {
-  @apply flex h-full  mb-[60px] lg:h-[calc(100vh-77px)]  overflow-hidden text-title grow-0 text-white-01 flex-col  items-center font-bold px-[20px] relative;
+  @apply flex h-full  mb-[60px]  overflow-hidden text-title grow-0 text-white-01 flex-col  items-center font-bold px-[20px] relative;
   @apply lg:mb-[120px];
 }
 
 .indexBgStyle {
-  @apply w-full h-full lg:h-[calc(100vh-77px)] overflow-hidden absolute z-[-1];
+  @apply hidden lg:block w-full lg:min-h-[1200px]  overflow-hidden absolute z-[-1];
 }
 .indexBgStyle img {
   @apply w-full lg:h-[1034px] h-auto absolute bottom-0;
 }
 .canvasContainerStyle {
-  @apply w-full h-full  lg:h-[calc(100vh-77px)] overflow-hidden absolute z-[-1];
+  @apply w-full h-full overflow-hidden absolute z-[-1];
 }
 
 .contentContainer {
-  @apply flex h-full flex-col items-center gap-[24px] relative pt-[64px];
-  @apply lg:max-w-[1040px] lg:gap-[56px] lg:pt-[150px];
+  @apply flex h-full flex-col items-center justify-between gap-[24px] relative pt-[64px];
+  @apply lg:max-w-[1040px] lg:gap-[56px] lg:pt-[150px] lg:min-h-[1200px];
   @apply xl:max-w-[1200px] xl:w-[1200px];
 }
 .contentContainer svg {
@@ -50,12 +50,12 @@
 }
 
 .demoContainerStyle {
-  @apply w-full lg:absolute h-auto bottom-0 z-[2];
+  @apply w-full lg:relative h-auto bottom-0 z-[2];
   perspective: 1040px;
 }
 
 .demoImgStyle {
-  @apply lg:block hidden w-full max-w-full relative rounded-[12px] overflow-hidden;
+  @apply lg:block hidden w-full max-w-full relative rounded-[12px] rounded-b-none overflow-hidden;
   transform-origin: center;
 }
 

diff --git a/src/ILLATheme/SolutionLayout/FirstScreen/index.tsx b/src/ILLATheme/SolutionLayout/FirstScreen/index.tsx
@@ -36,9 +36,9 @@ const FirstScreen: FC<IFirstScreenProps> = ({
   const containerRef = useRef<HTMLDivElement>(null)
   const { scrollYProgress } = useScroll()
 
-  const rotateX = useTransform(scrollYProgress, [0, 0.015], [10, 0])
-  const scale = useTransform(scrollYProgress, [0, 0.015], [0.95, 1])
-  const scrollY = useTransform(scrollYProgress, [0, 0.015], ["15%", "0%"])
+  const rotateX = useTransform(scrollYProgress, [0, 0.03], [10, 0])
+  const scale = useTransform(scrollYProgress, [0, 0.03], [0.95, 1])
+  const scrollY = useTransform(scrollYProgress, [0, 0.03], ["15%", "0%"])
 
   usePaintBg(canvasRef, containerRef)
 

diff --git a/src/components/home/Index/PC/index.module.css b/src/components/home/Index/PC/index.module.css
@@ -3,7 +3,7 @@
 }
 
 .canvasContainerStyle {
-  @apply w-full h-screen overflow-hidden absolute z-[-1];
+  @apply w-full h-full overflow-hidden absolute z-[-1];
 }
 
 .bgStyle {

diff --git a/src/components/home/Index/components/Solutions/index.module.css b/src/components/home/Index/components/Solutions/index.module.css
@@ -47,8 +47,8 @@
 
 .solutionBaseImageStyle {
   @apply absolute bottom-0 z-[1] left-[50%] transition-opacity duration-500 ease-in-out opacity-0 delay-200 rounded-[8px];
-  @apply lg:max-w-[715px];
-  @apply xl:max-w-[825px];
+  @apply lg:w-[715px];
+  @apply xl:w-[825px];
   transform: translateX(-50%);
   box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.18);
 }

diff --git a/src/components/home/Index/components/Solutions/index.tsx b/src/components/home/Index/components/Solutions/index.tsx
@@ -99,14 +99,16 @@ const Solutions: FC = () => {
             >
               {item.contentBg}
             </div>
-            <div
-              className={clsx(
-                style.solutionBaseImageStyle,
-                selectIndex === item.value && style.solutionSelectImageStyle,
-              )}
-            >
-              {item.content}
-            </div>
+            {item.content && (
+              <div
+                className={clsx(
+                  style.solutionBaseImageStyle,
+                  selectIndex === item.value && style.solutionSelectImageStyle,
+                )}
+              >
+                {item.content}
+              </div>
+            )}
 
             <div className={style.linkButtonStyle}>
               <LinkButton

diff --git a/src/components/home/Index/constants.tsx b/src/components/home/Index/constants.tsx
@@ -3,22 +3,22 @@ import { translate } from "@docusaurus/Translate"
 export const TAB_OPTIONS = [
   {
     label: translate({
-      id: "ai_header.solutions_title.image_generator",
-      message: "AI Image Generator",
+      id: "ai_header.solutions_title.dashboard",
+      message: "Data Analysis Dashboard",
     }),
     value: 0,
   },
   {
     label: translate({
-      id: "ai_header.solutions_title.ai_voice_generator",
-      message: "AI Voice Generator",
+      id: "ai_header.solutions_title.image_generator",
+      message: "AI Image Generator",
     }),
     value: 1,
   },
   {
     label: translate({
-      id: "ai_header.solutions_title.dashboard",
-      message: "Data Analysis Dashboard",
+      id: "ai_header.solutions_title.ai_voice_generator",
+      message: "AI Voice Generator",
     }),
     value: 2,
   },
@@ -45,71 +45,65 @@ export const TAB_OPTIONS = [
   },
 ]
 
+//   3. Dashboard: ILAcx4p1C7Xz
 //   1. Image generator: ILAcx4p1C7Bc
 //   2. AI Voice Generator:  ILAcx4p1C7Bb
-//   3. Dashboard: ILAcx4p1C7Xz
 //   4. CMS: ILAcx4p1C72G
 //   5. CRM: ILAcx4p1C7N5
 //   6. Admin Panel: ILAcx4p1C7Oy
 export const SOLUTIONS_IMAGE = [
   {
     content: (
       <img
-        src="https://cdn.illacloud.com/illa-website/test/imageGenerate.svg"
+        src="https://cdn.illacloud.com/illa-website/home/solutions/dashboard_content.webp"
         className="w-full"
       />
     ),
     contentBg: (
       <img
-        src="https://cdn.illacloud.com/illa-website/test/Browser%202.png"
+        src="https://cdn.illacloud.com/illa-website/home/solutions/dashboard_bg.webp"
         className="w-full"
       />
     ),
-    appID: "ILAcx4p1C7Bc",
+    appID: "ILAcx4p1C7Xz",
     value: 0,
   },
   {
     content: (
       <img
-        src="https://cdn.illacloud.com/illa-website/test/imageGenerate2.svg"
+        src="https://cdn.illacloud.com/illa-website/home/solutions/image_generate_content.webp"
         className="w-full"
       />
     ),
     contentBg: (
       <img
-        src="https://cdn.illacloud.com/illa-website/test/imageGenerateBg2.svg"
+        src="https://cdn.illacloud.com/illa-website/home/solutions/image_generate_bg.webp"
         className="w-full"
       />
     ),
-    appID: "ILAcx4p1C7Bb",
+    appID: "ILAcx4p1C7Bc",
     value: 1,
   },
   {
     content: (
       <img
-        src="https://cdn.illacloud.com/illa-website/test/imageGenerate.svg"
+        src="https://cdn.illacloud.com/illa-website/home/solutions/ai_voice_content.webp"
         className="w-full"
       />
     ),
     contentBg: (
       <img
-        src="https://cdn.illacloud.com/illa-website/test/Browser.png"
+        src="https://cdn.illacloud.com/illa-website/home/solutions/ai_voice_bg.webp"
         className="w-full"
       />
     ),
-    appID: "ILAcx4p1C7Xz",
+    appID: "ILAcx4p1C7Bb",
     value: 2,
   },
   {
-    content: (
-      <img
-        src="https://cdn.illacloud.com/illa-website/test/imageGenerate2.svg"
-        className="w-full"
-      />
-    ),
     contentBg: (
       <img
-        src="https://cdn.illacloud.com/illa-website/test/imageGenerateBg2.svg"
+        src="https://cdn.illacloud.com/illa-website/home/solutions/cms_bg.webp"
         className="w-full"
       />
     ),
@@ -119,13 +113,13 @@ export const SOLUTIONS_IMAGE = [
   {
     content: (
       <img
-        src="https://cdn.illacloud.com/illa-website/test/imageGenerate.svg"
+        src="https://cdn.illacloud.com/illa-website/home/solutions/crm_content.webp"
         className="w-full"
       />
     ),
     contentBg: (
       <img
-        src="https://cdn.illacloud.com/illa-website/test/imageGenerateBg.svg"
+        src="https://cdn.illacloud.com/illa-website/home/solutions/crm_bg.webp"
         className="w-full"
       />
     ),
@@ -135,13 +129,13 @@ export const SOLUTIONS_IMAGE = [
   {
     content: (
       <img
-        src="https://cdn.illacloud.com/illa-website/test/imageGenerate2.svg"
+        src="https://cdn.illacloud.com/illa-website/home/solutions/admin_content.webp"
         className="w-full"
       />
     ),
     contentBg: (
       <img
-        src="https://cdn.illacloud.com/illa-website/test/imageGenerateBg2.svg"
+        src="https://cdn.illacloud.com/illa-website/home/solutions/admin_panel_bg.webp"
         className="w-full"
       />
     ),
@@ -154,47 +148,47 @@ const MOBILE_SOLUTIONS_IMAGE = [
   {
     content: (
       <img
-        src="https://cdn.illacloud.com/illa-website/test/imageGenerateBg.svg"
+        src="https://cdn.illacloud.com/illa-website/home/solutions/mix_dashboard.webp"
         className="w-full max-w-[320px]"
       />
     ),
   },
   {
     content: (
       <img
-        src="https://cdn.illacloud.com/illa-website/test/imageGenerateBg.svg"
+        src="https://cdn.illacloud.com/illa-website/home/solutions/mix_image_generator.webp"
         className="w-full max-w-[320px]"
       />
     ),
   },
   {
     content: (
       <img
-        src="https://cdn.illacloud.com/illa-website/test/imageGenerateBg.svg"
+        src="https://cdn.illacloud.com/illa-website/home/solutions/mix_ai_voice.webp"
         className="w-full max-w-[320px]"
       />
     ),
   },
   {
     content: (
       <img
-        src="https://cdn.illacloud.com/illa-website/test/imageGenerateBg2.svg"
+        src="https://cdn.illacloud.com/illa-website/home/solutions/cms_bg.webp"
         className="w-full max-w-[320px]"
       />
     ),
   },
   {
     content: (
       <img
-        src="https://cdn.illacloud.com/illa-website/test/imageGenerateBg.svg"
+        src="https://cdn.illacloud.com/illa-website/home/solutions/mix_crm.webp"
         className="w-full max-w-[320px]"
       />
     ),
   },
   {
     content: (
       <img
-        src="https://cdn.illacloud.com/illa-website/test/imageGenerateBg2.svg"
+        src="https://cdn.illacloud.com/illa-website/home/solutions/mix_admin_panel.webp"
         className="w-full max-w-[320px]"
       />
     ),

diff --git a/src/css/custom.css b/src/css/custom.css
@@ -24,7 +24,7 @@
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
-[data-theme='dark'] {
+[data-theme="dark"] {
   --ifm-color-primary: #9580ff;
   --ifm-color-primary-dark: #755aff;
   --ifm-color-primary-darker: #6547ff;
@@ -35,3 +35,21 @@
   --ifm-background-color: #0a0a0a;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
+
+@font-face {
+  font-family: "Ubuntu Mono";
+  font-weight: 700;
+  font-style: normal;
+  src: url("../fonts/Ubuntu-Mono-bold.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "JetBrains Mono";
+  src: url("../fonts/JetBrainsMono-Regular.woff2") format("woff2");
+  src: url("../fonts/JetBrainsMono-Regular.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Eurostile Becker";
+  src: url("../fonts/Eurostile Becker Heavy Regular.ttf") format("truetype");
+}
diff --git a/src/fonts/Eurostile Becker Heavy Regular.ttf b/src/fonts/Eurostile Becker Heavy Regular.ttf
diff --git a/src/fonts/JetBrainsMono-Regular.ttf b/src/fonts/JetBrainsMono-Regular.ttf
diff --git a/src/fonts/JetBrainsMono-Regular.woff2 b/src/fonts/JetBrainsMono-Regular.woff2
diff --git a/src/fonts/Ubuntu-Mono-bold.woff2 b/src/fonts/Ubuntu-Mono-bold.woff2
diff --git a/src/hooks/usePaintBg.ts b/src/hooks/usePaintBg.ts
@@ -11,8 +11,8 @@ export const usePaintBg = (
     const ctx = canvas.getContext("2d")
     const interval = 56
 
-    canvas.width = window.innerWidth
-    canvas.height = window.innerHeight
+    canvas.width = containerRef.current.clientWidth
+    canvas.height = containerRef.current.clientHeight
 
     const drawGrid = () => {
       ctx.strokeStyle = "rgba(255, 255, 255, 0.1)"