@siteable/core 0.1.0

package/src/blocks/features/FeaturesBlock.tsx

@@ -0,0 +1,170 @@
+import type { BlockConfig } from '../types'
+import {
+  Blocks, Code, Bot, Zap, Shield, Globe,
+  Layers, Palette, Rocket, Star, Lock, Settings,
+} from 'lucide-react'
+import type { LucideIcon } from 'lucide-react'
+
+interface FeatureItem {
+  icon?: string
+  title: string
+  description: string
+}
+
+interface FeaturesProps {
+  label?: string
+  title: string
+  subtitle?: string
+  items: FeatureItem[]
+}
+
+const iconMap: Record<string, LucideIcon> = {
+  Blocks, Code, Bot, Zap, Shield, Globe,
+  Layers, Palette, Rocket, Star, Lock, Settings,
+}
+
+function getIcon(name?: string): LucideIcon {
+  if (!name) return Zap
+  return iconMap[name] || Zap
+}
+
+function FeaturesGrid({ props }: { props: FeaturesProps }) {
+  return (
+    <section className="px-6 @md:px-10 py-16 @md:py-20">
+      {/* Header */}
+      <div className="reveal-fade-up reveal-d1 text-center mb-10">
+        {props.label && (
+          <div className="text-[11px] font-semibold uppercase tracking-widest text-green mb-2">
+            {props.label}
+          </div>
+        )}
+        <h2 className="text-2xl @md:text-3xl font-bold tracking-tight mb-2">{props.title}</h2>
+        {props.subtitle && (
+          <p className="text-text-2 text-sm max-w-lg mx-auto">{props.subtitle}</p>
+        )}
+      </div>
+
+      {/* Grid */}
+      <div className="grid grid-cols-1 @lg:grid-cols-2 @3xl:grid-cols-3 gap-4">
+        {props.items.map((item, i) => {
+          const Icon = getIcon(item.icon)
+          return (
+            <div
+              key={i}
+              className={`reveal-fade-up reveal-d${Math.min(i + 2, 8)} group bg-bg-2 border border-border-default rounded-xl p-5 transition-all hover:-translate-y-0.5 hover:border-border-hover hover:shadow-[0_8px_24px_rgba(0,0,0,0.2)]`}
+            >
+              <div className="w-10 h-10 rounded-lg bg-green/10 border border-green/20 flex items-center justify-center text-green mb-3 transition-all group-hover:bg-green/15 group-hover:accent-glow-md">
+                <Icon size={18} />
+              </div>
+              <h3 className="text-sm font-semibold mb-1">{item.title}</h3>
+              <p className="text-[12.5px] text-text-2 leading-relaxed">{item.description}</p>
+            </div>
+          )
+        })}
+      </div>
+    </section>
+  )
+}
+
+function FeaturesList({ props }: { props: FeaturesProps }) {
+  return (
+    <section className="px-6 @md:px-10 py-16 @md:py-20">
+      <div className="reveal-fade-up reveal-d1 text-center mb-10">
+        {props.label && (
+          <div className="text-[11px] font-semibold uppercase tracking-widest text-green mb-2">
+            {props.label}
+          </div>
+        )}
+        <h2 className="text-2xl @md:text-3xl font-bold tracking-tight mb-2">{props.title}</h2>
+        {props.subtitle && (
+          <p className="text-text-2 text-sm max-w-lg mx-auto">{props.subtitle}</p>
+        )}
+      </div>
+
+      <div className="max-w-2xl mx-auto space-y-4">
+        {props.items.map((item, i) => {
+          const Icon = getIcon(item.icon)
+          return (
+            <div
+              key={i}
+              className={`reveal-fade-up reveal-d${Math.min(i + 2, 8)} flex gap-4 p-4 rounded-xl bg-bg-2 border border-border-default transition-all hover:border-border-hover`}
+            >
+              <div className="w-10 h-10 rounded-lg bg-green/10 border border-green/20 flex items-center justify-center text-green shrink-0">
+                <Icon size={18} />
+              </div>
+              <div>
+                <h3 className="text-sm font-semibold mb-0.5">{item.title}</h3>
+                <p className="text-[12.5px] text-text-2 leading-relaxed">{item.description}</p>
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </section>
+  )
+}
+
+function FeaturesAlternating({ props }: { props: FeaturesProps }) {
+  return (
+    <section className="px-6 @md:px-10 py-16 @md:py-20">
+      <div className="reveal-fade-up reveal-d1 text-center mb-12">
+        {props.label && (
+          <div className="text-[11px] font-semibold uppercase tracking-widest text-green mb-2">
+            {props.label}
+          </div>
+        )}
+        <h2 className="text-2xl @md:text-3xl font-bold tracking-tight mb-2">{props.title}</h2>
+        {props.subtitle && (
+          <p className="text-text-2 text-sm max-w-lg mx-auto">{props.subtitle}</p>
+        )}
+      </div>
+
+      <div className="space-y-8">
+        {props.items.map((item, i) => {
+          const Icon = getIcon(item.icon)
+          const imageUrl = (item as unknown as Record<string, unknown>).image as string | undefined
+          const isReversed = i % 2 === 1
+
+          return (
+            <div
+              key={i}
+              className={`reveal-fade-up reveal-d${Math.min(i + 2, 8)} flex flex-col @lg:flex-row items-center gap-6 @lg:gap-10 ${isReversed ? '@lg:flex-row-reverse' : ''}`}
+            >
+              {/* Image / placeholder */}
+              <div className="flex-1 w-full">
+                {imageUrl ? (
+                  <img src={imageUrl} alt={item.title} className="w-full h-48 @lg:h-56 object-cover rounded-xl" />
+                ) : (
+                  <div className="w-full h-48 @lg:h-56 rounded-xl bg-bg-2 border border-border-default flex items-center justify-center">
+                    <Icon size={32} className="text-green/30" />
+                  </div>
+                )}
+              </div>
+              {/* Text */}
+              <div className="flex-1">
+                <div className="w-10 h-10 rounded-lg bg-green/10 border border-green/20 flex items-center justify-center text-green mb-3">
+                  <Icon size={18} />
+                </div>
+                <h3 className="text-lg font-semibold mb-2">{item.title}</h3>
+                <p className="text-text-2 text-[13px] leading-relaxed">{item.description}</p>
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </section>
+  )
+}
+
+export function FeaturesBlock({ block }: { block: BlockConfig }) {
+  const props = block.props as unknown as FeaturesProps
+
+  switch (block.variant) {
+    case 'list':
+      return <FeaturesList props={props} />
+    case 'alternating':
+      return <FeaturesAlternating props={props} />
+    default:
+      return <FeaturesGrid props={props} />
+  }
+}

package/src/blocks/footer/FooterBlock.tsx

@@ -0,0 +1,136 @@
+import type { BlockConfig } from '../types'
+
+interface FooterProps {
+  logo: string
+  logoImage?: string
+  copyright: string
+  links: string[]
+  columns?: { title: string; links: string[] }[]
+}
+
+function FooterSimple({ props }: { props: FooterProps }) {
+  return (
+    <footer className="px-6 @md:px-10 py-8 border-t border-border-subtle">
+      <div className="flex flex-col @lg:flex-row items-center justify-between gap-4">
+        <div className="flex items-center gap-2">
+          {props.logoImage ? (
+            <img src={props.logoImage} alt={props.logo} className="h-6 w-auto object-contain" />
+          ) : (
+            <div className="w-6 h-6 rounded-md bg-green/10 flex items-center justify-center">
+              <div className="w-3 h-3 rounded-full bg-green" />
+            </div>
+          )}
+          <span className="text-sm font-semibold text-text-1">{props.logo}</span>
+        </div>
+
+        <div className="flex items-center gap-4">
+          {props.links.map((link, i) => (
+            <span
+              key={i}
+              className="text-[12px] text-text-3 hover:text-text-1 transition-colors cursor-pointer"
+            >
+              {link}
+            </span>
+          ))}
+        </div>
+
+        <span className="text-[11px] text-text-3">{props.copyright}</span>
+      </div>
+    </footer>
+  )
+}
+
+function FooterMultiColumn({ props }: { props: FooterProps }) {
+  const columns = props.columns || [
+    { title: 'Product', links: ['Features', 'Pricing', 'Changelog', 'Roadmap'] },
+    { title: 'Company', links: ['About', 'Blog', 'Careers', 'Press'] },
+    { title: 'Resources', links: ['Documentation', 'API Reference', 'Guides', 'Community'] },
+    { title: 'Legal', links: ['Privacy', 'Terms', 'Security', 'Cookie Policy'] },
+  ]
+
+  return (
+    <footer className="px-6 @md:px-10 py-12 border-t border-border-subtle">
+      <div className="grid grid-cols-2 @2xl:grid-cols-5 gap-8 mb-10">
+        {/* Brand column */}
+        <div className="col-span-2 @2xl:col-span-1">
+          <div className="flex items-center gap-2 mb-3">
+            {props.logoImage ? (
+              <img src={props.logoImage} alt={props.logo} className="h-7 w-auto object-contain" />
+            ) : (
+              <div className="w-7 h-7 rounded-md bg-green/10 flex items-center justify-center">
+                <div className="w-3.5 h-3.5 rounded-full bg-green" />
+              </div>
+            )}
+            <span className="text-sm font-semibold">{props.logo}</span>
+          </div>
+          <p className="text-[12px] text-text-3 leading-relaxed max-w-[200px]">
+            Build beautiful websites with structured JSON config.
+          </p>
+        </div>
+
+        {/* Link columns */}
+        {columns.map((col, i) => (
+          <div key={i}>
+            <h4 className="text-[11px] font-semibold uppercase tracking-wider text-text-2 mb-3">
+              {col.title}
+            </h4>
+            <ul className="space-y-2">
+              {col.links.map((link, j) => (
+                <li key={j}>
+                  <span className="text-[12.5px] text-text-3 hover:text-text-1 transition-colors cursor-pointer">
+                    {link}
+                  </span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </div>
+
+      {/* Bottom bar */}
+      <div className="pt-6 border-t border-border-subtle flex flex-col @lg:flex-row items-center justify-between gap-3">
+        <span className="text-[11px] text-text-3">{props.copyright}</span>
+        <div className="flex gap-4">
+          {props.links.map((link, i) => (
+            <span
+              key={i}
+              className="text-[11px] text-text-3 hover:text-text-1 transition-colors cursor-pointer"
+            >
+              {link}
+            </span>
+          ))}
+        </div>
+      </div>
+    </footer>
+  )
+}
+
+function FooterMinimal({ props }: { props: FooterProps }) {
+  return (
+    <footer className="px-6 @md:px-10 py-6">
+      <div className="flex items-center justify-center gap-1.5 text-[11px] text-text-3">
+        <span>{props.copyright}</span>
+        {props.links.length > 0 && <span className="mx-1">|</span>}
+        {props.links.map((link, i) => (
+          <span key={i}>
+            <span className="hover:text-text-1 transition-colors cursor-pointer">{link}</span>
+            {i < props.links.length - 1 && <span className="mx-1">|</span>}
+          </span>
+        ))}
+      </div>
+    </footer>
+  )
+}
+
+export function FooterBlock({ block }: { block: BlockConfig }) {
+  const props = block.props as unknown as FooterProps
+
+  switch (block.variant) {
+    case 'multi-column':
+      return <FooterMultiColumn props={props} />
+    case 'minimal':
+      return <FooterMinimal props={props} />
+    default:
+      return <FooterSimple props={props} />
+  }
+}

package/src/blocks/gallery/GalleryBlock.tsx

@@ -0,0 +1,67 @@
+import { ImageIcon } from 'lucide-react'
+import type { BlockConfig } from '../types'
+
+interface GalleryImage {
+  src?: string
+  alt?: string
+  caption?: string
+}
+
+const defaultImages: GalleryImage[] = [
+  { alt: 'Image 1' }, { alt: 'Image 2' }, { alt: 'Image 3' },
+  { alt: 'Image 4' }, { alt: 'Image 5' }, { alt: 'Image 6' },
+]
+
+function ImageCard({ image, tall }: { image: GalleryImage; tall?: boolean }) {
+  return (
+    <div className={`rounded-lg overflow-hidden border border-border-default group ${tall ? 'row-span-2' : ''}`}>
+      {image.src ? (
+        <img src={image.src} alt={image.alt || ''} className="w-full h-full object-cover" />
+      ) : (
+        <div className="w-full h-full min-h-[140px] bg-gradient-to-br from-bg-3 to-bg-4 flex items-center justify-center">
+          <ImageIcon size={24} className="text-text-3" />
+        </div>
+      )}
+      {image.caption && (
+        <div className="px-3 py-2 bg-bg-2 text-[11px] text-text-2">{image.caption}</div>
+      )}
+    </div>
+  )
+}
+
+export function GalleryBlock({ block }: { block: BlockConfig }) {
+  const { variant, props } = block
+  const title = props.title as string | undefined
+  const images = ((props.images as GalleryImage[]) || []).length > 0
+    ? (props.images as GalleryImage[])
+    : defaultImages
+
+  if (variant === 'masonry') {
+    return (
+      <div className="px-6 py-12 @lg:px-16 @lg:py-16">
+        {title && <h2 className="reveal-fade-up reveal-d1 text-2xl font-display font-semibold mb-6 text-center">{title}</h2>}
+        <div className="grid grid-cols-2 @lg:grid-cols-3 auto-rows-[160px] gap-3">
+          {images.map((img, i) => (
+            <div key={i} className={`reveal-scale reveal-d${Math.min(i + 2, 8)}`}>
+              <ImageCard image={img} tall={i % 3 === 0} />
+            </div>
+          ))}
+        </div>
+      </div>
+    )
+  }
+
+  // grid (default)
+  return (
+    <div className="px-6 py-12 @lg:px-16 @lg:py-16">
+      {title && <h2 className="reveal-fade-up reveal-d1 text-2xl font-display font-semibold mb-6 text-center">{title}</h2>}
+      <div className="grid grid-cols-2 @lg:grid-cols-3 gap-3">
+        {images.map((img, i) => (
+          <div key={i} className={`reveal-scale reveal-d${Math.min(i + 2, 8)}`}>
+            <ImageCard image={img} />
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/blocks/hero/HeroBlock.tsx

@@ -0,0 +1,163 @@
+import type { BlockConfig } from '../types'
+import { ArrowRight, Sparkles } from 'lucide-react'
+
+interface HeroProps {
+  badge?: string
+  headline: string
+  subheadline: string
+  primaryCta: string
+  secondaryCta?: string
+}
+
+function HeroCentered({ props }: { props: HeroProps }) {
+  return (
+    <section className="px-6 @md:px-10 py-20 @md:py-28 text-center">
+      {/* Badge */}
+      {props.badge && (
+        <div className="reveal-fade-up reveal-d1 inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-green/10 border border-green/20 text-green text-[11px] font-medium mb-6">
+          <Sparkles size={12} />
+          {props.badge}
+        </div>
+      )}
+
+      {/* Headline */}
+      <h1 className="reveal-fade-up reveal-d2 text-4xl @md:text-5xl font-bold tracking-tight leading-[1.1] mb-4 max-w-3xl mx-auto">
+        {props.headline}
+      </h1>
+
+      {/* Subheadline */}
+      <p className="reveal-fade-up reveal-d3 text-text-2 text-base @md:text-lg leading-relaxed max-w-xl mx-auto mb-8">
+        {props.subheadline}
+      </p>
+
+      {/* CTAs */}
+      <div className="reveal-fade-up reveal-d4 flex flex-wrap items-center justify-center gap-3">
+        <button className="px-6 py-3 rounded-lg bg-green text-black text-sm font-semibold hover:bg-green-dim transition-all hover:accent-glow-xl flex items-center gap-2">
+          {props.primaryCta}
+          <ArrowRight size={16} />
+        </button>
+        {props.secondaryCta && (
+          <button className="px-6 py-3 rounded-lg bg-bg-3 text-text-0 text-sm font-medium border border-border-default hover:bg-bg-4 hover:border-border-hover transition-all">
+            {props.secondaryCta}
+          </button>
+        )}
+      </div>
+    </section>
+  )
+}
+
+function HeroSplit({ props }: { props: HeroProps }) {
+  return (
+    <section className="px-6 @md:px-10 py-16 @md:py-24 flex flex-col @2xl:flex-row items-center gap-10">
+      {/* Text side */}
+      <div className="flex-1">
+        {props.badge && (
+          <div className="reveal-fade-up reveal-d1 inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-green/10 border border-green/20 text-green text-[11px] font-medium mb-4">
+            <Sparkles size={12} />
+            {props.badge}
+          </div>
+        )}
+        <h1 className="reveal-fade-up reveal-d2 text-3xl @md:text-5xl font-bold tracking-tight leading-[1.1] mb-4">
+          {props.headline}
+        </h1>
+        <p className="reveal-fade-up reveal-d3 text-text-2 text-base leading-relaxed mb-6 max-w-lg">
+          {props.subheadline}
+        </p>
+        <div className="reveal-fade-up reveal-d4 flex flex-wrap items-center gap-3">
+          <button className="px-6 py-3 rounded-lg bg-green text-black text-sm font-semibold hover:bg-green-dim transition-all flex items-center gap-2">
+            {props.primaryCta}
+            <ArrowRight size={16} />
+          </button>
+          {props.secondaryCta && (
+            <button className="px-6 py-3 rounded-lg bg-bg-3 text-text-0 text-sm font-medium border border-border-default hover:bg-bg-4 transition-all">
+              {props.secondaryCta}
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Visual side */}
+      <div className="reveal-fade-up reveal-d3 flex-1 w-full">
+        <div className="aspect-[4/3] rounded-xl bg-bg-2 border border-border-default overflow-hidden relative">
+          <div className="absolute inset-0 bg-gradient-to-br from-green/5 to-transparent" />
+          <div className="absolute inset-6 border border-dashed border-border-default rounded-lg flex items-center justify-center text-text-3 text-sm">
+            Preview
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+function HeroGradient({ props }: { props: HeroProps }) {
+  return (
+    <section className="px-6 @md:px-10 py-20 @md:py-32 text-center relative overflow-hidden">
+      {/* Gradient background */}
+      <div className="absolute inset-0 bg-gradient-to-b from-green/5 via-transparent to-transparent pointer-events-none" />
+      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[300px] bg-green/8 rounded-full blur-[100px] pointer-events-none" />
+
+      <div className="relative z-10">
+        {props.badge && (
+          <div className="reveal-fade-up reveal-d1 inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-green/10 border border-green/20 text-green text-[11px] font-medium mb-6">
+            <Sparkles size={12} />
+            {props.badge}
+          </div>
+        )}
+
+        <h1 className="reveal-fade-up reveal-d2 text-4xl @md:text-5xl font-bold tracking-tight leading-[1.1] mb-4 max-w-3xl mx-auto" style={{ color: 'var(--color-text-0)' }}>
+          {props.headline}
+        </h1>
+
+        <p className="reveal-fade-up reveal-d3 text-text-2 text-base @md:text-lg leading-relaxed max-w-xl mx-auto mb-8">
+          {props.subheadline}
+        </p>
+
+        <div className="reveal-fade-up reveal-d4 flex flex-wrap items-center justify-center gap-3">
+          <button className="px-6 py-3 rounded-lg bg-green text-black text-sm font-semibold hover:bg-green-dim transition-all hover:accent-glow-xl flex items-center gap-2">
+            {props.primaryCta}
+            <ArrowRight size={16} />
+          </button>
+          {props.secondaryCta && (
+            <button className="px-6 py-3 rounded-lg bg-bg-3 text-text-0 text-sm font-medium border border-border-default hover:bg-bg-4 transition-all">
+              {props.secondaryCta}
+            </button>
+          )}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+function HeroMinimal({ props }: { props: HeroProps }) {
+  return (
+    <section className="px-6 @md:px-10 py-24 @md:py-36 text-center">
+      <h1 className="reveal-fade-up reveal-d1 text-5xl @md:text-7xl font-bold tracking-tighter leading-[1.05] mb-6 max-w-4xl mx-auto">
+        {props.headline}
+      </h1>
+      <p className="reveal-fade-up reveal-d2 text-text-2 text-lg @md:text-xl leading-relaxed max-w-lg mx-auto mb-10">
+        {props.subheadline}
+      </p>
+      <div className="reveal-fade-up reveal-d3">
+        <button className="px-8 py-4 rounded-lg bg-green text-black text-sm font-semibold hover:bg-green-dim transition-all hover:accent-glow-xl flex items-center gap-2 mx-auto">
+          {props.primaryCta}
+          <ArrowRight size={16} />
+        </button>
+      </div>
+    </section>
+  )
+}
+
+export function HeroBlock({ block }: { block: BlockConfig }) {
+  const props = block.props as unknown as HeroProps
+
+  switch (block.variant) {
+    case 'split':
+      return <HeroSplit props={props} />
+    case 'gradient':
+      return <HeroGradient props={props} />
+    case 'minimal':
+      return <HeroMinimal props={props} />
+    default:
+      return <HeroCentered props={props} />
+  }
+}

package/src/blocks/image/ImageBlock.tsx

@@ -0,0 +1,78 @@
+import { ImageIcon } from 'lucide-react'
+import type { BlockConfig } from '../types'
+
+function Placeholder({ className }: { className?: string }) {
+  return (
+    <div className={`bg-gradient-to-br from-bg-3 to-bg-4 flex items-center justify-center ${className || ''}`}>
+      <ImageIcon size={32} className="text-text-3" />
+    </div>
+  )
+}
+
+export function ImageBlock({ block }: { block: BlockConfig }) {
+  const { variant, props } = block
+  const src = props.src as string | undefined
+  const alt = (props.alt as string) || ''
+  const title = props.title as string | undefined
+  const subtitle = props.subtitle as string | undefined
+  const imageSide = (props.imageSide as string) || 'left'
+  const images = (props.images as { src?: string; alt?: string }[]) || []
+
+  if (variant === 'side-by-side') {
+    const imgEl = src
+      ? <img src={src} alt={alt} className="w-full h-full object-cover rounded-lg" />
+      : <Placeholder className="w-full h-64 @lg:h-80 rounded-lg" />
+
+    return (
+      <div className="px-6 py-12 @lg:px-16 @lg:py-16">
+        <div className={`grid grid-cols-1 @lg:grid-cols-2 gap-8 @lg:gap-12 items-center ${imageSide === 'right' ? '' : ''}`}>
+          <div className={`reveal-scale reveal-d1 ${imageSide === 'right' ? '@lg:order-2' : ''}`}>
+            {imgEl}
+          </div>
+          <div className={`reveal-fade-up reveal-d2 ${imageSide === 'right' ? '@lg:order-1' : ''}`}>
+            {title && <h2 className="text-2xl font-display font-semibold mb-3">{title}</h2>}
+            {subtitle && <p className="text-text-1 leading-relaxed">{subtitle}</p>}
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  if (variant === 'grid') {
+    const gridImages = images.length > 0
+      ? images.slice(0, 4)
+      : [{ src: undefined, alt: '1' }, { src: undefined, alt: '2' }, { src: undefined, alt: '3' }, { src: undefined, alt: '4' }]
+
+    return (
+      <div className="px-6 py-12 @lg:px-16 @lg:py-16">
+        {title && <h2 className="reveal-fade-up reveal-d1 text-2xl font-display font-semibold mb-6 text-center">{title}</h2>}
+        <div className="grid grid-cols-2 @lg:grid-cols-4 gap-3">
+          {gridImages.map((img, i) => (
+            <div key={i} className={`reveal-scale reveal-d${Math.min(i + 2, 8)} aspect-square rounded-lg overflow-hidden`}>
+              {img.src
+                ? <img src={img.src} alt={img.alt || ''} className="w-full h-full object-cover" />
+                : <Placeholder className="w-full h-full" />
+              }
+            </div>
+          ))}
+        </div>
+      </div>
+    )
+  }
+
+  // hero-image (default)
+  return (
+    <div className="reveal-scale reveal-d1 relative">
+      {src
+        ? <img src={src} alt={alt} className="w-full h-64 @lg:h-96 object-cover" />
+        : <Placeholder className="w-full h-64 @lg:h-96" />
+      }
+      {(title || subtitle) && (
+        <div className="absolute inset-0 bg-gradient-to-t from-bg-0/80 to-transparent flex flex-col justify-end p-6 @lg:p-12">
+          {title && <h2 className="reveal-fade-up reveal-d2 text-2xl @lg:text-3xl font-display font-bold mb-2">{title}</h2>}
+          {subtitle && <p className="reveal-fade-up reveal-d3 text-text-1 text-sm @lg:text-base max-w-lg">{subtitle}</p>}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/blocks/logocloud/LogoCloudBlock.tsx

@@ -0,0 +1,70 @@
+import type { BlockConfig } from '../types'
+
+interface LogoCloudProps {
+  title?: string
+  logos?: string[]
+}
+
+const defaultLogos = ['Vercel', 'Stripe', 'GitHub', 'Figma', 'Notion', 'Linear']
+
+function LogoPlaceholder({ name }: { name: string }) {
+  return (
+    <div className="group cursor-pointer transition-all">
+      <div className="flex items-center gap-2 opacity-50 group-hover:opacity-100 transition-all group-hover:scale-105 grayscale group-hover:grayscale-0">
+        <svg
+          aria-hidden="true"
+          width="28"
+          height="28"
+          viewBox="0 0 28 28"
+          className="text-text-3 group-hover:text-green transition-colors"
+        >
+          <rect
+            x="1"
+            y="1"
+            width="26"
+            height="26"
+            rx="6"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+          />
+          <text
+            x="14"
+            y="18"
+            textAnchor="middle"
+            fill="currentColor"
+            fontSize="14"
+            fontWeight="700"
+            fontFamily="system-ui, sans-serif"
+          >
+            {name.charAt(0).toUpperCase()}
+          </text>
+        </svg>
+        <span className="text-sm font-semibold text-text-3 group-hover:text-text-0 tracking-tight transition-colors">
+          {name}
+        </span>
+      </div>
+    </div>
+  )
+}
+
+export function LogoCloudBlock({ block }: { block: BlockConfig }) {
+  const props = block.props as unknown as LogoCloudProps
+  const logos = props.logos || defaultLogos
+
+  return (
+    <section className="px-6 @md:px-10 py-10 @md:py-14">
+      <p className="reveal-fade-up reveal-d1 text-center text-[11px] font-medium uppercase tracking-widest text-text-3 mb-6">
+        {props.title || 'Trusted by teams at'}
+      </p>
+
+      <div className="flex flex-wrap items-center justify-center gap-8 @md:gap-12">
+        {logos.map((logo, i) => (
+          <div key={i} className={`reveal-fade-up reveal-d${Math.min(i + 2, 8)}`}>
+            <LogoPlaceholder name={logo} />
+          </div>
+        ))}
+      </div>
+    </section>
+  )
+}