fix: activate all broken buttons and links across the site with WhatsApp integration
This commit is contained in:
@@ -1,3 +1,5 @@
|
||||
'use client';
|
||||
|
||||
import { Navbar } from "@/components/Navbar";
|
||||
import { Footer } from "@/components/Footer";
|
||||
import { FloatingWhatsApp } from "@/components/FloatingWhatsApp";
|
||||
@@ -5,14 +7,7 @@ import { CTASection } from "@/components/CTASection";
|
||||
import { Settings, ArrowUp, Truck, Compass, ArrowRight, Shield, Zap, Clock } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Metadata } from "next";
|
||||
import { SERVICES } from "@/lib/data";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Muğla Vinç Kiralama ve Ağır Nakliyat Hizmetleri",
|
||||
description: "Dalaman merkezli 500 tona kadar mobil vinç kiralama, sepetli platform, ağır nakliyat ve proje taşımacılığı. Ege Bölgesi ve Türkiye geneli profesyonel çözümler.",
|
||||
keywords: ["muğla vinç kiralama", "dalaman vinç kiralama", "sepetli platform", "ağır nakliyat muğla", "proje taşımacılığı", "fethiye vinç", "ortaca vinç"],
|
||||
};
|
||||
import { SERVICES, siteConfig } from "@/lib/data";
|
||||
|
||||
const FEATURES = [
|
||||
{
|
||||
@@ -43,6 +38,11 @@ const STATS = [
|
||||
];
|
||||
|
||||
export default function ServicesPage() {
|
||||
const handleWhatsApp = (serviceTitle: string) => {
|
||||
const message = encodeURIComponent(`Merhaba, ${serviceTitle} hizmetiniz hakkında bilgi ve teklif almak istiyorum.`);
|
||||
window.open(`https://wa.me/${siteConfig.contact.whatsapp}?text=${message}`, '_blank');
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="relative min-h-screen flex flex-col bg-background selection:bg-primary selection:text-on-primary">
|
||||
<Navbar />
|
||||
@@ -95,9 +95,12 @@ export default function ServicesPage() {
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-12">
|
||||
<button className="flex items-center gap-4 bg-primary text-on-primary px-8 py-4 font-headline font-bold uppercase hover:brightness-110 transition-all">
|
||||
<button
|
||||
onClick={() => handleWhatsApp(service.title)}
|
||||
className="flex items-center gap-4 bg-primary text-on-primary px-8 py-4 font-headline font-bold uppercase hover:brightness-110 transition-all group"
|
||||
>
|
||||
Teklif Al
|
||||
<ArrowRight className="w-5 h-5" />
|
||||
<ArrowRight className="w-5 h-5 group-hover:translate-x-2 transition-transform" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,66 +1,67 @@
|
||||
"use client";
|
||||
'use client';
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { ArrowRight, MessageCircle } from "lucide-react";
|
||||
import { siteConfig } from "@/lib/data";
|
||||
|
||||
export function CTASection() {
|
||||
const handleWhatsApp = () => {
|
||||
const message = encodeURIComponent("Merhaba, nakliyat ve vinç hizmetleriniz için teklif almak istiyorum.");
|
||||
window.open(`https://wa.me/${siteConfig.contact.whatsapp}?text=${message}`, '_blank');
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="relative py-40 px-12 overflow-hidden bg-background" id="Contact">
|
||||
{/* Background Image & Overlay */}
|
||||
<div className="absolute inset-0 z-0">
|
||||
<img
|
||||
className="w-full h-full object-cover"
|
||||
src="https://lh3.googleusercontent.com/aida-public/AB6AXuBfGw5gCmOA1OaPBLY-dOl2wTGviHc5c2Xn05kgak1sHagc64z3vjbl8Ov1KBLQPkoLFdv0ktOtczfX5VEdrujgg8rgBnw40Bzc7Ai836w4QATDFGTdmpO9aHk3s7nLib4yerxLzG1woNJ2SChKlZ831GmYaHOH6NJYOf-N-zjb8Tc2086UpH97RBMUqb7yXw-kdpvj7u-er1ujBxir2hi5WVWKuX_kMdJ-aM-co4c8AfQpo_sO32TcwzB93hhlq6eGc8m23YMoJfU"
|
||||
alt="Construction site at night"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-neutral-900/80 backdrop-blur-sm"></div>
|
||||
</div>
|
||||
<section className="py-24 md:py-40 bg-background relative overflow-hidden">
|
||||
{/* Background Graphic Elements */}
|
||||
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-primary to-transparent opacity-30" />
|
||||
<div className="absolute -bottom-24 -right-24 w-96 h-96 bg-primary/10 rounded-full blur-3xl" />
|
||||
<div className="absolute -top-24 -left-24 w-96 h-96 bg-primary/5 rounded-full blur-3xl" />
|
||||
|
||||
<div className="relative z-10 text-center max-w-4xl mx-auto px-6">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
className="mb-12 inline-flex items-center gap-4 bg-primary/10 px-6 py-2 border border-primary/20"
|
||||
>
|
||||
<span className="w-2 h-2 bg-primary animate-pulse"></span>
|
||||
<span className="font-label text-[10px] uppercase tracking-widest text-primary font-black">7/24 Acil Müdahale</span>
|
||||
</motion.div>
|
||||
<div className="max-w-7xl mx-auto px-6 md:px-12 relative z-10">
|
||||
<div className="flex flex-col lg:flex-row items-center justify-between gap-16">
|
||||
<div className="max-w-3xl text-center lg:text-left">
|
||||
<motion.span
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
className="font-label text-xs md:text-sm font-bold text-primary tracking-[0.5em] uppercase mb-6 block"
|
||||
>
|
||||
Projenizi Birlikte Yükseltelim
|
||||
</motion.span>
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
className="font-headline text-5xl md:text-8xl font-black text-white uppercase leading-[0.9] tracking-tighter mb-8"
|
||||
>
|
||||
Güçlü Filo, <br/>
|
||||
<span className="text-primary">Kesintisiz</span> Operasyon
|
||||
</motion.h2>
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="font-body text-lg md:text-2xl text-on-surface-variant leading-relaxed"
|
||||
>
|
||||
Her türlü ağır yük ve yüksek irtifa projeleriniz için profesyonel mühendislik çözümleri sunuyoruz. Dalaman'dan tüm Türkiye'ye 7/24 hizmetinizdeyiz.
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
viewport={{ once: true }}
|
||||
className="font-headline text-4xl md:text-8xl font-bold text-white mb-8 leading-[0.85] tracking-tighter text-balance"
|
||||
>
|
||||
Sıradaki Büyük Projeniz İçin Hazır mısınız?
|
||||
</motion.h2>
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-lg md:text-2xl text-on-surface-variant mb-16 max-w-2xl mx-auto leading-relaxed"
|
||||
>
|
||||
Dalaman ve çevresinde profesyonel vinç ve nakliyat çözümleri için hemen fiyat teklifi alın.
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.4 }}
|
||||
viewport={{ once: true }}
|
||||
className="flex flex-col md:flex-row gap-0 max-w-2xl mx-auto"
|
||||
>
|
||||
<input
|
||||
className="bg-surface-container-lowest border-none font-headline font-bold uppercase tracking-widest px-10 py-6 text-base w-full focus:ring-0 focus:border-b-4 focus:border-primary outline-none transition-all placeholder:text-white/20"
|
||||
placeholder="Telefon Numaranız"
|
||||
type="text"
|
||||
/>
|
||||
<button className="bg-primary text-on-primary font-headline font-black uppercase tracking-widest px-12 py-6 text-xl hover:brightness-110 active:scale-95 transition-all rounded-none shadow-[10px_10px_0px_0px_rgba(0,0,0,0.5)] active:shadow-none whitespace-nowrap">
|
||||
Sizi Arayalım
|
||||
</button>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
className="flex flex-col gap-6"
|
||||
>
|
||||
<button
|
||||
onClick={handleWhatsApp}
|
||||
className="bg-primary text-on-primary font-headline font-black uppercase tracking-widest px-12 py-6 text-xl hover:brightness-110 active:scale-95 transition-all rounded-none shadow-[10px_10px_0px_0px_rgba(0,0,0,0.5)] active:shadow-none whitespace-nowrap flex items-center justify-center gap-4 group"
|
||||
>
|
||||
ŞİMDİ TEKLİF ALIN
|
||||
<MessageCircle className="w-6 h-6 group-hover:rotate-12 transition-transform" />
|
||||
</button>
|
||||
<p className="text-center font-label text-[10px] uppercase tracking-widest text-on-surface-variant font-bold">
|
||||
Ortalama yanıt süresi: 15 Dakika
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
@@ -1,66 +1,117 @@
|
||||
'use client';
|
||||
|
||||
import Link from "next/link";
|
||||
import { Facebook, Instagram, Twitter, MapPin, Phone, Mail, ArrowUpRight } from "lucide-react";
|
||||
import { siteConfig } from "@/lib/data";
|
||||
|
||||
const QUICK_LINKS = [
|
||||
{ name: "Hizmetlerimiz", href: "/hizmetler" },
|
||||
{ name: "Makine Parkuru", href: "/filomuz" },
|
||||
{ name: "Kurumsal", href: "/hakkimizda" },
|
||||
{ name: "İletişim", href: "/iletisim" },
|
||||
];
|
||||
|
||||
const SERVICES = [
|
||||
{ name: "Mobil Vinç Kiralama", href: "/hizmetler" },
|
||||
{ name: "Sepetli Platform", href: "/hizmetler" },
|
||||
{ name: "Ağır Nakliyat", href: "/hizmetler" },
|
||||
{ name: "Proje Taşımacılığı", href: "/hizmetler" },
|
||||
];
|
||||
|
||||
export function Footer() {
|
||||
return (
|
||||
<footer className="w-full py-24 px-6 md:px-12 grid grid-cols-1 md:grid-cols-4 gap-12 bg-surface-container-lowest relative overflow-hidden">
|
||||
<div className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-primary/20 to-transparent"></div>
|
||||
|
||||
<div className="col-span-1 md:col-span-1">
|
||||
<div className="text-2xl font-black text-white mb-8 tracking-tighter">
|
||||
AYDOĞAN <span className="text-primary">VINÇ</span>
|
||||
<footer className="bg-surface-container-lowest pt-24 pb-12 border-t border-outline-variant/10">
|
||||
<div className="max-w-7xl mx-auto px-6 md:px-12">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-16 mb-20">
|
||||
{/* Brand Column */}
|
||||
<div className="flex flex-col gap-8">
|
||||
<Link href="/" className="flex flex-col items-start group">
|
||||
<span className="font-headline text-3xl font-black text-white tracking-tighter leading-none group-hover:text-primary transition-colors">
|
||||
AYDOĞAN
|
||||
</span>
|
||||
<span className="font-label text-xs text-primary font-bold tracking-[0.3em] uppercase -mt-1 group-hover:text-white transition-colors">
|
||||
Nakliyat & Vinç
|
||||
</span>
|
||||
</Link>
|
||||
<p className="text-on-surface-variant text-sm leading-relaxed">
|
||||
20 yılı aşkın tecrübemizle, Dalaman ve tüm Türkiye genelinde ağır lojistik ve kaldırma çözümleri sunuyoruz.
|
||||
</p>
|
||||
<div className="flex gap-4">
|
||||
<a href={siteConfig.social.facebook} target="_blank" className="w-10 h-10 bg-surface-container flex items-center justify-center text-on-surface-variant hover:bg-primary hover:text-on-primary transition-all">
|
||||
<Facebook size={18} />
|
||||
</a>
|
||||
<a href={siteConfig.social.instagram} target="_blank" className="w-10 h-10 bg-surface-container flex items-center justify-center text-on-surface-variant hover:bg-primary hover:text-on-primary transition-all">
|
||||
<Instagram size={18} />
|
||||
</a>
|
||||
<a href="#" className="w-10 h-10 bg-surface-container flex items-center justify-center text-on-surface-variant hover:bg-primary hover:text-on-primary transition-all">
|
||||
<Twitter size={18} />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Links */}
|
||||
<div>
|
||||
<h4 className="font-headline font-bold text-white uppercase tracking-widest text-xs mb-8">Hızlı Erişim</h4>
|
||||
<ul className="flex flex-col gap-4">
|
||||
{QUICK_LINKS.map((link) => (
|
||||
<li key={link.name}>
|
||||
<Link href={link.href} className="text-on-surface-variant hover:text-primary transition-colors text-sm flex items-center gap-2 group">
|
||||
<ArrowUpRight size={14} className="opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
{link.name}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Services */}
|
||||
<div>
|
||||
<h4 className="font-headline font-bold text-white uppercase tracking-widest text-xs mb-8">Hizmetlerimiz</h4>
|
||||
<ul className="flex flex-col gap-4">
|
||||
{SERVICES.map((link) => (
|
||||
<li key={link.name}>
|
||||
<Link href={link.href} className="text-on-surface-variant hover:text-primary transition-colors text-sm">
|
||||
{link.name}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Contact Details */}
|
||||
<div>
|
||||
<h4 className="font-headline font-bold text-white uppercase tracking-widest text-xs mb-8">İletişim</h4>
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<MapPin size={18} className="text-primary shrink-0" />
|
||||
<p className="text-on-surface-variant text-sm leading-snug">
|
||||
{siteConfig.contact.address}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<Phone size={18} className="text-primary shrink-0" />
|
||||
<a href={`tel:${siteConfig.contact.phone.replace(/\s+/g, '')}`} className="text-on-surface-variant hover:text-primary transition-colors text-sm font-bold">
|
||||
{siteConfig.contact.phone}
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<Mail size={18} className="text-primary shrink-0" />
|
||||
<a href={`mailto:${siteConfig.contact.email}`} className="text-on-surface-variant hover:text-primary transition-colors text-sm">
|
||||
{siteConfig.contact.email}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-on-surface-variant font-label text-[10px] md:text-xs leading-loose uppercase tracking-widest max-w-xs">
|
||||
Ağır sanayi ve inşaat sektöründe güvenin simgesi. Modern ekipmanlarımız ve uzman kadromuzla Dalaman'ın en güçlü ortağıyız.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="md:pl-12">
|
||||
<h4 className="text-primary font-headline text-[10px] uppercase tracking-[0.3em] mb-8 font-black">Merkez Ofis</h4>
|
||||
<ul className="space-y-4">
|
||||
<li><span className="text-white font-label text-[10px] uppercase tracking-widest leading-relaxed">Merkez Mah. Sanayi Sitesi No: 42 Dalaman / Muğla</span></li>
|
||||
<li><span className="text-white font-label text-[10px] uppercase tracking-widest">T: +90 252 692 XX XX</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="md:pl-12">
|
||||
<h4 className="text-primary font-headline text-[10px] uppercase tracking-[0.3em] mb-8 font-black">Hizmetler</h4>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
{ name: "Mobil Vinç Kiralama", href: "/hizmetler" },
|
||||
{ name: "Sepetli Platform", href: "/hizmetler" },
|
||||
{ name: "Lojistik Çözümleri", href: "/hizmetler" }
|
||||
].map(item => (
|
||||
<li key={item.name}><Link href={item.href} className="text-on-surface-variant hover:text-white transition-colors font-label text-[10px] uppercase tracking-widest">{item.name}</Link></li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="md:pl-12">
|
||||
<h4 className="text-primary font-headline text-[10px] uppercase tracking-[0.3em] mb-8 font-black">Hızlı Menü</h4>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
{ name: "Hakkımızda", href: "/hakkimizda" },
|
||||
{ name: "Makine Parkuru", href: "/filomuz" },
|
||||
{ name: "İletişim", href: "/iletisim" },
|
||||
{ name: "KVKK", href: "#" }
|
||||
].map(item => (
|
||||
<li key={item.name}><Link href={item.href} className="text-on-surface-variant hover:text-white transition-colors font-label text-[10px] uppercase tracking-widest">{item.name}</Link></li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="col-span-full mt-12 pt-12 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-8">
|
||||
<span className="text-on-surface-variant/40 font-label text-[10px] uppercase tracking-[0.2em]">© 2024 Aydoğan Nakliyat Vinç. Tüm Hakları Saklıdır.</span>
|
||||
<div className="flex gap-8">
|
||||
<a href="#" className="text-white/40 hover:text-primary transition-colors">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
|
||||
</a>
|
||||
<a href="#" className="text-white/40 hover:text-primary transition-colors">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
|
||||
</a>
|
||||
<a href="#" className="text-white/40 hover:text-primary transition-colors">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
|
||||
</a>
|
||||
<div className="pt-12 border-t border-outline-variant/10 flex flex-col md:flex-row justify-between items-center gap-8">
|
||||
<p className="text-on-surface-variant text-[10px] uppercase tracking-widest font-bold">
|
||||
© {new Date().getFullYear()} {siteConfig.name}. Tüm hakları saklıdır.
|
||||
</p>
|
||||
<div className="flex gap-8">
|
||||
<a href="#" className="text-on-surface-variant hover:text-white text-[10px] uppercase tracking-widest font-bold transition-colors">KVKK Aydınlatma Metni</a>
|
||||
<a href="#" className="text-on-surface-variant hover:text-white text-[10px] uppercase tracking-widest font-bold transition-colors">Gizlilik Politikası</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -1,74 +1,82 @@
|
||||
"use client";
|
||||
'use client';
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { ArrowRight, Phone, MessageCircle } from "lucide-react";
|
||||
import { siteConfig } from "@/lib/data";
|
||||
|
||||
export function Hero() {
|
||||
const handleWhatsApp = () => {
|
||||
const message = encodeURIComponent("Merhaba, vinç kiralama ve nakliyat hizmetleriniz hakkında bilgi almak istiyorum.");
|
||||
window.open(`https://wa.me/${siteConfig.contact.whatsapp}?text=${message}`, '_blank');
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="relative h-screen w-full flex items-center overflow-hidden bg-background">
|
||||
{/* Background Image & Overlay */}
|
||||
<section className="relative min-h-screen flex items-center justify-center overflow-hidden pt-20">
|
||||
{/* Background with Grid and Noise */}
|
||||
<div className="absolute inset-0 z-0">
|
||||
<img
|
||||
className="w-full h-full object-cover"
|
||||
src="https://lh3.googleusercontent.com/aida-public/AB6AXuCLXU-xpLyEH2Y_iMlpzL1U0DoDchOaBY8PKcSBT2U3v11rmlCAjjeP2-9STqyYMt43TFAM0jM-OZpBGmr0OX46suuzs38u_O-xYRzRHGYy9gFF7VOKIirFizFPLHtGLg8i9xxv30qrQuCfb8zx7DZ4iq04mAPl2uZZIhCtA6dxWSaZxJD4_lj3OZeekkyGVHlO18LQalVXg63CfNEu913EGtwTEEKMclHSCZo2yRRwAB1xnh0R3YBuuiJiUYADnGVKv2G7VD_pAL4"
|
||||
alt="Heavy duty crane in Dalaman"
|
||||
<div className="absolute inset-0 bg-background/40 backdrop-blur-sm z-10" />
|
||||
<Image
|
||||
src="https://images.unsplash.com/photo-1541625602330-2277a4c4b282?q=80&w=2070&auto=format&fit=crop"
|
||||
alt="Industrial crane"
|
||||
fill
|
||||
priority
|
||||
className="object-cover grayscale brightness-50"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-background via-background/40 to-transparent"></div>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-background via-transparent to-background/20 z-20" />
|
||||
<div className="grid-pattern absolute inset-0 opacity-20 z-30" />
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 px-6 md:px-12 max-w-6xl">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="mb-8 flex items-center gap-4"
|
||||
>
|
||||
<span className="h-[2px] w-8 md:w-12 bg-primary"></span>
|
||||
<span className="font-label text-xs md:text-sm uppercase tracking-[0.3em] text-primary font-bold">Dalaman / Muğla</span>
|
||||
</motion.div>
|
||||
|
||||
<motion.h1
|
||||
<div className="relative z-40 max-w-7xl mx-auto px-6 md:px-12 w-full text-center md:text-left">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
className="font-headline text-[clamp(2.5rem,8vw,5.5rem)] font-bold leading-[0.9] tracking-tighter text-white mb-8 text-balance"
|
||||
transition={{ duration: 0.8 }}
|
||||
className="max-w-4xl"
|
||||
>
|
||||
Dalaman’ın Güçlü <br />
|
||||
Çözüm Ortağı: <span className="text-primary">Aydoğan Vinç</span>
|
||||
</motion.h1>
|
||||
<span className="inline-block font-label text-xs md:text-sm font-bold text-primary tracking-[0.4em] uppercase mb-6 bg-primary/10 px-4 py-2 border-l-2 border-primary">
|
||||
Endüstriyel Güç & Mühendislik
|
||||
</span>
|
||||
<h1 className="font-headline text-6xl md:text-9xl font-black text-white uppercase leading-[0.85] tracking-tighter mb-8">
|
||||
AYDOĞAN <br/>
|
||||
<span className="text-stroke text-transparent">NAKLİYAT</span> <br/>
|
||||
<span className="text-primary">VİNÇ</span>
|
||||
</h1>
|
||||
<p className="font-body text-lg md:text-2xl text-on-surface-variant max-w-2xl mb-12 leading-relaxed">
|
||||
Muğla Dalaman merkezli, 500 tona kadar kaldırma kapasitesi ve uzman mühendislik kadrosuyla ağır nakliyat ve vinç çözümleri.
|
||||
</p>
|
||||
|
||||
<motion.ul
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 1, delay: 0.5 }}
|
||||
className="space-y-4 mb-16"
|
||||
>
|
||||
{["Ağır Nakliyat", "Sepetli Platform", "Mobil Vinç Kiralama"].map((item, idx) => (
|
||||
<li key={item} className="flex items-center gap-4 group">
|
||||
<span className="w-2 h-2 bg-primary"></span>
|
||||
<span className="font-headline text-lg md:text-2xl uppercase tracking-wider text-on-surface-variant group-hover:text-white transition-colors cursor-default">
|
||||
{item}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</motion.ul>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.8 }}
|
||||
className="flex flex-col sm:flex-row gap-4"
|
||||
>
|
||||
<button className="bg-primary text-on-primary px-10 py-5 font-headline font-black uppercase tracking-widest text-lg hover:brightness-110 transition-all rounded-none shadow-[8px_8px_0px_0px_rgba(0,0,0,0.3)] active:shadow-none active:translate-x-[2px] active:translate-y-[2px]">
|
||||
Hizmet Alın
|
||||
</button>
|
||||
<button className="bg-surface-container-high text-white px-10 py-5 font-headline font-black uppercase tracking-widest text-lg hover:bg-white hover:text-black transition-all rounded-none border-b-2 border-primary/50">
|
||||
Filomuz
|
||||
</button>
|
||||
<div className="flex flex-col sm:flex-row gap-6">
|
||||
<Link
|
||||
href="/hizmetler"
|
||||
className="bg-primary text-on-primary px-10 py-5 font-headline font-black uppercase tracking-widest text-lg hover:brightness-110 transition-all rounded-none shadow-[8px_8px_0px_0px_rgba(0,0,0,0.3)] active:shadow-none active:translate-x-[2px] active:translate-y-[2px] flex items-center justify-center gap-3 group"
|
||||
>
|
||||
Hizmetlerimiz
|
||||
<ArrowRight className="w-5 h-5 group-hover:translate-x-2 transition-transform" />
|
||||
</Link>
|
||||
<button
|
||||
onClick={handleWhatsApp}
|
||||
className="bg-surface-container-high text-white px-10 py-5 font-headline font-black uppercase tracking-widest text-lg hover:bg-white hover:text-black transition-all rounded-none border-b-2 border-primary/50 flex items-center justify-center gap-3"
|
||||
>
|
||||
<MessageCircle className="w-6 h-6" />
|
||||
Teklif Alın
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Gradient Texture */}
|
||||
<div className="absolute bottom-0 left-0 w-full h-32 bg-gradient-to-t from-background to-transparent"></div>
|
||||
{/* Side Status Indicators */}
|
||||
<div className="absolute right-12 bottom-12 hidden xl:flex flex-col gap-8 z-40">
|
||||
<div className="flex flex-col items-end">
|
||||
<span className="font-headline text-5xl font-black text-white leading-none">500T</span>
|
||||
<span className="font-label text-[10px] uppercase tracking-widest text-primary font-bold">Max Kapasite</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-end">
|
||||
<span className="font-headline text-5xl font-black text-white leading-none">24/7</span>
|
||||
<span className="font-label text-[10px] uppercase tracking-widest text-primary font-bold">Aktif Operasyon</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,12 +1,14 @@
|
||||
"use client";
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
import { Menu, X } from "lucide-react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { Menu, X, Phone, MessageCircle } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { siteConfig } from "@/lib/data";
|
||||
|
||||
const NAV_LINKS = [
|
||||
{ name: "Anasayfa", href: "/" },
|
||||
{ name: "Hizmetler", href: "/hizmetler" },
|
||||
{ name: "Filomuz", href: "/filomuz" },
|
||||
{ name: "Hakkımızda", href: "/hakkimizda" },
|
||||
@@ -16,36 +18,48 @@ const NAV_LINKS = [
|
||||
export function Navbar() {
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
const pathname = usePathname();
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
setIsScrolled(window.scrollY > 20);
|
||||
setIsScrolled(window.scrollY > 50);
|
||||
};
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
return () => window.removeEventListener("scroll", handleScroll);
|
||||
}, []);
|
||||
|
||||
const handleWhatsApp = () => {
|
||||
const message = encodeURIComponent("Merhaba, vinç kiralama ve nakliyat hizmetleriniz hakkında bilgi almak istiyorum.");
|
||||
window.open(`https://wa.me/${siteConfig.contact.whatsapp}?text=${message}`, '_blank');
|
||||
};
|
||||
|
||||
return (
|
||||
<nav
|
||||
<nav
|
||||
className={cn(
|
||||
"fixed top-0 left-0 w-full z-[100] flex justify-between items-center px-6 md:px-12 py-6 transition-all duration-300",
|
||||
isScrolled
|
||||
? "bg-surface-container-lowest/80 backdrop-blur-xl border-b border-outline-variant/15"
|
||||
: "bg-transparent"
|
||||
"fixed top-0 left-0 w-full z-[100] transition-all duration-500 px-6 md:px-12 py-6 flex justify-between items-center",
|
||||
isScrolled ? "bg-background/95 backdrop-blur-md py-4 border-b border-white/5 shadow-2xl" : "bg-transparent"
|
||||
)}
|
||||
>
|
||||
{/* Logo */}
|
||||
<Link href="/" className="text-xl md:text-2xl font-black tracking-tighter text-primary">
|
||||
AYDOĞAN <span className="text-white">NAKLİYAT</span>
|
||||
{/* Logo Area */}
|
||||
<Link href="/" className="flex flex-col items-start group">
|
||||
<span className="font-headline text-2xl md:text-3xl font-black text-white tracking-tighter leading-none group-hover:text-primary transition-colors">
|
||||
AYDOĞAN
|
||||
</span>
|
||||
<span className="font-label text-[10px] md:text-xs text-primary font-bold tracking-[0.3em] uppercase -mt-1 group-hover:text-white transition-colors">
|
||||
Nakliyat & Vinç
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
{/* Desktop Links */}
|
||||
<div className="hidden md:flex items-center gap-12">
|
||||
{/* Desktop Navigation */}
|
||||
<div className="hidden lg:flex items-center gap-12">
|
||||
{NAV_LINKS.map((link) => (
|
||||
<Link
|
||||
<Link
|
||||
key={link.name}
|
||||
href={link.href}
|
||||
className="font-headline uppercase tracking-widest text-xs font-bold text-white/60 hover:text-primary transition-all duration-300"
|
||||
className={cn(
|
||||
"font-headline text-xs font-bold uppercase tracking-[0.2em] transition-all hover:text-primary relative py-2",
|
||||
pathname === link.href ? "text-primary after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-primary" : "text-white/70"
|
||||
)}
|
||||
>
|
||||
{link.name}
|
||||
</Link>
|
||||
@@ -53,64 +67,81 @@ export function Navbar() {
|
||||
</div>
|
||||
|
||||
{/* CTA Button */}
|
||||
<div className="hidden md:flex items-center gap-4">
|
||||
<button className="bg-primary-container text-on-primary px-8 py-3 font-headline font-bold uppercase tracking-widest text-xs hover:brightness-110 active:scale-95 transition-all rounded-none ring-offset-2 focus:ring-2 focus:ring-primary">
|
||||
Teklif Alın
|
||||
<div className="hidden lg:flex items-center gap-6">
|
||||
<button
|
||||
onClick={handleWhatsApp}
|
||||
className="bg-primary text-on-primary px-8 py-3 font-headline font-bold uppercase tracking-widest text-xs hover:brightness-110 active:scale-95 transition-all flex items-center gap-2"
|
||||
>
|
||||
<MessageCircle className="w-4 h-4" />
|
||||
Hızlı Teklif
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu Toggle */}
|
||||
<button
|
||||
className="md:hidden text-white focus:outline-none p-2"
|
||||
className="lg:hidden text-white p-2 hover:bg-white/5 transition-colors"
|
||||
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||||
aria-label="Menu toggle"
|
||||
>
|
||||
{mobileMenuOpen ? <X size={32} /> : <Menu size={32} />}
|
||||
{mobileMenuOpen ? <X /> : <Menu />}
|
||||
</button>
|
||||
|
||||
{/* Mobile Menu Overlay */}
|
||||
<AnimatePresence>
|
||||
{mobileMenuOpen && (
|
||||
<>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 bg-black/60 backdrop-blur-md md:hidden z-[-1]"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
/>
|
||||
<motion.div
|
||||
initial={{ x: "100%" }}
|
||||
animate={{ x: 0 }}
|
||||
exit={{ x: "100%" }}
|
||||
transition={{ type: "spring", damping: 25, stiffness: 200 }}
|
||||
className="fixed top-0 right-0 h-screen w-[85%] bg-surface-container-highest flex flex-col p-12 md:hidden shadow-2xl z-[101]"
|
||||
>
|
||||
<div className="flex justify-between items-center mb-16">
|
||||
<span className="font-headline font-black text-xl text-primary">MENÜ</span>
|
||||
<button onClick={() => setMobileMenuOpen(false)}>
|
||||
<X size={32} className="text-white" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex flex-col gap-10">
|
||||
{NAV_LINKS.map((link) => (
|
||||
<Link
|
||||
key={link.name}
|
||||
href={link.href}
|
||||
className="font-headline text-3xl font-bold text-white uppercase tracking-tighter hover:text-primary transition-colors"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
{link.name}
|
||||
</Link>
|
||||
))}
|
||||
<button className="mt-10 bg-primary-container text-on-primary font-headline font-black uppercase tracking-widest py-6 text-xl rounded-none shadow-[8px_8px_0px_0px_rgba(0,0,0,0.5)] active:shadow-none transition-all">
|
||||
Hızlı Teklif
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</>
|
||||
<div
|
||||
className={cn(
|
||||
"fixed inset-0 bg-background/98 z-[200] lg:hidden flex flex-col p-8 transition-all duration-500",
|
||||
mobileMenuOpen ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-full pointer-events-none"
|
||||
)}
|
||||
</AnimatePresence>
|
||||
>
|
||||
<div className="flex justify-between items-center mb-16">
|
||||
<div className="flex flex-col">
|
||||
<span className="font-headline text-3xl font-black text-white tracking-tighter">AYDOĞAN</span>
|
||||
<span className="font-label text-xs text-primary font-bold tracking-[0.3em] uppercase">Nakliyat & Vinç</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
className="p-4 bg-white/5 text-white"
|
||||
>
|
||||
<X size={32} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-8">
|
||||
{NAV_LINKS.map((link, idx) => (
|
||||
<Link
|
||||
key={link.name}
|
||||
href={link.href}
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
className={cn(
|
||||
"font-headline text-4xl font-bold uppercase tracking-tighter transition-all hover:translate-x-4",
|
||||
pathname === link.href ? "text-primary" : "text-white/60"
|
||||
)}
|
||||
style={{ transitionDelay: `${idx * 50}ms` }}
|
||||
>
|
||||
{link.name}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-auto flex flex-col gap-4">
|
||||
<button
|
||||
onClick={() => {
|
||||
handleWhatsApp();
|
||||
setMobileMenuOpen(false);
|
||||
}}
|
||||
className="w-full bg-primary text-on-primary font-headline font-black uppercase tracking-widest py-6 text-xl flex items-center justify-center gap-3 active:scale-95 transition-all"
|
||||
>
|
||||
<MessageCircle className="w-6 h-6" />
|
||||
HIZLI TEKLİF AL
|
||||
</button>
|
||||
<a
|
||||
href={`tel:${siteConfig.contact.phone.replace(/\s+/g, '')}`}
|
||||
className="w-full border border-white/10 text-white font-headline font-bold uppercase tracking-widest py-6 text-lg text-center flex items-center justify-center gap-3"
|
||||
>
|
||||
<Phone className="w-5 h-5" />
|
||||
{siteConfig.contact.phone}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,91 +1,83 @@
|
||||
"use client";
|
||||
'use client';
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { Hammer, Truck, Building2 } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { ArrowRight } from "lucide-react";
|
||||
|
||||
const SERVICES = [
|
||||
{
|
||||
id: "01",
|
||||
title: "Mobil Vinç",
|
||||
description: "Hızlı kurulum ve yüksek hareket kabiliyeti ile şantiye alanlarında esnek çözümler.",
|
||||
icon: Hammer,
|
||||
bg: "bg-surface-container",
|
||||
},
|
||||
{
|
||||
id: "02",
|
||||
title: "Ağır Nakliyat",
|
||||
description: "Standart dışı ölçülere sahip yüklerin özel ekipmanlarla güvenli taşımacılığı.",
|
||||
icon: Truck,
|
||||
bg: "bg-surface-container-high",
|
||||
description: "Gabari dışı yüklerin özel low-bed araçlarla taşınması.",
|
||||
image: "https://images.unsplash.com/photo-1601584115197-04ecc0da31d7?q=80&w=2070&auto=format&fit=crop"
|
||||
},
|
||||
{
|
||||
id: "03",
|
||||
title: "Sepetli Platform",
|
||||
description: "Yüksek irtifa çalışmalarında personel güvenliğini ön plana çıkaran ekipmanlar.",
|
||||
icon: Building2,
|
||||
bg: "bg-surface-container-highest",
|
||||
title: "Mobil Vinç",
|
||||
description: "300-500 ton kapasiteli teleskopik vinç çözümleri.",
|
||||
image: "https://images.unsplash.com/photo-1541625602330-2277a4c4b282?q=80&w=2070&auto=format&fit=crop"
|
||||
},
|
||||
{
|
||||
title: "Sepetli Platform",
|
||||
description: "75 metreye kadar yüksek irtifa çalışma alanları.",
|
||||
image: "https://images.unsplash.com/photo-1578319439584-104c94d37305?q=80&w=2070&auto=format&fit=crop"
|
||||
}
|
||||
];
|
||||
|
||||
export function ServicesPreview() {
|
||||
return (
|
||||
<section className="py-24 md:py-32 px-6 md:px-12 bg-surface" id="Services">
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-end mb-16 md:mb-24 gap-8">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="max-w-3xl"
|
||||
>
|
||||
<span className="font-label text-xs md:text-sm uppercase tracking-[0.3em] text-primary font-bold mb-4 block">Hizmetlerimiz</span>
|
||||
<h2 className="font-headline text-4xl md:text-7xl font-bold tracking-tighter text-white leading-[0.9] text-balance">Yükünüz Ne Olursa Olsun, Güç Bizim İşimiz.</h2>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-left md:text-right"
|
||||
>
|
||||
<p className="text-on-surface-variant font-body text-base md:text-lg max-w-sm">Mühendislik temelli yaklaşımımızla en zorlu projelerinizde profesyonel destek sağlıyoruz.</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3">
|
||||
{SERVICES.map((service, index) => (
|
||||
<motion.div
|
||||
key={service.title}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: index * 0.1, duration: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
className={cn(
|
||||
"group relative aspect-square overflow-hidden p-8 md:p-16 transition-all duration-500",
|
||||
service.bg
|
||||
)}
|
||||
<section className="py-24 bg-surface text-on-surface">
|
||||
<div className="max-w-7xl mx-auto px-6 md:px-12">
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-8 mb-16">
|
||||
<div className="max-w-2xl">
|
||||
<span className="font-label text-xs uppercase tracking-[0.4em] text-primary font-bold mb-4 block">Uzmanlık Alanlarımız</span>
|
||||
<h2 className="font-headline text-5xl md:text-8xl font-black uppercase leading-none tracking-tighter">
|
||||
Büyük Yüklerin <br/> <span className="text-primary">Kusursuz</span> Taşıyıcısı
|
||||
</h2>
|
||||
</div>
|
||||
<Link
|
||||
href="/hizmetler"
|
||||
className="group flex items-center gap-4 text-on-surface font-headline font-bold uppercase tracking-widest text-sm"
|
||||
>
|
||||
<div className="relative z-10 h-full flex flex-col justify-between">
|
||||
<service.icon className="w-12 h-12 md:w-16 md:h-16 text-primary group-hover:scale-110 transition-transform duration-500" strokeWidth={1} />
|
||||
<div>
|
||||
<h3 className="font-headline text-2xl md:text-4xl font-bold mb-4 uppercase leading-none">{service.title}</h3>
|
||||
<p className="text-on-surface-variant text-sm md:text-base leading-relaxed opacity-80 group-hover:opacity-100 transition-opacity">{service.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Number Background */}
|
||||
<div className="absolute top-0 right-0 p-8 opacity-5 group-hover:opacity-10 transition-opacity pointer-events-none">
|
||||
<span className="font-headline text-[12rem] font-black leading-none">{service.id}</span>
|
||||
Tüm Hizmetler
|
||||
<div className="bg-primary p-4 text-on-primary group-hover:translate-x-4 transition-transform">
|
||||
<ArrowRight size={20} />
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Hover Overlay */}
|
||||
<div className="absolute inset-0 bg-primary translate-y-full group-hover:translate-y-0 transition-transform duration-500 flex flex-col items-center justify-center gap-6 p-8">
|
||||
<p className="text-on-primary text-center font-body font-medium leading-tight">Profesyonel operasyonel destek ve kiralama seçenekleri için.</p>
|
||||
<button className="text-on-primary font-headline font-black text-2xl uppercase underline underline-offset-8 hover:tracking-widest transition-all">
|
||||
Detaylar
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-px bg-outline-variant/20">
|
||||
{SERVICES.map((service, idx) => (
|
||||
<motion.div
|
||||
key={service.title}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: idx * 0.1 }}
|
||||
viewport={{ once: true }}
|
||||
className="group relative h-[600px] overflow-hidden flex flex-col justify-end p-12"
|
||||
>
|
||||
<Image
|
||||
src={service.image}
|
||||
alt={service.title}
|
||||
fill
|
||||
className="object-cover grayscale group-hover:grayscale-0 group-hover:scale-110 transition-all duration-1000 z-0"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-background via-background/20 to-transparent z-10" />
|
||||
|
||||
<div className="relative z-20">
|
||||
<h3 className="font-headline text-4xl font-black text-white uppercase mb-4 tracking-tighter">{service.title}</h3>
|
||||
<p className="font-body text-on-surface-variant mb-8 opacity-0 group-hover:opacity-100 translate-y-4 group-hover:translate-y-0 transition-all duration-500">
|
||||
{service.description}
|
||||
</p>
|
||||
<Link
|
||||
href="/hizmetler"
|
||||
className="bg-primary text-on-primary font-headline font-black text-2xl uppercase underline underline-offset-8 hover:tracking-widest transition-all"
|
||||
>
|
||||
Detaylar
|
||||
</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user