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

feat: update solution page index style
illacloud · Jan 3, 2024 · 66e10c8 · 66e10c8
2 parents b57c69a + 17d128e
commit 66e10c8
Show file tree

Hide file tree

Showing 7 changed files with 84 additions and 36 deletions.
diff --git a/src/ILLATheme/CommonFooter/constants.tsx b/src/ILLATheme/CommonFooter/constants.tsx
@@ -79,7 +79,7 @@ const Solution: IFootContentItem[] = [
   {
     label: translate({
       id: "ai_header.solutions_title.image_generator",
-      message: "Image generator",
+      message: "AI Image Generator",
     }),
     href: "/image-generator",
     tagCategory: "homepage_menu_solutions_image_generator_click",
@@ -95,23 +95,23 @@ const Solution: IFootContentItem[] = [
   {
     label: translate({
       id: "ai_header.solutions_title.dashboard",
-      message: "Dashboard",
+      message: "Data Analysis Dashboard",
     }),
     href: "/dashboard",
     tagCategory: "homepage_menu_solutions_dashboard_click",
   },
   {
     label: translate({
       id: "ai_header.solutions_title.cms",
-      message: "CMS",
+      message: "Content Management",
     }),
     href: "/cms",
     tagCategory: "homepage_menu_solutions_dashboard_click",
   },
   {
     label: translate({
       id: "ai_header.solutions_title.crm",
-      message: "CRM",
+      message: "Sales CRM",
     }),
     href: "/crm",
     tagCategory: "homepage_menu_solutions_dashboard_click",

diff --git a/src/ILLATheme/CommonHeader/constants.tsx b/src/ILLATheme/CommonHeader/constants.tsx
@@ -11,7 +11,7 @@ import AdminPanelIcon from "@site/static/img/solutions/admin-panel.svg"
 export const SOLUTIONS: NavbarPopoverItemType = {
   label: translate({
     id: "ai_header.solutions_title.solutions",
-    message: "Solution",
+    message: "Solutions",
   }),
   subPanelTitle: translate({
     id: "ai_header.solutions_sub_title.solutions_by_use_case",
@@ -21,7 +21,7 @@ export const SOLUTIONS: NavbarPopoverItemType = {
     {
       label: translate({
         id: "ai_header.solutions_title.image_generator",
-        message: "Image generator",
+        message: "AI Image Generator",
       }),
       description: translate({
         id: "ai_header.solutions_description.image_generator",
@@ -40,7 +40,7 @@ export const SOLUTIONS: NavbarPopoverItemType = {
       description: translate({
         id: "ai_header.solutions_description.ai_voice_generator",
         message:
-          "Generate images with AI. Make the communication of ideas more efficient.",
+          "Translation and redubbing, enabling efficient production of video content for diverse language regions.",
       }),
       icon: <VoiceGeneratorIcon className="w-[24px] h-[24px]" />,
       href: "/ai-voice-generator",
@@ -49,7 +49,7 @@ export const SOLUTIONS: NavbarPopoverItemType = {
     {
       label: translate({
         id: "ai_header.solutions_title.dashboard",
-        message: "Dashboard",
+        message: "Data Analysis Dashboard",
       }),
       description: translate({
         id: "ai_header.solutions_description.dashboard",
@@ -63,7 +63,7 @@ export const SOLUTIONS: NavbarPopoverItemType = {
     {
       label: translate({
         id: "ai_header.solutions_title.cms",
-        message: "CMS",
+        message: "Content Management",
       }),
       description: translate({
         id: "ai_header.solutions_description.cms",
@@ -77,7 +77,7 @@ export const SOLUTIONS: NavbarPopoverItemType = {
     {
       label: translate({
         id: "ai_header.solutions_title.crm",
-        message: "CRM",
+        message: "Sales CRM",
       }),
       description: translate({
         id: "ai_header.solutions_description.crm",

diff --git a/src/ILLATheme/SolutionLayout/FirstScreen/index.module.css b/src/ILLATheme/SolutionLayout/FirstScreen/index.module.css
@@ -1,14 +1,22 @@
 .containerStyle {
-  @apply flex text-title grow-0 text-white-01 flex-col  items-center font-bold px-[20px];
+  @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 lg:mb-[120px];
 }
+/* @apply my-[64px] lg:pt-[150px] lg:pb-[100px]; */
 
+.indexBgStyle {
+  @apply w-full h-full lg:h-[calc(100vh-77px)] overflow-hidden absolute z-[-1];
+}
+.indexBgStyle svg {
+  @apply w-full h-auto absolute bottom-0;
+}
 .canvasContainerStyle {
-  @apply w-full h-screen overflow-hidden absolute z-[-1];
+  @apply w-full h-full  lg:h-[calc(100vh-77px)] overflow-hidden absolute z-[-1];
 }
 
 .contentContainer {
-  @apply flex justify-center flex-col items-center gap-[24px] py-[64px];
-  @apply lg:max-w-[1040px] lg:gap-[56px] lg:pt-[150px] lg:pb-[100px];
+  @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 xl:max-w-[1200px] xl:w-[1200px];
 }
 .contentContainer svg {
@@ -43,7 +51,7 @@
 }
 
 .demoContainerStyle {
-  @apply w-full relative;
+  @apply w-full lg:absolute h-auto bottom-0 z-[2];
   perspective: 1040px;
 }
 
@@ -53,6 +61,6 @@
 }
 
 .linkButtonStyle {
-  @apply absolute bottom-[40px] z-[2] left-[50%];
+  @apply absolute lg:bottom-[40px] bottom-[16px] z-[2] left-[50%];
   transform: translateX(-50%);
 }
diff --git a/src/ILLATheme/SolutionLayout/FirstScreen/index.tsx b/src/ILLATheme/SolutionLayout/FirstScreen/index.tsx
@@ -10,6 +10,7 @@ import Interpolate from "@docusaurus/Interpolate"
 import { motion, useScroll, useTransform } from "framer-motion"
 import { addUrlParams } from "@site/src/utils/urlParams"
 import { CLOUD_URL, DEMO_BASE_URL } from "@site/src/constants/url"
+import IndexBgSvg from "@site/static/img/solutions/indexBg.svg"
 
 interface IFirstScreenProps {
   slogan: string
@@ -39,6 +40,7 @@ const FirstScreen: FC<IFirstScreenProps> = ({
 
   const rotateX = useTransform(scrollYProgress, [0, 0.015], [15, 0])
   const scale = useTransform(scrollYProgress, [0, 0.015], [0.95, 1])
+  const scrollY = useTransform(scrollYProgress, [0, 0.015], ["15%", "0%"])
 
   usePaintBg(canvasRef, containerRef)
 
@@ -57,6 +59,9 @@ const FirstScreen: FC<IFirstScreenProps> = ({
       <div className={style.canvasContainerStyle}>
         <canvas ref={canvasRef} />
       </div>
+      <span className={style.indexBgStyle}>
+        <IndexBgSvg />
+      </span>
       <div className={style.contentContainer}>
         <div className={style.textContainerStyle}>
           <h1 className={style.sloganStyle}>
@@ -85,32 +90,33 @@ const FirstScreen: FC<IFirstScreenProps> = ({
             style={{
               rotateX: rotateX,
               scale: scale,
+              y: scrollY,
             }}
           >
             <img src={image} width="100%" alt={imageAlt} />
-            <div className={style.linkButtonStyle}>
-              <LinkButton
-                href={handleDemoHref(appID)}
-                size="small"
-                colorType="dark"
-                handleClick={() => {
-                  sendTagEvent({
-                    action: "solution_try_for_free",
-                  })
-                }}
-              >
-                <Translate id="website_4.solution.use_this_template">
-                  Try demo now!
-                </Translate>
-              </LinkButton>
-            </div>
           </motion.div>
           <img
             className="lg:hidden block w-full rounded-[8px]"
             src={image}
             alt={imageAlt}
           />
         </div>
+        <div className={style.linkButtonStyle}>
+          <LinkButton
+            href={handleDemoHref(appID)}
+            size="small"
+            colorType="dark"
+            handleClick={() => {
+              sendTagEvent({
+                action: "solution_try_for_free",
+              })
+            }}
+          >
+            <Translate id="website_4.solution.use_this_template">
+              Try demo now!
+            </Translate>
+          </LinkButton>
+        </div>
       </div>
     </div>
   )

diff --git a/src/components/home/Index/constants.tsx b/src/components/home/Index/constants.tsx
@@ -4,7 +4,7 @@ export const TAB_OPTIONS = [
   {
     label: translate({
       id: "ai_header.solutions_title.image_generator",
-      message: "Image generator",
+      message: "AI Image Generator",
     }),
     value: 0,
   },
@@ -18,21 +18,21 @@ export const TAB_OPTIONS = [
   {
     label: translate({
       id: "ai_header.solutions_title.dashboard",
-      message: "Dashboard",
+      message: "Data Analysis Dashboard",
     }),
     value: 2,
   },
   {
     label: translate({
       id: "ai_header.solutions_title.cms",
-      message: "CMS",
+      message: "Content Management",
     }),
     value: 3,
   },
   {
     label: translate({
       id: "ai_header.solutions_title.crm",
-      message: "CRM",
+      message: "Sales CRM",
     }),
     value: 4,
   },

diff --git a/src/config/Solutions/index.ts b/src/config/Solutions/index.ts
@@ -0,0 +1 @@
+// export const
diff --git a/static/img/solutions/indexBg.svg b/static/img/solutions/indexBg.svg