1<!DOCTYPE html> 2 3<html lang="pl"><head> 4<meta charset="utf-8"/> 5<meta content="width=device-width, initial-scale=1.0" name="viewport"/> 6<title>DK Media - Tworzenie stron WWW</title>
7<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
7 8<link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;600;700;800&family=Inter:wght@400;600&display=swap" rel="stylesheet"/> 9<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,[email protected],0..1&display=swap" rel="stylesheet"/> 10<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,[email protected],0..1&display=swap" rel="stylesheet"/>
11<script id="tailwind-config"> 12 tailwind.config = { 13 darkMode: "class", 14 theme: { 15 extend: { 16 "colors": { 17 "vibrant-blue": "#2563EB", 18 "primary-fixed": "#d8e3fb", 19 "background": "#fbf8fa", 20 "primary-container": "#1e293b", 21 "surface-dim": "#dcd9db", 22 "on-tertiary-fixed": "#271902", 23 "border-subtle": "#E2E8F0", 24 "inverse-on-surface": "#f3f0f2", 25 "surface-tint": "#545f73", 26 "surface": "#fbf8fa", 27 "surface-container-low": "#f5f3f4", 28 "on-surface": "#1b1b1d", 29 "surface-container-high": "#eae7e9", 30 "on-error-container": "#93000a", 31 "on-surface-variant": "#45474c", 32 "outline": "#75777d", 33 "vibrant-purple": "#A855F7", 34 "on-tertiary-container": "#a38c6a", 35 "primary-fixed-dim": "#bcc7de", 36 "on-secondary-fixed": "#001a42", 37 "secondary-container": "#2170e4", 38 "on-background": "#1b1b1d", 39 "error-container": "#ffdad6", 40 "inverse-surface": "#303032", 41 "on-primary-fixed-variant": "#3c475a", 42 "on-primary-container": "#8590a6", 43 "on-primary": "#ffffff", 44 "surface-muted": "#F8FAFC", 45 "primary": "#091426", 46 "secondary-fixed-dim": "#adc6ff", 47 "on-secondary-fixed-variant": "#004395", 48 "on-secondary-container": "#fefcff", 49 "inverse-primary": "#bcc7de", 50 "vibrant-orange": "#F59E0B", 51 "outline-variant": "#c5c6cd", 52 "tertiary-container": "#35260c", 53 "tertiary-fixed": "#fadfb8", 54 "surface-variant": "#e4e2e3", 55 "vibrant-green": "#84CC16", 56 "tertiary": "#1e1200", 57 "on-error": "#ffffff", 58 "error": "#ba1a1a", 59 "surface-container-lowest": "#ffffff", 60 "on-primary-fixed": "#111c2d", 61 "surface-container-highest": "#e4e2e3", 62 "on-tertiary-fixed-variant": "#564427", 63 "surface-container": "#f0edef", 64 "secondary-fixed": "#d8e2ff", 65 "on-secondary": "#ffffff", 66 "surface-bright": "#fbf8fa", 67 "secondary": "#0058be", 68 "tertiary-fixed-dim": "#ddc39d", 69 "on-tertiary": "#ffffff" 70 }, 71 "borderRadius": { 72 "DEFAULT": "0.25rem", 73 "lg": "0.5rem",
74 "xl": "0.75rem", 75 "full": "9999px" 76 }, 77 "spacing": { 78 "section-gap-lg": "120px", 79 "component-gap": "32px", 80 "container-max": "1280px", 81 "margin-mobile": "16px", 82 "section-gap-md": "80px", 83 "gutter": "24px" 84 }, 85 "fontFamily": { 86 "display-lg": ["Hanken Grotesk"], 87 "body-lg": ["Inter"], 88 "headline-md": ["Hanken Grotesk"], 89 "caption": ["Inter"], 90 "body-md": ["Inter"], 91 "headline-sm": ["Hanken Grotesk"], 92 "label-md": ["Inter"], 93 "headline-lg": ["Hanken Grotesk"], 94 "headline-lg-mobile": ["Hanken Grotesk"] 95 }, 96 "fontSize": { 97 "display-lg": ["64px", { "lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "800" }], 98 "body-lg": ["18px", { "lineHeight": "1.6", "fontWeight": "400" }], 99 "headline-md": ["32px", { "lineHeight": "1.3", "fontWeight": "600" }], 100 "caption": ["12px", { "lineHeight": "1.4", "fontWeight": "400" }], 101 "body-md": ["16px", { "lineHeight": "1.6", "fontWeight": "400" }], 102 "headline-sm": ["24px", { "lineHeight": "1.4", "fontWeight": "600" }], 103 "label-md": ["14px", { "lineHeight": "1", "letterSpacing": "0.05em", "fontWeight": "600" }], 104 "headline-lg": ["48px", { "lineHeight": "1.2", "letterSpacing": "-0.01em", "fontWeight": "700" }], 105 "headline-lg-mobile": ["32px", { "lineHeight": "1.2", "fontWeight": "700" }] 106 } 107 } 108 } 109 } 110 </script>
110 111<style> 112 .material-symbols-outlined { 113 font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; 114 } 115 116 .project-card { 117 display: none; 118 } 119 .project-card.visible { 120 display: block; 121 animation: fadeIn 0.4s ease-out forwards; 122 } 123 124 @keyframes fadeIn { 125 from { 126 opacity: 0; 127 transform: translateY(10px); 128 } 129 to { 130 opacity: 1; 131 transform: translateY(0); 132 } 133 } 134 135 @media (max-width: 767px) { 136 body { padding-top: 80px; } 137 #mobile-menu { max-height: calc(100vh - 80px); overflow-y: auto; } 138 } 139 140 141 html { 142 scroll-behavior: smooth; 143 scroll-padding-top: 92px; 144 } 145 146 #top, 147 #o-firmie, 148 #uslugi, 149 #realizacje, 150 #cennik, 151 #kontakt { 152 scroll-margin-top: 92px; 153 } 154 155 @media (max-width: 767px) { 156 html { scroll-padding-top: 82px; } 157 #top, 158 #o-firmie, 159 #uslugi, 160 #realizacje, 161 #cennik, 162 #kontakt { 163 scroll-margin-top: 82px; 164 } 165 } 166</style>
167<script type='text/javascript'> 168 var _gaq = _gaq || []; 169 _gaq.push(['_setAccount', 'UA-20711220-6']); 170 _gaq.push(['_trackPageview']); 171 (function() { 172 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 173 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 174 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 175 })(); 176</script>
176 177</head> 178<body class="bg-background text-on-surface font-body-md antialiased pt-20"> 179<!-- Navigation --> 180<nav class="fixed top-0 w-full bg-surface/95 dark:bg-surface/95 backdrop-blur-md border-b border-border-subtle shadow-sm z-50" id="main-nav"> 181<div class="flex justify-between items-center min-h-20 py-3 px-margin-mobile md:px-gutter max-w-container-max mx-auto"> 182<div class="flex items-center gap-4"> 183<img class="h-10 w-auto max-w-[190px]" data-alt="DK Media vibrant logo with D K initials in blue, pink, and yellow squares, followed by the word Media in a dark purple box." src="images/logo.png"/> 184</div> 185<div class="hidden md:flex items-center gap-8"> 186<a class="text-vibrant-blue font-semibold border-b-2 border-vibrant-blue pb-1 transition-all duration-200 active:scale-95" href="#top">Start</a> 187<a class="text-on-surface-variant hover:text-vibrant-blue transition-colors duration-300 transition-all duration-200 active:scale-95" href="#o-firmie">O firmie</a> 188<a class="text-on-surface-variant hover:text-vibrant-blue transition-colors duration-300 transition-all duration-200 active:scale-95" href="#cennik">Cennik</a> 189<a class="text-on-surface-variant hover:text-vibrant-blue transition-colors duration-300 transition-all duration-200 active:scale-95" href="#realizacje">Realizacje</a> 190<a class="text-on-surface-variant hover:text-vibrant-blue transition-colors duration-300 transition-all duration-200 active:scale-95" href="#kontakt">Kontakt</a> 191</div> 192<a href="#kontakt"><button class="hidden md:block bg-vibrant-blue text-on-primary px-6 py-3 rounded hover:bg-secondary-container transition-colors font-label-md text-label-md" type="button"> 193 Darmowa wycena 194</button></a> 195<button id="mobile-menu-toggle" class="md:hidden inline-flex items-center justify-center w-11 h-11 rounded-lg text-on-surface hover:bg-surface-muted focus:outline-none focus:ring-2 focus:ring-vibrant-blue" type="button" aria-label="Otwórz menu" aria-expanded="false" aria-controls="mobile-menu"> 196 <span class="material-symbols-outlined text-[28px]" id="mobile-menu-icon">menu</span> 197</button> 198</div> 199<div id="mobile-menu" class="hidden md:hidden border-t border-border-subtle bg-surface px-margin-mobile pb-5 pt-3 shadow-lg"> 200 <div class="flex flex-col gap-1"> 201 <a class="mobile-menu-link px-4 py-3 rounded-lg text-vibrant-blue font-semibold hover:bg-surface-muted" href="#top">Start</a> 202 <a class="mobile-menu-link px-4 py-3 rounded-lg text-on-surface-variant hover:text-vibrant-blue hover:bg-surface-muted" href="#o-firmie">O firmie</a> 203 <a class="mobile-menu-link px-4 py-3 rounded-lg text-on-surface-variant hover:text-vibrant-blue hover:bg-surface-muted" href="#cennik">Cennik</a> 204 <a class="mobile-menu-link px-4 py-3 rounded-lg text-on-surface-variant hover:text-vibrant-blue hover:bg-surface-muted" href="#realizacje">Realizacje</a> 205 <a class="mobile-menu-link px-4 py-3 rounded-lg text-on-surface-variant hover:text-vibrant-blue hover:bg-surface-muted" href="#kontakt">Kontakt</a> 206 <a class="mt-2 bg-vibrant-blue text-on-primary px-5 py-3 rounded-lg text-center font-label-md text-label-md hover:bg-secondary-container" href="#kontakt">Darmowa wycena</a> 207 </div> 208</div> 209</nav> 210<!-- Hero Section --> 211<section id="top" class="relative w-full h-[80vh] min-h-[600px] flex items-center justify-center overflow-hidden"> 212<div class="absolute inset-0 z-0"> 213<div class="w-full h-full bg-cover bg-center bg-no-repeat opacity-40" data-alt="MÄżczyzna widziany od tyÅu pracujÄ cy przy laptopie w nowoczesnym, jasnym biurze." style="background-image: url('images/hero.jpg')"></div> 214<div class="absolute inset-0 bg-gradient-to-r from-primary/90 to-primary/60"></div> 215</div> 216<div class="relative z-10 text-center px-margin-mobile md:px-gutter max-w-4xl mx-auto"> 217<h1 class="font-display-lg text-display-lg text-on-primary mb-6 drop-shadow-lg">brakujÄ cy element Twojego biznesu</h1> 218<p class="font-headline-md text-headline-md text-primary-fixed-dim mb-10">zaufaÅo nam ponad 70 firm i instytucji</p> 219<div class="flex flex-col sm:flex-row gap-4 justify-center"> 220<a class="bg-vibrant-blue text-on-primary px-8 py-4 rounded-lg font-label-md text-label-md hover:bg-secondary-container transition-all shadow-[0px_4px_20px_rgba(37,99,235,0.4)]" href="#uslugi">Poznaj nasze usÅugi</a> 221<a class="border border-border-subtle bg-surface/10 backdrop-blur-sm text-on-primary px-8 py-4 rounded-lg font-label-md text-label-md hover:bg-surface/20 transition-all" href="#realizacje">Zobacz realizacje</a> 222</div> 223</div> 224</section> 225<!-- About / Mission --> 226<section id="o-firmie" class="py-section-gap-lg px-margin-mobile md:px-gutter max-w-container-max mx-auto"> 227<div class="grid grid-cols-1 md:grid-cols-2 gap-16 items-center"> 228<div> 229<h2 class="font-headline-lg text-headline-lg-mobile md:text-headline-lg text-primary mb-6">Zaufaj profesjonalistom</h2> 230<div class="w-20 h-1 bg-vibrant-blue mb-8 rounded-full"></div> 231<p class="font-body-lg text-body-lg text-on-surface-variant mb-6"> 232 SpóÅka DK MEDIA istnieje od 2011 roku i jest wydawcÄ portalu WirtualnyGarwolin.pl. Zajmujemy siÄ profesjonalnym tworzeniem stron WWW. 233 </p> 234<a class="inline-flex items-center gap-2 text-vibrant-blue font-label-md text-label-md hover:text-secondary-container transition-colors group" href="/o-firmie"> 235 wiÄcej o nas
236 <span class="material-symbols-outlined group-hover:translate-x-1 transition-transform">arrow_forward</span> 237</a> 238</div> 239<div class="grid grid-cols-2 gap-4"> 240<div class="bg-surface-muted p-8 rounded-xl border border-border-subtle shadow-sm flex flex-col items-center justify-center text-center"> 241<span class="material-symbols-outlined text-4xl text-vibrant-blue mb-4">calendar_today</span> 242<span class="font-headline-md text-headline-md text-primary block">2011</span> 243<span class="font-body-md text-body-md text-on-surface-variant">Rok zaÅożenia</span> 244</div> 245<div class="bg-surface-muted p-8 rounded-xl border border-border-subtle shadow-sm flex flex-col items-center justify-center text-center mt-8"> 246<span class="material-symbols-outlined text-4xl text-vibrant-blue mb-4">handshake</span> 247<span class="font-headline-md text-headline-md text-primary block">70+</span> 248<span class="font-body-md text-body-md text-on-surface-variant">Zadowolonych klientów</span> 249</div> 250</div> 251</div> 252</section> 253<!-- Services --> 254<section class="py-section-gap-lg bg-surface-muted border-y border-border-subtle" id="uslugi"> 255<div class="max-w-container-max mx-auto px-margin-mobile md:px-gutter"> 256<div class="text-center max-w-3xl mx-auto mb-16"> 257<h2 class="font-headline-lg text-headline-lg-mobile md:text-headline-lg text-primary mb-6">UsÅugi</h2> 258<p class="font-body-lg text-body-lg text-on-surface-variant"> 259 Nie musisz siÄ znaÄ na tworzeniu stron WWW. Zaufaj profesjonalistom. Nasze projekty charakteryzujÄ siÄ dostosowaniem do obowiÄ zujÄ cych trendów oraz wymagaÅ klienta. W ramach każdego projektu oferujemy <strong>pierwszy rok bezpÅatnego</strong> hostingu oraz utrzymania domeny internetowej. 260 </p> 261</div> 262<div class="grid grid-cols-1 md:grid-cols-3 gap-component-gap"> 263<!-- Service 1 --> 264<div class="bg-surface p-8 rounded-xl border border-border-subtle shadow-sm hover:shadow-[0px_12px_30px_rgba(0,0,0,0.08)] hover:-translate-y-1 transition-all duration-300"> 265<div class="w-12 h-12 rounded-lg bg-primary-fixed flex items-center justify-center mb-6 text-vibrant-blue"> 266<span class="material-symbols-outlined">brush</span> 267</div> 268<h3 class="font-headline-sm text-headline-sm text-primary mb-3">Przyjazna grafika</h3> 269<p class="font-body-md text-body-md text-on-surface-variant">Indywidualny projekt dopasowany do wizerunku Twojej marki.</p> 270</div> 271<!-- Service 2 --> 272<div class="bg-surface p-8 rounded-xl border border-border-subtle shadow-sm hover:shadow-[0px_12px_30px_rgba(0,0,0,0.08)] hover:-translate-y-1 transition-all duration-300"> 273<div class="w-12 h-12 rounded-lg bg-primary-fixed flex items-center justify-center mb-6 text-vibrant-blue"> 274<span class="material-symbols-outlined">smartphone</span> 275</div> 276<h3 class="font-headline-sm text-headline-sm text-primary mb-3">UrzÄ dzenia mobilne</h3> 277<p class="font-body-md text-body-md text-on-surface-variant">PeÅne dostosowanie do smartfonów i tabletów (RWD).</p> 278</div> 279<!-- Service 3 --> 280<div class="bg-surface p-8 rounded-xl border border-border-subtle shadow-sm hover:shadow-[0px_12px_30px_rgba(0,0,0,0.08)] hover:-translate-y-1 transition-all duration-300"> 281<div class="w-12 h-12 rounded-lg bg-primary-fixed flex items-center justify-center mb-6 text-vibrant-blue"> 282<span class="material-symbols-outlined">security</span> 283</div> 284<h3 class="font-headline-sm text-headline-sm text-primary mb-3">BezpieczeÅstwo</h3> 285<p class="font-body-md text-body-md text-on-surface-variant">Certyfikaty SSL i najnowsze standardy bezpieczeÅstwa Twojej strony WWW.</p> 286</div> 287<!-- Service 4 --> 288<div class="bg-surface p-8 rounded-xl border border-border-subtle shadow-sm hover:shadow-[0px_12px_30px_rgba(0,0,0,0.08)] hover:-translate-y-1 transition-all duration-300"> 289<div class="w-12 h-12 rounded-lg bg-primary-fixed flex items-center justify-center mb-6 text-vibrant-blue"> 290<span class="material-symbols-outlined">swap_horiz</span> 291</div> 292<h3 class="font-headline-sm text-headline-sm text-primary mb-3">Migracja stron Joomla</h3> 293<p class="font-body-md text-body-md text-on-surface-variant">
293Przenosimy istniejÄ ce strony Joomla na nowy serwer, domenÄ lub nowszÄ wersjÄ systemu, dbajÄ c o dane, strukturÄ strony i poprawne dziaÅanie.</p> 294</div> 295<!-- Service 5 --> 296<div class="bg-surface p-8 rounded-xl border border-border-subtle shadow-sm hover:shadow-[0px_12px_30px_rgba(0,0,0,0.08)] hover:-translate-y-1 transition-all duration-300"> 297<div class="w-12 h-12 rounded-lg bg-primary-fixed flex items-center justify-center mb-6 text-vibrant-blue"> 298<span class="material-symbols-outlined">bug_report</span> 299</div> 300<h3 class="font-headline-sm text-headline-sm text-primary mb-3">Odwirosowanie stron Joomla</h3> 301<p class="font-body-md text-body-md text-on-surface-variant">Pomagamy w usuwaniu zÅoÅliwego kodu i skutków wÅamaÅ do stron Joomla oraz przywróceniu serwisu do bezpiecznego dziaÅania.</p> 302</div> 303<!-- Service 6 --> 304<div class="bg-surface p-8 rounded-xl border border-border-subtle shadow-sm hover:shadow-[0px_12px_30px_rgba(0,0,0,0.08)] hover:-translate-y-1 transition-all duration-300"> 305<div class="w-12 h-12 rounded-lg bg-primary-fixed flex items-center justify-center mb-6 text-vibrant-blue"> 306<span class="material-symbols-outlined">support_agent</span> 307</div> 308<h3 class="font-headline-sm text-headline-sm text-primary mb-3">Wsparcie i opieka</h3> 309<p class="font-body-md text-body-md text-on-surface-variant">Nie musisz martwiÄ siÄ o hosting, domenÄ i techniczne dziaÅanie strony. Pilnujemy terminów, dbamy o serwer i pomagamy, gdy pojawi siÄ problem.</p> 310</div> 311</div> 312</div> 313</section> 314<!-- Portfolio --> 315<section class="py-section-gap-lg px-margin-mobile md:px-gutter max-w-container-max mx-auto" id="realizacje"> 316<div class="flex flex-col md:flex-row justify-between items-end mb-8 gap-6"> 317<div class="max-w-2xl"> 318<h2 class="font-headline-lg text-headline-lg-mobile md:text-headline-lg text-primary mb-4">Realizacje</h2> 319<p class="font-body-lg text-body-lg text-on-surface-variant">ZaufaÅo nam ponad 40 firm i instytucji. Zapraszamy do zapoznania siÄ z realizacjami.</p> 320</div> 321</div> 322<div class="flex flex-wrap gap-2 mb-8" id="portfolio-filters"> 323<button class="filter-btn active bg-vibrant-blue text-on-primary px-4 py-2 rounded font-label-md text-label-md transition-colors" data-filter="all">Pokaż wszystko</button> 324<button class="filter-btn bg-surface border border-border-subtle text-primary hover:bg-primary-fixed-dim px-4 py-2 rounded font-label-md text-label-md transition-colors" data-filter="wizytówka firmy">wizytówka firmy</button> 325<button class="filter-btn bg-surface border border-border-subtle text-primary hover:bg-primary-fixed-dim px-4 py-2 rounded font-label-md text-label-md transition-colors" data-filter="rozbudowane strony">rozbudowane strony</button> 326<button class="filter-btn bg-surface border border-border-subtle text-primary hover:bg-primary-fixed-dim px-4 py-2 rounded font-label-md text-label-md transition-colors" data-filter="sklepy internetowe">sklepy internetowe</button> 327<button class="filter-btn bg-surface border border-border-subtle text-primary hover:bg-primary-fixed-dim px-4 py-2 rounded font-label-md text-label-md transition-colors" data-filter="instytucje">instytucje</button> 328</div> 329<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-component-gap" id="portfolio-grid"> 330<a class="project-card group block bg-surface rounded-xl border border-border-subtle overflow-hidden shadow-sm hover:shadow-[0px_12px_30px_rgba(0,0,0,0.08)] transition-all" data-category="instytucje" href="https://gops.miastkowkoscielny.pl/" target="_blank" rel="noopener" target="Blank"> 331<div class="aspect-[16/9] w-full overflow-hidden relative bg-surface-variant"><img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="GOPS w Miastkowie KoÅcielnym" src="images/realizacje/gops-w-miastkowie-koscielnym.jpg"></div> 332<div class="p-6"> 333<span class="inline-block px-3 py-1 bg-surface-muted text-on-surface-variant text-caption font-caption rounded-full mb-3 border border-border-subtle">instytucje</span> 334<h3 class="font-headline-sm text-headline-sm text-primary mb-2 group-hover:text-vibrant-blue transition-colors">GOPS w Miastkowie KoÅcielnym</h3> 335</div></a> 336<a class="project-card group block bg-surface rounded-xl border border-border-subtle overflow-hidden shadow-sm hover:shadow-[0px_12px_30px_rgba(0,0,0,0.08)] transition-all" data-category="wizytówka firmy" href="http://przewiertywarszawa.pl/" target="_blank" rel="noopener" target="Blank"> 337<div class="aspect-[16/9] w-full overflow-hidden relative bg-surface-variant"><img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt
337="Korson" src="images/realizacje/korson.jpg"></div> 338<div class="p-6"> 339<span class="inline-block px-3 py-1 bg-surface-muted text-on-surface-variant text-caption font-caption rounded-full mb-3 border border-border-subtle">wizytówka firmy</span> 340<h3 class="font-headline-sm text-headline-sm text-primary mb-2 group-hover:text-vibrant-blue transition-colors">Korson</h3> 341</div></a> 342 343<a class="project-card group block bg-surface rounded-xl border border-border-subtle overflow-hidden shadow-sm hover:shadow-[0px_12px_30px_rgba(0,0,0,0.08)] transition-all" data-category="wizytówka firmy" href="http://whynotgarwolin.pl" target="_blank" rel="noopener" target="Blank"> 344<div class="aspect-[16/9] w-full overflow-hidden relative bg-surface-variant"><img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="Why Not Garwolin" src="images/realizacje/why.jpg"></div> 345<div class="p-6"> 346<span class="inline-block px-3 py-1 bg-surface-muted text-on-surface-variant text-caption font-caption rounded-full mb-3 border border-border-subtle">wizytówka firmy</span> 347<h3 class="font-headline-sm text-headline-sm text-primary mb-2 group-hover:text-vibrant-blue transition-colors">Why Not Garwolin</h3> 348</div></a> 349 350 351 352<a class="project-card group block bg-surface rounded-xl border border-border-subtle overflow-hidden shadow-sm hover:shadow-[0px_12px_30px_rgba(0,0,0,0.08)] transition-all" data-category="wizytówka firmy" href="http://mediacje-sadowe.pl/" target="Blank"> 353<div class="aspect-[16/9] w-full overflow-hidden relative bg-surface-variant"> 354<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="Mediacje sÄ dowe" src="images/realizacje/mediacje-sadowe.jpg"/> 355</div> 356<div class="p-6"> 357<span class="inline-block px-3 py-1 bg-surface-muted text-on-surface-variant text-caption font-caption rounded-full mb-3 border border-border-subtle">wizytówka firmy</span> 358<h3 class="font-headline-sm text-headline-sm text-primary mb-2 group-hover:text-vibrant-blue transition-colors">Mediacje sÄ dowe</h3> 359</div> 360</a> 361<a class="project-card group block bg-surface rounded-xl border border-border-subtle overflow-hidden shadow-sm hover:shadow-[0px_12px_30px_rgba(0,0,0,0.08)] transition-all" data-category="rozbudowane strony" href="https://promedicagarwolin.pl/" target="Blank"> 362<div class="aspect-[16/9] w-full overflow-hidden relative bg-surface-variant"> 363<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="Promedica Garwolin" src="images/realizacje/promedica-garwolin.jpg"/> 364</div> 365<div class="p-6"> 366<span class="inline-block px-3 py-1 bg-surface-muted text-on-surface-variant text-caption font-caption rounded-full mb-3 border border-border-subtle">rozbudowane strony</span> 367<h3 class="font-headline-sm text-headline-sm text-primary mb-2 group-hover:text-vibrant-blue transition-colors">Promedica Garwolin</h3> 368</div> 369</a> 370<a class="project-card group block bg-surface rounded-xl border border-border-subtle overflow-hidden shadow-sm hover:shadow-[0px_12px_30px_rgba(0,0,0,0.08)] transition-all" data-category="rozbudowane strony" href="https://www.md-translation.com/" target="Blank"> 371<div class="aspect-[16/9] w-full overflow-hidden relative bg-surface-variant"> 372<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="Marta DÄ browska tÅumaczenia" src="images/realizacje/marta-dabrowska-tlumaczenia.jpg"/> 373</div> 374<div class="p-6"> 375<span class="inline-block px-3 py-1 bg-surface-muted text-on-surface-variant text-caption font-caption rounded-full mb-3 border border-border-subtle">rozbudowane strony</span> 376<h3 class="font-headline-sm text-headline-sm text-primary mb-2 group-hover:text-vibrant-blue transition-colors">Marta DÄ browska tÅumaczenia</h3> 377</div> 378</a> 379<a class="project-card group block bg-surface rounded-xl border border-border-subtle overflow-hidden shadow-sm hover:shadow-[0px_12px_30px_rgba(0,0,0,0.08)] transition-all" data-category="wizytówka firmy" href="https://psychoterapiagarwolin.pl/" target="Blank"> 380<div class="aspect-[16/9] w-full overflow-hidden relative bg-surface-variant"> 381<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt
381="Katarzyna Kaczorowska" src="images/realizacje/katarzyna-rudnik.jpg"/> 382</div> 383<div class="p-6"> 384<span class="inline-block px-3 py-1 bg-surface-muted text-on-surface-variant text-caption font-caption rounded-full mb-3 border border-border-subtle">wizytówka firmy</span> 385<h3 class="font-headline-sm text-headline-sm text-primary mb-2 group-hover:text-vibrant-blue transition-colors">Katarzyna Kaczorowska</h3> 386</div> 387</a> 388<a class="project-card group block bg-surface rounded-xl border border-border-subtle overflow-hidden shadow-sm hover:shadow-[0px_12px_30px_rgba(0,0,0,0.08)] transition-all" data-category="sklepy internetowe" href="https://alko24h.pl/" target="Blank"> 389<div class="aspect-[16/9] w-full overflow-hidden relative bg-surface-variant"> 390<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="Alko24h" src="images/realizacje/alko24h.jpg"/> 391</div> 392<div class="p-6"> 393<span class="inline-block px-3 py-1 bg-surface-muted text-on-surface-variant text-caption font-caption rounded-full mb-3 border border-border-subtle">sklepy internetowe</span> 394<h3 class="font-headline-sm text-headline-sm text-primary mb-2 group-hover:text-vibrant-blue transition-colors">Alko24h</h3> 395</div> 396</a> 397<a class="project-card group block bg-surface rounded-xl border border-border-subtle overflow-hidden shadow-sm hover:shadow-[0px_12px_30px_rgba(0,0,0,0.08)] transition-all" data-category="instytucje" href="https://www.smwg.pl/" target="Blank"> 398<div class="aspect-[16/9] w-full overflow-hidden relative bg-surface-variant"> 399<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="Szpital Mazowiecki w Garwolinie" src="images/realizacje/szpital-mazowiecki-w-garwolinie.jpg"/> 400</div> 401<div class="p-6"> 402<span class="inline-block px-3 py-1 bg-surface-muted text-on-surface-variant text-caption font-caption rounded-full mb-3 border border-border-subtle">instytucje</span> 403<h3 class="font-headline-sm text-headline-sm text-primary mb-2 group-hover:text-vibrant-blue transition-colors">Szpital Mazowiecki w Garwolinie</h3> 404</div> 405</a> 406<a class="project-card group block bg-surface rounded-xl border border-border-subtle overflow-hidden shadow-sm hover:shadow-[0px_12px_30px_rgba(0,0,0,0.08)] transition-all" data-category="rozbudowane strony" href="https://www.kruszywogarwolin.pl/" target="Blank"> 407<div class="aspect-[16/9] w-full overflow-hidden relative bg-surface-variant"> 408<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="Krusz-Trans" src="images/realizacje/krusz-trans.jpg"/> 409</div> 410<div class="p-6"> 411<span class="inline-block px-3 py-1 bg-surface-muted text-on-surface-variant text-caption font-caption rounded-full mb-3 border border-border-subtle">rozbudowane strony</span> 412<h3 class="font-headline-sm text-headline-sm text-primary mb-2 group-hover:text-vibrant-blue transition-colors">Krusz-Trans</h3> 413</div> 414</a> 415<a class="project-card group block bg-surface rounded-xl border border-border-subtle overflow-hidden shadow-sm hover:shadow-[0px_12px_30px_rgba(0,0,0,0.08)] transition-all" data-category="instytucje" href="https://bip.pppgarwolin.pl/" target="Blank"> 416<div class="aspect-[16/9] w-full overflow-hidden relative bg-surface-variant"> 417<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="BIP - Poradnia Psychologiczno-Pedagogiczna" src="images/realizacje/bip-poradnia-psychologiczno-pedagogiczna.jpg"/> 418</div> 419<div class="p-6"> 420<span class="inline-block px-3 py-1 bg-surface-muted text-on-surface-variant text-caption font-caption rounded-full mb-3 border border-border-subtle">instytucje</span> 421<h3 class="font-headline-sm text-headline-sm text-primary mb-2 group-hover:text-vibrant-blue transition-colors">BIP - Poradnia Psychologiczno-Pedagogiczna</h3> 422</div> 423</a> 424<a class="project-card group block bg-surface rounded-xl border border-border-subtle overflow-hidden shadow-sm hover:shadow-[0px_12px_30px_rgba(0,0,0,0.08)] transition-all" data-category="instytucje" href="https://www.bsgarwolin.com.pl/" target="Blank"> 425<div class="aspect-[16/9] w-full overflow-hidden relative bg-surface-variant"> 426<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt
426="Bank SpóÅdzielczy w Garwolinie" src="images/realizacje/bank-spoldzielczy-w-garwolinie.jpg"/> 427</div> 428<div class="p-6"> 429<span class="inline-block px-3 py-1 bg-surface-muted text-on-surface-variant text-caption font-caption rounded-full mb-3 border border-border-subtle">instytucje</span> 430<h3 class="font-headline-sm text-headline-sm text-primary mb-2 group-hover:text-vibrant-blue transition-colors">Bank SpóÅdzielczy w Garwolinie</h3> 431</div> 432</a> 433<a class="project-card group block bg-surface rounded-xl border border-border-subtle overflow-hidden shadow-sm hover:shadow-[0px_12px_30px_rgba(0,0,0,0.08)] transition-all" data-category="wizytówka firmy" href="https://bedokbeverages.pl/" target="Blank"> 434<div class="aspect-[16/9] w-full overflow-hidden relative bg-surface-variant"> 435<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="Bedok" src="images/realizacje/bedok.jpg"/> 436</div> 437<div class="p-6"> 438<span class="inline-block px-3 py-1 bg-surface-muted text-on-surface-variant text-caption font-caption rounded-full mb-3 border border-border-subtle">wizytówka firmy</span> 439<h3 class="font-headline-sm text-headline-sm text-primary mb-2 group-hover:text-vibrant-blue transition-colors">Bedok Beverages</h3> 440</div> 441</a> 442<a class="project-card group block bg-surface rounded-xl border border-border-subtle overflow-hidden shadow-sm hover:shadow-[0px_12px_30px_rgba(0,0,0,0.08)] transition-all" data-category="wizytówka firmy" href="https://www.psychiatragarwolin.pl/" target="Blank"> 443<div class="aspect-[16/9] w-full overflow-hidden relative bg-surface-variant"> 444<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="Psychiatra Garwolin" src="images/realizacje/psychiatra-garwolin.jpg"/> 445</div> 446<div class="p-6"> 447<span class="inline-block px-3 py-1 bg-surface-muted text-on-surface-variant text-caption font-caption rounded-full mb-3 border border-border-subtle">wizytówka firmy</span> 448<h3 class="font-headline-sm text-headline-sm text-primary mb-2 group-hover:text-vibrant-blue transition-colors">Psychiatra Garwolin</h3> 449</div> 450</a> 451<a class="project-card group block bg-surface rounded-xl border border-border-subtle overflow-hidden shadow-sm hover:shadow-[0px_12px_30px_rgba(0,0,0,0.08)] transition-all" data-category="sklepy internetowe" href="https://almari.eu/" target="Blank"> 452<div class="aspect-[16/9] w-full overflow-hidden relative bg-surface-variant"> 453<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="Almari" src="images/realizacje/almari.jpg"/> 454</div> 455<div class="p-6"> 456<span class="inline-block px-3 py-1 bg-surface-muted text-on-surface-variant text-caption font-caption rounded-full mb-3 border border-border-subtle">sklepy internetowe</span> 457<h3 class="font-headline-sm text-headline-sm text-primary mb-2 group-hover:text-vibrant-blue transition-colors">Almari</h3> 458</div> 459</a> 460<a class="project-card group block bg-surface rounded-xl border border-border-subtle overflow-hidden shadow-sm hover:shadow-[0px_12px_30px_rgba(0,0,0,0.08)] transition-all" data-category="rozbudowane strony" href="https://www.truchtacz.pl/" target="Blank"> 461<div class="aspect-[16/9] w-full overflow-hidden relative bg-surface-variant"> 462<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="Truchtacz.pl" src="images/realizacje/truchtacz-pl.jpg"/> 463</div> 464<div class="p-6"> 465<span class="inline-block px-3 py-1 bg-surface-muted text-on-surface-variant text-caption font-caption rounded-full mb-3 border border-border-subtle">rozbudowane strony</span> 466<h3 class="font-headline-sm text-headline-sm text-primary mb-2 group-hover:text-vibrant-blue transition-colors">Truchtacz.pl</h3> 467</div> 468</a> 469<a class="project-card group block bg-surface rounded-xl border border-border-subtle overflow-hidden shadow-sm hover:shadow-[0px_12px_30px_rgba(0,0,0,0.08)] transition-all" data-category="instytucje" href="https://pppgarwolin.pl/" target="Blank"> 470<div class="aspect-[16/9] w-full overflow-hidden relative bg-surface-variant"> 471<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt
471="Poradnia Psychologiczno-Pedagogiczna w Garwolinie" src="images/realizacje/poradnia-garwolin.jpg"/> 472</div> 473<div class="p-6"> 474<span class="inline-block px-3 py-1 bg-surface-muted text-on-surface-variant text-caption font-caption rounded-full mb-3 border border-border-subtle">instytucje</span> 475<h3 class="font-headline-sm text-headline-sm text-primary mb-2 group-hover:text-vibrant-blue transition-colors">Poradnia Garwolin</h3> 476</div> 477</a> 478<a class="project-card group block bg-surface rounded-xl border border-border-subtle overflow-hidden shadow-sm hover:shadow-[0px_12px_30px_rgba(0,0,0,0.08)] transition-all" data-category="wizytówka firmy" href="https://jarbo.pl/" target="Blank"> 479<div class="aspect-[16/9] w-full overflow-hidden relative bg-surface-variant"> 480<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="Jarbo" src="images/realizacje/jarbo.jpg"/> 481</div> 482<div class="p-6"> 483<span class="inline-block px-3 py-1 bg-surface-muted text-on-surface-variant text-caption font-caption rounded-full mb-3 border border-border-subtle">wizytówka firmy</span> 484<h3 class="font-headline-sm text-headline-sm text-primary mb-2 group-hover:text-vibrant-blue transition-colors">Jarbo</h3> 485</div> 486</a> 487<a class="project-card group block bg-surface rounded-xl border border-border-subtle overflow-hidden shadow-sm hover:shadow-[0px_12px_30px_rgba(0,0,0,0.08)] transition-all" data-category="instytucje" href="http://www.mietne.edu.pl/" target="Blank"> 488<div class="aspect-[16/9] w-full overflow-hidden relative bg-surface-variant"> 489<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="ZS w MiÄtnem" src="images/realizacje/zs-w-mietnem.jpg"/> 490</div> 491<div class="p-6"> 492<span class="inline-block px-3 py-1 bg-surface-muted text-on-surface-variant text-caption font-caption rounded-full mb-3 border border-border-subtle">instytucje</span> 493<h3 class="font-headline-sm text-headline-sm text-primary mb-2 group-hover:text-vibrant-blue transition-colors">ZS w MiÄtnem</h3> 494</div> 495</a> 496<a class="project-card group block bg-surface rounded-xl border border-border-subtle overflow-hidden shadow-sm hover:shadow-[0px_12px_30px_rgba(0,0,0,0.08)] transition-all" data-category="wizytówka firmy" href="http://autokarygarwolin.pl/" target="Blank"> 497<div class="aspect-[16/9] w-full overflow-hidden relative bg-surface-variant"> 498<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="UsÅugi autokarowe" src="images/realizacje/uslugi-autokarowe.jpg"/> 499</div> 500<div class="p-6"> 501<span class="inline-block px-3 py-1 bg-surface-muted text-on-surface-variant text-caption font-caption rounded-full mb-3 border border-border-subtle">wizytówka firmy</span> 502<h3 class="font-headline-sm text-headline-sm text-primary mb-2 group-hover:text-vibrant-blue transition-colors">UsÅugi autokarowe</h3> 503</div> 504</a> 505<a class="project-card group block bg-surface rounded-xl border border-border-subtle overflow-hidden shadow-sm hover:shadow-[0px_12px_30px_rgba(0,0,0,0.08)] transition-all" data-category="instytucje" href="https://www.spzozgarwolin.pl/bip" target="Blank"> 506<div class="aspect-[16/9] w-full overflow-hidden relative bg-surface-variant"> 507<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="BIP - SP ZOZ w Garwolinie" src="images/realizacje/bip-sp-zoz-w-garwolinie.jpg"/> 508</div> 509<div class="p-6"> 510<span class="inline-block px-3 py-1 bg-surface-muted text-on-surface-variant text-caption font-caption rounded-full mb-3 border border-border-subtle">instytucje</span> 511<h3 class="font-headline-sm text-headline-sm text-primary mb-2 group-hover:text-vibrant-blue transition-colors">BIP - SP ZOZ w Garwolinie</h3> 512</div> 513</a> 514 515<a class="project-card group block bg-surface rounded-xl border border-border-subtle overflow-hidden shadow-sm hover:shadow-[0px_12px_30px_rgba(0,0,0,0.08)] transition-all" data-category="instytucje" href="https://www.spzozgarwolin.pl/" target="_blank" rel="noopener" target="Blank"> 516<div class="aspect-[16/9] w-full overflow-hidden relative bg-surface-variant"><img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt
516="SP ZOZ w Garwolinie" src="images/realizacje/sp-zoz-w-garwolinie.jpg"></div> 517<div class="p-6"> 518<span class="inline-block px-3 py-1 bg-surface-muted text-on-surface-variant text-caption font-caption rounded-full mb-3 border border-border-subtle">instytucje</span> 519<h3 class="font-headline-sm text-headline-sm text-primary mb-2 group-hover:text-vibrant-blue transition-colors">SP ZOZ w Garwolinie</h3> 520</div></a> 521<a class="project-card group block bg-surface rounded-xl border border-border-subtle overflow-hidden shadow-sm hover:shadow-[0px_12px_30px_rgba(0,0,0,0.08)] transition-all" data-category="wizytówka firmy" href="https://garwolinkoparka.pl/" target="_blank" rel="noopener" target="Blank"> 522<div class="aspect-[16/9] w-full overflow-hidden relative bg-surface-variant"><img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="Garwolin Koparka" src="images/realizacje/garwolin-koparka.jpg"></div> 523<div class="p-6"> 524<span class="inline-block px-3 py-1 bg-surface-muted text-on-surface-variant text-caption font-caption rounded-full mb-3 border border-border-subtle">wizytówka firmy</span> 525<h3 class="font-headline-sm text-headline-sm text-primary mb-2 group-hover:text-vibrant-blue transition-colors">Garwolin Koparka</h3> 526</div></a> 527<a class="project-card group block bg-surface rounded-xl border border-border-subtle overflow-hidden shadow-sm hover:shadow-[0px_12px_30px_rgba(0,0,0,0.08)] transition-all" data-category="wizytówka firmy" href="https://marbardystrybucja.pl/" target="_blank" rel="noopener" target="Blank"> 528<div class="aspect-[16/9] w-full overflow-hidden relative bg-surface-variant"><img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="Marbar" src="images/realizacje/marbar.jpg"></div> 529<div class="p-6"> 530<span class="inline-block px-3 py-1 bg-surface-muted text-on-surface-variant text-caption font-caption rounded-full mb-3 border border-border-subtle">wizytówka firmy</span> 531<h3 class="font-headline-sm text-headline-sm text-primary mb-2 group-hover:text-vibrant-blue transition-colors">Marbar</h3> 532</div></a> 533<a class="project-card group block bg-surface rounded-xl border border-border-subtle overflow-hidden shadow-sm hover:shadow-[0px_12px_30px_rgba(0,0,0,0.08)] transition-all" data-category="sklepy internetowe" href="http://naturalnetloczone.pl/" target="_blank" rel="noopener" target="Blank"> 534<div class="aspect-[16/9] w-full overflow-hidden relative bg-surface-variant"><img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="Naturalne TÅoczone" src="images/realizacje/naturalne-tloczone.jpg"></div> 535<div class="p-6"> 536<span class="inline-block px-3 py-1 bg-surface-muted text-on-surface-variant text-caption font-caption rounded-full mb-3 border border-border-subtle">sklepy internetowe</span> 537<h3 class="font-headline-sm text-headline-sm text-primary mb-2 group-hover:text-vibrant-blue transition-colors">Naturalne TÅoczone</h3> 538</div></a> 539 540<a class="project-card group block bg-surface rounded-xl border border-border-subtle overflow-hidden shadow-sm hover:shadow-[0px_12px_30px_rgba(0,0,0,0.08)] transition-all" data-category="rozbudowane strony" href="https://zyciejestcudem.pl/" target="_blank" rel="noopener" target="Blank"> 541<div class="aspect-[16/9] w-full overflow-hidden relative bg-surface-variant"><img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="Å»ycie jest cudem" src="images/realizacje/zycie-jest-cudem.jpg"></div> 542<div class="p-6"> 543<span class="inline-block px-3 py-1 bg-surface-muted text-on-surface-variant text-caption font-caption rounded-full mb-3 border border-border-subtle">rozbudowane strony</span> 544<h3 class="font-headline-sm text-headline-sm text-primary mb-2 group-hover:text-vibrant-blue transition-colors">Å»ycie jest cudem</h3> 545</div></a> 546<a class="project-card group block bg-surface rounded-xl border border-border-subtle overflow-hidden shadow-sm hover:shadow-[0px_12px_30px_rgba(0,0,0,0.08)] transition-all" data-category="wizytówka firmy" href="http://www.bhpgarwolin.pl/" target="_blank" rel="noopener" target="Blank"> 547<div class="aspect-[16/9] w-full overflow-hidden relative bg-surface-variant"><img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt
547="UsÅugi BHP" src="images/realizacje/uslugi-bhp.jpg"></div> 548<div class="p-6"> 549<span class="inline-block px-3 py-1 bg-surface-muted text-on-surface-variant text-caption font-caption rounded-full mb-3 border border-border-subtle">rozbudowane strony</span> 550<h3 class="font-headline-sm text-headline-sm text-primary mb-2 group-hover:text-vibrant-blue transition-colors">UsÅugi BHP</h3> 551</div></a> 552<a class="project-card group block bg-surface rounded-xl border border-border-subtle overflow-hidden shadow-sm hover:shadow-[0px_12px_30px_rgba(0,0,0,0.08)] transition-all" data-category="wizytówka firmy" href="https://silnikiford.eu/" target="_blank" rel="noopener" target="Blank"> 553<div class="aspect-[16/9] w-full overflow-hidden relative bg-surface-variant"><img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="Silniki Ford" src="images/realizacje/silniki-ford.jpg"></div> 554<div class="p-6"> 555<span class="inline-block px-3 py-1 bg-surface-muted text-on-surface-variant text-caption font-caption rounded-full mb-3 border border-border-subtle">wizytówka firmy</span> 556<h3 class="font-headline-sm text-headline-sm text-primary mb-2 group-hover:text-vibrant-blue transition-colors">Silniki Ford</h3> 557</div></a> 558<a class="project-card group block bg-surface rounded-xl border border-border-subtle overflow-hidden shadow-sm hover:shadow-[0px_12px_30px_rgba(0,0,0,0.08)] transition-all" data-category="wizytówka firmy" href="http://zsp2garwolin.pl/" target="_blank" rel="noopener" target="Blank"> 559<div class="aspect-[16/9] w-full overflow-hidden relative bg-surface-variant"><img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="ZespóŠSzkóŠnr 2 w Garwolinie" src="images/realizacje/zespol-szkol-nr-2-w-garwolinie.jpg"></div> 560<div class="p-6"> 561<span class="inline-block px-3 py-1 bg-surface-muted text-on-surface-variant text-caption font-caption rounded-full mb-3 border border-border-subtle">wizytówka firmy</span> 562<h3 class="font-headline-sm text-headline-sm text-primary mb-2 group-hover:text-vibrant-blue transition-colors">ZespóŠSzkóŠnr 2 w Garwolinie</h3> 563</div></a> 564<a class="project-card group block bg-surface rounded-xl border border-border-subtle overflow-hidden shadow-sm hover:shadow-[0px_12px_30px_rgba(0,0,0,0.08)] transition-all" data-category="wizytówka firmy" href="https://maluch.miastkowkoscielny.pl/" target="_blank" rel="noopener" target="Blank"> 565<div class="aspect-[16/9] w-full overflow-hidden relative bg-surface-variant"><img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="Publiczny Å»Åobek w Miastkowie KoÅcielnym" src="images/realizacje/maluch.jpg"></div> 566<div class="p-6"> 567<span class="inline-block px-3 py-1 bg-surface-muted text-on-surface-variant text-caption font-caption rounded-full mb-3 border border-border-subtle">wizytówka firmy</span> 568<h3 class="font-headline-sm text-headline-sm text-primary mb-2 group-hover:text-vibrant-blue transition-colors">Publiczny Å»Åobek w Miastkowie KoÅcielnym</h3> 569</div></a> 570<a class="project-card group block bg-surface rounded-xl border border-border-subtle overflow-hidden shadow-sm hover:shadow-[0px_12px_30px_rgba(0,0,0,0.08)] transition-all" data-category="rozbudowane strony" href="http://bieg.truchtacz.pl/" target="_blank" rel="noopener" target="Blank"> 571<div class="aspect-[16/9] w-full overflow-hidden relative bg-surface-variant"><img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="Kilometry pomoc - biegnij w Garwolinie" src="images/realizacje/bieg-avon-kontra-przemoc-biegnij-w-garwolinie.jpg"></div> 572<div class="p-6"> 573<span class="inline-block px-3 py-1 bg-surface-muted text-on-surface-variant text-caption font-caption rounded-full mb-3 border border-border-subtle">rozbudowane strony</span> 574<h3 class="font-headline-sm text-headline-sm text-primary mb-2 group-hover:text-vibrant-blue transition-colors">Kilometry pomoc - biegnij w Garwolinie</h3> 575</div></a> 576<a class="project-card group block bg-surface rounded-xl border border-border-subtle overflow-hidden shadow-sm hover:shadow-[0px_12px_30px_rgba(0,0,0,0.08)] transition-all" data-category="rozbudowane strony" href="http://dwlogistics.pl/" target="_blank" rel="noopener" target="Blank"> 577<div class="aspect-[16/9] w-full overflow-hidden relative bg-surface-variant"><img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt
577="DW Logistics" src="images/realizacje/dw-logistics.jpg"></div> 578<div class="p-6"> 579<span class="inline-block px-3 py-1 bg-surface-muted text-on-surface-variant text-caption font-caption rounded-full mb-3 border border-border-subtle">rozbudowane strony</span> 580<h3 class="font-headline-sm text-headline-sm text-primary mb-2 group-hover:text-vibrant-blue transition-colors">DW Logistics</h3> 581</div></a> 582<a class="project-card group block bg-surface rounded-xl border border-border-subtle overflow-hidden shadow-sm hover:shadow-[0px_12px_30px_rgba(0,0,0,0.08)] transition-all" data-category="wizytówka firmy" href="http://remontygarwolin.pl/" target="_blank" rel="noopener" target="Blank"> 583<div class="aspect-[16/9] w-full overflow-hidden relative bg-surface-variant"><img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="Remar" src="images/realizacje/remar.jpg"></div> 584<div class="p-6"> 585<span class="inline-block px-3 py-1 bg-surface-muted text-on-surface-variant text-caption font-caption rounded-full mb-3 border border-border-subtle">wizytówka firmy</span> 586<h3 class="font-headline-sm text-headline-sm text-primary mb-2 group-hover:text-vibrant-blue transition-colors">Remar</h3> 587</div></a> 588<a class="project-card group block bg-surface rounded-xl border border-border-subtle overflow-hidden shadow-sm hover:shadow-[0px_12px_30px_rgba(0,0,0,0.08)] transition-all" data-category="wizytówka firmy" href="http://kobzinski.pl/" target="_blank" rel="noopener" target="Blank"> 589<div class="aspect-[16/9] w-full overflow-hidden relative bg-surface-variant"><img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="Transport KobziÅski" src="images/realizacje/transport-kobzinski.jpg"></div> 590<div class="p-6"> 591<span class="inline-block px-3 py-1 bg-surface-muted text-on-surface-variant text-caption font-caption rounded-full mb-3 border border-border-subtle">wizytówka firmy</span> 592<h3 class="font-headline-sm text-headline-sm text-primary mb-2 group-hover:text-vibrant-blue transition-colors">Transport KobziÅski</h3> 593</div></a> 594<a class="project-card group block bg-surface rounded-xl border border-border-subtle overflow-hidden shadow-sm hover:shadow-[0px_12px_30px_rgba(0,0,0,0.08)] transition-all" data-category="wizytówka firmy" href="https://wynajmijtransita.pl" target="_blank" rel="noopener" target="Blank"> 595<div class="aspect-[16/9] w-full overflow-hidden relative bg-surface-variant"><img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="Wynajmij Transita" src="images/realizacje/wynajmij.jpg"></div> 596<div class="p-6"> 597<span class="inline-block px-3 py-1 bg-surface-muted text-on-surface-variant text-caption font-caption rounded-full mb-3 border border-border-subtle">wizytówka firmy</span> 598<h3 class="font-headline-sm text-headline-sm text-primary mb-2 group-hover:text-vibrant-blue transition-colors">WynajmnijTranista</h3> 599</div></a> 600 601<a class="project-card group block bg-surface rounded-xl border border-border-subtle overflow-hidden shadow-sm hover:shadow-[0px_12px_30px_rgba(0,0,0,0.08)] transition-all" data-category="instytucje" href="http://www.miastkowkoscielny.pl/" target="_blank" rel="noopener" target="Blank"> 602<div class="aspect-[16/9] w-full overflow-hidden relative bg-surface-variant"><img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="UG Miastków KoÅcielny" src="images/realizacje/ug-miastkow-koscielny.jpg"></div> 603<div class="p-6"> 604<span class="inline-block px-3 py-1 bg-surface-muted text-on-surface-variant text-caption font-caption rounded-full mb-3 border border-border-subtle">instytucje</span> 605<h3 class="font-headline-sm text-headline-sm text-primary mb-2 group-hover:text-vibrant-blue transition-colors">UG Miastków KoÅcielny</h3> 606</div></a> 607 608 609<a class="project-card group block bg-surface rounded-xl border border-border-subtle overflow-hidden shadow-sm hover:shadow-[0px_12px_30px_rgba(0,0,0,0.08)] transition-all" data-category="rozbudowane strony" href="http://sushigarwolin.pl/" target="_blank" rel="noopener" target="Blank"> 610<div class="aspect-[16/9] w-full overflow-hidden relative bg-surface-variant"><img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt
610="Sushi 49 &amp;Thai" src="images/realizacje/sushi-49-thai.jpg"></div> 611<div class="p-6"> 612<span class="inline-block px-3 py-1 bg-surface-muted text-on-surface-variant text-caption font-caption rounded-full mb-3 border border-border-subtle">rozbudowane strony</span> 613<h3 class="font-headline-sm text-headline-sm text-primary mb-2 group-hover:text-vibrant-blue transition-colors">Sushi 49 &Thai</h3> 614</div></a> 615<a class="project-card group block bg-surface rounded-xl border border-border-subtle overflow-hidden shadow-sm hover:shadow-[0px_12px_30px_rgba(0,0,0,0.08)] transition-all" data-category="wizytówka firmy" href="http://fordmotor.eu/" target="_blank" rel="noopener" target="Blank"> 616<div class="aspect-[16/9] w-full overflow-hidden relative bg-surface-variant"><img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="Fordmotor" src="images/realizacje/fordmotor.jpg"></div> 617<div class="p-6"> 618<span class="inline-block px-3 py-1 bg-surface-muted text-on-surface-variant text-caption font-caption rounded-full mb-3 border border-border-subtle">wizytówka firmy</span> 619<h3 class="font-headline-sm text-headline-sm text-primary mb-2 group-hover:text-vibrant-blue transition-colors">Fordmotor</h3> 620</div></a> 621 622<a class="project-card group block bg-surface rounded-xl border border-border-subtle overflow-hidden shadow-sm hover:shadow-[0px_12px_30px_rgba(0,0,0,0.08)] transition-all" data-category="wizytówka firmy" href="http://www.professionalvending.pl/" target="_blank" rel="noopener" target="Blank"> 623<div class="aspect-[16/9] w-full overflow-hidden relative bg-surface-variant"><img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="Professional Vending" src="images/realizacje/professional-vending.jpg"></div> 624<div class="p-6"> 625<span class="inline-block px-3 py-1 bg-surface-muted text-on-surface-variant text-caption font-caption rounded-full mb-3 border border-border-subtle">wizytówka firmy</span> 626<h3 class="font-headline-sm text-headline-sm text-primary mb-2 group-hover:text-vibrant-blue transition-colors">Professional Vending</h3> 627</div></a> 628 629<a class="project-card group block bg-surface rounded-xl border border-border-subtle overflow-hidden shadow-sm hover:shadow-[0px_12px_30px_rgba(0,0,0,0.08)] transition-all" data-category="instytucje" href="https://pwikgarwolin.pl/" target="_blank" rel="noopener" target="Blank"> 630<div class="aspect-[16/9] w-full overflow-hidden relative bg-surface-variant"><img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="PWiK" src="images/realizacje/pwik.jpg"></div> 631<div class="p-6"> 632<span class="inline-block px-3 py-1 bg-surface-muted text-on-surface-variant text-caption font-caption rounded-full mb-3 border border-border-subtle">instytucje</span> 633<h3 class="font-headline-sm text-headline-sm text-primary mb-2 group-hover:text-vibrant-blue transition-colors">PWiK</h3> 634</div></a> 635 636<a class="project-card group block bg-surface rounded-xl border border-border-subtle overflow-hidden shadow-sm hover:shadow-[0px_12px_30px_rgba(0,0,0,0.08)] transition-all" data-category="rozbudowane strony" href="http://kolatekmeble.pl/" target="_blank" rel="noopener" target="Blank"> 637<div class="aspect-[16/9] w-full overflow-hidden relative bg-surface-variant"><img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="KoÅatek Meble" src="images/realizacje/kolatek-meble.jpg"></div> 638<div class="p-6"> 639<span class="inline-block px-3 py-1 bg-surface-muted text-on-surface-variant text-caption font-caption rounded-full mb-3 border border-border-subtle">rozbudowane strony</span> 640<h3 class="font-headline-sm text-headline-sm text-primary mb-2 group-hover:text-vibrant-blue transition-colors">KoÅatek Meble</h3> 641</div></a> 642<a class="project-card group block bg-surface rounded-xl border border-border-subtle overflow-hidden shadow-sm hover:shadow-[0px_12px_30px_rgba(0,0,0,0.08)] transition-all" data-category="rozbudowane strony" href="http://kamieniarstwo-garwolin.pl/" target="_blank" rel="noopener" target="Blank"> 643<div class="aspect-[16/9] w-full overflow-hidden relative bg-surface-variant"><img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt
643="Kamieniarstwo" src="images/realizacje/kamieniarstwo.jpg"></div> 644<div class="p-6"> 645<span class="inline-block px-3 py-1 bg-surface-muted text-on-surface-variant text-caption font-caption rounded-full mb-3 border border-border-subtle">rozbudowane strony</span> 646<h3 class="font-headline-sm text-headline-sm text-primary mb-2 group-hover:text-vibrant-blue transition-colors">Kamieniarstwo</h3> 647</div></a> 648<a class="project-card group block bg-surface rounded-xl border border-border-subtle overflow-hidden shadow-sm hover:shadow-[0px_12px_30px_rgba(0,0,0,0.08)] transition-all" data-category="wizytówka firmy" href="http://www.naprawacystern.pl/" target="_blank" rel="noopener" target="Blank"> 649<div class="aspect-[16/9] w-full overflow-hidden relative bg-surface-variant"><img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="ZMS" src="images/realizacje/zms.jpg"></div> 650<div class="p-6"> 651<span class="inline-block px-3 py-1 bg-surface-muted text-on-surface-variant text-caption font-caption rounded-full mb-3 border border-border-subtle">wizytówka firmy</span> 652<h3 class="font-headline-sm text-headline-sm text-primary mb-2 group-hover:text-vibrant-blue transition-colors">ZMS</h3> 653</div></a> 654</div><div class="text-center mt-12 hidden" id="show-more-container"> 655<button class="inline-flex items-center gap-2 text-vibrant-blue font-label-md text-label-md border border-vibrant-blue px-6 py-3 rounded hover:bg-vibrant-blue hover:text-on-primary transition-all" id="show-more-btn"> 656 Pokaż wiÄcej 657 </button> 658</div> 659</section> 660<!-- Pricing --> 661<section id="cennik" class="py-section-gap-lg bg-surface-muted border-y border-border-subtle"> 662<div class="max-w-container-max mx-auto px-margin-mobile md:px-gutter"> 663<div class="text-center max-w-2xl mx-auto mb-16"> 664<h2 class="font-headline-lg text-headline-lg-mobile md:text-headline-lg text-primary mb-4">Cennik</h2> 665<p class="font-body-lg text-body-lg text-on-surface-variant">Przejrzyste pakiety dostosowane do potrzeb Twojej firmy.</p> 666</div> 667<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 items-start"> 668<!-- Bronze --> 669<div class="bg-surface p-8 rounded-xl border border-border-subtle shadow-sm flex flex-col h-full"> 670<h3 class="font-headline-md text-headline-md text-primary mb-2">BrÄ zowy</h3> 671<div class="mb-6"> 672<span class="font-headline-lg text-headline-lg text-primary">1200</span> 673<span class="font-body-md text-body-md text-on-surface-variant">zÅ brutto</span> 674</div> 675<ul class="flex-grow space-y-4 mb-8"> 676<li class="flex items-start gap-3"> 677<span class="material-symbols-outlined text-vibrant-green text-[20px] mt-0.5">check_circle</span> 678<span class="font-body-md text-body-md text-on-surface-variant">Liczba podstron: do 5</span> 679</li> 680<li class="flex items-start gap-3"> 681<span class="material-symbols-outlined text-vibrant-green text-[20px] mt-0.5">check_circle</span> 682<span class="font-body-md text-body-md text-on-surface-variant">Galeria: tak</span> 683</li> 684<li class="flex items-start gap-3"> 685<span class="material-symbols-outlined text-vibrant-green text-[20px] mt-0.5">check_circle</span> 686<span class="font-body-md text-body-md text-on-surface-variant">Mapa dojazdu: tak</span> 687</li> 688<li class="flex items-start gap-3"> 689<span class="material-symbols-outlined text-vibrant-green text-[20px] mt-0.5">check_circle</span> 690<span class="font-body-md text-body-md text-on-surface-variant">Formularz kontaktowy: tak</span> 691</li> 692<li class="flex items-start gap-3"> 693<span class="material-symbols-outlined text-vibrant-green text-[20px] mt-0.5">check_circle</span> 694<span class="font-body-md text-body-md text-on-surface-variant">Liczba skrzynek email: 1</span> 695</li> 696</ul> 697<!-- <button class="w-full border border-border-subtle bg-surface text-primary py-3 rounded font-label-md text-label-md hover:bg-surface-muted transition-colors">Wybieram</button> --> 698</div> 699<!-- Silver --> 700<div class="bg-surface p-8 rounded-xl border border-border-subtle shadow-sm flex flex-col h-full"> 701<h3 class="font-headline-md text-headline-md text-primary mb-2">Srebrny</h3> 702<div class="mb-6"> 703<span class="font-headline-lg text-headline-lg text-primary">1600</span> 704<span class="font-body-md text-body-md text-on-surface-variant">zÅ brutto</span> 705</div>
706<ul class="flex-grow space-y-4 mb-8"> 707<li class="flex items-start gap-3"> 708<span class="material-symbols-outlined text-vibrant-green text-[20px] mt-0.5">check_circle</span> 709<span class="font-body-md text-body-md text-on-surface-variant">Liczba podstron: do 6</span> 710</li> 711<li class="flex items-start gap-3"> 712<span class="material-symbols-outlined text-vibrant-green text-[20px] mt-0.5">check_circle</span> 713<span class="font-body-md text-body-md text-on-surface-variant">Liczba skrzynek email: 2</span> 714</li> 715<li class="flex items-start gap-3"> 716<span class="material-symbols-outlined text-vibrant-green text-[20px] mt-0.5">check_circle</span> 717<span class="font-body-md text-body-md text-on-surface-variant">Wszystkie funkcje z pakietu BrÄ zowego</span> 718</li> 719</ul> 720<!-- <button class="w-full border border-border-subtle bg-surface text-primary py-3 rounded font-label-md text-label-md hover:bg-surface-muted transition-colors">Wybieram</button> --> 721</div> 722<!-- Gold --> 723<div class="bg-surface p-8 rounded-xl border-2 border-vibrant-blue shadow-[0px_12px_30px_rgba(37,99,235,0.15)] flex flex-col h-full relative transform md:-translate-y-4 z-10"> 724<div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-vibrant-blue text-on-primary px-4 py-1 rounded-full font-label-md text-caption uppercase tracking-wider"> 725 Najpopularniejszy 726 </div> 727<h3 class="font-headline-md text-headline-md text-primary mb-2">ZÅoty</h3> 728<div class="mb-6"> 729<span class="font-headline-lg text-headline-lg text-primary">2000</span> 730<span class="font-body-md text-body-md text-on-surface-variant">zÅ brutto</span> 731</div> 732<ul class="flex-grow space-y-4 mb-8"> 733<li class="flex items-start gap-3"> 734<span class="material-symbols-outlined text-vibrant-green text-[20px] mt-0.5">check_circle</span> 735<span class="font-body-md text-body-md text-on-surface-variant font-semibold">Liczba podstron: do 10</span> 736</li> 737<li class="flex items-start gap-3"> 738<span class="material-symbols-outlined text-vibrant-green text-[20px] mt-0.5">check_circle</span> 739<span class="font-body-md text-body-md text-on-surface-variant font-semibold">Liczba skrzynek email: 3-5</span> 740</li> 741<li class="flex items-start gap-3"> 742<span class="material-symbols-outlined text-vibrant-green text-[20px] mt-0.5">check_circle</span> 743<span class="font-body-md text-body-md text-on-surface-variant">Wszystkie funkcje z pakietów niższych</span> 744</li> 745</ul> 746<!-- <button class="w-full bg-vibrant-blue text-on-primary py-3 rounded font-label-md text-label-md hover:bg-secondary-container transition-colors shadow-sm">Wybieram</button> --> 747</div> 748<!-- E-commerce --> 749<div class="bg-surface p-8 rounded-xl border border-border-subtle shadow-sm flex flex-col h-full"> 750<h3 class="font-headline-md text-headline-md text-primary mb-2">Sklep</h3> 751<div class="mb-6"> 752<span class="font-body-lg text-body-lg text-on-surface-variant mr-1">od</span> 753<span class="font-headline-lg text-headline-lg text-primary">3900</span> 754<span class="font-body-md text-body-md text-on-surface-variant">zÅ brutto</span> 755</div> 756<ul class="flex-grow space-y-4 mb-8"> 757<li class="flex items-start gap-3"> 758<span class="material-symbols-outlined text-vibrant-green text-[20px] mt-0.5">check_circle</span> 759<span class="font-body-md text-body-md text-on-surface-variant">Integracja z InPost</span> 760</li> 761<li class="flex items-start gap-3"> 762<span class="material-symbols-outlined text-vibrant-green text-[20px] mt-0.5">check_circle</span> 763<span class="font-body-md text-body-md text-on-surface-variant">PÅatnoÅci on-line</span> 764</li> 765<li class="flex items-start gap-3"> 766<span class="material-symbols-outlined text-vibrant-green text-[20px] mt-0.5">check_circle</span> 767<span class="font-body-md text-body-md text-on-surface-variant">ZarzÄ dzanie treÅciÄ </span> 768</li> 769</ul> 770<button class="w-full border border-border-subtle bg-surface text-primary py-3 rounded font-label-md text-label-md hover:bg-surface-muted transition-colors">Wycena indywidualna</button> 771</div> 772</div> 773<div class="text-center mt-12"> 774<!-- <a class="inline-flex items-center gap-2 text-vibrant-blue font-label-md text-label-md hover:text-secondary-container transition-colors group" href="/cennik"> --> 775 <!-- Zobacz peÅnÄ ofertÄ --> 776 <!-- <span class="material-symbols-outlined group-hover:translate-x-1 transition-transform">arrow_forward</span> --> 777<!-- </a> --> 778</div> 779</div> 780</section> 781<!-- Footer --> 782 783<!-- Contact --> 784<section id="kontakt" class="py-section-gap-lg bg-surface-muted border-y border-border-subtle"> 785<div class="max-w-container-max mx-auto px-margin-mobile md:px-gutter"> 786<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-start"> 787 788<div> 789<h2 class="font-headline-lg text-headline-lg-mobile md:text-headline-lg text-primary mb-6">Kontakt</h2> 790<div class="w-20 h-1 bg-vibrant-blue mb-8 rounded-full"></div> 791<p class="font-body-lg text-body-lg text-on-surface-variant mb-10"> 792 Masz pytania, potrzebujesz nowej strony lub chcesz odÅwieżyÄ istniejÄ cÄ ? Napisz lub zadzwoÅ â chÄtnie porozmawiamy o Twoim projekcie. 793</p> 794 795<div class="space-y-5"> 796<a href="tel:508590073" class="flex items-center gap-4 group"> 797<div class="w-12 h-12 rounded-lg bg-primary-fixed flex items-center justify-center text-vibrant-blue shrink-0"> 798<span class="material-symbols-outlined">phone</span> 799</div> 800<div> 801<span class="block font-caption text-caption text-on-surface-variant mb-1">Telefon</span> 802<span class="font-body-lg text-body-lg text-primary group-hover:text-vibrant-blue transition-colors">508 590 073</span> 803</div> 804</a> 805 806<a href="mailto:[email protected]" class="flex items-center gap-4 group"> 807<div class="w-12 h-12 rounded-lg bg-primary-fixed flex items-center justify-center text-vibrant-blue shrink-0"> 808<span class="material-symbols-outlined">mail</span> 809</div> 810<div> 811<span class="block font-caption text-caption text-on-surface-variant mb-1">E-mail</span> 812<span class="font-body-lg text-body-lg text-primary group-hover:text-vibrant-blue transition-colors">[email protected]</span> 813</div> 814</a> 815</div> 816</div> 817 818<div class="bg-surface p-6 md:p-8 rounded-xl border border-border-subtle shadow-sm"> 819<h3 class="font-headline-md text-headline-md text-primary mb-6">Napisz do nas</h3> 820<form action="#" method="post" class="space-y-5"> 821<div> 822<label for="contact-name" class="block font-label-md text-label-md text-primary mb-2">ImiÄ i nazwisko</label> 823<input id="contact-name" name="name" type="text" autocomplete="name" class="w-full px-4 py-3 rounded-lg border border-border-subtle bg-surface text-primary focus:outline-none focus:ring-2 focus:ring-vibrant-blue focus:border-transparent" placeholder="ImiÄ i nazwisko"> 824</div> 825<div> 826<label for="contact-email" class="block font-label-md text-label-md text-primary mb-2">E-mail</label> 827<input id="contact-email" name="email" type="email" autocomplete="email" class="w-full px-4 py-3 rounded-lg border border-border-subtle bg-surface text-primary focus:outline-none focus:ring-2 focus:ring-vibrant-blue focus:border-transparent" placeholder="[email protected]"> 828</div> 829<div> 830<label for="contact-phone" class="block font-label-md text-label-md text-primary mb-2">Telefon</label> 831<input id="contact-phone" name="phone" type="tel" autocomplete="tel" class="w-full px-4 py-3 rounded-lg border border-border-subtle bg-surface text-primary focus:outline-none focus:ring-2 focus:ring-vibrant-blue focus:border-transparent" placeholder="508 590 073"> 832</div> 833<div> 834<label for="contact-message" class="block font-label-md text-label-md text-primary mb-2">WiadomoÅÄ</label> 835<textarea id="contact-message" name="message" rows="5" class="w-full px-4 py-3 rounded-lg border border-border-subtle bg-surface text-primary focus:outline-none focus:ring-2 focus:ring-vibrant-blue focus:border-transparent resize-y" placeholder="Napisz, czego potrzebujesz..."></textarea> 836 837<label class="flex items-start gap-3 cursor-pointer"> 838 <input type="checkbox" name="privacy_policy" required 839 class="mt-1 w-4 h-4 shrink-0 accent-blue-600"> 840 <span class="text-sm leading-6 text-gray-600"> 841 Wyrażam zgodÄ na przetwarzanie moich danych osobowych przez 842 <strong>DK MEDIA s.c. Justyna Dybcio, Åukasz Korycki</strong>, 843 08-400 Garwolin, ul. Stawki 3, Polska, adres e-mail: 844 <a href="mailto:[email protected]" class="underline hover:no-underline"> 845 [email protected] 846 </a>, 847 w celu obsÅugi mojego zapytania przesÅanego za poÅrednictwem formularza 848 kontaktowego. ZapoznaÅem/am siÄ z 849 <a href="pp.pdf" class="underline hover:no-underline"> 850 PolitykÄ prywatnoÅci 851 </a>. 852 </span> 853</label> 854</div> 855<button type="submit" class="w-full bg-vibrant-blue text-on-primary px-6 py-4 rounded-lg font-label-md text-label-md hover:bg-secondary-container transition-colors shadow-sm"> 856 WyÅlij wiadomoÅÄ 857</button> 858</form> 859</div> 860 861</div> 862</div> 863</section> 864<footer class="bg-primary dark:bg-primary-container"> 865<div class="w-full py-component-gap px-margin-mobile md:px-gutter flex items-center justify-between gap-6 max-w-container-max mx-auto"> 866<a class="text-on-primary-container/70 hover:text-on-primary transition-colors font-body-md text-body-md" href="pp.pdf">Polityka prywatnoÅci</a> 867<div class="text-on-primary-container/70 font-body-md text-body-md text-right"> 868 © <span id="current-year">2026</span> DK Media 869</div> 870</div> 871</footer>
872<script> 873document.addEventListener('DOMContentLoaded', () => { 874 875 const yearElement = document.getElementById('current-year'); 876 if (yearElement) yearElement.textContent = new Date().getFullYear(); 877 878 const mobileMenuToggle = document.getElementById('mobile-menu-toggle'); 879 const mobileMenu = document.getElementById('mobile-menu'); 880 const mobileMenuIcon = document.getElementById('mobile-menu-icon'); 881 882 if (mobileMenuToggle && mobileMenu) { 883 const closeMobileMenu = () => { 884 mobileMenu.classList.add('hidden'); 885 mobileMenuToggle.setAttribute('aria-expanded', 'false'); 886 mobileMenuToggle.setAttribute('aria-label', 'Otwórz menu'); 887 if (mobileMenuIcon) mobileMenuIcon.textContent = 'menu'; 888 }; 889 890 mobileMenuToggle.addEventListener('click', (event) => { 891 event.stopPropagation(); 892 const isOpen = !mobileMenu.classList.contains('hidden'); 893 if (isOpen) { 894 closeMobileMenu(); 895 } else { 896 mobileMenu.classList.remove('hidden'); 897 mobileMenuToggle.setAttribute('aria-expanded', 'true'); 898 mobileMenuToggle.setAttribute('aria-label', 'Zamknij menu'); 899 if (mobileMenuIcon) mobileMenuIcon.textContent = 'close'; 900 } 901 }); 902 903 document.querySelectorAll('.mobile-menu-link').forEach(link => { 904 link.addEventListener('click', closeMobileMenu); 905 }); 906 907 document.addEventListener('click', (event) => { 908 if (!mobileMenu.contains(event.target) && !mobileMenuToggle.contains(event.target)) { 909 closeMobileMenu(); 910 } 911 }); 912 913 window.addEventListener('resize', () => { 914 if (window.innerWidth >= 768) closeMobileMenu(); 915 }); 916 } 917}); 918 919document.addEventListener('DOMContentLoaded', () => { 920 921 // One-page navigation: highlight the section currently visible on screen. 922 const onePageLinks = Array.from(document.querySelectorAll( 923 '#main-nav a[href^="#"]' 924 )); 925 926 const onePageSections = ['top', 'o-firmie', 'uslugi', 'realizacje', 'cennik', 'kontakt'] 927 .map(id => document.getElementById(id)) 928 .filter(Boolean); 929 930 if (onePageLinks.length && onePageSections.length) { 931 const setActiveLink = (id) => { 932 onePageLinks.forEach(link => { 933 const active = link.getAttribute('href') === '#' + id; 934 link.classList.toggle('text-vibrant-blue', active); 935 link.classList.toggle('font-semibold', active); 936 link.classList.toggle('border-b-2', active && !link.classList.contains('mobile-menu-link')); 937 link.classList.toggle('border-vibrant-blue', active && !link.classList.contains('mobile-menu-link')); 938 if (link.classList.contains('mobile-menu-link')) { 939 link.classList.toggle('bg-surface-muted', active); 940 } 941 }); 942 }; 943 944 const observer = new IntersectionObserver((entries) => { 945 const visible = entries 946 .filter(entry => entry.isIntersecting) 947 .sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0]; 948 949 if (visible) setActiveLink(visible.target.id); 950 }, { 951 rootMargin: '-25% 0px -55% 0px', 952 threshold: [0.05, 0.2, 0.5] 953 }); 954 955 onePageSections.forEach(section => observer.observe(section)); 956 } 957 958 const filterBtns = document.querySelectorAll('#portfolio-filters .filter-btn'); 959 const projectCards = Array.from(document.querySelectorAll('#portfolio-grid .project-card')); 960 const showMoreBtn = document.getElementById('show-more-btn'); 961 const showMoreContainer = document.getElementById('show-more-container'); 962 963 const PAGE_SIZE = 6; 964 let currentFilter = 'all'; 965 let visibleCount = PAGE_SIZE; 966 967 function updateGrid() { 968 const matchingCards = projectCards.filter(card => { 969 const category = (card.dataset.category || '').trim().toLowerCase(); 970 return currentFilter === 'all' || category === currentFilter; 971 }); 972 973 projectCards.forEach(card => { 974 card.style.display = 'none'; 975 }); 976 977 matchingCards.slice(0, visibleCount).forEach(card => { 978 card.style.display = ''; 979 }); 980 981 if (matchingCards.length > visibleCount) { 982 showMoreContainer.classList.remove('hidden'); 983 showMoreBtn.textContent = 'Pokaż pozostaÅe'; 984 } else { 985 showMoreContainer.classList.add('hidden'); 986 } 987 } 988 989 filterBtns.forEach(btn => { 990 btn.addEventListener('click', () => { 991 filterBtns.forEach(button => { 992 button.classList.remove('bg-vibrant-blue', 'text-on-primary'); 993 button.classList.add('bg-surface', 'text-primary'); 994 }); 995 996 btn.classList.remove('bg-surface', 'text-primary'); 997 btn.classList.add('bg-vibrant-blue', 'text-on-primary'); 998
999 currentFilter = (btn.dataset.filter || 'all').trim().toLowerCase(); 1000 visibleCount = PAGE_SIZE; 1001 updateGrid(); 1002 }); 1003 }); 1004 1005 showMoreBtn.addEventListener('click', () => { 1006 visibleCount += PAGE_SIZE; 1007 updateGrid(); 1008 }); 1009 1010 updateGrid(); 1011}); 1012</script>
1012 1013 1014<button id="back-to-top" type="button" aria-label="WrÃ³Ä na górÄ" 1015class="fixed bottom-6 right-6 z-50 w-12 h-12 rounded-full bg-vibrant-blue text-on-primary shadow-lg hidden items-center justify-center hover:bg-secondary-container transition-all"> 1016<span class="material-symbols-outlined">arrow_upward</span> 1017</button> 1018<div id="cookie-banner" class="fixed bottom-0 left-0 right-0 z-[60] bg-primary text-on-primary shadow-[0_-8px_30px_rgba(0,0,0,0.15)]"> 1019<div class="max-w-container-max mx-auto px-margin-mobile md:px-gutter py-4 flex flex-col md:flex-row items-start md:items-center justify-between gap-4"> 1020<p class="font-body-md text-body-md text-on-primary/90">Ta strona korzysta z plików cookie, aby zapewniÄ prawidÅowe dziaÅanie serwisu. <a href="/polityka-prywatnosci" class="underline hover:text-white">Polityka prywatnoÅci</a></p> 1021<button id="cookie-accept" type="button" class="shrink-0 bg-vibrant-blue text-on-primary px-5 py-3 rounded-lg font-label-md text-label-md hover:bg-secondary-container transition-colors">Ok, rozumiem</button> 1022</div></div>
1023<script> 1024document.addEventListener('DOMContentLoaded', () => { 1025 const topBtn = document.getElementById('back-to-top'); 1026 const cookieBanner = document.getElementById('cookie-banner'); 1027 const cookieAccept = document.getElementById('cookie-accept'); 1028 1029 const updateTopButton = () => { 1030 if (window.scrollY > 500) { 1031 topBtn.classList.remove('hidden'); topBtn.classList.add('flex'); 1032 } else { 1033 topBtn.classList.add('hidden'); topBtn.classList.remove('flex'); 1034 } 1035 }; 1036 window.addEventListener('scroll', updateTopButton, {passive:true}); 1037 updateTopButton(); 1038 topBtn.addEventListener('click', () => window.scrollTo({top:0, behavior:'smooth'})); 1039 1040 if (localStorage.getItem('dkmedia-cookie-accepted') === '1') { 1041 cookieBanner.remove(); 1042 } 1043 cookieAccept.addEventListener('click', () => { 1044 localStorage.setItem('dkmedia-cookie-accepted', '1'); 1045 cookieBanner.remove(); 1046 }); 1047}); 1048</script>
vendor: 1 bytes, line 1048
1048
1049<script id="ratufa_loader" src="https://www.ratufa.io/c/ld.js?f=n0cvih20&n=n1.ratufa.io"></script>
1049 1050</body></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.