greyscale

src/blocks/SkillsMarquee/Component.tsx

@@ -1,9 +1,7 @@
 'use client'
 
 import React from 'react'
-import { cn } from '@/utilities/ui'
 import { InfiniteSlider } from '@/components/ui/infinite-slider'
-import { useThemeMode } from '@/hooks/useThemeMode'
 
 const LOGOS = [
   { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/aftereffects-plain.svg', alt: 'aftereffects' },
@@ -67,27 +65,22 @@ type SkillsMarqueeBlockProps = {
 }
 
 export function SkillsMarqueeBlock({ heading }: SkillsMarqueeBlockProps) {
-  const { isDark } = useThemeMode()
-  const text   = isDark ? 'text-white/40' : 'text-black/40'
-  const border = isDark ? 'border-white/10' : 'border-black/10'
-
   return (
-    <section className={cn('relative border-t py-8', border)}>
-      <p className={cn('mb-6 text-center text-xs tracking-widest uppercase px-6', text)}>
+    <section className="relative border-t border-foreground/10 py-8">
+      <p className="mb-6 text-center text-xs tracking-widest uppercase px-6 text-foreground/40">
         {heading || 'Skills'}
       </p>
       <div className="[mask-image:linear-gradient(to_right,transparent,black,transparent)]">
-<InfiniteSlider gap={48} duration={120}>
-  {LOGOS.map((l) => (
-<img
-  key={l.alt}
-  src={l.src}
-  alt={l.alt}
-  style={{ filter: 'grayscale(1) var(--tw-invert)' }}
-  className="h-14 w-auto flex-shrink-0 pointer-events-none select-none grayscale opacity-25 dark:opacity-35"
-/>
-  ))}
-</InfiniteSlider>
+        <InfiniteSlider gap={48} duration={120}>
+          {LOGOS.map((l) => (
+            <img
+              key={l.alt}
+              src={l.src}
+              alt={l.alt}
+              className="h-14 w-auto flex-shrink-0 pointer-events-none select-none grayscale opacity-25 dark:opacity-35"
+            />
+          ))}
+        </InfiniteSlider>
       </div>
     </section>
   )