Initialize repo

components/about.tsx

@@ -0,0 +1,56 @@
+import { Shield, Baby, Car, Flame } from "lucide-react";
+
+const features = [
+  { icon: Shield, label: "Teren ogrodzony i bezpieczny" },
+  { icon: Baby, label: "Plac zabaw dla dzieci" },
+  { icon: Flame, label: "Miejsce na ognisko i grill" },
+];
+
+export function About() {
+  return (
+    <section id="about" className="py-24 bg-background">
+      <div className="container mx-auto px-6">
+        <div className="max-w-6xl mx-auto">
+          <div className="grid lg:grid-cols-2 gap-16 items-center">
+            <div>
+              <p className="text-primary uppercase tracking-[0.2em] text-sm font-medium mb-4">
+                O naszym obiekcie
+              </p>
+              
+              <div className="space-y-6 text-muted-foreground leading-relaxed">
+                <p>
+                  Ośrodek jest położony w cichym, spokojnym miejscu 450 m od morza i 900 m od jeziora Resko. Oferujemy domki letniskowe oraz pokoje, w pełni wyposażone z łazienkami.
+                </p>
+                <p>
+                  Teren obiektu jest ogrodzony i bezpieczny. Na terenie obiektu jest plac zabaw dla dzieci (huśtawki, piaskownica, itd.) jest również możliwość parkowania samochodu.
+                </p>
+                <p>
+                  Zadbaliśmy też o wydzielone miejsce na ognisko lub grill. Zapewniamy miłą i rodzinną atmosferę!
+                </p>
+              </div>
+            </div>
+            
+            <div className="bg-secondary rounded-2xl p-8">
+              <h3 className="font-serif text-xl font-semibold text-foreground mb-6">
+                Udogodnienia na terenie
+              </h3>
+              <div className="grid gap-4">
+                {features.map((feature) => (
+                  <div
+                    key={feature.label}
+                    className="flex items-center gap-4 p-4 bg-card rounded-xl transition-all hover:shadow-sm"
+                  >
+                    <div className="w-12 h-12 rounded-full bg-accent/50 flex items-center justify-center shrink-0">
+                      <feature.icon className="w-5 h-5 text-primary" />
+                    </div>
+                    <span className="text-foreground font-medium">{feature.label}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}