65 lines
2.7 KiB
TypeScript
65 lines
2.7 KiB
TypeScript
"use client";
|
||
|
||
import { Instagram, Twitter } from "lucide-react";
|
||
import Link from "next/link";
|
||
|
||
interface StatItemProps {
|
||
icon: React.ReactNode;
|
||
label: string;
|
||
sublabel: string;
|
||
}
|
||
|
||
function StatItem({ icon, label, sublabel }: StatItemProps) {
|
||
return (
|
||
<div className="glass p-4 rounded-2xl flex items-center gap-4 min-w-[200px]">
|
||
<div className="w-10 h-10 glass rounded-lg flex items-center justify-center text-white/40">
|
||
{icon}
|
||
</div>
|
||
<div>
|
||
<h4 className="text-white font-bold text-sm leading-tight">{label}</h4>
|
||
<p className="text-white/40 text-[10px] font-medium">{sublabel}</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default function BottomBar() {
|
||
return (
|
||
<div className="absolute bottom-0 left-0 w-full px-6 md:px-8 py-6 md:py-10 flex flex-col md:flex-row items-center md:items-end justify-between gap-6 pointer-events-none">
|
||
{/* Stats Section - Hidden on mobile */}
|
||
<div className="hidden md:flex items-center gap-4 pointer-events-auto">
|
||
<StatItem
|
||
icon={<div className="text-[#1e9a83]">📸</div>}
|
||
label="500+"
|
||
sublabel="Tamamlanan Çekim"
|
||
/>
|
||
<StatItem
|
||
icon={<div className="text-[#1e9a83]">🏢</div>}
|
||
label="150+"
|
||
sublabel="Mutlu Müşteri"
|
||
/>
|
||
<StatItem
|
||
icon={<div className="text-[#1e9a83]">🚁</div>}
|
||
label="Drone"
|
||
sublabel="Profesyonel Çekim"
|
||
/>
|
||
</div>
|
||
|
||
{/* Socials & Scroll Section */}
|
||
<div className="flex flex-col items-center md:items-end gap-4 md:gap-6 pointer-events-auto mb-2">
|
||
<div className="flex items-center gap-6">
|
||
<span className="text-[10px] font-bold tracking-[0.2em] text-white/30 uppercase">Bizi Takip Edin</span>
|
||
<div className="flex items-center gap-4 text-white/60">
|
||
<Link href="#" className="hover:text-white transition-colors"><Instagram className="w-4 h-4" /></Link>
|
||
<Link href="#" className="hover:text-white transition-colors"><Twitter className="w-4 h-4" /></Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Copyright */}
|
||
<div className="md:absolute md:bottom-4 md:left-8 text-[10px] text-white/20 font-medium text-center md:text-left">
|
||
© {new Date().getFullYear()} Muğla Dijital Medya Ajansı. Tüm hakları saklıdır.
|
||
</div>
|
||
</div>
|
||
);
|
||
} |