Deploy

src/components/sections/ShippingAndReturnsSection.tsx

@@ -0,0 +1,51 @@
+'use client'
+
+import { useVulaContent } from "@/hooks/useVulaContent"
+import Badge from "@/components/ui/Badge"
+import { Package, RotateCcw, Truck } from 'lucide-react'
+
+export default function ShippingAndReturnsSection() {
+  const { items, loading } = useVulaContent("policies")
+
+  if (loading) {
+    return (
+      <div className="flex justify-center py-16">
+        <div className="w-8 h-8 rounded-full border-2 border-current border-t-transparent animate-spin text-[#0077BE]" />
+      </div>
+    )
+  }
+
+  if (items.length === 0) return null
+
+  return (
+    <section id="shipping-returns" data-vula-section="shippingreturns" data-vula-cms="policies" className="py-20 px-6 bg-[#F0F8FF]">
+      <div className="max-w-5xl mx-auto">
+        <h2 className="text-3xl font-bold text-[#1A2B3C] mb-10 text-center">Delivery & Returns</h2>
+        <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+          {items.map((item) => {
+            const d = item.data as { title?: string; body?: string }
+            const iconMap: Record<string, React.ReactNode> = {
+              "Shipping": <Truck className="w-8 h-8 text-[#00A8CC]" />,
+              "Returns": <RotateCcw className="w-8 h-8 text-[#00A8CC]" />,
+              "Packaging": <Package className="w-8 h-8 text-[#00A8CC]" />
+            }
+            const icon = iconMap[d.title || ""] || <Package className="w-8 h-8 text-[#00A8CC]" />
+            return (
+              <div key={item.id} className="bg-white rounded-xl shadow-md p-6">
+                <div className="flex items-center gap-3 mb-3">
+                  {icon}
+                  <Badge variant="primary" className="bg-[#0077BE] text-white">
+                    {d.title || "Policy"}
+                  </Badge>
+                </div>
+                <p className="text-[#1A2B3C]/80 text-sm leading-relaxed">
+                  {d.body || "Transparent policy details from our team."}
+                </p>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}