@aws505/sheetsite 1.0.2 → 1.0.3

package/dist/components/index.mjs

@@ -894,7 +894,7 @@ function Services({
     4: "md:grid-cols-2 lg:grid-cols-4"
   };
   if (variant === "list") {
-    return /* @__PURE__ */ jsx5("section", { id, className: `py-16 ${className}`, children: /* @__PURE__ */ jsxs5("div", { className: "container mx-auto px-4", children: [
+    return /* @__PURE__ */ jsx5("section", { id, className: `py-16 scroll-mt-20 ${className}`, children: /* @__PURE__ */ jsxs5("div", { className: "container mx-auto px-4", children: [
       /* @__PURE__ */ jsx5(SectionHeader, { title, subtitle }),
       /* @__PURE__ */ jsx5("div", { className: "max-w-3xl mx-auto divide-y divide-gray-200", children: displayedServices.map((service) => /* @__PURE__ */ jsx5(
         ServiceListItem,
@@ -908,7 +908,7 @@ function Services({
     ] }) });
   }
   if (variant === "minimal") {
-    return /* @__PURE__ */ jsx5("section", { id, className: `py-16 ${className}`, children: /* @__PURE__ */ jsxs5("div", { className: "container mx-auto px-4", children: [
+    return /* @__PURE__ */ jsx5("section", { id, className: `py-16 scroll-mt-20 ${className}`, children: /* @__PURE__ */ jsxs5("div", { className: "container mx-auto px-4", children: [
       /* @__PURE__ */ jsx5(SectionHeader, { title, subtitle }),
       /* @__PURE__ */ jsx5("div", { className: `grid gap-6 ${gridCols[columns]}`, children: displayedServices.map((service) => /* @__PURE__ */ jsx5(
         ServiceMinimalCard,
@@ -920,7 +920,7 @@ function Services({
       )) })
     ] }) });
   }
-  return /* @__PURE__ */ jsx5("section", { id, className: `py-16 bg-gray-50 ${className}`, children: /* @__PURE__ */ jsxs5("div", { className: "container mx-auto px-4", children: [
+  return /* @__PURE__ */ jsx5("section", { id, className: `py-16 scroll-mt-20 bg-gray-50 ${className}`, children: /* @__PURE__ */ jsxs5("div", { className: "container mx-auto px-4", children: [
     /* @__PURE__ */ jsx5(SectionHeader, { title, subtitle }),
     /* @__PURE__ */ jsx5("div", { className: `grid gap-6 ${gridCols[columns]}`, children: displayedServices.map((service) => /* @__PURE__ */ jsx5(
       ServiceCard,
@@ -1003,7 +1003,7 @@ function Testimonials({
     2: "md:grid-cols-2 max-w-4xl mx-auto",
     3: "md:grid-cols-2 lg:grid-cols-3"
   };
-  return /* @__PURE__ */ jsx6("section", { id, className: `py-16 ${className}`, children: /* @__PURE__ */ jsxs6("div", { className: "container mx-auto px-4", children: [
+  return /* @__PURE__ */ jsx6("section", { id, className: `py-16 scroll-mt-20 ${className}`, children: /* @__PURE__ */ jsxs6("div", { className: "container mx-auto px-4", children: [
     /* @__PURE__ */ jsxs6("div", { className: "text-center mb-12", children: [
       /* @__PURE__ */ jsx6("h2", { className: "text-3xl md:text-4xl font-bold text-gray-900 mb-4", children: title }),
       subtitle && /* @__PURE__ */ jsx6("p", { className: "text-lg text-gray-600 max-w-2xl mx-auto", children: subtitle })
@@ -1123,18 +1123,18 @@ function FAQ({
     }
   };
   if (variant === "cards") {
-    return /* @__PURE__ */ jsx7("section", { id, className: `py-16 ${className}`, children: /* @__PURE__ */ jsxs7("div", { className: "container mx-auto px-4", children: [
+    return /* @__PURE__ */ jsx7("section", { id, className: `py-16 scroll-mt-20 ${className}`, children: /* @__PURE__ */ jsxs7("div", { className: "container mx-auto px-4", children: [
       /* @__PURE__ */ jsx7(SectionHeader2, { title, subtitle }),
       /* @__PURE__ */ jsx7("div", { className: "grid md:grid-cols-2 gap-6 max-w-4xl mx-auto", children: items.map((item) => /* @__PURE__ */ jsx7(FAQCard, { item }, item.id || item.question)) })
     ] }) });
   }
   if (variant === "simple") {
-    return /* @__PURE__ */ jsx7("section", { id, className: `py-16 ${className}`, children: /* @__PURE__ */ jsxs7("div", { className: "container mx-auto px-4", children: [
+    return /* @__PURE__ */ jsx7("section", { id, className: `py-16 scroll-mt-20 ${className}`, children: /* @__PURE__ */ jsxs7("div", { className: "container mx-auto px-4", children: [
       /* @__PURE__ */ jsx7(SectionHeader2, { title, subtitle }),
       /* @__PURE__ */ jsx7("div", { className: "max-w-3xl mx-auto space-y-8", children: items.map((item) => /* @__PURE__ */ jsx7(FAQSimple, { item }, item.id || item.question)) })
     ] }) });
   }
-  return /* @__PURE__ */ jsx7("section", { id, className: `py-16 bg-gray-50 ${className}`, children: /* @__PURE__ */ jsxs7("div", { className: "container mx-auto px-4", children: [
+  return /* @__PURE__ */ jsx7("section", { id, className: `py-16 scroll-mt-20 bg-gray-50 ${className}`, children: /* @__PURE__ */ jsxs7("div", { className: "container mx-auto px-4", children: [
     /* @__PURE__ */ jsx7(SectionHeader2, { title, subtitle }),
     /* @__PURE__ */ jsx7("div", { className: "max-w-3xl mx-auto", children: items.map((item, index) => /* @__PURE__ */ jsx7(
       FAQAccordionItem,
@@ -1346,53 +1346,694 @@ function Gallery({
   columns = 3,
   variant = "grid",
   showCaptions = true,
+  enableLightbox = true,
   limit,
-  className = ""
+  className = "",
+  id = "gallery"
 }) {
   const displayedItems = limit ? items.slice(0, limit) : items;
   const [failedImages, setFailedImages] = useState3(/* @__PURE__ */ new Set());
-  const handleImageError = (id) => {
-    setFailedImages((prev) => new Set(prev).add(id));
+  const [lightboxIndex, setLightboxIndex] = useState3(null);
+  const handleImageError = (id2) => {
+    setFailedImages((prev) => new Set(prev).add(id2));
   };
   const gridCols = {
     2: "grid-cols-1 sm:grid-cols-2",
     3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
     4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
   };
-  return /* @__PURE__ */ jsx9("section", { className: `py-16 ${className}`, children: /* @__PURE__ */ jsxs9("div", { className: "container mx-auto px-4", children: [
-    (title || subtitle) && /* @__PURE__ */ jsxs9("div", { className: "text-center mb-12", children: [
-      title && /* @__PURE__ */ jsx9("h2", { className: "text-3xl md:text-4xl font-bold text-gray-900 mb-4", children: title }),
-      subtitle && /* @__PURE__ */ jsx9("p", { className: "text-lg text-gray-600 max-w-2xl mx-auto", children: subtitle })
+  const openLightbox = (index) => {
+    if (enableLightbox) {
+      setLightboxIndex(index);
+    }
+  };
+  const closeLightbox = () => setLightboxIndex(null);
+  const goToPrevious = () => {
+    if (lightboxIndex !== null) {
+      setLightboxIndex(lightboxIndex === 0 ? displayedItems.length - 1 : lightboxIndex - 1);
+    }
+  };
+  const goToNext = () => {
+    if (lightboxIndex !== null) {
+      setLightboxIndex(lightboxIndex === displayedItems.length - 1 ? 0 : lightboxIndex + 1);
+    }
+  };
+  return /* @__PURE__ */ jsxs9("section", { id, className: `py-16 scroll-mt-20 ${className}`, children: [
+    /* @__PURE__ */ jsxs9("div", { className: "container mx-auto px-4", children: [
+      (title || subtitle) && /* @__PURE__ */ jsxs9("div", { className: "text-center mb-12", children: [
+        title && /* @__PURE__ */ jsx9("h2", { className: "text-3xl md:text-4xl font-bold text-gray-900 mb-4", children: title }),
+        subtitle && /* @__PURE__ */ jsx9("p", { className: "text-lg text-gray-600 max-w-2xl mx-auto", children: subtitle })
+      ] }),
+      /* @__PURE__ */ jsx9("div", { className: `grid gap-4 ${gridCols[columns]}`, children: displayedItems.map((item, index) => {
+        const itemId = item.id || item.imageUrl;
+        const hasFailed = failedImages.has(itemId);
+        return /* @__PURE__ */ jsx9(
+          "div",
+          {
+            className: `group relative aspect-square overflow-hidden rounded-lg bg-gray-100 ${enableLightbox ? "cursor-pointer" : ""}`,
+            onClick: () => openLightbox(index),
+            role: enableLightbox ? "button" : void 0,
+            tabIndex: enableLightbox ? 0 : void 0,
+            onKeyDown: enableLightbox ? (e) => e.key === "Enter" && openLightbox(index) : void 0,
+            children: hasFailed ? /* @__PURE__ */ jsx9("div", { className: "absolute inset-0 flex items-center justify-center text-gray-400", children: /* @__PURE__ */ jsx9("span", { children: "Image unavailable" }) }) : /* @__PURE__ */ jsxs9(Fragment, { children: [
+              /* @__PURE__ */ jsx9(
+                "img",
+                {
+                  src: item.imageUrl,
+                  alt: item.alt || "",
+                  loading: "lazy",
+                  className: "w-full h-full object-cover transition-transform duration-300 group-hover:scale-105",
+                  onError: () => handleImageError(itemId)
+                }
+              ),
+              enableLightbox && /* @__PURE__ */ jsx9("div", { className: "absolute inset-0 bg-black/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center", children: /* @__PURE__ */ jsx9("svg", { className: "w-10 h-10 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7" }) }) }),
+              showCaptions && item.caption && !enableLightbox && /* @__PURE__ */ jsx9("div", { className: "absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300", children: /* @__PURE__ */ jsx9("div", { className: "absolute bottom-0 left-0 right-0 p-4", children: /* @__PURE__ */ jsx9("p", { className: "text-white text-sm", children: item.caption }) }) })
+            ] })
+          },
+          itemId
+        );
+      }) })
     ] }),
-    /* @__PURE__ */ jsx9("div", { className: `grid gap-4 ${gridCols[columns]}`, children: displayedItems.map((item) => {
-      const itemId = item.id || item.imageUrl;
-      const hasFailed = failedImages.has(itemId);
-      return /* @__PURE__ */ jsx9(
-        "div",
-        {
-          className: "group relative aspect-square overflow-hidden rounded-lg bg-gray-100",
-          children: hasFailed ? /* @__PURE__ */ jsx9("div", { className: "absolute inset-0 flex items-center justify-center text-gray-400", children: /* @__PURE__ */ jsx9("span", { children: "Image unavailable" }) }) : /* @__PURE__ */ jsxs9(Fragment, { children: [
-            /* @__PURE__ */ jsx9(
-              "img",
-              {
-                src: item.imageUrl,
-                alt: item.alt || "",
-                loading: "lazy",
-                className: "w-full h-full object-cover transition-transform duration-300 group-hover:scale-105",
-                onError: () => handleImageError(itemId)
-              }
-            ),
-            showCaptions && item.caption && /* @__PURE__ */ jsx9("div", { className: "absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300", children: /* @__PURE__ */ jsx9("div", { className: "absolute bottom-0 left-0 right-0 p-4", children: /* @__PURE__ */ jsx9("p", { className: "text-white text-sm", children: item.caption }) }) })
+    enableLightbox && lightboxIndex !== null && /* @__PURE__ */ jsxs9(
+      "div",
+      {
+        className: "fixed inset-0 z-50 bg-black/90 flex items-center justify-center",
+        onClick: closeLightbox,
+        children: [
+          /* @__PURE__ */ jsx9(
+            "button",
+            {
+              onClick: closeLightbox,
+              className: "absolute top-4 right-4 text-white hover:text-gray-300 transition-colors z-10",
+              "aria-label": "Close lightbox",
+              children: /* @__PURE__ */ jsx9("svg", { className: "w-8 h-8", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+            }
+          ),
+          /* @__PURE__ */ jsx9(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                goToPrevious();
+              },
+              className: "absolute left-4 top-1/2 -translate-y-1/2 text-white hover:text-gray-300 transition-colors z-10",
+              "aria-label": "Previous image",
+              children: /* @__PURE__ */ jsx9("svg", { className: "w-10 h-10", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
+            }
+          ),
+          /* @__PURE__ */ jsx9(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                goToNext();
+              },
+              className: "absolute right-4 top-1/2 -translate-y-1/2 text-white hover:text-gray-300 transition-colors z-10",
+              "aria-label": "Next image",
+              children: /* @__PURE__ */ jsx9("svg", { className: "w-10 h-10", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
+            }
+          ),
+          /* @__PURE__ */ jsxs9(
+            "div",
+            {
+              className: "max-w-5xl max-h-[85vh] mx-4",
+              onClick: (e) => e.stopPropagation(),
+              children: [
+                /* @__PURE__ */ jsx9(
+                  "img",
+                  {
+                    src: displayedItems[lightboxIndex].imageUrl,
+                    alt: displayedItems[lightboxIndex].alt || "",
+                    className: "max-w-full max-h-[85vh] object-contain"
+                  }
+                ),
+                showCaptions && displayedItems[lightboxIndex].caption && /* @__PURE__ */ jsx9("p", { className: "text-white text-center mt-4 text-lg", children: displayedItems[lightboxIndex].caption })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs9("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 text-white text-sm", children: [
+            lightboxIndex + 1,
+            " / ",
+            displayedItems.length
           ] })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/sections/Menu.tsx
+import { useState as useState4 } from "react";
+import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+function Menu({
+  items,
+  title = "Our Menu",
+  subtitle,
+  showCategories = true,
+  showImages = true,
+  showDietary = true,
+  variant = "cards",
+  columns = 2,
+  className = "",
+  id = "menu"
+}) {
+  const categories = showCategories ? [...new Set(items.filter((item) => item.category).map((item) => item.category))] : [];
+  const [activeCategory, setActiveCategory] = useState4(
+    categories.length > 0 ? categories[0] : null
+  );
+  const displayedItems = activeCategory ? items.filter((item) => item.category === activeCategory) : items;
+  const sortedItems = [...displayedItems].sort((a, b) => (a.sortOrder || 0) - (b.sortOrder || 0));
+  const gridCols = {
+    1: "max-w-2xl mx-auto",
+    2: "md:grid-cols-2",
+    3: "md:grid-cols-2 lg:grid-cols-3"
+  };
+  return /* @__PURE__ */ jsx10("section", { id, className: `py-16 scroll-mt-20 ${className}`, children: /* @__PURE__ */ jsxs10("div", { className: "container mx-auto px-4", children: [
+    /* @__PURE__ */ jsxs10("div", { className: "text-center mb-12", children: [
+      /* @__PURE__ */ jsx10("h2", { className: "text-3xl md:text-4xl font-bold text-gray-900 mb-4", children: title }),
+      subtitle && /* @__PURE__ */ jsx10("p", { className: "text-lg text-gray-600 max-w-2xl mx-auto", children: subtitle })
+    ] }),
+    showCategories && categories.length > 1 && /* @__PURE__ */ jsx10("div", { className: "flex flex-wrap justify-center gap-2 mb-8", children: categories.map((category) => /* @__PURE__ */ jsx10(
+      "button",
+      {
+        onClick: () => setActiveCategory(category),
+        className: `px-4 py-2 rounded-full text-sm font-medium transition-colors ${activeCategory === category ? "bg-primary-600 text-white" : "bg-gray-100 text-gray-700 hover:bg-gray-200"}`,
+        children: category
+      },
+      category
+    )) }),
+    variant === "list" ? /* @__PURE__ */ jsx10("div", { className: "max-w-3xl mx-auto divide-y divide-gray-200", children: sortedItems.map((item) => /* @__PURE__ */ jsx10(
+      MenuListItem,
+      {
+        item,
+        showImage: showImages,
+        showDietary
+      },
+      item.id || item.name
+    )) }) : variant === "compact" ? /* @__PURE__ */ jsx10("div", { className: `grid gap-4 ${gridCols[columns]}`, children: sortedItems.map((item) => /* @__PURE__ */ jsx10(
+      MenuCompactItem,
+      {
+        item,
+        showDietary
+      },
+      item.id || item.name
+    )) }) : /* @__PURE__ */ jsx10("div", { className: `grid gap-6 ${gridCols[columns]}`, children: sortedItems.map((item) => /* @__PURE__ */ jsx10(
+      MenuCard,
+      {
+        item,
+        showImage: showImages,
+        showDietary
+      },
+      item.id || item.name
+    )) })
+  ] }) });
+}
+function MenuCard({
+  item,
+  showImage,
+  showDietary
+}) {
+  return /* @__PURE__ */ jsxs10("div", { className: "bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow", children: [
+    showImage && item.imageUrl && /* @__PURE__ */ jsxs10("div", { className: "aspect-video relative overflow-hidden", children: [
+      /* @__PURE__ */ jsx10(
+        "img",
+        {
+          src: item.imageUrl,
+          alt: item.name,
+          className: "w-full h-full object-cover"
+        }
+      ),
+      item.featured && /* @__PURE__ */ jsx10("span", { className: "absolute top-2 left-2 px-2 py-1 bg-primary-600 text-white text-xs font-medium rounded", children: "Featured" })
+    ] }),
+    /* @__PURE__ */ jsxs10("div", { className: "p-4", children: [
+      /* @__PURE__ */ jsxs10("div", { className: "flex justify-between items-start mb-2", children: [
+        /* @__PURE__ */ jsx10("h3", { className: "text-lg font-semibold text-gray-900", children: item.name }),
+        /* @__PURE__ */ jsx10(PriceDisplay, { item })
+      ] }),
+      item.description && /* @__PURE__ */ jsx10("p", { className: "text-gray-600 text-sm mb-3", children: item.description }),
+      showDietary && item.dietary && item.dietary.length > 0 && /* @__PURE__ */ jsx10(DietaryBadges, { dietary: item.dietary }),
+      !item.available && /* @__PURE__ */ jsx10("span", { className: "inline-block mt-2 px-2 py-1 bg-gray-100 text-gray-500 text-xs rounded", children: "Currently unavailable" })
+    ] })
+  ] });
+}
+function MenuListItem({
+  item,
+  showImage,
+  showDietary
+}) {
+  return /* @__PURE__ */ jsxs10("div", { className: "py-4 flex gap-4", children: [
+    showImage && item.imageUrl && /* @__PURE__ */ jsx10("div", { className: "w-20 h-20 flex-shrink-0 rounded-lg overflow-hidden", children: /* @__PURE__ */ jsx10(
+      "img",
+      {
+        src: item.imageUrl,
+        alt: item.name,
+        className: "w-full h-full object-cover"
+      }
+    ) }),
+    /* @__PURE__ */ jsx10("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxs10("div", { className: "flex justify-between items-start", children: [
+      /* @__PURE__ */ jsxs10("div", { children: [
+        /* @__PURE__ */ jsxs10("h3", { className: "text-lg font-semibold text-gray-900", children: [
+          item.name,
+          item.featured && /* @__PURE__ */ jsx10("span", { className: "ml-2 px-2 py-0.5 bg-primary-100 text-primary-700 text-xs font-medium rounded", children: "Popular" })
+        ] }),
+        item.description && /* @__PURE__ */ jsx10("p", { className: "text-gray-600 text-sm mt-1", children: item.description }),
+        showDietary && item.dietary && item.dietary.length > 0 && /* @__PURE__ */ jsx10("div", { className: "mt-2", children: /* @__PURE__ */ jsx10(DietaryBadges, { dietary: item.dietary }) })
+      ] }),
+      /* @__PURE__ */ jsx10(PriceDisplay, { item })
+    ] }) })
+  ] });
+}
+function MenuCompactItem({
+  item,
+  showDietary
+}) {
+  return /* @__PURE__ */ jsxs10("div", { className: "flex justify-between items-center py-2 border-b border-gray-100 last:border-0", children: [
+    /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx10("span", { className: "font-medium text-gray-900", children: item.name }),
+      item.featured && /* @__PURE__ */ jsx10("span", { className: "w-2 h-2 bg-primary-500 rounded-full", title: "Popular" }),
+      showDietary && item.dietary && item.dietary.length > 0 && /* @__PURE__ */ jsxs10("span", { className: "text-xs text-gray-500", children: [
+        "(",
+        item.dietary.join(", "),
+        ")"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx10(PriceDisplay, { item, compact: true })
+  ] });
+}
+function PriceDisplay({ item, compact = false }) {
+  if (item.priceNote) {
+    return /* @__PURE__ */ jsx10("span", { className: `text-primary-600 font-medium ${compact ? "text-sm" : ""}`, children: item.priceNote });
+  }
+  if (item.price) {
+    return /* @__PURE__ */ jsxs10("span", { className: `text-primary-600 font-medium ${compact ? "text-sm" : ""}`, children: [
+      "$",
+      item.price.toFixed(2)
+    ] });
+  }
+  return null;
+}
+function DietaryBadges({ dietary }) {
+  const dietaryIcons = {
+    vegetarian: "V",
+    vegan: "VG",
+    "gluten-free": "GF",
+    "dairy-free": "DF",
+    "nut-free": "NF",
+    spicy: "\u{1F336}",
+    halal: "H",
+    kosher: "K"
+  };
+  return /* @__PURE__ */ jsx10("div", { className: "flex flex-wrap gap-1", children: dietary.map((diet) => /* @__PURE__ */ jsx10(
+    "span",
+    {
+      className: "px-1.5 py-0.5 bg-green-100 text-green-700 text-xs font-medium rounded",
+      title: diet,
+      children: dietaryIcons[diet.toLowerCase()] || diet
+    },
+    diet
+  )) });
+}
+
+// src/components/sections/TrustBadges.tsx
+import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+function TrustBadges({
+  badges,
+  title = "Certifications & Affiliations",
+  subtitle,
+  variant = "grid",
+  columns = 4,
+  showDescriptions = false,
+  className = "",
+  id = "certifications"
+}) {
+  const sortedBadges = [...badges].sort((a, b) => (a.sortOrder || 0) - (b.sortOrder || 0));
+  const gridCols = {
+    3: "grid-cols-2 sm:grid-cols-3",
+    4: "grid-cols-2 sm:grid-cols-4",
+    5: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-5",
+    6: "grid-cols-3 sm:grid-cols-6"
+  };
+  if (variant === "inline") {
+    return /* @__PURE__ */ jsx11("section", { id, className: `py-12 scroll-mt-20 bg-gray-50 ${className}`, children: /* @__PURE__ */ jsxs11("div", { className: "container mx-auto px-4", children: [
+      title && /* @__PURE__ */ jsx11("p", { className: "text-center text-sm text-gray-500 mb-6", children: title }),
+      /* @__PURE__ */ jsx11("div", { className: "flex flex-wrap justify-center items-center gap-8 md:gap-12", children: sortedBadges.map((badge) => /* @__PURE__ */ jsx11(InlineBadge, { badge }, badge.id || badge.name)) })
+    ] }) });
+  }
+  if (variant === "cards") {
+    return /* @__PURE__ */ jsx11("section", { id, className: `py-16 scroll-mt-20 ${className}`, children: /* @__PURE__ */ jsxs11("div", { className: "container mx-auto px-4", children: [
+      /* @__PURE__ */ jsxs11("div", { className: "text-center mb-12", children: [
+        /* @__PURE__ */ jsx11("h2", { className: "text-3xl md:text-4xl font-bold text-gray-900 mb-4", children: title }),
+        subtitle && /* @__PURE__ */ jsx11("p", { className: "text-lg text-gray-600 max-w-2xl mx-auto", children: subtitle })
+      ] }),
+      /* @__PURE__ */ jsx11("div", { className: `grid gap-6 ${gridCols[columns]}`, children: sortedBadges.map((badge) => /* @__PURE__ */ jsx11(
+        CardBadge,
+        {
+          badge,
+          showDescription: showDescriptions
         },
-        itemId
-      );
-    }) })
+        badge.id || badge.name
+      )) })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx11("section", { id, className: `py-16 scroll-mt-20 bg-gray-50 ${className}`, children: /* @__PURE__ */ jsxs11("div", { className: "container mx-auto px-4", children: [
+    /* @__PURE__ */ jsxs11("div", { className: "text-center mb-12", children: [
+      /* @__PURE__ */ jsx11("h2", { className: "text-3xl md:text-4xl font-bold text-gray-900 mb-4", children: title }),
+      subtitle && /* @__PURE__ */ jsx11("p", { className: "text-lg text-gray-600 max-w-2xl mx-auto", children: subtitle })
+    ] }),
+    /* @__PURE__ */ jsx11("div", { className: `grid gap-8 ${gridCols[columns]}`, children: sortedBadges.map((badge) => /* @__PURE__ */ jsx11(
+      GridBadge,
+      {
+        badge,
+        showDescription: showDescriptions
+      },
+      badge.id || badge.name
+    )) })
   ] }) });
 }
+function InlineBadge({ badge }) {
+  const Wrapper = badge.link ? "a" : "div";
+  const wrapperProps = badge.link ? { href: badge.link, target: "_blank", rel: "noopener noreferrer" } : {};
+  return /* @__PURE__ */ jsx11(
+    Wrapper,
+    {
+      ...wrapperProps,
+      className: "flex items-center opacity-70 hover:opacity-100 transition-opacity",
+      title: badge.name,
+      children: badge.imageUrl ? /* @__PURE__ */ jsx11(
+        "img",
+        {
+          src: badge.imageUrl,
+          alt: badge.name,
+          className: "h-10 md:h-12 w-auto object-contain grayscale hover:grayscale-0 transition-all"
+        }
+      ) : /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2 text-gray-600", children: [
+        badge.icon && /* @__PURE__ */ jsx11(BadgeIcon, { icon: badge.icon, className: "w-8 h-8" }),
+        /* @__PURE__ */ jsx11("span", { className: "text-sm font-medium", children: badge.name })
+      ] })
+    }
+  );
+}
+function GridBadge({
+  badge,
+  showDescription
+}) {
+  const Wrapper = badge.link ? "a" : "div";
+  const wrapperProps = badge.link ? { href: badge.link, target: "_blank", rel: "noopener noreferrer" } : {};
+  return /* @__PURE__ */ jsxs11(
+    Wrapper,
+    {
+      ...wrapperProps,
+      className: "flex flex-col items-center text-center group",
+      children: [
+        /* @__PURE__ */ jsx11("div", { className: "w-20 h-20 mb-3 flex items-center justify-center", children: badge.imageUrl ? /* @__PURE__ */ jsx11(
+          "img",
+          {
+            src: badge.imageUrl,
+            alt: badge.name,
+            className: "max-w-full max-h-full object-contain group-hover:scale-110 transition-transform"
+          }
+        ) : /* @__PURE__ */ jsx11(
+          BadgeIcon,
+          {
+            icon: badge.icon || "certificate",
+            className: "w-16 h-16 text-primary-600 group-hover:scale-110 transition-transform"
+          }
+        ) }),
+        /* @__PURE__ */ jsx11("h3", { className: "font-semibold text-gray-900 text-sm", children: badge.name }),
+        badge.year && /* @__PURE__ */ jsxs11("span", { className: "text-xs text-gray-500", children: [
+          "Since ",
+          badge.year
+        ] }),
+        showDescription && badge.description && /* @__PURE__ */ jsx11("p", { className: "text-sm text-gray-600 mt-2", children: badge.description })
+      ]
+    }
+  );
+}
+function CardBadge({
+  badge,
+  showDescription
+}) {
+  const Wrapper = badge.link ? "a" : "div";
+  const wrapperProps = badge.link ? { href: badge.link, target: "_blank", rel: "noopener noreferrer" } : {};
+  return /* @__PURE__ */ jsxs11(
+    Wrapper,
+    {
+      ...wrapperProps,
+      className: "bg-white rounded-lg shadow p-6 flex flex-col items-center text-center hover:shadow-md transition-shadow",
+      children: [
+        /* @__PURE__ */ jsx11("div", { className: "w-16 h-16 mb-4 flex items-center justify-center", children: badge.imageUrl ? /* @__PURE__ */ jsx11(
+          "img",
+          {
+            src: badge.imageUrl,
+            alt: badge.name,
+            className: "max-w-full max-h-full object-contain"
+          }
+        ) : /* @__PURE__ */ jsx11(BadgeIcon, { icon: badge.icon || "certificate", className: "w-12 h-12 text-primary-600" }) }),
+        /* @__PURE__ */ jsx11("h3", { className: "font-semibold text-gray-900", children: badge.name }),
+        badge.year && /* @__PURE__ */ jsxs11("span", { className: "text-xs text-gray-500 mt-1", children: [
+          "Since ",
+          badge.year
+        ] }),
+        showDescription && badge.description && /* @__PURE__ */ jsx11("p", { className: "text-sm text-gray-600 mt-2", children: badge.description })
+      ]
+    }
+  );
+}
+function BadgeIcon({ icon, className = "" }) {
+  const icons = {
+    certificate: /* @__PURE__ */ jsx11("svg", { className, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" }) }),
+    shield: /* @__PURE__ */ jsx11("svg", { className, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" }) }),
+    star: /* @__PURE__ */ jsx11("svg", { className, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" }) }),
+    award: /* @__PURE__ */ jsx11("svg", { className, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" }) }),
+    check: /* @__PURE__ */ jsx11("svg", { className, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+    verified: /* @__PURE__ */ jsx11("svg", { className, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" }) })
+  };
+  return icons[icon] || icons.certificate;
+}
+
+// src/components/sections/BeforeAfter.tsx
+import { useState as useState5, useRef, useCallback } from "react";
+import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+function BeforeAfter({
+  items,
+  title = "Our Work",
+  subtitle = "See the transformation",
+  columns = 2,
+  variant = "slider",
+  showCategories = true,
+  className = "",
+  id = "portfolio"
+}) {
+  const categories = showCategories ? [...new Set(items.filter((item) => item.category).map((item) => item.category))] : [];
+  const [activeCategory, setActiveCategory] = useState5(null);
+  const displayedItems = activeCategory ? items.filter((item) => item.category === activeCategory) : items;
+  const sortedItems = [...displayedItems].sort((a, b) => (a.sortOrder || 0) - (b.sortOrder || 0));
+  const gridCols = {
+    1: "max-w-2xl mx-auto",
+    2: "md:grid-cols-2",
+    3: "md:grid-cols-2 lg:grid-cols-3"
+  };
+  return /* @__PURE__ */ jsx12("section", { id, className: `py-16 scroll-mt-20 ${className}`, children: /* @__PURE__ */ jsxs12("div", { className: "container mx-auto px-4", children: [
+    /* @__PURE__ */ jsxs12("div", { className: "text-center mb-12", children: [
+      /* @__PURE__ */ jsx12("h2", { className: "text-3xl md:text-4xl font-bold text-gray-900 mb-4", children: title }),
+      subtitle && /* @__PURE__ */ jsx12("p", { className: "text-lg text-gray-600 max-w-2xl mx-auto", children: subtitle })
+    ] }),
+    showCategories && categories.length > 1 && /* @__PURE__ */ jsxs12("div", { className: "flex flex-wrap justify-center gap-2 mb-8", children: [
+      /* @__PURE__ */ jsx12(
+        "button",
+        {
+          onClick: () => setActiveCategory(null),
+          className: `px-4 py-2 rounded-full text-sm font-medium transition-colors ${activeCategory === null ? "bg-primary-600 text-white" : "bg-gray-100 text-gray-700 hover:bg-gray-200"}`,
+          children: "All"
+        }
+      ),
+      categories.map((category) => /* @__PURE__ */ jsx12(
+        "button",
+        {
+          onClick: () => setActiveCategory(category),
+          className: `px-4 py-2 rounded-full text-sm font-medium transition-colors ${activeCategory === category ? "bg-primary-600 text-white" : "bg-gray-100 text-gray-700 hover:bg-gray-200"}`,
+          children: category
+        },
+        category
+      ))
+    ] }),
+    /* @__PURE__ */ jsx12("div", { className: `grid gap-8 ${gridCols[columns]}`, children: sortedItems.map((item) => /* @__PURE__ */ jsx12(
+      BeforeAfterCard,
+      {
+        item,
+        variant
+      },
+      item.id || `${item.beforeImageUrl}-${item.afterImageUrl}`
+    )) })
+  ] }) });
+}
+function BeforeAfterCard({
+  item,
+  variant
+}) {
+  if (variant === "side-by-side") {
+    return /* @__PURE__ */ jsx12(SideBySideCard, { item });
+  }
+  if (variant === "stacked") {
+    return /* @__PURE__ */ jsx12(StackedCard, { item });
+  }
+  return /* @__PURE__ */ jsx12(SliderCard, { item });
+}
+function SliderCard({ item }) {
+  const [sliderPosition, setSliderPosition] = useState5(50);
+  const containerRef = useRef(null);
+  const isDragging = useRef(false);
+  const handleMove = useCallback((clientX) => {
+    if (!containerRef.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    const x = clientX - rect.left;
+    const percentage = Math.max(0, Math.min(100, x / rect.width * 100));
+    setSliderPosition(percentage);
+  }, []);
+  const handleMouseDown = () => {
+    isDragging.current = true;
+  };
+  const handleMouseUp = () => {
+    isDragging.current = false;
+  };
+  const handleMouseMove = (e) => {
+    if (isDragging.current) {
+      handleMove(e.clientX);
+    }
+  };
+  const handleTouchMove = (e) => {
+    handleMove(e.touches[0].clientX);
+  };
+  return /* @__PURE__ */ jsxs12("div", { className: "bg-white rounded-lg shadow-md overflow-hidden", children: [
+    /* @__PURE__ */ jsxs12(
+      "div",
+      {
+        ref: containerRef,
+        className: "relative aspect-[4/3] cursor-ew-resize select-none overflow-hidden",
+        onMouseDown: handleMouseDown,
+        onMouseUp: handleMouseUp,
+        onMouseLeave: handleMouseUp,
+        onMouseMove: handleMouseMove,
+        onTouchMove: handleTouchMove,
+        children: [
+          /* @__PURE__ */ jsx12(
+            "img",
+            {
+              src: item.afterImageUrl,
+              alt: item.afterAlt || "After",
+              className: "absolute inset-0 w-full h-full object-cover"
+            }
+          ),
+          /* @__PURE__ */ jsx12(
+            "div",
+            {
+              className: "absolute inset-0 overflow-hidden",
+              style: { width: `${sliderPosition}%` },
+              children: /* @__PURE__ */ jsx12(
+                "img",
+                {
+                  src: item.beforeImageUrl,
+                  alt: item.beforeAlt || "Before",
+                  className: "absolute inset-0 w-full h-full object-cover",
+                  style: { width: containerRef.current?.offsetWidth || "100%" }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx12(
+            "div",
+            {
+              className: "absolute top-0 bottom-0 w-1 bg-white shadow-lg cursor-ew-resize",
+              style: { left: `${sliderPosition}%`, transform: "translateX(-50%)" },
+              children: /* @__PURE__ */ jsx12("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-10 h-10 bg-white rounded-full shadow-lg flex items-center justify-center", children: /* @__PURE__ */ jsx12("svg", { className: "w-6 h-6 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 9l4-4 4 4m0 6l-4 4-4-4" }) }) })
+            }
+          ),
+          /* @__PURE__ */ jsx12("div", { className: "absolute bottom-4 left-4 px-2 py-1 bg-black/60 text-white text-xs rounded", children: "Before" }),
+          /* @__PURE__ */ jsx12("div", { className: "absolute bottom-4 right-4 px-2 py-1 bg-black/60 text-white text-xs rounded", children: "After" })
+        ]
+      }
+    ),
+    (item.title || item.description) && /* @__PURE__ */ jsxs12("div", { className: "p-4", children: [
+      item.title && /* @__PURE__ */ jsx12("h3", { className: "text-lg font-semibold text-gray-900 mb-1", children: item.title }),
+      item.description && /* @__PURE__ */ jsx12("p", { className: "text-gray-600 text-sm", children: item.description })
+    ] })
+  ] });
+}
+function SideBySideCard({ item }) {
+  return /* @__PURE__ */ jsxs12("div", { className: "bg-white rounded-lg shadow-md overflow-hidden", children: [
+    /* @__PURE__ */ jsxs12("div", { className: "grid grid-cols-2", children: [
+      /* @__PURE__ */ jsxs12("div", { className: "relative aspect-square", children: [
+        /* @__PURE__ */ jsx12(
+          "img",
+          {
+            src: item.beforeImageUrl,
+            alt: item.beforeAlt || "Before",
+            className: "w-full h-full object-cover"
+          }
+        ),
+        /* @__PURE__ */ jsx12("span", { className: "absolute bottom-2 left-2 px-2 py-1 bg-black/60 text-white text-xs rounded", children: "Before" })
+      ] }),
+      /* @__PURE__ */ jsxs12("div", { className: "relative aspect-square", children: [
+        /* @__PURE__ */ jsx12(
+          "img",
+          {
+            src: item.afterImageUrl,
+            alt: item.afterAlt || "After",
+            className: "w-full h-full object-cover"
+          }
+        ),
+        /* @__PURE__ */ jsx12("span", { className: "absolute bottom-2 right-2 px-2 py-1 bg-black/60 text-white text-xs rounded", children: "After" })
+      ] })
+    ] }),
+    (item.title || item.description) && /* @__PURE__ */ jsxs12("div", { className: "p-4", children: [
+      item.title && /* @__PURE__ */ jsx12("h3", { className: "text-lg font-semibold text-gray-900 mb-1", children: item.title }),
+      item.description && /* @__PURE__ */ jsx12("p", { className: "text-gray-600 text-sm", children: item.description })
+    ] })
+  ] });
+}
+function StackedCard({ item }) {
+  const [showAfter, setShowAfter] = useState5(false);
+  return /* @__PURE__ */ jsxs12("div", { className: "bg-white rounded-lg shadow-md overflow-hidden", children: [
+    /* @__PURE__ */ jsxs12(
+      "div",
+      {
+        className: "relative aspect-[4/3] cursor-pointer",
+        onMouseEnter: () => setShowAfter(true),
+        onMouseLeave: () => setShowAfter(false),
+        onClick: () => setShowAfter(!showAfter),
+        children: [
+          /* @__PURE__ */ jsx12(
+            "img",
+            {
+              src: item.beforeImageUrl,
+              alt: item.beforeAlt || "Before",
+              className: `absolute inset-0 w-full h-full object-cover transition-opacity duration-300 ${showAfter ? "opacity-0" : "opacity-100"}`
+            }
+          ),
+          /* @__PURE__ */ jsx12(
+            "img",
+            {
+              src: item.afterImageUrl,
+              alt: item.afterAlt || "After",
+              className: `absolute inset-0 w-full h-full object-cover transition-opacity duration-300 ${showAfter ? "opacity-100" : "opacity-0"}`
+            }
+          ),
+          /* @__PURE__ */ jsxs12("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 px-3 py-1 bg-black/60 text-white text-sm rounded", children: [
+            showAfter ? "After" : "Before",
+            " (hover to toggle)"
+          ] })
+        ]
+      }
+    ),
+    (item.title || item.description) && /* @__PURE__ */ jsxs12("div", { className: "p-4", children: [
+      item.title && /* @__PURE__ */ jsx12("h3", { className: "text-lg font-semibold text-gray-900 mb-1", children: item.title }),
+      item.description && /* @__PURE__ */ jsx12("p", { className: "text-gray-600 text-sm", children: item.description })
+    ] })
+  ] });
+}
 
 // src/components/ui/Button.tsx
-import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
 function getButtonClasses(props) {
   const { variant = "primary", size = "md", fullWidth, disabled } = props;
   const baseClasses = [
@@ -1434,16 +2075,16 @@ function Button({
   ...props
 }) {
   const classes = getButtonClasses({ variant, size, fullWidth, disabled: disabled || loading });
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx13(
     "button",
     {
       className: `${classes} ${className}`,
       disabled: disabled || loading,
       ...props,
-      children: loading ? /* @__PURE__ */ jsx10(LoadingSpinner, { size }) : /* @__PURE__ */ jsxs10(Fragment2, { children: [
-        leftIcon && /* @__PURE__ */ jsx10("span", { className: "mr-2", children: leftIcon }),
+      children: loading ? /* @__PURE__ */ jsx13(LoadingSpinner, { size }) : /* @__PURE__ */ jsxs13(Fragment2, { children: [
+        leftIcon && /* @__PURE__ */ jsx13("span", { className: "mr-2", children: leftIcon }),
         children,
-        rightIcon && /* @__PURE__ */ jsx10("span", { className: "ml-2", children: rightIcon })
+        rightIcon && /* @__PURE__ */ jsx13("span", { className: "ml-2", children: rightIcon })
       ] })
     }
   );
@@ -1454,7 +2095,7 @@ function LoadingSpinner({ size }) {
     md: "w-5 h-5",
     lg: "w-6 h-6"
   };
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs13(
     "svg",
     {
       className: `animate-spin ${sizeClasses[size || "md"]}`,
@@ -1462,7 +2103,7 @@ function LoadingSpinner({ size }) {
       fill: "none",
       viewBox: "0 0 24 24",
       children: [
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx13(
           "circle",
           {
             className: "opacity-25",
@@ -1473,7 +2114,7 @@ function LoadingSpinner({ size }) {
             strokeWidth: "4"
           }
         ),
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx13(
           "path",
           {
             className: "opacity-75",
@@ -1496,15 +2137,15 @@ function ButtonLink({
   ...props
 }) {
   const classes = getButtonClasses({ variant, size, fullWidth, disabled: false });
-  return /* @__PURE__ */ jsxs10("a", { className: `${classes} ${className}`, ...props, children: [
-    leftIcon && /* @__PURE__ */ jsx10("span", { className: "mr-2", children: leftIcon }),
+  return /* @__PURE__ */ jsxs13("a", { className: `${classes} ${className}`, ...props, children: [
+    leftIcon && /* @__PURE__ */ jsx13("span", { className: "mr-2", children: leftIcon }),
     children,
-    rightIcon && /* @__PURE__ */ jsx10("span", { className: "ml-2", children: rightIcon })
+    rightIcon && /* @__PURE__ */ jsx13("span", { className: "ml-2", children: rightIcon })
   ] });
 }
 
 // src/components/ui/Card.tsx
-import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
 function getCardClasses(props) {
   const { variant = "default", padding = "md", hover = false } = props;
   const baseClasses = ["rounded-lg", "overflow-hidden"];
@@ -1537,7 +2178,7 @@ function Card({
   ...props
 }) {
   const classes = getCardClasses({ variant, padding, hover });
-  return /* @__PURE__ */ jsx11("div", { className: `${classes} ${className}`, ...props, children });
+  return /* @__PURE__ */ jsx14("div", { className: `${classes} ${className}`, ...props, children });
 }
 function CardHeader({
   title,
@@ -1547,13 +2188,13 @@ function CardHeader({
   className = "",
   ...props
 }) {
-  return /* @__PURE__ */ jsxs11("div", { className: `flex items-start justify-between ${className}`, ...props, children: [
-    /* @__PURE__ */ jsxs11("div", { children: [
-      title && /* @__PURE__ */ jsx11("h3", { className: "text-lg font-semibold text-gray-900", children: title }),
-      subtitle && /* @__PURE__ */ jsx11("p", { className: "mt-1 text-sm text-gray-500", children: subtitle }),
+  return /* @__PURE__ */ jsxs14("div", { className: `flex items-start justify-between ${className}`, ...props, children: [
+    /* @__PURE__ */ jsxs14("div", { children: [
+      title && /* @__PURE__ */ jsx14("h3", { className: "text-lg font-semibold text-gray-900", children: title }),
+      subtitle && /* @__PURE__ */ jsx14("p", { className: "mt-1 text-sm text-gray-500", children: subtitle }),
       children
     ] }),
-    action && /* @__PURE__ */ jsx11("div", { className: "flex-shrink-0 ml-4", children: action })
+    action && /* @__PURE__ */ jsx14("div", { className: "flex-shrink-0 ml-4", children: action })
   ] });
 }
 function CardBody({
@@ -1561,14 +2202,14 @@ function CardBody({
   className = "",
   ...props
 }) {
-  return /* @__PURE__ */ jsx11("div", { className: `mt-4 ${className}`, ...props, children });
+  return /* @__PURE__ */ jsx14("div", { className: `mt-4 ${className}`, ...props, children });
 }
 function CardFooter({
   children,
   className = "",
   ...props
 }) {
-  return /* @__PURE__ */ jsx11("div", { className: `mt-4 pt-4 border-t border-gray-100 ${className}`, ...props, children });
+  return /* @__PURE__ */ jsx14("div", { className: `mt-4 pt-4 border-t border-gray-100 ${className}`, ...props, children });
 }
 function CardImage({
   aspectRatio = "video",
@@ -1582,7 +2223,7 @@ function CardImage({
     wide: "aspect-[2/1]",
     auto: ""
   };
-  return /* @__PURE__ */ jsx11("div", { className: `-m-5 mb-4 ${aspectClasses[aspectRatio]} overflow-hidden`, children: /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx14("div", { className: `-m-5 mb-4 ${aspectClasses[aspectRatio]} overflow-hidden`, children: /* @__PURE__ */ jsx14(
     "img",
     {
       className: `w-full h-full object-cover ${className}`,
@@ -1591,7 +2232,95 @@ function CardImage({
     }
   ) });
 }
+
+// src/components/ui/AnimatedSection.tsx
+import React6, { useEffect, useRef as useRef2, useState as useState6 } from "react";
+import { jsx as jsx15 } from "react/jsx-runtime";
+function AnimatedSection({
+  children,
+  animation = "fade-up",
+  delay = 0,
+  duration = 600,
+  threshold = 0.1,
+  once = true,
+  className = "",
+  as: Component = "div"
+}) {
+  const ref = useRef2(null);
+  const [isVisible, setIsVisible] = useState6(false);
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsVisible(true);
+          if (once && ref.current) {
+            observer.unobserve(ref.current);
+          }
+        } else if (!once) {
+          setIsVisible(false);
+        }
+      },
+      { threshold }
+    );
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
+    return () => {
+      if (ref.current) {
+        observer.unobserve(ref.current);
+      }
+    };
+  }, [threshold, once]);
+  const getAnimationStyles = () => {
+    const baseStyles = {
+      transition: `opacity ${duration}ms ease-out, transform ${duration}ms ease-out`,
+      transitionDelay: `${delay}ms`
+    };
+    if (!isVisible) {
+      switch (animation) {
+        case "fade-up":
+          return { ...baseStyles, opacity: 0, transform: "translateY(30px)" };
+        case "fade-down":
+          return { ...baseStyles, opacity: 0, transform: "translateY(-30px)" };
+        case "fade-left":
+          return { ...baseStyles, opacity: 0, transform: "translateX(30px)" };
+        case "fade-right":
+          return { ...baseStyles, opacity: 0, transform: "translateX(-30px)" };
+        case "zoom":
+          return { ...baseStyles, opacity: 0, transform: "scale(0.95)" };
+        case "none":
+          return {};
+        default:
+          return { ...baseStyles, opacity: 0, transform: "translateY(30px)" };
+      }
+    }
+    return { ...baseStyles, opacity: 1, transform: "translateY(0) translateX(0) scale(1)" };
+  };
+  if (animation === "none") {
+    return /* @__PURE__ */ jsx15(Component, { className, children });
+  }
+  return /* @__PURE__ */ jsx15(Component, { ref, style: getAnimationStyles(), className, children });
+}
+function StaggerContainer({
+  children,
+  staggerDelay = 100,
+  animation = "fade-up",
+  duration = 600,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx15("div", { className, children: React6.Children.map(children, (child, index) => /* @__PURE__ */ jsx15(
+    AnimatedSection,
+    {
+      animation,
+      delay: index * staggerDelay,
+      duration,
+      children: child
+    }
+  )) });
+}
 export {
+  AnimatedSection,
+  BeforeAfter,
   BriefcaseIcon,
   Button,
   ButtonLink,
@@ -1617,13 +2346,16 @@ export {
   InstagramIcon,
   MailIcon,
   MapPinIcon,
+  Menu,
   MenuIcon,
   PhoneIcon,
   ScissorsIcon,
   Services,
   SparklesIcon,
+  StaggerContainer,
   StarIcon,
   Testimonials,
+  TrustBadges,
   UtensilsIcon,
   WrenchIcon,
   XIcon,