Dev

packages/web/components/ThemeSwitcher.tsx

@@ -4,13 +4,12 @@ import * as React from 'react';
 import { Check, Palette } from 'lucide-react';
 import { useColorTheme, ThemePalette } from './ColorThemeProvider';
 
-import { Button } from '@/components/ui/button';
 import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
+  McDropdownMenu,
+  McDropdownMenuContent,
+  McDropdownMenuItem,
+  McDropdownMenuTrigger,
+} from '@/components/ui/mc-dropdown-menu';
 import { cn } from '@/lib/utils';
 
 const themes: { name: string; value: ThemePalette; color: string }[] = [
@@ -30,22 +29,14 @@ export function ThemeSwitcher() {
   }, []);
 
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger
-        render={
-          <Button
-            variant="ghost"
-            size="icon-sm"
-            className="text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors focus-visible:ring-offset-0"
-          >
-            <Palette className="size-4.5" />
-            <span className="sr-only">Toggle Color Palette</span>
-          </Button>
-        }
-      />
-      <DropdownMenuContent align="end" className="w-48 rounded-xl shadow-lg">
+    <McDropdownMenu>
+      <McDropdownMenuTrigger className="inline-flex size-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0">
+        <Palette className="size-4.5" />
+        <span className="sr-only">Toggle Color Palette</span>
+      </McDropdownMenuTrigger>
+      <McDropdownMenuContent align="end" className="w-48 rounded-xl shadow-lg">
         {themes.map((t) => (
-          <DropdownMenuItem
+          <McDropdownMenuItem
             key={t.value}
             onClick={() => setColorTheme(t.value)}
             className="flex items-center justify-between cursor-pointer rounded-lg my-0.5"
@@ -65,9 +56,9 @@ export function ThemeSwitcher() {
               </span>
             </div>
             {mounted && colorTheme === t.value && <Check className="size-4 text-primary" />}
-          </DropdownMenuItem>
+          </McDropdownMenuItem>
         ))}
-      </DropdownMenuContent>
-    </DropdownMenu>
+      </McDropdownMenuContent>
+    </McDropdownMenu>
   );
 }

packages/web/components/sections/BackgroundBlur.tsx

@@ -17,24 +17,20 @@ function BackgroundBlur() {
       </div>
 
       {/* The Staging Area */}
-      <div className="relative w-full rounded-2xl border border-border shadow-sm bg-background overflow-hidden min-h-[350px] sm:min-h-[400px] flex items-center justify-center p-4 sm:p-10">
+      <div className="relative w-full rounded-2xl border border-border shadow-sm bg-background overflow-hidden min-h-[380px] sm:min-h-[440px] flex items-center justify-center p-4 sm:p-10">
         {/* Grid Pattern */}
-        <div className="absolute inset-0 bg-[linear-gradient(to_right,var(--border)_1px,transparent_1px),linear-gradient(to_bottom,var(--border)_1px,transparent_1px)] bg-[size:2rem_2rem] opacity-40 z-0" />
+        <div className="absolute inset-0 bg-[linear-gradient(to_right,var(--border)_1px,transparent_1px),linear-gradient(to_bottom,var(--border)_1px,transparent_1px)] bg-[size:2rem_2rem] opacity-30 z-0" />
 
-        {/* Top Left: Primary Circle */}
-        <div className="absolute -top-12 -left-12 w-40 h-40 sm:w-56 sm:h-56 lg:w-80 lg:h-80 rounded-full bg-primary z-0 shadow-lg" />
-
-        {/* Bottom Right: Secondary Rectangle */}
-        <div className="absolute -bottom-12 -right-12 w-40 h-40 sm:w-56 sm:h-56 lg:w-80 lg:h-80 rounded-3xl bg-secondary rotate-12 z-0 shadow-lg" />
-
-        {/* Center Stripe: Accent */}
-        <div className="absolute top-1/2 left-0 w-full h-12 sm:h-16 bg-accent -translate-y-1/2 -rotate-3 z-0" />
+        {/* Vivid forms placed UNDER the glass cards so the blur is clearly visible */}
+        <div className="absolute top-1/2 left-[10%] -translate-y-1/2 w-44 h-44 sm:w-60 sm:h-60 lg:w-72 lg:h-72 rounded-full bg-primary shadow-2xl z-0" />
+        <div className="absolute top-1/2 right-[10%] -translate-y-1/2 w-44 h-44 sm:w-56 sm:h-56 lg:w-72 lg:h-72 rounded-3xl bg-secondary rotate-12 shadow-2xl z-0" />
+        <div className="absolute top-1/2 left-0 w-full h-16 sm:h-20 bg-accent -translate-y-1/2 -rotate-3 opacity-90 z-0" />
 
         <div className="grid grid-cols-2 md:grid-cols-5 gap-3 sm:gap-4 lg:gap-6 w-full relative z-10">
           {blurs.map((b) => (
             <div
               key={b.name}
-              className={`flex flex-col items-center justify-center p-4 sm:p-6 lg:p-8 rounded-xl border border-border/40 bg-background/20 shadow-2xl transition-transform duration-300 hover:scale-105 ${b.class}`}
+              className={`flex flex-col items-center justify-center p-5 sm:p-7 lg:p-9 rounded-xl border border-border/50 bg-background/40 shadow-2xl backdrop-saturate-150 transition-transform duration-300 ${b.class}`}
             >
               {/* Inner Pill for Text Legibility */}
               <div className="flex flex-col items-center gap-1 bg-background/80 px-3 py-2 sm:px-4 sm:py-2 rounded-lg border border-border/50 shadow-sm">

packages/web/components/sections/Blur.tsx

@@ -20,7 +20,7 @@ function Blur() {
         {blurs.map((b) => (
           <div
             key={b.name}
-            className="flex flex-col items-center gap-4 p-6 rounded-2xl border border-border bg-surface/30 shadow-sm transition-transform hover:scale-[1.02] duration-300"
+            className="flex flex-col items-center gap-4 p-6 rounded-2xl border border-border bg-surface/30 shadow-sm transition-transform duration-300"
           >
             {/* Element Container */}
             <div className="relative size-20 flex items-center justify-center border border-border/50 bg-background rounded-xl overflow-hidden shadow-sm shrink-0">

packages/web/components/sections/Colors.tsx

@@ -1,4 +1,5 @@
 import { CheckCircle2, AlertTriangle, Info, XCircle } from 'lucide-react';
+import { McCard } from '@/components/ui/mc-card';
 
 // Mapping of prefixes and steps to explicit Tailwind class names
 // This ensures Tailwind JIT can scan the full strings at build time.
@@ -202,9 +203,9 @@ function Colors() {
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
         {/* Core Ramps */}
         {colorRamps.map((ramp) => (
-          <div
+          <McCard
             key={ramp.name}
-            className="flex flex-col rounded-xl border border-border bg-card shadow-sm overflow-hidden p-3 sm:p-4"
+            className="flex flex-col gap-3 rounded-xl shadow-sm overflow-hidden p-3 sm:p-4"
           >
             <div className="flex items-center justify-between mb-2 sm:mb-3">
               <h3 className="text-xs sm:text-sm font-semibold text-foreground">{ramp.name}</h3>
@@ -224,11 +225,11 @@ function Colors() {
                 );
               })}
             </div>
-          </div>
+          </McCard>
         ))}
 
         {/* Gradients */}
-        <div className="flex flex-col rounded-xl border border-border bg-card shadow-sm overflow-hidden p-4">
+        <McCard className="flex flex-col gap-3 rounded-xl shadow-sm overflow-hidden p-4">
           <div className="flex items-center justify-between mb-3">
             <h3 className="text-sm font-semibold text-foreground">Gradients</h3>
             <span className="text-[10px] font-mono text-muted-foreground">--*-gradient</span>
@@ -239,10 +240,10 @@ function Colors() {
               title="--it-gradient"
             />
           </div>
-        </div>
+        </McCard>
 
         {/* Neutrals */}
-        <div className="flex flex-col rounded-xl border border-border bg-card shadow-sm overflow-hidden p-4">
+        <McCard className="flex flex-col gap-3 rounded-xl shadow-sm overflow-hidden p-4">
           <div className="flex items-center justify-between mb-3">
             <h3 className="text-sm font-semibold text-foreground">Neutrals</h3>
             <span className="text-[10px] font-mono text-muted-foreground">--neutral-*</span>
@@ -257,10 +258,10 @@ function Colors() {
               title="--neutral-white"
             />
           </div>
-        </div>
+        </McCard>
 
         {/* Semantic Colors */}
-        <div className="flex flex-col rounded-xl border border-border bg-card shadow-sm overflow-hidden p-3 sm:p-4 sm:col-span-2 lg:col-span-3">
+        <McCard className="flex flex-col rounded-xl shadow-sm overflow-hidden p-3 sm:p-4 gap-3 sm:col-span-2 lg:col-span-3">
           <div className="flex items-center justify-between mb-3">
             <h3 className="text-xs sm:text-sm font-semibold text-foreground">Semantic</h3>
             <span className="text-[8px] sm:text-[10px] font-mono text-muted-foreground">
@@ -285,7 +286,7 @@ function Colors() {
               <span className="text-[10px] font-semibold">Info</span>
             </div>
           </div>
-        </div>
+        </McCard>
       </div>
     </section>
   );

packages/web/components/sections/Hero.tsx

@@ -2,7 +2,8 @@
 
 import Link from 'next/link';
 import { ArrowRight, Terminal, GitFork, Check, Copy } from 'lucide-react';
-import { Button } from '@/components/ui/button';
+import { McButton } from '@/components/ui/mc-button';
+import { McCard } from '@/components/ui/mc-card';
 import { useState } from 'react';
 
 function Hero() {
@@ -35,35 +36,34 @@ function Hero() {
 
       {/* Call to Actions */}
       <div className="flex flex-col sm:flex-row items-center gap-3 sm:gap-4 mb-12 sm:mb-16 w-full sm:w-auto px-4 sm:px-0 z-10">
-        <Button
+        <McButton
+          nativeButton={false}
           render={
             <Link href="/docs/introduction">
               Get Started <ArrowRight className="ml-2 size-4" />
             </Link>
           }
-          nativeButton={false}
+          variant="primary"
           size="lg"
-          className="w-full sm:w-auto px-6 sm:px-8 h-11 sm:h-12 text-sm sm:text-base shadow-xl shadow-primary/20 transition-all hover:bg-primary/90"
         />
-        <Button
+        <McButton
+          nativeButton={false}
           render={
-            <a
+            <Link
               href="https://github.com/MicroClub-USTHB/mcoli-ui"
               target="_blank"
               rel="noopener noreferrer"
             >
               <GitFork className="size-4 mr-2" /> GitHub
-            </a>
+            </Link>
           }
-          nativeButton={false}
-          variant="outline"
+          variant="secondary"
           size="lg"
-          className="w-full sm:w-auto px-6 sm:px-8 h-11 sm:h-12 text-sm sm:text-base border-border bg-surface/50 backdrop-blur-md hover:bg-accent hover:text-accent-foreground transition-all"
         />
       </div>
 
       {/* High-End Terminal CLI Snippet */}
-      <div className="max-w-lg w-full rounded-xl sm:rounded-2xl border border-border bg-card overflow-hidden transition-transform duration-300 z-10 p-3 sm:p-4">
+      <McCard className="max-w-lg w-full rounded-xl sm:rounded-2xl shadow-sm overflow-hidden transition-transform duration-300 z-10 p-3 sm:p-4">
         <div className="flex items-center justify-between gap-3">
           <span className="flex items-center gap-2 sm:gap-3 font-mono text-xs sm:text-sm text-foreground min-w-0">
             <Terminal size={16} className="shrink-0" />
@@ -76,7 +76,7 @@ function Hero() {
             {copied ? <Check className="size-4" /> : <Copy className="size-4" />}
           </button>
         </div>
-      </div>
+      </McCard>
     </section>
   );
 }

packages/web/components/sections/Shadow.tsx

@@ -25,7 +25,7 @@ function Shadow() {
             className="flex flex-col items-center gap-4 p-6 rounded-2xl border border-border bg-surface/30"
           >
             <div
-              className={`size-16 bg-background rounded-xl flex items-center justify-center border border-border/50 ${s.class}`}
+              className={`size-16 bg-background rounded-xl flex items-center justify-center border border-border/50 shadow-foreground ${s.class}`}
             >
               <span className="text-xs font-bold text-foreground">{s.name}</span>
             </div>