feat: add dynamic site settings, hero media, admin panels, and database integration

components/Hero.tsx

@@ -4,22 +4,33 @@ import { motion } from "framer-motion";
 import { ChevronDown } from "lucide-react";
 import Image from "next/image";
 
-export default function Hero({ dict }: { dict: any }) {
+export default function Hero({ dict, dbHeroMedia }: { dict: any, dbHeroMedia?: any }) {
   const words = ["MOY", "BEACH"];
 
   return (
     <section className="relative h-screen w-full flex items-center justify-center overflow-hidden">
 
-      {/* Background Image */}
+      {/* Background Media */}
       <div className="absolute inset-0">
-        <Image
-          src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?auto=format&fit=crop&q=85&w=2400"
-          alt="Moy Beach Akyaka"
-          fill
-          className="object-cover object-center"
-          priority
-          sizes="100vw"
-        />
+        {dbHeroMedia?.type === 'video' ? (
+          <video
+            src={dbHeroMedia.url}
+            autoPlay
+            loop
+            muted
+            playsInline
+            className="w-full h-full object-cover object-center"
+          />
+        ) : (
+          <Image
+            src={dbHeroMedia?.url || "https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?auto=format&fit=crop&q=85&w=2400"}
+            alt="Moy Beach Akyaka"
+            fill
+            className="object-cover object-center"
+            priority
+            sizes="100vw"
+          />
+        )}
       </div>
 
       {/* Multi-layer gradient for depth */}