@nextsparkjs/theme-default 0.1.0-beta.1

package/blocks/jumbotron/schema.ts

@@ -0,0 +1,55 @@
+import { z } from 'zod'
+import { baseBlockSchema, ctaSchema } from '@nextsparkjs/core/types/blocks'
+
+/**
+ * Primary CTA Schema for Jumbotron
+ * Extends standard CTA with variant options
+ */
+const primaryCtaSchema = ctaSchema.extend({
+  variant: z.enum(['default', 'outline', 'secondary']).default('default'),
+})
+
+/**
+ * Secondary CTA Schema for Jumbotron
+ * Uses same structure as primary CTA
+ */
+const secondaryCtaSchema = ctaSchema.extend({
+  variant: z.enum(['default', 'outline', 'secondary']).default('outline'),
+})
+
+export type PrimaryCta = z.infer<typeof primaryCtaSchema>
+export type SecondaryCta = z.infer<typeof secondaryCtaSchema>
+
+/**
+ * Jumbotron Block Schema
+ *
+ * Extends base schema with:
+ * - subtitle: Supporting text/description (separate from content)
+ * - primaryCta: Primary CTA button with variant
+ * - secondaryCta: Optional secondary CTA button with variant
+ * - fullscreen: Toggle for 100vh height
+ * - backgroundImage: Optional background image
+ * - textColor: Light/dark for contrast
+ * - textAlign: Content alignment (center, left, right)
+ *
+ * Note: Uses base schema title, backgroundColor, className, id
+ */
+export const jumbotronSpecificSchema = z.object({
+  // Content fields
+  subtitle: z.string().optional(),
+  primaryCta: primaryCtaSchema.optional(),
+  secondaryCta: secondaryCtaSchema.optional(),
+
+  // Design fields
+  fullscreen: z.boolean().default(false),
+  backgroundImage: z.string().url('Must be a valid URL').optional(),
+  textColor: z.enum(['light', 'dark']).default('light'),
+  textAlign: z.enum(['center', 'left', 'right']).default('center'),
+})
+
+/**
+ * Complete Jumbotron Block Schema
+ */
+export const schema = baseBlockSchema.merge(jumbotronSpecificSchema)
+
+export type JumbotronBlockProps = z.infer<typeof schema>

package/blocks/logo-cloud/component.tsx

@@ -0,0 +1,154 @@
+import React from 'react'
+import Image from 'next/image'
+import { cn } from '@nextsparkjs/core/lib/utils'
+import { buildSectionClasses } from '@nextsparkjs/core/types/blocks'
+import { sel } from '../../lib/selectors'
+import type { LogoCloudBlockProps, LogoItem } from './schema'
+
+/**
+ * Logo Cloud Block Component
+ *
+ * Props from 3-tab structure:
+ * - Content: title, content, cta, logos
+ * - Design: backgroundColor, layout, columns, grayscale, size
+ * - Advanced: className, id
+ */
+export function LogoCloudBlock({
+  // Base content props
+  title,
+  content,
+  cta,
+  // Logo Cloud-specific content
+  logos,
+  // Base design props
+  backgroundColor,
+  // Logo Cloud-specific design
+  layout = 'grid',
+  columns = '5',
+  grayscale = true,
+  size = 'md',
+  // Base advanced props
+  className,
+  id,
+}: LogoCloudBlockProps) {
+  // Ensure logos is an array
+  const safeLogos = Array.isArray(logos) ? logos : []
+
+  // Build layout classes based on layout prop
+  const layoutClasses: Record<string, string> = {
+    grid: 'grid',
+    row: 'flex flex-wrap',
+    'row-scroll': 'flex overflow-x-auto',
+  }
+
+  // Build column classes for grid layout
+  const columnClasses: Record<string, string> = {
+    '3': 'grid-cols-2 sm:grid-cols-3',
+    '4': 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-4',
+    '5': 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-5',
+    '6': 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-6',
+  }
+
+  // Build size classes for logo containers
+  const sizeClasses: Record<string, string> = {
+    sm: 'h-12 w-24',
+    md: 'h-16 w-32',
+    lg: 'h-20 w-40',
+  }
+
+  // Container classes based on layout
+  const containerClasses = cn(
+    layoutClasses[layout],
+    layout === 'grid' && cn('gap-8', columnClasses[columns]),
+    layout === 'row' && 'gap-6 justify-center items-center',
+    layout === 'row-scroll' && 'gap-6 overflow-x-auto pb-4',
+  )
+
+  // Build section classes with background and custom className
+  const sectionClasses = buildSectionClasses(
+    'py-12 px-4 md:py-16',
+    { backgroundColor, className }
+  )
+
+  return (
+    <section id={id} className={sectionClasses} data-cy={sel('blocks.logoCloud.container')}>
+      <div className="container mx-auto max-w-6xl">
+        {/* Section Header */}
+        {(title || content) && (
+          <div className="mb-10 text-center">
+            {title && (
+              <h2 className="mb-3 text-2xl font-semibold md:text-3xl">
+                {title}
+              </h2>
+            )}
+            {content && (
+              <p className="mx-auto max-w-2xl text-muted-foreground">
+                {content}
+              </p>
+            )}
+          </div>
+        )}
+
+        {/* Logos Container */}
+        <div className={containerClasses}>
+          {safeLogos.map((logo: LogoItem, index: number) => {
+            const LogoImage = (
+              <div
+                className={cn(
+                  'relative flex items-center justify-center transition-all duration-300',
+                  sizeClasses[size],
+                  grayscale && 'grayscale hover:grayscale-0 opacity-70 hover:opacity-100'
+                )}
+              >
+                <Image
+                  src={logo.image}
+                  alt={logo.alt}
+                  fill
+                  className="object-contain"
+                  sizes="(max-width: 768px) 50vw, (max-width: 1200px) 33vw, 20vw"
+                />
+              </div>
+            )
+
+            return (
+              <div
+                key={index}
+                className="flex items-center justify-center"
+              >
+                {logo.url ? (
+                  <a
+                    href={logo.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="block"
+                    data-cy={sel('blocks.logoCloud.link', { index: String(index) })}
+                  >
+                    {LogoImage}
+                  </a>
+                ) : (
+                  <div data-cy={sel('blocks.logoCloud.item', { index: String(index) })}>
+                    {LogoImage}
+                  </div>
+                )}
+              </div>
+            )
+          })}
+        </div>
+
+        {/* Optional CTA */}
+        {cta && (
+          <div className="mt-10 text-center">
+            <a
+              href={cta.link}
+              target={cta.target}
+              rel={cta.target === '_blank' ? 'noopener noreferrer' : undefined}
+              className="inline-flex items-center justify-center rounded-md bg-primary px-6 py-2.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
+            >
+              {cta.text}
+            </a>
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}

package/blocks/logo-cloud/config.ts

@@ -0,0 +1,11 @@
+import type { BlockConfig } from '@nextsparkjs/core/types/blocks'
+
+export const config: Omit<BlockConfig, 'schema' | 'fieldDefinitions' | 'Component' | 'examples'> = {
+  slug: 'logo-cloud',
+  name: 'Logo Cloud',
+  description: 'A section displaying client/partner logos in a grid or row layout ("Trusted by...", "As seen in...")',
+  category: 'content',
+  icon: 'Building2',
+  thumbnail: '/theme/blocks/logo-cloud/thumbnail.png',
+  scope: ['pages']
+}

package/blocks/logo-cloud/examples.ts

@@ -0,0 +1,34 @@
+import type { BlockExample } from '@nextsparkjs/core/types/blocks'
+
+export const examples: BlockExample[] = [
+  {
+    name: 'Default',
+    description: 'Logo cloud showing trusted brands',
+    props: {
+      title: 'Trusted by Leading Companies',
+      backgroundColor: 'gray-50',
+      logos: [
+        {
+          name: 'Vercel',
+          imageUrl: 'https://assets.vercel.com/image/upload/front/favicon/vercel/180x180.png',
+          url: 'https://vercel.com',
+        },
+        {
+          name: 'Next.js',
+          imageUrl: 'https://assets.vercel.com/image/upload/v1662130559/nextjs/Icon_dark_background.png',
+          url: 'https://nextjs.org',
+        },
+        {
+          name: 'Supabase',
+          imageUrl: 'https://supabase.com/brand-assets/supabase-logo-icon.png',
+          url: 'https://supabase.com',
+        },
+        {
+          name: 'Stripe',
+          imageUrl: 'https://images.ctfassets.net/fzn2n1nzq965/HTTOloNPhisV9P4hlMPNA/cacf1bb88b9fc492dfad34378d844280/Stripe_icon_-_square.svg',
+          url: 'https://stripe.com',
+        },
+      ],
+    },
+  },
+]

package/blocks/logo-cloud/fields.ts

@@ -0,0 +1,133 @@
+import type { FieldDefinition } from '@nextsparkjs/core/types/blocks'
+import {
+  baseContentFields,
+  baseDesignFields,
+  baseAdvancedFields,
+} from '@nextsparkjs/core/types/blocks'
+
+/**
+ * Logo Cloud Block Field Definitions
+ *
+ * Organized into 3 tabs:
+ * - Content: title, content, cta (from base) + logos array
+ * - Design: backgroundColor (from base) + layout, columns, grayscale, size
+ * - Advanced: className, id (from base)
+ */
+
+// Logo Cloud-specific content fields
+const logoCloudContentFields: FieldDefinition[] = [
+  {
+    name: 'logos',
+    label: 'Logos',
+    type: 'array',
+    tab: 'content',
+    required: true,
+    description: 'List of client/partner logos to display',
+    helpText: 'Add up to 20 logos with image, alt text, and optional link',
+    minItems: 1,
+    maxItems: 20,
+    itemFields: [
+      {
+        name: 'image',
+        label: 'Logo Image',
+        type: 'image',
+        tab: 'content',
+        required: true,
+        helpText: 'Logo image URL (recommended: transparent PNG, 200x100px)',
+      },
+      {
+        name: 'alt',
+        label: 'Alt Text',
+        type: 'text',
+        tab: 'content',
+        required: true,
+        placeholder: 'Company Name',
+        helpText: 'Descriptive alt text for accessibility',
+      },
+      {
+        name: 'url',
+        label: 'Link URL (Optional)',
+        type: 'url',
+        tab: 'content',
+        required: false,
+        placeholder: 'https://example.com',
+        helpText: 'Optional link when logo is clicked',
+      },
+    ],
+  },
+]
+
+// Logo Cloud-specific design fields
+const logoCloudDesignFields: FieldDefinition[] = [
+  {
+    name: 'layout',
+    label: 'Layout',
+    type: 'select',
+    tab: 'design',
+    required: false,
+    default: 'grid',
+    description: 'Layout style for logos',
+    options: [
+      { label: 'Grid', value: 'grid' },
+      { label: 'Row (Wrap)', value: 'row' },
+      { label: 'Row (Scroll)', value: 'row-scroll' },
+    ],
+  },
+  {
+    name: 'columns',
+    label: 'Grid Columns',
+    type: 'select',
+    tab: 'design',
+    required: false,
+    default: '5',
+    description: 'Number of columns in grid layout (desktop)',
+    options: [
+      { label: '3 Columns', value: '3' },
+      { label: '4 Columns', value: '4' },
+      { label: '5 Columns', value: '5' },
+      { label: '6 Columns', value: '6' },
+    ],
+  },
+  {
+    name: 'grayscale',
+    label: 'Grayscale Effect',
+    type: 'checkbox',
+    tab: 'design',
+    required: false,
+    default: true,
+    description: 'Show logos in grayscale (color on hover)',
+  },
+  {
+    name: 'size',
+    label: 'Logo Size',
+    type: 'select',
+    tab: 'design',
+    required: false,
+    default: 'md',
+    description: 'Size of logos',
+    options: [
+      { label: 'Small', value: 'sm' },
+      { label: 'Medium', value: 'md' },
+      { label: 'Large', value: 'lg' },
+    ],
+  },
+]
+
+/**
+ * Complete field definitions organized by tab
+ */
+export const fieldDefinitions: FieldDefinition[] = [
+  // Content tab: base fields + logo-cloud-specific
+  ...baseContentFields,
+  ...logoCloudContentFields,
+
+  // Design tab: base fields + logo-cloud-specific
+  ...baseDesignFields,
+  ...logoCloudDesignFields,
+
+  // Advanced tab: base fields only
+  ...baseAdvancedFields,
+]
+
+// Alias for compatibility
+export const fields = fieldDefinitions

package/blocks/logo-cloud/index.ts

@@ -0,0 +1,6 @@
+export { config } from './config'
+export { schema } from './schema'
+export { fields } from './fields'
+export { LogoCloudBlock as Component } from './component'
+
+export type { LogoCloudBlockProps } from './schema'

package/blocks/logo-cloud/schema.ts

@@ -0,0 +1,46 @@
+import { z } from 'zod'
+import { baseBlockSchema } from '@nextsparkjs/core/types/blocks'
+
+/**
+ * Logo Item Schema
+ * Individual logo in the cloud
+ */
+const logoItemSchema = z.object({
+  image: z.string().url('Must be a valid URL'),
+  alt: z.string().min(1, 'Alt text is required for accessibility'),
+  url: z.string().url('Must be a valid URL').optional(),
+})
+
+export type LogoItem = z.infer<typeof logoItemSchema>
+
+/**
+ * Logo Cloud Block Schema
+ *
+ * Extends base schema with:
+ * - logos: Array of logo items (image, alt, optional url)
+ * - layout: Layout style (grid, row, row-scroll)
+ * - columns: Grid columns (3, 4, 5, 6)
+ * - grayscale: Show logos in grayscale with hover effect
+ * - size: Logo size (sm, md, lg)
+ *
+ * Note: Uses base schema title, content, cta, backgroundColor, className, id
+ */
+export const logoCloudSpecificSchema = z.object({
+  // Content: array of logo items
+  logos: z.array(logoItemSchema)
+    .min(1, 'At least one logo is required')
+    .max(20, 'Maximum 20 logos allowed'),
+
+  // Design: layout and styling
+  layout: z.enum(['grid', 'row', 'row-scroll']).default('grid'),
+  columns: z.enum(['3', '4', '5', '6']).default('5'),
+  grayscale: z.boolean().default(true),
+  size: z.enum(['sm', 'md', 'lg']).default('md'),
+})
+
+/**
+ * Complete Logo Cloud Block Schema
+ */
+export const schema = baseBlockSchema.merge(logoCloudSpecificSchema)
+
+export type LogoCloudBlockProps = z.infer<typeof schema>

package/blocks/post-content/component.tsx

@@ -0,0 +1,197 @@
+import React from 'react'
+import { cn } from '@nextsparkjs/core/lib/utils'
+import { buildSectionClasses } from '@nextsparkjs/core/types/blocks'
+import { sel } from '../../lib/selectors'
+import type { PostContentBlockProps } from './schema'
+
+/**
+ * Post Content Block Component
+ *
+ * Beautiful editorial typography optimized for long-form reading.
+ * Inspired by Medium, The New York Times, and other premium publishers.
+ *
+ * Props from 3-tab structure:
+ * - Content: title, content (rich-text article body), cta
+ * - Design: backgroundColor, drop cap, typography, dividers
+ * - Advanced: className, id
+ *
+ * Features:
+ * - Optimal reading width (680-900px)
+ * - Beautiful line height (1.7-1.8) for readability
+ * - Optional decorative drop cap
+ * - Configurable typography scale
+ * - Section dividers for visual breaks
+ */
+export function PostContentBlock({
+  // Base content props
+  title,
+  content,
+  cta,
+  // Base design props
+  backgroundColor,
+  // Post-content-specific design
+  showDropCap = false,
+  dropCapStyle = 'serif',
+  maxWidth = 'narrow',
+  fontSize = 'medium',
+  lineHeight = 'relaxed',
+  paragraphSpacing = 'normal',
+  showDividers = false,
+  dividerStyle = 'line',
+  // Base advanced props
+  className,
+  id,
+}: PostContentBlockProps) {
+  // Max width classes for optimal reading
+  const maxWidthClasses: Record<string, string> = {
+    narrow: 'max-w-[680px]', // Optimal for reading
+    medium: 'max-w-[768px]',
+    wide: 'max-w-[900px]',
+  }
+
+  // Font size classes
+  const fontSizeClasses: Record<string, string> = {
+    small: 'text-base', // 16px
+    medium: 'text-lg', // 18px
+    large: 'text-xl', // 20px
+  }
+
+  // Line height classes
+  const lineHeightClasses: Record<string, string> = {
+    compact: 'leading-relaxed', // 1.6
+    normal: 'leading-loose', // 1.7
+    relaxed: 'leading-[1.8]', // 1.8
+  }
+
+  // Paragraph spacing classes
+  const paragraphSpacingClasses: Record<string, string> = {
+    tight: '[&_p]:mb-4',
+    normal: '[&_p]:mb-6',
+    loose: '[&_p]:mb-8',
+  }
+
+  // Drop cap style classes
+  const dropCapClasses: Record<string, string> = {
+    serif: 'font-serif',
+    'sans-serif': 'font-sans',
+    decorative: 'font-serif italic',
+  }
+
+  // Build section classes with background
+  const sectionClasses = buildSectionClasses(
+    'py-16 px-4 md:py-24',
+    { backgroundColor, className }
+  )
+
+  // Drop cap CSS (applied via first-letter pseudo-element)
+  const contentWithDropCap = showDropCap
+    ? `[&>p:first-of-type]:first-letter:float-left [&>p:first-of-type]:first-letter:text-7xl [&>p:first-of-type]:first-letter:font-bold [&>p:first-of-type]:first-letter:mr-3 [&>p:first-of-type]:first-letter:mt-1 [&>p:first-of-type]:first-letter:leading-none [&>p:first-of-type]:first-letter:${dropCapClasses[dropCapStyle]}`
+    : ''
+
+  // Divider component
+  const Divider = () => {
+    if (!showDividers) return null
+
+    const dividerContent: Record<string, React.ReactNode> = {
+      line: <hr className="border-t border-gray-300 dark:border-gray-700" />,
+      dots: (
+        <div className="text-center text-gray-400 dark:text-gray-600 text-2xl tracking-[0.5em]">
+          •••
+        </div>
+      ),
+      asterisks: (
+        <div className="text-center text-gray-400 dark:text-gray-600 text-xl tracking-widest">
+          * * *
+        </div>
+      ),
+    }
+
+    return (
+      <div className="my-12" data-cy={sel('blocks.postContent.divider')}>
+        {dividerContent[dividerStyle]}
+      </div>
+    )
+  }
+
+  return (
+    <section id={id} className={sectionClasses} data-cy={sel('blocks.postContent.container')}>
+      <div className="container mx-auto">
+        {/* Optional Section Title */}
+        {title && (
+          <div className={cn('mb-12 text-center', maxWidthClasses[maxWidth], 'mx-auto')}>
+            <h2 className="text-4xl font-bold md:text-5xl lg:text-6xl tracking-tight">
+              {title}
+            </h2>
+          </div>
+        )}
+
+        {/* Rich Text Article Content - Editorial Typography */}
+        <article
+          className={cn(
+            // Base typography
+            'prose prose-lg dark:prose-invert',
+            // Max width for optimal reading
+            maxWidthClasses[maxWidth],
+            'mx-auto',
+            // Font size
+            fontSizeClasses[fontSize],
+            // Line height
+            lineHeightClasses[lineHeight],
+            // Paragraph spacing
+            paragraphSpacingClasses[paragraphSpacing],
+            // Drop cap
+            contentWithDropCap,
+            // Enhanced prose styling for editorial content
+            'prose-headings:font-bold prose-headings:tracking-tight',
+            'prose-h2:text-3xl prose-h2:mt-12 prose-h2:mb-6',
+            'prose-h3:text-2xl prose-h3:mt-10 prose-h3:mb-4',
+            'prose-h4:text-xl prose-h4:mt-8 prose-h4:mb-3',
+            // Links
+            'prose-a:text-primary prose-a:no-underline prose-a:font-medium hover:prose-a:underline',
+            // Blockquotes (pull quotes)
+            'prose-blockquote:border-l-4 prose-blockquote:border-primary',
+            'prose-blockquote:pl-6 prose-blockquote:italic',
+            'prose-blockquote:text-xl prose-blockquote:leading-relaxed',
+            'prose-blockquote:my-8',
+            // Lists
+            'prose-ul:my-6 prose-ol:my-6',
+            'prose-li:my-2',
+            // Images
+            'prose-img:rounded-lg prose-img:shadow-lg',
+            'prose-img:my-8',
+            // Code
+            'prose-code:bg-gray-100 dark:prose-code:bg-gray-800',
+            'prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded',
+            'prose-code:text-sm',
+            // Pre/code blocks
+            'prose-pre:bg-gray-900 prose-pre:text-gray-100',
+            'prose-pre:rounded-lg prose-pre:my-6',
+            // Strong/bold
+            'prose-strong:font-semibold prose-strong:text-gray-900 dark:prose-strong:text-gray-100',
+            // Em/italic
+            'prose-em:italic'
+          )}
+          dangerouslySetInnerHTML={{ __html: content }}
+        />
+
+        {/* Optional Divider after content */}
+        {showDividers && <Divider />}
+
+        {/* Optional CTA */}
+        {cta && (
+          <div className={cn('mt-12 text-center', maxWidthClasses[maxWidth], 'mx-auto')}>
+            <a
+              href={cta.link}
+              target={cta.target}
+              rel={cta.target === '_blank' ? 'noopener noreferrer' : undefined}
+              className="inline-flex items-center justify-center rounded-md bg-primary px-8 py-3 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors shadow-md hover:shadow-lg"
+              data-cy={sel('blocks.postContent.cta')}
+            >
+              {cta.text}
+            </a>
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}

package/blocks/post-content/config.ts

@@ -0,0 +1,11 @@
+import type { BlockConfig } from '@nextsparkjs/core/types/blocks'
+
+export const config: Omit<BlockConfig, 'schema' | 'fieldDefinitions' | 'Component' | 'examples'> = {
+  slug: 'post-content',
+  name: 'Post Content',
+  description: 'A rich text content block designed for long-form blog posts with editorial styling similar to Medium. Features beautiful typography, proper spacing, and optional elements like drop caps, pull quotes, and images.',
+  category: 'content',
+  icon: 'FileText',
+  thumbnail: '/theme/blocks/post-content/thumbnail.png',
+  scope: ['posts']
+}

package/blocks/post-content/examples.ts

@@ -0,0 +1,33 @@
+import type { BlockExample } from '@nextsparkjs/core/types/blocks'
+
+export const examples: BlockExample[] = [
+  {
+    name: 'Default',
+    description: 'Standard blog post content',
+    props: {
+      content: `
+        <h2>Introduction</h2>
+        <p>This is a sample blog post demonstrating the post content block. It supports rich text formatting including headings, paragraphs, lists, and more.</p>
+
+        <h3>Key Features</h3>
+        <ul>
+          <li>Rich text editing with markdown support</li>
+          <li>Automatic table of contents generation</li>
+          <li>Code syntax highlighting</li>
+          <li>Image optimization</li>
+        </ul>
+
+        <h3>Getting Started</h3>
+        <p>To use this block, simply add it to your page and start writing. The editor supports all standard formatting options and will automatically handle styling to match your theme.</p>
+
+        <blockquote>
+          <p>"This platform has transformed how we create and manage content. The simplicity is unmatched." - Happy Customer</p>
+        </blockquote>
+
+        <p>Learn more by exploring our <a href="/docs">documentation</a> or reaching out to our support team.</p>
+      `,
+      backgroundColor: 'white',
+      maxWidth: '4xl',
+    },
+  },
+]