83 lines
4.2 KiB
TypeScript
83 lines
4.2 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, useState } from "react";
|
||
import { getFeaturedServices } from "@/app/actions";
|
||
import * as LucideIcons from "lucide-react";
|
||
import {
|
||
ArrowRight,
|
||
Layers
|
||
} from "lucide-react";
|
||
import Link from "next/link";
|
||
|
||
export default function Capabilities() {
|
||
const [services, setServices] = useState<any[]>([]);
|
||
|
||
useEffect(() => {
|
||
async function fetchServices() {
|
||
const data = await getFeaturedServices();
|
||
|
||
if (data && data.length > 0) {
|
||
setServices(data);
|
||
}
|
||
}
|
||
fetchServices();
|
||
}, []);
|
||
|
||
const DynamicIcon = ({ name, className }: { name: string, className?: string }) => {
|
||
const IconComponent = (LucideIcons as any)[name] || Layers;
|
||
return <IconComponent className={className} />;
|
||
};
|
||
|
||
// Fallback static data if database is empty
|
||
const displayData = services.length > 0 ? services : [
|
||
{ title: "Art Direction", description: "Conceptualizing visual narratives that resonate. We define the look and feel before the camera even rolls.", icon_name: "Palette" },
|
||
{ title: "Cinematography", description: "Capturing light and shadow with state-of-the-art gear. 8K workflows and cinema-grade optics.", icon_name: "Video" },
|
||
{ title: "Motion Graphics", description: "Adding kinetic energy to static visuals. 2D and 3D animation that enhances the storytelling.", icon_name: "Clapperboard" },
|
||
{ title: "Color Grading", description: "Setting the mood with precise color science. We ensure your visuals look perfect on every screen.", icon_name: "Contrast" }
|
||
];
|
||
|
||
return (
|
||
<section className="py-16 md:py-24 px-6 md:px-16 lg:px-24">
|
||
<div className="max-w-7xl mx-auto flex flex-col lg:flex-row gap-8 md:gap-16 items-start">
|
||
{/* Left Content */}
|
||
<div className="lg:w-1/3 w-full">
|
||
<h2 className="text-3xl md:text-5xl font-bold mb-6 text-black italic tracking-tighter uppercase leading-tight">Yeteneklerimiz</h2>
|
||
<p className="text-white/60 text-lg mb-8 leading-relaxed">
|
||
Fikir aşamasından final renk düzenlemesine kadar, görsel üretim sürecinin her adımını takıntılı derecede yüksek standartlarla yönetiyoruz.
|
||
</p>
|
||
<Link
|
||
href="/services"
|
||
className="group flex items-center gap-2 text-[#1e9a83] font-semibold hover:text-white transition-colors"
|
||
>
|
||
Tüm Hizmetleri Gör
|
||
<ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
|
||
</Link>
|
||
</div>
|
||
|
||
{/* Right Grid - Restored to Original Design */}
|
||
<div className="lg:w-2/3 w-full border border-white/10 rounded-3xl overflow-hidden grid grid-cols-1 md:grid-cols-2">
|
||
{services.map((service, index) => (
|
||
<div
|
||
key={service.id || index}
|
||
className={`p-10 flex flex-col gap-4 hover:bg-white/[0.02] transition-colors border-white/10
|
||
${index === 0 ? "border-b md:border-r" : ""}
|
||
${index === 1 ? "border-b md:border-b" : ""}
|
||
${index === 2 ? "md:border-r border-b md:border-b-0" : ""}
|
||
${index === 3 ? "" : ""}
|
||
`}
|
||
>
|
||
<div className="w-12 h-12 rounded-xl bg-[#1e9a83]/10 flex items-center justify-center text-[#1e9a83]">
|
||
<DynamicIcon name={service.icon_name} className="w-6 h-6" />
|
||
</div>
|
||
<h3 className="text-xl font-bold text-white mt-2 uppercase italic tracking-tight">{service.title}</h3>
|
||
<p className="text-white/40 leading-relaxed text-sm font-medium">
|
||
{service.description}
|
||
</p>
|
||
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
} |