@siteable/core 0.1.0

package/src/blocks/navbar/NavbarBlock.tsx

@@ -0,0 +1,102 @@
+import type { BlockConfig } from '../types'
+import { Menu } from 'lucide-react'
+
+interface NavbarProps {
+  logo: string
+  links: string[]
+  ctaText: string
+}
+
+function NavbarDefault({ props }: { props: NavbarProps }) {
+  const { logo, links = [], ctaText } = props
+
+  return (
+    <nav className="px-6 @md:px-10 py-4 flex items-center justify-between">
+      {/* Logo */}
+      <div className="flex items-center gap-2">
+        <div className="w-8 h-8 rounded-lg bg-green/10 flex items-center justify-center">
+          <div className="w-4 h-4 rounded-full bg-green" />
+        </div>
+        <span className="font-semibold text-[15px] text-text-0 tracking-tight">{logo}</span>
+      </div>
+
+      {/* Desktop nav links */}
+      <div className="hidden @2xl:flex items-center gap-6">
+        {links.map((link, i) => (
+          <span
+            key={i}
+            className="text-[13px] text-text-2 hover:text-text-0 transition-colors cursor-pointer"
+          >
+            {link}
+          </span>
+        ))}
+      </div>
+
+      {/* CTA + mobile menu */}
+      <div className="flex items-center gap-3">
+        <button className="px-4 py-2 rounded-lg bg-green text-black text-[13px] font-semibold hover:bg-green-dim transition-colors">
+          {ctaText}
+        </button>
+        <button className="@2xl:hidden w-9 h-9 rounded-lg border border-border-default flex items-center justify-center text-text-2 hover:text-text-0 hover:bg-bg-3 transition-colors">
+          <Menu size={16} />
+        </button>
+      </div>
+    </nav>
+  )
+}
+
+function NavbarCentered({ props }: { props: NavbarProps }) {
+  const { logo, links = [], ctaText } = props
+  const mid = Math.ceil(links.length / 2)
+  const leftLinks = links.slice(0, mid)
+  const rightLinks = links.slice(mid)
+
+  return (
+    <nav className="px-6 @md:px-10 py-4 flex items-center justify-between">
+      {/* Left links */}
+      <div className="hidden @2xl:flex items-center gap-6 flex-1">
+        {leftLinks.map((link, i) => (
+          <span key={i} className="text-[13px] text-text-2 hover:text-text-0 transition-colors cursor-pointer">
+            {link}
+          </span>
+        ))}
+      </div>
+
+      {/* Center logo */}
+      <div className="flex items-center gap-2">
+        <div className="w-8 h-8 rounded-lg bg-green/10 flex items-center justify-center">
+          <div className="w-4 h-4 rounded-full bg-green" />
+        </div>
+        <span className="font-semibold text-[15px] text-text-0 tracking-tight">{logo}</span>
+      </div>
+
+      {/* Right links + CTA */}
+      <div className="hidden @2xl:flex items-center gap-6 flex-1 justify-end">
+        {rightLinks.map((link, i) => (
+          <span key={i} className="text-[13px] text-text-2 hover:text-text-0 transition-colors cursor-pointer">
+            {link}
+          </span>
+        ))}
+        <button className="px-4 py-2 rounded-lg bg-green text-black text-[13px] font-semibold hover:bg-green-dim transition-colors ml-2">
+          {ctaText}
+        </button>
+      </div>
+
+      {/* Mobile menu */}
+      <button className="@2xl:hidden w-9 h-9 rounded-lg border border-border-default flex items-center justify-center text-text-2 hover:text-text-0 hover:bg-bg-3 transition-colors">
+        <Menu size={16} />
+      </button>
+    </nav>
+  )
+}
+
+export function NavbarBlock({ block }: { block: BlockConfig }) {
+  const props = block.props as unknown as NavbarProps
+
+  switch (block.variant) {
+    case 'centered':
+      return <NavbarCentered props={props} />
+    default:
+      return <NavbarDefault props={props} />
+  }
+}

package/src/blocks/newsletter/NewsletterBlock.tsx

@@ -0,0 +1,51 @@
+import { toast } from 'sonner'
+import type { BlockConfig } from '../types'
+import { Mail } from 'lucide-react'
+
+interface NewsletterProps {
+  title?: string
+  subtitle?: string
+  buttonText?: string
+  socialProof?: string
+}
+
+export function NewsletterBlock({ block }: { block: BlockConfig }) {
+  const props = block.props as unknown as NewsletterProps
+
+  return (
+    <section className="px-6 @md:px-10 py-12 @md:py-16">
+      <div className="max-w-xl mx-auto text-center">
+        <div className="reveal-scale reveal-d1 w-12 h-12 rounded-xl bg-green/10 border border-green/20 flex items-center justify-center text-green mx-auto mb-4">
+          <Mail size={22} />
+        </div>
+        <h2 className="reveal-fade-up reveal-d2 text-xl @md:text-2xl font-bold tracking-tight mb-2">
+          {props.title || 'Stay in the loop'}
+        </h2>
+        <p className="reveal-fade-up reveal-d3 text-text-2 text-sm mb-6">
+          {props.subtitle || 'Get updates on new features and releases. No spam, ever.'}
+        </p>
+
+        <div className="reveal-fade-up reveal-d4 flex gap-2 max-w-sm mx-auto">
+          <input
+            type="email"
+            placeholder="you@example.com"
+            className="flex-1 px-4 py-2.5 rounded-lg border border-border-default bg-bg-2 text-text-0 text-[13px] outline-none focus:border-green placeholder:text-text-3 transition-colors"
+          />
+          <button
+            onClick={() => toast("You're subscribed!")}
+            className="px-5 py-2.5 rounded-lg bg-green text-black text-sm font-semibold hover:bg-green-dim transition-all shrink-0"
+          >
+            {props.buttonText || 'Subscribe'}
+          </button>
+        </div>
+
+        {props.socialProof && (
+          <p className="text-[11px] text-text-3 mt-3">{props.socialProof}</p>
+        )}
+        {!props.socialProof && (
+          <p className="text-[11px] text-text-3 mt-3">Join 2,000+ developers and designers</p>
+        )}
+      </div>
+    </section>
+  )
+}

package/src/blocks/pricing/PricingBlock.tsx

@@ -0,0 +1,173 @@
+import type { BlockConfig } from '../types'
+import { Check, Star } from 'lucide-react'
+
+interface PricingTier {
+  name: string
+  price: string
+  period?: string
+  description?: string
+  features: string[]
+  cta: string
+  featured?: boolean
+}
+
+interface PricingProps {
+  title: string
+  subtitle?: string
+  tiers?: PricingTier[]
+}
+
+const defaultTiers: PricingTier[] = [
+  {
+    name: 'Starter',
+    price: '$0',
+    period: '/month',
+    description: 'For personal projects',
+    features: ['1 website', '5 blocks', 'Basic export', 'Community support'],
+    cta: 'Get Started',
+  },
+  {
+    name: 'Pro',
+    price: '$19',
+    period: '/month',
+    description: 'For professionals',
+    features: ['Unlimited websites', 'All blocks', 'Custom domains', 'Priority support', 'Agent API access', 'Version history'],
+    cta: 'Upgrade to Pro',
+    featured: true,
+  },
+  {
+    name: 'Team',
+    price: '$49',
+    period: '/month',
+    description: 'For teams and agencies',
+    features: ['Everything in Pro', 'Team collaboration', 'Custom components', 'SSO', 'Dedicated support'],
+    cta: 'Contact Sales',
+  },
+]
+
+function PricingSimple({ props }: { props: PricingProps }) {
+  const tiers = props.tiers || defaultTiers
+
+  return (
+    <section className="px-6 @md:px-10 py-16 @md:py-20">
+      <div className="reveal-fade-up reveal-d1 text-center mb-10">
+        <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="grid grid-cols-1 @2xl:grid-cols-3 gap-4 max-w-4xl mx-auto">
+        {tiers.map((tier, i) => (
+          <div
+            key={i}
+            className={`reveal-fade-up reveal-d${Math.min(i + 2, 8)} relative rounded-xl p-6 flex flex-col transition-all ${
+              tier.featured
+                ? 'bg-bg-2 border-2 border-green accent-glow-ring'
+                : 'bg-bg-2 border border-border-default hover:border-border-hover'
+            }`}
+          >
+            {tier.featured && (
+              <div className="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-0.5 rounded-full bg-green text-black text-[10px] font-bold uppercase tracking-wider flex items-center gap-1">
+                <Star size={10} fill="currentColor" />
+                Recommended
+              </div>
+            )}
+
+            <div className="mb-4">
+              <h3 className="text-sm font-semibold mb-1">{tier.name}</h3>
+              {tier.description && (
+                <p className="text-[11px] text-text-3">{tier.description}</p>
+              )}
+            </div>
+
+            <div className="mb-4">
+              <span className="text-3xl font-bold tracking-tight">{tier.price}</span>
+              {tier.period && (
+                <span className="text-text-3 text-sm">{tier.period}</span>
+              )}
+            </div>
+
+            <ul className="space-y-2 mb-6 flex-1">
+              {tier.features.map((feature, j) => (
+                <li key={j} className="flex items-start gap-2 text-[12.5px] text-text-1">
+                  <Check size={14} className="text-green shrink-0 mt-0.5" />
+                  {feature}
+                </li>
+              ))}
+            </ul>
+
+            <button
+              className={`w-full py-2.5 rounded-lg text-sm font-semibold transition-all ${
+                tier.featured
+                  ? 'bg-green text-black hover:bg-green-dim hover:accent-glow-lg'
+                  : 'bg-bg-3 text-text-0 border border-border-default hover:bg-bg-4 hover:border-border-hover'
+              }`}
+            >
+              {tier.cta}
+            </button>
+          </div>
+        ))}
+      </div>
+    </section>
+  )
+}
+
+function PricingComparison({ props }: { props: PricingProps }) {
+  const tiers = props.tiers || defaultTiers
+  const allFeatures = [...new Set(tiers.flatMap((t) => t.features))]
+
+  return (
+    <section className="px-6 @md:px-10 py-16 @md:py-20">
+      <div className="reveal-fade-up reveal-d1 text-center mb-10">
+        <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="reveal-fade-up reveal-d2 max-w-3xl mx-auto overflow-x-auto">
+        <table className="w-full text-left text-[12.5px]">
+          <thead>
+            <tr className="border-b border-border-default">
+              <th className="py-3 px-3 text-text-3 font-medium">Feature</th>
+              {tiers.map((tier, i) => (
+                <th key={i} className={`py-3 px-3 text-center font-semibold ${tier.featured ? 'text-green' : 'text-text-0'}`}>
+                  {tier.name}
+                  <div className="text-lg font-bold mt-0.5">{tier.price}</div>
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {allFeatures.map((feature, i) => (
+              <tr key={i} className="border-b border-border-subtle">
+                <td className="py-2.5 px-3 text-text-1">{feature}</td>
+                {tiers.map((tier, j) => (
+                  <td key={j} className="py-2.5 px-3 text-center">
+                    {tier.features.includes(feature) ? (
+                      <Check size={14} className="text-green mx-auto" />
+                    ) : (
+                      <span className="text-text-3">-</span>
+                    )}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </section>
+  )
+}
+
+export function PricingBlock({ block }: { block: BlockConfig }) {
+  const props = block.props as unknown as PricingProps
+
+  switch (block.variant) {
+    case 'comparison':
+      return <PricingComparison props={props} />
+    default:
+      return <PricingSimple props={props} />
+  }
+}

package/src/blocks/registry.tsx

@@ -0,0 +1,90 @@
+import type { BlockConfig } from './types'
+import { Component, type ReactNode } from 'react'
+
+import { NavbarBlock } from './navbar/NavbarBlock'
+import { HeroBlock } from './hero/HeroBlock'
+import { FeaturesBlock } from './features/FeaturesBlock'
+import { PricingBlock } from './pricing/PricingBlock'
+import { CtaBlock } from './cta/CtaBlock'
+import { FooterBlock } from './footer/FooterBlock'
+import { TestimonialsBlock } from './testimonials/TestimonialsBlock'
+import { StatsBlock } from './stats/StatsBlock'
+import { FaqBlock } from './faq/FaqBlock'
+import { TeamBlock } from './team/TeamBlock'
+import { ContactBlock } from './contact/ContactBlock'
+import { NewsletterBlock } from './newsletter/NewsletterBlock'
+import { LogoCloudBlock } from './logocloud/LogoCloudBlock'
+import { DividerBlock } from './divider/DividerBlock'
+import { BannerBlock } from './banner/BannerBlock'
+import { ContentBlock } from './content/ContentBlock'
+import { ImageBlock } from './image/ImageBlock'
+import { VideoBlock } from './video/VideoBlock'
+import { GalleryBlock } from './gallery/GalleryBlock'
+
+// Error boundary for individual blocks
+class BlockErrorBoundary extends Component<
+  { blockType: string; children: ReactNode },
+  { hasError: boolean; error?: Error }
+> {
+  state = { hasError: false, error: undefined as Error | undefined }
+
+  static getDerivedStateFromError(error: Error) {
+    return { hasError: true, error }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="px-6 py-8 text-center border border-status-red/20 bg-status-red/5 rounded-lg mx-4 my-2">
+          <p className="text-status-red text-sm font-medium mb-1">
+            Failed to render {this.props.blockType} block
+          </p>
+          <p className="text-text-3 text-xs">
+            {this.state.error?.message || 'An unexpected error occurred'}
+          </p>
+        </div>
+      )
+    }
+    return this.props.children
+  }
+}
+
+// Fallback for unregistered block types
+function PlaceholderBlock({ block }: { block: BlockConfig }) {
+  return (
+    <div className="px-9 py-7 text-center text-text-3 text-sm">
+      {block.type} block (coming soon)
+    </div>
+  )
+}
+
+const blockRenderers: Record<string, React.ComponentType<{ block: BlockConfig }>> = {
+  navbar: NavbarBlock,
+  hero: HeroBlock,
+  features: FeaturesBlock,
+  pricing: PricingBlock,
+  cta: CtaBlock,
+  footer: FooterBlock,
+  testimonials: TestimonialsBlock,
+  stats: StatsBlock,
+  faq: FaqBlock,
+  team: TeamBlock,
+  contact: ContactBlock,
+  newsletter: NewsletterBlock,
+  logocloud: LogoCloudBlock,
+  divider: DividerBlock,
+  banner: BannerBlock,
+  content: ContentBlock,
+  image: ImageBlock,
+  video: VideoBlock,
+  gallery: GalleryBlock,
+}
+
+export function RenderBlock({ block }: { block: BlockConfig }): ReactNode {
+  const Renderer = blockRenderers[block.type] || PlaceholderBlock
+  return (
+    <BlockErrorBoundary blockType={block.type}>
+      <Renderer block={block} />
+    </BlockErrorBoundary>
+  )
+}

package/src/blocks/stats/StatsBlock.tsx

@@ -0,0 +1,96 @@
+import type { BlockConfig } from '../types'
+
+interface StatItem {
+  value: string
+  label: string
+}
+
+interface StatsProps {
+  title?: string
+  items?: StatItem[]
+}
+
+const defaultStats: StatItem[] = [
+  { value: '10K+', label: 'Sites built' },
+  { value: '99.9%', label: 'Uptime' },
+  { value: '50ms', label: 'Avg. response' },
+  { value: '4.9/5', label: 'User rating' },
+]
+
+function StatsGrid({ props }: { props: StatsProps }) {
+  const items = props.items || defaultStats
+
+  return (
+    <section className="px-6 @md:px-10 py-12 @md:py-16">
+      {props.title && (
+        <h2 className="reveal-fade-up reveal-d1 text-xl font-bold tracking-tight text-center mb-8">{props.title}</h2>
+      )}
+      <div className="grid grid-cols-2 @2xl:grid-cols-4 gap-4">
+        {items.map((item, i) => (
+          <div key={i} className={`reveal-fade-up reveal-d${Math.min(i + 2, 8)} text-center p-4 rounded-xl bg-bg-2 border border-border-default`}>
+            <div className="text-3xl @md:text-4xl font-bold tracking-tight text-green mb-1">
+              {item.value}
+            </div>
+            <div className="text-[12px] text-text-2 font-medium">{item.label}</div>
+          </div>
+        ))}
+      </div>
+    </section>
+  )
+}
+
+function StatsBar({ props }: { props: StatsProps }) {
+  const items = props.items || defaultStats
+
+  return (
+    <section className="px-6 @md:px-10 py-10">
+      <div className="reveal-scale reveal-d1 flex flex-wrap items-center justify-center gap-8 @md:gap-12 py-6 px-4 rounded-xl bg-bg-2 border border-border-default">
+        {items.map((item, i) => (
+          <div key={i} className="text-center">
+            <div className="text-2xl @md:text-3xl font-bold tracking-tight text-text-0 mb-0.5">
+              {item.value}
+            </div>
+            <div className="text-[11px] text-text-3 font-medium uppercase tracking-wider">
+              {item.label}
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  )
+}
+
+function StatsCounter({ props }: { props: StatsProps }) {
+  const items = props.items || defaultStats
+
+  return (
+    <section className="px-6 @md:px-10 py-12 @md:py-16">
+      {props.title && (
+        <h2 className="reveal-fade-up reveal-d1 text-xl font-bold tracking-tight text-center mb-8">{props.title}</h2>
+      )}
+      <div className="grid grid-cols-2 @2xl:grid-cols-4 gap-4">
+        {items.map((item, i) => (
+          <div key={i} className={`reveal-fade-up reveal-d${Math.min(i + 2, 8)} text-center p-5 rounded-xl bg-green/8 border border-green/15`}>
+            <div className="text-3xl @md:text-4xl font-bold tracking-tight text-text-0 mb-1">
+              {item.value}
+            </div>
+            <div className="text-[12px] text-green font-medium">{item.label}</div>
+          </div>
+        ))}
+      </div>
+    </section>
+  )
+}
+
+export function StatsBlock({ block }: { block: BlockConfig }) {
+  const props = block.props as unknown as StatsProps
+
+  switch (block.variant) {
+    case 'bar':
+      return <StatsBar props={props} />
+    case 'counter':
+      return <StatsCounter props={props} />
+    default:
+      return <StatsGrid props={props} />
+  }
+}

package/src/blocks/team/TeamBlock.tsx

@@ -0,0 +1,50 @@
+import type { BlockConfig } from '../types'
+
+interface TeamMember {
+  name: string
+  role: string
+  avatar?: string
+}
+
+interface TeamProps {
+  title?: string
+  subtitle?: string
+  members?: TeamMember[]
+}
+
+const defaultMembers: TeamMember[] = [
+  { name: 'Alex Rivera', role: 'CEO & Founder' },
+  { name: 'Jordan Lee', role: 'CTO' },
+  { name: 'Sam Patel', role: 'Head of Design' },
+  { name: 'Casey Morgan', role: 'Lead Engineer' },
+]
+
+export function TeamBlock({ block }: { block: BlockConfig }) {
+  const props = block.props as unknown as TeamProps
+  const members = props.members || defaultMembers
+
+  return (
+    <section className="px-6 @md:px-10 py-16 @md:py-20">
+      <div className="reveal-fade-up reveal-d1 text-center mb-10">
+        <h2 className="text-2xl @md:text-3xl font-bold tracking-tight mb-2">
+          {props.title || 'Meet the Team'}
+        </h2>
+        {props.subtitle && (
+          <p className="text-text-2 text-sm max-w-lg mx-auto">{props.subtitle}</p>
+        )}
+      </div>
+
+      <div className="grid grid-cols-2 @2xl:grid-cols-4 gap-4 max-w-3xl mx-auto">
+        {members.map((member, i) => (
+          <div key={i} className={`reveal-fade-up reveal-d${Math.min(i + 2, 8)} text-center group`}>
+            <div className="w-20 h-20 mx-auto rounded-full bg-bg-3 border-2 border-border-default flex items-center justify-center text-xl font-bold text-text-3 mb-3 transition-all group-hover:border-green/30 group-hover:accent-glow-sm">
+              {member.name.split(' ').map(n => n[0]).join('')}
+            </div>
+            <h3 className="text-sm font-semibold">{member.name}</h3>
+            <p className="text-[11px] text-text-3 mt-0.5">{member.role}</p>
+          </div>
+        ))}
+      </div>
+    </section>
+  )
+}