feat: integrate Cloudinary image upload, Instagram Feed, and fix Next.js warnings

components/admin/AboutClient.tsx

@@ -0,0 +1,187 @@
+"use client";
+
+import { useState } from "react";
+import { Save } from "lucide-react";
+import { updateAboutSettings } from "@/app/actions/about";
+import ImageUpload from "@/components/admin/ImageUpload";
+
+type AboutSettings = {
+  title: string;
+  description: string;
+  card1Title: string;
+  card1Desc: string;
+  card2Title: string;
+  card2Desc: string;
+  card3Title: string;
+  card3Desc: string;
+  image: string;
+};
+
+export default function AboutClient({ settings }: { settings: AboutSettings }) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [successMessage, setSuccessMessage] = useState<string | null>(null);
+  const [image, setImage] = useState(settings.image);
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+    setSuccessMessage(null);
+
+    const formData = new FormData(e.currentTarget);
+    const result = await updateAboutSettings(formData);
+
+    if (result.success) {
+      setSuccessMessage("Hakkımızda ayarları başarıyla kaydedildi.");
+    } else {
+      setError(result.error || "Bir hata oluştu");
+    }
+    setLoading(false);
+  };
+
+  return (
+    <div className="p-8 max-w-4xl">
+      <div className="mb-8">
+        <h1 className="text-3xl font-serif text-gray-900">Hakkımızda Yönetimi</h1>
+        <p className="text-gray-500 mt-2">
+          Site üzerindeki Hakkımızda bölümünün metinlerini ve ana görselini buradan değiştirebilirsiniz.
+        </p>
+      </div>
+
+      <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
+        <form onSubmit={handleSubmit} className="p-6 space-y-6">
+          
+          {error && (
+            <div className="bg-red-50 text-red-600 p-4 rounded-lg text-sm font-medium">
+              {error}
+            </div>
+          )}
+
+          {successMessage && (
+            <div className="bg-green-50 text-green-600 p-4 rounded-lg text-sm font-medium">
+              {successMessage}
+            </div>
+          )}
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Başlık</label>
+            <input 
+              name="title" 
+              defaultValue={settings.title}
+              required 
+              className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none"
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Açıklama (Ana Metin)</label>
+            <textarea 
+              name="description" 
+              defaultValue={settings.description}
+              required 
+              rows={4}
+              className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none resize-none"
+            />
+          </div>
+
+          <div className="border-t border-gray-100 pt-6">
+            <h3 className="text-lg font-medium text-gray-900 mb-4">Kart 1 (Örn: Kusursuz Sahil)</h3>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div>
+                <label className="block text-xs font-medium text-gray-700 mb-1">Başlık</label>
+                <input 
+                  name="card1Title" 
+                  defaultValue={settings.card1Title}
+                  required 
+                  className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none"
+                />
+              </div>
+              <div>
+                <label className="block text-xs font-medium text-gray-700 mb-1">Açıklama</label>
+                <input 
+                  name="card1Desc" 
+                  defaultValue={settings.card1Desc}
+                  required 
+                  className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none"
+                />
+              </div>
+            </div>
+          </div>
+
+          <div className="border-t border-gray-100 pt-6">
+            <h3 className="text-lg font-medium text-gray-900 mb-4">Kart 2 (Örn: Gastronomi)</h3>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div>
+                <label className="block text-xs font-medium text-gray-700 mb-1">Başlık</label>
+                <input 
+                  name="card2Title" 
+                  defaultValue={settings.card2Title}
+                  required 
+                  className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none"
+                />
+              </div>
+              <div>
+                <label className="block text-xs font-medium text-gray-700 mb-1">Açıklama</label>
+                <input 
+                  name="card2Desc" 
+                  defaultValue={settings.card2Desc}
+                  required 
+                  className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none"
+                />
+              </div>
+            </div>
+          </div>
+
+          <div className="border-t border-gray-100 pt-6">
+            <h3 className="text-lg font-medium text-gray-900 mb-4">Kart 3 (Örn: Canlı Eğlence)</h3>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div>
+                <label className="block text-xs font-medium text-gray-700 mb-1">Başlık</label>
+                <input 
+                  name="card3Title" 
+                  defaultValue={settings.card3Title}
+                  required 
+                  className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none"
+                />
+              </div>
+              <div>
+                <label className="block text-xs font-medium text-gray-700 mb-1">Açıklama</label>
+                <input 
+                  name="card3Desc" 
+                  defaultValue={settings.card3Desc}
+                  required 
+                  className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none"
+                />
+              </div>
+            </div>
+          </div>
+
+          <div className="border-t border-gray-100 pt-6">
+            <h3 className="text-lg font-medium text-gray-900 mb-4">Sağ Bölüm Görseli</h3>
+            <div>
+              <label className="block text-xs font-medium text-gray-700 mb-1">Görsel Yükle</label>
+              <ImageUpload
+                name="image"
+                value={image}
+                onChange={setImage}
+                label="Yeni Görsel Yükle"
+              />
+            </div>
+          </div>
+
+          <div className="pt-4 flex justify-end border-t border-gray-100">
+            <button 
+              type="submit" 
+              disabled={loading}
+              className="bg-turquoise text-white px-8 py-2.5 rounded-lg hover:bg-turquoise/90 transition-colors disabled:opacity-50 flex items-center gap-2"
+            >
+              <Save size={18} />
+              {loading ? "Kaydediliyor..." : "Ayarları Kaydet"}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}