Deploy

src/components/sections/OriginRootsSection.tsx

@@ -0,0 +1,64 @@
+'use client'
+
+import { useVulaContent } from '@/hooks/useVulaContent'
+import Image from 'next/image'
+import Button from '@/components/ui/Button'
+import Link from 'next/link'
+
+export default function OriginRootsSection() {
+  const { items, loading } = useVulaContent('posts')
+  
+  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" /></div>
+  
+  if (items.length === 0) return null
+
+  const item = items[0]
+  const data = item.data as { title?: string; excerpt?: string; body?: string; author?: string; category?: string; image?: string }
+
+  return (
+    <section id="our-story" data-vula-section="originroots" data-vula-cms="posts" className="bg-[#18181b] text-white py-20">
+      <div className="max-w-7xl mx-auto px-4">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+          <div className="relative h-[400px] lg:h-[550px] overflow-hidden border-[3px] border-[#ea580c] shadow-[8px_8px_0_0_#16a34a]">
+            {data.image && (
+              <Image
+                src={data.image}
+                alt={data.title ?? 'Our Roots'}
+                fill
+                sizes="(max-width: 768px) 100vw, 50vw"
+                className="object-cover"
+              />
+            )}
+          </div>
+          <div className="flex flex-col justify-center">
+            {data.category && (
+              <p className="text-[#16a34a] uppercase tracking-[0.2em] text-sm font-bold mb-2">{data.category}</p>
+            )}
+            {data.title && (
+              <h2 className="text-4xl md:text-5xl font-black uppercase tracking-tighter leading-none mb-4">
+                <span className="text-white">{data.title.split(' ').slice(0, -1).join(' ')}</span>{' '}
+                <span className="text-[#ea580c]" style={{ WebkitTextStroke: "2px #ea580c", color: "transparent" }}>{data.title.split(' ').pop()}</span>
+              </h2>
+            )}
+            {data.excerpt && (
+              <p className="text-lg text-gray-300 uppercase tracking-wide mb-6">{data.excerpt}</p>
+            )}
+            {data.body && (
+              <p className="text-base text-gray-400 leading-relaxed mb-8">{data.body}</p>
+            )}
+            <div className="flex items-center gap-4 border-t-2 border-[#ea580c] pt-4">
+              {data.author && (
+                <p className="text-sm uppercase tracking-wider text-gray-300">By <span className="text-white font-bold">{data.author}</span></p>
+              )}
+              <Link href="/products">
+                <Button variant="outline" className="border-2 border-white text-white hover:bg-white hover:text-[#18181b] rounded-none uppercase tracking-widest text-xs shadow-[4px_4px_0_0_#16a34a] hover:shadow-[6px_6px_0_0_#ea580c] transition-all duration-200 ease-out">
+                  Shop Collection
+                </Button>
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}