style(card): replace gradients with solid colors and add themed shadows

Author: coder-ralph

src/app/generator/repo-tree-generator.tsx

@@ -456,11 +456,11 @@ export default function RepoProjectStructure() {
       </Dialog>
 
       <Card
-        className="w-full max-w-5xl mx-auto p-2 md:p-8 bg-gradient-to-br from-blue-50 to-white dark:from-gray-900 dark:to-gray-800 shadow-xl"
+        className="w-full max-w-5xl mx-auto p-2 md:p-8 bg-white dark:bg-gray-900 shadow-2xl shadow-indigo-400/50"
         id="generator"
       >
         <CardHeader>
-          <CardTitle className="text-3xl md:text-4xl lg:text-5xl font-semibold text-black dark:text-white flex items-center justify-center gap-2">
+          <CardTitle className="text-3xl md:text-5xl lg:text-6xl font-semibold text-black dark:text-white flex items-center justify-center gap-2">
             Repo<span className="text-blue-600">Tree</span>Generator
           </CardTitle>
           <p className="text-center text-sm md:text-base text-gray-600 dark:text-gray-300">
@@ -515,7 +515,7 @@ export default function RepoProjectStructure() {
 
               {/* Repository URL Input with Private Repos Label */}
               <div className="sm:col-span-7">
-                <div className="flex items-center gap-3 mb-2">
+                <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3 mb-2">
                   <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
                     Repository URL
                   </label>

src/components/about.tsx

@@ -22,9 +22,9 @@ const AboutCard = ({
     animate={{ opacity: 1, y: 0 }}
     transition={{ duration: 0.5, delay: index * 0.2 }}
   >
-    <Card className="p-6 rounded-xl bg-gradient-to-br from-blue-50 to-white dark:from-gray-800 dark:to-blue-900 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105">
+    <Card className="p-6 rounded-xl bg-white dark:bg-blue-700 shadow-cyan-400/50 hover:shadow-2xl hover:shadow-cyan-400/50 transition-all duration-300 transform hover:scale-105">
       <CardHeader className="flex flex-col items-center space-y-4">
-        <Icon className="w-16 h-16 text-blue-600" />
+        <Icon className="w-16 h-16 text-blue-600 dark:text-white" />
         <CardTitle className="font-bold text-xl sm:text-2xl md:text-3xl text-gray-800 dark:text-white">
           {title}
         </CardTitle>

src/components/hero.tsx

@@ -23,7 +23,7 @@ const Hero = () => {
             variants={fadeIn}
             className="text-center"
           >
-            <h1 className="text-3xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl text-gray-900 dark:text-white font-bold mb-6 leading-tight">
+            <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl text-gray-900 dark:text-white font-bold mb-6 leading-tight">
               Visualize Your<br />
               <Highlight>GitHub & GitLab Repos</Highlight>
             </h1>