Files
5fa25554-7d93-49bb-bf6a-127…/src/app/page.tsx
2026-03-14 13:00:30 +00:00

397 lines
22 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import MetricCardTen from '@/components/sections/metrics/MetricCardTen';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Sparkles, Wrench, Paintbrush2, Wallpaper, Calculator, Trophy, ArrowRight, Phone, Ruler, Palette, CheckCircle, Image, Star, Rocket, MessageCircle } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="background-highlight"
borderRadius="rounded"
contentWidth="compact"
sizing="largeSizeMediumTitles"
background="noiseDiagonalGradient"
cardStyle="gradient-mesh"
primaryButtonStyle="shadow"
secondaryButtonStyle="glass"
headingFontWeight="semibold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="LAGANT"
navItems={[
{ name: "Ana Sayfa", id: "home" },
{ name: "Hizmetler", id: "services" },
{ name: "Fiyatlar", id: "pricing" },
{ name: "Portfolyo", id: "portfolio" },
{ name: "İletişim", id: "contact" }
]}
button={{ text: "Teklif Al", href: "#contact" }}
className="backdrop-blur-md bg-opacity-80"
buttonClassName="border border-[var(--primary-cta)] hover:bg-[var(--primary-cta)] transition-all"
buttonTextClassName="text-[var(--primary-cta)] hover:text-[var(--primary-cta-text)]"
/>
</div>
<div id="hero-section" data-section="hero-section">
<HeroLogoBillboard
logoText="Duvarlar"
description="Konuşur."
buttons={[
{ text: "Hizmet Al", href: "#contact" },
{ text: "Portfolyoyu Gör ↓", href: "#portfolio" }
]}
buttonAnimation="blur-reveal"
background={{ variant: "glowing-orb" }}
videoSrc="http://img.b2bpic.net/free-photo/blonde-charming-woman-silk-black-jumpsuit-stylish-eyeglasses-sits-brown-big-soft-sofa-ho_197531-33650.jpg?_wi=1"
mediaAnimation="opacity"
frameStyle="card"
ariaLabel="Lagant Boya Hero Section"
className="min-h-screen flex items-center justify-center"
containerClassName="relative z-10"
logoContainerClassName="mb-8"
logoClassName="text-sm tracking-[0.3em] text-[var(--primary-cta)] uppercase font-light"
descriptionClassName="text-6xl md:text-7xl lg:text-8xl font-bold text-[var(--foreground)] leading-tight mb-8"
buttonContainerClassName="flex gap-6 justify-center flex-wrap"
buttonClassName="px-8 py-4 rounded-full transition-all duration-300"
buttonTextClassName="text-sm tracking-wider uppercase"
/>
</div>
<div id="manifesto-section" data-section="manifesto-section">
<TestimonialAboutCard
tag="FELSEFEMİZ"
tagIcon={Sparkles}
tagAnimation="blur-reveal"
title="Bir duvar sadece yüzey değildir"
description="O, yaşadığınız alanın ruhudur."
subdescription="10 yıllık deneyimle, her projeyi bir sanat eseri olarak görüyoruz. İç cephe boyama ve duvar kağıdı hizmetlerimiz, mekanlarınızı dönüştürmekten çok daha fazlasını yapıyor—kimliğinizi yansıtıyor."
icon={Palette}
imageSrc="http://img.b2bpic.net/free-photo/blonde-charming-woman-silk-black-jumpsuit-stylish-eyeglasses-sits-brown-big-soft-sofa-ho_197531-33650.jpg?_wi=2"
imageAlt="Interior design philosophy"
mediaAnimation="blur-reveal"
useInvertedBackground={true}
className="py-24 px-6"
containerClassName="max-w-6xl mx-auto"
titleClassName="text-5xl md:text-6xl font-bold text-[var(--foreground)] italic leading-tight mb-4"
descriptionClassName="text-3xl md:text-4xl text-[var(--primary-cta)] font-light mb-6"
subdescriptionClassName="text-lg text-[var(--foreground)] leading-relaxed opacity-90"
/>
</div>
<div id="services-section" data-section="services-section">
<FeatureHoverPattern
tag="HİZMETLERİMİZ"
tagIcon={Wrench}
tagAnimation="blur-reveal"
title="Profesyonel İç Cephe Çözümleri"
description="Konya'nın en güvenilir painting ve wallpaper uzmanları olarak, yaşam alanlarınızı dönüştürmek için yüksek kaliteli malzeme ve titiz işçilik kullanıyoruz."
buttons={[{ text: "Tüm Hizmetleri Gör", href: "#contact" }]}
buttonAnimation="blur-reveal"
features={[
{
icon: Paintbrush2,
title: "İç Cephe Boyama", description: "Marshall ve Filli Boya ile yüzey hazırlığından son kata kadar mükemmel sonuç. 100-150 TL/m² aralığında."
},
{
icon: Wallpaper,
title: "Duvar Kağıdı", description: "Yüzlerce desen ve premium kalite. Mükemmel hizalama ve profesyonel uygulama. 150-200 TL/m² aralığında."
}
]}
animationType="blur-reveal"
textboxLayout="default"
useInvertedBackground={false}
className="py-24 px-6"
containerClassName="max-w-7xl mx-auto"
cardClassName="bg-gradient-to-br from-[#1a1a20] to-[#0f0f14] border border-[var(--primary-cta)] border-opacity-20 p-12 rounded-2xl hover:border-opacity-60 transition-all"
titleClassName="text-4xl md:text-5xl font-bold text-[var(--foreground)] mb-4"
descriptionClassName="text-lg text-[var(--foreground)] opacity-80 mb-8"
/>
</div>
<div id="pricing-calculator-section" data-section="pricing-calculator-section">
<PricingCardThree
tag="FİYAT HESAPLAMA"
tagIcon={Calculator}
tagAnimation="blur-reveal"
title="Metrekareye Göre Fiyat Tahmini"
description="Hizmet türünü seçin, metrekareyi girin ve anlık fiyat tahmini alın. Gerçek teklif için lütfen bize başvurun."
buttons={[{ text: "Detaylı Teklif İçin İletişime Geçin", href: "#contact" }]}
buttonAnimation="blur-reveal"
plans={[
{
id: "painting", name: "İç Cephe Boyama", price: "100-150 TL/m²", buttons: [{ text: "Hesaplama Yap", href: "#contact" }],
features: [
"Yüzey hazırlığı ve temizleme", "Astar ve temel katlama", "Marshall/Filli Boya son kat", "Detay çalışmaları ve bitiş", "Hasılsız ve temiz teslim"
]
},
{
id: "wallpaper", name: "Duvar Kağıdı", price: "150-200 TL/m²", buttons: [{ text: "Hesaplama Yap", href: "#contact" }],
features: [
"Duvar hazırlığı ve eşitleme", "Premium kalite duvar kağıdı", "Profesyonel yapıştırma ve hizalama", "Desen eşleştirme", "Kurulu ve hazırlanmış"
]
}
]}
animationType="blur-reveal"
textboxLayout="default"
useInvertedBackground={true}
className="py-24 px-6"
containerClassName="max-w-6xl mx-auto"
cardClassName="bg-[#1a1a20] border border-[var(--primary-cta)] border-opacity-30 p-10 rounded-xl"
titleClassName="text-4xl md:text-5xl font-bold text-[var(--foreground)] mb-4"
descriptionClassName="text-lg text-[var(--foreground)] opacity-80 mb-8"
/>
</div>
<div id="metrics-section" data-section="metrics-section">
<MetricCardTen
tag="BAŞARILARIIZ"
tagIcon={Trophy}
tagAnimation="blur-reveal"
title="Sayılarla Konuşan Başarı"
description="Konya'da 10 yıllı aşkın sürede binlerce mutlu müşteri kazandık. İşte başarımızın göstergesi."
animationType="slide-up"
textboxLayout="centered"
useInvertedBackground={false}
metrics={[
{ id: "experience", title: "10+", subtitle: "Yıl", category: "Deneyim", value: "Endüstri Liderliği" },
{ id: "projects", title: "300+", subtitle: "Proje", category: "Tamamlandı", value: "Konya'da" },
{ id: "customers", title: "500+", subtitle: "Müşteri", category: "Mutlu", value: "Bizimle Çalıştı" },
{ id: "satisfaction", title: "%98", subtitle: "Memnuniyet", category: "Oranı", value: "Müşteri Tasdiki" }
]}
className="py-24 px-6"
containerClassName="max-w-6xl mx-auto"
cardClassName="bg-gradient-to-br from-[#1a1a20] to-[#0f0f14] p-8 rounded-xl"
titleClassName="text-4xl md:text-5xl font-bold text-[var(--foreground)] mb-4"
descriptionClassName="text-lg text-[var(--foreground)] opacity-80 mb-12"
/>
</div>
<div id="process-section" data-section="process-section">
<FeatureHoverPattern
tag="SÜREÇİMİZ"
tagIcon={ArrowRight}
tagAnimation="blur-reveal"
title="Dört Adımda Projeniz Tamamlanır"
description="Baştan sona şeffaf ve profesyonel bir iş akışını takip ederiz. Sizin memnuniyetiniz bizim önceliğimiz."
features={[
{
icon: Phone,
title: "Ücretsiz Keşif", description: "Sizi arayarak randevu alıyoruz. Alanınızı değerlendiriyor ve önerilerimizi sunuyoruz."
},
{
icon: Ruler,
title: "Ölçüm & Teklif", description: "Detaylı metrekare hesabı ve malzeme seçimi yaparak çerçeveli bir teklif sunuyoruz."
},
{
icon: Palette,
title: "Uygulama", description: "Titiz işçilik ve temiz çalışma ortamı ile proje uygulamasını gerçekleştiriyoruz."
},
{
icon: CheckCircle,
title: "Teslim", description: "Kontrolünüzde teslim ediyoruz. Memnuniyetiniz sağlanıncaya kadar desteğe devam ederiz."
}
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
className="py-24 px-6"
containerClassName="max-w-7xl mx-auto"
cardClassName="bg-[#1a1a20] border border-[var(--primary-cta)] border-opacity-20 p-8 rounded-xl hover:border-opacity-60 transition-all"
titleClassName="text-4xl md:text-5xl font-bold text-[var(--foreground)] mb-4"
descriptionClassName="text-lg text-[var(--foreground)] opacity-80 mb-12"
/>
</div>
<div id="portfolio-section" data-section="portfolio-section">
<ProductCardOne
tag="PORTFOLYOMUZ"
tagIcon={Image}
tagAnimation="blur-reveal"
title="Son Tamamlanan Projeler"
description="Konya'da gerçekleştirdiğimiz başarılı transformasyonları göz atın. Her proje, yaşam alanının ruhuna saygı duymanın bir kanıtı."
buttons={[{ text: "Tüm Projeleri Gör", href: "#contact" }]}
buttonAnimation="blur-reveal"
gridVariant="bento-grid"
animationType="blur-reveal"
textboxLayout="default"
useInvertedBackground={false}
products={[
{
id: "project-1", name: "Modern Oturma Odası", price: "Boyama - Konya", imageSrc: "http://img.b2bpic.net/free-photo/people-office-having-break_23-2147668797.jpg", imageAlt: "Modern living room painting"
},
{
id: "project-2", name: "Yatak Odası Aksan Duvar", price: "Duvar Kağıdı - Konya", imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-beautiful-asian-girl-lying-bedroom-with-sophisticated-interrior-smiling_1258-191155.jpg", imageAlt: "Bedroom accent wall"
},
{
id: "project-3", name: "Ticari Ofis Alanı", price: "Boyama - Merkez", imageSrc: "http://img.b2bpic.net/free-photo/business-partners_1098-18010.jpg", imageAlt: "Commercial office space"
},
{
id: "project-4", name: "Mutfak Yenileme", price: "Boyama - Karatay", imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-pouring-hot-water-into-mug_23-2147803897.jpg", imageAlt: "Kitchen renovation"
},
{
id: "project-5", name: "Yemek Odası Dekoru", price: "Duvar Kağıdı - Selvili", imageSrc: "http://img.b2bpic.net/free-photo/vintage-room-interior-toned-image-studio-shooting_482257-34320.jpg", imageAlt: "Dining room wallpaper"
},
{
id: "project-6", name: "Studio Daire Güncelleme", price: "Boyama - Meram", imageSrc: "http://img.b2bpic.net/free-photo/blonde-charming-woman-silk-black-jumpsuit-stylish-eyeglasses-sits-brown-big-soft-sofa-ho_197531-33650.jpg?_wi=3", imageAlt: "Studio apartment update"
}
]}
className="py-24 px-6"
containerClassName="max-w-7xl mx-auto"
titleClassName="text-4xl md:text-5xl font-bold text-[var(--foreground)] mb-4"
descriptionClassName="text-lg text-[var(--foreground)] opacity-80 mb-12"
/>
</div>
<div id="testimonials-section" data-section="testimonials-section">
<TestimonialCardSixteen
tag="MÜŞTERI SÖZLERİ"
tagIcon={Star}
tagAnimation="blur-reveal"
title="Binlerce Mutlu Müşteri Bize Güveniyor"
description="Konya'daki projelerimiz hakkında müşterilerimizin gerçek görüşlerini okuyun."
textboxLayout="default"
useInvertedBackground={true}
animationType="blur-reveal"
kpiItems={[
{ value: "300+", label: "Tamamlanan Proje" },
{ value: "500+", label: "Mutlu Müşteri" },
{ value: "%98", label: "Memnuniyet Oranı" }
]}
testimonials={[
{
id: "testimonial-1", name: "Ali K.", role: "Ev Sahibi", company: "Konya", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/confident-business-leader-sitting-table_1262-4870.jpg", imageAlt: "Ali K."
},
{
id: "testimonial-2", name: "Fatma Ş.", role: "İç Mimar", company: "Konya", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-businesswoman_107420-84872.jpg", imageAlt: "Fatma Ş."
},
{
id: "testimonial-3", name: "Mehmet Y.", role: "İşletmeci", company: "Konya", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-suit-looking-camera_23-2148112202.jpg", imageAlt: "Mehmet Y."
},
{
id: "testimonial-4", name: "Selin A.", role: "Tasarımcı", company: "Konya", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-businesswoman-indoors_23-2148824825.jpg", imageAlt: "Selin A."
},
{
id: "testimonial-5", name: "Hakan D.", role: "Mimar", company: "Konya", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-fashionable-well-dressed-man-with-beard-posing-outdoors_1328-3269.jpg", imageAlt: "Hakan D."
},
{
id: "testimonial-6", name: "Zeynep M.", role: "Proje Yöneticisi", company: "Konya", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/friendly-successful-business-lady-wearing-formal-suit-glasses-standing-with-arms-folded-smiling_74855-9932.jpg", imageAlt: "Zeynep M."
}
]}
className="py-24 px-6"
containerClassName="max-w-7xl mx-auto"
titleClassName="text-4xl md:text-5xl font-bold text-[var(--foreground)] mb-4"
descriptionClassName="text-lg text-[var(--foreground)] opacity-80 mb-12"
/>
</div>
<div id="cta-banner-section" data-section="cta-banner-section">
<TestimonialAboutCard
tag="HAZIRLASANIZ MI"
tagIcon={Rocket}
tagAnimation="blur-reveal"
title="Projenizi Konuşalım"
description="Hemen temas kurun ve ücretsiz keşif randevusu alın."
subdescription="Konya'da iç cephe boyama ve duvar kağıdı çözümleri konusunda uzmanız. Yaşam alanınızı dönüştürmek için bize başvurun."
icon={Phone}
imageSrc="http://img.b2bpic.net/free-photo/blonde-charming-woman-silk-black-jumpsuit-stylish-eyeglasses-sits-brown-big-soft-sofa-ho_197531-33650.jpg?_wi=4"
imageAlt="Lagant Boya İletişim"
mediaAnimation="blur-reveal"
useInvertedBackground={false}
className="py-24 px-6"
containerClassName="max-w-6xl mx-auto"
titleClassName="text-5xl md:text-6xl font-bold text-[var(--foreground)] mb-4"
descriptionClassName="text-2xl text-[var(--primary-cta)] font-light mb-4"
subdescriptionClassName="text-lg text-[var(--foreground)] leading-relaxed opacity-90"
/>
</div>
<div id="contact-section" data-section="contact-section">
<ContactFaq
ctaTitle="Bize Yazın"
ctaDescription="Projeniz hakkında detaylı bilgi için buradan iletişime geçebilirsiniz."
ctaButton={{ text: "WhatsApp'tan Mesaj At", href: "https://wa.me/905551234567?text=Merhaba%20Lagant%20Boya,%20bir%20teklif%20almak%20istiyorum." }}
ctaIcon={MessageCircle}
faqs={[
{
id: "faq-1", title: "İç Cephe Boyama Fiyatları Nedir?", content: "İç cephe boyama hizmetlerimiz 100-150 TL/m² aralığında fiyatlandırılmıştır. Kesin fiyat, duvarın durumuna, seçilen boya türüne ve alanın büyüklüğüne göre değişebilir. Ücretsiz keşif için bize başvurun."
},
{
id: "faq-2", title: "Duvar Kağıdı Kurulumu Kaç Gün Sürer?", content: "100 m² bir mekanın duvar kağıdı uygulaması tipik olarak 3-5 iş günü sürer. Süre, desenin karmaşıklığına, duvardaki hazırlık çalışmasına ve alanın erişilebilirliğine bağlı olarak değişiklik gösterebilir."
},
{
id: "faq-3", title: "Hangi Markaların Boyasını Kullanıyorsunuz?", content: "Premium kalite ve uzun ömürlülük için Marshall ve Filli Boya markalarını kullanıyoruz. Tüm ürünler çevre dostu ve hipoalerjenik sertifikasına sahiptir."
},
{
id: "faq-4", title: "Konya'nın Hangi Semtlerine Hizmet Veriyorsunuz?", content: "Konya'nın tüm semtlerine hizmet vermekteyiz: Merkez, Karatay, Meram, Selvili, Çumra ve diğer ilçeler. Ücretsiz keşif ve tavsiye için arayabilirsiniz."
},
{
id: "faq-5", title: "İş Garantisi Veriyor Musunuz?", content: "Evet! Tüm işleri 2 yıl garantisiyle yapmaktayız. İşlemden memnun kalmazsanız, hiçbir ek maliyet olmaksızın düzeltme çalışmalarını gerçekleştiririz."
}
]}
useInvertedBackground={true}
animationType="slide-up"
showCard={true}
className="py-24 px-6"
containerClassName="max-w-6xl mx-auto"
/>
</div>
<div id="footer-section" data-section="footer-section">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/blonde-charming-woman-silk-black-jumpsuit-stylish-eyeglasses-sits-brown-big-soft-sofa-ho_197531-33650.jpg?_wi=5"
imageAlt="Lagant Boya Yapı Dekorasyon"
logoText="LAGANT BOYA"
copyrightText="© 2025 Lagant Boya Yapı Dekorasyon | Tüm Hakları Saklıdır"
columns={[
{
title: "Hızlı Bağlantılar", items: [
{ label: "Ana Sayfa", href: "/" },
{ label: "Hizmetler", href: "#services" },
{ label: "Portfolyo", href: "#portfolio" },
{ label: "İletişim", href: "#contact" }
]
},
{
title: "İletişim Bilgileri", items: [
{ label: "+90 555 123 45 67", href: "tel:+905551234567" },
{ label: "info@lagantboya.com", href: "mailto:info@lagantboya.com" },
{ label: "Konya, Türkiye", href: "#" },
{ label: "Pazartesi-Cuma: 09:00-18:00", href: "#" }
]
},
{
title: "Takip Edin", items: [
{ label: "Instagram", href: "https://instagram.com" },
{ label: "Facebook", href: "https://facebook.com" },
{ label: "WhatsApp", href: "https://wa.me/905551234567" },
{ label: "Google İnceleme", href: "https://maps.google.com" }
]
}
]}
className="bg-[#0a0a0f]"
containerClassName="max-w-7xl mx-auto"
logoTextClassName="text-[var(--primary-cta)] font-bold text-xl tracking-widest"
copyrightTextClassName="text-[var(--foreground)] opacity-60 text-sm"
/>
</div>
</ThemeProvider>
);
}