From d9440b30365e83fd285230cf1bbb3fb34cf62949 Mon Sep 17 00:00:00 2001
From: HoangNDM6 <mhoang.9699@gmail.com>
Date: Mon, 19 Feb 2024 15:01:03 +0700
Subject: [PATCH] add id products

---
 src/app/globals.css                              | 2 +-
 src/components/Header/Item/index.tsx             | 4 ++--
 src/sections/blogs/components/Card/index.tsx     | 2 +-
 src/sections/ecosystem/components/Card/index.tsx | 6 ++++--
 src/sections/ecosystem/index.tsx                 | 2 +-
 tailwind.config.ts                               | 2 +-
 6 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index e195ad8..4b1f53d 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -201,7 +201,7 @@ body {
 
 /* Ecosystem card */
 
-.ecosystem-card-aha:hover {
+.ecosystem-card-ahamove:hover {
   background-image: url("../assets/images/img_bg_ahamove.png");
   background-size: cover;
   background-repeat: no-repeat;
diff --git a/src/components/Header/Item/index.tsx b/src/components/Header/Item/index.tsx
index 5a60c8f..379f170 100644
--- a/src/components/Header/Item/index.tsx
+++ b/src/components/Header/Item/index.tsx
@@ -13,7 +13,7 @@ const Item = ({ children, path, subItems }: { children: ReactNode, path?: string
     if (subItems) {
         const listPaths = subItems.map((e: any) => e.pageRoute)
         const isActive = listPaths.includes(pathname.slice(0, -1))
-        
+
         return (
             <div className="flex justify-center items-center">
                 <div className={`group relative px-6 py-3 hover:bg-medium-charcoal ${isActive ? 'bg-medium-charcoal' : ''} rounded-2xl cursor-pointer`}>
@@ -42,7 +42,7 @@ const Item = ({ children, path, subItems }: { children: ReactNode, path?: string
 
     return (
         <div className="flex justify-center items-center">
-            <Link href={path ?? PAGE_ROUTE.HOME} className={`w-24 px-6 py-3 hover:bg-medium-charcoal ${pathname.slice(0, -1) === path ? 'bg-medium-charcoal' : ''} rounded-2xl text-lg flex justify-center items-center`}>{children}</Link>
+            <Link href={path ?? PAGE_ROUTE.HOME} className={`w-24 px-6 py-3 hover:bg-medium-charcoal ${(pathname === PAGE_ROUTE.HOME ? pathname : pathname.slice(0, -1)) === path ? 'bg-medium-charcoal' : ''} rounded-2xl text-lg flex justify-center items-center`}>{children}</Link>
         </div>
     )
 
diff --git a/src/sections/blogs/components/Card/index.tsx b/src/sections/blogs/components/Card/index.tsx
index c44f4d1..0b7e5ac 100644
--- a/src/sections/blogs/components/Card/index.tsx
+++ b/src/sections/blogs/components/Card/index.tsx
@@ -21,7 +21,7 @@ function Card({ post }: CardProps) {
                 <Image className="rounded-t-2xl h-[168px] object-cover xl:h-[303px]" width={539} height={303} src={featureImage} alt='img_blog'></Image>
             </Link>
             <div className="flex flex-col gap-2 p-6 xl:px-10 xl:pt-8 xl:pb-12">
-                <span className="bg-brand-linear-gradient bg-clip-text text-transparent font-normal leading-6">{tag}</span>
+                <span className="text-[rgba(253,149,82,1)] font-normal leading-6">{tag}</span>
                 <Link href={url} target="_blank" className="text-white font-ppmori-semibold text-[22px] font-semibold leading-8 hover:underline">{title}</Link>
             </div>
         </div>
diff --git a/src/sections/ecosystem/components/Card/index.tsx b/src/sections/ecosystem/components/Card/index.tsx
index 53957e7..bcef431 100644
--- a/src/sections/ecosystem/components/Card/index.tsx
+++ b/src/sections/ecosystem/components/Card/index.tsx
@@ -18,7 +18,7 @@ function Card({ data }: CardProps) {
     const { img, title, description, name, link } = data
     return (
         <div className={`ecosystem-card-${name} group relative bg-white hover:bg-black rounded-3xl border border-solid border-[rgba(254,119,108,0.16)] flex flex-col gap-8 lg:gap-0 lg:justify-between items-start p-8 hover:pb-10 max-w-[345px] h-[296px] card lg:p-14 lg:hover:pb-16 lg:max-w-[427px] lg:max-h-[481px] lg:h-[481px]`}>
-            <Link href={link} target="_blank">
+            <Link id={`product-${name}`} href={link} target="_blank">
                 <Image className="lg:w-8 lg:h-8 absolute right-[30px] top-[30px] hidden rotate-45 group-hover:block group-hover:rotate-0 transition delay-100 duration-500" src={ic_arrow_up_right} alt="ic_arrow"></Image>
             </Link>
             <Image className="lg:w-16 lg:h-16" src={img} alt={title}></Image>
@@ -26,7 +26,9 @@ function Card({ data }: CardProps) {
                 <span className="text-black text-2xl font-semibold leading-7 font-ppmori-semibold group-hover:text-white">{title}</span>
                 <div className="flex flex-1 flex-col justify-between">
                     <span className="text-black text-[18px] font-normal leading-7 lg:text-xl lg:leading-8 group-hover:text-medium-gray">{description}</span>
-                    <span className="hidden lg:block bg-brand-linear-gradient bg-clip-text text-transparent text-[18px] font-normal leading-8">Experience</span>
+                    <Link id={`product-${name}`} href={link} target="_blank" className="hidden lg:block bg-brand-linear-gradient bg-clip-text text-transparent text-[18px] font-normal leading-8 w-fit">
+                        Experience
+                    </Link>
                 </div>
             </div>
         </div>
diff --git a/src/sections/ecosystem/index.tsx b/src/sections/ecosystem/index.tsx
index c7e954f..c28839c 100644
--- a/src/sections/ecosystem/index.tsx
+++ b/src/sections/ecosystem/index.tsx
@@ -13,7 +13,7 @@ const ecosystemData = [{
 },
 {
     img: img_ahamove,
-    name: "aha",
+    name: "ahamove",
     title: "Ahamove",
     link: AURA_ECOSYSTEM.AHA_MOVE,
     description: "Read more about the first mainstream integration of Aura, with the largest transport app in Vietnam."
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 1ab3860..da10ffb 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -18,7 +18,7 @@ const config: Config = {
         "brand-gradient":
           "linear-gradient(339deg, #FFD569, #FC8E4F, #FF697B)",
         "brand-linear-gradient":
-          "linear-gradient(339deg, #FFD569 23.57%, #FC8E4F 50.76%, #FF697B 76.37%)",
+          "linear-gradient(0deg, rgba(255, 213, 105, 1), rgba(252, 142, 79, 1), rgba(255, 105, 123, 1))",
       },
       colors: {
         "black-charcoal": "var(--black-charcoal)",