Adjust Dark Mode Styles for Home Page

app/layout.tsx

@@ -28,7 +28,7 @@ export default function RootLayout({
         <ThemeProvider attribute="class">
           <Header />
 
-          <main className="w-full min-h-[calc(100vh-136px)] md:min-h-[calc(100vh-144px)] mt-[136px] md:mt-36 bg-slate-50 dark:bg-neutral-900">
+          <main className="w-full min-h-[calc(100vh-136px)] md:min-h-[calc(100vh-144px)] mt-[136px] md:mt-36 bg-slate-50 dark:bg-[#080f15]">
             <div className="w-full max-w-[1432px] sm:max-w-[1464px] mx-auto h-full px-4 sm:px-8 py-8 sm:py-16">
               {children}
             </div>

components/button.tsx

@@ -26,11 +26,12 @@ export const Button = ({
 }: buttonProps) => {
   const variantCls = {
     primary: 'text-white bg-primary xs:hover:opacity-75',
-    secondary: 'text-black bg-zinc-100 dark:bg-white/10 xs:hover:opacity-75',
+    secondary:
+      'text-black dark:text-white bg-zinc-100 dark:bg-white/10 xs:hover:opacity-75',
     ghost:
       'text-black dark:text-gray-200 hover:bg-zinc-100 dark:hover:bg-white/10 xs:hover:opacity-75',
     outline:
-      'text-black bg-white border-2 border-zinc-400 disabled:hover:border-zinc-400 sm:hover:border-primary',
+      'text-black dark:text-white bg-white dark:bg-neutral-800 border-2 border-zinc-400 disabled:hover:border-zinc-400 sm:hover:border-primary dark:sm:hover:border-white',
   }[variant]
 
   return (
@@ -39,7 +40,7 @@ export const Button = ({
       onClick={onClick}
       disabled={disabled}
       className={clsx(
-        'h-12 px-5 flex items-center justify-center gap-2 text-base font-medium text-nowrap rounded-full transition-all duration-200 disabled:opacity-50',
+        'h-12 px-5 flex items-center justify-center gap-2 text-base font-medium text-nowrap outline-none rounded-full transition-all duration-200 disabled:opacity-50',
         !disabled && 'group',
         variantCls,
         className

components/card.tsx

@@ -11,7 +11,7 @@ interface cardProps {
 export const Card = ({ link, imageUrl, title, description }: cardProps) => (
   <Link
     href={link}
-    className="w-full sm:max-w-[300px] h-[156px] xs:h-[168px] sm:h-[200px] flex flex-col justify-start items-start gap-3 sm:gap-4 p-4 sm:p-6 bg-white rounded-xl border border-gray-200 hover:shadow-card transition-all duration-200"
+    className="w-full sm:max-w-[300px] h-[156px] xs:h-[168px] sm:h-[200px] flex flex-col justify-start items-start gap-3 sm:gap-4 p-4 sm:p-6 rounded-xl dark:hover:bg-zinc-600/5 border border-gray-200 dark:border-opacity-15 dark:hover:border-opacity-30 hover:shadow-card outline-none transition-all duration-200"
   >
     <Image
       alt={title}
@@ -22,10 +22,10 @@ export const Card = ({ link, imageUrl, title, description }: cardProps) => (
     />
 
     <div className="flex flex-col justify-start items-start gap-2 sm:gap-3">
-      <h2 className="text-black text-md xs:text-lg sm:text-xl font-bold">
+      <h2 className="text-black dark:text-white text-md xs:text-lg sm:text-xl font-bold">
         {title}
       </h2>
-      <p className="text-zinc-700 text-opacity-60 text-sm font-medium line-clamp-2">
+      <p className="text-zinc-700 dark:text-neutral-400 text-opacity-60 text-sm line-clamp-2">
         {description}
       </p>
     </div>

components/carousel.tsx

@@ -205,7 +205,7 @@ const CarouselPrevious = React.forwardRef<
       className,
       variant = 'outline',
       icon = (
-        <ArrowLeftIcon className="stroke-zinc-400 sm:group-hover:stroke-primary" />
+        <ArrowLeftIcon className="stroke-zinc-400 sm:group-hover:stroke-primary dark:sm:group-hover:stroke-white" />
       ),
       ...props
     },
@@ -243,7 +243,7 @@ const CarouselNext = React.forwardRef<
       className,
       variant = 'outline',
       icon = (
-        <ArrowRightIcon className="stroke-zinc-400 sm:group-hover:stroke-primary" />
+        <ArrowRightIcon className="stroke-zinc-400 sm:group-hover:stroke-primary dark:sm:group-hover:stroke-white" />
       ),
       ...props
     },

components/nav-dropdown.tsx

@@ -31,7 +31,7 @@ export const NavDropdown = ({
 
       <div
         className={clsx(
-          'hidden sm:group-hover:flex absolute top-12 flex-col min-w-[220px] gap-2 p-4 bg-white dark:bg-black rounded-b-md shadow-md dark:shadow-none border border-zinc-100 dark:border-zinc-400/20',
+          'hidden sm:group-hover:flex absolute top-12 flex-col min-w-[220px] gap-2 p-4 bg-white dark:bg-[#0f1214] rounded-b-md shadow-md dark:shadow-none border border-zinc-100 dark:border-zinc-400/20',
           positionCls
         )}
       >
@@ -39,7 +39,7 @@ export const NavDropdown = ({
           <Link
             key={i}
             href={opLink}
-            className="w-full p-2 text-sm text-black dark:text-gray-100 hover:bg-zinc-100 dark:hover:bg-zinc-400/20 rounded-md transition-colors duration-200"
+            className="w-full p-2 text-sm text-black dark:text-gray-100 hover:bg-zinc-100 dark:hover:bg-zinc-400/10 rounded-md transition-colors duration-200"
           >
             {label}
           </Link>

components/section-wrapper.tsx

@@ -15,14 +15,18 @@ export const SectionWrapper = ({
   children,
   childrenClass,
 }: sectionWraperProps) => (
-  <section className="w-full flex flex-col px-0 xs:px-2 sm:px-4 md:px-6 py-0 sm:py-2 md:py-4 bg-white rounded-3xl">
+  <section className="w-full flex flex-col px-0 xs:px-2 sm:px-4 md:px-6 py-0 sm:py-2 md:py-4 bg-white dark:bg-[#1e2023] rounded-3xl">
     <div className="flex items-center justify-between px-4 py-4 sm:py-6 gap-2">
-      <h1 className={'text-black text-xl sm:text-3xl font-bold'}>{title}</h1>
+      <h1
+        className={'text-black dark:text-white text-xl sm:text-3xl font-bold'}
+      >
+        {title}
+      </h1>
       {showAllButton && (
         <Button
           label="All"
           variant="secondary"
-          icon={<AngleRightIcon />}
+          icon={<AngleRightIcon className="fill-black dark:fill-white" />}
           className="hidden sm:flex h-9"
         />
       )}

public/angle-right.svg

@@ -1,3 +1,3 @@
 <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.89942 11.0173C3.77855 11.0132 3.65972 10.9846 3.55039 10.9329C3.44099 10.8813 3.3433 10.808 3.26327 10.7172C3.09469 10.5485 3 10.3197 3 10.0811C3 9.84258 3.09469 9.61368 3.26327 9.44492L6.86418 5.844L3.26327 2.24311C3.19207 2.07026 3.17644 1.87953 3.21857 1.69738C3.26069 1.51524 3.35848 1.35073 3.49835 1.22669C3.63824 1.10265 3.81324 1.02524 3.99917 1.00519C4.18498 0.985145 4.37246 1.02347 4.53559 1.11483L8.73665 5.31587C8.9053 5.48475 9 5.71353 9 5.95203C9 6.19065 8.9053 6.41943 8.73665 6.58819L4.53559 10.7172C4.45553 10.808 4.35782 10.8813 4.24847 10.9329C4.13912 10.9846 4.02029 11.0132 3.89942 11.0173Z" fill="black"/>
+<path d="M3.89942 11.0173C3.77855 11.0132 3.65972 10.9846 3.55039 10.9329C3.44099 10.8813 3.3433 10.808 3.26327 10.7172C3.09469 10.5485 3 10.3197 3 10.0811C3 9.84258 3.09469 9.61368 3.26327 9.44492L6.86418 5.844L3.26327 2.24311C3.19207 2.07026 3.17644 1.87953 3.21857 1.69738C3.26069 1.51524 3.35848 1.35073 3.49835 1.22669C3.63824 1.10265 3.81324 1.02524 3.99917 1.00519C4.18498 0.985145 4.37246 1.02347 4.53559 1.11483L8.73665 5.31587C8.9053 5.48475 9 5.71353 9 5.95203C9 6.19065 8.9053 6.41943 8.73665 6.58819L4.53559 10.7172C4.45553 10.808 4.35782 10.8813 4.24847 10.9329C4.13912 10.9846 4.02029 11.0132 3.89942 11.0173Z" fill=""/>
 </svg>