ARRANGED SEARCH BOX

Author: nayna-G

src/app/page.tsx

@@ -104,82 +104,90 @@ export default function ScriptGenerator() {
       data-theme={theme}
     >
       <div className="max-w-screen mx-auto px-4 py-10">
-        {/* Header with Search, Add + and theme toggle */}
-        <div className="flex items-center justify-between mb-10">
-          {/* Left side - Search Box */}
-          <div className="relative w-64 hidden sm:block">
+        {/* Header with Title, Search, and Action buttons */}
+        <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6 mb-12">
+          {/* Left side - Title */}
+          <h1 className="text-3xl sm:text-4xl lg:text-5xl font-black tracking-tight text-left">
+            <span className="text-transparent bg-clip-text bg-gradient-to-r from-indigo-500 via-purple-600 to-pink-500 drop-shadow-lg">
+              DEVSETUP
+            </span>
+          </h1>
+
+          {/* Center/Bottom - Search Box */}
+          <div className="relative w-full max-w-2xl lg:max-w-3xl hidden sm:block">
             <input
               type="text"
-              placeholder="Search tools..."
+              placeholder="Search for development tools..."
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              className="w-full px-4 py-2 pl-10 bg-[var(--card-bg)] text-[var(--foreground)] border border-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all duration-200 text-sm"
+              className="w-full px-8 py-4 pl-16 bg-gradient-to-r from-[var(--card-bg)] to-gray-800/50 text-[var(--foreground)] border-2 border-gray-600/50 rounded-2xl focus:outline-none focus:ring-4 focus:ring-indigo-500/30 focus:border-indigo-400 transition-all duration-500 text-lg placeholder-gray-400 shadow-2xl hover:shadow-indigo-500/20 backdrop-blur-sm"
             />
-            <svg
-              className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-              />
-            </svg>
+            <div className="absolute left-5 top-1/2 transform -translate-y-1/2">
+              <svg
+                className="w-6 h-6 text-indigo-400"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2.5}
+                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                />
+              </svg>
+            </div>
+            <div className="absolute inset-0 rounded-2xl bg-gradient-to-r from-indigo-500/10 to-purple-500/10 pointer-events-none"></div>
           </div>
 
-          {/* Center - Title */}
-          <h1 className="text-4xl sm:text-6xl font-extrabold tracking-tight">
-            DevSetup
-          </h1>
-
           {/* Right side - Action buttons */}
-          <div className="flex gap-3">
+          <div className="flex gap-4 lg:flex-shrink-0">
             {/* Add New + button */}
             <a
               href="https://forms.gle/cWfDnzvYo5dBuy7C7"
               target="_blank"
               rel="noopener noreferrer"
-              className="px-6 py-3 text-lg bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 text-white font-semibold rounded-full shadow-lg transition duration-300"
+              className="px-8 py-4 text-lg bg-gradient-to-r from-indigo-500 via-purple-600 to-pink-500 hover:from-indigo-600 hover:via-purple-700 hover:to-pink-600 text-white font-bold rounded-2xl shadow-2xl hover:shadow-indigo-500/30 transition-all duration-300 transform hover:scale-105 hover:-translate-y-1"
             >
-              Add New +
+               Add New +
             </a>
 
             {/* Theme Toggle button */}
             <button
               onClick={() => setTheme(theme === "light" ? "dark" : "light")}
-              className="px-6 py-3 text-lg bg-gradient-to-r from-gray-500 to-gray-700 hover:from-gray-600 hover:to-gray-800 text-white font-semibold rounded-full shadow-lg transition duration-300"
+              className="px-8 py-4 text-lg bg-gradient-to-r from-gray-600 to-gray-800 hover:from-gray-700 hover:to-gray-900 text-white font-bold rounded-2xl shadow-2xl hover:shadow-gray-500/30 transition-all duration-300 transform hover:scale-105 hover:-translate-y-1"
             >
               {theme === "light" ? "🌞 Light" : "🌙 Dark"}
             </button>
           </div>
         </div>
 
         {/* Mobile Search Box */}
-        <div className="mb-6 sm:hidden">
+        <div className="mb-10 sm:hidden">
           <div className="relative">
             <input
               type="text"
-              placeholder="Search tools..."
+              placeholder="🔍 Search for development tools..."
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              className="w-full px-4 py-3 pl-10 bg-[var(--card-bg)] text-[var(--foreground)] border border-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all duration-200"
+              className="w-full px-8 py-5 pl-16 bg-gradient-to-r from-[var(--card-bg)] to-gray-800/50 text-[var(--foreground)] border-2 border-gray-600/50 rounded-2xl focus:outline-none focus:ring-4 focus:ring-indigo-500/30 focus:border-indigo-400 transition-all duration-500 text-lg placeholder-gray-400 shadow-2xl hover:shadow-indigo-500/20 backdrop-blur-sm"
             />
-            <svg
-              className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-              />
-            </svg>
+            <div className="absolute left-5 top-1/2 transform -translate-y-1/2">
+              <svg
+                className="w-6 h-6 text-indigo-400"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2.5}
+                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                />
+              </svg>
+            </div>
+            <div className="absolute inset-0 rounded-2xl bg-gradient-to-r from-indigo-500/10 to-purple-500/10 pointer-events-none"></div>
           </div>
         </div>