wersja pokazowa 02.09.2025

app/globals.css

@@ -41,4 +41,34 @@ html {
   100% {
     background-position: 0% 50%;
   }
+}
+
+/* tailwind.config lub global.css */
+.bg-grid {
+  background-image: url('/visuals/grid.svg');
+  background-size: 24px 24px;
+}
+
+.bg-noise {
+  background-image: url('/visuals/noise.png');
+  background-size: 200px 200px;
+  opacity: .05;
+}
+
+/* Hero video jest dekoracyjne – chowamy natywne UI przeglądarek */
+.heroVideo::-webkit-media-controls {
+  display: none !important;
+}
+
+.heroVideo::-webkit-media-controls-enclosure {
+  display: none !important;
+}
+
+.heroVideo::-webkit-media-controls-panel {
+  display: none !important;
+}
+
+/* Firefox/Edge raczej nie pokażą UI bez atrybutu controls, ale zostawiamy dla pewności: */
+.heroVideo::-moz-media-controls {
+  display: none !important;
 }

public/visuals/grid.svg

@@ -0,0 +1,8 @@
+<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>
+  <defs>
+    <pattern id='grid' width='24' height='24' patternUnits='userSpaceOnUse'>
+      <path d='M 24 0 L 0 0 0 24' fill='none' stroke='rgba(0,0,0,0.08)' stroke-width='1'/>
+    </pattern>
+  </defs>
+  <rect width='100%' height='100%' fill='url(#grid)'/>
+</svg>

public/visuals/pobrane (1).svg

@@ -0,0 +1,44 @@
+<!-- /public/visuals/sytuacje-bg-blue.svg -->
+<svg width="1920" height="1080" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <!-- chłodny header -->
+    <linearGradient id="gHeader" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0" stop-color="#A5F3FC"></stop>   <!-- cyan-200 -->
+      <stop offset="0.55" stop-color="#60A5FA"></stop> <!-- blue-400 -->
+      <stop offset="1" stop-color="#3B82F6"></stop>    <!-- blue-500 -->
+    </linearGradient>
+
+    <!-- chłodny bottom -->
+    <linearGradient id="gBottom" x1="0" y1="1" x2="1" y2="0">
+      <stop offset="0" stop-color="#BFDBFE"></stop> <!-- blue-200 -->
+      <stop offset="1" stop-color="#60A5FA"></stop> <!-- blue-400 -->
+    </linearGradient>
+
+    <filter id="blur180" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur stdDeviation="180"></feGaussianBlur>
+    </filter>
+    <filter id="blur140" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur stdDeviation="140"></feGaussianBlur>
+    </filter>
+  </defs>
+
+  <!-- delikatny pas headera -->
+  <rect x="0" y="0" width="1920" height="360" fill="url(#gHeader)" opacity="0.22"></rect>
+
+  <!-- miękkie plamy: zimne odcienie (bez ciepłych tonów) -->
+  <circle cx="260" cy="180" r="320" fill="#38BDF8" filter="url(#blur180)" fill-opacity="0.85"></circle> <!-- sky-400 -->
+  <circle cx="760" cy="90" r="280" fill="#22D3EE" filter="url(#blur140)" fill-opacity="0.70"></circle>  <!-- cyan-400 -->
+  <circle cx="1680" cy="930" r="440" fill="#3B82F6" filter="url(#blur180)" fill-opacity="0.88"></circle> <!-- blue-500 -->
+
+  <!-- chłodny pas dołu -->
+  <rect x="0" y="720" width="1920" height="360" fill="url(#gBottom)" opacity="0.23"></rect>
+
+  <!-- subtelna winieta góra/dół -->
+  <linearGradient id="vignette" x1="0" y1="0" x2="0" y2="1">
+    <stop offset="0" stop-color="black" stop-opacity="0.10"></stop>
+    <stop offset="0.16" stop-color="black" stop-opacity="0"></stop>
+    <stop offset="0.84" stop-color="black" stop-opacity="0"></stop>
+    <stop offset="1" stop-color="black" stop-opacity="0.12"></stop>
+  </linearGradient>
+  <rect x="0" y="0" width="1920" height="1080" fill="url(#vignette)"></rect>
+</svg>

public/visuals/pobrane.svg

@@ -0,0 +1,40 @@
+<!-- /public/visuals/sytuacje-bg.svg -->
+<svg width="1920" height="1080" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="gHeader" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0" stop-color="#FDBA74"></stop>
+      <stop offset="0.55" stop-color="#F97316"></stop>
+      <stop offset="1" stop-color="#F472B6"></stop>
+    </linearGradient>
+    <linearGradient id="gBottom" x1="0" y1="1" x2="1" y2="0">
+      <stop offset="0" stop-color="#93C5FD"></stop>
+      <stop offset="1" stop-color="#3B82F6"></stop>
+    </linearGradient>
+    <filter id="blur180" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur stdDeviation="180"></feGaussianBlur>
+    </filter>
+    <filter id="blur140" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur stdDeviation="140"></feGaussianBlur>
+    </filter>
+  </defs>
+
+  <!-- delikatny pas headera -->
+  <rect x="0" y="0" width="1920" height="360" fill="url(#gHeader)" opacity="0.18"></rect>
+
+  <!-- miękkie „plamy” koloru (bez ostrych krawędzi) -->
+  <circle cx="260" cy="180" r="320" fill="#FDBA74" filter="url(#blur180)" fill-opacity="0.85"></circle>
+  <circle cx="760" cy="90" r="280" fill="#F472B6" filter="url(#blur140)" fill-opacity="0.70"></circle>
+  <circle cx="1700" cy="930" r="420" fill="#60A5FA" filter="url(#blur180)" fill-opacity="0.85"></circle>
+
+  <!-- delikatny pas dołu -->
+  <rect x="0" y="720" width="1920" height="360" fill="url(#gBottom)" opacity="0.20"></rect>
+
+  <!-- subtelna winieta góra/dół -->
+  <linearGradient id="vignette" x1="0" y1="0" x2="0" y2="1">
+    <stop offset="0" stop-color="black" stop-opacity="0.12"></stop>
+    <stop offset="0.15" stop-color="black" stop-opacity="0"></stop>
+    <stop offset="0.85" stop-color="black" stop-opacity="0"></stop>
+    <stop offset="1" stop-color="black" stop-opacity="0.14"></stop>
+  </linearGradient>
+  <rect x="0" y="0" width="1920" height="1080" fill="url(#vignette)"></rect>
+</svg>