feat: complete website implementation

components/sections/BrandsGrid.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import Image from 'next/image';
+
+const brands = [
+  { name: 'Daikin', logo: '/brands/daikin.svg' }, // Placeholders, we will just show text if image fails or use a generic box
+  { name: 'Mitsubishi', logo: '/brands/mitsubishi.svg' },
+  { name: 'Gree', logo: '/brands/gree.svg' },
+  { name: 'Rotenso', logo: '/brands/rotenso.svg' },
+  { name: 'LG', logo: '/brands/lg.svg' },
+  { name: 'Samsung', logo: '/brands/samsung.svg' },
+  { name: 'Panasonic', logo: '/brands/panasonic.svg' },
+  { name: 'Aux', logo: '/brands/aux.svg' },
+];
+
+export const BrandsGrid = () => {
+  return (
+    <section className="py-16 bg-white border-t border-gray-100">
+      <div className="container mx-auto px-4 md:px-8 max-w-7xl text-center">
+        <h3 className="text-xl font-semibold text-gray-500 mb-8 uppercase tracking-wider text-sm">
+          Autoryzowany partner czołowych producentów
+        </h3>
+        
+        <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-6 items-center opacity-60 grayscale hover:grayscale-0 transition-all duration-500">
+          {brands.map((brand, idx) => (
+            <div key={idx} className="flex justify-center items-center h-16 bg-gray-50 rounded-lg p-3 hover:bg-gray-100 transition-colors">
+              {/* Fallback to text for placeholder since we don't have images */}
+              <span className="font-bold text-gray-600 text-lg tracking-tight">{brand.name}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};