ss
This commit is contained in:
mstfyldz
@@ -0,0 +1,162 @@
|
||||
import Link from "next/link";
|
||||
import { MapPin, Phone, Mail } from "lucide-react";
|
||||
|
||||
const quickLinks = [
|
||||
{ name: "Ana Sayfa", href: "/" },
|
||||
{ name: "Odalar", href: "/odalar" },
|
||||
{ name: "Aktiviteler", href: "/aktiviteler"},
|
||||
{ name: "Restoran", href: "/restoran" },
|
||||
{ name: "Etkinlikler", href: "/etkinlikler"},
|
||||
{ name: "Galeri", href: "/galeri" },
|
||||
{ name: "Hakkımızda", href: "/hakkimizda" },
|
||||
];
|
||||
|
||||
function InstagramIcon() {
|
||||
return (
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<rect width="20" height="20" x="2" y="2" rx="5" ry="5"/>
|
||||
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/>
|
||||
<line x1="17.5" x2="17.51" y1="6.5" y2="6.5"/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function FacebookIcon() {
|
||||
return (
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function YoutubeIcon() {
|
||||
return (
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17"/>
|
||||
<path d="m10 15 5-3-5-3z"/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="bg-dark text-white">
|
||||
{/* Top accent line */}
|
||||
<div className="h-px bg-gradient-to-r from-transparent via-accent to-transparent opacity-40" />
|
||||
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-16 pb-10">
|
||||
<div className="grid grid-cols-1 md:grid-cols-12 gap-12 mb-12">
|
||||
|
||||
{/* Brand */}
|
||||
<div className="md:col-span-4">
|
||||
<Link href="/" className="inline-block mb-5">
|
||||
<div>
|
||||
<span className="font-serif text-2xl font-bold tracking-[0.08em] text-white block">
|
||||
KITE BEACH
|
||||
</span>
|
||||
<span className="text-[9px] tracking-[0.3em] text-white/30 uppercase">Akyaka</span>
|
||||
</div>
|
||||
</Link>
|
||||
<p className="text-white/40 text-[13px] leading-relaxed mb-7 max-w-xs">
|
||||
Nehrin huzuru, denizin enerjisi — tek bir noktada. Akyaka'nın kalbinde butik bir kaçış noktası.
|
||||
</p>
|
||||
{/* Social icons */}
|
||||
<div className="flex gap-3">
|
||||
{[
|
||||
{ icon: <InstagramIcon />, href: "#", label: "Instagram" },
|
||||
{ icon: <FacebookIcon />, href: "#", label: "Facebook" },
|
||||
{ icon: <YoutubeIcon />, href: "#", label: "YouTube" },
|
||||
].map(({ icon, href, label }) => (
|
||||
<a
|
||||
key={label}
|
||||
href={href}
|
||||
aria-label={label}
|
||||
className="w-9 h-9 rounded-full border border-white/10 flex items-center justify-center text-white/40 hover:text-accent hover:border-accent/40 transition-all duration-300"
|
||||
>
|
||||
{icon}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Links */}
|
||||
<div className="md:col-span-3">
|
||||
<h3 className="text-[11px] font-bold tracking-[0.25em] text-white/30 uppercase mb-6">
|
||||
Sayfalar
|
||||
</h3>
|
||||
<ul className="space-y-3">
|
||||
{quickLinks.map((link) => (
|
||||
<li key={link.name}>
|
||||
<Link
|
||||
href={link.href}
|
||||
className="text-[13px] text-white/50 hover:text-white transition-colors"
|
||||
>
|
||||
{link.name}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Contact */}
|
||||
<div className="md:col-span-5">
|
||||
<h3 className="text-[11px] font-bold tracking-[0.25em] text-white/30 uppercase mb-6">
|
||||
İletişim
|
||||
</h3>
|
||||
<ul className="space-y-5">
|
||||
<li className="flex items-start gap-3">
|
||||
<div className="mt-0.5 w-7 h-7 rounded-full bg-white/5 flex items-center justify-center flex-shrink-0">
|
||||
<MapPin size={13} className="text-accent" />
|
||||
</div>
|
||||
<span className="text-white/50 text-[13px] leading-relaxed">
|
||||
Akyaka Mahallesi, Akçapınar Mevkii<br />Muğla, Türkiye
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<div className="w-7 h-7 rounded-full bg-white/5 flex items-center justify-center flex-shrink-0">
|
||||
<Phone size={13} className="text-accent" />
|
||||
</div>
|
||||
<a
|
||||
href="tel:+905330816181"
|
||||
className="text-white/50 hover:text-white transition-colors text-[13px]"
|
||||
>
|
||||
+90 533 081 6181
|
||||
</a>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<div className="w-7 h-7 rounded-full bg-white/5 flex items-center justify-center flex-shrink-0">
|
||||
<Mail size={13} className="text-accent" />
|
||||
</div>
|
||||
<a
|
||||
href="mailto:info@kitebeachakyaka.com.tr"
|
||||
className="text-white/50 hover:text-white transition-colors text-[13px]"
|
||||
>
|
||||
info@kitebeachakyaka.com.tr
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Bottom bar */}
|
||||
<div className="border-t border-white/8 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
|
||||
<p className="text-white/25 text-xs">
|
||||
© 2026 Kite Beach Akyaka. Tüm hakları saklıdır.
|
||||
</p>
|
||||
<div className="flex gap-6">
|
||||
{["KVKK", "Gizlilik Politikası", "Çerez Politikası"].map((item) => (
|
||||
<Link
|
||||
key={item}
|
||||
href="#"
|
||||
className="text-white/25 hover:text-white/60 transition-colors text-xs"
|
||||
>
|
||||
{item}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Image from "next/image";
|
||||
|
||||
export default function HeroVideo() {
|
||||
const [isVideoLoaded, setIsVideoLoaded] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="absolute inset-0 z-0 bg-dark overflow-hidden pointer-events-none">
|
||||
<Image
|
||||
src="https://img.youtube.com/vi/V9AhK54xsxY/maxresdefault.jpg"
|
||||
alt="Kite Beach Akyaka Video Thumbnail"
|
||||
fill
|
||||
className={`object-cover transition-opacity duration-1000 ease-in-out ${
|
||||
isVideoLoaded ? "opacity-0" : "opacity-80"
|
||||
}`}
|
||||
priority
|
||||
/>
|
||||
<iframe
|
||||
src="https://www.youtube.com/embed/V9AhK54xsxY?autoplay=1&mute=1&loop=1&playlist=V9AhK54xsxY&controls=0&showinfo=0&rel=0&iv_load_policy=3&modestbranding=1&start=140&disablekb=1"
|
||||
title="Kite Beach Akyaka Video"
|
||||
frameBorder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen
|
||||
onLoad={() => {
|
||||
// Add a slight delay to ensure the video has actually started rendering
|
||||
setTimeout(() => setIsVideoLoaded(true), 1500);
|
||||
}}
|
||||
className={`absolute top-1/2 left-1/2 w-[100vw] h-[56.25vw] min-h-[100vh] min-w-[177.77vh] -translate-x-1/2 -translate-y-1/2 object-cover transition-opacity duration-1000 ${
|
||||
isVideoLoaded ? "opacity-80" : "opacity-0"
|
||||
}`}
|
||||
></iframe>
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-black/40 via-transparent to-dark/90" />
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-dark/30 to-transparent" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,151 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { Menu, X } from "lucide-react";
|
||||
|
||||
const navLinks = [
|
||||
// { name: "Odalar", href: "/odalar" },
|
||||
{ name: "Aktiviteler",href: "/aktiviteler"},
|
||||
{ name: "Restoran", href: "/restoran" },
|
||||
{ name: "Etkinlikler",href: "/etkinlikler"},
|
||||
{ name: "Galeri", href: "/galeri" },
|
||||
{ name: "Hakkımızda", href: "/hakkimizda" },
|
||||
{ name: "İletişim", href: "/iletisim" },
|
||||
];
|
||||
|
||||
export default function Navbar() {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [scrolled, setScrolled] = useState(false);
|
||||
const pathname = usePathname();
|
||||
|
||||
useEffect(() => {
|
||||
const onScroll = () => setScrolled(window.scrollY > 60);
|
||||
window.addEventListener("scroll", onScroll, { passive: true });
|
||||
return () => window.removeEventListener("scroll", onScroll);
|
||||
}, []);
|
||||
|
||||
useEffect(() => { setIsOpen(false); }, [pathname]);
|
||||
|
||||
const isHome = pathname === "/";
|
||||
|
||||
return (
|
||||
<nav
|
||||
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 ${
|
||||
scrolled
|
||||
? "bg-white/95 backdrop-blur-md shadow-sm py-4"
|
||||
: "bg-transparent py-6"
|
||||
}`}
|
||||
>
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex justify-between items-center">
|
||||
|
||||
{/* Logo */}
|
||||
<Link href="/" className="flex-shrink-0 flex flex-col leading-none group">
|
||||
<span
|
||||
className={`font-serif text-xl font-bold tracking-[0.08em] transition-colors ${
|
||||
scrolled ? "text-primary" : isHome ? "text-white" : "text-primary"
|
||||
}`}
|
||||
>
|
||||
KITE BEACH
|
||||
</span>
|
||||
<span
|
||||
className={`text-[9px] tracking-[0.3em] uppercase font-medium transition-colors ${
|
||||
scrolled ? "text-muted" : isHome ? "text-white/50" : "text-muted"
|
||||
}`}
|
||||
>
|
||||
Akyaka
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
{/* Desktop links */}
|
||||
<div className="hidden md:flex md:items-center md:gap-8">
|
||||
{navLinks.map((link) => {
|
||||
const active = pathname === link.href;
|
||||
return (
|
||||
<Link
|
||||
key={link.name}
|
||||
href={link.href}
|
||||
className={`text-[13px] font-medium transition-colors relative group ${
|
||||
scrolled
|
||||
? active ? "text-primary" : "text-foreground hover:text-primary"
|
||||
: isHome
|
||||
? active ? "text-accent" : "text-white/85 hover:text-white"
|
||||
: active ? "text-primary" : "text-foreground hover:text-primary"
|
||||
}`}
|
||||
>
|
||||
{link.name}
|
||||
<span
|
||||
className={`absolute -bottom-0.5 left-0 h-px bg-current transition-all duration-300 ${
|
||||
active ? "w-full" : "w-0 group-hover:w-full"
|
||||
}`}
|
||||
/>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
|
||||
<Link
|
||||
href="/iletisim"
|
||||
className="btn-shimmer bg-accent text-white px-6 py-2.5 rounded-full text-[11px] font-bold tracking-[0.12em] uppercase hover:bg-accent/90 transition-colors shadow-md"
|
||||
>
|
||||
Rezervasyon
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Mobile toggle */}
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className={`flex md:hidden p-1 transition-colors ${
|
||||
scrolled ? "text-dark" : isHome ? "text-white" : "text-dark"
|
||||
}`}
|
||||
aria-label="Menü"
|
||||
>
|
||||
{isOpen ? <X size={26} /> : <Menu size={26} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
<AnimatePresence>
|
||||
{isOpen && (
|
||||
<motion.div
|
||||
key="mobile-menu"
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: "auto" }}
|
||||
exit={{ opacity: 0, height: 0 }}
|
||||
transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="md:hidden overflow-hidden bg-white border-t border-sand"
|
||||
>
|
||||
<div className="px-5 py-5 flex flex-col gap-1">
|
||||
{navLinks.map((link, i) => (
|
||||
<motion.div
|
||||
key={link.name}
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: i * 0.05 }}
|
||||
>
|
||||
<Link
|
||||
href={link.href}
|
||||
className={`block py-3 text-base font-medium border-b border-sand/60 transition-colors ${
|
||||
pathname === link.href ? "text-primary" : "text-dark hover:text-primary"
|
||||
}`}
|
||||
>
|
||||
{link.name}
|
||||
</Link>
|
||||
</motion.div>
|
||||
))}
|
||||
<Link
|
||||
href="/iletisim"
|
||||
className="mt-4 block w-full text-center bg-accent text-white px-6 py-3.5 rounded-full text-sm font-bold uppercase tracking-wider"
|
||||
>
|
||||
Rezervasyon Yap
|
||||
</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef } from "react";
|
||||
|
||||
interface ScrollRevealProps {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
stagger?: boolean;
|
||||
delay?: number;
|
||||
threshold?: number;
|
||||
}
|
||||
|
||||
export default function ScrollReveal({
|
||||
children,
|
||||
className = "",
|
||||
stagger = false,
|
||||
delay = 0,
|
||||
threshold = 0.12,
|
||||
}: ScrollRevealProps) {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
const trigger = () => el.classList.add("visible");
|
||||
delay > 0 ? setTimeout(trigger, delay) : trigger();
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
},
|
||||
{ threshold }
|
||||
);
|
||||
|
||||
observer.observe(el);
|
||||
return () => observer.disconnect();
|
||||
}, [delay, threshold]);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={`${stagger ? "reveal-stagger" : "reveal"} ${className}`}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
"use client";
|
||||
|
||||
import { MessageCircle } from "lucide-react";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
export default function WhatsAppButton() {
|
||||
return (
|
||||
<motion.a
|
||||
href="https://wa.me/905330816181"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="fixed bottom-6 right-6 z-50 flex items-center justify-center w-14 h-14 bg-green-500 text-white rounded-full shadow-lg hover:shadow-2xl hover:bg-green-600 transition-all focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
|
||||
aria-label="WhatsApp üzerinden bizimle iletişime geçin"
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{
|
||||
type: "spring",
|
||||
stiffness: 260,
|
||||
damping: 20,
|
||||
delay: 1
|
||||
}}
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
>
|
||||
<MessageCircle size={28} />
|
||||
</motion.a>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user