336 lines
17 KiB
TypeScript
336 lines
17 KiB
TypeScript
"use client";
|
||
|
||
import { motion, useScroll, useTransform } from "framer-motion";
|
||
import { useRef } from "react";
|
||
import type { DemoData } from "@/data/demos";
|
||
import AnimatedCounter from "@/components/ui/AnimatedCounter";
|
||
|
||
const easeOutExpo = [0.16, 1, 0.3, 1] as [number, number, number, number];
|
||
|
||
const fadeUp = {
|
||
hidden: { opacity: 0, y: 40 },
|
||
show: { opacity: 1, y: 0, transition: { duration: 0.7, ease: easeOutExpo } },
|
||
};
|
||
const stagger = { hidden: {}, show: { transition: { staggerChildren: 0.1 } } };
|
||
|
||
export default function KurumsalTemplate({ data }: { data: DemoData }) {
|
||
const { firma, istatistikler, hizmetler, yorumlar, projeler = [], ekip = [] } = data;
|
||
const heroRef = useRef<HTMLDivElement>(null);
|
||
const { scrollYProgress } = useScroll({ target: heroRef, offset: ["start start", "end start"] });
|
||
const heroY = useTransform(scrollYProgress, [0, 1], ["0%", "20%"]);
|
||
|
||
return (
|
||
<div className="bg-[#FAF9F6] text-[#1C1917] font-body">
|
||
|
||
{/* ── HEADER ── */}
|
||
<motion.header
|
||
className="fixed top-0 left-0 right-0 z-50 px-6 pt-5"
|
||
initial={{ y: -80 }}
|
||
animate={{ y: 0 }}
|
||
transition={{ duration: 0.6, ease: easeOutExpo }}>
|
||
<div className="mx-auto max-w-6xl px-6 h-16 flex items-center justify-between bg-[#FAF9F6]/80 backdrop-blur-md border border-[#E7E5E4] rounded-full">
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-8 h-8 rounded-lg bg-[#1C1917] flex items-center justify-center text-sm font-bold text-[#FAF9F6]">
|
||
{firma.logoEmoji}
|
||
</div>
|
||
<span className="font-display font-bold text-[15px] tracking-tight">{firma.adi}</span>
|
||
</div>
|
||
<nav className="hidden md:flex items-center gap-8">
|
||
{["Hizmetler", "Projeler", "Ekip", "İletişim"].map(item => (
|
||
<a key={item} href={`#${item.toLowerCase()}`}
|
||
className="text-[12px] font-medium tracking-tight text-[#78716C] hover:text-[#1C1917] transition-colors">
|
||
{item}
|
||
</a>
|
||
))}
|
||
</nav>
|
||
<motion.a href="#iletisim"
|
||
className="hidden md:flex items-center gap-2 text-[12px] font-bold text-[#FAF9F6] bg-[#1C1917] px-5 py-2.5 rounded-full hover:bg-[#33302E] transition-colors"
|
||
whileTap={{ scale: 0.97 }}>
|
||
Teklif Al
|
||
</motion.a>
|
||
</div>
|
||
</motion.header>
|
||
|
||
{/* ── HERO ── */}
|
||
<section ref={heroRef} className="relative min-h-screen flex items-center overflow-hidden bg-[#FAF9F6] pt-24">
|
||
{/* Subtle grid pattern */}
|
||
<div className="absolute inset-0 pointer-events-none opacity-[0.03]"
|
||
style={{ backgroundImage: "radial-gradient(#1C1917 1px, transparent 1px)", backgroundSize: "32px 32px" }} />
|
||
|
||
<div className="relative z-10 max-w-6xl mx-auto px-6 w-full grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
|
||
|
||
<motion.div className="lg:col-span-8" variants={stagger} initial="hidden" animate="show">
|
||
<motion.div variants={fadeUp}
|
||
className="inline-flex items-center gap-2 text-[11px] font-bold uppercase tracking-wider text-[#78716C] mb-8"
|
||
>
|
||
<span className="w-1.5 h-1.5 rounded-full bg-[#10B981]" />
|
||
{firma.sehir} · {istatistikler[0]?.deger} Lojistik Hizmeti
|
||
</motion.div>
|
||
|
||
<motion.h1 variants={fadeUp}
|
||
className="font-display font-black text-[12vw] sm:text-[8vw] lg:text-[5vw] leading-[0.9] tracking-tight uppercase text-[#1C1917] mb-8">
|
||
Lojistikte<br />
|
||
<span className="text-transparent stroke-text" style={{ WebkitTextStroke: "1px #1C1917" }}>Yeni Nesil</span> Ağı.
|
||
</motion.h1>
|
||
|
||
<motion.p variants={fadeUp} className="text-[#57534E] text-base sm:text-lg leading-relaxed max-w-xl mb-10 font-light">
|
||
{firma.slogan}. Tedarik zincirinizin uçtan uca akışını optimize etmek için geliştirilmiş son derece güvenli ve anlık takip edilebilen operasyon sistemleri.
|
||
</motion.p>
|
||
|
||
<motion.div variants={fadeUp} className="flex flex-wrap gap-4 mb-12">
|
||
<motion.a href="#iletisim"
|
||
className="flex items-center justify-center px-8 py-4 rounded-full font-bold text-[13px] tracking-wide uppercase bg-[#1C1917] text-[#FAF9F6] cursor-pointer hover:bg-[#33302E] transition-all duration-200"
|
||
whileTap={{ scale: 0.97 }}>
|
||
Teklif Al →
|
||
</motion.a>
|
||
<motion.a href="#projeler"
|
||
className="flex items-center justify-center px-8 py-4 rounded-full font-bold text-[13px] tracking-wide uppercase border border-[#E7E5E4] text-[#1C1917] hover:bg-[#E7E5E4]/20 transition-all cursor-pointer duration-200"
|
||
whileTap={{ scale: 0.97 }}>
|
||
Referanslar
|
||
</motion.a>
|
||
</motion.div>
|
||
|
||
{/* Stats row */}
|
||
<motion.div variants={fadeUp}
|
||
className="grid grid-cols-2 sm:grid-cols-4 gap-6 pt-10 border-t border-[#E7E5E4]">
|
||
{istatistikler.map((s, i) => (
|
||
<div key={i}>
|
||
<div className="text-3xl font-display font-black text-[#1C1917]">
|
||
<AnimatedCounter target={parseInt(s.deger.replace(/\D/g, "")) || 0}
|
||
suffix={s.deger.replace(/[0-9]/g, "")} />
|
||
</div>
|
||
<div className="text-[#78716C] text-[10px] uppercase tracking-wider font-semibold mt-1">{s.etiket}</div>
|
||
</div>
|
||
))}
|
||
</motion.div>
|
||
</motion.div>
|
||
|
||
{/* Bento grid right side */}
|
||
<motion.div
|
||
className="lg:col-span-4 hidden lg:grid grid-cols-2 gap-4"
|
||
initial={{ opacity: 0, x: 60 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.9, delay: 0.3 }}
|
||
style={{ y: heroY }}
|
||
>
|
||
{hizmetler.slice(0, 4).map((h, i) => (
|
||
<div key={i} className="bg-[#FAF9F6] border border-[#E7E5E4] rounded-3xl p-6 shadow-sm">
|
||
<div className="w-10 h-10 rounded-xl bg-[#1C1917]/5 flex items-center justify-center mb-4 text-xl">
|
||
{h.ikon}
|
||
</div>
|
||
<h3 className="font-display font-black text-[12px] uppercase text-[#1C1917] mb-1">{h.baslik}</h3>
|
||
<p className="text-[#78716C] text-[10px] leading-relaxed font-light">{h.aciklama}</p>
|
||
</div>
|
||
))}
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── HİZMETLER TAM ── */}
|
||
<section id="hizmetler" className="py-24 px-6 border-t border-[#E7E5E4] bg-[#FAF9F6]">
|
||
<div className="max-w-6xl mx-auto">
|
||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6 border-b border-[#E7E5E4] pb-12 mb-16">
|
||
<div className="lg:col-span-5">
|
||
<span className="inline-block text-[11px] font-bold uppercase tracking-widest px-3 py-1 bg-[#FAF9F6] border border-[#E7E5E4] rounded-full text-[#78716C] mb-4">
|
||
Uçtan Uca Çözümler
|
||
</span>
|
||
<h2 className="font-display font-black text-4xl sm:text-5xl uppercase leading-tight tracking-tight text-[#1C1917]">
|
||
Kapsamlı Lojistik Paketi
|
||
</h2>
|
||
</div>
|
||
<div className="lg:col-span-7 flex items-end">
|
||
<p className="text-[#57534E] text-base leading-relaxed font-light lg:pl-8 border-l border-transparent lg:border-[#E7E5E4]">
|
||
Operasyonel mükemmeliyetçiliği temel alan depolama, yurt içi dağıtım ve anlık takip sistemlerimizle tedarik zincirinize tam entegrasyon sunuyoruz.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
{hizmetler.map((h, i) => (
|
||
<motion.div key={i}
|
||
className="bg-[#FAF9F6] border border-[#E7E5E4] rounded-3xl p-8 hover:border-[#1C1917] transition-all duration-300 flex flex-col justify-between min-h-[220px]"
|
||
whileHover={{ y: -4 }}
|
||
initial="hidden"
|
||
whileInView="show"
|
||
viewport={{ once: true }}
|
||
variants={fadeUp}>
|
||
<div>
|
||
<div className="w-10 h-10 rounded-xl bg-[#1C1917]/5 flex items-center justify-center mb-6 text-xl">
|
||
{h.ikon}
|
||
</div>
|
||
<h3 className="font-display font-black text-xl uppercase text-[#1C1917] mb-2">{h.baslik}</h3>
|
||
<p className="text-[#57534E] text-[13px] leading-relaxed font-light">{h.aciklama}</p>
|
||
</div>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── REFERANSLAR ── */}
|
||
<section id="projeler" className="py-24 px-6 border-t border-[#E7E5E4] bg-[#FAF9F6]">
|
||
<div className="max-w-6xl mx-auto">
|
||
<div className="mb-16">
|
||
<span className="inline-block text-[11px] font-bold uppercase tracking-widest px-3 py-1 bg-[#FAF9F6] border border-[#E7E5E4] rounded-full text-[#78716C] mb-4">
|
||
Güçlü Referanslar
|
||
</span>
|
||
<h2 className="font-display font-black text-4xl sm:text-5xl uppercase tracking-tight text-[#1C1917]">
|
||
Birlikte Yol Aldıklarımız
|
||
</h2>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
{projeler.map((p, i) => (
|
||
<motion.div key={i}
|
||
className="bg-[#FAF9F6] border border-[#E7E5E4] rounded-3xl p-7 flex flex-col justify-between hover:border-[#1C1917] transition-all duration-300 relative overflow-hidden"
|
||
whileHover={{ y: -4 }}
|
||
initial="hidden"
|
||
whileInView="show"
|
||
viewport={{ once: true }}
|
||
variants={fadeUp}>
|
||
<div className="flex items-start gap-5">
|
||
<div className="w-14 h-14 rounded-2xl flex items-center justify-center text-2xl shrink-0"
|
||
style={{ background: `${p.renk}10` }}>
|
||
{p.ikon}
|
||
</div>
|
||
<div>
|
||
<div className="flex items-center gap-3 mb-2">
|
||
<h3 className="font-display font-black text-[16px] uppercase text-[#1C1917]">{p.baslik}</h3>
|
||
<span className="text-[10px] font-bold px-2 py-0.5 rounded-full"
|
||
style={{ background: `${p.renk}10`, color: p.renk }}>
|
||
{p.sektor}
|
||
</span>
|
||
</div>
|
||
<p className="text-[#57534E] text-[13px] leading-relaxed font-light">{p.aciklama}</p>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── EKİP ── */}
|
||
{ekip.length > 0 && (
|
||
<section id="ekip" className="py-24 px-6 border-t border-[#E7E5E4] bg-[#FAF9F6]">
|
||
<div className="max-w-6xl mx-auto">
|
||
<div className="mb-16">
|
||
<span className="inline-block text-[11px] font-bold uppercase tracking-widest px-3 py-1 bg-[#FAF9F6] border border-[#E7E5E4] rounded-full text-[#78716C] mb-4">
|
||
Operasyon Liderleri
|
||
</span>
|
||
<h2 className="font-display font-black text-4xl sm:text-5xl uppercase tracking-tight text-[#1C1917]">
|
||
Yönetim Ekibimiz
|
||
</h2>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
{ekip.map((k, i) => (
|
||
<motion.div key={i}
|
||
className="bg-[#FAF9F6] border border-[#E7E5E4] rounded-3xl overflow-hidden hover:border-[#1C1917] transition-all duration-300 flex flex-col justify-between"
|
||
whileHover={{ y: -6 }}
|
||
initial="hidden"
|
||
whileInView="show"
|
||
viewport={{ once: true }}
|
||
variants={fadeUp}>
|
||
<div className="h-40 bg-[#FAF9F6] border-b border-[#E7E5E4] flex items-center justify-center text-5xl">
|
||
<span>{k.emoji}</span>
|
||
</div>
|
||
<div className="p-6">
|
||
<h3 className="font-display font-black text-[15px] uppercase text-[#1C1917]">{k.ad}</h3>
|
||
<p className="text-[12px] font-bold uppercase tracking-wider text-[#78716C] mt-0.5">{k.rol}</p>
|
||
</div>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)}
|
||
|
||
{/* ── YORUMLAR ── */}
|
||
<section id="yorumlar" className="py-24 px-6 border-t border-[#E7E5E4] bg-[#FAF9F6]">
|
||
<div className="max-w-6xl mx-auto">
|
||
<div className="mb-16">
|
||
<span className="inline-block text-[11px] font-bold uppercase tracking-widest px-3 py-1 bg-[#FAF9F6] border border-[#E7E5E4] rounded-full text-[#78716C] mb-4">
|
||
Müşteri Deneyimleri
|
||
</span>
|
||
<h2 className="font-display font-black text-4xl sm:text-5xl uppercase tracking-tight text-[#1C1917]">
|
||
Ortaklarımız Ne Söylüyor?
|
||
</h2>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||
{yorumlar.map((y, i) => (
|
||
<motion.div key={i}
|
||
className="bg-[#FAF9F6] border border-[#E7E5E4] rounded-3xl p-7 hover:border-[#1C1917] transition-all duration-300 flex flex-col justify-between"
|
||
whileHover={{ y: -4 }}
|
||
initial="hidden"
|
||
whileInView="show"
|
||
viewport={{ once: true }}
|
||
variants={fadeUp}>
|
||
<div>
|
||
<div className="flex gap-1 mb-4">
|
||
{[...Array(y.puan)].map((_, j) => (
|
||
<span key={j} className="text-[#10B981]">★</span>
|
||
))}
|
||
</div>
|
||
<p className="text-[#57534E] text-[13px] leading-relaxed italic mb-6 font-light">“{y.yorum}”</p>
|
||
</div>
|
||
<div className="flex items-center gap-3 pt-4 border-t border-[#E7E5E4]/60">
|
||
<span className="text-xl">{y.emoji}</span>
|
||
<div>
|
||
<p className="text-[#1C1917] font-bold text-xs uppercase tracking-tight">{y.yazar}</p>
|
||
<p className="text-gray-400 text-[10px] mt-0.5">{y.tarih}</p>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── İLETİŞİM ── */}
|
||
<section id="iletisim" className="py-24 px-6 border-t border-[#E7E5E4] bg-[#FAF9F6]">
|
||
<div className="max-w-4xl mx-auto text-center">
|
||
<span className="inline-block text-[11px] font-bold uppercase tracking-widest px-3 py-1 bg-[#FAF9F6] border border-[#E7E5E4] rounded-full text-[#78716C] mb-4">
|
||
Operational Blueprint
|
||
</span>
|
||
<h2 className="font-display font-black text-4xl sm:text-5xl uppercase tracking-tight text-[#1C1917] mb-6">
|
||
Birlikte Değer Katalım
|
||
</h2>
|
||
<p className="text-[#57534E] text-lg font-light mb-10 max-w-xl mx-auto">
|
||
Hacminiz ve operasyon sıklığınız ne olursa olsun, lojistik süreçlerinizi en güvenli hatlarla optimize etmek üzere teklif isteyin.
|
||
</p>
|
||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||
<motion.a href={`tel:${firma.telefon}`}
|
||
className="flex items-center justify-center gap-2 px-8 py-4 rounded-full bg-[#1C1917] text-[#FAF9F6] font-bold text-[13px] tracking-wide uppercase hover:bg-[#33302E] transition-colors"
|
||
whileHover={{ scale: 1.04 }} whileTap={{ scale: 0.97 }}>
|
||
📞 {firma.telefon}
|
||
</motion.a>
|
||
<motion.a href={`mailto:${firma.email}`}
|
||
className="flex items-center justify-center gap-2 px-8 py-4 rounded-full border border-[#E7E5E4] text-[#1C1917] font-bold text-[13px] tracking-wide uppercase hover:bg-[#E7E5E4]/20 transition-all"
|
||
whileHover={{ scale: 1.04 }} whileTap={{ scale: 0.97 }}>
|
||
✉️ {firma.email}
|
||
</motion.a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── FOOTER ── */}
|
||
<footer className="border-t border-[#E7E5E4] bg-[#FAF9F6] px-6 pt-16 pb-8">
|
||
<div className="max-w-6xl mx-auto flex flex-col sm:flex-row justify-between items-center gap-4 text-[12px] text-[#78716C]">
|
||
<p>© 2026 {firma.adi}. Tüm hakları saklıdır.</p>
|
||
<p className="hover:text-[#1C1917] transition-colors font-light">Gizlilik Politikası</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<style jsx global>{`
|
||
.stroke-text {
|
||
font-weight: 900;
|
||
color: transparent;
|
||
}
|
||
`}</style>
|
||
|
||
</div>
|
||
);
|
||
}
|