Initialize repo

2026-02-02 13:44:55 +01:00
commit 704edb6ae0
149 changed files with 12373 additions and 0 deletions
--- a/components/hero.tsx
+++ b/components/hero.tsx
@@ -0,0 +1,117 @@
+"use client";
+
+import { MapPin, Waves } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { motion, useScroll, useTransform } from "framer-motion";
+import { useRef } from "react";
+
+export function Hero() {
+  const ref = useRef(null);
+  const { scrollYProgress } = useScroll({
+    target: ref,
+    offset: ["start start", "end start"],
+  });
+
+  const y = useTransform(scrollYProgress, [0, 1], ["0%", "50%"]);
+  const textY = useTransform(scrollYProgress, [0, 1], ["0%", "20%"]);
+  const opacity = useTransform(scrollYProgress, [0, 0.8], [1, 0]);
+
+  return (
+    <section ref={ref} className="relative min-h-screen flex items-center justify-center pt-20 overflow-hidden">
+      <motion.div 
+        style={{ y, opacity, scale: 1.1 }}
+        className="absolute inset-0 bg-[url('/sloneczko.webp')] bg-cover bg-center" 
+      />
+      <div className="absolute inset-0 bg-black/60" />
+      
+      <motion.div 
+        style={{ y: textY }}
+        className="relative z-10 container mx-auto px-6 py-20 text-center"
+      >
+        <div className="max-w-4xl mx-auto">
+          <motion.p 
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.2 }}
+            className="text-primary-foreground/80 uppercase tracking-[0.3em] text-sm mb-6"
+          >
+            Dźwirzyno • Polskie Wybrzeże
+          </motion.p>
+          
+          <motion.h1 
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.4 }}
+            className="font-serif text-5xl md:text-7xl lg:text-8xl font-bold text-primary-foreground mb-6 leading-tight text-balance"
+          >
+            Domki Letniskowe{" "}
+            <span className="block text-accent">SŁONECZKO</span>
+          </motion.h1>
+          
+          <motion.p 
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.6 }}
+            className="text-xl md:text-2xl text-primary-foreground/90 mb-10 max-w-2xl mx-auto leading-relaxed"
+          >
+            Spokojny wypoczynek nad Bałtykiem w otoczeniu natury
+          </motion.p>
+          
+          <motion.div 
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.8 }}
+            className="flex flex-wrap gap-6 justify-center mb-12"
+          >
+            <div className="flex items-center gap-2 text-primary-foreground/80">
+              <MapPin className="w-5 h-5 text-accent" />
+              <span>450m od morza</span>
+            </div>
+            <div className="flex items-center gap-2 text-primary-foreground/80">
+              <Waves className="w-5 h-5 text-accent" />
+              <span>900m od jeziora Resko</span>
+            </div>
+          </motion.div>
+          
+          <motion.div 
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 1 }}
+            className="flex flex-col sm:flex-row gap-4 justify-center"
+          >
+            <Button
+              asChild
+              size="lg"
+              className="bg-primary text-primary-foreground hover:bg-primary/90 px-8 py-6 text-base"
+            >
+              <a href="tel:+48664786167">Zadzwoń</a>
+            </Button>
+            <Button
+              asChild
+              variant="outline"
+              size="lg"
+              className="border-primary-foreground/30 text-primary-foreground hover:bg-primary-foreground/10 px-8 py-6 text-base bg-transparent backdrop-blur-sm"
+            >
+              <a href="#pricing">Zobacz cennik</a>
+            </Button>
+          </motion.div>
+        </div>
+      </motion.div>
+      
+      <motion.div 
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ delay: 2, duration: 1 }}
+        className="absolute bottom-8 left-1/2 -translate-x-1/2"
+      >
+        <div className="w-6 h-10 border-2 border-primary-foreground/50 rounded-full flex items-start justify-center p-2">
+          <motion.div 
+            animate={{ y: [0, 12, 0] }}
+            transition={{ repeat: Infinity, duration: 1.5, ease: "easeInOut" }}
+            className="w-1 h-2 bg-primary-foreground/50 rounded-full" 
+          />
+        </div>
+      </motion.div>
+    </section>
+  );
+}