@nextsparkjs/theme-default 0.1.0-beta.1

package/blocks/hero-with-form/fields.ts

@@ -0,0 +1,207 @@
+import type { FieldDefinition } from '@nextsparkjs/core/types/blocks'
+import {
+  baseDesignFields,
+  baseAdvancedFields,
+} from '@nextsparkjs/core/types/blocks'
+
+/**
+ * Hero With Form Block Field Definitions
+ *
+ * Organized into 3 tabs:
+ * - Content: title, subtitle, backgroundImage, form fields
+ * - Design: backgroundColor (from base) + overlayOpacity
+ * - Advanced: className, id (from base)
+ */
+
+// Hero with form content fields
+const heroWithFormContentFields: FieldDefinition[] = [
+  {
+    name: 'title',
+    label: 'Main Headline',
+    type: 'text',
+    tab: 'content',
+    required: true,
+    helpText: 'Main hero headline (appears on left side)',
+  },
+  {
+    name: 'subtitle',
+    label: 'Subtitle',
+    type: 'textarea',
+    tab: 'content',
+    required: false,
+    helpText: 'Supporting text below the headline',
+  },
+  {
+    name: 'backgroundImage',
+    label: 'Background Image',
+    type: 'image',
+    tab: 'content',
+    required: true,
+    helpText: 'Full-width background image (recommended: 1920x1080px minimum)',
+  },
+  {
+    name: 'formTitle',
+    label: 'Form Title',
+    type: 'text',
+    tab: 'content',
+    required: false,
+    default: 'Get Started',
+    helpText: 'Title displayed at the top of the form card',
+  },
+  {
+    name: 'formSubtitle',
+    label: 'Form Subtitle',
+    type: 'text',
+    tab: 'content',
+    required: false,
+    helpText: 'Optional subtitle below form title',
+  },
+  {
+    name: 'firstNamePlaceholder',
+    label: 'First Name Placeholder',
+    type: 'text',
+    tab: 'content',
+    required: false,
+    default: 'First Name',
+  },
+  {
+    name: 'lastNamePlaceholder',
+    label: 'Last Name Placeholder',
+    type: 'text',
+    tab: 'content',
+    required: false,
+    default: 'Last Name',
+  },
+  {
+    name: 'emailPlaceholder',
+    label: 'Email Placeholder',
+    type: 'text',
+    tab: 'content',
+    required: false,
+    default: 'Email',
+  },
+  {
+    name: 'phonePlaceholder',
+    label: 'Phone Placeholder',
+    type: 'text',
+    tab: 'content',
+    required: false,
+    default: 'Phone',
+  },
+  {
+    name: 'areaOfInterestPlaceholder',
+    label: 'Area of Interest Placeholder',
+    type: 'text',
+    tab: 'content',
+    required: false,
+    default: 'Area of Interest',
+  },
+  {
+    name: 'areaOfInterestOptions',
+    label: 'Area of Interest Options',
+    type: 'textarea',
+    tab: 'content',
+    required: false,
+    helpText: 'Enter one option per line for the dropdown',
+  },
+  {
+    name: 'consentCheckboxLabel',
+    label: 'Consent Checkbox Label',
+    type: 'text',
+    tab: 'content',
+    required: false,
+    helpText: 'Label for the consent checkbox',
+  },
+  {
+    name: 'submitButtonText',
+    label: 'Submit Button Text',
+    type: 'text',
+    tab: 'content',
+    required: false,
+    default: 'Submit',
+  },
+  {
+    name: 'legalDisclaimer',
+    label: 'Legal Disclaimer',
+    type: 'textarea',
+    tab: 'content',
+    required: false,
+    helpText: 'Legal text displayed below the form',
+  },
+  {
+    name: 'termsLinkText',
+    label: 'Terms Link Text',
+    type: 'text',
+    tab: 'content',
+    required: false,
+    default: 'Terms of Service',
+  },
+  {
+    name: 'termsLinkUrl',
+    label: 'Terms Link URL',
+    type: 'url',
+    tab: 'content',
+    required: false,
+  },
+  {
+    name: 'privacyLinkText',
+    label: 'Privacy Link Text',
+    type: 'text',
+    tab: 'content',
+    required: false,
+    default: 'Privacy Policy',
+  },
+  {
+    name: 'privacyLinkUrl',
+    label: 'Privacy Link URL',
+    type: 'url',
+    tab: 'content',
+    required: false,
+  },
+  {
+    name: 'formAction',
+    label: 'Form Action URL',
+    type: 'url',
+    tab: 'content',
+    required: true,
+    helpText: 'URL where the form will be submitted',
+  },
+]
+
+// Hero with form design fields
+const heroWithFormDesignFields: FieldDefinition[] = [
+  {
+    name: 'overlayOpacity',
+    label: 'Overlay Opacity',
+    type: 'select',
+    tab: 'design',
+    required: false,
+    default: '40',
+    helpText: 'Dark overlay opacity for text readability (0-80)',
+    options: [
+      { label: 'None (0%)', value: '0' },
+      { label: 'Light (20%)', value: '20' },
+      { label: 'Medium (40%)', value: '40' },
+      { label: 'Dark (60%)', value: '60' },
+      { label: 'Very Dark (80%)', value: '80' },
+    ],
+  },
+]
+
+/**
+ * Complete field definitions organized by tab
+ */
+export const fieldDefinitions: FieldDefinition[] = [
+  // Content tab: hero with form fields
+  ...heroWithFormContentFields,
+
+  // Design tab: base fields + hero with form specific
+  ...baseDesignFields,
+  ...heroWithFormDesignFields,
+
+  // Advanced tab: base fields only
+  ...baseAdvancedFields,
+]
+
+// Alias for compatibility
+export const fields = fieldDefinitions

package/blocks/hero-with-form/index.ts

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

package/blocks/hero-with-form/schema.ts

@@ -0,0 +1,54 @@
+import { z } from 'zod'
+import {
+  baseBlockSchema,
+  type BaseBlockProps,
+} from '@nextsparkjs/core/types/blocks'
+
+/**
+ * Hero With Form Block Schema
+ *
+ * Extends base schema with hero-with-form-specific fields:
+ * - backgroundImage: Required hero background
+ * - overlayOpacity: Dark overlay for text readability
+ * - Form fields for lead capture
+ *
+ * Note: Uses base schema backgroundColor, className, id
+ * The base `title` and `content` serve as main headline and subtitle
+ */
+export const heroWithFormSpecificSchema = z.object({
+  // Content fields
+  subtitle: z.string().optional(),
+  backgroundImage: z.string().url('Must be a valid URL'),
+
+  // Form content
+  formTitle: z.string().default('Get Started'),
+  formSubtitle: z.string().optional(),
+  firstNamePlaceholder: z.string().default('First Name'),
+  lastNamePlaceholder: z.string().default('Last Name'),
+  emailPlaceholder: z.string().default('Email'),
+  phonePlaceholder: z.string().default('Phone'),
+  areaOfInterestPlaceholder: z.string().default('Area of Interest'),
+  areaOfInterestOptions: z.string().optional(),
+  consentCheckboxLabel: z.string().optional(),
+  submitButtonText: z.string().default('Submit'),
+  legalDisclaimer: z.string().optional(),
+  termsLinkText: z.string().default('Terms of Service'),
+  termsLinkUrl: z.string().url().optional(),
+  privacyLinkText: z.string().default('Privacy Policy'),
+  privacyLinkUrl: z.string().url().optional(),
+  formAction: z.string().url('Must be a valid URL'),
+
+  // Design fields
+  overlayOpacity: z.enum(['0', '20', '40', '60', '80']).default('40'),
+})
+
+/**
+ * Complete Hero With Form Block Schema
+ * Combines base fields + hero-with-form-specific fields
+ */
+export const schema = baseBlockSchema.merge(heroWithFormSpecificSchema)
+
+export type HeroWithFormBlockProps = z.infer<typeof schema>
+
+// Also export for type-only imports
+export type { BaseBlockProps }

package/blocks/jumbotron/component.tsx

@@ -0,0 +1,136 @@
+import React from 'react'
+import { Button } from '@nextsparkjs/core/components/ui/button'
+import { cn } from '@nextsparkjs/core/lib/utils'
+import { buildSectionClasses } from '@nextsparkjs/core/types/blocks'
+import { sel } from '../../lib/selectors'
+import type { JumbotronBlockProps } from './schema'
+
+/**
+ * Jumbotron Block Component
+ *
+ * Props from 3-tab structure:
+ * - Content: title, subtitle, primaryCta, secondaryCta
+ * - Design: backgroundColor, fullscreen, backgroundImage, textColor, textAlign
+ * - Advanced: className, id
+ */
+export function JumbotronBlock({
+  // Base content props
+  title,
+  // Jumbotron-specific content
+  subtitle,
+  primaryCta,
+  secondaryCta,
+  // Base design props
+  backgroundColor,
+  // Jumbotron-specific design
+  fullscreen = false,
+  backgroundImage,
+  textColor = 'light',
+  textAlign = 'center',
+  // Base advanced props
+  className,
+  id,
+}: JumbotronBlockProps) {
+  // Determine alignment classes
+  const align = textAlign as 'center' | 'left' | 'right'
+  const alignmentClasses = {
+    center: 'text-center items-center justify-center',
+    left: 'text-left items-start justify-start',
+    right: 'text-right items-end justify-end',
+  }[align]
+
+  const contentAlignmentClasses = {
+    center: 'mx-auto',
+    left: 'mr-auto',
+    right: 'ml-auto',
+  }[align]
+
+  const ctaJustifyClasses = {
+    center: 'sm:justify-center',
+    left: 'sm:justify-start',
+    right: 'sm:justify-end',
+  }[align]
+
+  // Build section classes with fullscreen or standard padding
+  const sectionClasses = buildSectionClasses(
+    cn(
+      'relative flex overflow-hidden px-4',
+      fullscreen ? 'min-h-screen' : 'py-16 md:py-24',
+      alignmentClasses,
+      textColor === 'light' ? 'text-white' : 'text-gray-900'
+    ),
+    { backgroundColor, className }
+  )
+
+  return (
+    <section id={id} className={sectionClasses} data-cy={sel('blocks.jumbotron.container')}>
+      {/* Background Image */}
+      {backgroundImage && (
+        <div
+          className="absolute inset-0 z-0"
+          style={{
+            backgroundImage: `url(${backgroundImage})`,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+          }}
+        >
+          <div className="absolute inset-0 bg-black/40" />
+        </div>
+      )}
+
+      {/* Content */}
+      <div className={cn('container relative z-10 max-w-4xl', contentAlignmentClasses)}>
+        {title && (
+          <h1 className="mb-6 text-5xl font-bold leading-tight md:text-6xl lg:text-7xl">
+            {title}
+          </h1>
+        )}
+
+        {subtitle && (
+          <p className="mb-8 text-xl md:text-2xl opacity-90">
+            {subtitle}
+          </p>
+        )}
+
+        {/* CTAs - automatically center based on count */}
+        {(primaryCta || secondaryCta) && (
+          <div className={cn('flex flex-col gap-4 sm:flex-row', ctaJustifyClasses)}>
+            {primaryCta && primaryCta.text && (
+              <Button
+                asChild
+                size="lg"
+                variant={primaryCta.variant || 'default'}
+                className="text-lg px-8 py-6"
+              >
+                <a
+                  href={primaryCta.link || '#'}
+                  target={primaryCta.target || '_self'}
+                  rel={primaryCta.target === '_blank' ? 'noopener noreferrer' : undefined}
+                >
+                  {primaryCta.text}
+                </a>
+              </Button>
+            )}
+
+            {secondaryCta && secondaryCta.text && (
+              <Button
+                asChild
+                size="lg"
+                variant={secondaryCta.variant || 'outline'}
+                className="text-lg px-8 py-6"
+              >
+                <a
+                  href={secondaryCta.link || '#'}
+                  target={secondaryCta.target || '_self'}
+                  rel={secondaryCta.target === '_blank' ? 'noopener noreferrer' : undefined}
+                >
+                  {secondaryCta.text}
+                </a>
+              </Button>
+            )}
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}

package/blocks/jumbotron/config.ts

@@ -0,0 +1,11 @@
+import type { BlockConfig } from '@nextsparkjs/core/types/blocks'
+
+export const config: Omit<BlockConfig, 'schema' | 'fieldDefinitions' | 'Component' | 'examples'> = {
+  slug: 'jumbotron',
+  name: 'Jumbotron',
+  description: 'A large, attention-grabbing hero block with optional fullscreen mode that takes 100% of the viewport height when enabled. Features centered content with support for 1-2 CTAs that automatically center based on count.',
+  category: 'hero',
+  icon: 'Maximize2',
+  thumbnail: '/theme/blocks/jumbotron/thumbnail.png',
+  scope: ['pages', 'posts']
+}

package/blocks/jumbotron/examples.ts

@@ -0,0 +1,36 @@
+import type { BlockExample } from '@nextsparkjs/core/types/blocks'
+
+export const examples: BlockExample[] = [
+  {
+    name: 'Default',
+    description: 'Standard jumbotron with centered content',
+    props: {
+      title: 'Welcome to Our Platform',
+      content: 'Discover powerful tools designed to help your team collaborate more effectively and achieve better results.',
+      cta: {
+        text: 'Learn More',
+        link: '/features',
+        target: '_self',
+      },
+      backgroundColor: 'gray-50',
+      textColor: 'dark',
+      fullscreen: false,
+    },
+  },
+  {
+    name: 'Fullscreen',
+    description: 'Fullscreen jumbotron with vertical centering',
+    props: {
+      title: 'Your Success Starts Here',
+      content: 'Experience the difference with our comprehensive suite of business tools.',
+      cta: {
+        text: 'Get Started',
+        link: '/signup',
+        target: '_self',
+      },
+      backgroundColor: 'primary',
+      textColor: 'light',
+      fullscreen: true,
+    },
+  },
+]

package/blocks/jumbotron/fields.ts

@@ -0,0 +1,202 @@
+import type { FieldDefinition } from '@nextsparkjs/core/types/blocks'
+import {
+  baseContentFields,
+  baseDesignFields,
+  baseAdvancedFields,
+} from '@nextsparkjs/core/types/blocks'
+
+/**
+ * Jumbotron Block Field Definitions
+ *
+ * Organized into 3 tabs:
+ * - Content: title (from base) + subtitle, primaryCta, secondaryCta
+ * - Design: backgroundColor (from base) + fullscreen, backgroundImage, textColor, textAlign
+ * - Advanced: className, id (from base)
+ */
+
+// Filter out base content fields we don't need (content and cta)
+const filteredBaseContentFields = baseContentFields.filter(
+  field => field.name !== 'content' && field.name !== 'cta.text' && field.name !== 'cta.link' && field.name !== 'cta.target'
+)
+
+// Jumbotron-specific content fields
+const jumbotronContentFields: FieldDefinition[] = [
+  {
+    name: 'subtitle',
+    label: 'Subtitle',
+    type: 'textarea',
+    tab: 'content',
+    required: false,
+    placeholder: 'Supporting text or description',
+    helpText: 'Optional subtitle text displayed below the main title',
+  },
+  // Primary CTA
+  {
+    name: 'primaryCta.text',
+    label: 'Button Text',
+    type: 'text',
+    tab: 'content',
+    required: false,
+    placeholder: 'Get Started',
+    helpText: 'Primary button text',
+    group: 'primaryCta',
+    groupLabel: 'Primary CTA',
+  },
+  {
+    name: 'primaryCta.link',
+    label: 'Link',
+    type: 'url',
+    tab: 'content',
+    required: false,
+    placeholder: '/signup or https://...',
+    helpText: 'URL the button links to',
+    group: 'primaryCta',
+  },
+  {
+    name: 'primaryCta.target',
+    label: 'Open in',
+    type: 'select',
+    tab: 'content',
+    required: false,
+    default: '_self',
+    helpText: 'How the link opens',
+    group: 'primaryCta',
+    options: [
+      { label: 'Same window', value: '_self' },
+      { label: 'New tab', value: '_blank' },
+    ],
+  },
+  {
+    name: 'primaryCta.variant',
+    label: 'Button Style',
+    type: 'select',
+    tab: 'content',
+    required: false,
+    default: 'default',
+    helpText: 'Visual style of the primary button',
+    group: 'primaryCta',
+    options: [
+      { label: 'Default', value: 'default' },
+      { label: 'Outline', value: 'outline' },
+      { label: 'Secondary', value: 'secondary' },
+    ],
+  },
+  // Secondary CTA
+  {
+    name: 'secondaryCta.text',
+    label: 'Button Text',
+    type: 'text',
+    tab: 'content',
+    required: false,
+    placeholder: 'Learn More',
+    helpText: 'Secondary button text',
+    group: 'secondaryCta',
+    groupLabel: 'Secondary CTA',
+  },
+  {
+    name: 'secondaryCta.link',
+    label: 'Link',
+    type: 'url',
+    tab: 'content',
+    required: false,
+    placeholder: '/about or https://...',
+    helpText: 'URL the button links to',
+    group: 'secondaryCta',
+  },
+  {
+    name: 'secondaryCta.target',
+    label: 'Open in',
+    type: 'select',
+    tab: 'content',
+    required: false,
+    default: '_self',
+    helpText: 'How the link opens',
+    group: 'secondaryCta',
+    options: [
+      { label: 'Same window', value: '_self' },
+      { label: 'New tab', value: '_blank' },
+    ],
+  },
+  {
+    name: 'secondaryCta.variant',
+    label: 'Button Style',
+    type: 'select',
+    tab: 'content',
+    required: false,
+    default: 'outline',
+    helpText: 'Visual style of the secondary button',
+    group: 'secondaryCta',
+    options: [
+      { label: 'Default', value: 'default' },
+      { label: 'Outline', value: 'outline' },
+      { label: 'Secondary', value: 'secondary' },
+    ],
+  },
+]
+
+// Jumbotron-specific design fields
+const jumbotronDesignFields: FieldDefinition[] = [
+  {
+    name: 'fullscreen',
+    label: 'Fullscreen Mode',
+    type: 'checkbox',
+    tab: 'design',
+    required: false,
+    default: false,
+    helpText: 'When enabled, block takes 100% of viewport height. When disabled, uses standard section padding.',
+  },
+  {
+    name: 'backgroundImage',
+    label: 'Background Image',
+    type: 'image',
+    tab: 'design',
+    required: false,
+    helpText: 'Optional background image (recommended: 1920x1080px minimum)',
+  },
+  {
+    name: 'textColor',
+    label: 'Text Color',
+    type: 'select',
+    tab: 'design',
+    required: false,
+    default: 'light',
+    helpText: 'Choose text color based on background',
+    options: [
+      { label: 'Light (for dark backgrounds)', value: 'light' },
+      { label: 'Dark (for light backgrounds)', value: 'dark' },
+    ],
+  },
+  {
+    name: 'textAlign',
+    label: 'Text Alignment',
+    type: 'select',
+    tab: 'design',
+    required: false,
+    default: 'center',
+    helpText: 'Horizontal alignment of content',
+    options: [
+      { label: 'Center', value: 'center' },
+      { label: 'Left', value: 'left' },
+      { label: 'Right', value: 'right' },
+    ],
+  },
+]
+
+/**
+ * Complete field definitions organized by tab
+ */
+export const fieldDefinitions: FieldDefinition[] = [
+  // Content tab: filtered base fields + jumbotron-specific
+  ...filteredBaseContentFields,
+  ...jumbotronContentFields,
+
+  // Design tab: base fields + jumbotron-specific
+  ...baseDesignFields,
+  ...jumbotronDesignFields,
+
+  // Advanced tab: base fields only
+  ...baseAdvancedFields,
+]
+
+// Alias for compatibility
+export const fields = fieldDefinitions

package/blocks/jumbotron/index.ts

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