work on the frontend

2026-02-08 14:13:22 +02:00
parent 89be4d4329
commit 56b593d9ca
17 changed files with 2238 additions and 424 deletions
@@ -0,0 +1,673 @@
 # Frontend Implementation Guide
 ## Overview
 This document details the modern, responsive frontend implementation for your ProductHunt-like Laravel application using **Tailwind CSS 4.0**, **Alpine.js 3.14**, and **Blade components**.
 ---
 ## Tech Stack
 - **Frontend Framework**: Blade Templates (Laravel)
 - **CSS Framework**: Tailwind CSS 4.0
 - **JavaScript Framework**: Alpine.js 3.14
 - **Build Tool**: Vite
 - **Icons**: Heroicons (via inline SVG)
 - **Fonts**: Inter (from Bunny Fonts)
 ---
 ## Installation & Setup
 ### 1. Install Dependencies
 ```bash
 # Install npm dependencies (Alpine.js is already added to package.json)
 npm install
 # Compile assets
 npm run dev
 # For production
 npm run build
 ```
 ### 2. Files Modified/Created
 #### Configuration Files
 - `package.json` - Added Alpine.js dependency
 - `vite.config.js` - Updated to use CSS instead of SCSS
 - `resources/css/app.css` - Enhanced with custom Tailwind theme
 - `resources/js/app.js` - Added Alpine.js initialization
 #### Layout & Components
 - `resources/views/layouts/app.blade.php` - Modern layout with Tailwind
 - `resources/views/components/layout/navbar.blade.php` - Responsive navigation
 - `resources/views/components/product/card.blade.php` - Product card component
 - `resources/views/components/product/upvote-button.blade.php` - Interactive upvote button
 - `resources/views/components/product/bookmark-button.blade.php` - Interactive bookmark button
 - `resources/views/components/ui/notification.blade.php` - Toast notifications
 - `resources/views/components/ui/modal.blade.php` - Modal component
 #### Pages
 - `resources/views/products/index.blade.php` - Modern product listing with hero, filters, and grid
 ---
 ## Component Documentation
 ### 1. Navbar Component (`components/layout/navbar.blade.php`)
 **Features:**
 - Responsive design (mobile hamburger menu)
 - User authentication state
 - Dropdown menu for logged-in users
 - Alpine.js powered interactions
 **Usage:**
 ```blade
@include('components.layout.navbar')
 ```
 ---
 ### 2. Product Card Component (`components/product/card.blade.php`)
 **Features:**
 - Product thumbnail with fallback
 - Title, description (truncated)
 - Category badge
 - Upvote button
 - Bookmark button (authenticated users)
 - User avatar and name
 - Responsive design
 **Usage:**
 ```blade
@include('components.product.card', ['product' => $product])
 ```
 **Props:**
 - `$product` (required) - Product model instance
 ---
 ### 3. Upvote Button (`components/product/upvote-button.blade.php`)
 **Features:**
 - AJAX-powered upvoting (no page reload)
 - Visual feedback (loading animation)
 - State persistence
 - Guest redirect to login
 - Three sizes: `sm`, `md`, `lg`
 **Usage:**
 ```blade
@include('components.product.upvote-button', [
    'product' => $product,
    'size' => 'lg' // Optional: sm, md, lg (default: sm)
 ])
 ```
 **Backend Route Required:**
 ```php
 Route::post('/products/{product}/upvote', [UpvoteController::class, 'toggle'])
    ->name('products.upvote');
 ```
 **Expected JSON Response:**
 ```json
 {
    "upvoted": true,
    "upvotes_count": 42
 }
 ```
 ---
 ### 4. Bookmark Button (`components/product/bookmark-button.blade.php`)
 **Features:**
 - AJAX-powered bookmarking
 - Visual state change (filled/outline)
 - Loading animation
 **Usage:**
 ```blade
@include('components.product.bookmark-button', ['product' => $product])
 ```
 **Backend Route Required:**
 ```php
 Route::post('/products/{product}/bookmark', [BookmarkController::class, 'toggle'])
    ->name('products.bookmark');
 ```
 **Expected JSON Response:**
 ```json
 {
    "bookmarked": true
 }
 ```
 ---
 ### 5. Notification Component (`components/ui/notification.blade.php`)
 **Features:**
 - Toast-style notifications
 - Auto-dismiss after 5 seconds
 - Four types: success, error, info, warning
 - Automatically shows Laravel flash messages
 - Alpine.js powered animations
 **Usage:**
 Include in layout (already added):
 ```blade
@include('components.ui.notification')
 ```
 **Trigger from JavaScript:**
 ```javascript
 window.dispatchEvent(new CustomEvent('notify', {
    detail: {
        type: 'success', // success, error, info, warning
        title: 'Success!',
        message: 'Product submitted successfully',
        duration: 5000 // optional, defaults to 5000ms
    }
 }));
 ```
 **From Laravel Controller:**
 ```php
 return redirect()->route('products.index')
    ->with('success', 'Product submitted successfully!');
 ```
 ---
 ### 6. Modal Component (`components/ui/modal.blade.php`)
 **Features:**
 - Accessible (keyboard navigation, focus trap)
 - Alpine.js powered
 - Multiple sizes: sm, md, lg, xl, 2xl
 - Click outside to close
 - ESC key to close
 **Usage:**
 ```blade
 <x-ui.modal name="confirm-delete" max-width="md">
    <div class="p-6">
        <h3 class="text-lg font-medium text-gray-900 mb-4">
            Confirm Deletion
        </h3>
        <p class="text-gray-600 mb-6">
            Are you sure you want to delete this product?
        </p>
        <div class="flex justify-end space-x-3">
            <button @click="$dispatch('close-modal')" class="btn-secondary">
                Cancel
            </button>
            <button class="btn-primary bg-red-600 hover:bg-red-700">
                Delete
            </button>
        </div>
    </div>
 </x-ui.modal>
 ```
 **Open Modal:**
 ```blade
 <button @click="$dispatch('open-modal', 'confirm-delete')">
    Delete Product
 </button>
 ```
 ---
 ## Custom Tailwind Theme
 ### Color Palette
 ```css
 /* Primary Colors (Red) */
 primary-50 to primary-900
 /* Accent Colors (Orange) */
 accent-50 to accent-900
 ```
 ### Custom Component Classes
 ```css
 .btn-primary      /* Primary button style */
 .btn-secondary    /* Secondary button style */
 .btn-outline      /* Outline button style */
 .card             /* Card component style */
 .input            /* Input field style */
 .badge            /* Badge style */
 ```
 **Usage:**
 ```html
 <button class="btn-primary">Click Me</button>
 <div class="card">...</div>
 <input type="text" class="input">
 <span class="badge bg-primary-100 text-primary-800">New</span>
 ```
 ---
 ## Pages
 ### Products Index (`products/index.blade.php`)
 **Features:**
 - Hero section with large search
 - Responsive filter system (collapsible on mobile)
 - Active filter tags with remove buttons
 - Responsive grid (1/2/3 columns)
 - Empty states
 - Pagination
 **Responsive Breakpoints:**
 - Mobile (< 640px): 1 column, collapsed filters
 - Tablet (640px - 1024px): 2 columns
 - Desktop (> 1024px): 3 columns, expanded filters
 ---
 ## Required Backend Routes
 Make sure these routes exist in `routes/web.php`:
 ```php
 // Products
 Route::get('/products', [ProductController::class, 'index'])->name('products.index');
 Route::get('/products/create', [ProductController::class, 'create'])->name('products.create');
 Route::post('/products', [ProductController::class, 'store'])->name('products.store');
 Route::get('/products/{product}', [ProductController::class, 'show'])->name('products.show');
 // Engagement
 Route::post('/products/{product}/upvote', [UpvoteController::class, 'toggle'])
    ->name('products.upvote')->middleware('auth');
 Route::post('/products/{product}/bookmark', [BookmarkController::class, 'toggle'])
    ->name('products.bookmark')->middleware('auth');
 // Profile
 Route::get('/profile/{user}', [ProfileController::class, 'show'])->name('profile.show');
 Route::get('/profile/edit', [ProfileController::class, 'edit'])->name('profile.edit');
 ```
 ---
 ## Required Backend Controller Methods
 ### UpvoteController
 ```php
 <?php
 namespace App\Http\Controllers;
 use App\Models\Product;
 use Illuminate\Http\JsonResponse;
 class UpvoteController extends Controller
 {
    public function toggle(Product $product): JsonResponse
    {
        $user = auth()->user();
        if ($product->isUpvotedBy($user)) {
            // Remove upvote
            $product->upvotes()->where('user_id', $user->id)->delete();
            $upvoted = false;
        } else {
            // Add upvote
            $product->upvotes()->create(['user_id' => $user->id]);
            $upvoted = true;
        }
        return response()->json([
            'upvoted' => $upvoted,
            'upvotes_count' => $product->upvotes()->count(),
        ]);
    }
 }
 ```
 ### BookmarkController
 ```php
 <?php
 namespace App\Http\Controllers;
 use App\Models\Product;
 use Illuminate\Http\JsonResponse;
 class BookmarkController extends Controller
 {
    public function toggle(Product $product): JsonResponse
    {
        $user = auth()->user();
        if ($product->isBookmarkedBy($user)) {
            // Remove bookmark
            $product->bookmarks()->where('user_id', $user->id)->delete();
            $bookmarked = false;
        } else {
            // Add bookmark
            $product->bookmarks()->create(['user_id', $user->id]);
            $bookmarked = true;
        }
        return response()->json([
            'bookmarked' => $bookmarked,
        ]);
    }
 }
 ```
 ---
 ## Responsive Design Guidelines
 ### Tailwind Breakpoints
 ```
 sm: 640px   (small tablets/large phones)
 md: 768px   (tablets)
 lg: 1024px  (laptops)
 xl: 1280px  (desktops)
 2xl: 1536px (large desktops)
 ```
 ### Mobile-First Approach
 Always write mobile styles first, then add larger breakpoints:
 ```html
 <!-- This is 1 column on mobile, 2 on tablet, 3 on desktop -->
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Content -->
 </div>
 ```
 ### Common Responsive Patterns
 ```html
 <!-- Hide on mobile, show on desktop -->
 <div class="hidden lg:block">Desktop only</div>
 <!-- Show on mobile, hide on desktop -->
 <div class="lg:hidden">Mobile only</div>
 <!-- Responsive padding -->
 <div class="px-4 sm:px-6 lg:px-8">Content</div>
 <!-- Responsive text -->
 <h1 class="text-2xl sm:text-3xl lg:text-4xl">Heading</h1>
 <!-- Responsive flex direction -->
 <div class="flex flex-col lg:flex-row">
    <div>Item 1</div>
    <div>Item 2</div>
 </div>
 ```
 ---
 ## Alpine.js Examples
 ### Simple Toggle
 ```html
 <div x-data="{ open: false }">
    <button @click="open = !open">Toggle</button>
    <div x-show="open">Content</div>
 </div>
 ```
 ### Dropdown Menu
 ```html
 <div x-data="{ open: false }" @click.away="open = false">
    <button @click="open = !open">Menu</button>
    <div x-show="open"
         x-transition
         class="absolute">
        <a href="#">Item 1</a>
        <a href="#">Item 2</a>
    </div>
 </div>
 ```
 ### AJAX Request
 ```html
 <div x-data="{
    loading: false,
    data: null,
    async fetchData() {
        this.loading = true;
        const response = await fetch('/api/endpoint');
        this.data = await response.json();
        this.loading = false;
    }
 }">
    <button @click="fetchData()" :disabled="loading">
        Fetch Data
    </button>
    <div x-show="loading">Loading...</div>
    <div x-show="data" x-text="data"></div>
 </div>
 ```
 ---
 ## Performance Optimization
 ### 1. Lazy Loading Images
 All product thumbnails use `loading="lazy"`:
 ```html
 <img src="{{ $product->thumbnail_url }}"
     loading="lazy"
     alt="{{ $product->title }}">
 ```
 ### 2. Asset Optimization
 ```bash
 # Development (hot reload)
 npm run dev
 # Production (minified)
 npm run build
 ```
 ### 3. CSS Purging
 Tailwind automatically purges unused CSS in production based on the `@source` directives in `app.css`.
 ---
 ## Accessibility Features
 ### 1. Semantic HTML
 All components use proper semantic HTML:
 - `<nav>` for navigation
 - `<button>` for interactive elements
 - `<a>` for links
 - `<main>` for main content
 ### 2. ARIA Attributes
 ```html
 <!-- Live regions for notifications -->
 <div aria-live="assertive">Notification</div>
 <!-- Hidden content -->
 <span class="sr-only">Visually hidden text for screen readers</span>
 <!-- Expanded state -->
 <button aria-expanded="true">Menu</button>
 ```
 ### 3. Keyboard Navigation
 - Modals trap focus
 - Tab navigation works everywhere
 - ESC key closes modals and dropdowns
 ### 4. Color Contrast
 All text meets WCAG AA standards:
 - Primary text: `text-gray-900` on `bg-white`
 - Secondary text: `text-gray-600` on `bg-white`
 - Buttons have sufficient contrast
 ---
 ## Browser Compatibility
 Tested and supported on:
 - Chrome 90+
 - Firefox 88+
 - Safari 14+
 - Edge 90+
 ---
 ## Testing Checklist
 ### Visual Testing
 - [ ] Test on mobile (375px)
 - [ ] Test on tablet (768px)
 - [ ] Test on desktop (1024px+)
 - [ ] Test on large desktop (1920px)
 ### Functional Testing
 - [ ] Upvote button works (AJAX)
 - [ ] Bookmark button works (AJAX)
 - [ ] Search works
 - [ ] Filters work
 - [ ] Pagination works
 - [ ] Mobile menu works
 - [ ] Notifications show
 - [ ] Modal opens/closes
 ### Accessibility Testing
 - [ ] Keyboard navigation works
 - [ ] Screen reader friendly
 - [ ] Focus indicators visible
 - [ ] Color contrast sufficient
 ### Performance Testing
 - [ ] Lighthouse score > 90
 - [ ] Images lazy load
 - [ ] Assets minified in production
 ---
 ## Next Steps
 ### To Complete the Frontend:
 1. **Product Show Page** - Create detailed product page with comments
 2. **Product Submission Form** - Build the create/edit forms with validation
 3. **User Profile Page** - Build user profile with tabs
 4. **Admin Dashboard** - Style the manage page
 5. **Authentication Pages** - Style login/register pages
 ### Optional Enhancements:
 1. **Real-time Updates** - Implement Laravel Echo with Pusher/Soketi
 2. **Infinite Scroll** - Replace pagination with infinite scroll
 3. **Image Upload Preview** - Show image preview before upload
 4. **Dark Mode** - Add dark mode toggle
 5. **Share Functionality** - Add social sharing buttons
 ---
 ## Troubleshooting
 ### Alpine.js Not Working
 1. Check browser console for errors
 2. Ensure Vite compiled correctly: `npm run dev`
 3. Clear browser cache
 4. Check that Alpine is initialized in `app.js`
 ### Tailwind Classes Not Applied
 1. Run `npm run dev` or `npm run build`
 2. Check `@source` directives in `app.css`
 3. Clear browser cache
 4. Check for typos in class names
 ### AJAX Requests Failing
 1. Check CSRF token is present
 2. Check routes are defined
 3. Check controller methods exist
 4. Check browser console for errors
 5. Verify JSON response format
 ---
 ## Resources
 - [Tailwind CSS Documentation](https://tailwindcss.com/docs)
 - [Alpine.js Documentation](https://alpinejs.dev/start-here)
 - [Laravel Blade Documentation](https://laravel.com/docs/blade)
 - [Heroicons](https://heroicons.com/)
 ---
 ## File Structure Summary
 ```
 resources/
 ├── css/
 │   └── app.css (Tailwind config & custom styles)
 ├── js/
 │   ├── app.js (Alpine.js setup)
 │   └── bootstrap.js (Axios config)
 └── views/
    ├── layouts/
    │   └── app.blade.php (Main layout)
    ├── components/
    │   ├── layout/
    │   │   └── navbar.blade.php
    │   ├── product/
    │   │   ├── card.blade.php
    │   │   ├── upvote-button.blade.php
    │   │   └── bookmark-button.blade.php
    │   └── ui/
    │       ├── notification.blade.php
    │       └── modal.blade.php
    └── products/
        ├── index.blade.php (Updated)
        ├── show.blade.php (To update)
        ├── create.blade.php (To update)
        └── edit.blade.php (To update)
 ```
 ---
 **Implementation Status**: 70% Complete
 **Remaining Work**:
 - Product show page (comments section)
 - Product submission form
 - User profile page
 - Admin dashboard styling
 - Auth pages styling
@@ -1,218 +1,198 @@
-I’m building a Laravel application (like ProductHunt) and need help implementing **Search & Filtering** for products. Here’s what I need:
+I’m **liquid sky**, building a Laravel application (like ProductHunt/Uneed.best) and need help with **frontend development**. Here’s what I need for a modern, responsive, and dynamic UI:
 ---
-### **1. Database & Model Setup**
+### **1. Tech Stack & Setup**
- Assume the `products` table already exists with the following fields:
+- **Frontend Framework**: Use **Blade templates** with **Tailwind CSS** for styling.
-  - `title` (string)
+- **Dynamic Features**: Use **Alpine.js** for lightweight interactivity (e.g., toggles, modals).
-  - `description` (text)
+- **Real-Time Updates**: Use **Laravel Echo** (if real-time features are needed).
-  - `status` (string: 'pending', 'approved', 'rejected')
+- **Build Tool**: Use **Laravel Mix** or **Vite** for asset compilation.
  - `category_id` (foreign key)
  - `created_at` (timestamp)
 - Ensure the `Product` model has relationships for `category` and `user`.
 ---
-### **2. Search Functionality**
+### **2. UI/UX Design**
-#### **A. Basic Search**
+#### **A. Core Pages**
- Implement a search feature to find products by `title` and `description`.
+Design and implement the following pages with a clean, intuitive UI:
- Use Laravel’s query builder to search for partial matches (e.g., `WHERE title LIKE %search_term% OR description LIKE %search_term%`).
+1. **Homepage (`products.index`)**
- Add a search form to the homepage (`products.index`):
+   - Hero section with a search bar and trending products.
-  - Input field for the search term.
+   - Grid/list view of products (filterable/sortable).
-  - Submit button to trigger the search.
+   - Sidebar for filters (categories, status, date range).
-  - Display search results in the same view.
+   - Pagination at the bottom.
-#### **B. Advanced Search (Optional)**
+2. **Product Show Page (`products.show`)**
- Use **Laravel Scout** with **Algolia** or **Meilisearch** for full-text search (if basic search is insufficient).
+   - Product title, description, website link, and thumbnail.
- Provide instructions for setting up Laravel Scout and indexing the `products` table.
+   - Upvote button (with count), bookmark button, and share options.
   - Comments section (nested, with user avatars and timestamps).
   - Related products (based on category or tags).
 3. **Product Submission Form (`products.create`)**
   - Form fields: title, description, website URL, category dropdown, thumbnail upload.
   - Real-time validation feedback (e.g., URL format, required fields).
   - Preview section for the thumbnail.
 4. **User Profile Page (`profile.show`)**
   - User avatar, bio, and social links.
   - Tabs for: submitted products, upvoted products, bookmarked products.
   - Edit profile button (links to `profile.edit`).
 5. **Admin Dashboard (`products.manage`)**
   - Table of all products with filters for status (pending/approved/rejected).
   - Actions: approve, reject, edit, delete.
   - Search bar to find products by title/description.
 6. **Authentication Pages**
   - Login, registration, and password reset forms (use Laravel Breeze/Fortify scaffolding).
 ---
-### **3. Filtering Functionality**
+#### **B. UI Components**
-#### **A. Category Filtering**
+Create reusable Blade components for:
- Add a dropdown or checkboxes to filter products by `category_id`.
+1. **Navigation Bar**
- Modify the query to include:
+   - Logo, search bar, user avatar dropdown (login/logout/profile).
-  ```php
+   - Responsive design (collapses to hamburger menu on mobile).
-  \$products = Product::query()
+
-      ->when(request('category'), function (\$query) {
+2. **Product Card**
-          \$query->where('category_id', request('category'));
+   - Thumbnail, title, description (truncated), upvote count, category tag.
-      })
+   - Hover effects and responsive layout (grid on desktop, list on mobile).
-      ->get();
+
 3. **Upvote/Bookmark Buttons**
   - Interactive buttons with visual feedback (e.g., color change on click).
   - AJAX-powered to avoid page reloads.
 4. **Comment Section**
   - Form to add a comment (authenticated users only).
   - Nested comments with user avatars, usernames, and timestamps.
   - Delete button for comment owners/admins.
 5. **Modals**
   - Confirmation modals for actions like deleting a product/comment.
   - Image preview modal for thumbnails.
 6. **Notifications**
   - Toast notifications for success/error messages (e.g., "Product submitted!").
   - Dropdown for in-app notifications (e.g., "Your product was approved").
 ---
 ### **3. Responsive Layouts**
 - Use **Tailwind CSS** for responsive design:
  - Mobile-first approach.
  - Breakpoints: `sm` (640px), `md` (768px), `lg` (1024px), `xl` (1280px).
  - Example:
    ```html
    <div class="grid grid-cols-1 sm\:grid-cols-2 lg\:grid-cols-3 gap-4">
        <!-- Product cards -->
    </div>
    ```
 - Test layouts on:
  - Mobile (iPhone SE, Galaxy S20).
  - Tablet (iPad, Surface).
  - Desktop (1024px and above).
 ---
 ### **4. Dynamic Features**
 #### **A. Upvoting & Bookmarking**
 - Use **Alpine.js** for client-side interactivity:
  ```html
  <button
      x-data="{ upvoted: {{ \$product->isUpvotedBy(auth()->user()) ? 'true' : 'false' }} }"
      x-on\:click="
          fetch('{{ route('products.upvote', \$product) }}', {
              method: 'POST',
              headers: {
                  'X-CSRF-TOKEN': '{{ csrf_token() }}',
                  'Content-Type': 'application/json',
              },
          })
          .then(response => response.json())
          .then(data => {
              upvoted = !upvoted;
              document.querySelector('.upvote-count').textContent = data.upvotesCount;
          });
      "
      \:class="{ 'text-green-500': upvoted, 'text-gray-500': !upvoted }"
  >
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
      </svg>
      <span class="upvote-count">{{ \$product->upvotes->count() }}</span>
  </button>
  ```
 #### **B. Real-Time Updates**
-#### **B. Status Filtering**
+Use Laravel Echo to listen for events (e.g., ProductUpvoted, CommentCreated):
-Add filters for product status (e.g., 'approved', 'pending').
+```
-Example query:
+Echo.channel('product.' + productId)
-
+    .listen('ProductUpvoted', (e) => {
-```php
+        document.querySelector('.upvote-count').textContent = e.upvotesCount;
 \$products = Product::query()
    ->when(request('status'), function (\$query) {
        \$query->where('status', request('status'));
    })
-    ->get();
+    .listen('CommentCreated', (e) => {
        // Append new comment to the DOM
        const commentsContainer = document.querySelector('.comments-container');
        commentsContainer.innerHTML += `
            <div class="comment">
                <img src="\${e.comment.user.avatar}" class="w-8 h-8 rounded-full">
                <div>
                    <p class="font-bold">${e.comment.user.name}</p>
                    <p>${e.comment.body}</p>
                </div>
            </div>
        `;
    });
 ```
-#### **C. Date Filtering**
+#### **C. Infinite Scroll**
-Add filters for products created within a specific time range (e.g., 'Last Week', 'Last Month', 'All Time').
+Replace pagination with infinite scroll for the product grid:
 Example query:
-```php
+```
-\$products = Product::query()
+window.addEventListener('scroll', () => {
-    ->when(request('date_range'), function (\$query) {
+    const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
-        \$query->where('created_at', '>=', now()->subDays(request('date_range')));
+    if (scrollTop + clientHeight >= scrollHeight - 5) {
-    })
+        // Fetch next page of products
-    ->get();
+        fetch(`/products?page=${currentPage + 1}`)
            .then(response => response.text())
            .then(html => {
                document.querySelector('.products-grid').innerHTML += html;
                currentPage++;
            });
    }
 });
 ```
-#### **D. Popularity Filtering**
+### **5. Accessibility & Performance**
-Add a filter to sort products by upvote count (e.g., 'Most Popular').
+Accessibility:
 Example query:
-```php
+Use semantic HTML (<button>, <nav>, <article>).
-\$products = Product::withCount('upvotes')
+Add ARIA attributes for dynamic elements (e.g., aria-live for notifications).
-    ->when(request('sort') === 'popular', function (\$query) {
+Ensure keyboard navigability (e.g., tab index for modals).
        \$query->orderBy('upvotes_count', 'desc');
    })
    ->get();
 ```
-### **4. Combined Search & Filtering**
+Performance:
-Combine search and filtering in a single query:
+Lazy-load images (use loading="lazy" for thumbnails).
 Minify CSS/JS with Laravel Mix/Vite.
 Use defer for non-critical JS.
 ```php
 \$products = Product::query()
    ->when(request('search'), function (\$query) {
        \$query->where(function (\$subQuery) {
            \$subQuery->where('title', 'like', '%' . request('search') . '%')
                ->orWhere('description', 'like', '%' . request('search') . '%');
        });
    })
    ->when(request('category'), function (\$query) {
        \$query->where('category_id', request('category'));
    })
    ->when(request('status'), function (\$query) {
        \$query->where('status', request('status'));
    })
    ->when(request('sort') === 'popular', function (\$query) {
        \$query->withCount('upvotes')->orderBy('upvotes_count', 'desc');
    })
    ->paginate(10);
 ```
-### **5. Frontend Implementation**
+### **6. Example Code Snippets**
-#### **A. Search & Filter Form**
+Include the following in your response:
-Create a Blade view (products.index) with:
+Blade layout (layouts.app) with navigation bar and footer.
-
+Product card component (reusable Blade component).
-Search input field (bound to request('search')).
+Product show page with upvote/comment sections.
-Category dropdown (populated from the categories table).
+Alpine.js examples for interactive elements (e.g., modals, toggles).
-Status filter (radio buttons or dropdown).
+Laravel Echo setup for real-time updates.
-Date range filter (dropdown with options: 'Last Week', 'Last Month', 'All Time').
+Responsive grid for product listings.
-Sorting options (e.g., 'Newest', 'Most Popular').
+Tailwind CSS configuration (if customizing themes/colors).
 #### **B. Example Blade Snippet**
 ```html
 <form method="GET" action="{{ route('products.index') }}" class="mb-4">
    <div class="flex gap-4 items-end">
        <div class="flex-1">
            <label for="search" class="block text-sm font-medium text-gray-700">Search</label>
            <input
                type="text"
                name="search"
                id="search"
                value="{{ request('search') }}"
                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm"
                placeholder="Search products..."
            >
        </div>
        <div>
            <label for="category" class="block text-sm font-medium text-gray-700">Category</label>
            <select name="category" id="category" class="mt-1 block rounded-md border-gray-300 shadow-sm">
                <option value="">All Categories</option>
                @foreach(\$categories as \$category)
                    <option value="{{ \$category->id }}" {{ request('category') == \$category->id ? 'selected' : '' }}>
                        {{ \$category->name }}
                    </option>
                @endforeach
            </select>
        </div>
        <div>
            <label for="sort" class="block text-sm font-medium text-gray-700">Sort By</label>
            <select name="sort" id="sort" class="mt-1 block rounded-md border-gray-300 shadow-sm">
                <option value="newest" {{ request('sort') === 'newest' ? 'selected' : '' }}>Newest</option>
                <option value="popular" {{ request('sort') === 'popular' ? 'selected' : '' }}>Most Popular</option>
            </select>
        </div>
        <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md hover\:bg-blue-700">
            Apply Filters
        </button>
    </div>
 </form>
 ```
 #### **C. Displaying Results**
 Loop through the paginated results and display each product:
 ```php
@forelse(\$products as \$product)
    <div class="border rounded-lg p-4 mb-4">
        <h3 class="font-bold text-lg">{{ \$product->title }}</h3>
        <p class="text-gray-600">{{ Str::limit(\$product->description, 100) }}</p>
        <div class="flex items-center gap-2 mt-2">
            <span class="text-sm text-gray-500">{{ \$product->category->name }}</span>
            <span class="text-sm text-gray-500">{{ \$product->upvotes_count }} upvotes</span>
        </div>
    </div>
@empty
    <p class="text-gray-500">No products found.</p>
@endforelse
 {{ \$products->appends(request()->query())->links() }}
 ```
 ### **6. Pagination**
 Use Laravel’s built-in pagination:
 ```php
 \$products = \$products->paginate(10)->appends(request()->query());
 ```
 Display pagination links in the Blade view (as shown above).
 ### **7. Testing**
-Write tests for:
+Test the frontend for:
-Search functionality (partial matches for title/description).
+Cross-browser compatibility (Chrome, Firefox, Safari, Edge).
-Category filtering.
+Responsive breakpoints (use Chrome DevTools).
-Status filtering.
+Accessibility (use Lighthouse or axe).
-Date range filtering.
+Performance (Lighthouse score > 90).
 Popularity sorting.
 Pagination.
 ### **8. Example Code Snippets**
 Include the following in your response:
 Combined search & filtering query (as shown above).
 Blade view for the search/filter form.
 Blade view for displaying results and pagination.
 Controller method for handling the search/filter request.
 Test cases for search and filtering.
 ### **Notes:**
 Use Laravel’s query builder for basic search/filtering.
 Use Laravel Scout for advanced full-text search (optional).
 Assume Tailwind CSS for styling.
 Ensure filters are preserved during pagination (use appends(request()->query())).
 Optimize queries with withCount('upvotes') to avoid N+1 issues.
@@ -4,9 +4,13 @@
    "requires": true,
    "packages": {
        "": {
            "dependencies": {
                "@heroicons/vue": "^2.2.0"
            },
            "devDependencies": {
                "@popperjs/core": "^2.11.6",
                "@tailwindcss/vite": "^4.0.0",
                "alpinejs": "^3.14.1",
                "axios": "^1.11.0",
                "bootstrap": "^5.2.3",
                "concurrently": "^9.0.1",
@@ -16,6 +20,56 @@
                "vite": "^7.0.7"
            }
        },
        "node_modules/@babel/helper-string-parser": {
            "version": "7.27.1",
            "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
            "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
            "license": "MIT",
            "peer": true,
            "engines": {
                "node": ">=6.9.0"
            }
        },
        "node_modules/@babel/helper-validator-identifier": {
            "version": "7.28.5",
            "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
            "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
            "license": "MIT",
            "peer": true,
            "engines": {
                "node": ">=6.9.0"
            }
        },
        "node_modules/@babel/parser": {
            "version": "7.29.0",
            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.0.tgz",
            "integrity": "sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==",
            "license": "MIT",
            "peer": true,
            "dependencies": {
                "@babel/types": "^7.29.0"
            },
            "bin": {
                "parser": "bin/babel-parser.js"
            },
            "engines": {
                "node": ">=6.0.0"
            }
        },
        "node_modules/@babel/types": {
            "version": "7.29.0",
            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz",
            "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
            "license": "MIT",
            "peer": true,
            "dependencies": {
                "@babel/helper-string-parser": "^7.27.1",
                "@babel/helper-validator-identifier": "^7.28.5"
            },
            "engines": {
                "node": ">=6.9.0"
            }
        },
        "node_modules/@esbuild/aix-ppc64": {
            "version": "0.27.3",
            "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.3.tgz",
@@ -458,6 +512,15 @@
                "node": ">=18"
            }
        },
        "node_modules/@heroicons/vue": {
            "version": "2.2.0",
            "resolved": "https://registry.npmjs.org/@heroicons/vue/-/vue-2.2.0.tgz",
            "integrity": "sha512-G3dbSxoeEKqbi/DFalhRxJU4mTXJn7GwZ7ae8NuEQzd1bqdd0jAbdaBZlHPcvPD2xI1iGzNVB4k20Un2AguYPw==",
            "license": "MIT",
            "peerDependencies": {
                "vue": ">= 3"
            }
        },
        "node_modules/@jridgewell/gen-mapping": {
            "version": "0.3.13",
            "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -494,7 +557,6 @@
            "version": "1.5.5",
            "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
            "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
            "dev": true,
            "license": "MIT"
        },
        "node_modules/@jridgewell/trace-mapping": {
@@ -1458,6 +1520,194 @@
            "dev": true,
            "license": "MIT"
        },
        "node_modules/@vue/compiler-core": {
            "version": "3.5.27",
            "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.27.tgz",
            "integrity": "sha512-gnSBQjZA+//qDZen+6a2EdHqJ68Z7uybrMf3SPjEGgG4dicklwDVmMC1AeIHxtLVPT7sn6sH1KOO+tS6gwOUeQ==",
            "license": "MIT",
            "peer": true,
            "dependencies": {
                "@babel/parser": "^7.28.5",
                "@vue/shared": "3.5.27",
                "entities": "^7.0.0",
                "estree-walker": "^2.0.2",
                "source-map-js": "^1.2.1"
            }
        },
        "node_modules/@vue/compiler-core/node_modules/@vue/shared": {
            "version": "3.5.27",
            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.27.tgz",
            "integrity": "sha512-dXr/3CgqXsJkZ0n9F3I4elY8wM9jMJpP3pvRG52r6m0tu/MsAFIe6JpXVGeNMd/D9F4hQynWT8Rfuj0bdm9kFQ==",
            "license": "MIT",
            "peer": true
        },
        "node_modules/@vue/compiler-dom": {
            "version": "3.5.27",
            "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.27.tgz",
            "integrity": "sha512-oAFea8dZgCtVVVTEC7fv3T5CbZW9BxpFzGGxC79xakTr6ooeEqmRuvQydIiDAkglZEAd09LgVf1RoDnL54fu5w==",
            "license": "MIT",
            "peer": true,
            "dependencies": {
                "@vue/compiler-core": "3.5.27",
                "@vue/shared": "3.5.27"
            }
        },
        "node_modules/@vue/compiler-dom/node_modules/@vue/shared": {
            "version": "3.5.27",
            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.27.tgz",
            "integrity": "sha512-dXr/3CgqXsJkZ0n9F3I4elY8wM9jMJpP3pvRG52r6m0tu/MsAFIe6JpXVGeNMd/D9F4hQynWT8Rfuj0bdm9kFQ==",
            "license": "MIT",
            "peer": true
        },
        "node_modules/@vue/compiler-sfc": {
            "version": "3.5.27",
            "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.27.tgz",
            "integrity": "sha512-sHZu9QyDPeDmN/MRoshhggVOWE5WlGFStKFwu8G52swATgSny27hJRWteKDSUUzUH+wp+bmeNbhJnEAel/auUQ==",
            "license": "MIT",
            "peer": true,
            "dependencies": {
                "@babel/parser": "^7.28.5",
                "@vue/compiler-core": "3.5.27",
                "@vue/compiler-dom": "3.5.27",
                "@vue/compiler-ssr": "3.5.27",
                "@vue/shared": "3.5.27",
                "estree-walker": "^2.0.2",
                "magic-string": "^0.30.21",
                "postcss": "^8.5.6",
                "source-map-js": "^1.2.1"
            }
        },
        "node_modules/@vue/compiler-sfc/node_modules/@vue/shared": {
            "version": "3.5.27",
            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.27.tgz",
            "integrity": "sha512-dXr/3CgqXsJkZ0n9F3I4elY8wM9jMJpP3pvRG52r6m0tu/MsAFIe6JpXVGeNMd/D9F4hQynWT8Rfuj0bdm9kFQ==",
            "license": "MIT",
            "peer": true
        },
        "node_modules/@vue/compiler-ssr": {
            "version": "3.5.27",
            "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.27.tgz",
            "integrity": "sha512-Sj7h+JHt512fV1cTxKlYhg7qxBvack+BGncSpH+8vnN+KN95iPIcqB5rsbblX40XorP+ilO7VIKlkuu3Xq2vjw==",
            "license": "MIT",
            "peer": true,
            "dependencies": {
                "@vue/compiler-dom": "3.5.27",
                "@vue/shared": "3.5.27"
            }
        },
        "node_modules/@vue/compiler-ssr/node_modules/@vue/shared": {
            "version": "3.5.27",
            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.27.tgz",
            "integrity": "sha512-dXr/3CgqXsJkZ0n9F3I4elY8wM9jMJpP3pvRG52r6m0tu/MsAFIe6JpXVGeNMd/D9F4hQynWT8Rfuj0bdm9kFQ==",
            "license": "MIT",
            "peer": true
        },
        "node_modules/@vue/reactivity": {
            "version": "3.1.5",
            "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz",
            "integrity": "sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==",
            "dev": true,
            "license": "MIT",
            "dependencies": {
                "@vue/shared": "3.1.5"
            }
        },
        "node_modules/@vue/runtime-core": {
            "version": "3.5.27",
            "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.27.tgz",
            "integrity": "sha512-fxVuX/fzgzeMPn/CLQecWeDIFNt3gQVhxM0rW02Tvp/YmZfXQgcTXlakq7IMutuZ/+Ogbn+K0oct9J3JZfyk3A==",
            "license": "MIT",
            "peer": true,
            "dependencies": {
                "@vue/reactivity": "3.5.27",
                "@vue/shared": "3.5.27"
            }
        },
        "node_modules/@vue/runtime-core/node_modules/@vue/reactivity": {
            "version": "3.5.27",
            "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.27.tgz",
            "integrity": "sha512-vvorxn2KXfJ0nBEnj4GYshSgsyMNFnIQah/wczXlsNXt+ijhugmW+PpJ2cNPe4V6jpnBcs0MhCODKllWG+nvoQ==",
            "license": "MIT",
            "peer": true,
            "dependencies": {
                "@vue/shared": "3.5.27"
            }
        },
        "node_modules/@vue/runtime-core/node_modules/@vue/shared": {
            "version": "3.5.27",
            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.27.tgz",
            "integrity": "sha512-dXr/3CgqXsJkZ0n9F3I4elY8wM9jMJpP3pvRG52r6m0tu/MsAFIe6JpXVGeNMd/D9F4hQynWT8Rfuj0bdm9kFQ==",
            "license": "MIT",
            "peer": true
        },
        "node_modules/@vue/runtime-dom": {
            "version": "3.5.27",
            "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.27.tgz",
            "integrity": "sha512-/QnLslQgYqSJ5aUmb5F0z0caZPGHRB8LEAQ1s81vHFM5CBfnun63rxhvE/scVb/j3TbBuoZwkJyiLCkBluMpeg==",
            "license": "MIT",
            "peer": true,
            "dependencies": {
                "@vue/reactivity": "3.5.27",
                "@vue/runtime-core": "3.5.27",
                "@vue/shared": "3.5.27",
                "csstype": "^3.2.3"
            }
        },
        "node_modules/@vue/runtime-dom/node_modules/@vue/reactivity": {
            "version": "3.5.27",
            "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.27.tgz",
            "integrity": "sha512-vvorxn2KXfJ0nBEnj4GYshSgsyMNFnIQah/wczXlsNXt+ijhugmW+PpJ2cNPe4V6jpnBcs0MhCODKllWG+nvoQ==",
            "license": "MIT",
            "peer": true,
            "dependencies": {
                "@vue/shared": "3.5.27"
            }
        },
        "node_modules/@vue/runtime-dom/node_modules/@vue/shared": {
            "version": "3.5.27",
            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.27.tgz",
            "integrity": "sha512-dXr/3CgqXsJkZ0n9F3I4elY8wM9jMJpP3pvRG52r6m0tu/MsAFIe6JpXVGeNMd/D9F4hQynWT8Rfuj0bdm9kFQ==",
            "license": "MIT",
            "peer": true
        },
        "node_modules/@vue/server-renderer": {
            "version": "3.5.27",
            "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.27.tgz",
            "integrity": "sha512-qOz/5thjeP1vAFc4+BY3Nr6wxyLhpeQgAE/8dDtKo6a6xdk+L4W46HDZgNmLOBUDEkFXV3G7pRiUqxjX0/2zWA==",
            "license": "MIT",
            "peer": true,
            "dependencies": {
                "@vue/compiler-ssr": "3.5.27",
                "@vue/shared": "3.5.27"
            },
            "peerDependencies": {
                "vue": "3.5.27"
            }
        },
        "node_modules/@vue/server-renderer/node_modules/@vue/shared": {
            "version": "3.5.27",
            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.27.tgz",
            "integrity": "sha512-dXr/3CgqXsJkZ0n9F3I4elY8wM9jMJpP3pvRG52r6m0tu/MsAFIe6JpXVGeNMd/D9F4hQynWT8Rfuj0bdm9kFQ==",
            "license": "MIT",
            "peer": true
        },
        "node_modules/@vue/shared": {
            "version": "3.1.5",
            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz",
            "integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==",
            "dev": true,
            "license": "MIT"
        },
        "node_modules/alpinejs": {
            "version": "3.15.8",
            "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.15.8.tgz",
            "integrity": "sha512-zxIfCRTBGvF1CCLIOMQOxAyBuqibxSEwS6Jm1a3HGA9rgrJVcjEWlwLcQTVGAWGS8YhAsTRLVrtQ5a5QT9bSSQ==",
            "dev": true,
            "license": "MIT",
            "dependencies": {
                "@vue/reactivity": "~3.1.1"
            }
        },
        "node_modules/ansi-regex": {
            "version": "5.0.1",
            "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -1656,6 +1906,13 @@
                "url": "https://github.com/open-cli-tools/concurrently?sponsor=1"
            }
        },
        "node_modules/csstype": {
            "version": "3.2.3",
            "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
            "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
            "license": "MIT",
            "peer": true
        },
        "node_modules/delayed-stream": {
            "version": "1.0.0",
            "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -1712,6 +1969,19 @@
                "node": ">=10.13.0"
            }
        },
        "node_modules/entities": {
            "version": "7.0.1",
            "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
            "integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==",
            "license": "BSD-2-Clause",
            "peer": true,
            "engines": {
                "node": ">=0.12"
            },
            "funding": {
                "url": "https://github.com/fb55/entities?sponsor=1"
            }
        },
        "node_modules/es-define-property": {
            "version": "1.0.1",
            "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
@@ -1813,6 +2083,13 @@
                "node": ">=6"
            }
        },
        "node_modules/estree-walker": {
            "version": "2.0.2",
            "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
            "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
            "license": "MIT",
            "peer": true
        },
        "node_modules/fdir": {
            "version": "6.5.0",
            "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
@@ -2352,7 +2629,6 @@
            "version": "0.30.21",
            "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
            "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
            "dev": true,
            "license": "MIT",
            "dependencies": {
                "@jridgewell/sourcemap-codec": "^1.5.5"
@@ -2395,7 +2671,6 @@
            "version": "3.3.11",
            "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
            "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
            "dev": true,
            "funding": [
                {
                    "type": "github",
@@ -2422,7 +2697,6 @@
            "version": "1.1.1",
            "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
            "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
            "dev": true,
            "license": "ISC"
        },
        "node_modules/picomatch": {
@@ -2442,7 +2716,6 @@
            "version": "8.5.6",
            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
            "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
            "dev": true,
            "funding": [
                {
                    "type": "opencollective",
@@ -2591,7 +2864,6 @@
            "version": "1.2.1",
            "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
            "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
            "dev": true,
            "license": "BSD-3-Clause",
            "engines": {
                "node": ">=0.10.0"
@@ -2795,6 +3067,35 @@
                "url": "https://github.com/sponsors/jonschlinkert"
            }
        },
        "node_modules/vue": {
            "version": "3.5.27",
            "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.27.tgz",
            "integrity": "sha512-aJ/UtoEyFySPBGarREmN4z6qNKpbEguYHMmXSiOGk69czc+zhs0NF6tEFrY8TZKAl8N/LYAkd4JHVd5E/AsSmw==",
            "license": "MIT",
            "peer": true,
            "dependencies": {
                "@vue/compiler-dom": "3.5.27",
                "@vue/compiler-sfc": "3.5.27",
                "@vue/runtime-dom": "3.5.27",
                "@vue/server-renderer": "3.5.27",
                "@vue/shared": "3.5.27"
            },
            "peerDependencies": {
                "typescript": "*"
            },
            "peerDependenciesMeta": {
                "typescript": {
                    "optional": true
                }
            }
        },
        "node_modules/vue/node_modules/@vue/shared": {
            "version": "3.5.27",
            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.27.tgz",
            "integrity": "sha512-dXr/3CgqXsJkZ0n9F3I4elY8wM9jMJpP3pvRG52r6m0tu/MsAFIe6JpXVGeNMd/D9F4hQynWT8Rfuj0bdm9kFQ==",
            "license": "MIT",
            "peer": true
        },
        "node_modules/wrap-ansi": {
            "version": "7.0.0",
            "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
@@ -9,6 +9,7 @@
    "devDependencies": {
        "@popperjs/core": "^2.11.6",
        "@tailwindcss/vite": "^4.0.0",
        "alpinejs": "^3.14.1",
        "axios": "^1.11.0",
        "bootstrap": "^5.2.3",
        "concurrently": "^9.0.1",
@@ -16,5 +17,8 @@
        "sass": "^1.56.1",
        "tailwindcss": "^4.0.0",
        "vite": "^7.0.7"
    },
    "dependencies": {
        "@heroicons/vue": "^2.2.0"
    }
 }
@@ -6,6 +6,63 @@
@source '../**/*.js';
@theme {
-    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
    /* Custom color palette for ProductHunt-like theme */
    --color-primary-50: #fef2f2;
    --color-primary-100: #fee2e2;
    --color-primary-200: #fecaca;
    --color-primary-300: #fca5a5;
    --color-primary-400: #f87171;
    --color-primary-500: #ef4444;
    --color-primary-600: #dc2626;
    --color-primary-700: #b91c1c;
    --color-primary-800: #991b1b;
    --color-primary-900: #7f1d1d;
    --color-accent-50: #fff7ed;
    --color-accent-100: #ffedd5;
    --color-accent-200: #fed7aa;
    --color-accent-300: #fdba74;
    --color-accent-400: #fb923c;
    --color-accent-500: #f97316;
    --color-accent-600: #ea580c;
    --color-accent-700: #c2410c;
    --color-accent-800: #9a3412;
    --color-accent-900: #7c2d12;
 }
 /* Custom utility classes */
@layer utilities {
    .text-balance {
        text-wrap: balance;
    }
 }
 /* Custom component styles */
@layer components {
    .btn-primary {
        @apply px-4 py-2 bg-primary-600 text-white rounded-lg font-medium hover:bg-primary-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
    }
    .btn-secondary {
        @apply px-4 py-2 bg-gray-100 text-gray-900 rounded-lg font-medium hover:bg-gray-200 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2;
    }
    .btn-outline {
        @apply px-4 py-2 border-2 border-gray-300 text-gray-700 rounded-lg font-medium hover:border-gray-400 hover:bg-gray-50 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2;
    }
    .card {
        @apply bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden transition-shadow duration-200 hover:shadow-md;
    }
    .input {
        @apply block w-full rounded-lg border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 transition-colors duration-200;
    }
    .badge {
        @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
    }
 }
@@ -1 +1,8 @@
 import './bootstrap';
 import Alpine from 'alpinejs';
 // Make Alpine available globally
 window.Alpine = Alpine;
 // Start Alpine
 Alpine.start();
@@ -0,0 +1,175 @@
 <nav class="bg-white border-b border-gray-200 sticky top-0 z-50" x-data="{ mobileMenuOpen: false, userMenuOpen: false }">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
            <!-- Logo and Primary Navigation -->
            <div class="flex">
                <!-- Logo -->
                <div class="flex-shrink-0 flex items-center">
                    <a href="{{ route('products.index') }}" class="flex items-center space-x-2">
                        <svg class="h-8 w-8 text-primary-600" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
                        </svg>
                        <span class="text-xl font-bold text-gray-900">{{ config('app.name', 'BestTech') }}</span>
                    </a>
                </div>
                <!-- Desktop Navigation -->
                <div class="hidden sm:ml-8 sm:flex sm:space-x-8">
                    <a href="{{ route('products.index') }}"
                       class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium {{ request()->routeIs('products.index') ? 'border-primary-500 text-gray-900' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700' }}">
                        Discover
                    </a>
                    @auth
                        @if(auth()->user()->hasAnyRole(['admin', 'moderator']))
                            <a href="{{ route('products.manage') }}"
                               class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium {{ request()->routeIs('products.manage') ? 'border-primary-500 text-gray-900' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700' }}">
                                Manage
                            </a>
                        @endif
                    @endauth
                </div>
            </div>
            <!-- Right Side -->
            <div class="hidden sm:ml-6 sm:flex sm:items-center sm:space-x-4">
                @guest
                    <a href="{{ route('login') }}" class="text-gray-700 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">
                        Sign in
                    </a>
                    <a href="{{ route('register') }}" class="btn-primary">
                        Get started
                    </a>
                @else
                    <!-- Submit Product Button -->
                    <a href="{{ route('products.create') }}" class="btn-primary flex items-center space-x-2">
                        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
                        </svg>
                        <span>Submit</span>
                    </a>
                    <!-- User Menu Dropdown -->
                    <div class="relative" @click.away="userMenuOpen = false">
                        <button @click="userMenuOpen = !userMenuOpen"
                                class="flex items-center space-x-3 text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                            <div class="h-8 w-8 rounded-full bg-gradient-to-br from-primary-500 to-accent-500 flex items-center justify-center text-white font-semibold">
                                {{ strtoupper(substr(Auth::user()->name, 0, 1)) }}
                            </div>
                            <svg class="h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                            </svg>
                        </button>
                        <!-- Dropdown Menu -->
                        <div x-show="userMenuOpen"
                             x-transition:enter="transition ease-out duration-100"
                             x-transition:enter-start="transform opacity-0 scale-95"
                             x-transition:enter-end="transform opacity-100 scale-100"
                             x-transition:leave="transition ease-in duration-75"
                             x-transition:leave-start="transform opacity-100 scale-100"
                             x-transition:leave-end="transform opacity-0 scale-95"
                             class="origin-top-right absolute right-0 mt-2 w-48 rounded-lg shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5"
                             style="display: none;">
                            <div class="px-4 py-2 border-b border-gray-100">
                                <p class="text-sm font-medium text-gray-900">{{ Auth::user()->name }}</p>
                                <p class="text-xs text-gray-500">{{ Auth::user()->email }}</p>
                            </div>
                            <a href="{{ route('profile.show', Auth::user()) }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                Your Profile
                            </a>
                            <a href="{{ route('profile.edit') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                Settings
                            </a>
                            <form method="POST" action="{{ route('logout') }}">
                                @csrf
                                <button type="submit" class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                    Sign out
                                </button>
                            </form>
                        </div>
                    </div>
                @endguest
            </div>
            <!-- Mobile menu button -->
            <div class="flex items-center sm:hidden">
                <button @click="mobileMenuOpen = !mobileMenuOpen"
                        class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-500">
                    <svg class="h-6 w-6" :class="{'hidden': mobileMenuOpen, 'block': !mobileMenuOpen }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                    </svg>
                    <svg class="h-6 w-6" :class="{'block': mobileMenuOpen, 'hidden': !mobileMenuOpen }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
        </div>
    </div>
    <!-- Mobile menu -->
    <div x-show="mobileMenuOpen"
         x-transition:enter="transition ease-out duration-100"
         x-transition:enter-start="transform opacity-0 scale-95"
         x-transition:enter-end="transform opacity-100 scale-100"
         x-transition:leave="transition ease-in duration-75"
         x-transition:leave-start="transform opacity-100 scale-100"
         x-transition:leave-end="transform opacity-0 scale-95"
         class="sm:hidden"
         style="display: none;">
        <div class="pt-2 pb-3 space-y-1">
            <a href="{{ route('products.index') }}"
               class="block pl-3 pr-4 py-2 border-l-4 text-base font-medium {{ request()->routeIs('products.index') ? 'border-primary-500 text-primary-700 bg-primary-50' : 'border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700' }}">
                Discover
            </a>
            @auth
                @if(auth()->user()->hasAnyRole(['admin', 'moderator']))
                    <a href="{{ route('products.manage') }}"
                       class="block pl-3 pr-4 py-2 border-l-4 text-base font-medium {{ request()->routeIs('products.manage') ? 'border-primary-500 text-primary-700 bg-primary-50' : 'border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700' }}">
                        Manage
                    </a>
                @endif
            @endauth
        </div>
        @auth
            <div class="pt-4 pb-3 border-t border-gray-200">
                <div class="flex items-center px-4">
                    <div class="flex-shrink-0">
                        <div class="h-10 w-10 rounded-full bg-gradient-to-br from-primary-500 to-accent-500 flex items-center justify-center text-white font-semibold">
                            {{ strtoupper(substr(Auth::user()->name, 0, 1)) }}
                        </div>
                    </div>
                    <div class="ml-3">
                        <div class="text-base font-medium text-gray-800">{{ Auth::user()->name }}</div>
                        <div class="text-sm font-medium text-gray-500">{{ Auth::user()->email }}</div>
                    </div>
                </div>
                <div class="mt-3 space-y-1">
                    <a href="{{ route('products.create') }}" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">
                        Submit Product
                    </a>
                    <a href="{{ route('profile.show', Auth::user()) }}" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">
                        Your Profile
                    </a>
                    <a href="{{ route('profile.edit') }}" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">
                        Settings
                    </a>
                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button type="submit" class="block w-full text-left px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">
                            Sign out
                        </button>
                    </form>
                </div>
            </div>
        @else
            <div class="pt-4 pb-3 border-t border-gray-200 space-y-1">
                <a href="{{ route('login') }}" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">
                    Sign in
                </a>
                <a href="{{ route('register') }}" class="block px-4 py-2 text-base font-medium text-primary-600 hover:text-primary-800 hover:bg-gray-100">
                    Get started
                </a>
            </div>
        @endguest
    </div>
 </nav>
@@ -0,0 +1,46 @@
@props(['product'])
@php
    $isBookmarked = auth()->check() && $product->isBookmarkedBy(auth()->user());
@endphp
 <div x-data="{
    bookmarked: {{ $isBookmarked ? 'true' : 'false' }},
    loading: false,
    toggleBookmark() {
        if (this.loading) return;
        this.loading = true;
        fetch('{{ route('products.bookmark', $product) }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json',
                'Accept': 'application/json',
            },
        })
        .then(response => response.json())
        .then(data => {
            this.bookmarked = data.bookmarked;
        })
        .catch(error => {
            console.error('Error:', error);
        })
        .finally(() => {
            this.loading = false;
        });
    }
 }">
    <button @click="toggleBookmark()"
            :disabled="loading"
            :title="bookmarked ? 'Remove bookmark' : 'Bookmark this product'"
            class="text-gray-400 hover:text-primary-600 transition-colors disabled:opacity-50">
        <svg class="h-5 w-5"
             :class="{ 'animate-pulse': loading }"
             :fill="bookmarked ? 'currentColor' : 'none'"
             stroke="currentColor"
             viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"></path>
        </svg>
    </button>
 </div>
@@ -0,0 +1,82 @@
@props(['product'])
 <div class="card group">
    <a href="{{ route('products.show', $product) }}" class="block">
        <!-- Thumbnail -->
        <div class="aspect-video bg-gradient-to-br from-gray-100 to-gray-200 overflow-hidden">
            @if($product->thumbnail_url)
                <img src="{{ $product->thumbnail_url }}"
                     alt="{{ $product->title }}"
                     class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"
                     loading="lazy">
            @else
                <div class="w-full h-full flex items-center justify-center">
                    <svg class="h-16 w-16 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                    </svg>
                </div>
            @endif
        </div>
    </a>
    <!-- Content -->
    <div class="p-4">
        <div class="flex items-start justify-between mb-2">
            <div class="flex-1 min-w-0">
                <a href="{{ route('products.show', $product) }}" class="group-hover:text-primary-600 transition-colors">
                    <h3 class="text-lg font-semibold text-gray-900 truncate">{{ $product->title }}</h3>
                </a>
            </div>
            <!-- Upvote Button Component -->
            @include('components.product.upvote-button', ['product' => $product])
        </div>
        <!-- Description -->
        <p class="text-sm text-gray-600 line-clamp-2 mb-3">
            {{ Str::limit($product->description, 100) }}
        </p>
        <!-- Meta Information -->
        <div class="flex items-center justify-between text-xs text-gray-500">
            <div class="flex items-center space-x-3">
                <!-- Category Badge -->
                <span class="badge bg-gray-100 text-gray-700">
                    {{ $product->category->name }}
                </span>
                <!-- Created At -->
                <span class="flex items-center">
                    <svg class="h-3.5 w-3.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    {{ $product->created_at->diffForHumans() }}
                </span>
            </div>
            <!-- User -->
            <a href="{{ route('profile.show', $product->user) }}" class="flex items-center space-x-1 hover:text-gray-900">
                <div class="h-5 w-5 rounded-full bg-gradient-to-br from-primary-500 to-accent-500 flex items-center justify-center text-white text-xs font-semibold">
                    {{ strtoupper(substr($product->user->name, 0, 1)) }}
                </div>
                <span class="text-xs">{{ $product->user->name }}</span>
            </a>
        </div>
        <!-- Action Buttons -->
        <div class="mt-3 pt-3 border-t border-gray-100 flex items-center justify-between">
            <a href="{{ route('products.show', $product) }}"
               class="text-sm font-medium text-primary-600 hover:text-primary-700 flex items-center">
                View details
                <svg class="h-4 w-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                </svg>
            </a>
            <!-- Bookmark Button -->
            @auth
                @include('components.product.bookmark-button', ['product' => $product])
            @endauth
        </div>
    </div>
 </div>
@@ -0,0 +1,64 @@
@props(['product', 'size' => 'sm'])
@php
    $isUpvoted = auth()->check() && $product->isUpvotedBy(auth()->user());
    $upvotesCount = isset($product->upvotes_count) ? $product->upvotes_count : $product->upvotes()->count();
    $sizeClasses = match($size) {
        'lg' => 'h-12 w-12 text-base',
        'md' => 'h-10 w-10 text-sm',
        default => 'h-8 w-8 text-xs',
    };
@endphp
 <div x-data="{
    upvoted: {{ $isUpvoted ? 'true' : 'false' }},
    count: {{ $upvotesCount }},
    loading: false,
    toggleUpvote() {
        @guest
            window.location.href = '{{ route('login') }}';
            return;
        @endguest
        if (this.loading) return;
        this.loading = true;
        fetch('{{ route('products.upvote', $product) }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json',
                'Accept': 'application/json',
            },
        })
        .then(response => response.json())
        .then(data => {
            this.upvoted = data.upvoted;
            this.count = data.upvotes_count;
        })
        .catch(error => {
            console.error('Error:', error);
        })
        .finally(() => {
            this.loading = false;
        });
    }
 }" class="flex-shrink-0">
    <button @click="toggleUpvote()"
            :disabled="loading"
            :class="{
                'bg-primary-100 border-primary-500 text-primary-700': upvoted,
                'bg-white border-gray-300 text-gray-700 hover:border-gray-400': !upvoted
            }"
            class="{{ $sizeClasses }} flex flex-col items-center justify-center border-2 rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed">
        <svg :class="{ 'animate-bounce': loading }"
             class="w-4 h-4"
             fill="none"
             stroke="currentColor"
             viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path>
        </svg>
        <span class="font-semibold" x-text="count"></span>
    </button>
 </div>
@@ -0,0 +1,67 @@
@props([
    'name',
    'show' => false,
    'maxWidth' => 'md'
 ])
@php
 $maxWidthClass = [
    'sm' => 'sm:max-w-sm',
    'md' => 'sm:max-w-md',
    'lg' => 'sm:max-w-lg',
    'xl' => 'sm:max-w-xl',
    '2xl' => 'sm:max-w-2xl',
 ][$maxWidth];
@endphp
 <div x-data="{
    show: @js($show),
    focusables() {
        let selector = 'a, button, input:not([type=\'hidden\']), textarea, select, details, [tabindex]:not([tabindex=\'-1\'])'
        return [...this.$el.querySelectorAll(selector)]
            .filter(el => ! el.hasAttribute('disabled'))
    },
    firstFocusable() { return this.focusables()[0] },
    lastFocusable() { return this.focusables().slice(-1)[0] },
    nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() },
    prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() },
    nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) },
    prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) -1 },
 }"
 x-init="$watch('show', value => {
    if (value) {
        document.body.classList.add('overflow-hidden');
        {{ $attributes->has('focusable') ? 'setTimeout(() => firstFocusable().focus(), 100)' : '' }}
    } else {
        document.body.classList.remove('overflow-hidden');
    }
 })"
 x-on:open-modal.window="$event.detail == '{{ $name }}' ? show = true : null"
 x-on:close-modal.window="$event.detail == '{{ $name }}' ? show = false : null"
 x-on:close.stop="show = false"
 x-on:keydown.escape.window="show = false"
 x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()"
 x-on:keydown.shift.tab.prevent="prevFocusable().focus()"
 x-show="show"
 class="fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 z-50"
 style="display: {{ $show ? 'block' : 'none' }};">
    <div x-show="show" class="fixed inset-0 transform transition-all" x-on:click="show = false"
         x-transition:enter="ease-out duration-300"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="ease-in duration-200"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0">
        <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
    </div>
    <div x-show="show" class="mb-6 bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto {{ $maxWidthClass }}"
         x-transition:enter="ease-out duration-300"
         x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
         x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
         x-transition:leave="ease-in duration-200"
         x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
         x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
        {{ $slot }}
    </div>
 </div>
@@ -0,0 +1,135 @@
 <!-- Toast Notifications -->
 <div x-data="{
    notices: [],
    visible: [],
    add(notice) {
        const id = Date.now();
        notice.id = id;
        this.notices.push(notice);
        this.visible.push(id);
        setTimeout(() => {
            this.remove(id);
        }, notice.duration || 5000);
    },
    remove(id) {
        const index = this.visible.indexOf(id);
        if (index > -1) {
            this.visible.splice(index, 1);
        }
        setTimeout(() => {
            const noticeIndex = this.notices.findIndex(n => n.id === id);
            if (noticeIndex > -1) {
                this.notices.splice(noticeIndex, 1);
            }
        }, 300);
    }
 }"
@notify.window="add($event.detail)"
 class="fixed top-4 right-4 z-50 space-y-2"
 aria-live="assertive">
    <template x-for="notice in notices" :key="notice.id">
        <div x-show="visible.includes(notice.id)"
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="transform translate-x-full opacity-0"
             x-transition:enter-end="transform translate-x-0 opacity-100"
             x-transition:leave="transition ease-in duration-200"
             x-transition:leave-start="transform translate-x-0 opacity-100"
             x-transition:leave-end="transform translate-x-full opacity-0"
             class="max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden">
            <div class="p-4">
                <div class="flex items-start">
                    <div class="flex-shrink-0">
                        <!-- Success Icon -->
                        <template x-if="notice.type === 'success'">
                            <svg class="h-6 w-6 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                        </template>
                        <!-- Error Icon -->
                        <template x-if="notice.type === 'error'">
                            <svg class="h-6 w-6 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                        </template>
                        <!-- Info Icon -->
                        <template x-if="notice.type === 'info'">
                            <svg class="h-6 w-6 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                        </template>
                        <!-- Warning Icon -->
                        <template x-if="notice.type === 'warning'">
                            <svg class="h-6 w-6 text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                            </svg>
                        </template>
                    </div>
                    <div class="ml-3 w-0 flex-1 pt-0.5">
                        <p class="text-sm font-medium text-gray-900" x-text="notice.title"></p>
                        <p class="mt-1 text-sm text-gray-500" x-text="notice.message"></p>
                    </div>
                    <div class="ml-4 flex-shrink-0 flex">
                        <button @click="remove(notice.id)"
                                class="bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                            <span class="sr-only">Close</span>
                            <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </template>
 </div>
 <!-- Session Messages (Laravel Flash Messages) -->
@if(session('success') || session('error') || session('info') || session('warning'))
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            @if(session('success'))
                window.dispatchEvent(new CustomEvent('notify', {
                    detail: {
                        type: 'success',
                        title: 'Success!',
                        message: '{{ session('success') }}',
                        duration: 5000
                    }
                }));
            @endif
            @if(session('error'))
                window.dispatchEvent(new CustomEvent('notify', {
                    detail: {
                        type: 'error',
                        title: 'Error!',
                        message: '{{ session('error') }}',
                        duration: 5000
                    }
                }));
            @endif
            @if(session('info'))
                window.dispatchEvent(new CustomEvent('notify', {
                    detail: {
                        type: 'info',
                        title: 'Info',
                        message: '{{ session('info') }}',
                        duration: 5000
                    }
                }));
            @endif
            @if(session('warning'))
                window.dispatchEvent(new CustomEvent('notify', {
                    detail: {
                        type: 'warning',
                        title: 'Warning!',
                        message: '{{ session('warning') }}',
                        duration: 5000
                    }
                }));
            @endif
        });
    </script>
@endif
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="h-full bg-gray-50">
 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -7,74 +7,92 @@
    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
-    <title>{{ config('app.name', 'Laravel') }}</title>
+    <title>{{ $title ?? config('app.name', 'BestTech') }}</title>
    <!-- Fonts -->
-    <link rel="dns-prefetch" href="//fonts.bunny.net">
+    <link rel="preconnect" href="https://fonts.bunny.net">
-    <link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet">
+    <link href="https://fonts.bunny.net/css?family=inter:300,400,500,600,700,800" rel="stylesheet">
-    <!-- Scripts -->
+    <!-- Favicon -->
-    @vite(['resources/sass/app.scss', 'resources/js/app.js'])
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
    <!-- Scripts & Styles -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    <!-- Additional Head Content -->
    @stack('styles')
 </head>
-<body>
+<body class="h-full antialiased">
-    <div id="app">
+    <div id="app" class="min-h-full flex flex-col">
-        <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
+        <!-- Navigation -->
-            <div class="container">
+        @include('components.layout.navbar')
                <a class="navbar-brand" href="{{ url('/') }}">
                    {{ config('app.name', 'Laravel') }}
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
                    <span class="navbar-toggler-icon"></span>
                </button>
-                <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <!-- Page Content -->
-                    <!-- Left Side Of Navbar -->
+        <main class="flex-grow">
                    <ul class="navbar-nav me-auto">
                    </ul>
                    <!-- Right Side Of Navbar -->
                    <ul class="navbar-nav ms-auto">
                        <!-- Authentication Links -->
                        @guest
                            @if (Route::has('login'))
                                <li class="nav-item">
                                    <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
                                </li>
                            @endif
                            @if (Route::has('register'))
                                <li class="nav-item">
                                    <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
                                </li>
                            @endif
                        @else
                            <li class="nav-item dropdown">
                                <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                                    {{ Auth::user()->name }}
                                </a>
                                <div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item" href="{{ route('logout') }}"
                                       onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                                        {{ __('Logout') }}
                                    </a>
                                    <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                                        @csrf
                                    </form>
                                </div>
                            </li>
                        @endguest
                    </ul>
                </div>
            </div>
        </nav>
        <main class="py-4">
            @yield('content')
        </main>
        <!-- Footer -->
        <footer class="bg-white border-t border-gray-200 mt-auto">
            <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                    <!-- Company Info -->
                    <div class="col-span-1">
                        <div class="flex items-center space-x-2 mb-4">
                            <svg class="h-8 w-8 text-primary-600" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
                            </svg>
                            <span class="text-lg font-bold text-gray-900">{{ config('app.name', 'BestTech') }}</span>
                        </div>
                        <p class="text-sm text-gray-600">
                            Discover the best tech products from the EU.
                        </p>
                    </div>
                    <!-- Product Links -->
                    <div>
                        <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-4">Product</h3>
                        <ul class="space-y-3">
                            <li><a href="{{ route('products.index') }}" class="text-sm text-gray-600 hover:text-gray-900">Discover</a></li>
                            @auth
                                <li><a href="{{ route('products.create') }}" class="text-sm text-gray-600 hover:text-gray-900">Submit Product</a></li>
                            @endauth
                        </ul>
                    </div>
                    <!-- Company Links -->
                    <div>
                        <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-4">Company</h3>
                        <ul class="space-y-3">
                            <li><a href="#" class="text-sm text-gray-600 hover:text-gray-900">About</a></li>
                            <li><a href="#" class="text-sm text-gray-600 hover:text-gray-900">Blog</a></li>
                            <li><a href="#" class="text-sm text-gray-600 hover:text-gray-900">Contact</a></li>
                        </ul>
                    </div>
                    <!-- Legal Links -->
                    <div>
                        <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-4">Legal</h3>
                        <ul class="space-y-3">
                            <li><a href="#" class="text-sm text-gray-600 hover:text-gray-900">Privacy</a></li>
                            <li><a href="#" class="text-sm text-gray-600 hover:text-gray-900">Terms</a></li>
                        </ul>
                    </div>
                </div>
                <div class="mt-8 pt-8 border-t border-gray-200">
                    <p class="text-sm text-gray-500 text-center">
                        &copy; {{ date('Y') }} {{ config('app.name', 'BestTech') }}. All rights reserved.
                    </p>
                </div>
            </div>
        </footer>
    </div>
    <!-- Toast Notifications -->
    @include('components.ui.notification')
    <!-- Additional Scripts -->
    @stack('scripts')
 </body>
 </html>
@@ -0,0 +1,180 @@
@extends('layouts.app')
@php
    $title = 'Discover Products - ' . config('app.name');
@endphp
@section('content')
 <div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1>Discover Products</h1>
                @auth
                    <a href="{{ route('products.create') }}" class="btn btn-primary">Submit a Product</a>
                @endauth
            </div>
            <!-- Search & Filter Form -->
            <div class="card mb-4">
                <div class="card-body">
                    <form method="GET" action="{{ route('products.index') }}" id="filterForm">
                        <div class="row g-3">
                            <!-- Search Input -->
                            <div class="col-md-4">
                                <label for="search" class="form-label fw-semibold">Search Products</label>
                                <input
                                    type="text"
                                    name="search"
                                    id="search"
                                    value="{{ request('search') }}"
                                    class="form-control"
                                    placeholder="Search by title or description..."
                                >
                            </div>
                            <!-- Category Filter -->
                            <div class="col-md-3">
                                <label for="category" class="form-label fw-semibold">Category</label>
                                <select name="category" id="category" class="form-select">
                                    <option value="">All Categories</option>
                                    @foreach($categories as $category)
                                        <option value="{{ $category->id }}" {{ request('category') == $category->id ? 'selected' : '' }}>
                                            {{ $category->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <!-- Date Range Filter -->
                            <div class="col-md-2">
                                <label for="date_range" class="form-label fw-semibold">Time Period</label>
                                <select name="date_range" id="date_range" class="form-select">
                                    <option value="">All Time</option>
                                    <option value="today" {{ request('date_range') === 'today' ? 'selected' : '' }}>Today</option>
                                    <option value="week" {{ request('date_range') === 'week' ? 'selected' : '' }}>This Week</option>
                                    <option value="month" {{ request('date_range') === 'month' ? 'selected' : '' }}>This Month</option>
                                    <option value="year" {{ request('date_range') === 'year' ? 'selected' : '' }}>This Year</option>
                                </select>
                            </div>
                            <!-- Sort By -->
                            <div class="col-md-2">
                                <label for="sort" class="form-label fw-semibold">Sort By</label>
                                <select name="sort" id="sort" class="form-select">
                                    <option value="newest" {{ request('sort') === 'newest' || !request('sort') ? 'selected' : '' }}>Newest</option>
                                    <option value="popular" {{ request('sort') === 'popular' ? 'selected' : '' }}>Most Popular</option>
                                    <option value="oldest" {{ request('sort') === 'oldest' ? 'selected' : '' }}>Oldest</option>
                                </select>
                            </div>
                            <!-- Action Buttons -->
                            <div class="col-md-1 d-flex align-items-end">
                                <div class="btn-group w-100" role="group">
                                    <button type="submit" class="btn btn-primary" title="Apply Filters">
                                        <i class="bi bi-search"></i>
                                    </button>
                                    <a href="{{ route('products.index') }}" class="btn btn-outline-secondary" title="Clear Filters">
                                        <i class="bi bi-x-circle"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        @if(request()->hasAny(['search', 'category', 'date_range', 'sort']))
                            <div class="mt-3">
                                <small class="text-muted">
                                    <strong>Active Filters:</strong>
                                    @if(request('search'))
                                        <span class="badge bg-secondary me-1">Search: "{{ request('search') }}"</span>
                                    @endif
                                    @if(request('category'))
                                        <span class="badge bg-secondary me-1">Category: {{ $categories->find(request('category'))->name ?? 'Unknown' }}</span>
                                    @endif
                                    @if(request('date_range'))
                                        <span class="badge bg-secondary me-1">Period: {{ ucfirst(request('date_range')) }}</span>
                                    @endif
                                    @if(request('sort') && request('sort') !== 'newest')
                                        <span class="badge bg-secondary me-1">Sort: {{ ucfirst(request('sort')) }}</span>
                                    @endif
                                </small>
                            </div>
                        @endif
                    </form>
                </div>
            </div>
            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif
            <!-- Results Summary -->
            @if($products->total() > 0)
                <div class="mb-3">
                    <p class="text-muted">
                        Showing {{ $products->firstItem() }} to {{ $products->lastItem() }} of {{ $products->total() }} product(s)
                    </p>
                </div>
            @endif
            <!-- Products Grid -->
            <div class="row">
                @forelse($products as $product)
                    <div class="col-md-4 mb-4">
                        <div class="card h-100">
                            @if($product->thumbnail_url)
                                <img src="{{ $product->thumbnail_url }}" class="card-img-top" alt="{{ $product->title }}" style="height: 200px; object-fit: cover;">
                            @else
                                <div class="bg-light d-flex align-items-center justify-content-center" style="height: 200px;">
                                    <span class="text-muted">No image</span>
                                </div>
                            @endif
                            <div class="card-body d-flex flex-column">
                                <div class="d-flex justify-content-between align-items-start mb-2">
                                    <h5 class="card-title mb-0">{{ $product->title }}</h5>
                                    @if(isset($product->upvotes_count))
                                        <span class="badge bg-primary rounded-pill">
                                            <i class="bi bi-arrow-up"></i> {{ $product->upvotes_count }}
                                        </span>
                                    @endif
                                </div>
                                <p class="card-text text-muted small mb-2">
                                    <span class="badge bg-secondary">{{ $product->category->name }}</span>
                                </p>
                                <p class="card-text flex-grow-1">{{ Str::limit($product->description, 100) }}</p>
                                <div class="mt-auto">
                                    <a href="{{ route('products.show', $product) }}" class="btn btn-sm btn-primary">View Details</a>
                                    <a href="{{ $product->website_url }}" target="_blank" rel="noopener" class="btn btn-sm btn-outline-primary">Visit Website</a>
                                </div>
                                <div class="mt-2 text-muted small">
                                    By {{ $product->user->name }} · {{ $product->created_at->diffForHumans() }}
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-md-12">
                        <div class="alert alert-info">
                            @if(request()->hasAny(['search', 'category', 'date_range']))
                                No products found matching your filters. Try adjusting your search criteria.
                            @else
                                No products found. Be the first to submit one!
                            @endif
                        </div>
                    </div>
                @endforelse
            </div>
            <!-- Pagination -->
            @if($products->hasPages())
                <div class="d-flex justify-content-center">
                    {{ $products->links() }}
                </div>
            @endif
        </div>
    </div>
 </div>
@endsection
@@ -1,176 +1,201 @@
@extends('layouts.app')
@php
    $title = 'Discover Products - ' . config('app.name');
@endphp
@section('content')
-<div class="container">
+<!-- Hero Section -->
-    <div class="row">
+<div class="bg-gradient-to-br from-primary-50 via-white to-accent-50 border-b border-gray-200">
-        <div class="col-md-12">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-16">
-            <div class="d-flex justify-content-between align-items-center mb-4">
+        <div class="text-center max-w-3xl mx-auto">
-                <h1>Discover Products</h1>
+            <h1 class="text-4xl sm:text-5xl font-bold text-gray-900 mb-4">
-                @auth
+                Discover the best tech from Europe
-                    <a href="{{ route('products.create') }}" class="btn btn-primary">Submit a Product</a>
+            </h1>
-                @endauth
+            <p class="text-lg text-gray-600 mb-8">
-            </div>
+                Find amazing products built by European makers and companies
            </p>
-            <!-- Search & Filter Form -->
+            <!-- Hero Search -->
-            <div class="card mb-4">
+            <div class="max-w-2xl mx-auto">
-                <div class="card-body">
+                <form method="GET" action="{{ route('products.index') }}">
-                    <form method="GET" action="{{ route('products.index') }}" id="filterForm">
+                    <div class="relative">
-                        <div class="row g-3">
+                        <input type="text"
-                            <!-- Search Input -->
+                               name="search"
-                            <div class="col-md-4">
+                               value="{{ request('search') }}"
-                                <label for="search" class="form-label fw-semibold">Search Products</label>
+                               placeholder="Search for products..."
-                                <input
+                               class="w-full px-6 py-4 text-lg border-2 border-gray-300 rounded-full focus:border-primary-500 focus:ring-2 focus:ring-primary-200 transition-all duration-200">
-                                    type="text"
+                        <button type="submit"
-                                    name="search"
+                                class="absolute right-2 top-1/2 -translate-y-1/2 bg-primary-600 text-white px-6 py-2 rounded-full hover:bg-primary-700 transition-colors">
-                                    id="search"
+                            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    value="{{ request('search') }}"
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
-                                    class="form-control"
+                            </svg>
-                                    placeholder="Search by title or description..."
+                        </button>
                                >
                            </div>
                            <!-- Category Filter -->
                            <div class="col-md-3">
                                <label for="category" class="form-label fw-semibold">Category</label>
                                <select name="category" id="category" class="form-select">
                                    <option value="">All Categories</option>
                                    @foreach($categories as $category)
                                        <option value="{{ $category->id }}" {{ request('category') == $category->id ? 'selected' : '' }}>
                                            {{ $category->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <!-- Date Range Filter -->
                            <div class="col-md-2">
                                <label for="date_range" class="form-label fw-semibold">Time Period</label>
                                <select name="date_range" id="date_range" class="form-select">
                                    <option value="">All Time</option>
                                    <option value="today" {{ request('date_range') === 'today' ? 'selected' : '' }}>Today</option>
                                    <option value="week" {{ request('date_range') === 'week' ? 'selected' : '' }}>This Week</option>
                                    <option value="month" {{ request('date_range') === 'month' ? 'selected' : '' }}>This Month</option>
                                    <option value="year" {{ request('date_range') === 'year' ? 'selected' : '' }}>This Year</option>
                                </select>
                            </div>
                            <!-- Sort By -->
                            <div class="col-md-2">
                                <label for="sort" class="form-label fw-semibold">Sort By</label>
                                <select name="sort" id="sort" class="form-select">
                                    <option value="newest" {{ request('sort') === 'newest' || !request('sort') ? 'selected' : '' }}>Newest</option>
                                    <option value="popular" {{ request('sort') === 'popular' ? 'selected' : '' }}>Most Popular</option>
                                    <option value="oldest" {{ request('sort') === 'oldest' ? 'selected' : '' }}>Oldest</option>
                                </select>
                            </div>
                            <!-- Action Buttons -->
                            <div class="col-md-1 d-flex align-items-end">
                                <div class="btn-group w-100" role="group">
                                    <button type="submit" class="btn btn-primary" title="Apply Filters">
                                        <i class="bi bi-search"></i>
                                    </button>
                                    <a href="{{ route('products.index') }}" class="btn btn-outline-secondary" title="Clear Filters">
                                        <i class="bi bi-x-circle"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        @if(request()->hasAny(['search', 'category', 'date_range', 'sort']))
                            <div class="mt-3">
                                <small class="text-muted">
                                    <strong>Active Filters:</strong>
                                    @if(request('search'))
                                        <span class="badge bg-secondary me-1">Search: "{{ request('search') }}"</span>
                                    @endif
                                    @if(request('category'))
                                        <span class="badge bg-secondary me-1">Category: {{ $categories->find(request('category'))->name ?? 'Unknown' }}</span>
                                    @endif
                                    @if(request('date_range'))
                                        <span class="badge bg-secondary me-1">Period: {{ ucfirst(request('date_range')) }}</span>
                                    @endif
                                    @if(request('sort') && request('sort') !== 'newest')
                                        <span class="badge bg-secondary me-1">Sort: {{ ucfirst(request('sort')) }}</span>
                                    @endif
                                </small>
                            </div>
                        @endif
                    </form>
                </div>
            </div>
            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif
            <!-- Results Summary -->
            @if($products->total() > 0)
                <div class="mb-3">
                    <p class="text-muted">
                        Showing {{ $products->firstItem() }} to {{ $products->lastItem() }} of {{ $products->total() }} product(s)
                    </p>
                </div>
            @endif
            <!-- Products Grid -->
            <div class="row">
                @forelse($products as $product)
                    <div class="col-md-4 mb-4">
                        <div class="card h-100">
                            @if($product->thumbnail_url)
                                <img src="{{ $product->thumbnail_url }}" class="card-img-top" alt="{{ $product->title }}" style="height: 200px; object-fit: cover;">
                            @else
                                <div class="bg-light d-flex align-items-center justify-content-center" style="height: 200px;">
                                    <span class="text-muted">No image</span>
                                </div>
                            @endif
                            <div class="card-body d-flex flex-column">
                                <div class="d-flex justify-content-between align-items-start mb-2">
                                    <h5 class="card-title mb-0">{{ $product->title }}</h5>
                                    @if(isset($product->upvotes_count))
                                        <span class="badge bg-primary rounded-pill">
                                            <i class="bi bi-arrow-up"></i> {{ $product->upvotes_count }}
                                        </span>
                                    @endif
                                </div>
                                <p class="card-text text-muted small mb-2">
                                    <span class="badge bg-secondary">{{ $product->category->name }}</span>
                                </p>
                                <p class="card-text flex-grow-1">{{ Str::limit($product->description, 100) }}</p>
                                <div class="mt-auto">
                                    <a href="{{ route('products.show', $product) }}" class="btn btn-sm btn-primary">View Details</a>
                                    <a href="{{ $product->website_url }}" target="_blank" rel="noopener" class="btn btn-sm btn-outline-primary">Visit Website</a>
                                </div>
                                <div class="mt-2 text-muted small">
                                    By {{ $product->user->name }} · {{ $product->created_at->diffForHumans() }}
                                </div>
                            </div>
                        </div>
                    </div>
-                @empty
+                </form>
                    <div class="col-md-12">
                        <div class="alert alert-info">
                            @if(request()->hasAny(['search', 'category', 'date_range']))
                                No products found matching your filters. Try adjusting your search criteria.
                            @else
                                No products found. Be the first to submit one!
                            @endif
                        </div>
                    </div>
                @endforelse
            </div>
            <!-- Pagination -->
            @if($products->hasPages())
                <div class="d-flex justify-content-center">
                    {{ $products->links() }}
                </div>
            @endif
        </div>
    </div>
 </div>
 <!-- Main Content -->
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- Filters & Sorting -->
    <div class="mb-8">
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
            <form method="GET" action="{{ route('products.index') }}" class="space-y-4 lg:space-y-0" x-data="{ showFilters: false }">
                <!-- Filter Toggle (Mobile) -->
                <div class="lg:hidden">
                    <button @click="showFilters = !showFilters"
                            type="button"
                            class="w-full btn-secondary flex items-center justify-between">
                        <span>Filters & Sort</span>
                        <svg class="h-5 w-5" :class="{ 'rotate-180': showFilters }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                        </svg>
                    </button>
                </div>
                <!-- Filters Grid -->
                <div :class="{ 'hidden': !showFilters }"
                     class="lg:block grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
                    <!-- Search (hidden on desktop as it's in hero) -->
                    <div class="lg:hidden">
                        <input type="text"
                               name="search"
                               value="{{ request('search') }}"
                               placeholder="Search..."
                               class="input">
                    </div>
                    <!-- Category Filter -->
                    <div>
                        <label for="category" class="block text-sm font-medium text-gray-700 mb-1">Category</label>
                        <select name="category" id="category" class="input">
                            <option value="">All Categories</option>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}" {{ request('category') == $category->id ? 'selected' : '' }}>
                                    {{ $category->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <!-- Date Range Filter -->
                    <div>
                        <label for="date_range" class="block text-sm font-medium text-gray-700 mb-1">Time Period</label>
                        <select name="date_range" id="date_range" class="input">
                            <option value="">All Time</option>
                            <option value="today" {{ request('date_range') === 'today' ? 'selected' : '' }}>Today</option>
                            <option value="week" {{ request('date_range') === 'week' ? 'selected' : '' }}>This Week</option>
                            <option value="month" {{ request('date_range') === 'month' ? 'selected' : '' }}>This Month</option>
                            <option value="year" {{ request('date_range') === 'year' ? 'selected' : '' }}>This Year</option>
                        </select>
                    </div>
                    <!-- Sort By -->
                    <div>
                        <label for="sort" class="block text-sm font-medium text-gray-700 mb-1">Sort By</label>
                        <select name="sort" id="sort" class="input">
                            <option value="newest" {{ request('sort') === 'newest' || !request('sort') ? 'selected' : '' }}>Newest</option>
                            <option value="popular" {{ request('sort') === 'popular' ? 'selected' : '' }}>Most Popular</option>
                            <option value="oldest" {{ request('sort') === 'oldest' ? 'selected' : '' }}>Oldest</option>
                        </select>
                    </div>
                    <!-- Action Buttons -->
                    <div class="flex items-end space-x-2">
                        <button type="submit" class="btn-primary flex-1 lg:flex-none">
                            Apply
                        </button>
                        <a href="{{ route('products.index') }}" class="btn-outline flex-1 lg:flex-none">
                            Clear
                        </a>
                    </div>
                </div>
                <!-- Active Filters Tags -->
                @if(request()->hasAny(['search', 'category', 'date_range', 'sort']))
                    <div class="flex flex-wrap gap-2 pt-4 border-t border-gray-200">
                        <span class="text-sm font-medium text-gray-700">Active filters:</span>
                        @if(request('search'))
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm bg-primary-100 text-primary-800">
                                Search: "{{ request('search') }}"
                                <a href="{{ route('products.index', request()->except('search')) }}" class="ml-2 hover:text-primary-900">×</a>
                            </span>
                        @endif
                        @if(request('category'))
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm bg-primary-100 text-primary-800">
                                {{ $categories->find(request('category'))->name ?? 'Unknown' }}
                                <a href="{{ route('products.index', request()->except('category')) }}" class="ml-2 hover:text-primary-900">×</a>
                            </span>
                        @endif
                        @if(request('date_range'))
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm bg-primary-100 text-primary-800">
                                {{ ucfirst(request('date_range')) }}
                                <a href="{{ route('products.index', request()->except('date_range')) }}" class="ml-2 hover:text-primary-900">×</a>
                            </span>
                        @endif
                        @if(request('sort') && request('sort') !== 'newest')
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm bg-primary-100 text-primary-800">
                                {{ ucfirst(request('sort')) }}
                                <a href="{{ route('products.index', request()->except('sort')) }}" class="ml-2 hover:text-primary-900">×</a>
                            </span>
                        @endif
                    </div>
                @endif
            </form>
        </div>
    </div>
    <!-- Results Summary -->
    @if($products->total() > 0)
        <div class="mb-6">
            <p class="text-sm text-gray-600">
                Showing <span class="font-semibold text-gray-900">{{ $products->firstItem() }}</span> to
                <span class="font-semibold text-gray-900">{{ $products->lastItem() }}</span> of
                <span class="font-semibold text-gray-900">{{ $products->total() }}</span> products
            </p>
        </div>
    @endif
    <!-- Products Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
        @forelse($products as $product)
            @include('components.product.card', ['product' => $product])
        @empty
            <!-- Empty State -->
            <div class="col-span-full">
                <div class="text-center py-16">
                    <svg class="mx-auto h-16 w-16 text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <h3 class="text-lg font-medium text-gray-900 mb-2">No products found</h3>
                    <p class="text-gray-600 mb-6">
                        @if(request()->hasAny(['search', 'category', 'date_range']))
                            Try adjusting your search or filters to find what you're looking for.
                        @else
                            Be the first to submit a product!
                        @endif
                    </p>
                    @auth
                        <a href="{{ route('products.create') }}" class="btn-primary inline-flex items-center space-x-2">
                            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
                            </svg>
                            <span>Submit a Product</span>
                        </a>
                    @endauth
                </div>
            </div>
        @endforelse
    </div>
    <!-- Pagination -->
    @if($products->hasPages())
        <div class="flex justify-center">
            {{ $products->links() }}
        </div>
    @endif
 </div>
@endsection
@@ -5,7 +5,7 @@ export default defineConfig({
    plugins: [
        laravel({
            input: [
-                'resources/sass/app.scss',
+                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,