From 25f870ccc0630ca16cf058d226bfb9897f0c230b Mon Sep 17 00:00:00 2001
From: Ephraim Atta-Duncan <ephraimduncan68@gmail.com>
Date: Thu, 23 May 2024 14:39:43 +0000
Subject: [PATCH] feat: dark mode

---
 apps/marketing/src/components/(marketing)/carousel.tsx | 8 +++-----
 apps/marketing/src/components/(marketing)/thumb.tsx    | 9 ++++++---
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/apps/marketing/src/components/(marketing)/carousel.tsx b/apps/marketing/src/components/(marketing)/carousel.tsx
index 51ee3fed0..22261b205 100644
--- a/apps/marketing/src/components/(marketing)/carousel.tsx
+++ b/apps/marketing/src/components/(marketing)/carousel.tsx
@@ -82,8 +82,6 @@ export const Carousel = () => {
     resetProgress();
     const autoplay = emblaApi.plugins()?.autoplay;
 
-    console.log(autoplay);
-
     if (autoplay) {
       autoplay.reset();
     }
@@ -182,8 +180,8 @@ export const Carousel = () => {
           </div>
         </div>
 
-        <div className="absolute bottom-2 right-2 flex w-[5%] flex-col items-center space-y-1 rounded-lg bg-white p-1.5">
-          <span className="text-foreground text-xs">
+        <div className="dark:bg-background absolute bottom-2 right-2 flex w-[5%] flex-col items-center space-y-1 rounded-lg bg-white  p-1.5">
+          <span className="text-foreground dark:text-muted-foreground text-xs">
             {selectedIndex + 1}/{slides.length}
           </span>
           <Progress value={progress} className="h-1" />
@@ -191,7 +189,7 @@ export const Carousel = () => {
       </Card>
 
       <div className="mx-auto mt-12 max-w-4xl px-2">
-        <div className="bg-muted-foreground/10 text-foreground inline-block rounded-xl px-3 py-2 text-sm">
+        <div className="bg-muted-foreground/10 dark:bg-muted text-foreground dark:text-muted-foreground inline-block rounded-xl px-3 py-2 text-sm">
           What's new
         </div>
 
diff --git a/apps/marketing/src/components/(marketing)/thumb.tsx b/apps/marketing/src/components/(marketing)/thumb.tsx
index c4a690292..5a1783d04 100644
--- a/apps/marketing/src/components/(marketing)/thumb.tsx
+++ b/apps/marketing/src/components/(marketing)/thumb.tsx
@@ -16,9 +16,12 @@ export const Thumb: React.FC<PropType> = (props) => {
     <button
       onClick={onClick}
       type="button"
-      className={cn('text-muted-foreground border-b-2 border-transparent py-4', {
-        'border-primary text-foreground border-b-2': selected,
-      })}
+      className={cn(
+        'text-muted-foreground dark:text-muted-foreground/60 border-b-2 border-transparent py-4',
+        {
+          'border-primary text-foreground dark:text-muted-foreground border-b-2': selected,
+        },
+      )}
     >
       {label}
     </button>