PageSourceSearch

https://dk-media.pl/

html dk-media.pl collected 2026-10-08 06:08:37 UTC 77,805 bytes, 1,050 lines download raw bytes

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&amp;family=Inter:wght@400;600&amp;display=swap" rel="stylesheet"/>
9<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,[email protected],0..1&amp;display=swap" rel="stylesheet"/>
10<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,[email protected],0..1&amp;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;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 &amp;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.