update style

Author: monkeyWie

docs/src/app/globals.css

@@ -25,6 +25,7 @@
   --border: 0 0% 89.8%;
   --input: 0 0% 89.8%;
   --ring: 142.1 76.2% 36.3%;
+  --logo-filter: none;
 }
 
 .dark {
@@ -47,6 +48,7 @@
   --border: 0 0% 14.9%;
   --input: 0 0% 14.9%;
   --ring: 142.1 70.6% 45.3%;
+  --logo-filter: invert(1);
 }
 
 * {

docs/src/components/features.tsx

@@ -40,11 +40,8 @@ export function Features() {
   ];
 
   return (
-    <section className="py-16 sm:py-20 lg:py-24 px-4 sm:px-6 lg:px-8 relative overflow-hidden">
-      {/* Animated background */}
-      <div className="absolute inset-0 bg-gradient-to-br from-purple-500/5 via-blue-500/5 to-cyan-500/5" />
-
-      <div className="container mx-auto max-w-7xl relative z-10">
+    <section className="py-16 sm:py-20 lg:py-24 px-4 sm:px-6 lg:px-8">
+      <div className="container mx-auto max-w-7xl">
         {/* Section Header */}
         <div className="text-center mb-16 sm:mb-20">
           <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4 sm:mb-6">

docs/src/components/hero.tsx

@@ -120,7 +120,7 @@ export function Hero() {
 
   return (
     <motion.section 
-      className="pt-28 lg:pt-48 pb-20 px-4 sm:px-6 lg:px-8 relative overflow-hidden"
+      className="pt-28 lg:pt-48 pb-20 px-4 sm:px-6 lg:px-8"
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       transition={{ 
@@ -129,15 +129,7 @@ export function Hero() {
         delayChildren: 0.3
       }}
     >
-      {/* Animated background */}
-      <motion.div 
-        className="absolute inset-0 bg-gradient-to-br from-purple-500/5 via-blue-500/5 to-cyan-500/5"
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ duration: 1 }}
-      />
-      
-      <div className="container mx-auto max-w-7xl relative z-10">
+      <div className="container mx-auto max-w-7xl">
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
           {/* Left Content - Simplified */}
           <motion.div 

docs/src/components/language-toggle.tsx

@@ -72,7 +72,7 @@ export function LanguageToggle() {
                   onClick={() => toggleLanguage(localeCode)}
                   className={`w-full px-4 py-3 text-left text-sm transition-all duration-200 cursor-pointer hover:bg-slate-100 dark:hover:bg-slate-800 hover:text-slate-900 dark:hover:text-slate-100 ${
                     locale === localeCode 
-                      ? 'text-foreground font-semibold bg-slate-200 dark:bg-slate-700' 
+                      ? 'text-slate-900 dark:text-slate-100 font-semibold bg-slate-100 dark:bg-slate-700 border-l-2 border-slate-400 dark:border-slate-500' 
                       : 'text-muted-foreground'
                   }`}
                 >

docs/src/components/providers.tsx

@@ -27,11 +27,8 @@ export function Providers() {
   ];
 
   return (
-    <section className="py-16 sm:py-20 lg:py-24 px-4 sm:px-6 lg:px-8 relative overflow-hidden">
-      {/* Background */}
-      <div className="absolute inset-0 bg-gradient-to-br from-slate-50/50 via-transparent to-slate-50/50 dark:from-slate-900/20 dark:via-transparent dark:to-slate-900/20" />
-
-      <div className="container mx-auto max-w-7xl relative z-10">
+    <section className="py-16 sm:py-20 lg:py-24 px-4 sm:px-6 lg:px-8">
+      <div className="container mx-auto max-w-7xl">
         {/* Section Header */}
         <div className="text-center mb-16 sm:mb-20">
           <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4 sm:mb-6">
@@ -72,7 +69,10 @@ export function Providers() {
                     <img 
                       src={provider.logo} 
                       alt={`${provider.name} logo`}
-                      className="w-10 h-10 sm:w-12 sm:h-12 filter dark:invert" 
+                      className="w-10 h-10 sm:w-12 sm:h-12" 
+                      style={{
+                        filter: 'var(--logo-filter, none)'
+                      }}
                     />
                   </motion.div>
                 </div>