@nextsparkjs/theme-default 0.1.0-beta.1

package/blocks/features-grid/fields.ts

@@ -0,0 +1,97 @@
+import type { FieldDefinition } from '@nextsparkjs/core/types/blocks'
+import {
+  baseContentFields,
+  baseDesignFields,
+  baseAdvancedFields,
+} from '@nextsparkjs/core/types/blocks'
+
+/**
+ * Features Grid Block Field Definitions
+ *
+ * Organized into 3 tabs:
+ * - Content: title, description, cta (from base) + items array
+ * - Design: backgroundColor (from base) + columns
+ * - Advanced: className, id (from base)
+ */
+
+// Features-specific content fields
+const featuresContentFields: FieldDefinition[] = [
+  {
+    name: 'items',
+    label: 'Features',
+    type: 'array',
+    tab: 'content',
+    required: true,
+    description: 'List of features to display in the grid',
+    helpText: 'Add up to 12 features with icon, title, and description',
+    minItems: 1,
+    maxItems: 12,
+    itemFields: [
+      {
+        name: 'icon',
+        label: 'Icon Name',
+        type: 'text',
+        tab: 'content',
+        required: true,
+        placeholder: 'Zap',
+        helpText: 'Lucide icon name (e.g., Zap, Shield, Star, Check)',
+      },
+      {
+        name: 'title',
+        label: 'Feature Title',
+        type: 'text',
+        tab: 'content',
+        required: true,
+        placeholder: 'Lightning Fast',
+        maxLength: 100,
+      },
+      {
+        name: 'description',
+        label: 'Description',
+        type: 'textarea',
+        tab: 'content',
+        required: true,
+        placeholder: 'Describe this feature...',
+        maxLength: 300,
+        rows: 2,
+      },
+    ],
+  },
+]
+
+// Features-specific design fields
+const featuresDesignFields: FieldDefinition[] = [
+  {
+    name: 'columns',
+    label: 'Grid Columns',
+    type: 'select',
+    tab: 'design',
+    required: false,
+    default: '3',
+    description: 'Number of columns in the grid layout',
+    options: [
+      { label: '2 Columns', value: '2' },
+      { label: '3 Columns', value: '3' },
+      { label: '4 Columns', value: '4' },
+    ],
+  },
+]
+
+/**
+ * Complete field definitions organized by tab
+ */
+export const fieldDefinitions: FieldDefinition[] = [
+  // Content tab: base fields + features-specific
+  ...baseContentFields,
+  ...featuresContentFields,
+
+  // Design tab: base fields + features-specific
+  ...baseDesignFields,
+  ...featuresDesignFields,
+
+  // Advanced tab: base fields only
+  ...baseAdvancedFields,
+]
+
+// Alias for compatibility
+export const fields = fieldDefinitions

package/blocks/features-grid/index.ts

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

package/blocks/features-grid/schema.ts

@@ -0,0 +1,40 @@
+import { z } from 'zod'
+import { baseBlockSchema } from '@nextsparkjs/core/types/blocks'
+
+/**
+ * Feature Item Schema
+ * Individual feature in the grid
+ */
+const featureItemSchema = z.object({
+  icon: z.string().min(1, 'Icon name is required'),
+  title: z.string().min(1, 'Feature title is required').max(100),
+  description: z.string().min(1, 'Description is required').max(300),
+})
+
+export type FeatureItem = z.infer<typeof featureItemSchema>
+
+/**
+ * Features Grid Block Schema
+ *
+ * Extends base schema with:
+ * - items: Array of feature items (icon, title, description)
+ * - columns: Grid layout option (2, 3, 4 columns)
+ *
+ * Note: Uses base schema title, description, cta, backgroundColor, className, id
+ */
+export const featuresGridSpecificSchema = z.object({
+  // Content: array of feature items
+  items: z.array(featureItemSchema)
+    .min(1, 'At least one feature is required')
+    .max(12, 'Maximum 12 features allowed'),
+
+  // Design: column layout
+  columns: z.enum(['2', '3', '4']).default('3'),
+})
+
+/**
+ * Complete Features Grid Block Schema
+ */
+export const schema = baseBlockSchema.merge(featuresGridSpecificSchema)
+
+export type FeaturesGridBlockProps = z.infer<typeof schema>

package/blocks/features-grid/thumbnail.png

@@ -0,0 +1 @@
+Placeholder thumbnail for features-grid block

package/blocks/hero/component.tsx

@@ -0,0 +1,100 @@
+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 { HeroBlockProps } from './schema'
+
+/**
+ * Hero Block Component
+ *
+ * Props from 3-tab structure:
+ * - Content: title, content, cta
+ * - Design: backgroundColor, backgroundImage, textColor
+ * - Advanced: className, id
+ */
+export function HeroBlock({
+  // Base content props
+  title,
+  content,
+  cta,
+  // Base design props
+  backgroundColor,
+  // Hero-specific design
+  backgroundImage,
+  textColor = 'light',
+  // Base advanced props
+  className,
+  id,
+  // Legacy props for backward compatibility
+  ...legacyProps
+}: HeroBlockProps & {
+  ctaText?: string
+  ctaLink?: string
+  subtitle?: string
+  description?: string
+}) {
+  // Handle legacy CTA format (ctaText, ctaLink) for backward compatibility
+  const ctaConfig = cta || (legacyProps.ctaText ? {
+    text: legacyProps.ctaText,
+    link: legacyProps.ctaLink || '#',
+    target: '_self' as const,
+  } : undefined)
+
+  // Handle legacy subtitle/description props for backward compatibility
+  const displayContent = content || legacyProps.subtitle || legacyProps.description
+
+  // Build section classes with background and custom className
+  const sectionClasses = buildSectionClasses(
+    cn(
+      'relative flex min-h-[600px] items-center justify-center overflow-hidden px-4 py-20',
+      textColor === 'light' ? 'text-white' : 'text-gray-900'
+    ),
+    { backgroundColor, className }
+  )
+
+  return (
+    <section id={id} className={sectionClasses} data-cy={sel('blocks.hero.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="container relative z-10 mx-auto max-w-4xl text-center">
+        {title && (
+          <h1 className="mb-6 text-5xl font-bold leading-tight md:text-6xl lg:text-7xl">
+            {title}
+          </h1>
+        )}
+
+        {displayContent && (
+          <p className="mb-8 text-xl md:text-2xl opacity-90">
+            {displayContent}
+          </p>
+        )}
+
+        {ctaConfig && (
+          <Button asChild size="lg" className="text-lg px-8 py-6">
+            <a
+              href={ctaConfig.link}
+              target={ctaConfig.target}
+              rel={ctaConfig.target === '_blank' ? 'noopener noreferrer' : undefined}
+            >
+              {ctaConfig.text}
+            </a>
+          </Button>
+        )}
+      </div>
+    </section>
+  )
+}

package/blocks/hero/config.ts

@@ -0,0 +1,11 @@
+import type { BlockConfig } from '@nextsparkjs/core/types/blocks'
+
+export const config: Omit<BlockConfig, 'schema' | 'fieldDefinitions' | 'Component' | 'examples'> = {
+  slug: 'hero',
+  name: 'Hero Section',
+  description: 'Full-width hero section with title, subtitle, CTA button, and background image',
+  category: 'hero',
+  icon: 'Rocket',
+  thumbnail: '/theme/blocks/hero/thumbnail.png',
+  scope: ['pages', 'posts']
+}

package/blocks/hero/examples.ts

@@ -0,0 +1,35 @@
+import type { BlockExample } from '@nextsparkjs/core/types/blocks'
+
+export const examples: BlockExample[] = [
+  {
+    name: 'Default',
+    description: 'Standard hero with dark background',
+    props: {
+      title: 'Build Your Next Big Idea',
+      content: 'The complete platform for launching and scaling your SaaS application. From authentication to payments, we handle the infrastructure so you can focus on building features.',
+      cta: {
+        text: 'Get Started Free',
+        link: '/signup',
+        target: '_self',
+      },
+      backgroundColor: 'gray-900',
+      textColor: 'light',
+    },
+  },
+  {
+    name: 'With Background Image',
+    description: 'Hero with background image overlay',
+    props: {
+      title: 'Transform Your Business',
+      content: 'Join thousands of teams who trust our platform to power their most critical workflows.',
+      cta: {
+        text: 'Schedule Demo',
+        link: '/demo',
+        target: '_self',
+      },
+      backgroundColor: 'gray-900',
+      backgroundImage: 'https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1920',
+      textColor: 'light',
+    },
+  },
+]

package/blocks/hero/fields.ts

@@ -0,0 +1,60 @@
+import type { FieldDefinition } from '@nextsparkjs/core/types/blocks'
+import {
+  baseContentFields,
+  baseDesignFields,
+  baseAdvancedFields,
+} from '@nextsparkjs/core/types/blocks'
+
+/**
+ * Hero Block Field Definitions
+ *
+ * Organized into 3 tabs:
+ * - Content: title, content, cta (from base)
+ * - Design: backgroundColor (from base) + backgroundImage, textColor
+ * - Advanced: className, id (from base)
+ *
+ * Note: The `content` field from base serves as the hero subtitle/description
+ */
+
+// Hero-specific design fields
+const heroDesignFields: FieldDefinition[] = [
+  {
+    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' },
+    ],
+  },
+]
+
+/**
+ * Complete field definitions organized by tab
+ */
+export const fieldDefinitions: FieldDefinition[] = [
+  // Content tab: base fields only (title, content, cta)
+  ...baseContentFields,
+
+  // Design tab: base fields + hero-specific
+  ...baseDesignFields,
+  ...heroDesignFields,
+
+  // Advanced tab: base fields only
+  ...baseAdvancedFields,
+]
+
+// Alias for compatibility
+export const fields = fieldDefinitions

package/blocks/hero/index.ts

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

package/blocks/hero/schema.ts

@@ -0,0 +1,32 @@
+import { z } from 'zod'
+import {
+  baseBlockSchema,
+  type BaseBlockProps,
+} from '@nextsparkjs/core/types/blocks'
+
+/**
+ * Hero Block Schema
+ *
+ * Extends base schema with hero-specific fields:
+ * - backgroundImage: Optional hero background
+ * - textColor: Light/dark for contrast
+ *
+ * Note: Uses base schema title, content, cta, backgroundColor, className, id
+ * The `content` field serves as the hero subtitle/description
+ */
+export const heroSpecificSchema = z.object({
+  // Hero-specific design fields
+  backgroundImage: z.string().url('Must be a valid URL').optional(),
+  textColor: z.enum(['light', 'dark']).default('light'),
+})
+
+/**
+ * Complete Hero Block Schema
+ * Combines base fields + hero-specific fields
+ */
+export const schema = baseBlockSchema.merge(heroSpecificSchema)
+
+export type HeroBlockProps = z.infer<typeof schema>
+
+// Also export for type-only imports
+export type { BaseBlockProps }

package/blocks/hero/thumbnail.png

@@ -0,0 +1 @@
+Placeholder thumbnail for hero block

package/blocks/hero/thumbnail.png.txt

@@ -0,0 +1,6 @@
+<!-- This is a placeholder. In production, replace with actual PNG image -->
+<!-- SVG placeholder for Hero block thumbnail -->
+<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
+  <rect width="400" height="300" fill="#6366f1"/>
+  <text x="200" y="150" font-family="Arial" font-size="24" fill="white" text-anchor="middle">Hero Section</text>
+</svg>

package/blocks/hero-with-form/component.tsx

@@ -0,0 +1,232 @@
+'use client'
+
+import React from 'react'
+import { Button } from '@nextsparkjs/core/components/ui/button'
+import { Input } from '@nextsparkjs/core/components/ui/input'
+import { Checkbox } from '@nextsparkjs/core/components/ui/checkbox'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@nextsparkjs/core/components/ui/select'
+import { cn } from '@nextsparkjs/core/lib/utils'
+import { buildSectionClasses } from '@nextsparkjs/core/types/blocks'
+import { sel } from '../../lib/selectors'
+import type { HeroWithFormBlockProps } from './schema'
+
+/**
+ * Hero With Form Block Component
+ *
+ * Props from 3-tab structure:
+ * - Content: title, subtitle, backgroundImage, form fields
+ * - Design: backgroundColor, overlayOpacity
+ * - Advanced: className, id
+ */
+export function HeroWithFormBlock({
+  // Base content props
+  title,
+  subtitle,
+  backgroundImage,
+  // Form content props
+  formTitle = 'Get Started',
+  formSubtitle,
+  firstNamePlaceholder = 'First Name',
+  lastNamePlaceholder = 'Last Name',
+  emailPlaceholder = 'Email',
+  phonePlaceholder = 'Phone',
+  areaOfInterestPlaceholder = 'Area of Interest',
+  areaOfInterestOptions,
+  consentCheckboxLabel,
+  submitButtonText = 'Submit',
+  legalDisclaimer,
+  termsLinkText = 'Terms of Service',
+  termsLinkUrl,
+  privacyLinkText = 'Privacy Policy',
+  privacyLinkUrl,
+  formAction,
+  // Design props
+  backgroundColor,
+  overlayOpacity = '40',
+  // Advanced props
+  className,
+  id,
+}: HeroWithFormBlockProps) {
+  // Build section classes with background and custom className
+  const sectionClasses = buildSectionClasses(
+    'relative min-h-screen',
+    { backgroundColor, className }
+  )
+
+  // Calculate overlay opacity class
+  const overlayClass = overlayOpacity === '0'
+    ? 'bg-transparent'
+    : `bg-black/${overlayOpacity}`
+
+  // Parse area of interest options (handle both \n and actual newlines)
+  const areaOptions = areaOfInterestOptions
+    ? areaOfInterestOptions
+        .split(/\\n|\n/)
+        .map((opt: string) => opt.trim())
+        .filter(Boolean)
+    : []
+
+  return (
+    <section id={id} className={sectionClasses} data-cy={sel('blocks.heroWithForm.container')}>
+      {/* Background Image with overlay - full coverage */}
+      <div className="absolute inset-0">
+        <div
+          className="h-full w-full"
+          style={{
+            backgroundImage: `url(${backgroundImage})`,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+          }}
+        />
+        <div className={cn('absolute inset-0', overlayClass)} />
+      </div>
+
+      {/* Content Container */}
+      <div className="container relative z-10 mx-auto px-4 py-12 lg:py-0">
+        <div className="grid lg:grid-cols-2 gap-8 lg:gap-16 min-h-screen items-center">
+
+          {/* Left: Title/Subtitle - vertically centered, bottom aligned on mobile */}
+          <div className="text-white order-2 lg:order-1 flex flex-col justify-end lg:justify-center pb-8 lg:pb-0">
+            {title && (
+              <h1 className="text-4xl lg:text-5xl xl:text-6xl font-bold italic mb-4 leading-tight">
+                {title}
+              </h1>
+            )}
+            {subtitle && (
+              <p className="text-lg lg:text-xl xl:text-2xl opacity-90 max-w-lg">
+                {subtitle}
+              </p>
+            )}
+          </div>
+
+          {/* Right: Form Card - centered vertically */}
+          <div className="order-1 lg:order-2 flex justify-center lg:justify-end items-start lg:items-center pt-8 lg:pt-0">
+            <div className="bg-white rounded-lg shadow-2xl p-6 sm:p-8 w-full max-w-md">
+              {/* Form Header */}
+              {formTitle && (
+                <h2 className="text-xl font-bold text-center text-primary mb-2">
+                  {formTitle}
+                </h2>
+              )}
+              {formSubtitle && (
+                <p className="text-sm text-center text-muted-foreground mb-6">
+                  {formSubtitle}
+                </p>
+              )}
+
+              {/* Form */}
+              <form action={formAction} method="POST" className="space-y-4">
+                <Input
+                  placeholder={firstNamePlaceholder}
+                  name="firstName"
+                  required
+                  data-cy={sel('blocks.heroWithForm.form.firstname')}
+                />
+
+                <Input
+                  placeholder={lastNamePlaceholder}
+                  name="lastName"
+                  required
+                  data-cy={sel('blocks.heroWithForm.form.lastname')}
+                />
+
+                <Input
+                  type="email"
+                  placeholder={emailPlaceholder}
+                  name="email"
+                  required
+                  data-cy={sel('blocks.heroWithForm.form.email')}
+                />
+
+                <Input
+                  type="tel"
+                  placeholder={phonePlaceholder}
+                  name="phone"
+                  data-cy={sel('blocks.heroWithForm.form.phone')}
+                />
+
+                {areaOptions.length > 0 && (
+                  <Select name="areaOfInterest">
+                    <SelectTrigger data-cy={sel('blocks.heroWithForm.form.area')}>
+                      <SelectValue placeholder={areaOfInterestPlaceholder} />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {areaOptions.map((option: string, index: number) => (
+                        <SelectItem key={index} value={option}>
+                          {option}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                )}
+
+                {consentCheckboxLabel && (
+                  <div className="flex items-start gap-3">
+                    <Checkbox
+                      id="consent"
+                      name="consent"
+                      className="mt-0.5"
+                      data-cy={sel('blocks.heroWithForm.form.consent')}
+                    />
+                    <label
+                      htmlFor="consent"
+                      className="text-sm text-muted-foreground leading-tight cursor-pointer"
+                    >
+                      {consentCheckboxLabel}
+                    </label>
+                  </div>
+                )}
+
+                <Button
+                  type="submit"
+                  className="w-full"
+                  size="lg"
+                  data-cy={sel('blocks.heroWithForm.form.submit')}
+                >
+                  {submitButtonText}
+                </Button>
+              </form>
+
+              {/* Legal Disclaimer */}
+              {(legalDisclaimer || termsLinkUrl || privacyLinkUrl) && (
+                <p className="text-xs text-muted-foreground mt-4 leading-relaxed">
+                  {legalDisclaimer && <span>{legalDisclaimer} </span>}
+                  {termsLinkUrl && (
+                    <>
+                      <a
+                        href={termsLinkUrl}
+                        className="underline hover:text-primary"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        {termsLinkText}
+                      </a>
+                      {privacyLinkUrl && <span> y </span>}
+                    </>
+                  )}
+                  {privacyLinkUrl && (
+                    <a
+                      href={privacyLinkUrl}
+                      className="underline hover:text-primary"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {privacyLinkText}
+                    </a>
+                  )}
+                </p>
+              )}
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </section>
+  )
+}

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

@@ -0,0 +1,11 @@
+import type { BlockConfig } from '@nextsparkjs/core/types/blocks'
+
+export const config: Omit<BlockConfig, 'schema' | 'fieldDefinitions' | 'Component' | 'examples'> = {
+  slug: 'hero-with-form',
+  name: 'Hero With Form',
+  description: 'Full-width hero section with background image, title/subtitle on the left, and a lead capture form card on the right',
+  category: 'hero',
+  icon: 'FileText',
+  thumbnail: '/theme/blocks/hero-with-form/thumbnail.png',
+  scope: ['pages']
+}

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

@@ -0,0 +1,16 @@
+import type { BlockExample } from '@nextsparkjs/core/types/blocks'
+
+export const examples: BlockExample[] = [
+  {
+    name: 'Default',
+    description: 'Hero with email signup form',
+    props: {
+      title: 'Start Growing Your Business Today',
+      content: 'Join over 10,000 businesses using our platform to streamline their operations and boost productivity.',
+      formPlaceholder: 'Enter your email',
+      formButtonText: 'Get Started',
+      backgroundColor: 'primary',
+      textColor: 'light',
+    },
+  },
+]