ayrisdev/mugladijitalmedya
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial commit: project completion with proper gitignore

Browse Source
This commit is contained in:
AyrisAI
2026-05-16 00:43:22 +03:00
commit e708ba2156
84 changed files with 11035 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
components/ServicesClient.tsx Normal file
View File

@@ -0,0 +1,128 @@
"use client";
import { useState } from "react";
import Image from "next/image";
import Link from "next/link";
import * as LucideIcons from "lucide-react";
import {
ArrowRight,
Layers,
Search,
Clapperboard,
Camera,
Zap
} from "lucide-react";
import Footer from "@/components/Footer";
const processSteps = [
{ icon: Search, title: "Analiz", desc: "İşletmenizi ve hedef kitlenizi analiz ediyoruz." },
{ icon: Clapperboard, title: "Strateji", desc: "Size özel dijital strateji planlıyoruz." },
{ icon: Camera, title: "Uygulama", desc: "Çekim, tasarım ve kampanya yönetimi." },
{ icon: Zap, title: "Raporlama", desc: "Sonuçları ölçüyor ve optimize ediyoruz." }
];
export default function ServicesClient({ services: initialServices }: { services: any[] }) {
const [services] = useState<any[]>(initialServices);
const DynamicIcon = ({ name, className }: { name: string, className?: string }) => {
const IconComponent = (LucideIcons as any)[name] || Layers;
return <IconComponent className={className} />;
};
return (
<main className="min-h-screen bg-[#f5f5f0] text-black pt-24">
{/* Hero Section */}
<section className="pt-24 pb-16 px-6 md:px-12 border-b border-black/10">
<div className="max-w-7xl mx-auto">
<span className="text-[10px] tracking-[0.2em] uppercase text-black/40 block mb-6">Hizmetlerimiz</span>
<h1 className="editorial-headline text-4xl md:text-6xl lg:text-[5.5rem] text-black reveal opacity-0 uppercase">
Drone · Video <br /> <span className="text-primary">Reklam · Dijital</span>
</h1>
<p className="text-black/40 text-[14px] max-w-2xl leading-relaxed mt-10 reveal reveal-delayed-1 opacity-0">
Profesyonel drone çekimlerinden sosyal medya yönetimine, Google reklamlarından web tasarıma — işletmenizin dijital dünyada parlaması için ihtiyacınız olan her şey burada.
</p>
</div>
</section>
{/* Services Grid - Editorial Bento */}
<section className="py-24 px-6 md:px-12 border-b border-black/10">
<div className="max-w-7xl mx-auto">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 border-t border-l border-black/10">
{services.map((item) => (
<div key={item.id} className="p-10 border-r border-b border-black/10 relative group hover:bg-black/[0.01] transition-colors overflow-hidden flex flex-col justify-between min-h-[350px]">
<div>
<div className="w-10 h-10 border border-black/10 flex items-center justify-center text-primary mb-8">
<DynamicIcon name={item.icon_name} className="w-5 h-5" />
</div>
<h3 className="editorial-headline text-2xl text-black mb-4 uppercase">{item.title}</h3>
<p className="text-[12px] text-black/40 leading-relaxed font-medium mb-8">
{item.description}
</p>
</div>
<ul className="space-y-3">
{(item.sub_services || []).slice(0, 3).map((sub: string) => (
<li key={sub} className="flex items-center gap-3 text-[9px] font-bold tracking-widest text-black/20 uppercase">
<div className="w-1 h-1 rounded-full bg-primary" />
{sub}
</li>
))}
</ul>
{/* Subtle diagonal on hover */}
<div className="absolute top-0 right-0 w-16 h-16 opacity-0 group-hover:opacity-100 transition-opacity">
<div className="absolute top-0 right-0 w-px h-24 bg-black/5 rotate-[-45deg] origin-top-right" />
</div>
</div>
))}
</div>
</div>
</section>
{/* The Process - Editorial Layout */}
<section className="py-24 px-6 md:px-12 border-b border-black/10">
<div className="max-w-7xl mx-auto">
<div className="mb-20">
<span className="text-[10px] tracking-[0.2em] uppercase text-black/40 block mb-4">İş Akışımız</span>
<h2 className="editorial-headline text-3xl md:text-5xl text-black uppercase">Süreç Nasıl İlerler?</h2>
</div>
<div className="grid grid-cols-1 md:grid-cols-4 border-t border-black/10">
{processSteps.map((step, idx) => (
<div key={step.title} className="py-12 md:px-8 border-b md:border-b-0 md:border-r border-black/10 last:border-r-0 group">
<div className="text-4xl font-black text-black/5 mb-8 group-hover:text-primary/20 transition-colors">0{idx + 1}</div>
<div className="w-8 h-8 border border-black/10 flex items-center justify-center text-primary mb-6">
<step.icon className="w-4 h-4" />
</div>
<h3 className="editorial-headline text-lg text-black mb-4 uppercase">{step.title}</h3>
<p className="text-[12px] text-black/40 leading-relaxed">{step.desc}</p>
</div>
))}
</div>
</div>
</section>
{/* CTA Section */}
<section className="py-24 px-6 text-center">
<div className="max-w-4xl mx-auto space-y-12">
<h2 className="editorial-headline text-4xl md:text-6xl text-black uppercase leading-tight">
Sıradışı Bir Şeyler <br /> <span className="text-primary">Yaratmaya Hazır Mısınız?</span>
</h2>
<p className="text-black/40 text-[13px] tracking-[0.1em] max-w-xl mx-auto">
Drone çekimi, sosyal medya yönetimi veya dijital reklam — ne ihtiyacınız varsa, birlikte çözüm üretelim.
</p>
<div className="flex flex-col sm:flex-row items-center justify-center gap-6">
<Link href="/contact" className="button-primary px-10">
Hemen Başlayalım
</Link>
<Link href="/works" className="button-secondary px-10">
Portfolyomuz
</Link>
</div>
</div>
</section>
<Footer />
</main>
);
}