Initialize repo

components/location.tsx

@@ -0,0 +1,103 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { MapPin } from "lucide-react";
+
+const attractions = [
+  "Port rybacki i przystań nad jeziorem",
+  "Rejsy stateczkiem wycieczkowym",
+  "Wypożyczalnia sprzętu pływającego",
+  "Szlaki turystyczne i rowerowe",
+  "Ścieżka zdrowia w lasku sosnowym",
+  "Idealne warunki do sportów wodnych",
+];
+
+export function Location() {
+  return (
+    <section id="location" className="py-24 bg-background">
+      <div className="container mx-auto px-6">
+        <div className="text-center mb-16">
+          <p className="text-primary uppercase tracking-[0.2em] text-sm font-medium mb-4">
+            Lokalizacja
+          </p>
+          <h2 className="font-serif text-4xl md:text-5xl font-bold text-foreground">
+            Dźwirzyno
+          </h2>
+        </div>
+
+        <div className="grid lg:grid-cols-2 gap-12 max-w-6xl mx-auto">
+          <div>
+            <p className="text-muted-foreground leading-relaxed mb-6">
+              Dźwirzyno jest małym, spokojnym letniskiem i uzdrowiskiem usytuowanym tuż nad brzegiem Bałtyku, na zachodnim wybrzeżu, w gminie Kołobrzeg.
+            </p>
+            <p className="text-muted-foreground leading-relaxed mb-6">
+              Turystyczne i rekreacyjne walory Dźwirzyna wynikają głównie z jego atrakcyjnego położenia - tuż nad brzegiem Bałtyku i jednocześnie blisko jeziora Resko Przymorskie.
+            </p>
+            <p className="text-muted-foreground leading-relaxed mb-8">
+              Nadbałtycka plaża w Dźwirzynie jest piaszczysta i szeroka, z wydzielonym strzeżonym latem kąpieliskiem, a od lądu oddzielają ją malownicze wydmy z lasem sosnowym.
+            </p>
+
+            <div className="bg-secondary rounded-2xl p-6">
+              <h4 className="font-serif font-semibold text-foreground mb-4">
+                Atrakcje w okolicy
+              </h4>
+              <ul className="space-y-3">
+                {attractions.map((attraction) => (
+                  <li
+                    key={attraction}
+                    className="flex items-center gap-3 text-muted-foreground text-sm"
+                  >
+                    <span className="w-1.5 h-1.5 rounded-full bg-primary shrink-0" />
+                    {attraction}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+
+          <div>
+            <Card className="bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm overflow-hidden">
+              <div data-slot="card-header" className="@container/card-header has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6">
+                <div data-slot="card-title" className="font-semibold leading-none flex items-center space-x-2">
+                  <MapPin className="w-5 h-5" />
+                  <span>Jak do nas dojechać</span>
+                </div>
+              </div>
+              <div data-slot="card-content" className="px-6">
+                <div className="space-y-4">
+                  <div>
+                    <iframe 
+                      title="mapa do dojazdu" 
+                      src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d982.277750011523!2d15.409488121318219!3d54.15769800054639!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47001337971faad3%3A0x8a2d70122a7ab742!2sPiastowska%209%2C%2078-133%20D%C5%BAwirzyno!5e0!3m2!1spl!2spl!4v1752078233886!5m2!1spl!2spl" 
+                      style={{ border: 0 }} 
+                      loading="lazy" 
+                      referrerPolicy="no-referrer-when-downgrade" 
+                      className="w-full h-64 rounded-md"
+                    />
+                  </div>
+                  <div>
+                    <p className="font-medium text-foreground">Adres:</p> 
+                    <p className="text-muted-foreground">Piastowska 9, Dźwirzyno</p>
+                  </div>
+                  <div>
+                    <p className="font-medium text-foreground">Odległości:</p>
+                    <ul className="text-sm text-muted-foreground space-y-1 mt-1">
+                      <li>• Morze Bałtyckie: 450m</li> 
+                      <li>• Jezioro Resko: 900m</li> 
+                      <li>• Kołobrzeg: ~10km</li> 
+                      <li>• Mrzeżyno: ~7km</li> 
+                      <li>• Grzybowo: ~5km</li>
+                    </ul>
+                  </div>
+                  <div className="bg-green-50 p-3 rounded-lg border border-green-100 dark:bg-green-900/20 dark:border-green-800">
+                    <p className="text-sm text-green-800 dark:text-green-300">
+                      <strong>Mikroklimat</strong> polecany w leczeniu dróg oddechowych
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </Card>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}