1d3d11afec
- Restructure from single filament table to multi-category product catalog (filamenti, stampaci, ploce, mlaznice, delovi, oprema) - Add shared layout components (SiteHeader, SiteFooter, CategoryNav, Breadcrumb) - Add reusable UI primitives (Badge, Button, Card, Modal, PriceDisplay, EmptyState) - Add catalog components (CatalogPage, ProductTable, ProductGrid, FilamentCard, ProductCard) - Add admin dashboard with sidebar navigation and category management - Add product API endpoints and database migrations - Add SEO pages (politika-privatnosti, uslovi-koriscenja, robots.txt, sitemap.xml) - Fix light mode: gradient text contrast, category nav accessibility, surface tokens, card shadows, CTA section theming
385 lines
22 KiB
TypeScript
385 lines
22 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import Link from 'next/link';
|
|
import { SiteHeader } from '@/src/components/layout/SiteHeader';
|
|
import { SiteFooter } from '@/src/components/layout/SiteFooter';
|
|
import { SaleCountdown } from '@/src/components/SaleCountdown';
|
|
import ColorRequestModal from '@/src/components/ColorRequestModal';
|
|
import { CategoryIcon } from '@/src/components/ui/CategoryIcon';
|
|
import { getEnabledCategories } from '@/src/config/categories';
|
|
import { filamentService } from '@/src/services/api';
|
|
import { Filament } from '@/src/types/filament';
|
|
import { trackEvent } from '@/src/components/MatomoAnalytics';
|
|
|
|
const KP_URL = 'https://www.kupujemprodajem.com/kompjuteri-desktop/3d-stampaci-i-oprema/originalni-bambu-lab-filamenti-na-stanju/oglas/182256246';
|
|
|
|
export default function Home() {
|
|
const [filaments, setFilaments] = useState<Filament[]>([]);
|
|
const [showColorRequestModal, setShowColorRequestModal] = useState(false);
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
const categories = getEnabledCategories();
|
|
|
|
useEffect(() => { setMounted(true); }, []);
|
|
|
|
useEffect(() => {
|
|
const fetchFilaments = async () => {
|
|
try {
|
|
const data = await filamentService.getAll();
|
|
setFilaments(data);
|
|
} catch (err) {
|
|
console.error('Failed to fetch filaments for sale check:', err);
|
|
}
|
|
};
|
|
fetchFilaments();
|
|
}, []);
|
|
|
|
const activeSaleFilaments = filaments.filter(f => f.sale_active === true);
|
|
const hasActiveSale = activeSaleFilaments.length > 0;
|
|
const maxSalePercentage = hasActiveSale
|
|
? Math.max(...activeSaleFilaments.map(f => f.sale_percentage || 0), 0)
|
|
: 0;
|
|
const saleEndDate = (() => {
|
|
const withEndDate = activeSaleFilaments.filter(f => f.sale_end_date);
|
|
if (withEndDate.length === 0) return null;
|
|
return withEndDate.reduce((latest, current) => {
|
|
if (!latest.sale_end_date) return current;
|
|
if (!current.sale_end_date) return latest;
|
|
return new Date(current.sale_end_date) > new Date(latest.sale_end_date) ? current : latest;
|
|
}).sale_end_date ?? null;
|
|
})();
|
|
|
|
return (
|
|
<div className="min-h-screen" style={{ background: 'var(--surface-primary)' }}>
|
|
<SiteHeader />
|
|
|
|
{/* ═══ HERO ═══ */}
|
|
<section className="relative overflow-hidden noise-overlay">
|
|
{/* Rich multi-layer gradient background */}
|
|
<div className="absolute inset-0 bg-gradient-to-br from-blue-950 via-purple-950 to-indigo-950" />
|
|
|
|
{/* Floating color orbs — big, bright, energetic */}
|
|
<div className="absolute inset-0 overflow-hidden" aria-hidden="true">
|
|
<div className="absolute w-[600px] h-[600px] -top-48 -left-48 rounded-full opacity-40 blur-[100px] animate-float"
|
|
style={{ background: 'radial-gradient(circle, #3b82f6, transparent)' }} />
|
|
<div className="absolute w-[500px] h-[500px] top-10 right-0 rounded-full opacity-40 blur-[80px] animate-float-slow"
|
|
style={{ background: 'radial-gradient(circle, #a855f7, transparent)' }} />
|
|
<div className="absolute w-[450px] h-[450px] -bottom-24 left-1/3 rounded-full opacity-40 blur-[90px] animate-float-delayed"
|
|
style={{ background: 'radial-gradient(circle, #f59e0b, transparent)' }} />
|
|
<div className="absolute w-[400px] h-[400px] bottom-10 right-1/4 rounded-full opacity-40 blur-[80px] animate-float"
|
|
style={{ background: 'radial-gradient(circle, #22c55e, transparent)' }} />
|
|
<div className="absolute w-[350px] h-[350px] top-1/2 left-10 rounded-full opacity-35 blur-[70px] animate-float-slow"
|
|
style={{ background: 'radial-gradient(circle, #ef4444, transparent)' }} />
|
|
<div className="absolute w-[300px] h-[300px] top-1/4 right-1/3 rounded-full opacity-35 blur-[75px] animate-float-delayed"
|
|
style={{ background: 'radial-gradient(circle, #06b6d4, transparent)' }} />
|
|
</div>
|
|
|
|
{/* Grid pattern overlay */}
|
|
<div className="absolute inset-0 opacity-[0.03]"
|
|
style={{
|
|
backgroundImage: 'linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px)',
|
|
backgroundSize: '60px 60px'
|
|
}} />
|
|
|
|
<div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 sm:py-28 lg:py-32">
|
|
<div className="flex flex-col items-center text-center reveal-up">
|
|
{/* Logo */}
|
|
<img
|
|
src="/logo.png"
|
|
alt="Filamenteka"
|
|
loading="eager"
|
|
decoding="async"
|
|
className="h-24 sm:h-32 md:h-40 w-auto drop-shadow-2xl mb-8"
|
|
onError={(e) => { (e.currentTarget as HTMLImageElement).style.display = 'none'; }}
|
|
/>
|
|
|
|
{/* Tagline */}
|
|
<h1
|
|
className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-black text-white mb-5 tracking-tight leading-[1.1]"
|
|
style={{ fontFamily: 'var(--font-display)' }}
|
|
>
|
|
Bambu Lab oprema
|
|
<br />
|
|
<span className="hero-gradient-text">
|
|
u Srbiji
|
|
</span>
|
|
</h1>
|
|
<p className="text-lg sm:text-xl text-gray-300 max-w-xl mb-10 leading-relaxed reveal-up reveal-delay-1">
|
|
Filamenti, stampaci, podloge, mlaznice, delovi i oprema.
|
|
<br className="hidden sm:block" />
|
|
Originalni proizvodi, privatna prodaja.
|
|
</p>
|
|
|
|
{/* CTA */}
|
|
<div className="flex flex-col sm:flex-row gap-3 sm:gap-4 reveal-up reveal-delay-2">
|
|
<a
|
|
href={KP_URL}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
onClick={() => trackEvent('External Link', 'Kupujem Prodajem', 'Hero CTA')}
|
|
className="group inline-flex items-center justify-center gap-2.5 px-8 py-4
|
|
bg-blue-500 hover:bg-blue-600 text-white font-bold text-base rounded-2xl
|
|
shadow-lg shadow-blue-500/25
|
|
hover:shadow-2xl hover:shadow-blue-500/35
|
|
transition-all duration-300 active:scale-[0.97]"
|
|
style={{ fontFamily: 'var(--font-display)' }}
|
|
>
|
|
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
|
|
</svg>
|
|
Kupi na KupujemProdajem
|
|
<svg className="w-4 h-4 opacity-60 group-hover:opacity-100 group-hover:translate-x-0.5 transition-all" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" />
|
|
</svg>
|
|
</a>
|
|
|
|
<a
|
|
href="tel:+381631031048"
|
|
onClick={() => trackEvent('Contact', 'Phone Call', 'Hero CTA')}
|
|
className="inline-flex items-center justify-center gap-2.5 px-8 py-4
|
|
text-white/90 hover:text-white font-semibold text-base rounded-2xl
|
|
border border-white/20 hover:border-white/40
|
|
hover:bg-white/[0.08]
|
|
transition-all duration-300 active:scale-[0.97]"
|
|
style={{ fontFamily: 'var(--font-display)' }}
|
|
>
|
|
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z" />
|
|
</svg>
|
|
+381 63 103 1048
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom fade */}
|
|
<div className="absolute bottom-0 left-0 right-0 h-24 bg-gradient-to-t from-[var(--surface-primary)] to-transparent z-10" />
|
|
</section>
|
|
|
|
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 -mt-8 relative z-20">
|
|
{/* Sale Banner */}
|
|
<SaleCountdown
|
|
hasActiveSale={hasActiveSale}
|
|
maxSalePercentage={maxSalePercentage}
|
|
saleEndDate={saleEndDate}
|
|
/>
|
|
|
|
{/* ═══ CATEGORIES ═══ */}
|
|
<section className="py-12 sm:py-16">
|
|
<div className="text-center mb-10 sm:mb-14">
|
|
<h2
|
|
className="text-4xl sm:text-5xl font-extrabold tracking-tight mb-3"
|
|
style={{ fontFamily: 'var(--font-display)', color: 'var(--text-primary)' }}
|
|
>
|
|
Sta nudimo
|
|
</h2>
|
|
<p style={{ color: 'var(--text-secondary)' }} className="text-base sm:text-lg max-w-md mx-auto">
|
|
Kompletna ponuda originalne Bambu Lab opreme
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 auto-rows-auto">
|
|
{categories.map((cat, i) => {
|
|
// First card (filamenti) is featured — spans 2 cols on lg
|
|
const isFeatured = i === 0;
|
|
// Last card spans 2 cols on sm/lg for variety
|
|
const isWide = i === categories.length - 1;
|
|
|
|
return (
|
|
<Link
|
|
key={cat.slug}
|
|
href={`/${cat.slug}`}
|
|
onClick={() => trackEvent('Navigation', 'Category Click', cat.label)}
|
|
className={`category-card group block rounded-2xl reveal-up reveal-delay-${i + 1} ${
|
|
isFeatured ? 'lg:col-span-2 lg:row-span-2' : ''
|
|
} ${isWide ? 'sm:col-span-2 lg:col-span-1' : ''}`}
|
|
style={{
|
|
background: `linear-gradient(135deg, ${cat.colorHex}, ${cat.colorHex}cc)`,
|
|
boxShadow: `0 8px 32px -8px ${cat.colorHex}35`,
|
|
}}
|
|
>
|
|
<div className={`relative z-10 ${isFeatured ? 'p-8 sm:p-10' : 'p-6 sm:p-7'}`}>
|
|
{/* SVG Icon */}
|
|
<div className={`${isFeatured ? 'w-14 h-14' : 'w-11 h-11'} bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center mb-4`}>
|
|
<CategoryIcon slug={cat.slug} className={isFeatured ? 'w-7 h-7 text-white' : 'w-5 h-5 text-white'} />
|
|
</div>
|
|
|
|
<h3 className={`${isFeatured ? 'text-2xl lg:text-3xl' : 'text-lg'} font-bold text-white tracking-tight mb-2`}
|
|
style={{ fontFamily: 'var(--font-display)' }}>
|
|
{cat.label}
|
|
</h3>
|
|
|
|
<p className={`text-white/75 ${isFeatured ? 'text-base' : 'text-sm'} leading-relaxed mb-5`}>
|
|
{cat.description}
|
|
</p>
|
|
|
|
<div className="flex items-center text-sm font-bold text-white/90 group-hover:text-white transition-colors">
|
|
Pogledaj ponudu
|
|
<svg className="w-4 h-4 ml-1.5 group-hover:translate-x-1.5 transition-transform duration-300" fill="none" viewBox="0 0 24 24" strokeWidth={2.5} stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
</section>
|
|
|
|
{/* ═══ INFO CARDS ═══ */}
|
|
<section className="pb-12 sm:pb-16">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-5">
|
|
{/* Reusable Spool Price */}
|
|
<div
|
|
className="rounded-2xl border border-l-4 p-6 sm:p-7 flex items-start gap-4 shadow-sm"
|
|
style={{ borderColor: 'var(--border-subtle)', borderLeftColor: '#3b82f6', background: 'var(--surface-elevated)' }}
|
|
>
|
|
<div className="flex-shrink-0 w-11 h-11 bg-blue-500/10 dark:bg-blue-500/15 rounded-xl flex items-center justify-center">
|
|
<svg className="w-5 h-5 text-blue-500" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h3 className="font-extrabold text-base mb-1" style={{ fontFamily: 'var(--font-display)', color: 'var(--text-primary)' }}>
|
|
Visekratna spulna
|
|
</h3>
|
|
<p className="text-sm font-medium" style={{ color: 'var(--text-secondary)' }}>
|
|
Cena visekratne spulne: <span className="font-extrabold text-blue-500">499 RSD</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Selling by Grams */}
|
|
<div
|
|
className="rounded-2xl border border-l-4 p-6 sm:p-7 flex items-start gap-4 shadow-sm"
|
|
style={{ borderColor: 'var(--border-subtle)', borderLeftColor: '#10b981', background: 'var(--surface-elevated)' }}
|
|
>
|
|
<div className="flex-shrink-0 w-11 h-11 bg-emerald-500/10 dark:bg-emerald-500/15 rounded-xl flex items-center justify-center">
|
|
<svg className="w-5 h-5 text-emerald-500" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M12 3v17.25m0 0c-1.472 0-2.882.265-4.185.75M12 20.25c1.472 0 2.882.265 4.185.75M18.75 4.97A48.416 48.416 0 0 0 12 4.5c-2.291 0-4.545.16-6.75.47m13.5 0c1.01.143 2.01.317 3 .52m-3-.52 2.62 10.726c.122.499-.106 1.028-.589 1.202a5.988 5.988 0 0 1-2.031.352 5.988 5.988 0 0 1-2.031-.352c-.483-.174-.711-.703-.59-1.202L18.75 4.971Zm-16.5.52c.99-.203 1.99-.377 3-.52m0 0 2.62 10.726c.122.499-.106 1.028-.589 1.202a5.989 5.989 0 0 1-2.031.352 5.989 5.989 0 0 1-2.031-.352c-.483-.174-.711-.703-.59-1.202L5.25 4.971Z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h3 className="font-extrabold text-base mb-1.5" style={{ fontFamily: 'var(--font-display)', color: 'var(--text-primary)' }}>
|
|
Prodaja na grame
|
|
</h3>
|
|
<p className="text-sm font-medium mb-2.5" style={{ color: 'var(--text-secondary)' }}>
|
|
Idealno za testiranje materijala ili manje projekte.
|
|
</p>
|
|
<div className="flex flex-wrap gap-2">
|
|
{[
|
|
{ g: '50g', price: '299' },
|
|
{ g: '100g', price: '499' },
|
|
{ g: '200g', price: '949' },
|
|
].map(({ g, price }) => (
|
|
<span key={g} className="inline-flex items-center gap-1 px-2.5 py-1 rounded-lg text-xs font-bold bg-emerald-500/10 dark:bg-emerald-500/15 text-emerald-600 dark:text-emerald-400">
|
|
{g} — {price} RSD
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ═══ DISCLAIMER ═══ */}
|
|
<section className="pb-12 sm:pb-16">
|
|
<div className="rounded-2xl border border-amber-200/60 dark:border-amber-500/20 bg-amber-50/50 dark:bg-amber-500/[0.06] p-5 sm:p-6">
|
|
<div className="flex items-start gap-3">
|
|
<div className="flex-shrink-0 w-9 h-9 bg-amber-400/20 dark:bg-amber-500/15 rounded-lg flex items-center justify-center mt-0.5">
|
|
<svg className="w-5 h-5 text-amber-600 dark:text-amber-400" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
|
|
</svg>
|
|
</div>
|
|
<p className="text-sm leading-relaxed text-amber-900 dark:text-amber-200/80">
|
|
Ovo je privatna prodaja fizickog lica. Filamenteka nije registrovana prodavnica.
|
|
Sva kupovina se odvija preko KupujemProdajem platforme.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ═══ CONTACT CTA ═══ */}
|
|
<section className="pb-16 sm:pb-20">
|
|
<div className="relative overflow-hidden rounded-3xl bg-gradient-to-br from-slate-100 via-slate-50 to-blue-50 dark:bg-none dark:from-transparent dark:via-transparent dark:to-transparent dark:bg-[#0f172a] dark:noise-overlay border border-slate-200/80 dark:border-transparent">
|
|
<div className="relative z-10 p-8 sm:p-12 lg:p-14 text-center">
|
|
<h2
|
|
className="text-2xl sm:text-3xl lg:text-4xl font-extrabold mb-3 tracking-tight"
|
|
style={{ fontFamily: 'var(--font-display)', color: 'var(--text-primary)' }}
|
|
>
|
|
Zainteresovani?
|
|
</h2>
|
|
<p className="mb-8 max-w-md mx-auto text-base" style={{ color: 'var(--text-muted)' }}>
|
|
Pogledajte ponudu na KupujemProdajem ili nas kontaktirajte direktno.
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row justify-center items-center gap-3 sm:gap-4">
|
|
<a
|
|
href={KP_URL}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
onClick={() => trackEvent('External Link', 'Kupujem Prodajem', 'Contact CTA')}
|
|
className="group inline-flex items-center gap-2.5 px-7 py-3.5
|
|
bg-blue-500 hover:bg-blue-600 text-white
|
|
font-bold rounded-xl
|
|
shadow-lg shadow-blue-500/25
|
|
hover:shadow-xl hover:shadow-blue-500/35
|
|
transition-all duration-300 active:scale-[0.97]"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
|
|
</svg>
|
|
Kupi na KupujemProdajem
|
|
<svg className="w-4 h-4 opacity-50 group-hover:opacity-100 group-hover:translate-x-0.5 transition-all" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" />
|
|
</svg>
|
|
</a>
|
|
|
|
<a
|
|
href="tel:+381631031048"
|
|
onClick={() => trackEvent('Contact', 'Phone Call', 'Contact CTA')}
|
|
className="inline-flex items-center gap-2.5 px-7 py-3.5
|
|
font-semibold rounded-xl
|
|
text-slate-700 dark:text-white/90 hover:text-slate-900 dark:hover:text-white
|
|
border border-slate-300 dark:border-white/25 hover:border-slate-400 dark:hover:border-white/50
|
|
hover:bg-slate-50 dark:hover:bg-white/[0.1]
|
|
transition-all duration-300 active:scale-[0.97]"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z" />
|
|
</svg>
|
|
+381 63 103 1048
|
|
</a>
|
|
</div>
|
|
|
|
{/* Color Request */}
|
|
<div className="mt-6">
|
|
<button
|
|
onClick={() => {
|
|
setShowColorRequestModal(true);
|
|
trackEvent('Navigation', 'Request Color', 'Contact CTA');
|
|
}}
|
|
className="inline-flex items-center gap-2 text-sm font-medium transition-colors duration-200 text-slate-500 hover:text-slate-800 dark:text-white/70 dark:hover:text-white"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M4.098 19.902a3.75 3.75 0 0 0 5.304 0l6.401-6.402M6.75 21A3.75 3.75 0 0 1 3 17.25V4.125C3 3.504 3.504 3 4.125 3h5.25c.621 0 1.125.504 1.125 1.125v4.072M6.75 21a3.75 3.75 0 0 0 3.75-3.75V8.197M6.75 21h13.125c.621 0 1.125-.504 1.125-1.125v-5.25c0-.621-.504-1.125-1.125-1.125h-4.072M10.5 8.197l2.88-2.88c.438-.439 1.15-.439 1.59 0l3.712 3.713c.44.44.44 1.152 0 1.59l-2.879 2.88M6.75 17.25h.008v.008H6.75v-.008Z" />
|
|
</svg>
|
|
Ne nalazite boju? Zatrazite novu
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<SiteFooter />
|
|
|
|
<ColorRequestModal
|
|
isOpen={showColorRequestModal}
|
|
onClose={() => setShowColorRequestModal(false)}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|