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:
35
app/page.tsx
35
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user