initial commit: project completion with proper gitignore

2026-05-16 00:43:22 +03:00
commit e708ba2156
84 changed files with 11035 additions and 0 deletions
--- a/components/Capabilities.tsx
+++ b/components/Capabilities.tsx
@@ -0,0 +1,83 @@
+"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">
+                    <h2 className="text-4xl md:text-5xl font-bold mb-6 text-white italic tracking-tighter uppercase">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>
+    );
+}