refactor: update theming demo on landing page

Author: tanerengiiin

apps/showcase/app/(app)/(landing)/components/demos/accessibility-demo.tsx

@@ -76,9 +76,7 @@ export function AccessibilityDemo() {
                         key={tab.id}
                         onClick={() => setActiveTab(tab.id)}
                         className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors cursor-pointer ${
-                            activeTab === tab.id
-                                ? 'bg-surface-900 dark:bg-surface-0 text-surface-0 dark:text-surface-900'
-                                : 'text-muted-color hover:text-color hover:bg-surface-200 dark:hover:bg-surface-800'
+                            activeTab === tab.id ? 'bg-surface-900 dark:bg-surface-0 text-surface-0 dark:text-surface-900' : 'text-muted-color hover:text-color hover:bg-surface-200 dark:hover:bg-surface-800'
                         }`}
                     >
                         {tab.label}
@@ -135,9 +133,7 @@ function SelectMockup({ state, dir = 'ltr', cities: items = cities, placeholder
                 aria-activedescendant={state.open ? focusedId : undefined}
                 className="flex items-center justify-between px-3 py-2 rounded-lg border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-950 text-sm"
             >
-                <span className={state.selectedIndex >= 0 ? 'text-color' : 'text-muted-color'}>
-                    {state.selectedIndex >= 0 ? items[state.selectedIndex] : placeholder}
-                </span>
+                <span className={state.selectedIndex >= 0 ? 'text-color' : 'text-muted-color'}>{state.selectedIndex >= 0 ? items[state.selectedIndex] : placeholder}</span>
                 <svg className={`w-4 h-4 text-muted-color transition-transform duration-300 ${state.open ? 'rotate-180' : ''}`} viewBox="0 0 20 20" fill="currentColor">
                     <path fillRule="evenodd" d={chevronPath} clipRule="evenodd" />
                 </svg>
@@ -155,13 +151,7 @@ function SelectMockup({ state, dir = 'ltr', cities: items = cities, placeholder
                                 aria-posinset={index + 1}
                                 aria-setsize={items.length}
                                 data-focused={state.focusedIndex === index ? '' : undefined}
-                                className={`px-3 py-1.5 text-sm transition-colors duration-200 ${
-                                    state.focusedIndex === index
-                                        ? 'bg-primary/10 text-primary font-medium'
-                                        : state.selectedIndex === index
-                                          ? 'bg-primary/5 text-primary'
-                                          : 'text-color'
-                                }`}
+                                className={`px-3 py-1.5 text-sm transition-colors duration-200 ${state.focusedIndex === index ? 'bg-primary text-primary-contrast font-medium' : state.selectedIndex === index ? 'bg-primary/5 text-primary' : 'text-color'}`}
                             >
                                 {city}
                             </li>

apps/showcase/app/(app)/(landing)/components/demos/component-cloud.tsx

@@ -46,20 +46,20 @@ export function ComponentCloud() {
 
                 return next;
             });
-        }, 500);
+        }, 300);
 
         return () => clearInterval(timer);
     }, []);
 
     return (
-        <div className="flex flex-col items-center justify-center gap-2 flex-1 select-none" style={{ maskImage: 'radial-gradient(ellipse 65% 60% at 50% 50%, black 35%, transparent 95%)' }}>
+        <div className="flex flex-col items-center justify-center gap-2 flex-1 select-none" style={{ maskImage: 'radial-gradient(ellipse 75% 60% at 50% 50%, black 30%, transparent 95%)' }}>
             {rows.map((row, i) => (
                 <div key={i} className="flex items-center justify-center gap-2 flex-nowrap">
                     {row.map((name) => (
                         <span
                             key={name}
                             className={`px-2.5 py-1 rounded-md text-xs font-mono font-medium whitespace-nowrap shrink-0 transition-all duration-700 ${
-                                highlighted.has(name) ? 'bg-primary/10 text-primary border border-primary/20' : 'bg-surface-200/60 dark:bg-surface-800/60 text-muted-color border border-surface-200 dark:border-surface-700'
+                                highlighted.has(name) ? 'bg-primary/10 text-primary border border-primary/20' : 'bg-surface-200/40 dark:bg-surface-800/40 text-surface-500/75 border border-surface-200/70 dark:border-surface-700/70'
                             }`}
                         >
                             {name}