Deploy

src/components/sections/AuthenticationGuaranteeSection.tsx

@@ -0,0 +1,80 @@
+'use client'
+
+import { useVulaContent } from '@/hooks/useVulaContent'
+import { Award, CircleCheck, Shield } from 'lucide-react'
+import { Card, CardContent } from '@/components/ui/Card'
+import Badge from '@/components/ui/Badge'
+
+export default function AuthenticationGuaranteeSection() {
+  const { items, loading } = useVulaContent('policies')
+
+  if (loading) {
+    return (
+      <div className="flex justify-center py-24">
+        <div className="w-8 h-8 rounded-full border-2 border-current border-t-transparent animate-spin text-[#c0c0c0]" />
+      </div>
+    )
+  }
+
+  if (items.length === 0) return null
+
+  return (
+    <section
+      id="authentication-guarantee"
+      data-vula-section="authenticationguarantee"
+      data-vula-cms="policies"
+      className="bg-[#0f0f17] py-24 lg:py-32 px-4"
+    >
+      <div className="max-w-6xl mx-auto">
+        <div className="flex items-center gap-4 mb-12">
+          <span className="h-px w-14 bg-[#c0c0c0]" />
+          <Badge variant="accent" className="tracking-widest uppercase text-xs">
+            Trust Guarantee
+          </Badge>
+          <span className="h-px w-14 bg-[#c0c0c0]" />
+        </div>
+
+        <h2 className="font-serif text-3xl lg:text-4xl text-[#e7e7ee] mb-16 max-w-3xl leading-tight">
+          Every pair authenticated{' '}
+          <span className="italic text-[#c0c0c0]">before it reaches your door</span>
+        </h2>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {items.map((item) => {
+            const d = item.data as { title?: string; description?: string }
+            return (
+              <Card key={item.id} className="bg-[#18181b] border border-[#303040] rounded-lg overflow-hidden">
+                <CardContent className="p-8">
+                  <div className="mb-6">
+                    <Shield className="w-8 h-8 text-[#c0c0c0]" />
+                  </div>
+                  <h3 className="text-xl font-semibold text-[#e7e7ee] mb-3 font-sans">
+                    {d.title}
+                  </h3>
+                  <p className="text-[#a0a0b0] leading-relaxed text-sm">
+                    {d.description}
+                  </p>
+                </CardContent>
+              </Card>
+            )
+          })}
+        </div>
+
+        <div className="mt-16 flex flex-wrap gap-10 justify-center text-xs uppercase tracking-widest text-[#c0c0c0]">
+          <div className="flex items-center gap-2">
+            <CircleCheck className="w-4 h-4" />
+            <span>Verified by third-party experts</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <CircleCheck className="w-4 h-4" />
+            <span>100% satisfaction guarantee</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <CircleCheck className="w-4 h-4" />
+            <span>Free returns within 7 days</span>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}