ok

src/components/UseCases.tsx

@@ -86,18 +86,18 @@ function Review({
   return (
     <figure
       className={clsx(
-        'animate-fade-in rounded-3xl bg-white p-6 opacity-0 shadow-md shadow-gray-900/5',
+        'animate-fade-in rounded-3xl bg-gray-900/50 p-6 opacity-0 shadow-md shadow-gray-900/5',
         className,
       )}
       style={{ animationDelay }}
       {...props}
     >
-      <blockquote className="text-gray-900">
+      <blockquote className="text-white">
         {React.createElement(getReviewIcon(title), { className: "h-6 w-6 text-[#2F3178] mb-2" })}
-        <CT color="primary" className="mt-4 text-lg/6 font-semibold">
+        <CT color="light" className="mt-4 text-lg/6 font-semibold">
           {title}
         </CT>
-        <CP color="custom" className="mt-3 text-sm">{body}</CP>
+        <CP color="light" className="mt-3 text-sm">{body}</CP>
       </blockquote>
 
     </figure>
@@ -176,7 +176,7 @@ function ReviewGrid() {
   return (
     <div
       ref={containerRef}
-      className="relative -mx-4 mt-0 grid h-196 max-h-[150vh] grid-cols-1 items-start gap-8 overflow-hidden px-4 sm:mt-20 md:grid-cols-2 lg:grid-cols-3"
+      className="relative -mx-4 mt-0 grid h-196 max-h-[150vh] grid-cols-1 items-start gap-8 overflow-hidden px-4  md:grid-cols-2 lg:grid-cols-3"
     >
       {isInView && (
         <>
@@ -206,8 +206,8 @@ function ReviewGrid() {
           />
         </>
       )}
-      <div className="pointer-events-none absolute inset-x-0 top-0 h-32 bg-linear-to-b from-white" />
-      <div className="pointer-events-none absolute inset-x-0 bottom-0 h-32 bg-linear-to-t from-white" />
+      <div className="pointer-events-none absolute inset-x-0 top-0 h-32 bg-linear-to-b from-black" />
+      <div className="pointer-events-none absolute inset-x-0 bottom-0 h-32 bg-linear-to-t from-black" />
     </div>
   )
 }
@@ -221,7 +221,7 @@ export function UseCases() {
       id="usecases"
       ref={ref}
       aria-labelledby="usecases-title"
-      className="py-12"
+      className="bg-black py-12"
     >
       <Container className=''>
         <motion.div
@@ -232,12 +232,12 @@ export function UseCases() {
         >
           <H2
             id="usecases-title" 
-            color="primary"
+            color="light"
             className="text-center"
           >
             Coming Soon: The Future of Mycelium
           </H2>
-          <P className="mt-6 text-center" color="custom">
+          <P className="mt-6 text-center" color="light">
           Mycelium Cloud is evolving to bring even more powerful decentralized features, designed to enhance your experience and expand possibilities. Be the first to explore what's coming next by staying connected with our latest updates.
           </P>
         </motion.div>