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

components/Services.tsx

@@ -4,8 +4,8 @@ import { motion } from "framer-motion";
 import { Waves, UtensilsCrossed, Hotel, CalendarHeart } from "lucide-react";
 import Image from "next/image";
 
-export default function Services({ dict }: { dict: any }) {
-  const services = [
+export default function Services({ dict, dbServices }: { dict: any, dbServices?: any[] }) {
+  const defaultServices = [
     {
       title: dict.services.items.beach.title,
       description: dict.services.items.beach.description,
@@ -32,6 +32,15 @@ export default function Services({ dict }: { dict: any }) {
     },
   ];
 
+  const displayServices = dbServices && dbServices.length > 0
+    ? dbServices.map(s => ({
+        title: s.title,
+        description: s.description,
+        icon: null, // Dynamic services don't have static icons right now
+        image: s.iconUrl || "https://images.unsplash.com/photo-1519046904884-53103b34b206?auto=format&fit=crop&q=80&w=800"
+      }))
+    : defaultServices;
+
   return (
     <section id="services" className="py-24 bg-white text-sea-dark">
       <div className="container mx-auto px-6 max-w-7xl">
@@ -45,8 +54,13 @@ export default function Services({ dict }: { dict: any }) {
           <h3 className="text-4xl md:text-5xl font-serif">{dict.services.heading}</h3>
         </div>
 
-        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
-          {services.map((service, index) => (
+        <div className={`grid gap-8 justify-center ${
+          displayServices.length === 1 ? 'grid-cols-1 max-w-sm mx-auto' :
+          displayServices.length === 2 ? 'md:grid-cols-2 max-w-3xl mx-auto' :
+          displayServices.length === 3 ? 'md:grid-cols-3 max-w-5xl mx-auto' :
+          'md:grid-cols-2 lg:grid-cols-4'
+        }`}>
+          {displayServices.map((service, index) => (
             <motion.div
               key={service.title}
               initial={{ opacity: 0, y: 30 }}
@@ -72,9 +86,11 @@ export default function Services({ dict }: { dict: any }) {
                   />
 
                   {/* Icon badge */}
-                  <div className="absolute top-4 left-4 z-20 bg-white/90 backdrop-blur-sm p-3 rounded-full shadow-lg ring-2 ring-coral/10 group-hover:ring-coral/50 transition-all duration-300">
-                    <service.icon className="w-5 h-5 text-coral" />
-                  </div>
+                  {service.icon && (
+                    <div className="absolute top-4 left-4 z-20 bg-white/90 backdrop-blur-sm p-3 rounded-full shadow-lg ring-2 ring-coral/10 group-hover:ring-coral/50 transition-all duration-300">
+                      <service.icon className="w-5 h-5 text-coral" />
+                    </div>
+                  )}
                 </div>
               </div>