From 59304a88f42bd6ca6c863e3427ee95c0283ae675 Mon Sep 17 00:00:00 2001
From: DaX <daxdax89@msn.com>
Date: Fri, 29 Aug 2025 13:22:34 +0200
Subject: [PATCH] Center tabs and move color request to dedicated tab

- Centered tab navigation for better visual balance
- Created dedicated Color Request tab with informative layout
- Removed standalone color request button from main actions
- Added statistics and info to color request section
- Shortened 'Oprema i Delovi' to just 'Oprema' for cleaner tabs
---
 app/page.tsx                           | 35 +++++--------
 src/components/ColorRequestSection.tsx | 72 ++++++++++++++++++++++++++
 src/components/TabbedNavigation.tsx    |  2 +-
 3 files changed, 86 insertions(+), 23 deletions(-)
 create mode 100644 src/components/ColorRequestSection.tsx

diff --git a/app/page.tsx b/app/page.tsx
index 2941071..5d8faab 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -3,10 +3,10 @@
 import { useState, useEffect } from 'react';
 import { FilamentTableV2 } from '../src/components/FilamentTableV2';
 import { SaleCountdown } from '../src/components/SaleCountdown';
-import ColorRequestModal from '../src/components/ColorRequestModal';
 import TabbedNavigation from '../src/components/TabbedNavigation';
 import PrintersTable from '../src/components/PrintersTable';
 import GearTable from '../src/components/GearTable';
+import ColorRequestSection from '../src/components/ColorRequestSection';
 import { Filament } from '../src/types/filament';
 import { filamentService } from '../src/services/api';
 import { trackEvent } from '../src/components/MatomoAnalytics';
@@ -18,7 +18,6 @@ export default function Home() {
   const [darkMode, setDarkMode] = useState(false);
   const [mounted, setMounted] = useState(false);
   const [resetKey, setResetKey] = useState(0);
-  const [showColorRequestModal, setShowColorRequestModal] = useState(false);
   const [activeTab, setActiveTab] = useState('filaments');
   // Removed V1/V2 toggle - now only using V2
 
@@ -179,19 +178,6 @@ export default function Home() {
             </svg>
             Pozovi +381 67 710 2845
           </a>
-          
-          <button
-            onClick={() => {
-              setShowColorRequestModal(true);
-              trackEvent('Navigation', 'Request Color', 'Homepage');
-            }}
-            className="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transition-all duration-200 transform hover:scale-105"
-          >
-            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
-            </svg>
-            Zatraži Novu Boju
-          </button>
         </div>
         
         {/* Tabs Navigation */}
@@ -207,6 +193,15 @@ export default function Home() {
                   </svg>
                 )
               },
+              {
+                id: 'color-request',
+                label: 'Zatraži Boju',
+                icon: (
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
+                  </svg>
+                )
+              },
               { 
                 id: 'printers', 
                 label: 'Štampači',
@@ -218,7 +213,7 @@ export default function Home() {
               },
               { 
                 id: 'gear', 
-                label: 'Oprema i Delovi',
+                label: 'Oprema',
                 icon: (
                   <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
@@ -257,6 +252,8 @@ export default function Home() {
           </>
         )}
 
+        {activeTab === 'color-request' && <ColorRequestSection />}
+        
         {activeTab === 'printers' && <PrintersTable />}
         
         {activeTab === 'gear' && <GearTable />}
@@ -281,12 +278,6 @@ export default function Home() {
           </div>
         </div>
       </footer>
-      
-      {/* Color Request Modal */}
-      <ColorRequestModal 
-        isOpen={showColorRequestModal}
-        onClose={() => setShowColorRequestModal(false)}
-      />
     </div>
   );
 }
\ No newline at end of file
diff --git a/src/components/ColorRequestSection.tsx b/src/components/ColorRequestSection.tsx
new file mode 100644
index 0000000..bac9653
--- /dev/null
+++ b/src/components/ColorRequestSection.tsx
@@ -0,0 +1,72 @@
+'use client';
+
+import React, { useState } from 'react';
+import ColorRequestModal from './ColorRequestModal';
+import { trackEvent } from './MatomoAnalytics';
+
+export default function ColorRequestSection() {
+  const [showModal, setShowModal] = useState(false);
+
+  return (
+    <div className="max-w-2xl mx-auto">
+      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8">
+        <div className="text-center">
+          <div className="flex justify-center mb-6">
+            <div className="p-4 bg-purple-100 dark:bg-purple-900/30 rounded-full">
+              <svg className="w-16 h-16 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
+              </svg>
+            </div>
+          </div>
+          
+          <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">
+            Zatražite Novu Boju
+          </h2>
+          
+          <p className="text-gray-600 dark:text-gray-400 mb-8 max-w-md mx-auto">
+            Ne možete pronaći boju koju tražite u našoj ponudi? 
+            Javite nam koju boju želite i mi ćemo je nabaviti za vas!
+          </p>
+
+          <div className="space-y-4">
+            <button
+              onClick={() => {
+                setShowModal(true);
+                trackEvent('Navigation', 'Request Color', 'Color Request Tab');
+              }}
+              className="inline-flex items-center gap-3 px-8 py-4 bg-gradient-to-r from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transition-all duration-200 transform hover:scale-105"
+            >
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+              </svg>
+              Pošaljite Zahtev za Boju
+            </button>
+          </div>
+
+          <div className="mt-12 grid grid-cols-1 sm:grid-cols-3 gap-6">
+            <div className="text-center">
+              <div className="text-3xl font-bold text-purple-600 dark:text-purple-400">1-3</div>
+              <div className="text-sm text-gray-600 dark:text-gray-400 mt-1">Dana za odgovor</div>
+            </div>
+            <div className="text-center">
+              <div className="text-3xl font-bold text-purple-600 dark:text-purple-400">100+</div>
+              <div className="text-sm text-gray-600 dark:text-gray-400 mt-1">Dostupnih boja</div>
+            </div>
+            <div className="text-center">
+              <div className="text-3xl font-bold text-purple-600 dark:text-purple-400">7-14</div>
+              <div className="text-sm text-gray-600 dark:text-gray-400 mt-1">Dana za nabavku</div>
+            </div>
+          </div>
+
+          <div className="mt-8 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
+            <p className="text-sm text-blue-800 dark:text-blue-300">
+              <strong>Napomena:</strong> Minimalna količina za naručivanje novih boja je 2 rolne.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <ColorRequestModal isOpen={showModal} onClose={() => setShowModal(false)} />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/TabbedNavigation.tsx b/src/components/TabbedNavigation.tsx
index d499183..e085d81 100644
--- a/src/components/TabbedNavigation.tsx
+++ b/src/components/TabbedNavigation.tsx
@@ -17,7 +17,7 @@ interface TabbedNavigationProps {
 export default function TabbedNavigation({ tabs, activeTab, onTabChange }: TabbedNavigationProps) {
   return (
     <div className="border-b border-gray-200 dark:border-gray-700">
-      <nav className="-mb-px flex space-x-8" aria-label="Tabs">
+      <nav className="-mb-px flex justify-center space-x-4 sm:space-x-8" aria-label="Tabs">
         {tabs.map((tab) => (
           <button
             key={tab.id}