Update src/app/search/page.tsx

src/app/search/page.tsx

@@ -1,48 +1,27 @@
 'use client';
 
-import { ThemeProvider } from '@/components/ThemeProvider';
-import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import { ThemeProvider } from '@/components/theme/ThemeProvider';
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import HeroOverlay from '@/components/sections/hero/HeroOverlay';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import BlurBottomBackground from '@/components/background/BlurBottomBackground';
 import { useState } from 'react';
-import { Search, Filter, X } from 'lucide-react';
 
-const products = [
-  { id: '1', name: 'Premium Service A', category: 'Services', price: '$99', tags: ['featured', 'popular'] },
-  { id: '2', name: 'Enterprise Package', category: 'Enterprise', price: '$499', tags: ['enterprise', 'new'] },
-  { id: '3', name: 'Starter Plan', category: 'Plans', price: '$29', tags: ['beginner', 'affordable'] },
-  { id: '4', name: 'Professional Suite', category: 'Services', price: '$199', tags: ['professional', 'popular'] },
-  { id: '5', name: 'Team Collaboration', category: 'Tools', price: '$149', tags: ['team', 'collaboration'] },
-  { id: '6', name: 'Advanced Analytics', category: 'Analytics', price: '$79', tags: ['analytics', 'insights'] },
+const navItems = [
+  { name: 'Home', id: '/' },
+  { name: 'Brands', id: '/brands' },
+  { name: 'Search', id: '/search' },
+  { name: 'Browse', id: '/browse' },
 ];
 
 export default function SearchPage() {
-  const [searchQuery, setSearchQuery] = useState('');
-  const [selectedFilters, setSelectedFilters] = useState<string[]>([]);
-  const [priceRange, setPriceRange] = useState<[number, number]>([0, 500]);
+  const [searchResults, setSearchResults] = useState<string | null>(null);
 
-  const navItems = [
-    { name: 'Home', id: '/' },
-    { name: 'Brands', id: '/brands' },
-    { name: 'Search', id: '/search' },
-    { name: 'Browse', id: '/browse' },
-  ];
-
-  const categories = ['Services', 'Enterprise', 'Plans', 'Tools', 'Analytics'];
-  const tags = ['featured', 'popular', 'new', 'beginner', 'affordable', 'professional', 'team', 'collaboration', 'analytics', 'insights'];
-
-  const toggleFilter = (filter: string) => {
-    setSelectedFilters((prev) =>
-      prev.includes(filter) ? prev.filter((f) => f !== filter) : [...prev, filter]
-    );
+  const handleSearch = (data: Record<string, string>) => {
+    console.log('Advanced search query:', data);
+    setSearchResults(`Results for: ${data.query || 'all'} (Category: ${data.category || 'all'})`);
   };
 
-  const filteredProducts = products.filter((product) => {
-    const matchesSearch = product.name.toLowerCase().includes(searchQuery.toLowerCase());
-    const matchesCategory = selectedFilters.length === 0 || selectedFilters.includes(product.category);
-    const price = parseInt(product.price.replace('$', ''));
-    const matchesPrice = price >= priceRange[0] && price <= priceRange[1];
-    return matchesSearch && matchesCategory && matchesPrice;
-  });
-
   return (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
@@ -50,132 +29,59 @@ export default function SearchPage() {
       borderRadius="rounded"
       contentWidth="medium"
       sizing="mediumLarge"
-      background="none"
-      cardStyle="solid"
+      background="circleGradient"
+      cardStyle="glass-elevated"
       primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
       headingFontWeight="bold"
     >
-      <NavbarStyleApple navItems={navItems} brandName="Brand Hub" />
-      <main className="w-full min-h-screen py-12">
-        <div className="max-w-7xl mx-auto px-4">
-          <div className="mb-12">
-            <h1 className="text-4xl font-bold mb-2">Advanced Search</h1>
-            <p className="text-lg text-foreground/70">Find exactly what you're looking for with advanced filters</p>
-          </div>
+      <NavbarLayoutFloatingInline
+        navItems={navItems}
+        brandName="Webild"
+        button={{ text: 'Get Started', href: 'https://example.com' }}
+        animateOnLoad={true}
+      />
 
-          {/* Search Bar */}
-          <div className="mb-8 relative">
-            <Search className="absolute left-3 top-3 text-foreground/50" size={20} />
-            <input
-              type="text"
-              placeholder="Search products, services, or brands..."
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              className="w-full pl-10 pr-4 py-3 border border-card rounded-lg focus:outline-none focus:border-primary-cta bg-background"
-            />
-          </div>
+      <div id="search-hero" data-section="search-hero">
+        <HeroOverlay
+          title="Advanced Search System"
+          description="Find exactly what you're looking for with our powerful search and filtering tools."
+          tag="Search"
+          textPosition="center"
+          showBlur={true}
+          buttons={[{ text: 'Browse All', href: '/browse' }]}
+        />
+      </div>
 
-          <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
-            {/* Filters Sidebar */}
-            <div className="lg:col-span-1">
-              <div className="bg-card rounded-lg p-6 sticky top-20">
-                <div className="flex items-center gap-2 mb-4">
-                  <Filter size={20} />
-                  <h2 className="text-xl font-semibold">Filters</h2>
-                </div>
+      <div id="search-form" data-section="search-form" className="py-20">
+        <ContactSplitForm
+          title="Search Products & Brands"
+          description="Use advanced filters to narrow down your search and find exactly what you need from our extensive catalog."
+          inputs={[
+            { name: 'query', type: 'text', placeholder: 'Search keywords...', required: true },
+            { name: 'category', type: 'text', placeholder: 'Category (optional)', required: false },
+          ]}
+          textarea={{
+            name: 'filters',
+            placeholder: 'Additional filters or specifications...',
+            rows: 4,
+            required: false,
+          }}
+          useInvertedBackground={false}
+          imageSrc="/placeholders/placeholder-16-9.svg"
+          mediaPosition="right"
+          buttonText="Search"
+          onSubmit={handleSearch}
+        />
+      </div>
 
-                {/* Category Filter */}
-                <div className="mb-6">
-                  <h3 className="font-semibold mb-3 text-foreground/90">Category</h3>
-                  <div className="space-y-2">
-                    {categories.map((category) => (
-                      <label key={category} className="flex items-center gap-2 cursor-pointer">
-                        <input
-                          type="checkbox"
-                          checked={selectedFilters.includes(category)}
-                          onChange={() => toggleFilter(category)}
-                          className="rounded"
-                        />
-                        <span className="text-foreground/70">{category}</span>
-                      </label>
-                    ))}
-                  </div>
-                </div>
-
-                {/* Price Range */}
-                <div className="mb-6">
-                  <h3 className="font-semibold mb-3 text-foreground/90">Price Range</h3>
-                  <div className="space-y-2">
-                    <div className="flex justify-between text-sm">
-                      <span>${priceRange[0]}</span>
-                      <span>${priceRange[1]}</span>
-                    </div>
-                    <input
-                      type="range"
-                      min="0"
-                      max="500"
-                      value={priceRange[1]}
-                      onChange={(e) => setPriceRange([priceRange[0], parseInt(e.target.value)])}
-                      className="w-full"
-                    />
-                  </div>
-                </div>
-
-                {/* Clear Filters */}
-                {selectedFilters.length > 0 && (
-                  <button
-                    onClick={() => {
-                      setSelectedFilters([]);
-                      setSearchQuery('');
-                    }}
-                    className="w-full py-2 text-primary-cta border border-primary-cta rounded hover:bg-primary-cta/10 transition-colors flex items-center justify-center gap-2"
-                  >
-                    <X size={16} />
-                    Clear Filters
-                  </button>
-                )}
-              </div>
-            </div>
-
-            {/* Results */}
-            <div className="lg:col-span-3">
-              <div className="mb-4">
-                <p className="text-foreground/70">{filteredProducts.length} results found</p>
-              </div>
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                {filteredProducts.map((product) => (
-                  <div key={product.id} className="p-6 border border-card rounded-lg hover:shadow-lg transition-all hover:border-primary-cta">
-                    <div className="flex items-start justify-between mb-2">
-                      <h3 className="text-lg font-semibold">{product.name}</h3>
-                      <span className="text-primary-cta font-bold">{product.price}</span>
-                    </div>
-                    <p className="text-sm text-foreground/60 mb-3">{product.category}</p>
-                    <div className="flex flex-wrap gap-1 mb-4">
-                      {product.tags.map((tag) => (
-                        <span
-                          key={tag}
-                          className="px-2 py-1 text-xs bg-primary-cta/10 text-primary-cta rounded"
-                        >
-                          {tag}
-                        </span>
-                      ))}
-                    </div>
-                    <button className="w-full px-4 py-2 bg-primary-cta text-white rounded hover:opacity-80 transition-opacity">
-                      View Details
-                    </button>
-                  </div>
-                ))}
-              </div>
-              {filteredProducts.length === 0 && (
-                <div className="text-center py-12">
-                  <p className="text-foreground/70">No products found matching your filters</p>
-                </div>
-              )}
-            </div>
-          </div>
+      {searchResults && (
+        <div className="py-10 text-center">
+          <p className="text-lg font-semibold">{searchResults}</p>
         </div>
-      </main>
+      )}
+
+      <BlurBottomBackground />
     </ThemeProvider>
   );
 }