Deploy

2026-07-31 18:44:26 +00:00
parent 0639314c9f
commit c102bb3121
1 changed files with 77 additions and 0 deletions
@@ -0,0 +1,77 @@
+'use client'
+
+import Image from 'next/image'
+import Link from 'next/link'
+import Button from '@/components/ui/Button'
+import { useVulaContent } from '@/hooks/useVulaContent'
+
+export default function CampaignsSection() {
+  const { items, loading } = useVulaContent('campaigns')
+
+  if (loading) {
+    return (
+      <div className="flex justify-center py-16">
+        <div className="w-8 h-8 rounded-full border-2 border-[#ea580c] border-t-transparent animate-spin" />
+      </div>
+    )
+  }
+
+  if (items.length === 0) return null
+
+  const featured = items[0]
+  const rest = items.slice(1)
+  const d = featured?.data as { title?: string; headline?: string; body?: string; cta_text?: string; image?: string }
+
+  return (
+    <section id="seasonal-offers" data-vula-section="campaigns" data-vula-cms="campaigns" className="bg-[#f9f5f4] py-20">
+      <div className="mx-auto max-w-7xl px-4">
+        <div className="mb-12 flex flex-col md:flex-row md:items-end md:justify-between gap-4">
+          <div>
+            <p className="text-sm font-semibold uppercase tracking-[0.2em] text-[#6b8e23]">Fresh from KZN co-ops</p>
+            <h2 className="mt-2 font-display text-3xl md:text-5xl text-[#21140d]">Seasonal colour, made in small batches</h2>
+          </div>
+          <Link href="/products" className="shrink-0">
+            <Button variant="outline">Shop all products</Button>
+          </Link>
+        </div>
+
+        <div className="grid gap-6 lg:grid-cols-2">
+          <article className="relative min-h-[420px] overflow-hidden rounded-2xl bg-[#36454F]">
+            {d?.image && (
+              <Image src={d.image} alt={d?.headline || d?.title || 'Campaign'} fill sizes="(max-width: 768px) 100vw, 50vw" className="object-cover" />
+            )}
+            <div className="absolute inset-0 bg-gradient-to-t from-[#21140d]/80 via-[#21140d]/20 to-transparent" />
+            <div className="absolute bottom-0 p-8 text-[#f9f5f4]">
+              <p className="text-sm font-semibold uppercase tracking-[0.2em] text-[#6b8e23]">{d?.title}</p>
+              <h3 className="mt-2 font-display text-2xl md:text-3xl">{d?.headline}</h3>
+              {d?.body && <p className="mt-3 max-w-xl text-sm md:text-base text-[#f9f5f4]/80">{d.body}</p>}
+              {d?.cta_text && (
+                <Link href="/products" className="mt-5 inline-block">
+                  <Button variant="default">{d.cta_text}</Button>
+                </Link>
+              )}
+            </div>
+          </article>
+
+          <div className="grid gap-6">
+            {rest.slice(0, 2).map((item) => {
+              const x = item.data as { title?: string; headline?: string; body?: string; cta_text?: string; image?: string }
+              return (
+                <article key={item.id} className="group relative min-h-[200px] overflow-hidden rounded-2xl bg-[#36454F]">
+                  {x?.image && (
+                    <Image src={x.image} alt={x?.headline || x?.title || 'Campaign'} fill sizes="(max-width: 768px) 100vw, 50vw" className="object-cover transition-transform duration-500 ease-out group-hover:scale-105" />
+                  )}
+                  <div className="absolute inset-0 bg-gradient-to-t from-[#21140d]/70 to-transparent" />
+                  <div className="absolute bottom-0 p-6 text-[#f9f5f4]">
+                    <h3 className="font-display text-xl">{x?.headline || x?.title}</h3>
+                    {x?.body && <p className="mt-1 line-clamp-2 text-sm text-[#f9f5f4]/80">{x.body}</p>}
+                  </div>
+                </article>
+              )
+            })}
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}