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
This commit is contained in:
DaX
2025-08-29 13:22:34 +02:00
parent 2fefc805ef
commit 59304a88f4
3 changed files with 86 additions and 23 deletions

View File

@@ -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>
);
}