feat: update design elements, add AUX brand logo support and rename blog image

components/sections/BlogPreview.tsx

@@ -1,7 +1,7 @@
 import Link from "next/link";
+import Image from "next/image";
 import { ArrowRight, Calendar, User } from "lucide-react";
 import { SectionHeading } from "../common/SectionHeading";
-import { Placeholder } from "../common/Placeholder";
 import { getLatestPosts } from "@/content/posts";
 
 export function BlogPreview() {
@@ -44,10 +44,13 @@ export function BlogPreview() {
             >
               <div>
                 {/* Thumbnail */}
-                <div className="bg-slate-50 border-b border-border">
-                  <Placeholder
-                    text={`Miniatura artykułu: ${post.title}`}
-                    aspect="video"
+                <div className="relative aspect-video bg-slate-50 border-b border-border">
+                  <Image
+                    src={post.image}
+                    alt={post.title}
+                    fill
+                    className="object-cover"
+                    sizes="(max-width: 768px) 100vw, 33vw"
                   />
                 </div>
 

components/sections/CtaBanner.tsx

@@ -59,21 +59,19 @@ export function CtaBanner({
           </div>
 
           {/* Action buttons */}
-          <div className="flex flex-col sm:flex-row items-center gap-4 mt-8 w-full sm:w-auto shrink-0">
-            <Link href={ctaLink} className="w-full sm:w-auto btn btn-primary font-bold text-white">
-
-                <span>{ctaText}</span>
-                <ArrowRight className="size-5" />
-              
-</Link>
+          <div className="flex flex-col sm:flex-row items-center gap-4 mt-8 w-full sm:w-auto shrink-0 justify-center">
+            <Link href={ctaLink} className="w-fit sm:w-auto btn btn-primary font-bold text-white px-6">
+              <span>{ctaText}</span>
+              <ArrowRight className="size-5" />
+            </Link>
 
             <a
               href={`tel:${companyDetails.phoneRaw}`}
-              className="w-full sm:w-auto"
+              className="w-fit sm:w-auto"
             >
               <button
                 className={cn(
-                  "btn btn-outline btn-primary bg-white w-full sm:w-auto font-bold flex items-center gap-2",
+                  "btn btn-outline btn-primary bg-white w-fit sm:w-auto font-bold flex items-center gap-2 px-6",
                   isPrimary
                     ? "text-white hover:bg-white/20 hover:text-white border-white/30"
                     : "text-primary hover:bg-primary/10 border-primary/20"

components/sections/HeroSection.tsx

@@ -78,16 +78,13 @@ export function HeroSection({
           )}
 
           {/* CTA Buttons */}
-          <div className="mt-10 flex flex-col sm:flex-row items-center gap-4 w-full sm:w-auto">
+          <div className="mt-10 flex flex-col sm:flex-row items-start sm:items-center gap-4 w-full sm:w-auto">
             {ctaText && ctaLink && (
-              <Link href={ctaLink} className="w-full sm:w-auto group btn btn-primary text-white font-bold">
-
-                  <span>{ctaText}</span>
-                  <ArrowRight className="size-5 group-hover:translate-x-1 transition-transform" />
-                
-</Link>
+              <Link href={ctaLink} className="w-fit sm:w-auto group btn btn-primary text-white font-bold px-8">
+                <span>{ctaText}</span>
+                <ArrowRight className="size-5 group-hover:translate-x-1 transition-transform" />
+              </Link>
             )}
-
           </div>
 
 

components/sections/HomeServices.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link";
 import { Wrench, Thermometer, Wind, Zap, Calendar, Phone, Check } from "lucide-react";
 import { companyDetails } from "@/content/company";
+import { buttonClasses } from "../ui/Button";
 
 export function HomeServices() {
   return (
@@ -131,17 +132,13 @@ export function HomeServices() {
                  <h3 className="text-2xl font-bold text-primary font-heading mb-3">Gotowy na świeże powietrze?</h3>
                  <p className="text-sm text-text-muted leading-relaxed">Nasi certyfikowani technicy są dostępni od poniedziałku do soboty. Zarezerwuj termin już dziś, aby uniknąć kolejek w sezonie.</p>
                </div>
-               <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-4 shrink-0 w-full lg:w-auto">
-                 <Link href="/kontakt" className="w-full sm:w-auto flex justify-center items-center gap-2 px-6 py-3.5 bg-accent text-white font-bold text-sm hover:bg-accent/90 transition-colors rounded-xl">
-
-                     Umów serwis <Calendar className="size-4" />
-                   
-</Link>
-                 <a href={`tel:${companyDetails.phoneRaw}`} className="w-full sm:w-auto">
-                   <button className="w-full sm:w-auto flex justify-center items-center gap-2 px-6 py-3.5 bg-white text-primary border border-border font-bold text-sm hover:bg-slate-50 transition-colors rounded-xl">
-                     <Phone className="size-4" /> Zadzwoń do nas
-                   </button>
-                 </a>
+               <div className="flex flex-col sm:flex-row items-center gap-4 shrink-0 w-full lg:w-auto justify-center lg:justify-end">
+                 <Link href="/kontakt" className={buttonClasses({ variant: 'primary', size: 'md' }) + ' w-fit sm:w-auto'}>
+                   Umów serwis <Calendar className="size-4" />
+                 </Link>
+                 <Link href={`tel:${companyDetails.phoneRaw}`} className={buttonClasses({ variant: 'outline-light', size: 'md' }) + ' w-fit sm:w-auto'}>
+                   <Phone className="size-4" /> Zadzwoń do nas
+                 </Link>
                </div>
             </div>
 

components/sections/PricingTable.tsx

@@ -80,8 +80,8 @@ export const PricingTable = () => {
             </ul>
           </div>
           
-          <div className="md:w-64 shrink-0 flex flex-col gap-4">
-            <a href="/pdf/cennik-thermcool-2026.pdf" target="_blank" rel="noopener noreferrer" className="btn btn-outline btn-primary bg-white w-full justify-between group flex items-center px-4 py-2 border rounded-lg hover:bg-gray-50 text-sm font-semibold text-primary">
+          <div className="w-full md:w-64 shrink-0 flex flex-col items-center md:items-stretch gap-4">
+            <a href="/pdf/cennik-thermcool-2026.pdf" target="_blank" rel="noopener noreferrer" className="btn btn-outline btn-primary bg-white w-fit md:w-full justify-between group flex items-center px-6 py-2 border rounded-lg hover:bg-gray-50 text-sm font-semibold text-primary">
               Pobierz cennik PDF
               <Download className="w-4 h-4 ml-2 group-hover:-translate-y-1 transition-transform" />
             </a>

components/shop/ProductCard.tsx

@@ -19,6 +19,8 @@ const brandLogos: Record<string, string> = {
   'Samsung': '/brands/samsung.webp',
   'Mitsubishi Electric': '/brands/mitsubishi.webp',
   'Fuji Electric': '/brands/fuji.webp',
+  'Aux': '/brands/aux-brand.webp',
+  'AUX': '/brands/aux-brand.webp',
 };
 
 interface ProductCardProps {

components/shop/ProductPageClient.tsx

@@ -23,6 +23,8 @@ const brandLogos: Record<string, string> = {
   'Samsung': '/brands/samsung.webp',
   'Mitsubishi Electric': '/brands/mitsubishi.webp',
   'Fuji Electric': '/brands/fuji.webp',
+  'Aux': '/brands/aux-brand.webp',
+  'AUX': '/brands/aux-brand.webp',
 };
 
 interface Props {
@@ -492,15 +494,9 @@ export function ProductPageClient({ product, seriesProducts, companyPhone, compa
                       <Star key={star} className="size-6 text-amber-400 cursor-pointer fill-amber-400 hover:scale-110 transition-transform" />
                     ))}
                   </div>
-                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                    <div className="space-y-1.5">
-                      <label className="text-sm font-semibold text-primary">Imię</label>
-                      <input type="text" required className="w-full px-4 py-2.5 rounded-xl border border-border bg-white text-sm focus:outline-none focus:ring-2 focus:ring-accent/50" placeholder="Twoje imię" />
-                    </div>
-                    <div className="space-y-1.5">
-                      <label className="text-sm font-semibold text-primary">Email</label>
-                      <input type="email" required className="w-full px-4 py-2.5 rounded-xl border border-border bg-white text-sm focus:outline-none focus:ring-2 focus:ring-accent/50" placeholder="twó[email protected]" />
-                    </div>
+                  <div className="space-y-1.5">
+                    <label className="text-sm font-semibold text-primary">Imię</label>
+                    <input type="text" required className="w-full px-4 py-2.5 rounded-xl border border-border bg-white text-sm focus:outline-none focus:ring-2 focus:ring-accent/50" placeholder="Twoje imię" />
                   </div>
                   <div className="space-y-1.5">
                     <label className="text-sm font-semibold text-primary">Treść opinii</label>

components/ui/Button.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { cn } from '@/lib/utils';
 
-export type ButtonVariant = 'primary' | 'outline' | 'error';
+export type ButtonVariant = 'primary' | 'outline' | 'error' | 'outline-light';
 export type ButtonSize = 'sm' | 'md' | 'lg';
 
 export interface ButtonClassesProps {
@@ -16,6 +16,7 @@ export function buttonClasses({ variant = 'primary', size = 'md', className }: B
   const variantClasses = {
     primary: 'btn btn-primary text-white font-bold',
     outline: 'btn bg-white/10 text-white border border-white/20 hover:bg-white/20 font-bold',
+    'outline-light': 'btn bg-white text-primary border border-border hover:bg-slate-50 font-bold',
     error: 'btn btn-error text-white font-bold',
   };