fix(): Reduce shadows for cards.

src/custom/docs/components/triplecard/index.tsx

@@ -1,13 +1,13 @@
-import { Card,  CardTitle, CardSubtitle  } from './Card'
-import NextImage from 'next/image'
-import { z } from 'zod'
-import { ComponentProps } from 'react'
+import { Card, CardTitle, CardSubtitle } from "./Card";
+import NextImage from "next/image";
+import { z } from "zod";
+import { ComponentProps } from "react";
 
 const linkSchema = z.object({
   title: z.string(),
   description: z.string(),
   link: z.string(),
-})
+});
 
 const cardSchema = z.array(
   z.object({
@@ -17,71 +17,69 @@ const cardSchema = z.array(
     image_link: z.string(),
     image_description: z.string(),
     links: z.array(linkSchema),
-  }))
+  })
+);
 
+const regularLink = (props: ComponentProps<"a">) => <a {...props}></a>;
 
-  const regularLink = (props: ComponentProps<'a'>) => <a {...props}></a>
-
-export const TripleCard = (props: {cards: z.infer<typeof cardSchema>, imageComponent: typeof NextImage | typeof regularLink  }) => {
-
+export const TripleCard = (props: {
+  cards: z.infer<typeof cardSchema>;
+  imageComponent: typeof NextImage | typeof regularLink;
+}) => {
   return (
-    <section className="shadow-lg rounded-xl grid grid-cols-1 items-stretch md:grid-cols-3 ">
+    <section className='shadow-sm rounded-xl grid grid-cols-1 items-stretch md:grid-cols-3 '>
       {props.cards.map((item, idx, arr) => {
         return (
           <Card
             key={item.title}
             className={(() => {
               if (idx === 0) {
-                return 'md:border-b-1 rounded-r-none border-b-none rounded-b md:rounded-bl-xl  md:border-r-0'
+                return "md:border-b-1 rounded-r-none border-b-none rounded-b md:rounded-bl-xl  md:border-r-0";
               }
               if (idx === arr.length - 1) {
-                return 'md:border-b-1 rounded-l-none rounded-t-none border-t-0  md:rounded-tr-xl  md:border-t  md:border-l-0'
+                return "md:border-b-1 rounded-l-none rounded-t-none border-t-0  md:rounded-tr-xl  md:border-t  md:border-l-0";
               }
-              return 'rounded-none border-t-0 md:border-t'
+              return "rounded-none border-t-0 md:border-t";
             })()}
           >
-
-            <CardTitle className="mt-1 -mb-0.5 text-[1.4rem]">
+            <CardTitle className='mt-1 -mb-0.5 text-[1.4rem]'>
               {item.title}
             </CardTitle>
             <CardSubtitle>{item.subtitle}</CardSubtitle>
             {item.image_link ? (
-              <div className="h-[19rem] md:h-[14rem] -my-4 flex justify-center dark:invert dark:brightness-[0.91] dark:grayscale">
+              <div className='h-[19rem] md:h-[14rem] -my-4 flex justify-center dark:invert dark:brightness-[0.91] dark:grayscale'>
                 <props.imageComponent
                   alt={item.image_description}
                   height={300}
                   src={item.image_link}
                   width={300}
-                  style={{ objectFit: 'contain' }}
+                  style={{ objectFit: "contain" }}
                   priority
-                /> 
+                />
               </div>
-            ) : (
-              null
-            )}
-            <div className="my-4"></div>
-            <ul className="mt-5 flex flex-col gap-4">
+            ) : null}
+            <div className='my-4'></div>
+            <ul className='mt-5 flex flex-col gap-4'>
               {item.links.map((link) => {
                 return (
                   <li key={link.title}>
-
                     <a
-                      className="font-semibold tracking-tight text-blue-600 dark:text-blue-300"
+                      className='font-semibold tracking-tight text-blue-600 dark:text-blue-300'
                       href={link.link}
                     >
                       {link.title}
                     </a>
-                    <div className="my-2"></div>
-                    <div className="text-muted-foreground text-xs leading-4">
+                    <div className='my-2'></div>
+                    <div className='text-muted-foreground text-xs leading-4'>
                       {link.description}
                     </div>
                   </li>
-                )
+                );
               })}
             </ul>
           </Card>
-        )
+        );
       })}
     </section>
-  )
-}
+  );
+};

src/shadcn/ui/card.tsx

@@ -8,7 +8,10 @@ const Card = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("rounded border bg-card text-card-foreground", className)}
+    className={cn(
+      "rounded border bg-card text-card-foreground shadow-sm",
+      className
+    )}
     {...props}
   />
 ));

src/shadcn/ui/switch.tsx

@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as SwitchPrimitives from "@radix-ui/react-switch"
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
 
-import { cn } from "src/utils"
+import { cn } from "src/utils";
 
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
@@ -19,11 +19,11 @@ const Switch = React.forwardRef<
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-sm ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
       )}
     />
   </SwitchPrimitives.Root>
-))
-Switch.displayName = SwitchPrimitives.Root.displayName
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
 
-export { Switch }
+export { Switch };