Vula Builder
64 lines
3.0 KiB
TypeScript
64 lines
3.0 KiB
TypeScript
'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>
|
|
)
|
|
} |