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

components/About.tsx

@@ -11,9 +11,34 @@ const features = [
   { icon: Music, titleKey: 'card3_title', descKey: 'card3_desc', color: 'text-coral',  bg: 'bg-coral/10'  },
 ];
 
-export default function About() {
+export default function About({ dbAbout }: { dbAbout?: any }) {
   const t = useTranslations('About');
 
+  const titleVal = dbAbout?.title || t('title');
+  const descVal = dbAbout?.description || t('description');
+  const imgUrl = dbAbout?.image || "https://picsum.photos/800/1100?random=2";
+
+  const featuresList = [
+    { 
+      icon: Waves, 
+      title: dbAbout?.card1Title || t('card1_title'), 
+      desc: dbAbout?.card1Desc || t('card1_desc'), 
+      color: 'text-aqua',   bg: 'bg-aqua/10'   
+    },
+    { 
+      icon: Leaf,  
+      title: dbAbout?.card2Title || t('card2_title'), 
+      desc: dbAbout?.card2Desc || t('card2_desc'), 
+      color: 'text-amber',  bg: 'bg-amber/10'  
+    },
+    { 
+      icon: Music, 
+      title: dbAbout?.card3Title || t('card3_title'), 
+      desc: dbAbout?.card3Desc || t('card3_desc'), 
+      color: 'text-coral',  bg: 'bg-coral/10'  
+    },
+  ];
+
   return (
     <section id="about" className="py-28 bg-sand text-midnight relative">
       <div className="container mx-auto px-6 lg:px-12">
@@ -32,15 +57,15 @@ export default function About() {
                 — Beach &amp; More
               </span>
               <h2 className="font-heading text-5xl md:text-6xl font-black leading-tight text-midnight mb-6">
-                {t('title')}
+                {titleVal}
               </h2>
-              <p className="text-lg leading-relaxed text-midnight/60">{t('description')}</p>
+              <p className="text-lg leading-relaxed text-midnight/60 whitespace-pre-wrap">{descVal}</p>
             </div>
 
             <div className="space-y-2">
-              {features.map(({ icon: Icon, titleKey, descKey, color, bg }, i) => (
+              {featuresList.map(({ icon: Icon, title, desc, color, bg }, i) => (
                 <motion.div
-                  key={titleKey}
+                  key={title}
                   initial={{ opacity: 0, x: -20 }}
                   whileInView={{ opacity: 1, x: 0 }}
                   viewport={{ once: true }}
@@ -51,8 +76,8 @@ export default function About() {
                     <Icon size={20} />
                   </div>
                   <div>
-                    <h3 className="font-heading text-lg font-bold mb-0.5">{t(titleKey)}</h3>
-                    <p className="text-midnight/55 text-sm leading-relaxed">{t(descKey)}</p>
+                    <h3 className="font-heading text-lg font-bold mb-0.5">{title}</h3>
+                    <p className="text-midnight/55 text-sm leading-relaxed">{desc}</p>
                   </div>
                 </motion.div>
               ))}
@@ -74,9 +99,10 @@ export default function About() {
             />
             <div className="relative h-[560px] w-full rounded-3xl overflow-hidden shadow-2xl">
               <Image
-                src="https://picsum.photos/800/1100?random=2"
+                src={imgUrl}
                 alt="Kozmos atmosferi"
                 fill
+                priority
                 sizes="(max-width: 1024px) 100vw, 50vw"
                 className="object-cover"
               />