fix: linting cleanup, TS errors, mobile cookie banner and hero max-width

components/sections/AboutStory.tsx

@@ -12,7 +12,7 @@ export function AboutStory() {
         <div className="relative">
           <div className="relative aspect-[4/5] rounded-3xl overflow-hidden shadow-2xl">
             <Image
-              src="https://images.unsplash.com/photo-1621905251189-08b45d6a269e?w=800&q=80"
+              src="/images/about/about-story.webp"
               alt="Zespół firmy w trakcie pracy"
               fill
               className="object-cover"

components/sections/AcTypesSection.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Link from 'next/link';
 import Image from 'next/image';
-import { Wind, LayoutGrid, Sparkles, ArrowRight } from 'lucide-react';
+import { Wind, LayoutGrid, ArrowRight } from 'lucide-react';
 
 import { cn } from '@/lib/utils';
 

components/sections/AdvantagesBar.tsx

@@ -1,4 +1,4 @@
-import { CheckCircle2, Zap, ShieldCheck, Banknote } from "lucide-react";
+import { CheckCircle2, Zap, ShieldCheck } from "lucide-react";
 
 export function AdvantagesBar() {
   const advantages = [

components/sections/BlogPreview.tsx

@@ -1,6 +1,6 @@
 import Link from "next/link";
 import Image from "next/image";
-import { ArrowRight, Calendar, User } from "lucide-react";
+import { ArrowRight, Calendar } from "lucide-react";
 import { SectionHeading } from "../common/SectionHeading";
 import { getLatestPosts } from "@/content/posts";
 

components/sections/BrandsGrid.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Image from 'next/image';
+
 import Link from 'next/link';
 
 const brands = [

components/sections/CertificatesSection.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Image from 'next/image';
+
 import { SectionHeading } from '../common/SectionHeading';
 import { companyDetails } from '@/content/company';
 

components/sections/FeaturedPost.tsx

@@ -32,7 +32,7 @@ export function FeaturedPost({ post }: FeaturedPostProps) {
         {/* Obraz */}
         <div className="relative w-full md:w-3/5 aspect-video md:aspect-auto md:min-h-[400px]">
           <Image
-            src={post.image || 'https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=1200&q=80'}
+            src={post.image || '/images/hero/hero-section-image.webp'}
             alt={post.title}
             fill
             className="object-cover transition-transform duration-700 group-hover:scale-105"

components/sections/FundingSection.tsx

@@ -68,7 +68,7 @@ export const FundingSection = () => {
                   <span className="font-semibold text-gray-900">45 000 zł</span>
                 </div>
                 <div className="flex justify-between pb-4 border-b border-gray-100 text-green-600 font-medium">
-                  <span>Dotacja "Czyste Powietrze"</span>
+                  <span>Dotacja &quot;Czyste Powietrze&quot;</span>
                   <span>- 20 500 zł</span>
                 </div>
                 <div className="flex justify-between pb-4 border-b border-gray-100 text-green-600 font-medium">

components/sections/HeroSection.tsx

@@ -31,7 +31,7 @@ export function HeroSection({
   features
 }: HeroSectionProps = {}) {
   return (
-    <section className="relative bg-primary min-h-[480px] md:min-h-[600px] flex items-center overflow-hidden">
+    <section className="relative bg-primary min-h-[480px] md:min-h-[600px] flex items-center overflow-hidden max-w-[2560px] mx-auto">
       {/* TODO ZDJĘCIE HERO: realne zdjęcie firmy/montażu, format poziomy min. 1920×1080, plik public/hero.jpg */}
       <Image
         src={backgroundImage}
@@ -85,6 +85,11 @@ export function HeroSection({
                 <ArrowRight className="size-5 group-hover:translate-x-1 transition-transform" />
               </Link>
             )}
+            {secondaryCtaText && secondaryCtaLink && (
+              <Link href={secondaryCtaLink} className="w-fit sm:w-auto btn btn-outline bg-white/10 text-white border-white/20 hover:bg-white hover:text-primary font-bold px-8">
+                <span>{secondaryCtaText}</span>
+              </Link>
+            )}
           </div>
 
 

components/sections/PillarsSection.tsx

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { ThermometerSun, Home, ChevronRight, Wrench, ShieldCheck, ArrowRight } from "lucide-react";
+import { ThermometerSun, Home, ChevronRight, ArrowRight } from "lucide-react";
 
 export function PillarsSection() {
   return (

components/sections/PostsGrid.tsx

@@ -88,7 +88,7 @@ export function PostsGrid({ posts, featuredPost }: PostsGridProps) {
             >
               <Link href={`/blog/${post.slug}`} className="relative aspect-[16/10] overflow-hidden">
                 <Image
-                  src={post.image || 'https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=800&q=80'}
+                  src={post.image || '/images/hero/hero-section-image.webp'}
                   alt={post.title}
                   fill
                   className="object-cover transition-transform duration-700 group-hover:scale-105"

components/sections/PricingTable.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { pricingData, PricingItem } from '@/content/pricing';
-import { Check, Info, ArrowRight, Download } from 'lucide-react';
+import { Check, Download } from 'lucide-react';
 
 export const PricingTable = () => {
   const splitItems = pricingData.filter((item) => item.category === 'split');

components/sections/ProjectsGrid.tsx

@@ -2,10 +2,10 @@
 
 import React, { useState } from 'react';
 import Image from 'next/image';
-import Link from 'next/link';
+
 import { projectsData, Project } from '@/content/projects';
 import { cn } from '@/lib/utils';
-import { MapPin, ArrowRight } from 'lucide-react';
+import { MapPin } from 'lucide-react';
 
 type Category = 'wszystkie' | Project['category'];
 

components/sections/Testimonials.tsx

@@ -63,7 +63,7 @@ export function Testimonials() {
                     <Star key={j} className="size-4 fill-yellow-400 text-yellow-400" />
                   ))}
                 </div>
-                <p className="text-sm text-text-muted leading-relaxed flex-1">"{t.text}"</p>
+                <p className="text-sm text-text-muted leading-relaxed flex-1">&quot;{t.text}&quot;</p>
                 <div className="pt-3 border-t border-border">
                   <p className="text-sm font-bold text-primary">{t.name}</p>
                   <p className="text-xs text-text-muted">{t.city}</p>