11import React from "react" ;
22import { useTranslation } from "react-i18next" ;
3+ import { useColorMode } from "@chakra-ui/react" ;
34
45type Props = { } ;
56
67const Ability = ( props : Props ) => {
78 const { t } = useTranslation ( ) ;
9+ const { colorMode } = useColorMode ( ) ;
10+ const darkMode = colorMode === "dark" ;
11+
812 return (
913 < div className = "h-auto" >
10- < h2 className = "py-[80px] pb-[48px] text-4xl text-[#152132] lg:py-[60px] lg:pb-[60px]" >
14+ < h2 className = "py-[80px] pb-[48px] text-4xl lg:py-[60px] lg:pb-[60px]" >
1115 { t ( `HomePage.Ability.title` ) }
1216 </ h2 >
1317 < div className = "w-full px-[16px] lg:hidden" >
14- < div className = "bg-card h-max-[520px] my-6 w-full rounded-2xl lg:hidden" >
18+ < div
19+ className = {
20+ darkMode
21+ ? "h-max-[520px] my-6 w-full rounded-2xl bg-lafDark-300 lg:hidden"
22+ : "bg-card h-max-[520px] my-6 w-full rounded-2xl lg:hidden"
23+ }
24+ >
1525 < div className = "justify-between" >
1626 < div className = "p-6" >
1727 < img className = "mb-8" src = "/homepage/functions.svg" alt = "icon" />
@@ -29,7 +39,13 @@ const Ability = (props: Props) => {
2939 />
3040 </ div >
3141 </ div >
32- < div className = "bg-card my-6 w-full rounded-2xl lg:hidden" >
42+ < div
43+ className = {
44+ darkMode
45+ ? "my-6 w-full rounded-2xl bg-lafDark-300 lg:hidden"
46+ : "bg-card my-6 w-full rounded-2xl lg:hidden"
47+ }
48+ >
3349 < div className = "justify-between" >
3450 < div className = "p-6" >
3551 < img className = "mb-8" src = "/homepage/database.svg" alt = "icon" />
@@ -44,7 +60,13 @@ const Ability = (props: Props) => {
4460 </ div >
4561 </ div >
4662
47- < div className = "bg-card my-6 w-full rounded-2xl lg:hidden" >
63+ < div
64+ className = {
65+ darkMode
66+ ? "my-6 w-full rounded-2xl bg-lafDark-300 lg:hidden"
67+ : "bg-card my-6 w-full rounded-2xl lg:hidden"
68+ }
69+ >
4870 < div className = "justify-between" >
4971 < div className = "p-6" >
5072 < img className = "mb-6" src = "/homepage/storage.svg" alt = "icon" />
@@ -59,7 +81,13 @@ const Ability = (props: Props) => {
5981 </ div >
6082 </ div >
6183 </ div >
62- < div className = "bg-card my-6 hidden w-full rounded-2xl lg:block" >
84+ < div
85+ className = {
86+ darkMode
87+ ? "my-6 hidden w-full rounded-2xl bg-lafDark-300 lg:block"
88+ : "bg-card my-6 hidden w-full rounded-2xl lg:block"
89+ }
90+ >
6391 < div className = "justify-between lg:flex lg:flex-row" >
6492 < div className = "p-6 lg:p-12" >
6593 < img className = "mb-6" src = "/homepage/functions.svg" alt = "icon" />
@@ -77,7 +105,13 @@ const Ability = (props: Props) => {
77105 </ div >
78106 </ div >
79107 < div className = "hidden w-full gap-6 lg:flex " >
80- < div className = "bg-card relative h-auto w-1/2 rounded-2xl px-12 pt-12" >
108+ < div
109+ className = {
110+ darkMode
111+ ? "relative h-auto w-1/2 rounded-2xl bg-lafDark-300 px-12 pt-12"
112+ : "bg-card relative h-auto w-1/2 rounded-2xl px-12 pt-12"
113+ }
114+ >
81115 < img className = "mb-6" src = "/homepage/database.svg" alt = "icon" />
82116 < h3 className = "w-[400px]" >
83117 < span className = "bg-gradient-to-r from-[#00CCE8] to-[#00E8A2] bg-clip-text text-transparent" >
@@ -89,7 +123,13 @@ const Ability = (props: Props) => {
89123 < img className = "mx-auto" src = "/homepage/database.png" alt = "database" />
90124 </ div >
91125 </ div >
92- < div className = "bg-card relative h-[600px] w-1/2 rounded-2xl px-12 pt-12" >
126+ < div
127+ className = {
128+ darkMode
129+ ? "relative h-[600px] w-1/2 rounded-2xl bg-lafDark-300 px-12 pt-12"
130+ : "bg-card relative h-[600px] w-1/2 rounded-2xl px-12 pt-12"
131+ }
132+ >
93133 < img className = "mb-6" src = "/homepage/storage.svg" alt = "icon" />
94134 < h3 className = "w-[400px]" >
95135 < span className = "bg-gradient-to-r from-[#57E37A] to-[#00BEB1] bg-clip-text text-transparent" >
0 commit comments