118 lines
4.4 KiB
TypeScript
118 lines
4.4 KiB
TypeScript
"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>
|
|
);
|
|
}
|