style: update pricing section layout and remove stats from WhyUs

components/awaria/AwariaClient.tsx

@@ -227,7 +227,7 @@ export function AwariaClient() {
                 <label className="text-xs font-medium text-primary mb-1 block">Marka *</label>
                 <select
                   required value={brand} onChange={e => { setBrand(e.target.value); setErrorCode(''); }}
-                  className="w-full border border-border rounded-xl px-3 py-2.5 text-sm focus:border-accent outline-none bg-white"
+                  className="w-full h-[42px] rounded-xl px-3 py-2.5 text-sm border border-border focus:border-accent outline-none bg-white"
                 >
                   <option value="">Wybierz markę...</option>
                   {BRANDS.map(b => <option key={b} value={b}>{b}</option>)}
@@ -238,17 +238,17 @@ export function AwariaClient() {
                 <label className="text-xs font-medium text-primary mb-1 block">Model (opcjonalnie)</label>
                 <input
                   value={model} onChange={e => setModel(e.target.value)}
-                  className="w-full border border-border rounded-xl px-3 py-2.5 text-sm focus:border-accent outline-none"
+                  className="w-full h-[42px] rounded-xl px-3 py-2.5 text-sm border border-border focus:border-accent outline-none"
                   placeholder="Np. Gree Pular, LG Artcool 3,5 kW..."
                 />
               </div>
 
-              <div className="grid grid-cols-2 gap-3">
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                 <div>
                   <label className="text-xs font-medium text-primary mb-1 block">Na gwarancji?</label>
                   <select
                     value={warranty} onChange={e => setWarranty(e.target.value)}
-                    className="w-full border border-border rounded-xl px-3 py-2.5 text-sm focus:border-accent outline-none bg-white"
+                    className="w-full h-[42px] rounded-xl px-3 py-2.5 text-sm border border-border focus:border-accent outline-none bg-white"
                   >
                     <option value="">Nie wiem</option>
                     <option value="tak">Tak</option>
@@ -259,7 +259,7 @@ export function AwariaClient() {
                   <label className="text-xs font-medium text-primary mb-1 block">Ostatni serwis</label>
                   <select
                     value={lastService} onChange={e => setLastService(e.target.value)}
-                    className="w-full border border-border rounded-xl px-3 py-2.5 text-sm focus:border-accent outline-none bg-white"
+                    className="w-full h-[42px] rounded-xl px-3 py-2.5 text-sm border border-border focus:border-accent outline-none bg-white"
                   >
                     <option value="">Nie pamiętam</option>
                     <option value="<1rok">Mniej niż rok temu</option>
@@ -304,7 +304,7 @@ export function AwariaClient() {
                 <input
                   value={errorCode}
                   onChange={e => setErrorCode(e.target.value)}
-                  className="w-full border border-border rounded-xl px-3 py-2.5 text-sm focus:border-accent outline-none"
+                  className="w-full h-[42px] rounded-xl px-3 py-2.5 text-sm border border-border focus:border-accent outline-none"
                   placeholder="Np. E1, F3, CH05..."
                 />
                 {errorHint && (
@@ -322,7 +322,7 @@ export function AwariaClient() {
                 <textarea
                   value={description} onChange={e => setDescription(e.target.value)}
                   rows={3}
-                  className="w-full border border-border rounded-xl px-3 py-2.5 text-sm focus:border-accent outline-none resize-none"
+                  className="w-full rounded-xl px-3 py-2.5 text-sm border border-border focus:border-accent outline-none resize-none"
                   placeholder="Opisz kiedy się pojawił problem, jak często występuje, czy jest jakiś charakterystyczny dźwięk..."
                 />
               </div>
@@ -340,14 +340,14 @@ export function AwariaClient() {
                 <input
                   type="date" value={preferredDate} onChange={e => setPreferredDate(e.target.value)}
                   min={new Date().toISOString().split('T')[0]}
-                  className="w-full border border-border rounded-xl px-3 py-2.5 text-sm focus:border-accent outline-none"
+                  className="w-full h-[42px] rounded-xl px-3 py-2.5 text-sm border border-border focus:border-accent outline-none"
                 />
               </div>
               <div>
                 <label className="text-xs font-medium text-primary mb-1 block">Godzina</label>
                 <select
                   value={preferredTime} onChange={e => setPreferredTime(e.target.value)}
-                  className="w-full border border-border rounded-xl px-3 py-2.5 text-sm focus:border-accent outline-none bg-white"
+                  className="w-full h-[42px] rounded-xl px-3 py-2.5 text-sm border border-border focus:border-accent outline-none bg-white"
                 >
                   <option value="">Dowolna</option>
                   <option value="8:00-10:00">8:00 – 10:00</option>
@@ -371,7 +371,7 @@ export function AwariaClient() {
                   <label className="text-xs font-medium text-primary mb-1 block">Imię i nazwisko *</label>
                   <input
                     required value={name} onChange={e => setName(e.target.value)}
-                    className="w-full border border-border rounded-xl px-3 py-2.5 text-sm focus:border-accent outline-none"
+                    className="w-full h-[42px] rounded-xl px-3 py-2.5 text-sm border border-border focus:border-accent outline-none"
                     placeholder="Jan Kowalski"
                   />
                 </div>
@@ -379,7 +379,7 @@ export function AwariaClient() {
                   <label className="text-xs font-medium text-primary mb-1 block">Telefon *</label>
                   <input
                     required type="tel" value={phone} onChange={e => setPhone(e.target.value)}
-                    className="w-full border border-border rounded-xl px-3 py-2.5 text-sm focus:border-accent outline-none"
+                    className="w-full h-[42px] rounded-xl px-3 py-2.5 text-sm border border-border focus:border-accent outline-none"
                     placeholder="+48 600 000 000"
                   />
                 </div>
@@ -388,7 +388,7 @@ export function AwariaClient() {
                 <label className="text-xs font-medium text-primary mb-1 block">Miasto *</label>
                 <select
                   required value={city} onChange={e => setCity(e.target.value)}
-                  className="w-full border border-border rounded-xl px-3 py-2.5 text-sm focus:border-accent outline-none bg-white"
+                  className="w-full h-[42px] rounded-xl px-3 py-2.5 text-sm border border-border focus:border-accent outline-none bg-white"
                 >
                   <option value="">Wybierz miasto...</option>
                   {['Wrocław', 'Legnica', 'Wałbrzych', 'Jelenia Góra', 'Lubin', 'Głogów', 'Świdnica', 'Dzierżoniów', 'Oleśnica', 'Oława', 'Trzebnica', 'Środa Śląska', 'Siechnice', 'Inne'].map(c => (

components/layout/Header.tsx

@@ -206,7 +206,7 @@ export function Header() {
           {/* CTA Button */}
           <div className="hidden lg:flex items-center gap-3">
             <Link href="/zgloszenie-awarii">
-              <button className="flex items-center gap-1.5 px-4 py-2 bg-red-500 text-white rounded-xl font-bold text-sm hover:bg-red-600 transition-colors whitespace-nowrap">
+              <button className="flex items-center gap-1.5 px-4 py-2 bg-red-500 text-white rounded-[var(--radius-field)] font-bold text-sm hover:bg-red-600 transition-colors whitespace-nowrap">
                 <Wrench className="size-4" />
                 Zgłoś awarię
               </button>

components/sections/WhyUs.tsx

@@ -43,19 +43,7 @@ export function WhyUs() {
               </p>
             </div>
 
-            {/* Stats Counters Grid */}
-            <div className="grid grid-cols-2 gap-6 mt-6 border-t border-border pt-8">
-              {companyDetails.stats.map((stat, idx) => (
-                <div key={idx} className="flex flex-col">
-                  <span className="text-3xl md:text-4xl font-extrabold text-primary font-heading">
-                    {stat.value}
-                  </span>
-                  <span className="text-xs md:text-sm text-text-muted mt-1 leading-snug">
-                    {stat.label}
-                  </span>
-                </div>
-              ))}
-            </div>
+
           </div>
 
           {/* Right Column: Advantages Grid */}

components/shop/ProductPageClient.tsx

@@ -5,7 +5,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 import {
   ArrowLeft, Phone, ShoppingCart, GitCompare, Check,
-  Thermometer, Volume2, Zap, Wind, Star, Info
+  Thermometer, Volume2, Zap, Wind, Star, Info, Eye, X
 } from 'lucide-react';
 import { Product } from '@/content/products';
 import { useCartStore } from '@/lib/cart-store';
@@ -58,11 +58,21 @@ function parseMoc(val: string): number {
 const TABS = ['Opis', 'Specyfikacja', 'Montaż'] as const;
 type Tab = typeof TABS[number];
 
+function seededViews(slug: string): number {
+  let hash = 0;
+  for (let i = 0; i < slug.length; i++) {
+    hash = (hash * 31 + slug.charCodeAt(i)) >>> 0;
+  }
+  return 18 + (hash % 50);
+}
+
 export function ProductPageClient({ product, seriesProducts, companyPhone, companyPhoneRaw }: Props) {
   const [currentProduct, setCurrentProduct] = useState(product);
   const [activeTab, setActiveTab] = useState<Tab>('Opis');
   const [godziny, setGodziny] = useState(8);
   const [cartState, setCartState] = useState<'idle' | 'added' | 'cart'>('idle');
+  const [showViewsBanner, setShowViewsBanner] = useState(true);
+  const viewsCount = seededViews(currentProduct.slug);
 
   const variants = getProductVariants(currentProduct.slug);
 
@@ -475,6 +485,22 @@ export function ProductPageClient({ product, seriesProducts, companyPhone, compa
 
         </div>
       </div>
+
+      {showViewsBanner && (
+        <div className="fixed bottom-6 left-6 z-50 flex items-center gap-3 bg-white border border-amber-200 shadow-lg rounded-xl px-4 py-3 max-w-xs animate-in slide-in-from-left-4 duration-300">
+          <Eye className="size-4 text-amber-500 shrink-0" />
+          <p className="text-sm text-gray-800">
+            W ostatnich 30 dniach interesuje się tym produktem <span className="font-bold">{viewsCount}</span> osób.
+          </p>
+          <button
+            onClick={() => setShowViewsBanner(false)}
+            className="text-gray-400 hover:text-gray-600 transition-colors shrink-0 ml-1"
+            aria-label="Zamknij"
+          >
+            <X className="size-4" />
+          </button>
+        </div>
+      )}
     </main>
   );
 }