tailwinds custom theme and tw plus components

src/app/build/page.tsx

@@ -3,6 +3,7 @@
 import { useState } from 'react';
 import Link from 'next/link';
 import React from 'react';
+import SearchInput from '@/components/SearchInput';
 
 // AR-15 Build Requirements grouped by main categories
 const buildGroups = [
@@ -333,13 +334,11 @@ export default function BuildPage() {
           {/* Search Row */}
           <div className="mb-4 flex justify-end">
             <div className="w-1/2">
-              <label className="block text-sm font-medium text-gray-700 mb-1">Search Components</label>
-              <input
-                type="text"
-                placeholder="Search components..."
+              <SearchInput
+                label="Search Components"
                 value={searchTerm}
-                onChange={(e) => setSearchTerm(e.target.value)}
-                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                onChange={setSearchTerm}
+                placeholder="Search components..."
               />
             </div>
           </div>
@@ -459,23 +458,23 @@ export default function BuildPage() {
                     return (
                       <React.Fragment key={group.name}>
                         {/* Group Header */}
-                        <tr className="bg-gray-50">
+                        <tr className="bg-gray-800">
                           <td colSpan={7} className="px-6 py-4">
                             <div className="flex items-center">
                               <div className="flex-shrink-0">
-                                <div className="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
-                                  <span className="text-blue-600 font-semibold text-sm">
+                                <div className="w-10 h-10 bg-blue-500 rounded-lg flex items-center justify-center">
+                                  <span className="text-white font-semibold text-lg">
                                     {group.name === 'Upper Parts' ? '🔫' : 
                                      group.name === 'Lower Parts' ? '🔧' : '📦'}
                                   </span>
                                 </div>
                               </div>
                               <div className="ml-4">
-                                <h3 className="text-lg font-semibold text-gray-900">{group.name}</h3>
-                                <p className="text-sm text-gray-500">{group.description}</p>
+                                <h3 className="text-xl font-bold text-white">{group.name}</h3>
+                                <p className="text-gray-300">{group.description}</p>
                               </div>
                               <div className="ml-auto text-right">
-                                <div className="text-sm text-gray-500">
+                                <div className="text-gray-300 font-medium">
                                   {groupComponents.length} components
                                 </div>
                               </div>

src/app/builds/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState } from 'react';
+import SearchInput from '@/components/SearchInput';
 
 // Sample build data
 const sampleBuilds = [
@@ -252,13 +253,11 @@ export default function BuildsPage() {
           {/* Search Row */}
           <div className="mb-4 flex justify-end">
             <div className="w-1/2">
-              <label className="block text-sm font-medium text-gray-700 mb-1">Search Builds</label>
-              <input
-                type="text"
-                placeholder="Search builds..."
+              <SearchInput
+                label="Search Builds"
                 value={searchTerm}
-                onChange={(e) => setSearchTerm(e.target.value)}
-                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                onChange={setSearchTerm}
+                placeholder="Search builds..."
               />
             </div>
           </div>

src/app/globals.css

@@ -1,3 +1,56 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+@layer base {
+  html {
+    scroll-behavior: smooth;
+  }
+  
+  body {
+    @apply transition-colors duration-200;
+  }
+}
+
+@layer components {
+  /* Custom scrollbar for webkit browsers */
+  ::-webkit-scrollbar {
+    width: 8px;
+  }
+  
+  ::-webkit-scrollbar-track {
+    @apply bg-neutral-100 dark:bg-neutral-800;
+  }
+  
+  ::-webkit-scrollbar-thumb {
+    @apply bg-neutral-300 dark:bg-neutral-600 rounded-full;
+  }
+  
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-neutral-400 dark:bg-neutral-500;
+  }
+  
+  /* Focus styles for better accessibility */
+  .focus-ring {
+    @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-neutral-900;
+  }
+  
+  /* Card styles */
+  .card {
+    @apply bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200;
+  }
+  
+  /* Button styles */
+  .btn-primary {
+    @apply bg-primary-600 hover:bg-primary-700 dark:bg-primary-500 dark:hover:bg-primary-600 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200 focus-ring;
+  }
+  
+  .btn-secondary {
+    @apply bg-neutral-100 hover:bg-neutral-200 dark:bg-neutral-700 dark:hover:bg-neutral-600 text-neutral-700 dark:text-neutral-300 font-medium py-2 px-4 rounded-lg transition-colors duration-200 focus-ring;
+  }
+  
+  /* Input styles */
+  .input-field {
+    @apply w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white placeholder-neutral-500 dark:placeholder-neutral-400 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors duration-200;
+  }
+}

src/app/layout.tsx

@@ -1,21 +1,14 @@
 import "./globals.css";
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
-import { Navbar } from "@/components/Navbar";
+import { Inter } from "next/font/google";
+import Navbar from "@/components/Navbar";
+import { ThemeProvider } from "@/components/ThemeProvider";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
+const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "Pew Builder - Firearm Parts Catalog",
-  description: "Build your dream AR-15 with our comprehensive parts catalog and build checklist",
+  title: "Pew Builder - Firearm Parts Catalog & Build Management",
+  description: "Professional firearm parts catalog and AR-15 build management system",
 };
 
 export default function RootLayout({
@@ -24,10 +17,14 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
-      <body className={`${geistSans.variable} ${geistMono.variable}`}>
-        <Navbar />
-        {children}
+    <html lang="en" suppressHydrationWarning>
+      <body className={`${inter.className} antialiased`}>
+        <ThemeProvider>
+          <div className="min-h-screen bg-neutral-50 dark:bg-neutral-900 transition-colors duration-200">
+            <Navbar />
+            {children}
+          </div>
+        </ThemeProvider>
       </body>
     </html>
   );