1<!DOCTYPE html> 2<html lang="sr"> 3 4<head> 5 <meta charset="utf-8" /> 6 <meta name="viewport" 7 content="width=device-width,initial-scale=1" /> 8 9
9<script> 10 window.dataLayer = window.dataLayer || []; 11 12 function gtag() { 13 dataLayer.push(arguments); 14 } 15 gtag('consent', 'default', { 16 'analytics_storage': 'denied', 17 'ad_storage': 'denied', 18 'ad_user_data': 'denied', 19 'ad_personalization': 'denied' 20 }); 21 // Optional: mark an event in the DL 22 window.dataLayer.push({ 23 event: 'default_consent_set' 24 }); 25 </script>
25 26 27 28 29
29<script>
vendor: 642 bytes, lines 29-42
29 30 (function(w, d, s, l, i) { 31 w[l] = w[l] || []; 32 w[l].push({ 33 'gtm.start': new Date().getTime(), 34 event: 'gtm.js' 35 }); 36 var f = d.getElementsByTagName(s)[0], 37 j = d.createElement(s), 38 dl = l != 'dataLayer' ? '&l=' + l : ''; 39 j.async = true; 40 j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; 41 f.parentNode.insertBefore(j, f); 42 })(window, document, 'script', 'dataLayer', '
42GTM-WD8FRVVN
vendor: 16 bytes, lines 42-43
42'); 43
43</script>
43 44 45 46 <title>Kontakti - Novosadski sajam</title> 47<meta name="description" 48 content="Sekcije i službe Novosadskog Sajma."> 49 50 51 52<link rel="canonical" 53 href="https://sajam.net/sr/kontakt"> 54 55 56 <link rel="alternate" 57 href="https://sajam.net/sr/kontakt" 58 hreflang="sr"> 59 <link rel="alternate" 60 href="https://sajam.net/en/kontakt" 61 hreflang="en"> 62 <link rel="alternate" 63 href="https://sajam.net" 64 hreflang="x-default"> 65 66 67<meta property="og:title" 68 content="Kontakti - Novosadski sajam"> 69<meta property="og:description" 70 content="Sekcije i službe Novosadskog Sajma."> 71<meta property="og:url" 72 content="https://sajam.net/sr/kontakt"> 73<meta property="og:type" 74 content="website"> 75<meta property="og:image" 76 content="https://sajam.net/images/meta/novi-sad-sajam-ogimage.webp"> 77<meta property="og:site_name" 78 content="Novosadski sajam"> 79 80 81<meta name="twitter:card" 82 content="summary_large_image"> 83<meta name="twitter:title" 84 content="Kontakti - Novosadski sajam"> 85<meta name="twitter:description" 86 content="Sekcije i službe Novosadskog Sajma."> 87<meta name="twitter:image" 88 content="https://sajam.net/images/meta/novi-sad-sajam-ogimage.webp"> 89 90 <link rel="icon" 91 type="image/png" 92 href="/favicon-96x96.png?v=2" 93 sizes="96x96" /> 94 <link rel="icon" 95 type="image/svg+xml" 96 href="/favicon.svg?v=2" /> 97 <link rel="shortcut icon" 98 href="/favicon.ico?v=2" /> 99 <link rel="apple-touch-icon" 100 sizes="180x180" 101 href="/apple-touch-icon.png" /> 102 <meta name="apple-mobile-web-app-title" 103 content="Sajam Novi Sad" /> 104 <link rel="manifest" 105 href="/site.webmanifest" /> 106 107 108 <link rel="preload" 109 as="font" 110 type="font/woff" 111 crossorigin 112 href="https://cdn.jsdelivr.net/gh/repalash/gilroy-free-webfont@fonts/Gilroy-Extrabold.woff"> 113 <link rel="preload" 114 as="font" 115 type="font/woff2" 116 crossorigin 117 href="https://cdn.jsdelivr.net/fontsource/fonts/ubuntu@latest/latin-ext-400-normal.woff2"> 118 119 120 <link rel="preload" 121 as="style" 122 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" 123 onload="this.onload=null;this.rel='stylesheet'"> 124 125 126 127 <noscript> 128 <link rel="stylesheet" 129 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"> 130 </noscript> 131 132 133 <link rel="preload" as="style" href="https://sajam.net/build/assets/app-BD8hPv1o.css" /><link rel="modulepreload" as="script" href="https://sajam.net/build/assets/app-BdEWrCYM.js" /><link rel="stylesheet" href="https://sajam.net/build/assets/app-BD8hPv1o.css" data-navigate-track="reload" />
133<script type="module" src="https://sajam.net/build/assets/app-BdEWrCYM.js" data-navigate-track="reload"></script>
133
133<script type="application/ld+json">{ 134 "@context": "https://schema.org", 135 "@graph": [ 136 { 137 "@type": "LocalBusiness", 138 "@id": "https://sajam.net/#organization", 139 "name": "Novosadski Sajam", 140 "alternateName": "Novi Sad Fair", 141 "url": "https://sajam.net", 142 "logo": { 143 "@type": "ImageObject", 144 "@id": "https://sajam.net/images/meta/logo-512.png#logo", 145 "url": "https://sajam.net/images/meta/logo-512.png" 146 }, 147 "telephone": "+381214830000", 148 "email": "[email protected]", 149 "address": { 150 "@type": "PostalAddress", 151 "streetAddress": "Hajduk Veljkova 11", 152 "addressLocality": "Novi Sad", 153 "postalCode": "21137", 154 "addressCountry": "RS" 155 }, 156 "openingHoursSpecification": [ 157 { 158 "@type": "OpeningHoursSpecification", 159 "dayOfWeek": "Monday", 160 "opens": "09:00", 161 "closes": "20:00" 162 }, 163 { 164 "@type": "OpeningHoursSpecification", 165 "dayOfWeek": "Tuesday", 166 "opens": "09:00", 167 "closes": "20:00" 168 }, 169 { 170 "@type": "OpeningHoursSpecification", 171 "dayOfWeek": "Wednesday", 172 "opens": "09:00", 173 "closes": "20:00" 174 }, 175 { 176 "@type": "OpeningHoursSpecification", 177 "dayOfWeek": "Thursday", 178 "opens": "09:00", 179 "closes": "20:00" 180 }, 181 { 182 "@type": "OpeningHoursSpecification", 183 "dayOfWeek": "Friday", 184 "opens": "09:00", 185 "closes": "20:00" 186 }, 187 { 188 "@type": "OpeningHoursSpecification", 189 "dayOfWeek": "Saturday", 190 "opens": "10:00", 191 "closes": "18:00" 192 }, 193 { 194 "@type": "OpeningHoursSpecification", 195 "dayOfWeek": "Sunday", 196 "opens": "10:00", 197 "closes": "18:00" 198 } 199 ], 200 "sameAs": [ 201 "https://www.facebook.com/novosadskisajam", 202 "https://www.instagram.com/novosadskisajam", 203 "https://www.linkedin.com/company/novosadski-sajam" 204 ], 205 "description": "Novosadski sajam je najveÄi sajamski centar u Srbiji i regionu - domaÄin meÄunarodnih sajmova, kongresa i poslovnih dogaÄaja.", 206 "contactPoint": [ 207 { 208 "@type": "ContactPoint", 209 "telephone": "+381214830000", 210 "contactType": "customer service", 211 "areaServed": "RS", 212 "availableLanguage": [ 213 "Serbian", 214 "English" 215 ] 216 }, 217 { 218 "@type": "ContactPoint", 219 "email": "[email protected]", 220 "contactType": "customer support", 221 "areaServed": "RS", 222 "availableLanguage": [ 223 "Serbian", 224 "English" 225 ] 226 } 227 ] 228 }, 229 { 230 "@type": "WebPage", 231 "@id": "https://sajam.net/sr/kontakt#webpage", 232 "url": "https://sajam.net/sr/kontakt", 233 "name": "Kontakti - Novosadski sajam", 234 "description": "Sekcije i službe Novosadskog Sajma.", 235 "isPartOf": { 236 "@id": "https://sajam.net/#website" 237 }, 238 "inLanguage": "sr" 239 } 240 ] 241}</script>
241 242 243 <style> 244 [x-cloak] { 245 display: none !important 246 } 247 248 .nav-boot { 249 visibility: hidden 250 } 251 252 .no-anchor { 253 overflow-anchor: none 254 } 255 </style> 256 <!-- Meta Pixel Code --> 257
257<script>
vendor: 678 bytes, lines 257-276
257 258 ! function(f, b, e, v, n, t, s) { 259 if (f.fbq) return; 260 n = f.fbq = function() { 261 n.callMethod ? 262 n.callMethod.apply(n, arguments) : n.queue.push(arguments) 263 }; 264 if (!f._fbq) f._fbq = n; 265 n.push = n; 266 n.loaded = !0; 267 n.version = '2.0'; 268 n.queue = []; 269 t = b.createElement(e); 270 t.async = !0; 271 t.src = v; 272 s = b.getElementsByTagName(e)[0]; 273 s.parentNode.insertBefore(t, s) 274 }(window, document, 'script', 275 'https://connect.facebook.net/en_US/fbevents.js'); 276 fbq('init', '
2761807435069933811
vendor: 42 bytes, lines 276-278
276'); 277 fbq('track', 'PageView'); 278
278</script>
278 279 <noscript><img height="1" 280 width="1" 281 style="display:none" 282 src="https://www.facebook.com/tr?id=1807435069933811&ev=PageView&noscript=1" /></noscript> 283 <!-- End Meta Pixel Code --> 284</head> 285 286<body class="font-body antialiased bg-white text-gray-900">
vendor: 102 bytes, lines 286-289
286 287 288 <noscript> 289 <iframe src="https://www.googletagmanager.com/ns.html?id=
289GTM-WD8FRVVN
vendor: 161 bytes, lines 289-295
289" 290 height="0" 291 width="0" 292 style="display:none;visibility:hidden"></iframe> 293 </noscript> 294 295
295<header id="site-header" 296 x-data 297 class="no-anchor top-0 inset-x-0 z-50" 298 :class="(Alpine.store('header')?.overlay ?? false) ? 'fixed' : 'sticky'"> 299 <nav x-data="{ mobileOpen: false, boot: true }" 300 x-init="requestAnimationFrame(() => boot = false)" 301 x-effect="document.body.classList.toggle('overflow-hidden', mobileOpen)" 302 :class="boot ? 'nav-boot' : ''" 303 class="w-full text-white"> 304 305 <div class="hidden md:block overflow-hidden transition-[max-height,background] duration-200 ease-out bg-black border-y-2 border-black" 306 :class="(Alpine.store('header')?.topbar?.hidden ?? false) ? 'max-h-0 bg-black' : 'max-h-12 bg-black'" 307 x-cloak> 308 <div class="max-w-7xl mx-auto px-6"> 309 <div class="flex items-center justify-end gap-4 text-[11px] font-bold tracking-wide py-2"> 310 311 <div x-data="langTabs('sr', { sr: 'https:\/\/sajam.net\/sr\/kontakt', en: 'https:\/\/sajam.net\/en\/contact' })" 312 class="inline-flex items-center rounded-sm bg-none backdrop-blur px-2 py-1 shadow ring-1 ring-black/5" 313 role="tablist" 314 x-cloak 315 aria-label="Language switcher"> 316 <i class="fa-solid fa-language text-gray-100 mr-2"></i> 317 <div class="relative grid grid-cols-2 gap-1"> 318 <span class="absolute inset-y-0 left-0 w-1/2 rounded-xs bg-white shadow transition-transform duration-200" 319 :style="`transform: translateX(${active === 'en' ? '100%' : '0%'})`" 320 aria-hidden="true"></span> 321 <button type="button" 322 class="relative z-10 px-3 py-1 text-xs font-bold rounded-xl transition-colors" 323 :class="active === 'sr' ? 'text-gray-900' : 'text-gray-100 hover:text-gray-700'" 324 role="tab" 325 :aria-selected="active === 'sr'" 326 @click="switchTo('sr')">ð·ð¸ SR</button> 327 <button type="button" 328 class="relative z-10 px-3 py-1 text-xs font-bold rounded-xs transition-colors" 329 :class="active === 'en' ? 'text-gray-900' : 'text-gray-100 hover:text-gray-700'" 330 role="tab" 331 :aria-selected="active === 'en'" 332 @click="switchTo('en')">ð¬ð§ EN</button> 333 </div> 334 </div> 335 336 <span class="opacity-40">|</span> 337 <a href="https://sajam.net/sr/kalendar" 338 class="hover:underline">Kalendar dogaÄaja</a> 339 <a href="https://sajam.net/sr/izlagaci/prijave" 340 class="hover:underline">Prijave za izlagaÄe</a> 341 <a href="https://sajam.net/sr/kontakt" 342 class="hover:underline">Kontaktirajte nas</a> 343 </div> 344 </div> 345 </div> 346 347 348 <div class="transition-colors duration-300 border-b bg-black/50 border-white/0" 349 :class="(Alpine.store('header')?.overlay ?? false) ? 350 ((Alpine.store('header')?.scrolled ?? false) ? 351 'bg-black/90 border-white/10 backdrop-blur' : 352 'bg-transparent border-transparent') : 353 'bg-gray-900 border-white/10 backdrop-blur'" 354 x-cloak> 355 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> 356 <div class="flex items-center justify-between gap-4 transition-[padding] duration-300" 357 :class="(Alpine.store('header')?.scrolled ?? false) ? 'py-2' : 'py-3 sm:py-4'"> 358 359 360 <a href="https://sajam.net/sr" 361 class="relative inline-flex items-center"> 362 <div class="absolute -inset-1 -skew-x-12 rounded-[2px]" 363 :class="(Alpine.store('header')?.scrolled ?? false) ? 'bg-brand-600/10' : 364 'bg-brand-500'"> 365 </div> 366 367 <svg class="relative z-10 block h-14 w-auto transition-all duration-300 text-white" 368 :class="(Alpine.store('header')?.scrolled ?? false) ? '!h-10 text-white' : ''" 369 role="img"
370 aria-label="Novosadski Sajam" 371 viewBox="0 0 126.41 126.45" 372 xmlns="http://www.w3.org/2000/svg" 373 preserveAspectRatio="xMidYMid meet" 374 fill="currentColor"> 375 <g fill="#fff" 376 fill-rule="evenodd"> 377 <path d="m0 0-.06.03-.79.48-.8.54-.48.37C-1.43-.37-.76-1.85.09-3.52l.1-.23.17-.11 1.49-.66.3-.14.15-.06A59 59 0 0 0 .09-.22zm11.64 60.8-.14-.03-.17-.06-.3-.08-.24-.06V47.64l.26-.05.31-.09.14-.05.18-.03.34-.07.2-.02v13.55l-.24-.03ZM11.5-3.55l-.5.03-.2.03v-1.9l.28.05.34.09.08.02.26.06.29.09.17.02v1.45l-.2.03zm11.37 1.93-.51-.2-.26-.09q-.69-1.39-1.42-2.75l.31-.08.4-.14.4-.12.25-.11c.12.2.2.4.32.6q.9 1.7 1.68 3.43L24-1.11zm28.5 9.1q-3.94 1.2-7.99 2.1l-.99.23q.54 1.34 1 2.72a51 51 0 0 1 2.37 14.55h10.46a45 45 0 0 0-4.85-19.6m-7.99-11.1a45 45 0 0 0-10.99-8.2 94 94 0 0 1-3.1 1.36q-.72.3-1.48.6.77.6 1.47 1.2A47 47 0 0 1 41.85 8.48q.76-.15 1.53-.36c2.48-.57 4.92-1.23 7.3-1.9a46 46 0 0 0-7.3-9.84m-14.1-9.71a44 44 0 0 0-13.34-3.47q3.4 1.4 6.42 3.18l.79.49-.43.2-.36.17-.34.16-.32.12-.11.06a51 51 0 0 0-7.27-3.5 52 52 0 0 1 3.64 4.37h-.3l-.3.03h-.66l-.3-.03h-.24q-1.36-1.78-2.89-3.4a5 5 0 0 1-1.05.37v2.1l-.03-.03-.37-.09-.32-.08h-.05l-.37-.12-.29-.05v-1.73c-.36-.1-.73-.2-1.05-.38q-.81.84-1.59 1.76l-.34-.02h-.74l-.36.02-.38.04h-.05a36 36 0 0 1 2.44-2.79 49 49 0 0 0-10.6 5.63c.66.23 1.32.4 1.97.6l.27.08v1.45L.1-8.23A53 53 0 0 1-3.27-9.3q-1.61 1.21-3.06 2.56A46 46 0 0 0-17.46 8.78c2.57.54 5.22 1.03 7.85 1.42l-.07.14-.4.85-.18.34q-3.9-.6-7.78-1.41a48 48 0 0 0-3.35 16.96h1.64l-.02.14-.1.22-.04.23-.07.23-.05.17-.03.2-.05.17v.03h-1.28q0 2.04.23 4.03l-.03.03-.14.26-.15.25-.13.26-.12.25-.12.29-.11.25-.1.28-.13.3-.08.28-.03.03q-.47-3.25-.51-6.51h-10.43A44 44 0 0 0-28.38 48c.68-.22 1.36-.39 2.05-.6q3.4-.92 6.86-1.72a50 50 0 0 1-2.12-6.97h1.45a47 47 0 0 0 2.1 6.68c3.83-.8 7.76-1.45 11.7-1.93.31-.03.66-.09.97-.11a60 60 0 0 1-.85-4.64h1.45q.33 2.26.79 4.5c1.37-.15 2.7-.3 4.07-.4q1.88-.15 3.8-.23l-.26.2-.53.45-.51.48-.34.37q-1.1.08-2.16.14-1.88.17-3.72.37a65 65 0 0 0 2.1 7.08l-.06.2-.1.74-.04.76-.03.74.03.77.04.28a65 65 0 0 1-3.37-10.43q-.63.08-1.27.15-5.65.7-11.17 1.85A45.4 45.4 0 0 0-3.3 64.8c1.14-.36 2.25-.73 3.39-1.02q.71-.21 1.47-.36l.08.1.47.52.48.5.05.06q-1.27.28-2.55.66-1 .25-2 .6.99.67 2 1.3 3.91 2.49 8.6 4.3a51 51 0 0 1-4.48-5.5l.56.4.6.4.62.35.63.3.65.32.09.03q1.12 1.4 2.35 2.7c.31-.18.72-.31 1.08-.37v-1.37l.71.09.72.06v1.19q.6.1 1.07.4.8-.82 1.51-1.68l.23-.03.65-.1.65-.15.63-.17h.06a80 80 0 0 1-2.7 3.15 53 53 0 0 0 8.04-3.98q1.28-.8 2.53-1.65c-.8-.25-1.54-.48-2.3-.68l.4-.4.44-.45.3-.31q1.27.38 2.55.8a45.6 45.6 0 0 0 14.17-18.06c-3.68-.79-7.4-1.38-11.17-1.86q-.63-.08-1.27-.15a68 68 0 0 1-2.07 7.11l-.09-.09-.28-.17-.31-.14-.28-.11-.32-.12a57 57 0 0 0 1.93-6.62q-.94-.11-1.87-.2l.39-.2 1.05-.62.63-.4q.07.02.12.03.03-.07.02-.11l.29-.17.99-.71.43-.34-.31 1.48q.5.05.95.1Q35.2 44.2 41 45.4a49 49 0 0 0 2.4-7.98q.88-4.42.95-8.95h-6.76l.06-.26.29-1.13h6.42a48 48 0 0 0-.97-9.01A49 49 0 0 0 41 10.12q-2.48.5-4.94.93l-.1-.23-.59-1.08q2.56-.42 5.06-.96A45 45 0 0 0 26.25-9.29q-1.02.35-2.05.65v-1.47c.24-.06.43-.12.66-.2l-.62-.43.02-1.7q1.15.75 2.22 1.56a51 51 0 0 0 4.28-1.76q-.7-.35-1.48-.68M.08-15.54a44 44 0 0 0-7.9 2.92q.75.33 1.49.66 1.4.59 2.8 1.08a49.85 49.85 0 0 1 10.59-5.91Q3.5-16.45.1-15.54M-26.33 3.9q-.74 1.14-1.37 2.33l1.36.4q3.69 1.02 7.45 1.87A47 47 0 0 1-6.33-8.64q.74-.63 1.47-1.22c-.48-.2-.96-.37-1.47-.6q-1.53-.6-3.07-1.36A45.4 45.4 0 0 0-26.34 3.9m-6.9 23.19h10.43a49 49 0 0 1 3.38-17.25 169 169 0 0 1-6.9-1.73l-2.05-.6a44 44 0 0 0-4.86 19.58m6.9 24.48a45 45 0 0 0 17 15.72c.98-.49 2.01-.92 3-1.34q.73-.3 1.45-.54l-1.44-1.2a47 47 0 0 1-12.6-17.15q-3.74.79-7.4 1.85-.7.16-1.37.4.64 1.15 1.36 2.26m20 17.2a45 45 0 0 0 13.07 3.46A51 51 0 0 1-3.58 66.4q-1.36.5-2.75 1.08-.7.31-1.43.62.72.35 1.43.66m28.69 2.38q3.59-.91 6.92-2.36c.5-.23.98-.42 1.43-.65a19 19 0 0 0-1.43-.65q-1.38-.56-2.77-1.08-1.96 1.48-4.15 2.75a52 52 0 0 1-6.1 3.07q3.1-.35 6.1-1.08m21.02-12.08a46 46 0 0 0 7.3-9.77 125 125 0 0 0-8.83-2.24A47 47 0 0 1 29.28 64.2c-.48.4-.92.8-1.44 1.2q.73.25 1.44.56 1.51.61 3.05 1.33a46 46 0 0 0 11.05-8.24m12.84-30.6H45.77a50 50 0 0 1-2.39 14.52q-.45 1.38-.99 2.7.5.15 1 .23 4.05.94 7.98 2.1a44.4 44.4 0 0 0 4.85-19.54M43.38 62.76a47.3 47.3 0 0 1-31.64 12.39h-.52A48 48 0 0 1 .1 73.75a47.83 47.83 0 0 1-26.42-17.5 47.2 47.2
3770 0 1 0-57.02A47.7 47.7 0 0 1 .09-18.3a47.3 47.3 0 0 1 43.3 11 47.4 47.4 0 0 1 15.5 35.08c0 13.81-6 26.31-15.5 34.98" 378 transform="matrix(1.33 0 0 -1.33 47.88 100.2)" /> 379 <path d="M0 0a13 13 0 0 1-10.37.97l-.72-.26c-3.71-.97-7.43-.9-11.13.77v-5.71c3.75-1.9 7.42-1.93 11.13-.77q.37.16.72.29C-7.05-3.63-3.55-3.9.06-5.77L0-2.78Zm4.03 17.16a19 19 0 0 0-3.86-3.72v30.03a19 19 0 0 0 3.86-3.72 18.3 18.3 0 0 0 3.9-11.28c0-4.27-1.45-8.18-3.9-11.3m-14.4-7.09a18.4 18.4 0 0 0-10 3h5.71v18.06l4.3-9.06 4.22-9H-.4a18 18 0 0 0-9.97-3m-10.6 3.42a18.5 18.5 0 0 0-7.72 14.97c0 4.15 1.39 8.32 3.86 11.53a15 15 0 0 0 3.86 3.61zm25 34.88a24.3 24.3 0 0 1-14.35 4.7h-.05a7.64 7.64 0 0 0 0 15.28c3.95 0 7.25-3.1 7.6-6.94.25-3.35 4.67-4.03 6-.8.2.52.27 1.32.12 2.14C2.02 69.38-3.38 74.7-10.37 74.7a14 14 0 0 1-13.95-13.95c0-7.67 6.28-13.89 13.95-13.89 3.24-.03 6.3-.88 8.95-2.38h-4.66V26.25l-4.29 9.15-4.29 9.12H-45.8c.74-2.16 1.74-6.45 3.87-6.4 3.58.07 5.37 0 8.91.07-.42-.94-.7-1.9-1.01-2.85h-8.7c.28-1.39 1.73-6.27 3.02-6.3h4.68v-.57c0-.8 0-1.5.11-2.22h-4.94c.71-2.13 1.77-6.34 3.4-6.39h3a24.6 24.6 0 0 1 8.63-11.34 24.3 24.3 0 0 1 14.46-4.71c5.34 0 10.34 1.73 14.4 4.68a24.6 24.6 0 0 1 10.23 19.98c0 8.18-4.06 15.45-10.23 19.91" 380 transform="matrix(1.33 0 0 -1.33 79.1 109.06)" /> 381 </g> 382</svg> 383 </a> 384 385 <div class="hidden md:flex flex-1 justify-center" 386 x-data="{ 387 activeMenu: null, 388 open: false, 389 prefetch(url) { 390 const l = document.createElement('link'); 391 l.rel = 'prefetch'; 392 l.as = 'image'; 393 l.href = url; 394 document.head.appendChild(l); 395 }, 396 onceLoaded: new Set(), 397 ensure(key, url) { 398 if (this.onceLoaded.has(key)) return; 399 const el = this.$root.querySelector(`img[data-mega='${key}']`); 400 if (el && !el.dataset.loaded) { 401 el.src = url; 402 el.dataset.loaded = '1'; 403 this.onceLoaded.add(key); 404 } 405 } 406 }" 407 x-cloak 408 x-ref="navArea"> 409 <div class="relative flex items-center gap-6 whitespace-nowrap text-sm font-extrabold"> 410 411 <button class="flex items-center gap-1 hover:text-brand-400 transition cursor-pointer" 412 :class="{ 'text-brand-400': activeMenu === 'fairs' && open }" 413 @mouseenter="prefetch('https://sajam.net/storage/static/mega-menu/mega-sajmovi.webp')" 414 @click=" 415 open = (activeMenu === 'fairs' ? !open : true); 416 activeMenu = 'fairs'; 417 ensure('fairs', 'https://sajam.net/storage/static/mega-menu/mega-sajmovi.webp'); 418 " 419 > 420 <span>Sajmovi</span> 421 <i class="fa-solid fa-chevron-down text-[10px] opacity-80"></i> 422 </button> 423 <button class="flex items-center gap-1 hover:text-brand-400 transition cursor-pointer" 424 :class="{ 'text-brand-400': activeMenu === 'exhibitors' && open }" 425 @mouseenter="prefetch('https://sajam.net/storage/static/mega-menu/mega-izlagaci.webp')" 426 @click=" 427 open = (activeMenu === 'exhibitors' ? !open : true); 428 activeMenu = 'exhibitors'; 429 ensure('exhibitors', 'https://sajam.net/storage/static/mega-menu/mega-izlagaci.webp'); 430 " 431 >
432 <span>IzlagaÄi</span> 433 <i class="fa-solid fa-chevron-down text-[10px] opacity-80"></i> 434 </button> 435 <button class="flex items-center gap-1 hover:text-brand-400 transition cursor-pointer" 436 :class="{ 'text-brand-400': activeMenu === 'visitors' && open }" 437 @mouseenter="prefetch('https://sajam.net/storage/static/mega-menu/mega-posetioci.webp')" 438 @click=" 439 open = (activeMenu === 'visitors' ? !open : true); 440 activeMenu = 'visitors'; 441 ensure('visitors', 'https://sajam.net/storage/static/mega-menu/mega-posetioci.webp'); 442 " 443 > 444 <span>Posetioci</span> 445 <i class="fa-solid fa-chevron-down text-[10px] opacity-80"></i> 446 </button> 447 <button class="flex items-center gap-1 hover:text-brand-400 transition cursor-pointer" 448 :class="{ 'text-brand-400': activeMenu === 'congress' && open }" 449 @mouseenter="prefetch('https://sajam.net/storage/static/mega-menu/mega-kongres.webp')" 450 @click=" 451 open = (activeMenu === 'congress' ? !open : true); 452 activeMenu = 'congress'; 453 ensure('congress', 'https://sajam.net/storage/static/mega-menu/mega-kongres.webp'); 454 " 455 > 456 <span>Kongresni Centar âMaster"</span> 457 <i class="fa-solid fa-chevron-down text-[10px] opacity-80"></i> 458 </button> 459 <button class="flex items-center gap-1 hover:text-brand-400 transition cursor-pointer" 460 :class="{ 'text-brand-400': activeMenu === 'press' && open }" 461 @mouseenter="prefetch('https://sajam.net/storage/static/mega-menu/mega-press.webp')" 462 @click=" 463 open = (activeMenu === 'press' ? !open : true); 464 activeMenu = 'press'; 465 ensure('press', 'https://sajam.net/storage/static/mega-menu/mega-press.webp'); 466 " 467 > 468 <span>Press</span> 469 <i class="fa-solid fa-chevron-down text-[10px] opacity-80"></i> 470 </button> 471 <button class="flex items-center gap-1 hover:text-brand-400 transition cursor-pointer" 472 :class="{ 'text-brand-400': activeMenu === 'calendar' && open }" 473 @mouseenter="prefetch('https://sajam.net/storage/static/mega-menu/mega-kalendar.webp')" 474 @click=" 475 open = (activeMenu === 'calendar' ? !open : true); 476 activeMenu = 'calendar'; 477 ensure('calendar', 'https://sajam.net/storage/static/mega-menu/mega-kalendar.webp'); 478 " 479 > 480 <span>Kalendar</span> 481 <i class="fa-solid fa-chevron-down text-[10px] opacity-80"></i> 482 </button> 483 <button class="flex items-center gap-1 hover:text-brand-400 transition cursor-pointer" 484 :class="{ 'text-brand-400': activeMenu === 'about' && open }" 485 @mouseenter="prefetch('https://sajam.net/storage/static/mega-menu/mega-about.webp')" 486 @click=" 487 open = (activeMenu === 'about' ? !open : true); 488 activeMenu = 'about'; 489 ensure('about', 'https://sajam.net/storage/static/mega-menu/mega-about.webp'); 490 " 491 >
492 <span>O Sajmu</span> 493 <i class="fa-solid fa-chevron-down text-[10px] opacity-80"></i> 494 </button> 495 <button class="flex items-center gap-1 hover:text-brand-400 transition cursor-pointer" 496 :class="{ 'text-brand-400': activeMenu === 'contact' && open }" 497 @mouseenter="prefetch('https://sajam.net/storage/static/mega-menu/mega-contact.webp')" 498 @click=" 499 open = (activeMenu === 'contact' ? !open : true); 500 activeMenu = 'contact'; 501 ensure('contact', 'https://sajam.net/storage/static/mega-menu/mega-contact.webp'); 502 " 503 > 504 <span>Kontakt</span> 505 <i class="fa-solid fa-chevron-down text-[10px] opacity-80"></i> 506 </button> 507 508 509 510 511 512 <div x-show="open" 513 x-transition.opacity 514 @click.outside="if (!($refs.navArea.contains($event.target))) open = false" 515 class="absolute top-full left-1/2 -translate-x-1/2 mt-6 516 w-[86vw] max-w-9xl text-gray-900 p-2 z-50 517 [content-visibility:auto] [contain-intrinsic-size:1000px]"> 518 <div x-show="activeMenu === 'fairs'"><div class=""> 519 <div class="grid grid-cols-3 gap-6 p-6 bg-white rounded-b-xl"> 520 521 <div class="flex flex-col">
522 <div class="relative flex aspect-[16/3] items-end p-4 text-white overflow-hidden bg-brand-500"> 523 <div class="relative z-[2]"> 524 <h3 class="text-lg sm:text-3xl uppercase font-heading tracking-wider font-semibold"> 525 Sajmovi</h3> 526 <p class="text-xs sm:text-sm leading-snug font-medium"> 527 Brzi pristup najvažnijem 528 </p> 529 </div> 530 <img data-mega="fairs" 531 alt="" 532 width="1300" 533 height="170" 534 class="absolute inset-0 w-full h-full object-cover object-center z-0" 535 loading="lazy" 536 decoding="async" 537 fetchpriority="low"> 538 <!--<div class="inset-0 z-[1] absolute bg-gradient-to-r from-brand-500/90 to-brand-500/50"></div> 539 --> 540 </div> 541 542 <div class="mt-4 grid gap-2"> 543 <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50" href="https://sajam.net/sr/posetioci/ulaznice" 544 > 545 546 <span class="relative shrink-0"> 547 <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900"> 548 <i class="fa-solid fa-ticket text-sm"></i> 549 </span> 550 </span> 551 552 <span class="h-6 w-px bg-gray-200"></span> 553 554 555 <span class="min-w-0 flex flex-col"> 556 <span class="text-xs font-semibold text-neutral-900 truncate"> 557 Porudžbenice, ulaznice i formulari 558 </span> 559 </span> 560 561 562 <span 563 class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1"> 564 <i class="fa-solid fa-arrow-right-long"></i> 565 </span> 566 </a> 567 <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50" href="https://sajam.net/sr/kalendar" 568 > 569 570 <span class="relative shrink-0"> 571 <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900"> 572 <i class="fa-solid fa-calendar-day text-sm"></i> 573 </span> 574 </span> 575 576 <span class="h-6 w-px bg-gray-200"></span> 577 578 579 <span class="min-w-0 flex flex-col"> 580 <span class="text-xs font-semibold text-neutral-900 truncate"> 581 Kalendar dogaÄaja 582 </span> 583 </span> 584 585 586 <span 587 class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1"> 588 <i class="fa-solid fa-arrow-right-long"></i> 589 </span> 590 </a> 591 <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50" href="https://sajam.net/sr/posetioci/kako-doci" 592 > 593 594 <span class="relative shrink-0"> 595 <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900"> 596 <i class="fa-solid fa-route text-sm"></i> 597 </span> 598 </span> 599 600 <span class="h-6 w-px bg-gray-200"></span> 601 602 603 <span class="min-w-0 flex flex-col"> 604 <span class="text-xs font-semibold text-neutral-900 truncate"> 605 Kako do Sajma? 606 </span> 607 </span> 608 609 610 <span 611 class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1"> 612 <i class="fa-solid fa-arrow-right-long"></i> 613 </span> 614 </a> 615 <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50" href="https://sajam.net/sr/posetioci/plan-sajma" 616 > 617
618 <span class="relative shrink-0"> 619 <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900"> 620 <i class="fa-solid fa-map text-sm"></i> 621 </span> 622 </span> 623 624 <span class="h-6 w-px bg-gray-200"></span> 625 626 627 <span class="min-w-0 flex flex-col"> 628 <span class="text-xs font-semibold text-neutral-900 truncate"> 629 Mapa Sajma 630 </span> 631 </span> 632 633 634 <span 635 class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1"> 636 <i class="fa-solid fa-arrow-right-long"></i> 637 </span> 638 </a> 639 </div> 640 </div> 641 642 643 <div class="min-w-0"> 644 <h4 class="text-sm font-bold uppercase tracking-wide text-gray-600"> 645 Istaknuti sajmovi</h4> 646 <ul class="mt-3 rounded-lg border border-gray-200 overflow-hidden bg-white"> 647 <li> 648 <a href="https://sajam.net/sr/dogadjaj/16-ewda-konferencija-ewda-2026" 649 class="group flex items-center gap-4 p-4 hover:bg-gray-50 transition"> 650 <div class="w-14 shrink-0 text-center"> 651 <div class="text-lg font-extrabold text-gray-900">28.09</div> 652 <div class="text-xs text-gray-500">- 02.10</div> 653 </div> 654 <span class="h-6 w-px bg-neutral-200"></span> 655 <div class="min-w-0"> 656 <div class="flex items-center gap-2"> 657 <span 658 class="inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide bg-green-600 text-white"> 659 U toku 660 </span> 661 <span class="truncate font-semibold text-gray-900">16. EWDA konferencija - EWDA 2026</span> 662 </div> 663 <div class="text-sm text-gray-400">2026</div> 664 </div> 665 <i class="fa-solid fa-arrow-right-long ms-auto text-gray-300 group-hover:text-gray-400"></i> 666 </a> 667 </li> 668 <li> 669 <a href="https://sajam.net/sr/dogadjaj/57-medunarodni-sajam-lova-i-ribolova" 670 class="group flex items-center gap-4 p-4 hover:bg-gray-50 transition"> 671 <div class="w-14 shrink-0 text-center"> 672 <div class="text-lg font-extrabold text-gray-900">30.09</div> 673 <div class="text-xs text-gray-500">- 04.10</div> 674 </div> 675 <span class="h-6 w-px bg-neutral-200"></span> 676 <div class="min-w-0"> 677 <div class="flex items-center gap-2"> 678 <span 679 class="inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide bg-green-600 text-white"> 680 U toku 681 </span> 682 <span class="truncate font-semibold text-gray-900">57. MEÄUNARODNI SAJAM LOVA I RIBOLOVA</span> 683 </div> 684 <div class="text-sm text-gray-400">2026</div> 685 </div> 686 <i class="fa-solid fa-arrow-right-long ms-auto text-gray-300 group-hover:text-gray-400"></i> 687 </a> 688 </li> 689 <li> 690 <a href="https://sajam.net/sr/dogadjaj/sajam-ekologije-2026" 691 class="group flex items-center gap-4 p-4 hover:bg-gray-50 transition"> 692 <div class="w-14 shrink-0 text-center"> 693 <div class="text-lg font-extrabold text-gray-900">30.09</div> 694 <div class="text-xs text-gray-500">- 04.10</div> 695 </div>
696 <span class="h-6 w-px bg-neutral-200"></span> 697 <div class="min-w-0"> 698 <div class="flex items-center gap-2"> 699 <span 700 class="inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide bg-green-600 text-white"> 701 U toku 702 </span> 703 <span class="truncate font-semibold text-gray-900">SAJAM EKOLOGIJE - 2026</span> 704 </div> 705 <div class="text-sm text-gray-400">2026</div> 706 </div> 707 <i class="fa-solid fa-arrow-right-long ms-auto text-gray-300 group-hover:text-gray-400"></i> 708 </a> 709 </li> 710 </ul> 711 <div class="mt-3 flex gap-2"> 712 <a href="https://sajam.net/sr/kalendar" 713 class="ui-btn relative inline-flex items-center justify-center select-none 714 transition will-change-transform duration-150 715 focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2 716 disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-brand-500 text-black bg-white rounded-full border-[2px] border-brand-500 min-h-10 text-xs px-3 py-1.5 gap-2 u-shadow" style="--slab: rgba(202,33,43,.75);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)" 717 data-variant="secondary" 718 data-scheme="light"> 719 <span class="ui-btn__label">Pretraži dogaÄaje</span> 720 </a> 721 <a href="https://sajam.net/sr/vesti" 722 class="ui-btn relative inline-flex items-center justify-center select-none 723 transition will-change-transform duration-150 724 focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2 725 disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-brand-500 text-black bg-white rounded-full border-[2px] border-brand-500 min-h-10 text-xs px-3 py-1.5 gap-2 u-shadow" style="--slab: rgba(202,33,43,.75);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)" 726 data-variant="secondary" 727 data-scheme="light"> 728 <span class="ui-btn__label">Najave</span> 729 </a> 730 </div> 731 </div> 732 733 734 <div class="grid gap-3"> 735 736 <a href="https://sajam.net/sr/posetioci" 737 class="relative overflow-hidden group rounded-md border border-gray-300 hover:bg-gray-300 738 shadow-[0_0_0_0_rgba(202,33,43,0)] hover:shadow-[-8px_8px_0px_1px_rgba(202,33,43,.9)] 739 transition-shadow duration-150 ease-linear"> 740 <img src="https://sajam.net/media/tiles/visitors.jpg" 741 alt="" 742 class="absolute inset-0 h-full w-full group-hover:blur-[3px] object-cover object-center" 743 loading="lazy"> 744 <div 745 class="pointer-events-none absolute inset-0 bg-gradient-to-r 746 from-white via-white/60 to-transparent transition-colors duration-200 747 group-hover:from-white group-hover:via-white/90 group-hover:to-white/50"> 748 <div class="absolute z-[2] inset-0"> 749 <img src="https://sajam.net/images/logo.svg"
750 alt="Novosadski Sajam Logo" 751 class="absolute -right-12 group-hover:translate-x-48 transition-transform duration-300 -bottom-[-1/3] rotate-15 h-30 pointer-events-none opacity-80"> 752 </div> 753 </div> 754 755 <div class="relative h-full flex items-center z-[1] py-2 px-4 gap-2"> 756 <span class="inline-flex rounded-md bg-white/10 items-center justify-center w-10 h-10 backdrop-blur-lg"><i 757 class="fa-solid fa-users items-center text-xs"></i></span> 758 <span class="text-gray-900 font-medium text-xl">Posetioci</span> 759 <i data-ph="caret-right-bold" 760 class="w-4 h-4 -translate-x-6 text-white/20 761 group-hover:translate-x-0 group-hover:text-white/100 ml-auto 762 transition-transform duration-200"></i> 763 </div> 764</a> 765 766 767 <a href="https://sajam.net/sr/izlagaci" 768 class="relative overflow-hidden group rounded-md border border-gray-300 hover:bg-gray-300 769 shadow-[0_0_0_0_rgba(202,33,43,0)] hover:shadow-[-8px_8px_0px_1px_rgba(202,33,43,.9)] 770 transition-shadow duration-150 ease-linear"> 771 <img src="https://sajam.net/media/tiles/exhibitors.jpg" 772 alt="" 773 class="absolute inset-0 h-full w-full group-hover:blur-[3px] object-cover object-center" 774 loading="lazy"> 775 <div 776 class="pointer-events-none absolute inset-0 bg-gradient-to-r 777 from-white via-white/60 to-transparent transition-colors duration-200 778 group-hover:from-white group-hover:via-white/90 group-hover:to-white/50"> 779 <div class="absolute z-[2] inset-0"> 780 <img src="https://sajam.net/images/logo.svg"
781 alt="Novosadski Sajam Logo" 782 class="absolute -right-12 group-hover:translate-x-48 transition-transform duration-300 -bottom-[-1/3] rotate-15 h-30 pointer-events-none opacity-80"> 783 </div> 784 </div> 785 786 <div class="relative h-full flex items-center z-[1] py-2 px-4 gap-2"> 787 <span class="inline-flex rounded-md bg-white/10 items-center justify-center w-10 h-10 backdrop-blur-lg"><i 788 class="fa-solid fa-briefcase items-center text-xs"></i></span> 789 <span class="text-gray-900 font-medium text-xl">IzlagaÄi</span> 790 <i data-ph="caret-right-bold" 791 class="w-4 h-4 -translate-x-6 text-white/20 792 group-hover:translate-x-0 group-hover:text-white/100 ml-auto 793 transition-transform duration-200"></i> 794 </div> 795</a> 796 797 798 <a href="https://sajam.net/sr/kongres" 799 class="relative overflow-hidden group rounded-md border border-gray-300 hover:bg-gray-300 800 shadow-[0_0_0_0_rgba(202,33,43,0)] hover:shadow-[-8px_8px_0px_1px_rgba(202,33,43,.9)] 801 transition-shadow duration-150 ease-linear"> 802 <img src="https://sajam.net/media/tiles/congress.webp" 803 alt="" 804 class="absolute inset-0 h-full w-full group-hover:blur-[3px] object-cover object-center" 805 loading="lazy"> 806 <div 807 class="pointer-events-none absolute inset-0 bg-gradient-to-r 808 from-white via-white/60 to-transparent transition-colors duration-200 809 group-hover:from-white group-hover:via-white/90 group-hover:to-white/50"> 810 <div class="absolute z-[2] inset-0"> 811 <img src="https://sajam.net/images/logo.svg"
812 alt="Novosadski Sajam Logo" 813 class="absolute -right-12 group-hover:translate-x-48 transition-transform duration-300 -bottom-[-1/3] rotate-15 h-30 pointer-events-none opacity-80"> 814 </div> 815 </div> 816 817 <div class="relative h-full flex items-center z-[1] py-2 px-4 gap-2"> 818 <span class="inline-flex rounded-md bg-white/10 items-center justify-center w-10 h-10 backdrop-blur-lg"><i 819 class="fa-solid fa-building-columns items-center text-xs"></i></span> 820 <span class="text-gray-900 font-medium text-xl">Kongresni Centar âMaster"</span> 821 <i data-ph="caret-right-bold" 822 class="w-4 h-4 -translate-x-6 text-white/20 823 group-hover:translate-x-0 group-hover:text-white/100 ml-auto 824 transition-transform duration-200"></i> 825 </div> 826</a> 827 828 829 <a href="https://sajam.net/sr/novinarstvo" 830 class="relative overflow-hidden group rounded-md border border-gray-300 hover:bg-gray-300 831 shadow-[0_0_0_0_rgba(202,33,43,0)] hover:shadow-[-8px_8px_0px_1px_rgba(202,33,43,.9)] 832 transition-shadow duration-150 ease-linear"> 833 <img src="https://sajam.net/media/tiles/press.jpg" 834 alt="" 835 class="absolute inset-0 h-full w-full group-hover:blur-[3px] object-cover object-center" 836 loading="lazy"> 837 <div 838 class="pointer-events-none absolute inset-0 bg-gradient-to-r 839 from-white via-white/60 to-transparent transition-colors duration-200 840 group-hover:from-white group-hover:via-white/90 group-hover:to-white/50"> 841 <div class="absolute z-[2] inset-0"> 842 <img src="https://sajam.net/images/logo.svg"
843 alt="Novosadski Sajam Logo" 844 class="absolute -right-12 group-hover:translate-x-48 transition-transform duration-300 -bottom-[-1/3] rotate-15 h-30 pointer-events-none opacity-80"> 845 </div> 846 </div> 847 848 <div class="relative h-full flex items-center z-[1] py-2 px-4 gap-2"> 849 <span class="inline-flex rounded-md bg-white/10 items-center justify-center w-10 h-10 backdrop-blur-lg"><i 850 class="fa-solid fa-bullhorn items-center text-xs"></i></span> 851 <span class="text-gray-900 font-medium text-xl">Press</span> 852 <i data-ph="caret-right-bold" 853 class="w-4 h-4 -translate-x-6 text-white/20 854 group-hover:translate-x-0 group-hover:text-white/100 ml-auto 855 transition-transform duration-200"></i> 856 </div> 857</a> 858 </div> 859 </div> 860</div> 861</div> 862 <div x-show="activeMenu === 'exhibitors'"><div class=""> 863 <div class="grid grid-cols-4 gap-3 pb-8"> 864 <div class="col-span-3 items-stretch min-w-0 bg-white p-4 pb-8 rounded-b-xl"> 865 <div class="relative flex bg-brand-400 aspect-[16/2] items-end p-4 overflow-hidden"> 866 <div class="relative z-[2] text-white ps-2"> 867 <h3 class="text-lg sm:text-3xl uppercase font-heading tracking-wider font-semibold"> 868 IzlagaÄi</h3> 869 <p class="text-xs sm:text-sm leading-snug font-medium">Kompletan vodiÄ i logistiÄka podrÅ¡ka za vaÅ¡ 870 uspeÅ¡an nastup i predstavljanje na Novosadskom sajmu.</p> 871 </div> 872 <div class="relative z-[2] ms-auto"> 873 <a href="https://sajam.net/sr/izlagaci" 874 class="ui-btn relative inline-flex items-center justify-center select-none 875 transition will-change-transform duration-150 876 focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2 877 disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-white text-black bg-white min-h-12 text-base px-5 py-3 gap-3 u-shadow" style="--slab: rgba(202,33,43,.9);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)" 878 data-variant="primary" 879 data-scheme="dark"> 880 <i class="fa-solid fa-up-right-from-square"></i> 881 <span class="ui-btn__label">Otvori centar informacija za izlagaÄe</span> 882 </a> 883 </div> 884 <div class="inset-0 z-[1] absolute bg-gradient-to-r from-black/80 to-black/30"></div> 885 <img data-mega="exhibitors" 886 alt="" 887 width="1300" 888 height="170" 889 class="absolute inset-0 w-full h-full object-cover object-center z-0" 890 loading="lazy" 891 decoding="async" 892 fetchpriority="low"> 893 </div> 894 <div class="grid grid-cols-3 pt-6 mt-4 px-4 divide-x divide-brand-500/5"> 895 <div class="min-w-0 px-4"> 896 <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400 break-words text-pretty min-w-0 truncate"> 897 Priprema nastupa</h4> 898 899 <ul class="mt-3 space-y-2"> 900 901 <li class="min-w-0"> 902 <a href="https://sajam.net/sr/izlagaci/prijave" 903 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 904 text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words 905 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 906 Prijava i uslovi uÄeÅ¡Äa 907 <span 908 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 909 <i data-ph="caret-right-bold" 910 class="w-3.5 h-3.5"></i></span> 911 </a> 912 </li> 913 914 <li class="min-w-0"> 915 <a href="https://sajam.net/sr/izlagaci/prijave" 916 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 917 text-gray-700 text-sm transition duration-150 ease-linear min-w-0
917whitespace-normal break-words 918 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 919 Usluge marketinga 920 <span 921 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 922 <i data-ph="caret-right-bold" 923 class="w-3.5 h-3.5"></i></span> 924 </a> 925 </li> 926 927 <li class="min-w-0"> 928 <a href="https://sajam.net/sr/izlagaci/najave" 929 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 930 text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words 931 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 932 Najava dogaÄaja 933 <span 934 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 935 <i data-ph="caret-right-bold" 936 class="w-3.5 h-3.5"></i></span> 937 </a> 938 </li> 939 940 <li class="min-w-0"> 941 <a href="https://sajam.net/sr/izlagaci/reklamne-usluge" 942 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 943 text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words 944 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 945 Brendiranje i reklamne usluge 946 <span 947 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 948 <i data-ph="caret-right-bold" 949 class="w-3.5 h-3.5"></i></span> 950 </a> 951 </li> 952 953 <li class="min-w-0"> 954 <a href="https://sajam.net/sr/izlagaci/ocenjivanje-kvaliteta" 955 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 956 text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words 957 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 958 Ocenjivanje kvaliteta 959 <span 960 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 961 <i data-ph="caret-right-bold" 962 class="w-3.5 h-3.5"></i></span> 963 </a> 964 </li> 965 </ul> 966</div> 967 968 <div class="min-w-0 px-4"> 969 <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400 break-words text-pretty min-w-0 truncate"> 970 Å tandovi i oprema</h4> 971 972 <ul class="mt-3 space-y-2"> 973 974 <li class="min-w-0"> 975 <a href="https://sajam.net/sr/izlagaci/setup-hub" 976 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 977 text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words 978 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 979 Å tandovi i oprema 980 <span 981 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 982 <i data-ph="caret-right-bold" 983 class="w-3.5 h-3.5"></i></span> 984 </a> 985 </li> 986 987 <li class="min-w-0"> 988 <a href="https://sajam.net/sr/izlagaci/uredjenje-prostora" 989 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 990 text-gray-700 text-sm transition duration-150 ease-linear min-w-0
990whitespace-normal break-words 991 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 992 UreÄenje prostora 993 <span 994 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 995 <i data-ph="caret-right-bold" 996 class="w-3.5 h-3.5"></i></span> 997 </a> 998 </li> 999 1000 <li class="min-w-0"> 1001 <a href="https://sajam.net/sr/izlagaci/struja-voda-internet" 1002 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 1003 text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words 1004 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 1005 Struja, voda, internet 1006 <span 1007 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 1008 <i data-ph="caret-right-bold" 1009 class="w-3.5 h-3.5"></i></span> 1010 </a> 1011 </li> 1012 1013 <li class="min-w-0"> 1014 <a href="https://sajam.net/sr/izlagaci/audio-video-podrska" 1015 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 1016 text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words 1017 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 1018 Audio/Video podrÅ¡ka 1019 <span 1020 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 1021 <i data-ph="caret-right-bold" 1022 class="w-3.5 h-3.5"></i></span> 1023 </a> 1024 </li> 1025 1026 <li class="min-w-0"> 1027 <a href="https://sajam.net/sr/izlagaci/bezbednost-osiguranje" 1028 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 1029 text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words 1030 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 1031 Bezbednost i osiguranje 1032 <span 1033 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 1034 <i data-ph="caret-right-bold" 1035 class="w-3.5 h-3.5"></i></span> 1036 </a> 1037 </li> 1038 </ul> 1039</div> 1040 1041 <div class="min-w-0 px-4"> 1042 <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400 break-words text-pretty min-w-0 truncate"> 1043 Logistika & ostalo</h4> 1044 1045 <ul class="mt-3 space-y-2"> 1046 1047 <li class="min-w-0"> 1048 <a href="https://sajam.net/sr/izlagaci/zastupnici-spediteri" 1049 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 1050 text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words 1051 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 1052 Zastupnici i Å¡pediteri 1053 <span 1054 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 1055 <i data-ph="caret-right-bold" 1056 class="w-3.5 h-3.5"></i></span> 1057 </a> 1058 </li> 1059 1060 <li class="min-w-0"> 1061 <a href="https://sajam.net/sr/izlagaci/parking" 1062 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 1063 text-gray-700 text-sm transition duration-150 ease-linear min-w-0
1063whitespace-normal break-words 1064 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 1065 Parking i skladiÅ¡tenje 1066 <span 1067 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 1068 <i data-ph="caret-right-bold" 1069 class="w-3.5 h-3.5"></i></span> 1070 </a> 1071 </li> 1072 1073 <li class="min-w-0"> 1074 <a href="https://sajam.net/sr/kongres" 1075 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 1076 text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words 1077 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 1078 Kongresni centar âMasterâ 1079 <span 1080 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 1081 <i data-ph="caret-right-bold" 1082 class="w-3.5 h-3.5"></i></span> 1083 </a> 1084 </li> 1085 1086 <li class="min-w-0"> 1087 <a href="https://sajam.net/sr/kontakt" 1088 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 1089 text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words 1090 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 1091 Kontakt informacije 1092 <span 1093 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 1094 <i data-ph="caret-right-bold" 1095 class="w-3.5 h-3.5"></i></span> 1096 </a> 1097 </li> 1098 </ul> 1099</div> 1100 </div> 1101 </div> 1102 1103 1104 <div class="flex flex-col justify-between my-auto"> 1105 <div class="rounded-r-xl p-5 bg-white min-w-0 break-words"> 1106 <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-500"> 1107 PomoÄ i podrÅ¡ka</h4> 1108 <p class="mt-1 ps-2 text-xs text-wrap text-gray-600"> 1109 NaÅ¡ tim je tu za vas. Pogledajte vodiÄe ili kontaktirajte koordinatora. 1110 </p> 1111 1112 1113 <div class="mt-3 grid grid-cols-1 gap-3"> 1114 <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50" href="https://sajam.net/sr/izlagaci/prijave" 1115 > 1116 1117 <span class="relative shrink-0"> 1118 <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900"> 1119 <i class="fa-solid fa-file-signature text-sm"></i> 1120 </span> 1121 </span> 1122 1123 <span class="h-6 w-px bg-gray-200"></span> 1124 1125 1126 <span class="min-w-0 flex flex-col"> 1127 <span class="text-xs font-semibold text-neutral-900 truncate"> 1128 Kako da postanem izlagaÄ? 1129 </span> 1130 </span> 1131 1132 1133 <span 1134 class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1"> 1135 <i class="fa-solid fa-arrow-right-long"></i> 1136 </span> 1137 </a> 1138 <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50" href="https://sajam.net/sr/obavestenja" 1139 > 1140
1141 <span class="relative shrink-0"> 1142 <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900"> 1143 <i class="fa-solid fa-circle-question text-sm"></i> 1144 </span> 1145 </span> 1146 1147 <span class="h-6 w-px bg-gray-200"></span> 1148 1149 1150 <span class="min-w-0 flex flex-col"> 1151 <span class="text-xs font-semibold text-neutral-900 truncate"> 1152 Äesta pitanja i odgovori 1153 </span> 1154 </span> 1155 1156 1157 <span 1158 class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1"> 1159 <i class="fa-solid fa-arrow-right-long"></i> 1160 </span> 1161 </a> 1162 <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50" href="https://sajam.net/sr/izlagaci/reklamne-usluge" 1163 > 1164 1165 <span class="relative shrink-0"> 1166 <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900"> 1167 <i class="fa-solid fa-book-open text-sm"></i> 1168 </span> 1169 </span> 1170 1171 <span class="h-6 w-px bg-gray-200"></span> 1172 1173 1174 <span class="min-w-0 flex flex-col"> 1175 <span class="text-xs font-semibold text-neutral-900 truncate"> 1176 Kontaktirajte koordinatora 1177 </span> 1178 </span> 1179 1180 1181 <span 1182 class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1"> 1183 <i class="fa-solid fa-arrow-right-long"></i> 1184 </span> 1185 </a> 1186 </div> 1187 </div> 1188 </div> 1189 </div> 1190 1191 1192 <style> 1193 .ql-tile { 1194 position: relative; 1195 display: flex; 1196 align-items: center; 1197 gap: .6rem; 1198 border: 1px solid #e5e7eb; 1199 border-radius: .75rem; 1200 background: #fff; 1201 padding: .6rem .75rem; 1202 transition: .2s ease 1203 } 1204 1205 .ql-tile:hover { 1206 background: #f9fafb; 1207 border-color: #e5e7eb; 1208 box-shadow: 0 1px 0 rgba(0, 0, 0, .02) 1209 } 1210 1211 .ql-chip { 1212 display: inline-flex; 1213 align-items: center; 1214 justify-content: center; 1215 width: 28px; 1216 height: 28px; 1217 border-radius: .5rem; 1218 background: #f3f4f6; 1219 color: hsl(var(--brand-500)) 1220 } 1221 1222 .ql-label { 1223 font-weight: 600; 1224 color: #111827 1225 } 1226 1227 .ql-arrow { 1228 margin-left: auto; 1229 color: #9ca3af; 1230 transition: transform .2s ease 1231 } 1232 1233 .ql-tile:hover .ql-arrow { 1234 transform: translateX(2px) 1235 } 1236 </style> 1237</div> 1238</div> 1239 <div x-show="activeMenu === 'visitors'"><div class=""> 1240 <div class="grid grid-cols-4 gap-3 pb-8"> 1241 <div class="col-span-3 items-stretch min-w-0 bg-white p-4 pb-8 rounded-b-xl"> 1242 <div class="relative flex bg-brand-400 aspect-[16/2] items-end p-4 overflow-hidden"> 1243 <div class="relative z-[2] text-white ps-2"> 1244 <h3 class="text-lg sm:text-3xl uppercase font-heading tracking-wider font-semibold"> 1245 Posetioci</h3> 1246 <p class="text-xs sm:text-sm leading-snug font-medium">Sve praktiÄne informacije, mape i servisne 1247 usluge koje Äe vaÅ¡ dolazak i boravak uÄiniti jednostavnim i prijatnim.</p> 1248 </div> 1249 <div class="relative z-[2] ms-auto"> 1250 <a href="https://sajam.net/sr/posetioci" 1251 class="ui-btn relative inline-flex items-center justify-center select-none 1252 transition will-change-transform duration-150 1253 focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2 1254 disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-white text-black bg-white min-h-12 text-base px-5 py-3 gap-3 u-shadow" style="--slab: rgba(202,33,43,.9);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)" 1255 data-variant="primary" 1256 data-scheme="dark"> 1257 <i class="fa-solid fa-up-right-from-square"></i>
1258 <span class="ui-btn__label">Otvori centar informacija za posetioce</span> 1259 </a> 1260 </div> 1261 <div class="inset-0 z-[1] absolute bg-gradient-to-r from-black/80 to-black/30"></div> 1262 <img data-mega="visitors" 1263 alt="" 1264 width="1300" 1265 height="170" 1266 class="absolute inset-0 w-full h-full object-cover object-center z-0" 1267 loading="lazy" 1268 decoding="async" 1269 fetchpriority="low"> 1270 </div> 1271 <div class="grid grid-cols-3 pt-6 mt-4 px-4 divide-x divide-brand-500/5"> 1272 <div class="min-w-0 px-4"> 1273 <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400 break-words text-pretty min-w-0 truncate"> 1274 Planirajte posetu</h4> 1275 1276 <ul class="mt-3 space-y-2"> 1277 1278 <li class="min-w-0"> 1279 <a href="https://sajam.net/sr/posetioci/ulaznice" 1280 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 1281 text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words 1282 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 1283 Ulaznice 1284 <span 1285 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 1286 <i data-ph="caret-right-bold" 1287 class="w-3.5 h-3.5"></i></span> 1288 </a> 1289 </li> 1290 1291 <li class="min-w-0"> 1292 <a href="https://sajam.net/sr/posetioci/kako-doci" 1293 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 1294 text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words 1295 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 1296 Kako do nas (mapa) 1297 <span 1298 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 1299 <i data-ph="caret-right-bold" 1300 class="w-3.5 h-3.5"></i></span> 1301 </a> 1302 </li> 1303 1304 <li class="min-w-0"> 1305 <a href="https://sajam.net/sr/posetioci/parking" 1306 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 1307 text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words 1308 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 1309 Parking i kapije 1310 <span 1311 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 1312 <i data-ph="caret-right-bold" 1313 class="w-3.5 h-3.5"></i></span> 1314 </a> 1315 </li> 1316 1317 <li class="min-w-0"> 1318 <a href="https://sajam.net/sr/posetioci/plan-sajma" 1319 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 1320 text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words 1321 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 1322 Plan Sajma (hale) 1323 <span 1324 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 1325 <i data-ph="caret-right-bold" 1326 class="w-3.5 h-3.5"></i></span> 1327 </a> 1328 </li> 1329 </ul> 1330</div> 1331 1332 <div class="min-w-0 px-4"> 1333 <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400 break-words text-pretty min-w-0 truncate"> 1334 Informacije</h4> 1335 1336 <ul class="mt-3 space-y-2"> 1337 1338 <li class="min-w-0"> 1339 <a href="https://sajam.net/sr/posetioci/najave" 1340 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 1341 text-gray-700 text-sm transition duration-150 ease-linear min-w-0
1341whitespace-normal break-words 1342 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 1343 Programi i najave 1344 <span 1345 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 1346 <i data-ph="caret-right-bold" 1347 class="w-3.5 h-3.5"></i></span> 1348 </a> 1349 </li> 1350 1351 <li class="min-w-0"> 1352 <a href="https://sajam.net/sr/posetioci/katalog" 1353 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 1354 text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words 1355 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 1356 Katalog i izlagaÄi 1357 <span 1358 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 1359 <i data-ph="caret-right-bold" 1360 class="w-3.5 h-3.5"></i></span> 1361 </a> 1362 </li> 1363 1364 <li class="min-w-0"> 1365 <a href="https://sajam.net/sr/posetioci/smestaj-preporuke" 1366 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 1367 text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words 1368 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 1369 SmeÅ¡taj i preporuke 1370 <span 1371 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 1372 <i data-ph="caret-right-bold" 1373 class="w-3.5 h-3.5"></i></span> 1374 </a> 1375 </li> 1376 1377 <li class="min-w-0"> 1378 <a href="https://sajam.net/sr/posetioci/pristupacnost" 1379 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 1380 text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words 1381 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 1382 PristupaÄnost (A11y) 1383 <span 1384 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 1385 <i data-ph="caret-right-bold" 1386 class="w-3.5 h-3.5"></i></span> 1387 </a> 1388 </li> 1389 </ul> 1390</div> 1391 1392 <div class="min-w-0 px-4"> 1393 <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400 break-words text-pretty min-w-0 truncate"> 1394 Medija centar</h4> 1395 1396 <ul class="mt-3 space-y-2"> 1397 1398 <li class="min-w-0"> 1399 <a href="https://sajam.net/sr/media/galerije" 1400 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 1401 text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words 1402 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 1403 MediaHub (foto/galerije) 1404 <span 1405 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 1406 <i data-ph="caret-right-bold" 1407 class="w-3.5 h-3.5"></i></span> 1408 </a> 1409 </li> 1410 1411 <li class="min-w-0"> 1412 <a href="https://sajam.net/sr/posetioci/video-galerija" 1413 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 1414 text-gray-700 text-sm transition duration-150 ease-linear min-w-0
1414whitespace-normal break-words 1415 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 1416 TV produkcija âSvi na Sajamâ 1417 <span 1418 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 1419 <i data-ph="caret-right-bold" 1420 class="w-3.5 h-3.5"></i></span> 1421 </a> 1422 </li> 1423 1424 <li class="min-w-0"> 1425 <a href="https://sajam.net/sr/obavestenja" 1426 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 1427 text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words 1428 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 1429 SaopÅ¡tenja i objave 1430 <span 1431 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 1432 <i data-ph="caret-right-bold" 1433 class="w-3.5 h-3.5"></i></span> 1434 </a> 1435 </li> 1436 </ul> 1437</div> 1438 </div> 1439 </div> 1440 1441 1442 <div 1443 class="flex flex-col justify-between my-auto rounded-r-xl p-5 1444 bg-white min-w-0 break-words divide-y divide-brand-500/10"> 1445 <div class="pb-3"> 1446 <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-500"> 1447 Brzi linkovi</h4> 1448 <div class="mt-3 grid grid-cols-1 gap-3"> 1449 <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50" href="https://sajam.net/sr/posetioci/ulaznice" 1450 > 1451 1452 <span class="relative shrink-0"> 1453 <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900"> 1454 <i class="fa-solid fa-ticket text-sm"></i> 1455 </span> 1456 </span> 1457 1458 <span class="h-6 w-px bg-gray-200"></span> 1459 1460 1461 <span class="min-w-0 flex flex-col"> 1462 <span class="text-xs font-semibold text-neutral-900 truncate"> 1463 Porudžbenice, ulaznice i formulari 1464 </span> 1465 </span> 1466 1467 1468 <span 1469 class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1"> 1470 <i class="fa-solid fa-arrow-right-long"></i> 1471 </span> 1472 </a> 1473 <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50" href="https://sajam.net/sr/kalendar" 1474 > 1475 1476 <span class="relative shrink-0"> 1477 <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900"> 1478 <i class="fa-solid fa-calendar-day text-sm"></i> 1479 </span> 1480 </span> 1481 1482 <span class="h-6 w-px bg-gray-200"></span> 1483 1484 1485 <span class="min-w-0 flex flex-col"> 1486 <span class="text-xs font-semibold text-neutral-900 truncate"> 1487 Kalendar dogaÄaja 1488 </span> 1489 </span> 1490 1491 1492 <span 1493 class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1"> 1494 <i class="fa-solid fa-arrow-right-long"></i> 1495 </span> 1496 </a> 1497 <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50" href="https://sajam.net/sr/posetioci/plan-sajma" 1498 > 1499
1500 <span class="relative shrink-0"> 1501 <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900"> 1502 <i class="fa-solid fa-map text-sm"></i> 1503 </span> 1504 </span> 1505 1506 <span class="h-6 w-px bg-gray-200"></span> 1507 1508 1509 <span class="min-w-0 flex flex-col"> 1510 <span class="text-xs font-semibold text-neutral-900 truncate"> 1511 Mapa Sajma 1512 </span> 1513 </span> 1514 1515 1516 <span 1517 class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1"> 1518 <i class="fa-solid fa-arrow-right-long"></i> 1519 </span> 1520 </a> 1521 <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50" href="https://sajam.net/sr/posetioci/kako-doci" 1522 > 1523 1524 <span class="relative shrink-0"> 1525 <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900"> 1526 <i class="fa-solid fa-route text-sm"></i> 1527 </span> 1528 </span> 1529 1530 <span class="h-6 w-px bg-gray-200"></span> 1531 1532 1533 <span class="min-w-0 flex flex-col"> 1534 <span class="text-xs font-semibold text-neutral-900 truncate"> 1535 Kako do Sajma? 1536 </span> 1537 </span> 1538 1539 1540 <span 1541 class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1"> 1542 <i class="fa-solid fa-arrow-right-long"></i> 1543 </span> 1544 </a> 1545 </div> 1546 1547 </div> 1548 <div class="mt-4 flex flex-wrap gap-2"> 1549 <a href="https://sajam.net/sr/posetioci/parking" 1550 class="inline-flex items-center gap-2 rounded-md border border-gray-200 px-3 py-1.5 text-sm font-semibold hover:bg-gray-50"> 1551 <i class="fa-solid fa-square-parking text-gray-500"></i> Parking 1552 </a> 1553 <a href="https://sajam.net/sr/posetioci/pristupacnost" 1554 class="inline-flex items-center gap-2 rounded-md border border-gray-200 px-3 py-1.5 text-sm font-semibold hover:bg-gray-50"> 1555 <i class="fa-solid fa-universal-access text-gray-500"></i> A11y 1556 </a> 1557 </div> 1558 </div> 1559 </div> 1560 1561 1562 <style> 1563 .ql-tile { 1564 position: relative; 1565 display: flex; 1566 align-items: center; 1567 gap: .6rem; 1568 border: 1px solid #e5e7eb; 1569 border-radius: .75rem; 1570 background: #fff; 1571 padding: .6rem .75rem; 1572 transition: .2s ease 1573 } 1574 1575 .ql-tile:hover { 1576 background: #f9fafb; 1577 border-color: #e5e7eb; 1578 box-shadow: 0 1px 0 rgba(0, 0, 0, .02) 1579 } 1580 1581 .ql-chip { 1582 display: inline-flex; 1583 align-items: center; 1584 justify-content: center; 1585 width: 28px; 1586 height: 28px; 1587 border-radius: .5rem; 1588 background: #f3f4f6; 1589 color: hsl(var(--brand-500)) 1590 } 1591 1592 .ql-label { 1593 font-weight: 600; 1594 color: #111827 1595 } 1596 1597 .ql-arrow { 1598 margin-left: auto; 1599 color: #9ca3af; 1600 transition: transform .2s ease 1601 } 1602 1603 .ql-tile:hover .ql-arrow { 1604 transform: translateX(2px) 1605 } 1606 </style> 1607</div> 1608</div> 1609 <div x-show="activeMenu === 'congress'"><div class=""> 1610 <div class="grid grid-cols-4 gap-3 pb-8"> 1611 <div class="col-span-3 items-stretch min-w-0 bg-white p-4 pb-8 rounded-b-xl"> 1612 <div class="relative flex bg-brand-400 aspect-[16/2] items-end p-4 overflow-hidden"> 1613 <div class="relative z-[2] text-white ps-2"> 1614 <h3 class="text-lg sm:text-3xl uppercase font-heading tracking-wider font-semibold"> 1615 Kongresni Centar âMaster"</h3> 1616 <p class="text-xs sm:text-sm leading-snug font-medium">Moderan prostor i profesionalna tehniÄka 1617 podrÅ¡ka za besprekornu organizaciju vaÅ¡ih poslovnih dogaÄaja i konferencija.</p> 1618 </div> 1619 <div class="relative z-[2] ms-auto"> 1620 <a href="https://sajam.net/sr/kongres" 1621 class="ui-btn relative inline-flex items-center justify-center select-none 1622 transition will-change-transform duration-150 1623 focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2 1624 disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-white text-black bg-white min-h-12 text-base px-5 py-3 gap-3 u-shadow" style="--slab: rgba(202,33,43,.9);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)" 1625 data-variant="primary" 1626 data-scheme="dark"> 1627 <i class="fa-solid fa-up-right-from-square"></i>
1628 <span class="ui-btn__label">Otvori Sve o Kongres Master Centru</span> 1629 </a> 1630 </div> 1631 <div class="inset-0 z-[1] absolute bg-gradient-to-r from-black/80 to-black/30"></div> 1632 <img data-mega="congress" 1633 alt="" 1634 width="1300" 1635 height="170" 1636 class="absolute inset-0 w-full h-full object-cover object-center z-0" 1637 loading="lazy" 1638 decoding="async" 1639 fetchpriority="low"> 1640 </div> 1641 <div class="grid grid-cols-3 pt-6 mt-4 px-4 divide-x divide-brand-500/5"> 1642 <div class="min-w-0 px-4"> 1643 <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400 break-words text-pretty min-w-0 truncate"> 1644 Planiranje dogaÄaja</h4> 1645 1646 <ul class="mt-3 space-y-2"> 1647 1648 <li class="min-w-0"> 1649 <a href="https://sajam.net/sr/kongres/sale-kapacitet" 1650 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 1651 text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words 1652 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 1653 Sale i kapaciteti 1654 <span 1655 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 1656 <i data-ph="caret-right-bold" 1657 class="w-3.5 h-3.5"></i></span> 1658 </a> 1659 </li> 1660 1661 <li class="min-w-0"> 1662 <a href="https://sajam.net/sr/kongres/tehnicka-oprema" 1663 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 1664 text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words 1665 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 1666 TehniÄka oprema 1667 <span 1668 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 1669 <i data-ph="caret-right-bold" 1670 class="w-3.5 h-3.5"></i></span> 1671 </a> 1672 </li> 1673 1674 <li class="min-w-0"> 1675 <a href="https://sajam.net/sr/kongres/cenovnik-i-prijava" 1676 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 1677 text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words 1678 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 1679 Cenovnik i prijava 1680 <span 1681 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 1682 <i data-ph="caret-right-bold" 1683 class="w-3.5 h-3.5"></i></span> 1684 </a> 1685 </li> 1686 1687 <li class="min-w-0"> 1688 <a href="https://sajam.net/sr/kongres/dodatne-usluge" 1689 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 1690 text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words 1691 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 1692 Dodatne usluge 1693 <span 1694 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 1695 <i data-ph="caret-right-bold" 1696 class="w-3.5 h-3.5"></i></span> 1697 </a> 1698 </li> 1699 1700 <li class="min-w-0"> 1701 <a href="https://sajam.net/sr/kongres/restoran-usluge" 1702 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 1703 text-gray-700 text-sm transition duration-150 ease-linear min-w-0
1703whitespace-normal break-words 1704 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 1705 Restoran & ugostiteljstvo 1706 <span 1707 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 1708 <i data-ph="caret-right-bold" 1709 class="w-3.5 h-3.5"></i></span> 1710 </a> 1711 </li> 1712 </ul> 1713</div> 1714 1715 <div class="min-w-0 px-4"> 1716 <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400 break-words text-pretty min-w-0 truncate"> 1717 Inspiracija & resursi</h4> 1718 1719 <ul class="mt-3 space-y-2"> 1720 1721 <li class="min-w-0"> 1722 <a href="https://sajam.net/sr/kongres/referentna-lista" 1723 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 1724 text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words 1725 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 1726 Referentna lista 1727 <span 1728 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 1729 <i data-ph="caret-right-bold" 1730 class="w-3.5 h-3.5"></i></span> 1731 </a> 1732 </li> 1733 1734 <li class="min-w-0"> 1735 <a href="https://sajam.net/sr/posetioci/pristupacnost" 1736 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 1737 text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words 1738 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 1739 Preporuke klijenata 1740 <span 1741 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 1742 <i data-ph="caret-right-bold" 1743 class="w-3.5 h-3.5"></i></span> 1744 </a> 1745 </li> 1746 </ul> 1747</div> 1748 1749 <div class="min-w-0 px-4"> 1750 <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400 break-words text-pretty min-w-0 truncate"> 1751 Kontakt & podrška</h4> 1752 1753 <ul class="mt-3 space-y-2"> 1754 1755 <li class="min-w-0"> 1756 <a href="https://sajam.net/sr/kongres/posaljite-upit" 1757 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 1758 text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words 1759 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 1760 Pošaljite upit 1761 <span 1762 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 1763 <i data-ph="caret-right-bold" 1764 class="w-3.5 h-3.5"></i></span> 1765 </a> 1766 </li> 1767 1768 <li class="min-w-0"> 1769 <a href="https://sajam.net/sr/kongres/kontakt" 1770 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 1771 text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words 1772 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 1773 Tim & kontakt
1774 <span 1775 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 1776 <i data-ph="caret-right-bold" 1777 class="w-3.5 h-3.5"></i></span> 1778 </a> 1779 </li> 1780 1781 <li class="min-w-0"> 1782 <a href="https://sajam.net/sr/obavestenja" 1783 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 1784 text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words 1785 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 1786 Äesta pitanja (FAQ) 1787 <span 1788 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 1789 <i data-ph="caret-right-bold" 1790 class="w-3.5 h-3.5"></i></span> 1791 </a> 1792 </li> 1793 1794 <li class="min-w-0"> 1795 <a href="https://sajam.net/sr/posetioci/kako-doci" 1796 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 1797 text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words 1798 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 1799 Lokacija & dolazak 1800 <span 1801 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 1802 <i data-ph="caret-right-bold" 1803 class="w-3.5 h-3.5"></i></span> 1804 </a> 1805 </li> 1806 </ul> 1807</div> 1808 </div> 1809 </div> 1810 1811 1812 <div 1813 class="flex flex-col justify-between my-auto rounded-r-xl p-5 1814 bg-white min-w-0 break-words divide-y divide-brand-500/10"> 1815 <div class="pb-3"> 1816 <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-500">Brzi linkovi</h4> 1817 1818 <div class="mt-3 grid grid-cols-1 gap-3"> 1819 <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50" href="https://sajam.net/sr/kongres/cenovnik-i-prijava" 1820 > 1821 1822 <span class="relative shrink-0"> 1823 <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900"> 1824 <i class="fa-solid fa-building text-sm"></i> 1825 </span> 1826 </span> 1827 1828 <span class="h-6 w-px bg-gray-200"></span> 1829 1830 1831 <span class="min-w-0 flex flex-col"> 1832 <span class="text-xs font-semibold text-neutral-900 truncate"> 1833 Informacije hale i kapacitet 1834 </span> 1835 </span> 1836 1837 1838 <span 1839 class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1"> 1840 <i class="fa-solid fa-arrow-right-long"></i> 1841 </span> 1842 </a> 1843 1844 <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50" href="https://sajam.net/sr/kongres" 1845 > 1846 1847 <span class="relative shrink-0"> 1848 <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900"> 1849 <i class="fa-solid fa-calculator text-sm"></i> 1850 </span> 1851 </span> 1852
1853 <span class="h-6 w-px bg-gray-200"></span> 1854 1855 1856 <span class="min-w-0 flex flex-col"> 1857 <span class="text-xs font-semibold text-neutral-900 truncate"> 1858 Kalkulator cena 1859 </span> 1860 </span> 1861 1862 1863 <span 1864 class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1"> 1865 <i class="fa-solid fa-arrow-right-long"></i> 1866 </span> 1867 </a> 1868 1869 <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50" href="https://sajam.net/sr/kongres/sale-kapacitet" 1870 > 1871 1872 <span class="relative shrink-0"> 1873 <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900"> 1874 <i class="fa-solid fa-headset text-sm"></i> 1875 </span> 1876 </span> 1877 1878 <span class="h-6 w-px bg-gray-200"></span> 1879 1880 1881 <span class="min-w-0 flex flex-col"> 1882 <span class="text-xs font-semibold text-neutral-900 truncate"> 1883 Kontaktirajte nas 1884 </span> 1885 </span> 1886 1887 1888 <span 1889 class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1"> 1890 <i class="fa-solid fa-arrow-right-long"></i> 1891 </span> 1892 </a> 1893 </div> 1894 <p class="mb-1 mt-3 ps-2 text-xs text-wrap text-gray-600"> 1895 RezerviÅ¡ite Kongres Master Centar: 1896 </p> 1897 <a href="https://sajam.net/sr/kongres/posaljite-upit" 1898 class="ui-btn relative inline-flex items-center justify-center select-none 1899 transition will-change-transform duration-150 1900 focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2 1901 disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-brand-500 text-white bg-brand-500 hover:bg-black hover:text-white min-h-11 text-sm px-4 py-2 gap-2.5 w-full u-shadow" style="--slab: rgba(202,33,43,.9);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)" 1902 data-variant="primary" 1903 data-scheme="light"> 1904 <i class="fa-solid fa-paper-plane"></i> 1905 <span class="ui-btn__label">PoÅ¡aljite upit</span> 1906 </a> 1907 </div> 1908 1909 <div class="mt-3 flex flex-wrap gap-2"> 1910 <a href="https://sajam.net/sr/posetioci/kako-doci" 1911 class="inline-flex items-center gap-2 rounded-md border border-gray-200 px-3 py-1.5 text-sm font-semibold hover:bg-gray-50"> 1912 <i class="fa-solid fa-route text-gray-500"></i> Lokacija 1913 </a> 1914 <a href="https://sajam.net/sr/kongres/kontakt" 1915 class="inline-flex items-center gap-2 rounded-md border border-gray-200 px-3 py-1.5 text-sm font-semibold hover:bg-gray-50"> 1916 <i class="fa-solid fa-question-circle text-gray-500"></i> NajÄeÅ¡Äa pitanja 1917 </a> 1918 </div> 1919 </div> 1920 </div> 1921 1922 1923 <style> 1924 .ql-tile { 1925 position: relative; 1926 display: flex; 1927 align-items: center; 1928 gap: .6rem; 1929 border: 1px solid #e5e7eb; 1930 border-radius: .75rem; 1931 background: #fff; 1932 padding: .6rem .75rem; 1933 transition: .2s ease 1934 } 1935 1936 .ql-tile:hover { 1937 background: #f9fafb; 1938 border-color: #e5e7eb; 1939 box-shadow: 0 1px 0 rgba(0, 0, 0, .02) 1940 } 1941 1942 .ql-chip { 1943 display: inline-flex; 1944 align-items: center; 1945 justify-content: center; 1946 width: 28px; 1947 height: 28px; 1948 border-radius: .5rem; 1949 background: #f3f4f6; 1950 color: hsl(var(--brand-500)) 1951 } 1952 1953 .ql-label { 1954 font-weight: 600; 1955 color: #111827 1956 } 1957 1958 .ql-arrow { 1959 margin-left: auto; 1960 color: #9ca3af; 1961 transition: transform .2s ease 1962 } 1963 1964 .ql-tile:hover .ql-arrow { 1965 transform: translateX(2px) 1966 } 1967 </style> 1968</div> 1969</div> 1970 <div x-show="activeMenu === 'press'"><div class=""> 1971 <div class="grid grid-cols-4 gap-3 pb-8"> 1972 <div class="col-span-3 items-stretch min-w-0 bg-white p-4 pb-8 rounded-b-xl"> 1973 <div class="relative flex bg-brand-400 aspect-[16/2] items-end p-4 overflow-hidden"> 1974 <div class="relative z-[2] text-white ps-2"> 1975 <h3 class="text-lg sm:text-3xl uppercase font-heading tracking-wider font-semibold"> 1976 Press</h3> 1977 <p class="text-xs sm:text-sm leading-snug font-medium">Centralno mesto za predstavnike medija, 1978 akreditacije, medija kitove i najnovije vesti sa naÅ¡ih manifestacija.</p> 1979 </div> 1980 <div class="relative z-[2] ms-auto"> 1981 <a href="https://sajam.net/sr/novinarstvo" 1982 class="ui-btn relative inline-flex items-center justify-center select-none 1983 transition will-change-transform duration-150 1984 focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2 1985 disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-white text-black bg-white min-h-12 text-base px-5 py-3 gap-3 u-shadow" style="--slab: rgba(202,33,43,.9);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)" 1986 data-variant="primary" 1987 data-scheme="dark"> 1988 <i class="fa-solid fa-up-right-from-square"></i>
1989 <span class="ui-btn__label">Otvori centar informacija za press</span> 1990 </a> 1991 </div> 1992 <div class="inset-0 z-[1] absolute bg-gradient-to-r from-black/80 to-black/30"></div> 1993 <img data-mega="press" 1994 alt="" 1995 width="1300" 1996 height="170" 1997 class="absolute inset-0 w-full h-full object-cover object-center z-0" 1998 loading="lazy" 1999 decoding="async" 2000 fetchpriority="low"> 2001 </div> 2002 <div class="grid grid-cols-3 pt-6 mt-4 px-4 divide-x divide-brand-500/5"> 2003 <div class="min-w-0 px-4"> 2004 <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400 break-words text-pretty min-w-0 truncate"> 2005 Vesti & saopštenja</h4> 2006 2007 <ul class="mt-3 space-y-2"> 2008 2009 <li class="min-w-0"> 2010 <a href="https://sajam.net/sr/press/konferencije" 2011 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 2012 text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words 2013 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 2014 Konferencije za novinare 2015 <span 2016 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 2017 <i data-ph="caret-right-bold" 2018 class="w-3.5 h-3.5"></i></span> 2019 </a> 2020 </li> 2021 </ul> 2022</div> 2023 2024 <div class="min-w-0 px-4"> 2025 <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400 break-words text-pretty min-w-0 truncate"> 2026 Medijski resursi</h4> 2027 2028 <ul class="mt-3 space-y-2"> 2029 2030 <li class="min-w-0"> 2031 <a href="https://sajam.net/sr/press/akreditacije" 2032 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 2033 text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words 2034 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 2035 Akreditacije 2036 <span 2037 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 2038 <i data-ph="caret-right-bold" 2039 class="w-3.5 h-3.5"></i></span> 2040 </a> 2041 </li> 2042 2043 <li class="min-w-0"> 2044 <a href="https://sajam.net/sr/press/medijski-paket" 2045 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 2046 text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words 2047 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 2048 Media kit 2049 <span 2050 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 2051 <i data-ph="caret-right-bold" 2052 class="w-3.5 h-3.5"></i></span> 2053 </a> 2054 </li> 2055 2056 <li class="min-w-0"> 2057 <a href="https://sajam.net/sr/posetioci/video-galerija" 2058 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 2059 text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words 2060 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 2061 TV & video
2062 <span 2063 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 2064 <i data-ph="caret-right-bold" 2065 class="w-3.5 h-3.5"></i></span> 2066 </a> 2067 </li> 2068 2069 <li class="min-w-0"> 2070 <a href="https://sajam.net/sr/media/galerije" 2071 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 2072 text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words 2073 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 2074 Foto galerija 2075 <span 2076 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 2077 <i data-ph="caret-right-bold" 2078 class="w-3.5 h-3.5"></i></span> 2079 </a> 2080 </li> 2081 </ul> 2082</div> 2083 2084 <div class="min-w-0 px-4"> 2085 <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400 break-words text-pretty min-w-0 truncate"> 2086 Nagrada i kontakti</h4> 2087 2088 <ul class="mt-3 space-y-2"> 2089 2090 <li class="min-w-0"> 2091 <a href="https://sajam.net/sr/press/petar-davidovi%C4%87" 2092 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 2093 text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words 2094 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 2095 Nagrada âPetar DavidoviÄâ 2096 <span 2097 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 2098 <i data-ph="caret-right-bold" 2099 class="w-3.5 h-3.5"></i></span> 2100 </a> 2101 </li> 2102 </ul> 2103</div> 2104 </div> 2105 </div> 2106 2107 2108 <div 2109 class="flex flex-col justify-between my-auto rounded-r-xl p-5 2110 bg-white min-w-0 break-words divide-y divide-brand-500/10"> 2111 <div class="pb-3"> 2112 <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-500"> 2113 Brzi linkovi</h4> 2114 <div class="mt-3 grid grid-cols-1 gap-3"> 2115 <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50" href="https://sajam.net/sr/press/konferencije" 2116 > 2117 2118 <span class="relative shrink-0"> 2119 <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900"> 2120 <i class="fa-solid fa-newspaper text-sm"></i> 2121 </span> 2122 </span> 2123 2124 <span class="h-6 w-px bg-gray-200"></span> 2125 2126 2127 <span class="min-w-0 flex flex-col"> 2128 <span class="text-xs font-semibold text-neutral-900 truncate"> 2129 Konferencije za Å¡tampu 2130 </span> 2131 </span> 2132 2133 2134 <span 2135 class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1"> 2136 <i class="fa-solid fa-arrow-right-long"></i> 2137 </span> 2138 </a> 2139 <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50" href="https://sajam.net/sr/kalendar" 2140 > 2141
2142 <span class="relative shrink-0"> 2143 <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900"> 2144 <i class="fa-solid fa-calendar-day text-sm"></i> 2145 </span> 2146 </span> 2147 2148 <span class="h-6 w-px bg-gray-200"></span> 2149 2150 2151 <span class="min-w-0 flex flex-col"> 2152 <span class="text-xs font-semibold text-neutral-900 truncate"> 2153 Kalendar dogaÄaja 2154 </span> 2155 </span> 2156 2157 2158 <span 2159 class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1"> 2160 <i class="fa-solid fa-arrow-right-long"></i> 2161 </span> 2162 </a> 2163 </div> 2164 <div class="mt-3 grid grid-cols-2 gap-3"> 2165 <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border flex-col items-center px-3 py-4 hover:bg-gray-50" href="https://sajam.net/sr/press/medijski-paket" 2166 > 2167 2168 <span class="relative shrink-0"> 2169 <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900"> 2170 <i class="fa-solid fa-photo-film text-lg"></i> 2171 </span> 2172 </span> 2173 2174 2175 2176 <span class="min-w-0 flex flex-col"> 2177 <span class="text-xs font-semibold text-neutral-900 truncate"> 2178 Medijski kit 2179 </span> 2180 </span> 2181 2182 2183 </a> 2184 <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border flex-col items-center px-3 py-4 hover:bg-gray-50" href="https://sajam.net/sr/media/galerije" 2185 > 2186 2187 <span class="relative shrink-0"> 2188 <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900"> 2189 <i class="fa-solid fa-file-image text-lg"></i> 2190 </span> 2191 </span> 2192 2193 2194 2195 <span class="min-w-0 flex flex-col"> 2196 <span class="text-xs font-semibold text-neutral-900 truncate"> 2197 Galerija fotografija 2198 </span> 2199 </span> 2200 2201 2202 </a> 2203 </div> 2204 </div> 2205 <div class="mt-3 flex flex-wrap gap-2"> 2206 <a href="https://sajam.net/sr/posetioci/kako-doci" 2207 class="inline-flex items-center gap-2 rounded-md border border-gray-200 px-3 py-1.5 text-sm font-semibold hover:bg-gray-50"> 2208 <i class="fa-solid fa-route text-gray-500"></i> Lokacija 2209 </a> 2210 </div> 2211 </div> 2212 </div> 2213 2214 2215 <style> 2216 .ql-tile { 2217 position: relative; 2218 display: flex; 2219 align-items: center; 2220 gap: .6rem; 2221 border: 1px solid #e5e7eb; 2222 border-radius: .75rem; 2223 background: #fff; 2224 padding: .6rem .75rem; 2225 transition: .2s ease 2226 } 2227 2228 .ql-tile:hover { 2229 background: #f9fafb; 2230 border-color: #e5e7eb; 2231 box-shadow: 0 1px 0 rgba(0, 0, 0, .02) 2232 } 2233 2234 .ql-chip { 2235 display: inline-flex; 2236 align-items: center; 2237 justify-content: center; 2238 width: 28px; 2239 height: 28px; 2240 border-radius: .5rem; 2241 background: #f3f4f6; 2242 color: hsl(var(--brand-500)) 2243 } 2244 2245 .ql-label { 2246 font-weight: 600; 2247 color: #111827 2248 } 2249 2250 .ql-arrow { 2251 margin-left: auto; 2252 color: #9ca3af; 2253 transition: transform .2s ease 2254 } 2255 2256 .ql-tile:hover .ql-arrow { 2257 transform: translateX(2px) 2258 } 2259 </style> 2260</div> 2261</div> 2262 <div x-show="activeMenu === 'calendar'"><div class="grid grid-cols-4 gap-3 pb-8"> 2263 <div class="col-span-3 items-stretch min-w-0 bg-white p-4 rounded-b-xl"> 2264 <div class="relative flex bg-brand-400 aspect-[16/2] items-end p-4 overflow-hidden"> 2265 <div class="relative z-[2] text-white ps-2"> 2266 <h3 class="text-lg sm:text-3xl uppercase font-heading tracking-wider font-semibold"> 2267 Kalendar</h3> 2268 <p class="text-xs sm:text-sm leading-snug font-medium">Detaljan pregled i pretraga svih predstojeÄih 2269 sajmova i dogaÄaja kako niÅ¡ta ne biste propustili.</p> 2270 </div> 2271 <div class="relative z-[2] ms-auto"> 2272 <a href="https://sajam.net/sr/kalendar" 2273 class="ui-btn relative inline-flex items-center justify-center select-none 2274 transition will-change-transform duration-150 2275 focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2 2276 disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-white text-black bg-white min-h-12 text-base px-5 py-3 gap-3 u-shadow" style="--slab: rgba(202,33,43,.9);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)" 2277 data-variant="primary" 2278 data-scheme="dark"> 2279 <i class="fa-solid fa-up-right-from-square"></i>
2280 <span class="ui-btn__label">Pogledaj kalendar dogaÄaja</span> 2281 </a> 2282 </div> 2283 <div class="inset-0 z-[1] absolute bg-gradient-to-r from-black/80 to-black/30"></div> 2284 <img data-mega="calendar" 2285 alt="" 2286 width="1300" 2287 height="170" 2288 class="absolute inset-0 w-full h-full object-cover object-center z-0" 2289 loading="lazy" 2290 decoding="async" 2291 fetchpriority="low"> 2292 </div> 2293 <ul class="mt-6 rounded-lg border border-gray-200 overflow-hidden bg-white flex-1"> 2294 <li> 2295 <a href="https://sajam.net/sr/dogadjaj/16-ewda-konferencija-ewda-2026" 2296 class="group flex items-center justify-between gap-4 p-4 hover:bg-gray-50 transition"> 2297 <div class="flex items-center gap-4 min-w-0"> 2298 <div class="w-14 text-center shrink-0"> 2299 <div class="text-lg font-extrabold text-gray-900">28.09</div> 2300 <div class="text-xs text-gray-500">- 02.10</div> 2301 </div> 2302 <span class="h-6 w-px bg-neutral-200"></span> 2303 <div class="min-w-0"> 2304 <div class="flex items-center gap-2"> 2305 <span 2306 class="inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide bg-green-600 text-white"> 2307 U toku 2308 </span> 2309 <span 2310 class="text-base font-medium text-gray-900 truncate">16. EWDA konferencija - EWDA 2026</span> 2311 </div> 2312 <div class="text-sm text-gray-400">2026</div> 2313 </div> 2314 </div> 2315 <i 2316 class="fa-solid fa-arrow-right-long text-gray-300 transition-transform duration-200 group-hover:translate-x-1"></i> 2317 </a> 2318 </li> 2319 <li> 2320 <a href="https://sajam.net/sr/dogadjaj/57-medunarodni-sajam-lova-i-ribolova" 2321 class="group flex items-center justify-between gap-4 p-4 hover:bg-gray-50 transition"> 2322 <div class="flex items-center gap-4 min-w-0"> 2323 <div class="w-14 text-center shrink-0"> 2324 <div class="text-lg font-extrabold text-gray-900">30.09</div> 2325 <div class="text-xs text-gray-500">- 04.10</div> 2326 </div> 2327 <span class="h-6 w-px bg-neutral-200"></span> 2328 <div class="min-w-0"> 2329 <div class="flex items-center gap-2"> 2330 <span 2331 class="inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide bg-green-600 text-white"> 2332 U toku 2333 </span> 2334 <span 2335 class="text-base font-medium text-gray-900 truncate">57. MEÄUNARODNI SAJAM LOVA I RIBOLOVA</span> 2336 </div> 2337 <div class="text-sm text-gray-400">2026</div> 2338 </div> 2339 </div> 2340 <i 2341 class="fa-solid fa-arrow-right-long text-gray-300 transition-transform duration-200 group-hover:translate-x-1"></i> 2342 </a> 2343 </li> 2344 <li> 2345 <a href="https://sajam.net/sr/dogadjaj/sajam-ekologije-2026" 2346 class="group flex items-center justify-between gap-4 p-4 hover:bg-gray-50 transition"> 2347 <div class="flex items-center gap-4 min-w-0"> 2348 <div class="w-14 text-center shrink-0"> 2349 <div class="text-lg font-extrabold text-gray-900">30.09</div> 2350 <div class="text-xs text-gray-500">- 04.10</div> 2351 </div>
2352 <span class="h-6 w-px bg-neutral-200"></span> 2353 <div class="min-w-0"> 2354 <div class="flex items-center gap-2"> 2355 <span 2356 class="inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide bg-green-600 text-white"> 2357 U toku 2358 </span> 2359 <span 2360 class="text-base font-medium text-gray-900 truncate">SAJAM EKOLOGIJE - 2026</span> 2361 </div> 2362 <div class="text-sm text-gray-400">2026</div> 2363 </div> 2364 </div> 2365 <i 2366 class="fa-solid fa-arrow-right-long text-gray-300 transition-transform duration-200 group-hover:translate-x-1"></i> 2367 </a> 2368 </li> 2369 </ul> 2370 </div> 2371 2372 <div 2373 class="flex flex-col justify-between my-auto rounded-r-xl p-5 2374 bg-white min-w-0 break-words divide-y divide-brand-500/10"> 2375 <div class="pb-3"> 2376 <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-500 "> 2377 Kalendar</h4> 2378 <p class="mb-1 mt-3 ps-2 text-xs min-w-0 whitespace-normal break-words text-pretty text-gray-600"> 2379 Filtrirajte sajmove po kategoriji, sezoni ili statusu. 2380 </p> 2381 <div x-data="kalMini()" 2382 class="mt-3 flex-1 min-h-0 content-center"> 2383 2384 <form action="https://sajam.net/sr/kalendar" 2385 method="get" 2386 class="gap-3 flex flex-col min-h-0"> 2387 <input type="hidden" 2388 name="category" 2389 :value="category"> 2390 <input type="hidden" 2391 name="season" 2392 :value="season"> 2393 <input type="hidden" 2394 name="status" 2395 :value="status"> 2396 2397 <div class="grid gap-3"> 2398 2399 <div class="relative" 2400 x-data="{ open: false }"> 2401 2402 <button type="button" 2403 @click="open = !open" 2404 class="flex min-h-11 w-full items-center justify-between rounded-none border border-neutral-300 bg-white px-3 py-2 text-sm transition hover:border-brand-400 hover:bg-brand-50/30 focus:outline-none focus:ring-2 focus:ring-brand-500/20" 2405 :aria-expanded="open"> 2406 <span class="flex items-center gap-2 min-w-0"> 2407 <span class="shrink-0 text-[11px] uppercase tracking-wide text-gray-500">Kategorija</span> 2408 <template x-if="selectedOption('category')?.icon"> 2409 <i :class="selectedOption('category').icon" 2410 class="shrink-0 text-[13px] text-gray-500"></i> 2411 </template> 2412 <span class="truncate text-baseline font-semibold text-gray-900" 2413 x-text="label('category')"></span> 2414 </span> 2415 <i class="fa-solid fa-chevron-down text-[11px] text-gray-400 transition-transform duration-200" 2416 :class="open ? 'rotate-180' : ''"></i> 2417 </button> 2418 2419 <div x-show="open" 2420 x-transition.origin.top.left 2421 @click.outside="open = false" 2422 class="absolute z-20 mt-2 w-full overflow-hidden rounded-none border border-neutral-200 bg-white shadow-[0_12px_30px_rgba(23,23,23,0.10)]"> 2423 <div class="flex flex-col divide-y divide-gray-100"> 2424 <template x-for="opt in opts['category']" 2425 :key="opt.value"> 2426 <button type="button" 2427 @click="category = opt.value; open = false" 2428 class="w-full text-left px-3 py-2 text-sm transition font-medium focus:outline-none focus:ring-2 focus:ring-brand-500/30" 2429 :class="category === opt.value ? 2430 'bg-brand-500 text-white' : 2431 'hover:bg-gray-50 text-gray-900'">
2432 <span class="flex items-center gap-2"> 2433 <template x-if="opt.icon"> 2434 <i :class="opt.icon" 2435 class="shrink-0 text-[13px]"></i> 2436 </template> 2437 <span x-text="opt.label"></span> 2438 </span> 2439 </button> 2440 </template> 2441 </div> 2442 </div> 2443 </div> 2444 2445 2446 <div class="relative" 2447 x-data="{ open: false }"> 2448 2449 <button type="button" 2450 @click="open = !open" 2451 class="flex min-h-11 w-full items-center justify-between rounded-none border border-neutral-300 bg-white px-3 py-2 text-sm transition hover:border-brand-400 hover:bg-brand-50/30 focus:outline-none focus:ring-2 focus:ring-brand-500/20" 2452 :aria-expanded="open"> 2453 <span class="flex items-center gap-2 min-w-0"> 2454 <span class="shrink-0 text-[11px] uppercase tracking-wide text-gray-500">Sezona</span> 2455 <template x-if="selectedOption('season')?.icon"> 2456 <i :class="selectedOption('season').icon" 2457 class="shrink-0 text-[13px] text-gray-500"></i> 2458 </template> 2459 <span class="truncate text-baseline font-semibold text-gray-900" 2460 x-text="label('season')"></span> 2461 </span> 2462 <i class="fa-solid fa-chevron-down text-[11px] text-gray-400 transition-transform duration-200" 2463 :class="open ? 'rotate-180' : ''"></i> 2464 </button> 2465 2466 <div x-show="open" 2467 x-transition.origin.top.left 2468 @click.outside="open = false" 2469 class="absolute z-20 mt-2 w-full overflow-hidden rounded-none border border-neutral-200 bg-white shadow-[0_12px_30px_rgba(23,23,23,0.10)]"> 2470 <div class="flex flex-col divide-y divide-gray-100"> 2471 <template x-for="opt in opts['season']" 2472 :key="opt.value"> 2473 <button type="button" 2474 @click="season = opt.value; open = false" 2475 class="w-full text-left px-3 py-2 text-sm transition font-medium focus:outline-none focus:ring-2 focus:ring-brand-500/30" 2476 :class="season === opt.value ? 2477 'bg-brand-500 text-white' : 2478 'hover:bg-gray-50 text-gray-900'"> 2479 <span class="flex items-center gap-2"> 2480 <template x-if="opt.icon"> 2481 <i :class="opt.icon" 2482 class="shrink-0 text-[13px]"></i> 2483 </template> 2484 <span x-text="opt.label"></span> 2485 </span> 2486 </button> 2487 </template> 2488 </div> 2489 </div> 2490 </div> 2491 2492 2493 <div class="relative" 2494 x-data="{ open: false }"> 2495 2496 <div class="w-full"> 2497 <div class="mb-1 text-[11px] uppercase tracking-wide text-gray-500">Status</div> 2498 <div class="flex flex-wrap gap-2"> 2499 <template x-for="opt in opts['status']" 2500 :key="opt.value"> 2501 <button type="button" 2502 @click="status = opt.value" 2503 class="flex-1 rounded-full px-3 py-1.5 text-xs uppercase font-medium border transition focus:outline-none focus:ring-2 focus:ring-brand-500/30" 2504 :class="status === opt.value ? 2505 'bg-brand-500 text-white border-brand-500 font-semibold' : 2506 'bg-white text-gray-800 border-gray-200 hover:bg-gray-50'"> 2507 <span x-text="opt.label"></span> 2508 </button> 2509 </template> 2510 </div> 2511 </div> 2512 </div> 2513 </div> 2514 2515 <div class="mt-3"> 2516 <button type="submit" 2517 class="ui-btn relative inline-flex items-center justify-center select-none 2518 transition will-change-transform duration-150 2519 focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2 2520 disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-brand-500 text-white bg-brand-500 hover:bg-black hover:text-white min-h-11 text-sm px-4 py-2 gap-2.5 w-full u-shadow" style="--slab: rgba(202,33,43,.9);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)" 2521 data-variant="primary" 2522 data-scheme="light"> 2523 <i class="fa-solid fa-magnifying-glass"></i>
2524 <span class="ui-btn__label">Pretraži dogaÄaje</span> 2525 </button> 2526 </div> 2527 </form> 2528 </div> 2529 2530 </div> 2531 </div> 2532 <!--<div class="mt-4 flex flex-wrap justify-between gap-2"> 2533 <a href="https://sajam.net/sr/kalendar" 2534 class="ui-btn relative inline-flex items-center justify-center select-none 2535 transition will-change-transform duration-150 2536 focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2 2537 disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-brand-500 text-white bg-brand-500 hover:bg-black hover:text-white min-h-11 text-sm px-4 py-2 gap-2.5 u-shadow" style="--slab: rgba(202,33,43,.9);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)" 2538 data-variant="primary" 2539 data-scheme="light"> 2540 <i class="fa-solid fa-folder-tree"></i> 2541 <span class="ui-btn__label">btn.cta.archive</span> 2542 </a> 2543 <a href="https://sajam.net/sr/kalendar" 2544 class="ui-btn relative inline-flex items-center justify-center select-none 2545 transition will-change-transform duration-150 2546 focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2 2547 disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-brand-500 text-white bg-brand-500 hover:bg-black hover:text-white min-h-11 text-sm px-4 py-2 gap-2.5 u-shadow" style="--slab: rgba(202,33,43,.9);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)" 2548 data-variant="primary" 2549 data-scheme="light"> 2550 <span class="ui-btn__label">btn.cta.calendar</span> 2551 <i class="fa-solid fa-arrow-right"></i> 2552 </a> 2553 </div>--> 2554</div> 2555</div> 2556 <div x-show="activeMenu === 'about'"><div class=""> 2557 <div class="grid grid-cols-4 gap-3 pb-8"> 2558 <div class="col-span-3 items-stretch min-w-0 bg-white p-4 pb-8 rounded-b-xl"> 2559 <div class="relative flex bg-brand-400 aspect-[16/2] items-end p-4 overflow-hidden"> 2560 <div class="relative z-[2] text-white ps-2"> 2561 <h3 class="text-lg sm:text-3xl uppercase font-heading tracking-wider font-semibold"> 2562 O Sajmu</h3> 2563 <p class="text-xs sm:text-sm leading-snug font-medium">Upoznajte se sa tradicijom dugom preko jednog 2564 veka, naÅ¡om infrastrukturom, misijom i vrednostima.<
2564/p> 2565 </div> 2566 <div class="relative z-[2] ms-auto"> 2567 <img src="https://sajam.net/images/logo.svg" 2568 alt="Novosadski Sajam Logo" 2569 loading="lazy" 2570 decoding="async" 2571 fetchpriority="low" 2572 class="relative z-10 block transition-all duration-300 h-14 pointer-events-none"> 2573 </div> 2574 <div class="inset-0 z-[1] absolute bg-gradient-to-r from-black/80 to-black/30"></div> 2575 <img data-mega="about" 2576 alt="" 2577 width="1300" 2578 height="170" 2579 class="absolute inset-0 w-full h-full object-cover object-center z-0" 2580 loading="lazy" 2581 decoding="async" 2582 fetchpriority="low"> 2583 </div> 2584 <div class="grid grid-cols-4 pt-6 mt-4 px-4 divide-x divide-brand-500/5"> 2585 <div class="min-w-0 px-4"> 2586 <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400 break-words text-pretty min-w-0 truncate"> 2587 Sajamski kompleks</h4> 2588 2589 <ul class="mt-3 space-y-2"> 2590 2591 <li class="min-w-0"> 2592 <a href="https://sajam.net/sr/posetioci/plan-sajma" 2593 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 2594 text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words 2595 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 2596 Prostor i mapa Sajma 2597 <span 2598 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 2599 <i data-ph="caret-right-bold" 2600 class="w-3.5 h-3.5"></i></span> 2601 </a> 2602 </li> 2603 2604 <li class="min-w-0"> 2605 <a href="https://sajam.net/sr/kongres" 2606 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 2607 text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words 2608 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 2609 Kongresni centar âMaster" 2610 <span 2611 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 2612 <i data-ph="caret-right-bold" 2613 class="w-3.5 h-3.5"></i></span> 2614 </a> 2615 </li> 2616 2617 <li class="min-w-0"> 2618 <a href="https://sajam.net/sr/kongres/sale-kapacitet" 2619 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 2620 text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words 2621 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 2622 Hale 2623 <span 2624 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 2625 <i data-ph="caret-right-bold" 2626 class="w-3.5 h-3.5"></i></span> 2627 </a> 2628 </li> 2629 2630 <li class="min-w-0"> 2631 <a href="https://sajam.net/sr/posetioci/parking" 2632 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 2633 text-gray-700 text-sm transition duration-150 ease-linear min-w-0
2633whitespace-normal break-words 2634 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 2635 Parking/Infrastruktura 2636 <span 2637 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 2638 <i data-ph="caret-right-bold" 2639 class="w-3.5 h-3.5"></i></span> 2640 </a> 2641 </li> 2642 </ul> 2643</div> 2644 2645 <div class="min-w-0 px-4"> 2646 <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400 break-words text-pretty min-w-0 truncate"> 2647 Istorija i misija</h4> 2648 2649 <ul class="mt-3 space-y-2"> 2650 2651 <li class="min-w-0"> 2652 <a href="https://sajam.net/sr/o-nama/istorijski-pregled" 2653 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 2654 text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words 2655 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 2656 Istorijski pregled 2657 <span 2658 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 2659 <i data-ph="caret-right-bold" 2660 class="w-3.5 h-3.5"></i></span> 2661 </a> 2662 </li> 2663 2664 <li class="min-w-0"> 2665 <a href="https://sajam.net/sr/o-nama/misija-vizija-vrednosti" 2666 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 2667 text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words 2668 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 2669 Misija, vizija i vrednosti 2670 <span 2671 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 2672 <i data-ph="caret-right-bold" 2673 class="w-3.5 h-3.5"></i></span> 2674 </a> 2675 </li> 2676 2677 <li class="min-w-0"> 2678 <a href="https://sajam.net/sr/media/galerije" 2679 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 2680 text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words 2681 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 2682 Galerija 2683 <span 2684 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 2685 <i data-ph="caret-right-bold" 2686 class="w-3.5 h-3.5"></i></span> 2687 </a> 2688 </li> 2689 </ul> 2690</div> 2691 2692 <div class="min-w-0 px-4"> 2693 <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400 break-words text-pretty min-w-0 truncate"> 2694 Upravljanje & transparentnost</h4> 2695 2696 <ul class="mt-3 space-y-2"> 2697 2698 <li class="min-w-0"> 2699 <a href="https://sajam.net/sr/korporativno-upravljanje" 2700 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 2701 text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words 2702 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 2703 Korporativno upravljanje
2704 <span 2705 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 2706 <i data-ph="caret-right-bold" 2707 class="w-3.5 h-3.5"></i></span> 2708 </a> 2709 </li> 2710 2711 <li class="min-w-0"> 2712 <a href="https://sajam.net/sr/o-nama/izvestaji-finansije" 2713 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 2714 text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words 2715 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 2716 IzveÅ¡taji & finansije 2717 <span 2718 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 2719 <i data-ph="caret-right-bold" 2720 class="w-3.5 h-3.5"></i></span> 2721 </a> 2722 </li> 2723 2724 <li class="min-w-0"> 2725 <a href="https://sajam.net/sr/o-nama/javne-nabavke" 2726 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 2727 text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words 2728 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 2729 Javne nabavke & tenderi 2730 <span 2731 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 2732 <i data-ph="caret-right-bold" 2733 class="w-3.5 h-3.5"></i></span> 2734 </a> 2735 </li> 2736 2737 <li class="min-w-0"> 2738 <a href="https://sajam.net/sr/o-nama/trziste-kapitala" 2739 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 2740 text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words 2741 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 2742 IzveÅ¡tavanje - Zakon o tržiÅ¡tu kapitala 2743 <span 2744 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 2745 <i data-ph="caret-right-bold" 2746 class="w-3.5 h-3.5"></i></span> 2747 </a> 2748 </li> 2749 </ul> 2750</div> 2751 2752 <div class="min-w-0 px-4"> 2753 <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400 break-words text-pretty min-w-0 truncate"> 2754 Partneri & kontakt</h4> 2755 2756 <ul class="mt-3 space-y-2"> 2757 2758 <li class="min-w-0"> 2759 <a href="https://sajam.net/sr/o-nama/clanstva-partneri" 2760 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 2761 text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words 2762 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 2763 Partneri & Älanstva 2764 <span 2765 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 2766 <i data-ph="caret-right-bold" 2767 class="w-3.5 h-3.5"></i></span> 2768 </a> 2769 </li> 2770 2771 <li class="min-w-0"> 2772 <a href="https://sajam.net/sr/kontakt" 2773 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 2774 text-gray-700 text-sm transition duration-150 ease-linear min-w-0
2774whitespace-normal break-words 2775 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 2776 Kontakt & dolazak 2777 <span 2778 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 2779 <i data-ph="caret-right-bold" 2780 class="w-3.5 h-3.5"></i></span> 2781 </a> 2782 </li> 2783 2784 <li class="min-w-0"> 2785 <a href="https://sajam.net/sr/o-nama/menadzment" 2786 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 2787 text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words 2788 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 2789 Menadžment Tim 2790 <span 2791 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 2792 <i data-ph="caret-right-bold" 2793 class="w-3.5 h-3.5"></i></span> 2794 </a> 2795 </li> 2796 2797 <li class="min-w-0"> 2798 <a href="https://sajam.net/sr/obavestenja" 2799 class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium 2800 text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words 2801 /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group"> 2802 FAQ 2803 <span 2804 class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition"> 2805 <i data-ph="caret-right-bold" 2806 class="w-3.5 h-3.5"></i></span> 2807 </a> 2808 </li> 2809 </ul> 2810</div> 2811 </div> 2812 </div> 2813 2814 2815 <div 2816 class="flex flex-col justify-between my-auto rounded-r-xl p-5 px-6 2817 bg-white min-w-0 break-words divide-y divide-brand-500/10"> 2818 <div> 2819 <div class="flex items-center gap-3"> 2820 <a href="https://sajam.net/sr" 2821 class="relative inline-flex items-center"> 2822 2823 <img src="https://sajam.net/images/logo-red.svg"
2824 alt="Novosadski Sajam Logo" 2825 class="relative z-10 block transition-all duration-300 h-14"> 2826 </a> 2827 <span class="sr-only">Novosadski Sajam</span> 2828 </div> 2829 <h3 class="mt-2">Novosadski sajam</h3> 2830 <p class="mt-3 font-normal text-sm text-gray-600 text-wrap">VodeÄa sajamska kuÄa u Srbiji - viÅ¡e od jednog veka povezuje industriju, inovacije i zajednicu.</p> 2831 2832 2833 <div class="mt-4 grid grid-cols-3 w-fit items-center gap-3"> 2834 <a href="https://instagram.com/novosadski_sajam" 2835 class="ui-btn relative inline-flex items-center justify-center select-none 2836 transition will-change-transform duration-150 2837 focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2 2838 disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-brand-500 text-black bg-white rounded-full border-[2px] border-brand-500 min-h-11 text-sm px-4 py-2 gap-2.5 u-shadow aspect-1/1 !p-2 leading-0" style="--slab: rgba(202,33,43,.75);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)" target="_blank" rel="noopener nofollow" aria-label="Instagram" 2839 data-variant="secondary" 2840 data-scheme="light"> 2841 <span class="ui-btn__label"><i class="fa-brands fa-instagram text-lg"></i></span> 2842 </a> 2843 <a href="https://facebook.com/novosadski.sajam" 2844 class="ui-btn relative inline-flex items-center justify-center select-none 2845 transition will-change-transform duration-150 2846 focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2 2847 disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-brand-500 text-black bg-white rounded-full border-[2px] border-brand-500 min-h-11 text-sm px-4 py-2 gap-2.5 u-shadow aspect-1/1 !p-2 leading-0" style="--slab: rgba(202,33,43,.75);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)" target="_blank" rel="noopener nofollow" aria-label="Facebook" 2848 data-variant="secondary" 2849 data-scheme="light"> 2850 <span class="ui-btn__label"><i class="fa-brands fa-facebook text-lg"></i></span> 2851 </a> 2852 <a href="https://youtube.com/@novosadskisajam" 2853 class="ui-btn relative inline-flex items-center justify-center select-none 2854 transition will-change-transform duration-150 2855 focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2 2856 disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-brand-500 text-black bg-white rounded-full border-[2px] border-brand-500 min-h-11 text-sm px-4 py-2 gap-2.5 u-shadow aspect-1/1 !p-2 leading-0" style="--slab: rgba(202,33,43,.75);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)" target="_blank" rel="noopener nofollow" aria-label="YouTube" 2857 data-variant="secondary" 2858 data-scheme="light"> 2859 <span class="ui-btn__label"><i class="fa-brands fa-youtube text-lg"></i></span> 2860 </a> 2861 </div> 2862 </div> 2863 </div> 2864 </div> 2865 2866 2867 <style> 2868 .ql-tile { 2869 position: relative; 2870 display: flex; 2871 align-items: center; 2872 gap: .6rem; 2873 border: 1px solid #e5e7eb; 2874 border-radius: .75rem; 2875 background: #fff; 2876 padding: .6rem .75rem; 2877 transition: .2s ease 2878 } 2879 2880 .ql-tile:hover { 2881 background: #f9fafb; 2882 border-color: #e5e7eb; 2883 box-shadow: 0 1px 0 rgba(0, 0, 0, .02) 2884 } 2885 2886 .ql-chip { 2887 display: inline-flex; 2888 align-items: center; 2889 justify-content: center; 2890 width: 28px; 2891 height: 28px; 2892 border-radius: .5rem; 2893 background: #f3f4f6; 2894 color: hsl(var(--brand-500)) 2895 } 2896 2897 .ql-label { 2898 font-weight: 600; 2899 color: #111827 2900 } 2901 2902 .ql-arrow { 2903 margin-left: auto; 2904 color: #9ca3af; 2905 transition: transform .2s ease 2906 } 2907 2908 .ql-tile:hover .ql-arrow { 2909 transform: translateX(2px) 2910 } 2911 </style> 2912</div> 2913</div> 2914 <div x-show="activeMenu === 'contact'"><div class=""> 2915 <div class="grid grid-cols-4 gap-3 pb-8"> 2916 <div class="col-span-3 items-stretch min-w-0 bg-white p-4 pb-8 rounded-b-xl"> 2917 <div class="relative flex bg-brand-400 aspect-[16/2] items-end p-4 overflow-hidden"> 2918 <div class="relative z-[2] text-white ps-2"> 2919 <h3 class="text-lg sm:text-3xl uppercase font-heading tracking-wider font-semibold"> 2920 Kontakt</h3> 2921 <p class="text-xs sm:text-sm leading-snug font-medium">
2921Tu smo za sva vaÅ¡a pitanja - pronaÄite 2922 direktne kontakte naÅ¡ih sektora ili nam jednostavno poÅ¡aljite poruku.</p> 2923 </div> 2924 <div class="relative z-[2] ms-auto"> 2925 <a href="https://sajam.net/sr/kontakt" 2926 class="ui-btn relative inline-flex items-center justify-center select-none 2927 transition will-change-transform duration-150 2928 focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2 2929 disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-white text-black bg-white min-h-12 text-base px-5 py-3 gap-3 u-shadow" style="--slab: rgba(202,33,43,.9);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)" 2930 data-variant="primary" 2931 data-scheme="dark"> 2932 <i class="fa-solid fa-up-right-from-square"></i> 2933 <span class="ui-btn__label">Pogledaj sve kontakte</span> 2934 </a> 2935 </div> 2936 <div class="inset-0 z-[1] absolute bg-gradient-to-r from-black/80 to-black/30"></div> 2937 <img data-mega="contact" 2938 alt="" 2939 width="1300" 2940 height="170" 2941 class="absolute inset-0 w-full h-full object-cover object-center z-0" 2942 loading="lazy" 2943 decoding="async" 2944 fetchpriority="low"> 2945 </div> 2946 <div class="grid grid-cols-3 gap-3 pt-6 mt-4 px-4"> 2947 <div class="flex flex-col rounded-xl border border-gray-200 bg-brand-50 hover:bg-white p-5 text-wrap"> 2948 <h3 class="font-heading font-bold text-gray-900">Novosadski Sajam</h3> 2949 2950 <div class="text-sm text-gray-600 mt-0.5"> 2951 <span>Centrala</span> 2952 <div class="flex text-xs text-gray-400 items-center gap-2 mt-1"> 2953 <i data-ph="clock-bold" 2954 class="w-4 h-4"></i> 2955 <span class="">10:00 - 18:00</span> 2956 </div> 2957 <p class="text-xs font-normal inline-block text-gray-500 mb-4"><strong>Hajduk Veljkova 2958 11</strong>, 2959 21137 Novi Sad 2960 </p> 2961 </div> 2962 2963 <div class="mt-auto grid grid-rows-3 gap-3 justify-baseline"> 2964 <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50" href="tel:+3810214830000" 2965 > 2966 2967 <span class="relative shrink-0"> 2968 <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900"> 2969 <i class="fa-solid fa-phone text-sm"></i> 2970 </span> 2971 </span> 2972 2973 <span class="h-6 w-px bg-gray-200"></span> 2974 2975 2976 <span class="min-w-0 flex flex-col"> 2977 <span class="text-xs font-semibold text-neutral-900 truncate"> 2978 +381 (0)21/483-00-00 2979 </span> 2980 </span> 2981 2982 2983 <span 2984 class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1"> 2985 <i class="fa-solid fa-arrow-right-long"></i> 2986 </span> 2987 </a> 2988 <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50" href="mailto:[email protected]" 2989 > 2990 2991 <span class="relative shrink-0"> 2992 <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900"> 2993 <i class="fa-solid fa-envelope text-sm"></i> 2994 </span> 2995 </span> 2996
2997 <span class="h-6 w-px bg-gray-200"></span> 2998 2999 3000 <span class="min-w-0 flex flex-col"> 3001 <span class="text-xs font-semibold text-neutral-900 truncate"> 3002 [email protected] 3003 </span> 3004 </span> 3005 3006 3007 <span 3008 class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1"> 3009 <i class="fa-solid fa-arrow-right-long"></i> 3010 </span> 3011 </a> 3012 3013 <a href="https://maps.google.com/?q=Hajduk+Veljkova+11,Novi+Sad" 3014 class="ui-btn relative inline-flex items-center justify-center select-none 3015 transition will-change-transform duration-150 3016 focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2 3017 disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-brand-500 text-black bg-white rounded-full border-[2px] border-brand-500 min-h-10 text-xs px-3 py-1.5 gap-2 u-shadow place-self-end" style="--slab: rgba(202,33,43,.75);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)" 3018 data-variant="secondary" 3019 data-scheme="light"> 3020 <span class="ui-btn__label">Otvori mapu</span> 3021 <i class="fa-solid fa-arrow-up-right-from-square"></i> 3022 </a> 3023 </div> 3024 </div> 3025 <div class="flex flex-col rounded-xl border border-gray-200 bg-blue-50 hover:bg-white p-5 text-wrap"> 3026 <h3 class="font-heading font-bold text-gray-900">Kongresni Centar</h3> 3027 3028 <div class="text-sm text-gray-600 mt-0.5"> 3029 <span>Odeljenje Kongresnog Centra</span> 3030 <div class="flex text-xs text-gray-400 items-center gap-2 mt-1"> 3031 <i data-ph="clock-bold" 3032 class="w-4 h-4"></i> 3033 <span class="">10:00 - 18:00</span> 3034 </div> 3035 <p class="text-xs font-normal inline-block text-gray-500 mb-4"><strong>Hajduk Veljkova 3036 11</strong>, 3037 21137 Novi Sad 3038 </p> 3039 </div> 3040 3041 <div class="mt-auto grid grid-rows-3 gap-3 justify-baseline"> 3042 <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50" href="tel:+3810214830777" 3043 > 3044 3045 <span class="relative shrink-0"> 3046 <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900"> 3047 <i class="fa-solid fa-phone text-sm"></i> 3048 </span> 3049 </span> 3050 3051 <span class="h-6 w-px bg-gray-200"></span> 3052 3053 3054 <span class="min-w-0 flex flex-col"> 3055 <span class="text-xs font-semibold text-neutral-900 truncate"> 3056 +381 (0)21/483-07-77 3057 </span> 3058 </span> 3059 3060 3061 <span 3062 class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1"> 3063 <i class="fa-solid fa-arrow-right-long"></i> 3064 </span> 3065 </a> 3066 <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50" href="tel:+3810214830778" 3067 > 3068 3069 <span class="relative shrink-0"> 3070 <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900"> 3071 <i class="fa-solid fa-phone text-sm"></i> 3072 </span> 3073 </span> 3074 3075 <span class="h-6 w-px bg-gray-200"></span> 3076 3077
3078 <span class="min-w-0 flex flex-col"> 3079 <span class="text-xs font-semibold text-neutral-900 truncate"> 3080 +381 (0)21/483-07-78 3081 </span> 3082 </span> 3083 3084 3085 <span 3086 class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1"> 3087 <i class="fa-solid fa-arrow-right-long"></i> 3088 </span> 3089 </a> 3090 <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50" href="mailto:[email protected]" 3091 > 3092 3093 <span class="relative shrink-0"> 3094 <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900"> 3095 <i class="fa-solid fa-envelope text-sm"></i> 3096 </span> 3097 </span> 3098 3099 <span class="h-6 w-px bg-gray-200"></span> 3100 3101 3102 <span class="min-w-0 flex flex-col"> 3103 <span class="text-xs font-semibold text-neutral-900 truncate"> 3104 [email protected] 3105 </span> 3106 </span> 3107 3108 3109 <span 3110 class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1"> 3111 <i class="fa-solid fa-arrow-right-long"></i> 3112 </span> 3113 </a> 3114 3115 </div> 3116 </div> 3117 3118 <div class="flex flex-col rounded-xl border border-gray-200 bg-gray-50 hover:bg-white p-5 text-wrap"> 3119 <h3 class="font-heading font-bold text-gray-900">Press i akreditacije</h3> 3120 3121 3122 <div class="block text-sm text-gray-600 mt-0.5"> 3123 <span>Sektor za integrisane marketing komunikacije</span> 3124 <p class="text-xs font-normal inline-block text-gray-500 mb-4"><strong>Hajduk Veljkova 3125 11</strong>, 3126 21137 Novi Sad 3127 </p> 3128 </div> 3129 3130 <div class="mt-auto grid grid-rows-3 gap-3 justify-baseline"> 3131 <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50" href="tel:+3810214831136" 3132 > 3133 3134 <span class="relative shrink-0"> 3135 <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900"> 3136 <i class="fa-solid fa-phone text-sm"></i> 3137 </span> 3138 </span> 3139 3140 <span class="h-6 w-px bg-gray-200"></span> 3141 3142 3143 <span class="min-w-0 flex flex-col"> 3144 <span class="text-xs font-semibold text-neutral-900 truncate"> 3145 +381 (0)21/483-11-36 3146 </span> 3147 </span> 3148 3149 3150 <span 3151 class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1"> 3152 <i class="fa-solid fa-arrow-right-long"></i> 3153 </span> 3154 </a> 3155 <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50" href="tel:+3810214831118" 3156 > 3157 3158 <span class="relative shrink-0"> 3159 <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900"> 3160 <i class="fa-solid fa-phone text-sm"></i> 3161 </span> 3162 </span> 3163 3164 <span class="h-6 w-px bg-gray-200"></span> 3165 3166 3167 <span class="min-w-0 flex flex-col"> 3168 <span class="text-xs font-semibold text-neutral-900 truncate"> 3169 +381 (0)21/483-11-18 3170 </span> 3171 </span> 3172 3173
3174 <span 3175 class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1"> 3176 <i class="fa-solid fa-arrow-right-long"></i> 3177 </span> 3178 </a> 3179 <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50" href="mailto:[email protected]" 3180 > 3181 3182 <span class="relative shrink-0"> 3183 <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900"> 3184 <i class="fa-solid fa-envelope text-sm"></i> 3185 </span> 3186 </span> 3187 3188 <span class="h-6 w-px bg-gray-200"></span> 3189 3190 3191 <span class="min-w-0 flex flex-col"> 3192 <span class="text-xs font-semibold text-neutral-900 truncate"> 3193 [email protected] 3194 </span> 3195 </span> 3196 3197 3198 <span 3199 class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1"> 3200 <i class="fa-solid fa-arrow-right-long"></i> 3201 </span> 3202 </a> 3203 </div> 3204 </div> 3205 </div> 3206 </div> 3207 <div class="flex flex-col justify-between my-auto rounded-r-xl p-5 3208 bg-white min-w-0 break-words"> 3209 <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-500"> 3210 Pišite nam</h4> 3211 <p class="mb-1 mt-3 ps-2 text-xs text-wrap text-gray-600"> 3212 Imate pitanje za nas ili samo želite da nam pošaljete poruku? 3213 </p> 3214 3215 3216 <div x-data="contactForm()" 3217 class="pb-5"> 3218 3219 <template x-if="!sent"> 3220 <div> 3221 <p x-show="error" 3222 x-text="error" 3223 class="mt-2 rounded bg-red-50 border border-red-200 text-red-800 p-2 text-sm"></p> 3224 3225 <form class="mt-4 grid gap-3" 3226 @submit.prevent="submit"> 3227 <input type="text" 3228 x-model="form.name" 3229 required 3230 class="w-full flex items-center justify-between rounded-lg 3231 border border-gray-200 bg-white px-3 py-2 text-sm 3232 hover:bg-gray-50 hover:border-gray-300 focus:outline-none 3233 focus:ring-2 focus:ring-brand-500/30 focus:bg-white transition placeholder:font-normal placeholder:text-sm" 3234 placeholder="Vaše ime"> 3235 3236 <input type="email" 3237 x-model="form.email" 3238 required 3239 class="w-full flex items-center justify-between rounded-lg 3240 border border-gray-200 bg-white px-3 py-2 text-sm 3241 hover:bg-gray-50 hover:border-gray-300 focus:outline-none 3242 focus:ring-2 focus:ring-brand-500/30 focus:bg-white transition placeholder:font-normal placeholder:text-sm" 3243 placeholder="Email adresa"> 3244 3245 <textarea x-model="form.message" 3246 rows="3" 3247 required 3248 class="w-full flex items-center justify-between rounded-lg 3249 border border-gray-200 bg-white px-3 py-2 text-sm 3250 hover:bg-gray-50 hover:border-gray-300 focus:outline-none 3251 focus:ring-2 focus:ring-brand-500/30 focus:bg-white transition placeholder:font-normal placeholder:text-sm" 3252 placeholder="Vaša poruka..."></textarea> 3253 3254 <button type="submit" 3255 class="ui-btn relative inline-flex items-center justify-center select-none 3256 transition will-change-transform duration-150 3257 focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2 3258 disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-brand-500 text-white bg-brand-500 hover:bg-black hover:text-white min-h-11 text-sm px-4 py-2 gap-2.5 w-full u-shadow" style="--slab: rgba(202,33,43,.9);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)" 3259 data-variant="primary" 3260 data-scheme="light">
3261 <span class="ui-btn__label"><template x-if="!loading"> 3262 <span>PoÅ¡aljite poruku</span> 3263 </template> 3264 <template x-if="loading"> 3265 <span class="inline-flex items-center gap-2"> 3266 <svg class="animate-spin h-4 w-4" 3267 viewBox="0 0 24 24" 3268 fill="none"> 3269 <circle class="opacity-25" 3270 cx="12" 3271 cy="12" 3272 r="10" 3273 stroke="currentColor" 3274 stroke-width="4" /> 3275 <path class="opacity-75" 3276 fill="currentColor" 3277 d="M4 12a8 8 0 018-8v4A4 4 0 008 12H4z" /> 3278 </svg> Poruka se Å¡alje... 3279 </span> 3280 </template></span> 3281 <i class="fa-solid fa-paper-plane"></i> 3282 </button> 3283 </form> 3284 </div> 3285 </template> 3286 3287 3288 <template x-if="sent"> 3289 <div x-transition 3290 class="text-center py-6"> 3291 <div 3292 class="mx-auto mb-3 inline-flex h-12 w-12 items-center justify-center rounded-full bg-emerald-50"> 3293 <i class="fa-solid fa-check text-emerald-600 text-xl"></i> 3294 </div> 3295 <h4 class="text-lg font-extrabold text-gray-900">VaÅ¡a poruka je uspeÅ¡no poslata! 3296 </h4> 3297 <p class="text-sm text-gray-600 mt-1">Hvala vam, ubrzo Äemo vam odgovoriti!</p> 3298 <button @click="reset()" 3299 class="mt-4 inline-flex items-center gap-2 rounded border border-gray-200 px-3 py-1.5 text-sm font-semibold hover:bg-gray-50"> 3300 PoÅ¡alji ponovo <i class="fa-solid fa-rotate"></i> 3301 </button> 3302 </div> 3303 </template> 3304 </div> 3305 </div> 3306 </div> 3307</div> 3308</div> 3309 </div> 3310 3311 <template x-teleport="body"> 3312 <div x-show="open" 3313 x-transition.opacity 3314 class="fixed inset-0 z-40 bg-black/25 backdrop-blur-sm [content-visibility:auto] [contain-intrinsic-size:1000px]" 3315 @click="open = false" 3316 aria-hidden="true"> 3317 <div aria-hidden="true" 3318 class="absolute inset-0 z-0 pointer-events-none overflow-hidden"> 3319 <svg class="hidden logomask md:block absolute right-[2%] bottom-[2%] w-[400px] max-w-none opacity-10 select-none text-white" 3320 3321 role="img"
3322 aria-label="Novosadski Sajam" 3323 viewBox="0 0 126.41 126.45" 3324 xmlns="http://www.w3.org/2000/svg" 3325 preserveAspectRatio="xMidYMid meet" 3326 fill="currentColor"> 3327 <g fill="#fff" 3328 fill-rule="evenodd"> 3329 <path d="m0 0-.06.03-.79.48-.8.54-.48.37C-1.43-.37-.76-1.85.09-3.52l.1-.23.17-.11 1.49-.66.3-.14.15-.06A59 59 0 0 0 .09-.22zm11.64 60.8-.14-.03-.17-.06-.3-.08-.24-.06V47.64l.26-.05.31-.09.14-.05.18-.03.34-.07.2-.02v13.55l-.24-.03ZM11.5-3.55l-.5.03-.2.03v-1.9l.28.05.34.09.08.02.26.06.29.09.17.02v1.45l-.2.03zm11.37 1.93-.51-.2-.26-.09q-.69-1.39-1.42-2.75l.31-.08.4-.14.4-.12.25-.11c.12.2.2.4.32.6q.9 1.7 1.68 3.43L24-1.11zm28.5 9.1q-3.94 1.2-7.99 2.1l-.99.23q.54 1.34 1 2.72a51 51 0 0 1 2.37 14.55h10.46a45 45 0 0 0-4.85-19.6m-7.99-11.1a45 45 0 0 0-10.99-8.2 94 94 0 0 1-3.1 1.36q-.72.3-1.48.6.77.6 1.47 1.2A47 47 0 0 1 41.85 8.48q.76-.15 1.53-.36c2.48-.57 4.92-1.23 7.3-1.9a46 46 0 0 0-7.3-9.84m-14.1-9.71a44 44 0 0 0-13.34-3.47q3.4 1.4 6.42 3.18l.79.49-.43.2-.36.17-.34.16-.32.12-.11.06a51 51 0 0 0-7.27-3.5 52 52 0 0 1 3.64 4.37h-.3l-.3.03h-.66l-.3-.03h-.24q-1.36-1.78-2.89-3.4a5 5 0 0 1-1.05.37v2.1l-.03-.03-.37-.09-.32-.08h-.05l-.37-.12-.29-.05v-1.73c-.36-.1-.73-.2-1.05-.38q-.81.84-1.59 1.76l-.34-.02h-.74l-.36.02-.38.04h-.05a36 36 0 0 1 2.44-2.79 49 49 0 0 0-10.6 5.63c.66.23 1.32.4 1.97.6l.27.08v1.45L.1-8.23A53 53 0 0 1-3.27-9.3q-1.61 1.21-3.06 2.56A46 46 0 0 0-17.46 8.78c2.57.54 5.22 1.03 7.85 1.42l-.07.14-.4.85-.18.34q-3.9-.6-7.78-1.41a48 48 0 0 0-3.35 16.96h1.64l-.02.14-.1.22-.04.23-.07.23-.05.17-.03.2-.05.17v.03h-1.28q0 2.04.23 4.03l-.03.03-.14.26-.15.25-.13.26-.12.25-.12.29-.11.25-.1.28-.13.3-.08.28-.03.03q-.47-3.25-.51-6.51h-10.43A44 44 0 0 0-28.38 48c.68-.22 1.36-.39 2.05-.6q3.4-.92 6.86-1.72a50 50 0 0 1-2.12-6.97h1.45a47 47 0 0 0 2.1 6.68c3.83-.8 7.76-1.45 11.7-1.93.31-.03.66-.09.97-.11a60 60 0 0 1-.85-4.64h1.45q.33 2.26.79 4.5c1.37-.15 2.7-.3 4.07-.4q1.88-.15 3.8-.23l-.26.2-.53.45-.51.48-.34.37q-1.1.08-2.16.14-1.88.17-3.72.37a65 65 0 0 0 2.1 7.08l-.06.2-.1.74-.04.76-.03.74.03.77.04.28a65 65 0 0 1-3.37-10.43q-.63.08-1.27.15-5.65.7-11.17 1.85A45.4 45.4 0 0 0-3.3 64.8c1.14-.36 2.25-.73 3.39-1.02q.71-.21 1.47-.36l.08.1.47.52.48.5.05.06q-1.27.28-2.55.66-1 .25-2 .6.99.67 2 1.3 3.91 2.49 8.6 4.3a51 51 0 0 1-4.48-5.5l.56.4.6.4.62.35.63.3.65.32.09.03q1.12 1.4 2.35 2.7c.31-.18.72-.31 1.08-.37v-1.37l.71.09.72.06v1.19q.6.1 1.07.4.8-.82 1.51-1.68l.23-.03.65-.1.65-.15.63-.17h.06a80 80 0 0 1-2.7 3.15 53 53 0 0 0 8.04-3.98q1.28-.8 2.53-1.65c-.8-.25-1.54-.48-2.3-.68l.4-.4.44-.45.3-.31q1.27.38 2.55.8a45.6 45.6 0 0 0 14.17-18.06c-3.68-.79-7.4-1.38-11.17-1.86q-.63-.08-1.27-.15a68 68 0 0 1-2.07 7.11l-.09-.09-.28-.17-.31-.14-.28-.11-.32-.12a57 57 0 0 0 1.93-6.62q-.94-.11-1.87-.2l.39-.2 1.05-.62.63-.4q.07.02.12.03.03-.07.02-.11l.29-.17.99-.71.43-.34-.31 1.48q.5.05.95.1Q35.2 44.2 41 45.4a49 49 0 0 0 2.4-7.98q.88-4.42.95-8.95h-6.76l.06-.26.29-1.13h6.42a48 48 0 0 0-.97-9.01A49 49 0 0 0 41 10.12q-2.48.5-4.94.93l-.1-.23-.59-1.08q2.56-.42 5.06-.96A45 45 0 0 0 26.25-9.29q-1.02.35-2.05.65v-1.47c.24-.06.43-.12.66-.2l-.62-.43.02-1.7q1.15.75 2.22 1.56a51 51 0 0 0 4.28-1.76q-.7-.35-1.48-.68M.08-15.54a44 44 0 0 0-7.9 2.92q.75.33 1.49.66 1.4.59 2.8 1.08a49.85 49.85 0 0 1 10.59-5.91Q3.5-16.45.1-15.54M-26.33 3.9q-.74 1.14-1.37 2.33l1.36.4q3.69 1.02 7.45 1.87A47 47 0 0 1-6.33-8.64q.74-.63 1.47-1.22c-.48-.2-.96-.37-1.47-.6q-1.53-.6-3.07-1.36A45.4 45.4 0 0 0-26.34 3.9m-6.9 23.19h10.43a49 49 0 0 1 3.38-17.25 169 169 0 0 1-6.9-1.73l-2.05-.6a44 44 0 0 0-4.86 19.58m6.9 24.48a45 45 0 0 0 17 15.72c.98-.49 2.01-.92 3-1.34q.73-.3 1.45-.54l-1.44-1.2a47 47 0 0 1-12.6-17.15q-3.74.79-7.4 1.85-.7.16-1.37.4.64 1.15 1.36 2.26m20 17.2a45 45 0 0 0 13.07 3.46A51 51 0 0 1-3.58 66.4q-1.36.5-2.75 1.08-.7.31-1.43.62.72.35 1.43.66m28.69 2.38q3.59-.91 6.92-2.36c.5-.23.98-.42 1.43-.65a19 19 0 0 0-1.43-.65q-1.38-.56-2.77-1.08-1.96 1.48-4.15 2.75a52 52 0 0 1-6.1 3.07q3.1-.35 6.1-1.08m21.02-12.08a46 46 0 0 0 7.3-9.77 125 125 0 0 0-8.83-2.24A47 47 0 0 1 29.28 64.2c-.48.4-.92.8-1.44 1.2q.73.25 1.44.56 1.51.61 3.05 1.33a46 46 0 0 0 11.05-8.24m12.84-30.6H45.77a50 50 0 0 1-2.39 14.52q-.45 1.38-.99 2.7.5.15 1 .23 4.05.94 7.98 2.1a44.4 44.4 0 0 0 4.85-19.54M43.38 62.76a47.3 47.3 0 0 1-31.64 12.39h-.52A48 48 0 0 1 .1 73.75a47.83 47.83 0 0 1-26.42-17.5 47.2 47.2
33290 0 1 0-57.02A47.7 47.7 0 0 1 .09-18.3a47.3 47.3 0 0 1 43.3 11 47.4 47.4 0 0 1 15.5 35.08c0 13.81-6 26.31-15.5 34.98" 3330 transform="matrix(1.33 0 0 -1.33 47.88 100.2)" /> 3331 <path d="M0 0a13 13 0 0 1-10.37.97l-.72-.26c-3.71-.97-7.43-.9-11.13.77v-5.71c3.75-1.9 7.42-1.93 11.13-.77q.37.16.72.29C-7.05-3.63-3.55-3.9.06-5.77L0-2.78Zm4.03 17.16a19 19 0 0 0-3.86-3.72v30.03a19 19 0 0 0 3.86-3.72 18.3 18.3 0 0 0 3.9-11.28c0-4.27-1.45-8.18-3.9-11.3m-14.4-7.09a18.4 18.4 0 0 0-10 3h5.71v18.06l4.3-9.06 4.22-9H-.4a18 18 0 0 0-9.97-3m-10.6 3.42a18.5 18.5 0 0 0-7.72 14.97c0 4.15 1.39 8.32 3.86 11.53a15 15 0 0 0 3.86 3.61zm25 34.88a24.3 24.3 0 0 1-14.35 4.7h-.05a7.64 7.64 0 0 0 0 15.28c3.95 0 7.25-3.1 7.6-6.94.25-3.35 4.67-4.03 6-.8.2.52.27 1.32.12 2.14C2.02 69.38-3.38 74.7-10.37 74.7a14 14 0 0 1-13.95-13.95c0-7.67 6.28-13.89 13.95-13.89 3.24-.03 6.3-.88 8.95-2.38h-4.66V26.25l-4.29 9.15-4.29 9.12H-45.8c.74-2.16 1.74-6.45 3.87-6.4 3.58.07 5.37 0 8.91.07-.42-.94-.7-1.9-1.01-2.85h-8.7c.28-1.39 1.73-6.27 3.02-6.3h4.68v-.57c0-.8 0-1.5.11-2.22h-4.94c.71-2.13 1.77-6.34 3.4-6.39h3a24.6 24.6 0 0 1 8.63-11.34 24.3 24.3 0 0 1 14.46-4.71c5.34 0 10.34 1.73 14.4 4.68a24.6 24.6 0 0 1 10.23 19.98c0 8.18-4.06 15.45-10.23 19.91" 3332 transform="matrix(1.33 0 0 -1.33 79.1 109.06)" /> 3333 </g> 3334</svg> 3335 <style> 3336 .logomask { 3337 filter: drop-shadow(0 12px 40px rgba(0, 0, 0, .45)); 3338 -webkit-mask-image: linear-gradient(140deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 48%, rgba(0, 0, 0, 1) 60%); 3339 mask-image: linear-gradient(140deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .7) 48%, rgba(0, 0, 0, 1) 60%); 3340 } 3341 </style> 3342 </div> 3343 <div 3344 class="absolute bottom-6 left-1/2 -translate-x-1/2 z-50 w-full max-w-[90vw] sm:max-w-none text-end pointer-events-none px-6"> 3345 <div class="inline-block pointer-events-auto"> 3346 <section class="mt-4 sm:mt-6"> 3347 <div class="grid grid-cols-3 gap-3 sm:gap-4 w-fit mx-auto items-center"> 3348 <a href="https://atis.rs" 3349 target="_blank" 3350 rel="noopener nofollow sponsored" 3351 class="group block opacity-90 hover:opacity-100 bg-white rounded-md text-center ring-1 ring-black/5"> 3352 <img src="https://sajam.net/images/ads/atis-sr-180x150.webp" 3353 alt="ATIS baner" 3354 width="180" 3355 height="150" 3356 loading="lazy" 3357 decoding="async" 3358 class="mx-auto h-auto w-full max-w-[180px] object-contain rounded-md p-2" /> 3359 <span class="sr-only">ATIS baner</span> 3360 </a> 3361 <a href="https://www.ekologija.gov.rs/" 3362 target="_blank" 3363 rel="noopener nofollow sponsored" 3364 class="group block opacity-90 hover:opacity-100 bg-white rounded-md text-center ring-1 ring-black/5"> 3365 <img src="https://sajam.net/images/partners/ministarstvo-zastite-zivotne-sredine.svg" 3366 alt="ÐиниÑÑаÑÑÑво заÑÑиÑе живоÑне ÑÑедине РепÑблике СÑбиÑе" 3367 width="180" 3368 height="150" 3369 loading="lazy" 3370 decoding="async" 3371 class="mx-auto h-auto w-full object-cover rounded-md" /> 3372 <span class="sr-only">ÐиниÑÑаÑÑÑво заÑÑиÑе живоÑне ÑÑедине РепÑблике СÑбиÑе logo</span> 3373 </a> 3374 </div> 3375 </section> 3376 </div> 3377 </div> 3378 </div> 3379 </template> 3380 </div> 3381 </div> 3382 3383 <div class="hidden md:block relative" 3384 x-data="annBell('sr', 'https://sajam.net/sr/announcements-feed.json')" 3385 x-init="init()" 3386 @click.outside="open = false"> 3387 3388 <button type="button" 3389 @click="toggle()" 3390 :class="open ? 'bg-white/10' : 'bg-transparent'" 3391 class="relative inline-flex items-center justify-center rounded-lg p-2 transition hover:bg-white/10" 3392 aria-label="Notifications"> 3393 <i :class="open ? 'fa-solid fa-bell' : 'fa-regular fa-bell'"></i> 3394 3395 3396 <template x-if="showBadge">
3397 <span class="absolute -top-1 -right-1 inline-flex h-5 min-w-[1.25rem] items-center justify-center rounded-full text-[10px] font-extrabold px-1 leading-none ring-2" 3398 :class="specialBadge ? 'bg-amber-400 text-black ring-amber-200 animate-pulse' : 3399 'bg-emerald-500 text-white ring-black'"> 3400 <span x-text="unseen"></span> 3401 </span> 3402 </template> 3403 </button> 3404 3405 3406 <div x-show="open" 3407 x-transition.opacity 3408 class="absolute right-0 mt-2 w-[360px] max-w-[90vw] z-50"> 3409 <div class="rounded-xl border border-gray-200 bg-white shadow-xl overflow-hidden"> 3410 <div 3411 class="px-4 py-2 text-xs uppercase tracking-wide text-gray-500 border-b border-gray-200"> 3412 Obaveštenja 3413 </div> 3414 3415 <template x-if="items.length === 0"> 3416 <div class="p-4 text-sm text-gray-500">Trenutno nema obaveštenja. 3417 </div> 3418 </template> 3419 3420 <ul class="max-h-[60vh] overflow-auto divide-y divide-gray-200"> 3421 <template x-for="itm in items" 3422 :key="itm.id"> 3423 <li> 3424 <a @click.prevent="go(itm)" 3425 class="flex items-start gap-3 px-4 py-3 hover:bg-gray-50 cursor-pointer border-l-4" 3426 :class="[ 3427 itm.pinned ? 'border-amber-400' : 'border-transparent', 3428 isRead(itm.id) ? 'opacity-60' : '' 3429 ]"> 3430 <span class="mt-0.5"> 3431 <i class="fa-solid" 3432 :class="isRead(itm.id) ? 3433 'fa-envelope-open text-gray-400' : 3434 (itm.pinned ? 'fa-envelope text-amber-500' : 3435 'fa-envelope text-emerald-600')"></i> 3436 </span> 3437 <div class="min-w-0"> 3438 <div class="text-sm font-semibold line-clamp-1" 3439 :class="isRead(itm.id) ? 'text-gray-600' : 'text-gray-900'"> 3440 <!-- pin chip --> 3441 <template x-if="itm.pinned"> 3442 <span 3443 class="inline-flex items-center gap-1 rounded-full bg-amber-400 text-amber-900 text-[10px] font-bold px-2 py-0.5 mr-2"> 3444 <i class="fa-solid fa-thumbtack -rotate-12"></i> PIN 3445 </span> 3446 </template> 3447 <span x-text="itm.title || '-'"></span> 3448 </div> 3449 <div class="text-xs text-gray-500 line-clamp-1" 3450 x-text="itm.event || ''"></div> 3451 </div> 3452 <i class="fa-solid fa-arrow-right-long ms-auto text-gray-400"></i> 3453 </a> 3454 </li> 3455 </template> 3456 </ul> 3457 3458 <div class="p-2 border-t border-gray-200 bg-white"> 3459 <a href="https://sajam.net/sr/obavestenja" 3460 class="ui-btn relative inline-flex items-center justify-center select-none 3461 transition will-change-transform duration-150 3462 focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2 3463 disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-brand-500 text-black bg-white rounded-full border-[2px] border-brand-500 min-h-10 text-xs px-3 py-1.5 gap-2 w-full u-shadow" style="--slab: rgba(202,33,43,.75);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)" 3464 data-variant="secondary" 3465 data-scheme="light"> 3466 <i class="fa-regular fa-bell"></i>
3467 <span class="ui-btn__label">Pogledaj Sve</span> 3468 </a> 3469 </div> 3470 </div> 3471 </div> 3472 </div> 3473 3474 3475 <button class="md:hidden inline-flex items-center justify-center rounded p-2 text-white/90 hover:text-white hover:bg-white/10 transition relative z-50" 3476 @click="mobileOpen = true" 3477 aria-label="Menu" 3478 type="button"> 3479 <i class="fa-solid fa-bars"></i> 3480 </button> 3481 </div> 3482 </div> 3483 3484 3485 <template x-teleport="body"> 3486 3487 <div x-show="mobileOpen" 3488 x-transition.opacity 3489 @keydown.escape.window="mobileOpen = false" 3490 class="fixed inset-0 z-[10000] md:hidden text-white" 3491 role="dialog" 3492 aria-modal="true"> 3493 3494 3495 <div class="absolute inset-0 bg-black/25 backdrop-blur-sm" 3496 @click="mobileOpen = false"></div> 3497 3498 3499 <div class="absolute inset-y-0 left-0 w-full max-w-[92%] sm:max-w-[420px] bg-black/95 backdrop-blur overflow-y-auto 3500 transition-transform duration-300" 3501 x-transition:enter-start="-translate-x-full" 3502 x-transition:enter-end="translate-x-0" 3503 x-transition:leave-start="translate-x-0" 3504 x-transition:leave-end="-translate-x-full" 3505 style="padding-bottom: env(safe-area-inset-bottom)"> 3506 3507 3508 <div class="sticky top-0 z-[100] bg-black flex items-center justify-between px-4 py-3 border-b border-white/10" 3509 style="padding-top: calc(env(safe-area-inset-top,0px) + .5rem)"> 3510 <div class="flex items-center gap-2"> 3511 <svg class="h-9" 3512 3513 role="img"
3514 aria-label="Novosadski Sajam" 3515 viewBox="0 0 126.41 126.45" 3516 xmlns="http://www.w3.org/2000/svg" 3517 preserveAspectRatio="xMidYMid meet" 3518 fill="currentColor"> 3519 <g fill="#fff" 3520 fill-rule="evenodd"> 3521 <path d="m0 0-.06.03-.79.48-.8.54-.48.37C-1.43-.37-.76-1.85.09-3.52l.1-.23.17-.11 1.49-.66.3-.14.15-.06A59 59 0 0 0 .09-.22zm11.64 60.8-.14-.03-.17-.06-.3-.08-.24-.06V47.64l.26-.05.31-.09.14-.05.18-.03.34-.07.2-.02v13.55l-.24-.03ZM11.5-3.55l-.5.03-.2.03v-1.9l.28.05.34.09.08.02.26.06.29.09.17.02v1.45l-.2.03zm11.37 1.93-.51-.2-.26-.09q-.69-1.39-1.42-2.75l.31-.08.4-.14.4-.12.25-.11c.12.2.2.4.32.6q.9 1.7 1.68 3.43L24-1.11zm28.5 9.1q-3.94 1.2-7.99 2.1l-.99.23q.54 1.34 1 2.72a51 51 0 0 1 2.37 14.55h10.46a45 45 0 0 0-4.85-19.6m-7.99-11.1a45 45 0 0 0-10.99-8.2 94 94 0 0 1-3.1 1.36q-.72.3-1.48.6.77.6 1.47 1.2A47 47 0 0 1 41.85 8.48q.76-.15 1.53-.36c2.48-.57 4.92-1.23 7.3-1.9a46 46 0 0 0-7.3-9.84m-14.1-9.71a44 44 0 0 0-13.34-3.47q3.4 1.4 6.42 3.18l.79.49-.43.2-.36.17-.34.16-.32.12-.11.06a51 51 0 0 0-7.27-3.5 52 52 0 0 1 3.64 4.37h-.3l-.3.03h-.66l-.3-.03h-.24q-1.36-1.78-2.89-3.4a5 5 0 0 1-1.05.37v2.1l-.03-.03-.37-.09-.32-.08h-.05l-.37-.12-.29-.05v-1.73c-.36-.1-.73-.2-1.05-.38q-.81.84-1.59 1.76l-.34-.02h-.74l-.36.02-.38.04h-.05a36 36 0 0 1 2.44-2.79 49 49 0 0 0-10.6 5.63c.66.23 1.32.4 1.97.6l.27.08v1.45L.1-8.23A53 53 0 0 1-3.27-9.3q-1.61 1.21-3.06 2.56A46 46 0 0 0-17.46 8.78c2.57.54 5.22 1.03 7.85 1.42l-.07.14-.4.85-.18.34q-3.9-.6-7.78-1.41a48 48 0 0 0-3.35 16.96h1.64l-.02.14-.1.22-.04.23-.07.23-.05.17-.03.2-.05.17v.03h-1.28q0 2.04.23 4.03l-.03.03-.14.26-.15.25-.13.26-.12.25-.12.29-.11.25-.1.28-.13.3-.08.28-.03.03q-.47-3.25-.51-6.51h-10.43A44 44 0 0 0-28.38 48c.68-.22 1.36-.39 2.05-.6q3.4-.92 6.86-1.72a50 50 0 0 1-2.12-6.97h1.45a47 47 0 0 0 2.1 6.68c3.83-.8 7.76-1.45 11.7-1.93.31-.03.66-.09.97-.11a60 60 0 0 1-.85-4.64h1.45q.33 2.26.79 4.5c1.37-.15 2.7-.3 4.07-.4q1.88-.15 3.8-.23l-.26.2-.53.45-.51.48-.34.37q-1.1.08-2.16.14-1.88.17-3.72.37a65 65 0 0 0 2.1 7.08l-.06.2-.1.74-.04.76-.03.74.03.77.04.28a65 65 0 0 1-3.37-10.43q-.63.08-1.27.15-5.65.7-11.17 1.85A45.4 45.4 0 0 0-3.3 64.8c1.14-.36 2.25-.73 3.39-1.02q.71-.21 1.47-.36l.08.1.47.52.48.5.05.06q-1.27.28-2.55.66-1 .25-2 .6.99.67 2 1.3 3.91 2.49 8.6 4.3a51 51 0 0 1-4.48-5.5l.56.4.6.4.62.35.63.3.65.32.09.03q1.12 1.4 2.35 2.7c.31-.18.72-.31 1.08-.37v-1.37l.71.09.72.06v1.19q.6.1 1.07.4.8-.82 1.51-1.68l.23-.03.65-.1.65-.15.63-.17h.06a80 80 0 0 1-2.7 3.15 53 53 0 0 0 8.04-3.98q1.28-.8 2.53-1.65c-.8-.25-1.54-.48-2.3-.68l.4-.4.44-.45.3-.31q1.27.38 2.55.8a45.6 45.6 0 0 0 14.17-18.06c-3.68-.79-7.4-1.38-11.17-1.86q-.63-.08-1.27-.15a68 68 0 0 1-2.07 7.11l-.09-.09-.28-.17-.31-.14-.28-.11-.32-.12a57 57 0 0 0 1.93-6.62q-.94-.11-1.87-.2l.39-.2 1.05-.62.63-.4q.07.02.12.03.03-.07.02-.11l.29-.17.99-.71.43-.34-.31 1.48q.5.05.95.1Q35.2 44.2 41 45.4a49 49 0 0 0 2.4-7.98q.88-4.42.95-8.95h-6.76l.06-.26.29-1.13h6.42a48 48 0 0 0-.97-9.01A49 49 0 0 0 41 10.12q-2.48.5-4.94.93l-.1-.23-.59-1.08q2.56-.42 5.06-.96A45 45 0 0 0 26.25-9.29q-1.02.35-2.05.65v-1.47c.24-.06.43-.12.66-.2l-.62-.43.02-1.7q1.15.75 2.22 1.56a51 51 0 0 0 4.28-1.76q-.7-.35-1.48-.68M.08-15.54a44 44 0 0 0-7.9 2.92q.75.33 1.49.66 1.4.59 2.8 1.08a49.85 49.85 0 0 1 10.59-5.91Q3.5-16.45.1-15.54M-26.33 3.9q-.74 1.14-1.37 2.33l1.36.4q3.69 1.02 7.45 1.87A47 47 0 0 1-6.33-8.64q.74-.63 1.47-1.22c-.48-.2-.96-.37-1.47-.6q-1.53-.6-3.07-1.36A45.4 45.4 0 0 0-26.34 3.9m-6.9 23.19h10.43a49 49 0 0 1 3.38-17.25 169 169 0 0 1-6.9-1.73l-2.05-.6a44 44 0 0 0-4.86 19.58m6.9 24.48a45 45 0 0 0 17 15.72c.98-.49 2.01-.92 3-1.34q.73-.3 1.45-.54l-1.44-1.2a47 47 0 0 1-12.6-17.15q-3.74.79-7.4 1.85-.7.16-1.37.4.64 1.15 1.36 2.26m20 17.2a45 45 0 0 0 13.07 3.46A51 51 0 0 1-3.58 66.4q-1.36.5-2.75 1.08-.7.31-1.43.62.72.35 1.43.66m28.69 2.38q3.59-.91 6.92-2.36c.5-.23.98-.42 1.43-.65a19 19 0 0 0-1.43-.65q-1.38-.56-2.77-1.08-1.96 1.48-4.15 2.75a52 52 0 0 1-6.1 3.07q3.1-.35 6.1-1.08m21.02-12.08a46 46 0 0 0 7.3-9.77 125 125 0 0 0-8.83-2.24A47 47 0 0 1 29.28 64.2c-.48.4-.92.8-1.44 1.2q.73.25 1.44.56 1.51.61 3.05 1.33a46 46 0 0 0 11.05-8.24m12.84-30.6H45.77a50 50 0 0 1-2.39 14.52q-.45 1.38-.99 2.7.5.15 1 .23 4.05.94 7.98 2.1a44.4 44.4 0 0 0 4.85-19.54M43.38 62.76a47.3 47.3 0 0 1-31.64 12.39h-.52A48 48 0 0 1 .1 73.75a47.83 47.83 0 0 1-26.42-17.5 47.2 47.2
35210 0 1 0-57.02A47.7 47.7 0 0 1 .09-18.3a47.3 47.3 0 0 1 43.3 11 47.4 47.4 0 0 1 15.5 35.08c0 13.81-6 26.31-15.5 34.98" 3522 transform="matrix(1.33 0 0 -1.33 47.88 100.2)" /> 3523 <path d="M0 0a13 13 0 0 1-10.37.97l-.72-.26c-3.71-.97-7.43-.9-11.13.77v-5.71c3.75-1.9 7.42-1.93 11.13-.77q.37.16.72.29C-7.05-3.63-3.55-3.9.06-5.77L0-2.78Zm4.03 17.16a19 19 0 0 0-3.86-3.72v30.03a19 19 0 0 0 3.86-3.72 18.3 18.3 0 0 0 3.9-11.28c0-4.27-1.45-8.18-3.9-11.3m-14.4-7.09a18.4 18.4 0 0 0-10 3h5.71v18.06l4.3-9.06 4.22-9H-.4a18 18 0 0 0-9.97-3m-10.6 3.42a18.5 18.5 0 0 0-7.72 14.97c0 4.15 1.39 8.32 3.86 11.53a15 15 0 0 0 3.86 3.61zm25 34.88a24.3 24.3 0 0 1-14.35 4.7h-.05a7.64 7.64 0 0 0 0 15.28c3.95 0 7.25-3.1 7.6-6.94.25-3.35 4.67-4.03 6-.8.2.52.27 1.32.12 2.14C2.02 69.38-3.38 74.7-10.37 74.7a14 14 0 0 1-13.95-13.95c0-7.67 6.28-13.89 13.95-13.89 3.24-.03 6.3-.88 8.95-2.38h-4.66V26.25l-4.29 9.15-4.29 9.12H-45.8c.74-2.16 1.74-6.45 3.87-6.4 3.58.07 5.37 0 8.91.07-.42-.94-.7-1.9-1.01-2.85h-8.7c.28-1.39 1.73-6.27 3.02-6.3h4.68v-.57c0-.8 0-1.5.11-2.22h-4.94c.71-2.13 1.77-6.34 3.4-6.39h3a24.6 24.6 0 0 1 8.63-11.34 24.3 24.3 0 0 1 14.46-4.71c5.34 0 10.34 1.73 14.4 4.68a24.6 24.6 0 0 1 10.23 19.98c0 8.18-4.06 15.45-10.23 19.91" 3524 transform="matrix(1.33 0 0 -1.33 79.1 109.06)" /> 3525 </g> 3526</svg> 3527 <span class="text-base font-bold">Novosadski sajam</span> 3528 </div> 3529 <button @click="mobileOpen = false" 3530 class="p-2 rounded hover:bg-white/10" 3531 aria-label="Zatvori"> 3532 <i class="fa-solid fa-xmark text-xl"></i> 3533 </button> 3534 </div> 3535 3536 3537 <section class="px-4 pt-4 pb-2 border-b border-white/10 space-y-3"> 3538 3539 3540 <div x-data="langTabs('sr', { sr: 'https:\/\/sajam.net\/sr\/kontakt', en: 'https:\/\/sajam.net\/en\/contact' })" 3541 class="inline-flex items-center rounded bg-white/5 px-2 py-1 shadow ring-1 ring-white/10" 3542 role="tablist" 3543 aria-label="Language switcher"> 3544 <i class="fa-solid fa-language text-gray-100 mr-2"></i> 3545 <div class="relative grid grid-cols-2 gap-1"> 3546 <span class="absolute inset-y-0 left-0 w-1/2 rounded-xs bg-white shadow transition-transform duration-200" 3547 :style="`transform: translateX(${active === 'en' ? '100%' : '0%'})`"></span> 3548 <button type="button" 3549 class="relative z-10 px-3 py-1 text-xs font-bold rounded-xl" 3550 :class="active === 'sr' ? 'text-gray-900' : 'text-gray-100'" 3551 @click="switchTo('sr')">ð·ð¸ SR</button> 3552 <button type="button" 3553 class="relative z-10 px-3 py-1 text-xs font-bold rounded-xl" 3554 :class="active === 'en' ? 'text-gray-900' : 'text-gray-100'" 3555 @click="switchTo('en')">ð¬ð§ EN</button> 3556 </div> 3557 </div> 3558 3559 3560 <div class="grid grid-cols-3 gap-2"> 3561 <a href="https://sajam.net/sr/posetioci/ulaznice" 3562 class="flex flex-col items-center justify-center gap-2 rounded bg-white/10 hover:bg-white/15 p-3 text-sm font-semibold"> 3563 <i class="fa-solid fa-ticket"></i> Ulaznice 3564 </a> 3565 <a href="https://sajam.net/sr/posetioci/kako-doci" 3566 class="flex flex-col items-center justify-center gap-2 rounded bg-white/10 hover:bg-white/15 p-3 text-sm font-semibold"> 3567 <i class="fa-solid fa-route"></i> Kako doÄi 3568 </a> 3569 <a href="https://sajam.net/sr/posetioci/plan-sajma" 3570 class="flex flex-col items-center justify-center gap-2 rounded bg-white/10 hover:bg-white/15 p-3 text-sm font-semibold"> 3571 <i class="fa-solid fa-map"></i> Mapa 3572 </a> 3573 </div> 3574 3575 3576 <div class="mt-2"> 3577 <h4 class="text-xs font-semibold uppercase tracking-wide text-white/70 mb-2"> 3578 Istaknuti sajmovi</h4> 3579 <ul class="rounded-lg border border-white/10 overflow-hidden divide-y divide-white/10"> 3580 <li> 3581 <a href="https://sajam.net/sr/dogadjaj/16-ewda-konferencija-ewda-2026" 3582 class="flex items-center gap-3 px-3 py-2 hover:bg-white/5"> 3583 <div class="w-14 text-center shrink-0"> 3584 <div class="text-sm font-extrabold">28.09</div> 3585 <div class="text-[10px] text-white/70">- 02.10</div> 3586 </div>
3587 <span class="h-6 w-px bg-white/10"></span> 3588 <div class="min-w-0"> 3589 <div class="flex items-center mb-1"> 3590 <span 3591 class="line-clamp-2 leading-tight text-balance font-medium">16. EWDA konferencija - EWDA 2026</span> 3592 </div> 3593 <div class="text-xs text-white/70"> 3594 <span 3595 class="inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide bg-green-600 text-white"> 3596 U toku 3597 </span> 3598 </div> 3599 </div> 3600 <i class="fa-solid fa-arrow-right-long ms-auto text-white/50"></i> 3601 </a> 3602 </li> 3603 <li> 3604 <a href="https://sajam.net/sr/dogadjaj/57-medunarodni-sajam-lova-i-ribolova" 3605 class="flex items-center gap-3 px-3 py-2 hover:bg-white/5"> 3606 <div class="w-14 text-center shrink-0"> 3607 <div class="text-sm font-extrabold">30.09</div> 3608 <div class="text-[10px] text-white/70">- 04.10</div> 3609 </div> 3610 <span class="h-6 w-px bg-white/10"></span> 3611 <div class="min-w-0"> 3612 <div class="flex items-center mb-1"> 3613 <span 3614 class="line-clamp-2 leading-tight text-balance font-medium">57. MEÄUNARODNI SAJAM LOVA I RIBOLOVA</span> 3615 </div> 3616 <div class="text-xs text-white/70"> 3617 <span 3618 class="inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide bg-green-600 text-white"> 3619 U toku 3620 </span> 3621 </div> 3622 </div> 3623 <i class="fa-solid fa-arrow-right-long ms-auto text-white/50"></i> 3624 </a> 3625 </li> 3626 <li> 3627 <a href="https://sajam.net/sr/dogadjaj/sajam-ekologije-2026" 3628 class="flex items-center gap-3 px-3 py-2 hover:bg-white/5"> 3629 <div class="w-14 text-center shrink-0"> 3630 <div class="text-sm font-extrabold">30.09</div> 3631 <div class="text-[10px] text-white/70">- 04.10</div> 3632 </div>
3633 <span class="h-6 w-px bg-white/10"></span> 3634 <div class="min-w-0"> 3635 <div class="flex items-center mb-1"> 3636 <span 3637 class="line-clamp-2 leading-tight text-balance font-medium">SAJAM EKOLOGIJE - 2026</span> 3638 </div> 3639 <div class="text-xs text-white/70"> 3640 <span 3641 class="inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide bg-green-600 text-white"> 3642 U toku 3643 </span> 3644 </div> 3645 </div> 3646 <i class="fa-solid fa-arrow-right-long ms-auto text-white/50"></i> 3647 </a> 3648 </li> 3649 </ul> 3650 </div> 3651 </section> 3652 3653 3654 <nav class="px-4 py-4 divide-y divide-white/10" 3655 x-data> 3656 <ul class="space-y-1"> 3657 3658 3659 <li x-data="{ open: false }"> 3660 <button @click="open = !open" 3661 class="w-full flex items-center justify-between px-3 py-3 font-semibold hover:bg-white/10" 3662 :aria-expanded="open.toString()" 3663 aria-controls="m-fairs"> 3664 Sajmovi 3665 <i class="fa-solid fa-chevron-down text-xs transition-transform" 3666 :class="{ 'rotate-180': open }"></i> 3667 </button> 3668 <div id="m-fairs" 3669 x-show="open" 3670 x-collapse 3671 class="pl-4 space-y-2 text-sm text-white/80"> 3672 <a href="https://sajam.net/sr/posetioci/ulaznice" 3673 class="block px-3 py-2 hover:bg-white/10">Porudžbenice, ulaznice i formulari</a> 3674 <a href="https://sajam.net/sr/kalendar" 3675 class="block px-3 py-2 hover:bg-white/10">Kalendar dogaÄaja</a> 3676 <a href="https://sajam.net/sr/posetioci/kako-doci" 3677 class="block px-3 py-2 hover:bg-white/10">Kako do Sajma?</a> 3678 <a href="https://sajam.net/sr/posetioci/plan-sajma" 3679 class="block px-3 py-2 hover:bg-white/10">Mapa Sajma</a> 3680 </div> 3681 </li> 3682 3683 3684 <li x-data="{ open: false }"> 3685 <button @click="open = !open" 3686 class="w-full flex items-center justify-between px-3 py-3 font-semibold hover:bg-white/10" 3687 :aria-expanded="open.toString()" 3688 aria-controls="m-exh"> 3689 IzlagaÄi 3690 <i class="fa-solid fa-chevron-down text-xs transition-transform" 3691 :class="{ 'rotate-180': open }"></i> 3692 </button> 3693 <div id="m-exh" 3694 x-show="open" 3695 x-collapse 3696 class="pl-4 space-y-2 text-sm text-white/80"> 3697 <a href="https://sajam.net/sr/izlagaci/prijave" 3698 class="block px-3 py-2 hover:bg-white/10">Prijava i uslovi uÄeÅ¡Äa</a> 3699 <a href="https://sajam.net/sr/izlagaci/setup-hub" 3700 class="block px-3 py-2 hover:bg-white/10">Å tandovi i oprema</a> 3701 <a href="https://sajam.net/sr/izlagaci/reklamne-usluge" 3702 class="block px-3 py-2 hover:bg-white/10">Brendiranje i reklamne usluge</a> 3703 <a href="https://sajam.net/sr/izlagaci/ocenjivanje-kvaliteta" 3704 class="block px-3 py-2 hover:bg-white/10">Ocenjivanje kvaliteta</a> 3705 <a href="https://sajam.net/sr/kontakt" 3706 class="block px-3 py-2 hover:bg-white/10">Kontakt informacije</a> 3707 </div> 3708 </li> 3709 3710 3711 <li x-data="{ open: false }"> 3712 <button @click="open = !open" 3713 class="w-full flex items-center justify-between px-3 py-3 font-semibold hover:bg-white/10" 3714 :aria-expanded="open.toString()" 3715 aria-controls="m-vis"> 3716 Posetioci 3717 <i class="fa-solid fa-chevron-down text-xs transition-transform" 3718 :class="{ 'rotate-180': open }"></i> 3719 </button> 3720 <div id="m-vis" 3721 x-show="open" 3722 x-collapse 3723 class="pl-4 space-y-2 text-sm text-white/80"> 3724 <a href="https://sajam.net/sr/posetioci/ulaznice" 3725 class="block px-3 py-2 hover:bg-white/10">Ulaznice</a> 3726 <a href="https://sajam.net/sr/posetioci/kako-doci" 3727 class="block px-3 py-2 hover:bg-white/10">Kako do nas (mapa)</a> 3728 <a href="https://sajam.net/sr/posetioci/parking" 3729 class="block px-3 py-2 hover:bg-white/10">Parking i kapije</a> 3730 <a href="https://sajam.net/sr/posetioci/plan-sajma" 3731 class="block px-3 py-2 hover:bg-white/10">Plan Sajma (hale)</a> 3732 <a href="https://sajam.net/sr/obavestenja" 3733 class="block px-3 py-2 hover:bg-white/10">SaopÅ¡tenja i objave</a> 3734 </div> 3735 </li> 3736 3737 3738 <li x-data="{ open: false }"> 3739 <button @click="open = !open" 3740 class="w-full flex items-center justify-between px-3 py-3 font-semibold hover:bg-white/10" 3741 :aria-expanded="open.toString()" 3742 aria-controls="m-cong"> 3743 Kongresni Centar âMaster" 3744 <i class="fa-solid fa-chevron-down text-xs transition-transform" 3745 :class="{ 'rotate-180': open }"></i> 3746 </button> 3747 <div id="m-cong" 3748 x-show="open" 3749 x-collapse 3750 class="pl-4 space-y-2 text-sm text-white/80"> 3751 <a href="https://sajam.net/sr/kongres/sale-kapacitet" 3752 class="block px-3 py-2 hover:bg-white/10">Sale i kapaciteti</a> 3753 <a href="https://sajam.net/sr/kongres/tehnicka-oprema" 3754 class="block px-3 py-2 hover:bg-white/10">TehniÄka oprema</a> 3755 <a href="https://sajam.net/sr/kongres/cenovnik-i-prijava" 3756 class="block px-3 py-2 hover:bg-white/10">Cenovnik i prijava</a> 3757 <a href="https://sajam.net/sr/kongres/posaljite-upit" 3758 class="block px-3 py-2 hover:bg-white/10">PoÅ¡aljite upit</a> 3759 </div> 3760 </li> 3761 3762 3763 <li x-data="{ open: false }"> 3764 <button @click="open = !open" 3765 class="w-full flex items-center justify-between px-3 py-3 font-semibold hover:bg-white/10" 3766 :aria-expanded="open.toString()" 3767 aria-controls="m-press"> 3768 Press 3769 <i class="fa-solid fa-chevron-down text-xs transition-transform" 3770 :class="{ 'rotate-180': open }"></i> 3771 </button> 3772 <div id="m-press" 3773 x-show="open" 3774 x-collapse 3775 class="pl-4 space-y-2 text-sm text-white/80"> 3776 <a href="https://sajam.net/sr/press/konferencije" 3777 class="block px-3 py-2 hover:bg-white/10">Konferencije za Å¡tampu</a> 3778 <a href="https://sajam.net/sr/press/medijski-paket" 3779 class="block px-3 py-2 hover:bg-white/10">Media kit</a> 3780 <a href="https://sajam.net/sr/media/galerije" 3781 class="block px-3 py-2 hover:bg-white/10">
3781Foto galerija</a> 3782 <a href="https://sajam.net/sr/vesti/press" 3783 class="block px-3 py-2 hover:bg-white/10">Blog / priÄe</a> 3784 </div> 3785 </li> 3786 3787 3788 <li x-data="{ open: false }"> 3789 <button @click="open = !open" 3790 class="w-full flex items-center justify-between px-3 py-3 font-semibold hover:bg-white/10" 3791 :aria-expanded="open.toString()" 3792 aria-controls="m-cal"> 3793 Kalendar 3794 <i class="fa-solid fa-chevron-down text-xs transition-transform" 3795 :class="{ 'rotate-180': open }"></i> 3796 </button> 3797 <div id="m-cal" 3798 x-show="open" 3799 x-collapse 3800 class="pl-4 space-y-2 text-sm text-white/80"> 3801 <a href="https://sajam.net/sr/kalendar" 3802 class="block px-3 py-2 hover:bg-white/10">Pretraži dogaÄaje</a> 3803 <a href="https://sajam.net/sr/obavestenja" 3804 class="block px-3 py-2 hover:bg-white/10">Najave</a> 3805 </div> 3806 </li> 3807 3808 3809 <li x-data="{ open: false }"> 3810 <button @click="open = !open" 3811 class="w-full flex items-center justify-between px-3 py-3 font-semibold hover:bg-white/10" 3812 :aria-expanded="open.toString()" 3813 aria-controls="m-about"> 3814 O Sajmu 3815 <i class="fa-solid fa-chevron-down text-xs transition-transform" 3816 :class="{ 'rotate-180': open }"></i> 3817 </button> 3818 <div id="m-about" 3819 x-show="open" 3820 x-collapse 3821 class="pl-4 space-y-2 text-sm text-white/80"> 3822 <a href="https://sajam.net/sr/posetioci/plan-sajma" 3823 class="block px-3 py-2 hover:bg-white/10">Prostor i mapa Sajma</a> 3824 <a href="https://sajam.net/sr/kongres" 3825 class="block px-3 py-2 hover:bg-white/10">Kongresni centar âMaster"</a> 3826 <a href="https://sajam.net/sr/o-nama/istorijski-pregled" 3827 class="block px-3 py-2 hover:bg-white/10">Istorijski pregled</a> 3828 <a href="https://sajam.net/sr/kontakt" 3829 class="block px-3 py-2 hover:bg-white/10">Kontakt & dolazak</a> 3830 </div> 3831 </li> 3832 3833 3834 <li x-data="{ open: false }"> 3835 <button @click="open = !open" 3836 class="w-full flex items-center justify-between px-3 py-3 font-semibold hover:bg-white/10" 3837 :aria-expanded="open.toString()" 3838 aria-controls="m-contact"> 3839 Kontakt 3840 <i class="fa-solid fa-chevron-down text-xs transition-transform" 3841 :class="{ 'rotate-180': open }"></i> 3842 </button> 3843 <div id="m-contact" 3844 x-show="open" 3845 x-collapse 3846 class="pl-4 space-y-2 text-sm text-white/80"> 3847 <a href="tel:+38121000000" 3848 class="block px-3 py-2 hover:bg-white/10"><i class="fa-solid fa-phone"></i> 3849 +381 21 000 000</a> 3850 <a href="mailto:[email protected]" 3851 class="block px-3 py-2 hover:bg-white/10"><i class="fa-solid fa-envelope"></i> 3852 [email protected]</a> 3853 <a href="https://sajam.net/sr/kontakt" 3854 class="block px-3 py-2 hover:bg-white/10"><i 3855 class="fa-solid fa-location-dot"></i> 3856 Kontakt & dolazak</a> 3857 </div> 3858 </li> 3859 3860 </ul> 3861 </nav> 3862 3863 3864 <div class="sticky bottom-0 bg-black/95 border-t border-white/10 p-4 grid grid-cols-2 gap-3"> 3865 3866 <a href="https://sajam.net/sr/kalendar" 3867 class="ui-btn relative inline-flex items-center justify-center select-none 3868 transition will-change-transform duration-150 3869 focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2 3870 disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-white text-white bg-transparent border-[2px] border-white/40 min-h-12 text-base px-5 py-3 gap-3 w-full u-shadow" style="--slab: rgba(202,33,43,.75);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)" 3871 data-variant="outline" 3872 data-scheme="dark"> 3873 <i class="fa-solid fa-calendar"></i>
3874 <span class="ui-btn__label">Kalendar dogaÄaja</span> 3875 </a> 3876 <a href="https://sajam.net/sr/kontakt" 3877 class="ui-btn relative inline-flex items-center justify-center select-none 3878 transition will-change-transform duration-150 3879 focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2 3880 disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-white text-white bg-transparent border-[2px] border-white/40 min-h-12 text-base px-5 py-3 gap-3 w-full u-shadow" style="--slab: rgba(202,33,43,.75);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)" 3881 data-variant="outline" 3882 data-scheme="dark"> 3883 <i class="fa-solid fa-envelope"></i> 3884 <span class="ui-btn__label">Kontaktirajte nas</span> 3885 </a> 3886 <a href="https://sajam.net/sr/izlagaci" 3887 class="ui-btn relative inline-flex items-center justify-center select-none 3888 transition will-change-transform duration-150 3889 focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2 3890 disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-white text-white bg-brand-500 hover:bg-white hover:text-black font-medium min-h-12 text-base px-5 py-3 gap-3 w-full u-shadow col-span-2" style="--slab: rgba(202,33,43,.9);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-black)" 3891 data-variant="primary" 3892 data-scheme="dark-red"> 3893 <i class="fa-solid fa-file-pen"></i> 3894 <span class="ui-btn__label">Postani izlagaÄ</span> 3895 </a> 3896 </div> 3897 </div> 3898 </div> 3899 </template> 3900 </nav> 3901 </header> 3902 <main x-data 3903 x-bind:style="(Alpine.store('header')?.overlay ?? false) ? '' : ''"> 3904 <section class="bg-white"> 3905 3906 <div class="max-w-7xl mx-auto px-4 !py-10 grid grid-cols-1 lg:grid-cols-3 gap-10"> 3907 <article class="lg:col-span-2 space-y-6"> 3908 <header> 3909 <h1 class="text-3xl md:text-4xl font-heading font-extrabold">Kontakti</h1> 3910 <p class="text-gray-600 mt-1">Sekcije i službe Novosadskog Sajma.</p> 3911 </header> 3912 3913 <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3"> 3914 <section class="rounded-xl border border-gray-200 bg-white p-5"> 3915 <h3 class="font-heading font-bold text-gray-900">Parking</h3> 3916 3917 <dl class="mt-3 space-y-1 text-sm"> 3918 <div class="flex items-center gap-2"> 3919 <i class="fa-solid fa-phone text-gray-400"></i> 3920 <a class="hover:text-brand-500" 3921 href="tel:+381021483-07-10"> 3922 +381 021 483-07-10 3923 </a> 3924 </div> 3925 <div class="flex items-center gap-2"> 3926 <i class="fa-solid fa-phone text-gray-400"></i> 3927 <a class="hover:text-brand-500" 3928 href="tel:+381021483-07-07"> 3929 +381 021 483-07-07 3930 </a> 3931 </div> 3932 3933 <div class="flex items-center gap-2"> 3934 <i class="fa-solid fa-envelope text-gray-400"></i> 3935 <a class="hover:text-brand-500" 3936 href="mailto:[email protected]">[email protected]</a> 3937 </div> 3938 3939 </dl> 3940 </section> 3941 <section class="rounded-xl border border-gray-200 bg-white p-5"> 3942 <h3 class="font-heading font-bold text-gray-900">Novosadski sajam â Centrala</h3> 3943 <div class="text-sm text-gray-600 mt-0.5">Centrala</div> 3944 3945 <dl class="mt-3 space-y-1 text-sm"> 3946 <div class="flex items-center gap-2"> 3947 <i class="fa-solid fa-phone text-gray-400"></i> 3948 <a class="hover:text-brand-500" 3949 href="tel:+381(0)21/483-00-00"> 3950 +381 (0)21/483-00-00 3951 </a> 3952 </div> 3953 3954 <div class="flex items-center gap-2"> 3955 <i class="fa-solid fa-envelope text-gray-400"></i> 3956 <a class="hover:text-brand-500" 3957 href="mailto:[email protected]">[email protected]</a> 3958 </div> 3959 3960 </dl> 3961 </section> 3962 <section class="rounded-xl border border-gray-200 bg-white p-5"> 3963 <h3 class="font-heading font-bold text-gray-900">Kabinet generalnog direktora</h3> 3964 <div class="text-sm text-gray-600 mt-0.5">Kabinet</div> 3965 3966 <dl class="mt-3 space-y-1 text-sm"> 3967 <div class="flex items-center gap-2"> 3968 <i class="fa-solid fa-phone text-gray-400"></i> 3969 <a class="hover:text-brand-500" 3970 href="tel:+381(0)21/483-10-00"> 3971 +381 (0)21/483-10-00 3972 </a> 3973 </div> 3974 3975 <div class="flex items-center gap-2"> 3976 <i class="fa-solid fa-envelope text-gray-400"></i> 3977 <a class="hover:text-brand-500" 3978 href="mailto:[email protected]">[email protected]</a> 3979 </div> 3980 3981 </dl> 3982 </section> 3983 <section class="rounded-xl border border-gray-200 bg-white p-5"> 3984 <h3 class="font-heading font-bold text-gray-900">Sektor za sajamsku delatnost</h3> 3985 <div class="text-sm text-gray-600 mt-0.5">Sektor</div> 3986 3987 <dl class="mt-3 space-y-1 text-sm"> 3988 <div class="flex items-center gap-2"> 3989 <i class="fa-solid fa-phone text-gray-400"></i> 3990 <a class="hover:text-brand-500" 3991 href="tel:+381(0)21/483-01-02"> 3992 +381 (0)21/483-01-02 3993 </a> 3994 </div> 3995 <div class="flex items-center gap-2"> 3996 <i class="fa-solid fa-phone text-gray-400"></i> 3997 <a class="hover:text-brand-500" 3998 href="tel:+381(0)21/483-01-11"> 3999 +381 (0)21/483-01-11 4000 </a> 4001 </div> 4002 4003 <div class="flex items-center gap-2"> 4004 <i class="fa-solid fa-envelope text-gray-400"></i> 4005 <a class="hover:text-brand-500" 4006 href="mailto:[email protected]">[email protected]</a> 4007 </div> 4008 4009 </dl> 4010 </section> 4011 <section class="rounded-xl border border-gray-200 bg-white p-5"> 4012 <h3 class="font-heading font-bold text-gray-900">Sektor za integrisane marketing komunikacije</h3> 4013 <div class="text-sm text-gray-600 mt-0.5">Sektor</div> 4014 4015 <dl class="mt-3 space-y-1 text-sm"> 4016 <div class="flex items-center gap-2"> 4017 <i class="fa-solid fa-phone text-gray-400"></i> 4018 <a class="hover:text-brand-500" 4019 href="tel:+381(0)21/483-11-32"> 4020 +381 (0)21/483-11-32 4021 </a> 4022 </div> 4023 4024 <div class="flex items-center gap-2"> 4025 <i class="fa-solid fa-envelope text-gray-400"></i> 4026 <a class="hover:text-brand-500" 4027 href="mailto:[email protected]">[email protected]</a> 4028 </div> 4029 4030 </dl> 4031 </section> 4032 <section class="rounded-xl border border-gray-200 bg-white p-5"> 4033 <h3 class="font-heading font-bold text-gray-900">Sektor za ekonomskoâfinansijske poslove</h3> 4034 <div class="text-sm text-gray-600 mt-0.5">Sektor</div> 4035 4036 <dl class="mt-3 space-y-1 text-sm"> 4037 <div class="flex items-center gap-2"> 4038 <i class="fa-solid fa-phone text-gray-400"></i> 4039 <a class="hover:text-brand-500" 4040 href="tel:+381(0)21/483-03-01"> 4041 +381 (0)21/483-03-01 4042 </a> 4043 </div> 4044 4045 <div class="flex items-center gap-2"> 4046 <i class="fa-solid fa-envelope text-gray-400"></i> 4047 <a class="hover:text-brand-500" 4048 href="mailto:[email protected]">[email protected]</a> 4049 </div> 4050 4051 </dl> 4052 </section> 4053 <section class="rounded-xl border border-gray-200 bg-white p-5"> 4054 <h3 class="font-heading font-bold text-gray-900">Sektor za pravne i opÅ¡te poslove</h3> 4055 <div class="text-sm text-gray-600 mt-0.5">Sektor</div> 4056 4057 <dl class="mt-3 space-y-1 text-sm"> 4058 <div class="flex items-center gap-2"> 4059 <i class="fa-solid fa-phone text-gray-400"></i> 4060 <a class="hover:text-brand-500" 4061 href="tel:+381(0)21/483-02-37"> 4062 +381 (0)21/483-02-37 4063 </a> 4064 </div> 4065 4066 <div class="flex items-center gap-2"> 4067 <i class="fa-solid fa-envelope text-gray-400"></i> 4068 <a class="hover:text-brand-500" 4069 href="mailto:[email protected]">[email protected]</a> 4070 </div> 4071 4072 </dl> 4073 </section> 4074 <section class="rounded-xl border border-gray-200 bg-white p-5"> 4075 <h3 class="font-heading font-bold text-gray-900">Odeljenje za ocenu kvaliteta proizvoda</h3> 4076 <div class="text-sm text-gray-600 mt-0.5">Odeljenje</div> 4077 4078 <dl class="mt-3 space-y-1 text-sm"> 4079 <div class="flex items-center gap-2"> 4080 <i class="fa-solid fa-phone text-gray-400"></i> 4081 <a class="hover:text-brand-500" 4082 href="tel:+381(0)21/483-01-37"> 4083 +381 (0)21/483-01-37 4084 </a> 4085 </div> 4086 4087 <div class="flex items-center gap-2"> 4088 <i class="fa-solid fa-envelope text-gray-400"></i> 4089 <a class="hover:text-brand-500" 4090 href="mailto:[email protected]">[email protected]</a> 4091 </div> 4092 4093 </dl> 4094 </section> 4095 <section class="rounded-xl border border-gray-200 bg-white p-5"> 4096 <h3 class="font-heading font-bold text-gray-900">Služba za tehniÄku realizaciju sajamskih priredbi</h3> 4097 <div class="text-sm text-gray-600 mt-0.5">Služba</div> 4098 4099 <dl class="mt-3 space-y-1 text-sm"> 4100 <div class="flex items-center gap-2"> 4101 <i class="fa-solid fa-phone text-gray-400"></i> 4102 <a class="hover:text-brand-500" 4103 href="tel:+381(0)21/483-07-01"> 4104 +381 (0)21/483-07-01 4105 </a> 4106 </div> 4107 <div class="flex items-center gap-2"> 4108 <i class="fa-solid fa-phone text-gray-400"></i> 4109 <a class="hover:text-brand-500" 4110 href="tel:+381(0)21/483-07-73"> 4111 +381 (0)21/483-07-73 4112 </a> 4113 </div> 4114 <div class="flex items-center gap-2"> 4115 <i class="fa-solid fa-phone text-gray-400"></i> 4116 <a class="hover:text-brand-500" 4117 href="tel:+381(0)21/483-07-74"> 4118 +381 (0)21/483-07-74 4119 </a> 4120 </div> 4121 4122 <div class="flex items-center gap-2"> 4123 <i class="fa-solid fa-envelope text-gray-400"></i> 4124 <a class="hover:text-brand-500" 4125 href="mailto:[email protected]">[email protected]</a> 4126 </div> 4127 4128 </dl> 4129 </section> 4130 <section class="rounded-xl border border-gray-200 bg-white p-5"> 4131 <h3 class="font-heading font-bold text-gray-900">Odeljenje restoranskih usluga</h3> 4132
4132 <div class="text-sm text-gray-600 mt-0.5">Odeljenje</div> 4133 4134 <dl class="mt-3 space-y-1 text-sm"> 4135 <div class="flex items-center gap-2"> 4136 <i class="fa-solid fa-phone text-gray-400"></i> 4137 <a class="hover:text-brand-500" 4138 href="tel:+381(0)21/483-07-77"> 4139 +381 (0)21/483-07-77 4140 </a> 4141 </div> 4142 4143 <div class="flex items-center gap-2"> 4144 <i class="fa-solid fa-envelope text-gray-400"></i> 4145 <a class="hover:text-brand-500" 4146 href="mailto:[email protected]">[email protected]</a> 4147 </div> 4148 4149 </dl> 4150 </section> 4151 <section class="rounded-xl border border-gray-200 bg-white p-5"> 4152 <h3 class="font-heading font-bold text-gray-900">Odeljenje interne revizije</h3> 4153 <div class="text-sm text-gray-600 mt-0.5">Odeljenje</div> 4154 4155 <dl class="mt-3 space-y-1 text-sm"> 4156 <div class="flex items-center gap-2"> 4157 <i class="fa-solid fa-phone text-gray-400"></i> 4158 <a class="hover:text-brand-500" 4159 href="tel:+381(0)21/483-03-50"> 4160 +381 (0)21/483-03-50 4161 </a> 4162 </div> 4163 <div class="flex items-center gap-2"> 4164 <i class="fa-solid fa-phone text-gray-400"></i> 4165 <a class="hover:text-brand-500" 4166 href="tel:+381(0)21/483-13-60"> 4167 +381 (0)21/483-13-60 4168 </a> 4169 </div> 4170 4171 <div class="flex items-center gap-2"> 4172 <i class="fa-solid fa-envelope text-gray-400"></i> 4173 <a class="hover:text-brand-500" 4174 href="mailto:[email protected]">[email protected]</a> 4175 </div> 4176 4177 </dl> 4178 </section> 4179 <section class="rounded-xl border border-gray-200 bg-white p-5"> 4180 <h3 class="font-heading font-bold text-gray-900">Kancelarija u Beogradu</h3> 4181 <div class="text-sm text-gray-600 mt-0.5">Kancelarija</div> 4182 4183 <dl class="mt-3 space-y-1 text-sm"> 4184 4185 <div class="flex items-center gap-2"> 4186 <i class="fa-solid fa-envelope text-gray-400"></i> 4187 <a class="hover:text-brand-500" 4188 href="mailto:[email protected]">[email protected]</a> 4189 </div> 4190 4191 </dl> 4192 </section> 4193 </div> 4194 4195 4196 <div class="mt-8"> 4197 <iframe class="w-full h-72 rounded-xl border border-gray-200" 4198 src="https://www.google.com/maps?q=Novosadski%20sajam&output=embed" 4199 loading="lazy" 4200 referrerpolicy="no-referrer-when-downgrade"> 4201 </iframe> 4202 </div> 4203 </article> 4204 4205 <aside class="space-y-6"> 4206 <div class="sticky top-28"> 4207 <section class="bg-white p-5"> 4208 <h3 class="text-sm font-bold uppercase tracking-wide text-gray-600"> 4209 Brzi linkovi 4210 </h3> 4211 <ul class="mt-3 space-y-1"> 4212 <li> 4213 <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50 !flex" href="https://sajam.net/sr/kalendar" 4214 > 4215
4216 <span class="relative shrink-0"> 4217 <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900"> 4218 <i class="fa-solid fa-calendar-days text-sm"></i> 4219 </span> 4220 </span> 4221 4222 <span class="h-6 w-px bg-gray-200"></span> 4223 4224 4225 <span class="min-w-0 flex flex-col"> 4226 <span class="text-xs font-semibold text-neutral-900 truncate"> 4227 Kalendar 4228 </span> 4229 </span> 4230 4231 4232 <span 4233 class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1"> 4234 <i class="fa-solid fa-arrow-right-long"></i> 4235 </span> 4236 </a> 4237 </li> 4238 <li> 4239 <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50 !flex" href="https://sajam.net/sr/izlagaci/prijave" 4240 > 4241 4242 <span class="relative shrink-0"> 4243 <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900"> 4244 <i class="fa-solid fa-file-signature text-sm"></i> 4245 </span> 4246 </span> 4247 4248 <span class="h-6 w-px bg-gray-200"></span> 4249 4250 4251 <span class="min-w-0 flex flex-col"> 4252 <span class="text-xs font-semibold text-neutral-900 truncate"> 4253 Prijave 4254 </span> 4255 </span> 4256 4257 4258 <span 4259 class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1"> 4260 <i class="fa-solid fa-arrow-right-long"></i> 4261 </span> 4262 </a> 4263 </li> 4264 </ul> 4265 </section> 4266 4267 <section class="bg-white p-5"> 4268 <h3 class="text-sm font-bold uppercase tracking-wide text-gray-600"> 4269 Akcije 4270 </h3> 4271 <div class="mt-3 grid grid-cols-1 gap-2 max-w-xs"> 4272 <a href="https://sajam.net/sr/kalendar" 4273 class="ui-btn relative inline-flex items-center justify-center select-none 4274 transition will-change-transform duration-150 4275 focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2 4276 disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-brand-500 text-black bg-white rounded-full border-[2px] border-brand-500 min-h-11 text-sm px-4 py-2 gap-2.5 u-shadow font-medium hover:!border-brand-400 !bg-brand-500/20 text-black hover:!bg-white hover:text-black !border-brand-500/50" style="--slab: rgba(202,33,43,.75);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)" 4277 data-variant="secondary" 4278 data-scheme="light"> 4279 <i class="fa-solid fa-calendar-days"></i> 4280 <span class="ui-btn__label">Kalendar</span> 4281 </a> 4282 <a href="https://sajam.net/sr/vesti" 4283 class="ui-btn relative inline-flex items-center justify-center select-none 4284 transition will-change-transform duration-150 4285 focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2 4286 disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-brand-500 text-black bg-white rounded-full border-[2px] border-brand-500 min-h-11 text-sm px-4 py-2 gap-2.5 u-shadow font-medium hover:!border-brand-400 !bg-[var(--footer-via)]/20 text-black !border-[var(--footer-from)]/50 hover:!bg-white hover:text-black" style="--slab: rgba(202,33,43,.75);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)" 4287 data-variant="secondary" 4288 data-scheme="light"> 4289 <i class="fa-regular fa-newspaper"></i>
4290 <span class="ui-btn__label">Vesti</span> 4291 </a> 4292 <a href="https://sajam.net/sr/obavestenja" 4293 class="ui-btn relative inline-flex items-center justify-center select-none 4294 transition will-change-transform duration-150 4295 focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2 4296 disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-brand-500 text-black bg-white rounded-full border-[2px] border-brand-500 min-h-11 text-sm px-4 py-2 gap-2.5 u-shadow font-medium hover:!border-brand-400 !border-brand-400" style="--slab: rgba(202,33,43,.75);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)" 4297 data-variant="secondary" 4298 data-scheme="light"> 4299 <i class="fa-regular fa-bell"></i> 4300 <span class="ui-btn__label">ObaveÅ¡tenja</span> 4301 </a> 4302 </div> 4303 </section> 4304 4305 </div> 4306 </aside> 4307 </div> 4308 </section> 4309 4310 4311 <section class="max-w-7xl mx-auto px-4 pb-14"> 4312 <div class="grid lg:grid-cols-2 gap-10"> 4313 <div> 4314 <h2 class="text-xl font-heading font-bold flex items-center gap-2"> 4315 <span aria-hidden 4316 class="inline-block h-4 w-2 -skew-x-[30deg] bg-brand-500"></span> 4317 PredstojeÄi dogaÄaji 4318 </h2> 4319 <div class="mt-4 grid sm:grid-cols-2 lg:grid-cols-3 gap-4"> 4320 <a href="https://sajam.net/sr/dogadjaj/16-ewda-konferencija-ewda-2026" 4321 class="group bg-white rounded-xl border border-gray-200 p-4 hover:shadow-sm transition"> 4322 <div class="text-xs text-gray-500"> 4323 28.09.-02.10.2026 4324 </div> 4325 <div class="mt-1 font-semibold group-hover:text-brand-500">16. EWDA konferencija - EWDA 2026</div> 4326 </a> 4327 <a href="https://sajam.net/sr/dogadjaj/57-medunarodni-sajam-lova-i-ribolova" 4328 class="group bg-white rounded-xl border border-gray-200 p-4 hover:shadow-sm transition"> 4329 <div class="text-xs text-gray-500"> 4330 30.09.-04.10.2026 4331 </div> 4332 <div class="mt-1 font-semibold group-hover:text-brand-500">57. MEÄUNARODNI SAJAM LOVA I RIBOLOVA</div> 4333 </a> 4334 <a href="https://sajam.net/sr/dogadjaj/sajam-ekologije-2026" 4335 class="group bg-white rounded-xl border border-gray-200 p-4 hover:shadow-sm transition"> 4336 <div class="text-xs text-gray-500"> 4337 30.09.-04.10.2026 4338 </div> 4339 <div class="mt-1 font-semibold group-hover:text-brand-500">SAJAM EKOLOGIJE - 2026</div> 4340 </a> 4341 </div> 4342 </div> 4343 4344 <div> 4345 <h2 class="text-xl font-heading font-bold flex items-center gap-2"> 4346 <span aria-hidden 4347 class="inline-block h-4 w-2 -skew-x-[30deg] bg-brand-500"></span> 4348 Najnovije vesti 4349 </h2> 4350 <div class="mt-4 grid sm:grid-cols-2 lg:grid-cols-3 gap-4"> 4351 <a href="https://sajam.net/sr/vesti/lovci-dokazali-da-kuvaju-sjajno" 4352 class="group bg-white rounded-xl border border-gray-200 overflow-hidden hover:shadow-sm transition"> 4353 <div class="aspect-[16/9] overflow-hidden"> 4354 <img src="https://sajam.net/storage/news/covers/z7Lzo78GL3zW6X4tMqtXHH2DKQaucl2lJcuGPRBq.jpg" 4355 class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" 4356 alt=""> 4357 </div> 4358 <div class="p-3"> 4359 <div class="text-xs text-gray-500">01.10.2026. 4360 </div> 4361 <div class="mt-1 font-semibold group-hover:text-brand-500 line-clamp-2"> 4362 Lovci dokazali da kuvaju sjajno</div> 4363 </div> 4364 </a> 4365 <a href="https://sajam.net/sr/vesti/plovila-i-oprema-za-ljubitelje-nautike" 4366 class="group bg-white rounded-xl border border-gray-200 overflow-hidden hover:shadow-sm transition"> 4367 <div class="aspect-[16/9] overflow-hidden"> 4368 <img src="https://sajam.net/storage/news/covers/rl2opdT6xNldym78m9qJyb0E1Bqw7V74AdpUKJK1.jpg" 4369 class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" 4370 alt=""> 4371 </div> 4372 <div class="p-3"> 4373 <div class="text-xs text-gray-500">01.10.2026. 4374 </div> 4375 <div class="mt-1 font-semibold group-hover:text-brand-500 line-clamp-2"> 4376 PLOVILA I OPREMA ZA LJUBITELJE NAUTIKE</div> 4377 </div> 4378 </a> 4379 <a href="https://sajam.net/sr/vesti/najmladim-posetiocima-sajma-predstavljamo-svet-dinosaurusa" 4380 class="group bg-white rounded-xl border border-gray-200 overflow-hidden hover:shadow-sm transition"> 4381 <div class="aspect-[16/9] overflow-hidden"> 4382 <img src="https://sajam.net/storage/news/covers/ff6Y1l2cGEFcStOXLcYXAfFsGPyqCsLmfj5mVia4.jpg" 4383 class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" 4384 alt=""> 4385 </div> 4386 <div class="p-3"> 4387 <div class="text-xs text-gray-500">01.10.2026. 4388 </div> 4389 <div class="mt-1 font-semibold group-hover:text-brand-500 line-clamp-2"> 4390 NAJMLAÄIM POSETIÐCIMA SAJMA PREDSTAVLJAMO SVET DINOSAURUSA</div> 4391 </div> 4392 </a> 4393 </div> 4394 </div> 4395 </div> 4396 </section> 4397 4398 <div x-data="toaster()" 4399 x-init="init()" 4400 class="fixed z-[9999] bottom-4 right-4 space-y-2 pointer-events-none"
4401 aria-live="polite" 4402 aria-atomic="true"> 4403 <template x-for="t in items" 4404 :key="t.id"> 4405 <div x-show="t.show" 4406 @click="close(t.id)" 4407 x-transition:enter="transition ease-out duration-300" 4408 x-transition:enter-start="opacity-0 translate-y-2 scale-95" 4409 x-transition:enter-end="opacity-100 translate-y-0 scale-100" 4410 x-transition:leave="transition ease-in duration-200" 4411 x-transition:leave-start="opacity-100 translate-y-0 scale-100" 4412 x-transition:leave-end="opacity-0 translate-y-2 scale-95" 4413 class="pointer-events-auto w-80 rounded-xl shadow-lg ring-1 ring-black/5 overflow-hidden cursor-pointer" 4414 :class="{ 4415 'bg-emerald-50 text-emerald-900': t.type==='success', 4416 'bg-amber-50 text-amber-900': t.type==='warning', 4417 'bg-red-50 text-red-900': t.type==='error', 4418 'bg-white text-gray-900': !['success', 'warning', 'error'].includes(t.type), 4419 }" 4420 role="status"> 4421 <div class="p-4"> 4422 <div class="flex items-start gap-3"> 4423 <div class="shrink-0"> 4424 <i class="fa-solid" 4425 :class="{ 4426 'fa-circle-check text-emerald-600': t.type==='success', 4427 'fa-triangle-exclamation text-amber-600': t.type==='warning', 4428 'fa-circle-xmark text-red-600': t.type==='error', 4429 'fa-circle-info text-gray-600': !['success', 'warning', 'error'].includes(t.type), 4430 }"></i> 4431 </div> 4432 <div class="flex-1"> 4433 <div class="font-semibold" 4434 x-text="t.title || 'Obaveštenje'"></div> 4435 <div class="text-sm mt-0.5" 4436 x-text="t.text"></div> 4437 </div> 4438 <button @click="close(t.id)" 4439 class="text-gray-500 hover:text-gray-700"> 4440 <i class="fa-solid fa-xmark"></i> 4441 </button> 4442 </div> 4443 </div> 4444 </div> 4445 </template> 4446</div> 4447
4448<script> 4449 function toaster() { 4450 return { 4451 items: [], 4452 seed: 0, 4453 init() { 4454 if (window.__toastListener) { 4455 window.removeEventListener('toast', window.__toastListener); 4456 } 4457 window.__toastListener = (e) => this.push(e.detail || {}); 4458 window.addEventListener('toast', window.__toastListener); 4459 window.toast = (opts = {}) => window.dispatchEvent(new CustomEvent('toast', { 4460 detail: opts 4461 })); 4462 }, 4463 push({ 4464 text = '', 4465 title = '', 4466 type = 'success', 4467 timeout = 3500 4468 } = {}) { 4469 const id = ++this.seed; 4470 const item = { 4471 id, 4472 text, 4473 title, 4474 type, 4475 show: true 4476 }; 4477 this.items.push(item); 4478 if (timeout) setTimeout(() => this.close(id), timeout); 4479 }, 4480 close(id) { 4481 const i = this.items.findIndex(x => x.id === id); 4482 if (i !== -1) { 4483 this.items[i].show = false; 4484 setTimeout(() => { 4485 this.items.splice(i, 1); 4486 // notify listeners (weâll use this to set localStorage) 4487 window.dispatchEvent(new CustomEvent('toast:dismiss', { 4488 detail: { 4489 id 4490 } 4491 })); 4492 }, 200); 4493 } 4494 }, 4495 } 4496 } 4497</script>
4497 4498 </main> 4499 4500 <div x-data="toaster()" 4501 x-init="init()" 4502 class="fixed z-[9999] bottom-4 right-4 space-y-2 pointer-events-none" 4503 aria-live="polite" 4504 aria-atomic="true"> 4505 <template x-for="t in items" 4506 :key="t.id"> 4507 <div x-show="t.show" 4508 @click="close(t.id)" 4509 x-transition:enter="transition ease-out duration-300" 4510 x-transition:enter-start="opacity-0 translate-y-2 scale-95" 4511 x-transition:enter-end="opacity-100 translate-y-0 scale-100" 4512 x-transition:leave="transition ease-in duration-200" 4513 x-transition:leave-start="opacity-100 translate-y-0 scale-100" 4514 x-transition:leave-end="opacity-0 translate-y-2 scale-95" 4515 class="pointer-events-auto w-80 rounded-xl shadow-lg ring-1 ring-black/5 overflow-hidden cursor-pointer" 4516 :class="{ 4517 'bg-emerald-50 text-emerald-900': t.type==='success', 4518 'bg-amber-50 text-amber-900': t.type==='warning', 4519 'bg-red-50 text-red-900': t.type==='error', 4520 'bg-white text-gray-900': !['success', 'warning', 'error'].includes(t.type), 4521 }" 4522 role="status"> 4523 <div class="p-4"> 4524 <div class="flex items-start gap-3"> 4525 <div class="shrink-0"> 4526 <i class="fa-solid" 4527 :class="{ 4528 'fa-circle-check text-emerald-600': t.type==='success', 4529 'fa-triangle-exclamation text-amber-600': t.type==='warning', 4530 'fa-circle-xmark text-red-600': t.type==='error', 4531 'fa-circle-info text-gray-600': !['success', 'warning', 'error'].includes(t.type), 4532 }"></i> 4533 </div> 4534 <div class="flex-1"> 4535 <div class="font-semibold" 4536 x-text="t.title || 'Obaveštenje'"></div> 4537 <div class="text-sm mt-0.5" 4538 x-text="t.text"></div> 4539 </div> 4540 <button @click="close(t.id)" 4541 class="text-gray-500 hover:text-gray-700"> 4542 <i class="fa-solid fa-xmark"></i> 4543 </button> 4544 </div> 4545 </div> 4546 </div> 4547 </template> 4548</div> 4549
4550<script> 4551 function toaster() { 4552 return { 4553 items: [], 4554 seed: 0, 4555 init() { 4556 if (window.__toastListener) { 4557 window.removeEventListener('toast', window.__toastListener); 4558 } 4559 window.__toastListener = (e) => this.push(e.detail || {}); 4560 window.addEventListener('toast', window.__toastListener); 4561 window.toast = (opts = {}) => window.dispatchEvent(new CustomEvent('toast', { 4562 detail: opts 4563 })); 4564 }, 4565 push({ 4566 text = '', 4567 title = '', 4568 type = 'success', 4569 timeout = 3500 4570 } = {}) { 4571 const id = ++this.seed; 4572 const item = { 4573 id, 4574 text, 4575 title, 4576 type, 4577 show: true 4578 }; 4579 this.items.push(item); 4580 if (timeout) setTimeout(() => this.close(id), timeout); 4581 }, 4582 close(id) { 4583 const i = this.items.findIndex(x => x.id === id); 4584 if (i !== -1) { 4585 this.items[i].show = false; 4586 setTimeout(() => { 4587 this.items.splice(i, 1); 4588 // notify listeners (weâll use this to set localStorage) 4589 window.dispatchEvent(new CustomEvent('toast:dismiss', { 4590 detail: { 4591 id 4592 } 4593 })); 4594 }, 200); 4595 } 4596 }, 4597 } 4598 } 4599</script>
4599 4600 <footer 4601 class="pt-16 bg-gradient-to-r from-[var(--footer-from)] via-[var(--footer-via)] to-[var(--footer-to)] text-white"> 4602 4603 4604 <div class="relative"> 4605 <div class="w-full"> 4606 <div class="max-w-7xl mx-auto px-4 sm:py-12 py-6 flex items-center justify-between gap-6"> 4607 <div class="flex items-center gap-4"> 4608 4609 <img src="https://sajam.net/images/logos/novi-sad-logo.svg" 4610 alt="Grad Novi Sad" 4611 loading="lazy" 4612 decoding="async" 4613 class="sm:h-24 h-10 w-auto drop-shadow" /> 4614 <img src="https://sajam.net/images/logos/novi-sad-city-logo.svg" 4615 alt="Grad Novi Sad" 4616 loading="lazy" 4617 decoding="async" 4618 class="sm:h-24 h-10 w-auto drop-shadow" /> 4619 <div class="hidden sm:block"> 4620 <p class="text-xs tracking-wide uppercase text-white/80">Grad Novi Sad</p> 4621 <p class="text-sm font-semibold">Partner Novosadskog Sajma</p> 4622 </div> 4623 </div> 4624 </div> 4625 </div> 4626 </div> 4627 4628 4629 <section class="relative overflow-visible newsletter-overlap"> 4630 <div class="relative z-[1] max-w-7xl mx-auto px-4 py-8"> 4631 <div class=" overflow-hidden bg-brand-600"> 4632 <div class="grid md:grid-cols-2 items-center gap-6 px-5 sm:px-6 md:px-8 md:py-12 py-6 min-h-[300px]"> 4633 <div> 4634 <h2 class="text-2xl sm:text-5xl font-heading font-extrabold">Bilten 4635 </h2> 4636 <p class="mt-2 text-white/90"> 4637 Prijavite se i dobijajte vesti, najave i korisne informacije direktno u inbox. 4638 </p> 4639 </div> 4640 4641 <form method="POST" 4642 class="flex flex-col items-stretch gap-3"> 4643 <input type="hidden" name="_token" value="diVUNBlLFH81Ti6YIimuclgLoiCenkYkD0trEjjr" autocomplete="off"> <label for="footer-news-email" 4644 class="text-white font-semibold">Unesite e-mail :</label> 4645 <input id="footer-news-email" 4646 type="email" 4647 name="email" 4648 disabled 4649 required 4650 placeholder="[email protected]" 4651 class="min-w-0 flex-1 bg-gray-200 border-0 px-3 py-4 text-gray-400 placeholder:text-gray-500 cursor-not-allowed 4652 focus:ring-2 focus:ring-offset-2 focus:ring-offset-brand-600 focus:ring-white" /> 4653 <button disabled 4654 class="inline-flex min-h-11 items-center justify-center gap-2 bg-black/30 text-gray-400 font-medium px-4 py-2 cursor-not-allowed relative"> 4655 Pošalji <i data-ph="arrow-right-bold" 4656 class="w-4 h-4"></i> 4657 <span 4658 class="absolute -bottom-2 -right-3 bg-amber-300 border border-white text-gray-900 text-[10px] uppercase font-bold px-3 py-1 shadow"> 4659 Uskoro / Soon 4660 </span> 4661 </button> 4662 </form> 4663 </div> 4664 </div> 4665 </div> 4666 </section> 4667 4668 4669 <section class="w-full mx-auto px-4 py-10 bg-gray-950"> 4670 <div class="max-w-7xl mx-auto grid gap-10 md:grid-cols-3 lg:grid-cols-6"> 4671 4672 4673 <div class="lg:col-span-2"> 4674 <div class="flex items-center gap-3"> 4675 <a href="https://sajam.net/sr" 4676 class="relative inline-flex items-center"> 4677 <img src="https://sajam.net/images/logo.svg" 4678 loading="lazy" 4679 decoding="async"
4680 alt="Novosadski Sajam Logo" 4681 class="relative z-10 block transition-all duration-300 h-14"> 4682 </a> 4683 <span class="sr-only">Novosadski Sajam</span> 4684 </div> 4685 <p class="mt-3 text-sm text-gray-300">VodeÄa sajamska kuÄa u Srbiji - viÅ¡e od jednog veka povezuje industriju, inovacije i zajednicu.</p> 4686 4687 4688 <div class="mt-4 flex items-center gap-3"> 4689 <a href="https://instagram.com/novosadski_sajam" 4690 class="ui-btn relative inline-flex items-center justify-center select-none 4691 transition will-change-transform duration-150 4692 focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2 4693 disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-white text-white bg-black/60 border rounded-full border-white/30 min-h-11 text-sm px-4 py-2 gap-2.5 aspect-1/1 !rounded-full !p-2 leading-0 hover:!bg-white hover:!text-black" style="--slab: rgba(202,33,43,.75);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)" target="_blank" rel="noopener nofollow" aria-label="Instagram" 4694 data-variant="secondary" 4695 data-scheme="dark"> 4696 <span class="ui-btn__label"><i data-ph="instagram-logo-duo" 4697 class="w-5 h-5"></i></span> 4698 </a> 4699 <a href="https://facebook.com/novosadski.sajam" 4700 class="ui-btn relative inline-flex items-center justify-center select-none 4701 transition will-change-transform duration-150 4702 focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2 4703 disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-white text-white bg-black/60 border rounded-full border-white/30 min-h-11 text-sm px-4 py-2 gap-2.5 aspect-1/1 !rounded-full !p-2 leading-0 hover:!bg-white hover:!text-black" style="--slab: rgba(202,33,43,.75);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)" target="_blank" rel="noopener nofollow" aria-label="Facebook" 4704 data-variant="secondary" 4705 data-scheme="dark"> 4706 <span class="ui-btn__label"><i data-ph="facebook-logo-duo" 4707 class="w-5 h-5"></i></span> 4708 </a> 4709 <a href="https://youtube.com/@novosadskisajam" 4710 class="ui-btn relative inline-flex items-center justify-center select-none 4711 transition will-change-transform duration-150 4712 focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2 4713 disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-white text-white bg-black/60 border rounded-full border-white/30 min-h-11 text-sm px-4 py-2 gap-2.5 aspect-1/1 !rounded-full !p-2 leading-0 hover:!bg-white hover:!text-black" style="--slab: rgba(202,33,43,.75);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)" target="_blank" rel="noopener nofollow" aria-label="YouTube" 4714 data-variant="secondary" 4715 data-scheme="dark"> 4716 <span class="ui-btn__label"><i data-ph="youtube-logo-duo" 4717 class="w-5 h-5"></i></span> 4718 </a> 4719 4720 </div> 4721 </div> 4722 4723 4724 <nav aria-labelledby="ft-visitors" 4725 x-data="{ open: false }"> 4726 <h3 id="ft-visitors" 4727 class="text-sm font-bold uppercase tracking-wide text-white/70"> 4728 <button type="button" 4729 class="md:hidden flex items-center justify-between w-full min-h-[44px] text-left text-sm font-bold uppercase tracking-wide text-white/70" 4730 :aria-expanded="open" 4731 aria-controls="ft-visitors-panel" 4732 @click="open = !open">
4733 <span>Posetioci</span> 4734 <span class="shrink-0 transition-transform duration-200" 4735 :class="{ 'rotate-180': open }"> 4736 <i data-ph="caret-down-bold" class="w-4 h-4 block"></i> 4737 </span> 4738 </button> 4739 <span class="hidden md:block">Posetioci</span> 4740 </h3> 4741 <div id="ft-visitors-panel" 4742 class="ft-collapse" 4743 :class="{ 'is-open': open }"> 4744 <div class="ft-collapse__inner"> 4745 <ul class="mt-3"> 4746 <li><a class="footer-link" 4747 href="https://sajam.net/sr/posetioci/ulaznice">Ulaznice</a></li> 4748 <li><a class="footer-link" 4749 href="https://sajam.net/sr/posetioci/kako-doci">Kako do nas (mapa)</a></li> 4750 <li><a class="footer-link" 4751 href="https://sajam.net/sr/posetioci/parking">Parking i kapije</a></li> 4752 <li><a class="footer-link" 4753 href="https://sajam.net/sr/posetioci/plan-sajma">Plan Sajma (hale)</a></li> 4754 <li><a class="footer-link" 4755 href="https://sajam.net/sr/posetioci/najave">Programi i najave</a></li> 4756 <li><a class="footer-link" 4757 href="https://sajam.net/sr/posetioci/katalog">Katalog i izlagaÄi</a></li> 4758 <li><a class="footer-link" 4759 href="https://sajam.net/sr/posetioci/smestaj-preporuke">SmeÅ¡taj i preporuke</a></li> 4760 <li><a class="footer-link" 4761 href="https://sajam.net/sr/posetioci/pristupacnost">PristupaÄnost (A11y)</a> 4762 </li> 4763 </ul> 4764 </div> 4765 </div> 4766 </nav> 4767 4768 4769 <nav aria-labelledby="ft-exhibitors" 4770 x-data="{ open: false }"> 4771 <h3 id="ft-exhibitors" 4772 class="text-sm font-bold uppercase tracking-wide text-white/70"> 4773 <button type="button" 4774 class="md:hidden flex items-center justify-between w-full min-h-[44px] text-left text-sm font-bold uppercase tracking-wide text-white/70" 4775 :aria-expanded="open" 4776 aria-controls="ft-exhibitors-panel" 4777 @click="open = !open"> 4778 <span>IzlagaÄi</span> 4779 <span class="shrink-0 transition-transform duration-200" 4780 :class="{ 'rotate-180': open }"> 4781 <i data-ph="caret-down-bold" class="w-4 h-4 block"></i> 4782 </span> 4783 </button> 4784 <span class="hidden md:block">IzlagaÄi</span> 4785 </h3> 4786 <div id="ft-exhibitors-panel" 4787 class="ft-collapse" 4788 :class="{ 'is-open': open }"> 4789 <div class="ft-collapse__inner"> 4790 <ul class="mt-3"> 4791 <li><a class="footer-link" 4792 href="https://sajam.net/sr/izlagaci/prijave">Prijava i uslovi uÄeÅ¡Äa</a></li> 4793 <li><a class="footer-link" 4794 href="https://sajam.net/sr/izlagaci/setup-hub">Å tandovi i oprema</a> 4795 </li> 4796 <li><a class="footer-link" 4797 href="https://sajam.net/sr/izlagaci/reklamne-usluge">Brendiranje i reklamne usluge</a></li> 4798 <li><a class="footer-link" 4799 href="https://sajam.net/sr/izlagaci/uredjenje-prostora">UreÄenje prostora</a> 4800 </li> 4801 <li><a class="footer-link" 4802 href="https://sajam.net/sr/izlagaci/struja-voda-internet">Struja, voda, internet</a> 4803 </li> 4804 <li><a class="footer-link" 4805 href="https://sajam.net/sr/izlagaci/audio-video-podrska">Audio/Video podrÅ¡ka</a> 4806 </li> 4807 <li><a class="footer-link" 4808 href="https://sajam.net/sr/izlagaci/bezbednost-osiguranje">Bezbednost i osiguranje</a> 4809 </li> 4810 <li><a class="footer-link" 4811 href="https://sajam.net/sr/izlagaci/zastupnici-spediteri">Zastupnici i Å¡pediteri</a> 4812 </li> 4813 <li><a class="footer-link" 4814 href="https://sajam.net/sr/izlagaci/parking">Parking i skladiÅ¡tenje</a> 4815 </li> 4816 </ul> 4817 </div> 4818 </div> 4819 </nav> 4820 4821 4822 <nav aria-labelledby="ft-congress" 4823 x-data="{ open: false }"> 4824 <h3 id="ft-congress" 4825 class="text-sm font-bold uppercase tracking-wide text-white/70"> 4826 <button type="button" 4827 class="md:hidden flex items-center justify-between w-full min-h-[44px] text-left text-sm font-bold uppercase tracking-wide text-white/70" 4828 :aria-expanded="open" 4829 aria-controls="ft-congress-panel" 4830 @click="open = !open">
4831 <span>Kongresni Centar âMaster"</span> 4832 <span class="shrink-0 transition-transform duration-200" 4833 :class="{ 'rotate-180': open }"> 4834 <i data-ph="caret-down-bold" class="w-4 h-4 block"></i> 4835 </span> 4836 </button> 4837 <span class="hidden md:block">Kongresni Centar âMaster"</span> 4838 </h3> 4839 <div id="ft-congress-panel" 4840 class="ft-collapse" 4841 :class="{ 'is-open': open }"> 4842 <div class="ft-collapse__inner"> 4843 <ul class="mt-3"> 4844 <li><a class="footer-link" 4845 href="https://sajam.net/sr/kongres/sale-kapacitet">Sale i kapaciteti</a> 4846 </li> 4847 <li><a class="footer-link" 4848 href="https://sajam.net/sr/kongres/tehnicka-oprema">TehniÄka oprema</a> 4849 </li> 4850 <li><a class="footer-link" 4851 href="https://sajam.net/sr/kongres/cenovnik-i-prijava">Cenovnik i prijava</a></li> 4852 <li><a class="footer-link" 4853 href="https://sajam.net/sr/kongres/dodatne-usluge">Dodatne usluge</a></li> 4854 <li><a class="footer-link" 4855 href="https://sajam.net/sr/kongres/posaljite-upit">PoÅ¡aljite upit</a></li> 4856 <li><a class="footer-link" 4857 href="https://sajam.net/sr/kongres/kontakt">Tim & kontakt</a></li> 4858 </ul> 4859 </div> 4860 </div> 4861 </nav> 4862 4863 4864 <nav aria-labelledby="ft-press" 4865 x-data="{ open: false }"> 4866 <h3 id="ft-press" 4867 class="text-sm font-bold uppercase tracking-wide text-white/70"> 4868 <button type="button" 4869 class="md:hidden flex items-center justify-between w-full min-h-[44px] text-left text-sm font-bold uppercase tracking-wide text-white/70" 4870 :aria-expanded="open" 4871 aria-controls="ft-press-panel" 4872 @click="open = !open"> 4873 <span>Press</span> 4874 <span class="shrink-0 transition-transform duration-200" 4875 :class="{ 'rotate-180': open }"> 4876 <i data-ph="caret-down-bold" class="w-4 h-4 block"></i> 4877 </span> 4878 </button> 4879 <span class="hidden md:block">Press</span> 4880 </h3> 4881 <div id="ft-press-panel" 4882 class="ft-collapse" 4883 :class="{ 'is-open': open }"> 4884 <div class="ft-collapse__inner"> 4885 <ul class="mt-3"> 4886 <li><a class="footer-link" 4887 href="https://sajam.net/sr/press/konferencije">Konferencije za Å¡tampu</a></li> 4888 <li><a class="footer-link" 4889 href="https://sajam.net/sr/press/medijski-paket">Media kit</a></li> 4890 <li><a class="footer-link" 4891 href="https://sajam.net/sr/media/galerije">Foto galerija</a></li> 4892 <li><a class="footer-link" 4893 href="https://sajam.net/sr/vesti/press">Blog / priÄe</a></li> 4894 <li><a class="footer-link" 4895 href="https://sajam.net/sr/kalendar">Kalendar</a></li> 4896 <li><a class="footer-link" 4897 href="https://sajam.net/sr/posetioci/plan-sajma">Prostor i mapa Sajma</a></li> 4898 <li><a class="footer-link" 4899 href="https://sajam.net/sr/o-nama/istorijski-pregled">Istorijski pregled</a></li> 4900 <li><a class="footer-link" 4901 href="https://sajam.net/sr/kontakt">Kontakt</a></li> 4902 </ul> 4903 4904 4905 <div class="mt-4 flex flex-wrap gap-2"> 4906 <a href="https://sajam.net/sr" 4907 class="ui-btn relative inline-flex items-center justify-center select-none 4908 transition will-change-transform duration-150 4909 focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2 4910 disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-white text-white bg-black/60 border rounded-full border-white/30 min-h-10 text-xs px-3 py-1.5 gap-2 !min-h-11 !rounded-full !text-sm !font-medium hover:!bg-white hover:!text-black" style="--slab: rgba(202,33,43,.75);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)" 4911 data-variant="secondary" 4912 data-scheme="dark">
4913 <span class="ui-btn__label"><i data-ph="house-bold" 4914 class="w-4 h-4 inline-block shrink-0 align-middle"></i> Glavna</span> 4915 </a> 4916 </div> 4917 </div> 4918 </div> 4919 </nav> 4920 </div> 4921 4922 4923 <div 4924 class="mt-10 border-t border-white/10 pt-6 flex flex-col sm:flex-row items-center justify-between gap-3 text-sm text-gray-400"> 4925 <div>© 2026 Novosadski sajam. Sva prava zadržana.</div> 4926 <div class="flex items-center gap-4"> 4927 4928 <a href="https://sajam.net/sr/kontakt" 4929 class="footer-link">Kontakt</a> 4930 </div> 4931 </div> 4932 </section> 4933 4934 4935 <style> 4936 .footer-link { 4937 display: inline-flex; 4938 min-height: 44px; 4939 align-items: center; 4940 color: rgb(209 213 219/1); 4941 font-size: .875rem; 4942 line-height: 1.25rem; 4943 font-weight: 500; 4944 } 4945 4946 .footer-link:hover { 4947 color: #fff 4948 } 4949 4950 .newsletter-overlap::before { 4951 content: ""; 4952 position: absolute; 4953 left: 0; 4954 right: 0; 4955 top: calc(50% - 4px); 4956 bottom: 0; 4957 background-color: oklch(13% .028 261.692); 4958 z-index: 0; 4959 pointer-events: none; 4960 } 4961 4962 .ft-collapse { 4963 display: grid; 4964 grid-template-rows: 0fr; 4965 transition: grid-template-rows .25s ease; 4966 } 4967 .ft-collapse.is-open { 4968 grid-template-rows: 1fr; 4969 } 4970 .ft-collapse__inner { 4971 min-height: 0; 4972 overflow: hidden; 4973 } 4974 @media (min-width: 768px) { 4975 .ft-collapse { grid-template-rows: 1fr !important; } 4976 } 4977 @media (prefers-reduced-motion: reduce) { 4978 .ft-collapse { transition: none; } 4979 } 4980 4981 </style> 4982</footer> 4983 4984 4985 4986 4987 <div class="h-[72px] lg:hidden" 4988 aria-hidden="true"></div> 4989 4990 <nav aria-label="Brza navigacija" 4991 class="fixed bottom-0 inset-x-0 z-40 lg:hidden bg-white/95 backdrop-blur-sm border-t border-neutral-200/60 shadow-[0_-1px_0_rgba(0,0,0,0.04),0_-4px_20px_rgba(0,0,0,0.06)]" 4992 style="padding-bottom: env(safe-area-inset-bottom)"> 4993 <div class="flex h-[72px]"> 4994 <a href="https://sajam.net/sr/kalendar" 4995 class="flex flex-col items-center justify-center flex-1 gap-1 select-none 4996 transition-opacity active:opacity-60"> 4997 4998 <span class="flex items-center justify-center w-14 h-8"> 4999 <i class="fa-solid fa-calendar-days text-neutral-400 text-[1.1rem] leading-none"></i> 5000 </span> 5001 <span class="text-[11px] text-neutral-400 leading-none">Kalendar</span> 5002 </a> 5003 <a href="https://sajam.net/sr/posetioci" 5004 class="flex flex-col items-center justify-center flex-1 gap-1 select-none 5005 transition-opacity active:opacity-60"> 5006 5007 <span class="flex items-center justify-center w-14 h-8"> 5008 <i class="fa-solid fa-users text-neutral-400 text-[1.1rem] leading-none"></i> 5009 </span> 5010 <span class="text-[11px] text-neutral-400 leading-none">Posetioci</span> 5011 </a> 5012 <a href="https://sajam.net/sr/izlagaci" 5013 class="flex flex-col items-center justify-center flex-1 gap-1 select-none 5014 transition-opacity active:opacity-60"> 5015 5016 <span class="flex items-center justify-center w-14 h-8"> 5017 <i class="fa-solid fa-store text-neutral-400 text-[1.1rem] leading-none"></i> 5018 </span>
5019 <span class="text-[11px] text-neutral-400 leading-none">IzlagaÄi</span> 5020 </a> 5021 <a href="https://sajam.net/sr/kontakt" 5022 aria-current="page" class="flex flex-col items-center justify-center flex-1 gap-1 select-none 5023 transition-opacity active:opacity-60"> 5024 5025 5026 <span 5027 class="flex items-center justify-center w-14 h-8 rounded-full bg-brand-600 transition-all"> 5028 <i class="fa-solid fa-phone text-white text-sm leading-none"></i> 5029 </span> 5030 <span 5031 class="text-[11px] font-semibold text-brand-600 leading-none tracking-tight">Kontakt</span> 5032 </a> 5033 </div> 5034 </nav> 5035 5036
5036<script> 5037 (function() { 5038 const PAGE_CONF = { 5039 overlay: false 5040 }; 5041 5042 function setupStore() { 5043 if (!window.Alpine) return; 5044 5045 if (!Alpine.store('header')) { 5046 Alpine.store('header', { 5047 overlay: false, 5048 scrolled: false, 5049 height: 72, 5050 el: null, 5051 5052 shrinkAt: 140, 5053 expandAt: 60, 5054 5055 topbar: { 5056 hidden: false, 5057 height: 48, 5058 offsetDown: 60, 5059 offsetUp: 20, 5060 _anchorShow: 0, 5061 _anchorHide: 0, 5062 }, 5063 5064 _ticking: false, 5065 _lastY: 0, 5066 _ro: null, 5067 5068 setOverlay(v) { 5069 this.overlay = !!v; 5070 }, 5071 5072 _applyScrolled(y) { 5073 if (!this.scrolled && y > this.shrinkAt) this.scrolled = true; 5074 else if (this.scrolled && y < this.expandAt) this.scrolled = false; 5075 }, 5076 5077 _applyTopbar(y) { 5078 const dirDown = y > this._lastY; 5079 const T = this.topbar; 5080 if (dirDown) { 5081 if (!T.hidden && y > (T._anchorShow + T.offsetDown)) { 5082 T.hidden = true; 5083 T._anchorHide = y; 5084 } 5085 } else { 5086 if (T.hidden && y < (T._anchorHide - T.offsetUp)) { 5087 T.hidden = false; 5088 T._anchorShow = y; 5089 } 5090 } 5091 }, 5092 5093 onScroll() { 5094 const y = window.scrollY || 0; 5095 if (this._ticking) return; 5096 this._ticking = true; 5097 requestAnimationFrame(() => { 5098 this._applyScrolled(y); 5099 this._applyTopbar(y); 5100 this._ticking = false; 5101 this._lastY = y; 5102 }); 5103 }, 5104 5105 measure() { 5106 const el = document.getElementById('site-header'); 5107 if (!el) return; 5108 this.el = el; 5109 const setH = () => { 5110 const h = Math.round(el.getBoundingClientRect().height); 5111 if (Math.abs(h - this.height) >= 2) this.height = h; 5112 }; 5113 setH(); 5114 if (typeof ResizeObserver !== 'undefined') { 5115 this._ro?.disconnect?.(); 5116 this._ro = new ResizeObserver(() => setH()); 5117 this._ro.observe(el); 5118 } else { 5119 window.addEventListener('resize', setH, { 5120 passive: true 5121 }); 5122 } 5123 }, 5124 }); 5125 } 5126 5127 const H = Alpine.store('header'); 5128 H.setOverlay(PAGE_CONF.overlay); 5129 H.measure(); 5130 5131 const y0 = window.scrollY || 0; 5132 H._lastY = y0; 5133 H.topbar._anchorShow = y0; 5134 H.topbar._anchorHide = y0; 5135 5136 H._applyScrolled(y0); 5137 window.addEventListener('scroll', () => H.onScroll(), { 5138 passive: true 5139 }); 5140 window.addEventListener('load', () => H.measure()); 5141 } 5142
5143 if (window.Alpine) setupStore(); 5144 else document.addEventListener('alpine:init', setupStore); 5145 })(); 5146 </script>
5146 5147 <div x-data="cookieConsent()" 5148 x-init="init()" 5149 x-show="open" 5150 class="fixed z-[1000] bottom-4 inset-x-0 px-4 sm:px-6"> 5151 <div 5152 class="mx-auto max-w-4xl rounded-xl border border-gray-200 5153 bg-gradient-to-r from-gray-100 via-gray-50 to-blue-50 5154 shadow-sm p-4 sm:p-5 flex flex-col sm:flex-row gap-3 sm:items-center"> 5155 <div class="text-sm text-gray-800 leading-snug"> 5156 <strong>KolaÄiÄi i analitika</strong> 5157 <div class="text-gray-700"> 5158 Koristimo analitiÄke kolaÄiÄe da bismo razumeli poseÄenost i poboljÅ¡ali sajt. Analitika Äe biti omoguÄena tek nakon VaÅ¡e saglasnosti. 5159 </div> 5160 </div> 5161 <div class="sm:ms-auto flex items-center gap-2"> 5162 <button type="button" 5163 class="ui-btn relative inline-flex items-center justify-center select-none 5164 transition will-change-transform duration-150 5165 focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2 5166 disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-brand-500 text-white bg-brand-500 hover:bg-black hover:text-white min-h-10 text-xs px-3 py-1.5 gap-2 u-shadow" style="--slab: rgba(202,33,43,.9);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)" @click="acceptAll()" 5167 data-variant="primary" 5168 data-scheme="light"> 5169 <span class="ui-btn__label">Prihvatam analitiku</span> 5170 </button> 5171 <button type="button" 5172 class="ui-btn relative inline-flex items-center justify-center select-none 5173 transition will-change-transform duration-150 5174 focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2 5175 disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-brand-500 text-black bg-transparent border-[2px] border-brand-600 min-h-10 text-xs px-3 py-1.5 gap-2 u-shadow" style="--slab: rgba(202,33,43,.75);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)" @click="deny()" 5176 data-variant="outline" 5177 data-scheme="light"> 5178 <span class="ui-btn__label">Samo neophodno</span> 5179 </button> 5180 </div> 5181 </div> 5182</div> 5183
5184<script> 5185 function cookieConsent() { 5186 return { 5187 open: false, 5188 key: 'ns_cookie_consent_v1', 5189 5190 init() { 5191 try { 5192 const v = localStorage.getItem(this.key); 5193 if (v === 'accepted' || v === 'denied') return; 5194 } catch (_) {} 5195 this.open = true; 5196 }, 5197 5198 acceptAll() { 5199 this.open = false; 5200 try { 5201 localStorage.setItem(this.key, 'accepted'); 5202 } catch (_) {} 5203 5204 // Push consent update (works even if gtag not yet loaded) 5205 window.dataLayer = window.dataLayer || []; 5206 window.dataLayer.push({ 5207 event: "consent_update", 5208 'analytics_storage': 'granted', 5209 'ad_storage': 'denied', 5210 'ad_user_data': 'denied', 5211 'ad_personalization': 'denied' 5212 }); 5213 console.log("Consent updated: granted (analytics_storage)"); 5214 5215 5216 // If gtag is defined, explicitly update it too 5217 if (typeof gtag === "function") { 5218 gtag('consent', 'update', { 5219 'analytics_storage': 'granted' 5220 }); 5221 console.log("gtag consent update fired: granted"); 5222 5223 } 5224 }, 5225 5226 deny() { 5227 this.open = false; 5228 try { 5229 localStorage.setItem(this.key, 'denied'); 5230 } catch (_) {} 5231 5232 window.dataLayer = window.dataLayer || []; 5233 window.dataLayer.push({ 5234 event: "consent_update", 5235 'analytics_storage': 'denied', 5236 'ad_storage': 'denied', 5237 'ad_user_data': 'denied', 5238 'ad_personalization': 'denied' 5239 }); 5240 console.log("Consent updated: denied (all)"); 5241 5242 5243 if (typeof gtag === "function") { 5244 gtag('consent', 'update', { 5245 'analytics_storage': 'denied', 5246 'ad_storage': 'denied', 5247 'ad_user_data': 'denied', 5248 'ad_personalization': 'denied' 5249 }); 5250 console.log("gtag consent update fired: denied"); 5251 5252 } 5253 } 5254 } 5255 } 5256</script>
5256 5257 5258 5259
5259<script> 5260 window.kalMini = window.kalMini || function() { 5261 return { 5262 category: '', 5263 season: '', 5264 status: '', 5265 opts: JSON.parse('{\u0022category\u0022:[{\u0022value\u0022:\u0022\u0022,\u0022label\u0022:\u0022Sve\u0022},{\u0022value\u0022:\u0022book\u0022,\u0022label\u0022:\u0022Knjiga\u0022},{\u0022value\u0022:\u0022agriculture\u0022,\u0022label\u0022:\u0022Poljoprivreda\u0022},{\u0022value\u0022:\u0022tourism\u0022,\u0022label\u0022:\u0022Turizam\u0022}],\u0022season\u0022:[{\u0022value\u0022:\u0022\u0022,\u0022label\u0022:\u0022Sve\u0022},{\u0022value\u0022:\u0022winter\u0022,\u0022label\u0022:\u0022Zima\u0022,\u0022icon\u0022:\u0022fa-solid fa-snowflake\u0022},{\u0022value\u0022:\u0022spring\u0022,\u0022label\u0022:\u0022Prole\\u0107e\u0022,\u0022icon\u0022:\u0022fa-solid fa-seedling\u0022},{\u0022value\u0022:\u0022summer\u0022,\u0022label\u0022:\u0022Leto\u0022,\u0022icon\u0022:\u0022fa-solid fa-sun\u0022},{\u0022value\u0022:\u0022autumn\u0022,\u0022label\u0022:\u0022Jesen\u0022,\u0022icon\u0022:\u0022fa-solid fa-leaf\u0022}],\u0022status\u0022:[{\u0022value\u0022:\u0022\u0022,\u0022label\u0022:\u0022Svi\u0022},{\u0022value\u0022:\u0022upcoming\u0022,\u0022label\u0022:\u0022Uskoro\u0022},{\u0022value\u0022:\u0022live\u0022,\u0022label\u0022:\u0022U toku\u0022},{\u0022value\u0022:\u0022past\u0022,\u0022label\u0022:\u0022Zavr\\u0161eni\u0022}]}'), 5266 label(key) { 5267 const list = this.opts[key] || []; 5268 const val = (this[key] ?? ''); 5269 const found = list.find(o => o.value === (val ?? '')); 5270 return found ? found.label : (list[0]?.label || ''); 5271 }, 5272 selectedOption(key) { 5273 const list = this.opts[key] || []; 5274 const val = (this[key] ?? ''); 5275 return list.find(o => o.value === (val ?? '')) || list[0] || null; 5276 }, 5277 } 5278 } 5279 </script>
5279 5280
5280<script> 5281 function contactForm() { 5282 return { 5283 loading: false, 5284 sent: false, 5285 error: '', 5286 form: { 5287 name: '', 5288 email: '', 5289 message: '' 5290 }, 5291 5292 async submit() { 5293 if (this.loading) return; 5294 this.loading = true; 5295 this.error = ''; 5296 5297 try { 5298 const res = await fetch('https://sajam.net/sr/contact-submission', { 5299 method: 'POST', 5300 headers: { 5301 'Content-Type': 'application/json', 5302 'Accept': 'application/json', 5303 'X-Requested-With': 'XMLHttpRequest', 5304 'X-CSRF-TOKEN': 'diVUNBlLFH81Ti6YIimuclgLoiCenkYkD0trEjjr', 5305 }, 5306 credentials: 'same-origin', 5307 body: JSON.stringify(this.form), 5308 }); 5309 5310 if (res.ok) { 5311 this.sent = true; 5312 window.toast({ 5313 type: 'success', 5314 title: 'Poslato', 5315 text: 'Vaša poruka je uspešno poslata.', 5316 timeout: 4000, 5317 }); 5318 } else if (res.status === 422) { 5319 const data = await res.json(); 5320 this.error = Object.values(data.errors || {})[0]?.[0] ?? 'Greška u formularu.'; 5321 } else { 5322 this.error = 'Došlo je do greške. Pokušajte ponovo.'; 5323 } 5324 } catch { 5325 this.error = 'Mrežna greška. Proverite vezu i pokušajte ponovo.'; 5326 } finally { 5327 this.loading = false; 5328 } 5329 }, 5330 5331 reset() { 5332 this.form = { 5333 name: '', 5334 email: '', 5335 message: '' 5336 }; 5337 this.sent = false; 5338 this.error = ''; 5339 }, 5340 } 5341 } 5342 </script>
5342 5343
5343<script> 5344 /** 5345 * Pause helper for the bell badge. 5346 * Stores a snapshot in localStorage so the dot hides for ~24h 5347 * unless server reports a newer version / newer announcement. 5348 */ 5349 const AnnPause = { 5350 key(locale) { 5351 return `ann.pause.${locale}`; 5352 }, 5353 get(locale) { 5354 try { 5355 return JSON.parse(localStorage.getItem(this.key(locale)) || 'null'); 5356 } catch { 5357 return null; 5358 } 5359 }, 5360 set(locale, data) { 5361 localStorage.setItem(this.key(locale), JSON.stringify(data)); 5362 }, 5363 clear(locale) { 5364 localStorage.removeItem(this.key(locale)); 5365 }, 5366 isActive(locale, meta, ms = 24 * 60 * 60 * 1000) { 5367 const pause = this.get(locale); 5368 if (!pause) return false; 5369 5370 const at = Date.parse(pause.at || ''); 5371 if (!at || Date.now() - at > ms) return false; 5372 5373 // server signalled ânew stuffâ 5374 if (meta?.pause_version && pause.version !== meta.pause_version) return false; 5375 if (meta?.latest_published !== pause.latest_published) return false; 5376 if (meta?.latest_id !== pause.latest_id) return false; 5377 5378 return true; 5379 } 5380 }; 5381 5382 /** 5383 * Navbar bell component 5384 */ 5385 window.annBell = function(locale = 'sr', feedUrl) { 5386 const READ_KEY = `ann.read.${locale}`; 5387 const HIDDEN_KEY = `ann.hidden.${locale}`; 5388 5389 // --- storage helpers 5390 const loadArr = (k) => { 5391 try { 5392 const v = JSON.parse(localStorage.getItem(k) || '[]'); 5393 return Array.isArray(v) ? v : []; 5394 } catch { 5395 return []; 5396 } 5397 }; 5398 const saveArr = (k, v) => { 5399 try { 5400 localStorage.setItem(k, JSON.stringify(v)); 5401 } catch {} 5402 }; 5403 5404 // Bucketed shortlist (max 6; up to 3 pinned first) 5405 const shortlistAnnouncements = (items, readIds) => { 5406 const MAX_TOTAL = 6; 5407 const MAX_PINNED = 3; 5408 const readSet = new Set(readIds.map(String)); 5409 5410 const enriched = items.map(it => ({ 5411 ...it, 5412 read: readSet.has(String(it.id)), 5413 _ts: it.published ? new Date(it.published).getTime() : 0, 5414 pinned: !!it.pinned, 5415 })); 5416 5417 const byNewest = (a, b) => b._ts - a._ts; 5418 5419 const unreadPinned = enriched.filter(i => !i.read && i.pinned).sort(byNewest); 5420 const unreadNormal = enriched.filter(i => !i.read && !i.pinned).sort(byNewest); 5421 const readPinned = enriched.filter(i => i.read && i.pinned).sort(byNewest); 5422 const readNormal = enriched.filter(i => i.read && !i.pinned).sort(byNewest); 5423 5424 const list = []; 5425 list.push(...unreadPinned.slice(0, MAX_PINNED)); 5426 if (list.length < MAX_TOTAL) list.push(...unreadNormal.slice(0, MAX_TOTAL - list.length)); 5427 if (list.length < MAX_TOTAL) list.push(...readPinned.slice(0, MAX_TOTAL - list.length)); 5428 if (list.length < MAX_TOTAL) list.push(...readNormal.slice(0, MAX_TOTAL - list.length)); 5429 5430 const unreadCount = unreadPinned.length + unreadNormal.length; 5431 return { 5432 list, 5433 unreadCount 5434 }; 5435 }; 5436 5437 return { 5438 // reactive 5439 open: false, 5440 items: [], 5441 read: loadArr(READ_KEY), 5442 hidden: loadArr(HIDDEN_KEY), 5443 5444 unseen: 0, 5445 hasPinnedUnseen: false, 5446 5447 // server meta 5448 meta: { 5449 latest_published: null, 5450 latest_id: null, 5451 pause_version: null 5452 }, 5453 5454 // ui flags 5455 showBadge: false, 5456 specialBadge: false, // gold pulse when there is unread pinned 5457
5458 async init() { 5459 try { 5460 const res = await fetch(feedUrl, { 5461 headers: { 5462 'Accept': 'application/json' 5463 } 5464 }); 5465 const json = await res.json(); 5466 5467 this.meta.latest_published = json?.meta?.latest_published || null; 5468 this.meta.latest_id = json?.meta?.latest_id || null; 5469 this.meta.pause_version = json?.meta?.pause_version || null; 5470 5471 // Filter out client-hidden IDs 5472 const visible = (json.items || []).filter(i => !this.hidden.includes(String(i.id))); 5473 5474 // Build shortlist and counters 5475 const { 5476 list, 5477 unreadCount 5478 } = shortlistAnnouncements(visible, this.read); 5479 this.items = list; 5480 this.unseen = unreadCount; 5481 5482 // compute pinned state + badge visibility 5483 this.hasPinnedUnseen = this.items.some(i => i.pinned && !this.read.includes(String(i.id))); 5484 this.updateBadge(); 5485 } catch (e) { 5486 console.error('Announcements feed error', e); 5487 } 5488 }, 5489 5490 updateBadge() { 5491 // unread pinned always shows (gold) 5492 if (this.hasPinnedUnseen) { 5493 this.showBadge = true; 5494 this.specialBadge = true; 5495 return; 5496 } 5497 5498 if (this.unseen > 0) { 5499 // hide if paused (user opened the tray recently and nothing new landed) 5500 this.showBadge = !AnnPause.isActive(locale, this.meta); 5501 this.specialBadge = false; 5502 } else { 5503 this.showBadge = false; 5504 this.specialBadge = false; 5505 } 5506 }, 5507 5508 toggle() { 5509 this.open = !this.open; 5510 if (this.open) { 5511 // start/refresh pause (donât mark read) 5512 AnnPause.set(locale, { 5513 at: new Date().toISOString(), 5514 latest_published: this.meta.latest_published, 5515 latest_id: this.meta.latest_id, 5516 version: this.meta.pause_version, 5517 }); 5518 this.updateBadge(); 5519 } 5520 }, 5521 5522 isRead(id) { 5523 return this.read.includes(String(id)); 5524 }, 5525 5526 markRead(id) { 5527 const sid = String(id); 5528 if (!this.read.includes(sid)) { 5529 this.read = [...this.read, sid]; 5530 saveArr(READ_KEY, this.read); 5531 5532 // reflect inside list 5533 const item = this.items.find(i => String(i.id) === sid); 5534 if (item) item.read = true; 5535 5536 if (this.unseen > 0) this.unseen -= 1; 5537 5538 // recompute pinned + badge 5539 this.hasPinnedUnseen = this.items.some(i => i.pinned && !this.read.includes(String(i.id))); 5540 this.updateBadge(); 5541 } 5542 }, 5543 5544 // Optional utility if you decide to add a âMark all as readâ button 5545 markAllRead() { 5546 for (const it of this.items) this.markRead(it.id); 5547 }, 5548 5549 go(itm) { 5550 this.markRead(itm.id); 5551 window.location.href = itm.href || 'https://sajam.net/sr/obavestenja'; 5552 }, 5553 }; 5554 }; 5555 </script>
5555 5556 </body> 5557 5558</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.