@uniweb/templates 0.1.0

package/templates/marketing/template/foundation/src/components/CTA/index.jsx

@@ -0,0 +1,75 @@
+import React from 'react'
+
+export function CTA({ content, params }) {
+  const { title } = content.main?.header || {}
+  const { paragraphs = [], links = [] } = content.main?.body || {}
+  const { theme = 'primary', alignment = 'center' } = params || {}
+
+  const cta = links[0]
+  const secondaryCta = links[1]
+
+  const themeStyles = {
+    primary: 'bg-primary text-white',
+    gradient: 'bg-gradient-to-r from-primary to-blue-700 text-white',
+    dark: 'bg-gray-900 text-white',
+    light: 'bg-gray-100 text-gray-900',
+  }
+
+  const buttonStyles = {
+    primary: 'bg-white text-primary hover:bg-blue-50',
+    gradient: 'bg-white text-primary hover:bg-blue-50',
+    dark: 'bg-white text-gray-900 hover:bg-gray-100',
+    light: 'bg-primary text-white hover:bg-blue-700',
+  }
+
+  const secondaryStyles = {
+    primary: 'border-2 border-white text-white hover:bg-white/10',
+    gradient: 'border-2 border-white text-white hover:bg-white/10',
+    dark: 'border-2 border-gray-600 text-white hover:bg-gray-800',
+    light: 'border-2 border-gray-300 text-gray-700 hover:bg-gray-200',
+  }
+
+  const descStyles = {
+    primary: 'text-blue-100',
+    gradient: 'text-blue-100',
+    dark: 'text-gray-400',
+    light: 'text-gray-600',
+  }
+
+  return (
+    <section className={`py-20 px-6 ${themeStyles[theme]}`}>
+      <div className={`max-w-4xl mx-auto ${alignment === 'center' ? 'text-center' : ''}`}>
+        {title && (
+          <h2 className="text-3xl md:text-4xl font-bold mb-4">{title}</h2>
+        )}
+        {paragraphs[0] && (
+          <p className={`text-lg mb-8 max-w-2xl ${alignment === 'center' ? 'mx-auto' : ''} ${descStyles[theme]}`}>
+            {paragraphs[0]}
+          </p>
+        )}
+        {(cta || secondaryCta) && (
+          <div className={`flex gap-4 ${alignment === 'center' ? 'justify-center' : ''} flex-wrap`}>
+            {cta && (
+              <a
+                href={cta.url}
+                className={`inline-block px-8 py-4 font-semibold rounded-lg transition-colors ${buttonStyles[theme]}`}
+              >
+                {cta.text}
+              </a>
+            )}
+            {secondaryCta && (
+              <a
+                href={secondaryCta.url}
+                className={`inline-block px-8 py-4 font-semibold rounded-lg transition-colors ${secondaryStyles[theme]}`}
+              >
+                {secondaryCta.text}
+              </a>
+            )}
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}
+
+export default CTA

package/templates/marketing/template/foundation/src/components/CTA/meta.js

@@ -0,0 +1,46 @@
+/**
+ * CTA Component Metadata
+ */
+export default {
+  title: 'Call to Action',
+  description: 'A conversion-focused section with headline and action buttons',
+  category: 'Conversion',
+
+  elements: {
+    title: {
+      label: 'Headline',
+      description: 'From H2 in markdown',
+      required: true,
+    },
+    paragraphs: {
+      label: 'Description',
+    },
+    links: {
+      label: 'Action Buttons',
+      description: 'Primary and secondary CTAs',
+    },
+  },
+
+  properties: {
+    theme: {
+      type: 'select',
+      label: 'Theme',
+      options: [
+        { value: 'primary', label: 'Primary' },
+        { value: 'gradient', label: 'Gradient' },
+        { value: 'dark', label: 'Dark' },
+        { value: 'light', label: 'Light' },
+      ],
+      default: 'primary',
+    },
+    alignment: {
+      type: 'select',
+      label: 'Alignment',
+      options: [
+        { value: 'center', label: 'Center' },
+        { value: 'left', label: 'Left' },
+      ],
+      default: 'center',
+    },
+  },
+}

package/templates/marketing/template/foundation/src/components/Features/index.jsx

@@ -0,0 +1,81 @@
+import React from 'react'
+
+export function Features({ content, params }) {
+  const { title } = content.main?.header || {}
+  const { paragraphs = [] } = content.main?.body || {}
+  const { columns = 3, theme = 'light' } = params || {}
+
+  // Extract features from subsections
+  const features = content.subsections || []
+
+  const themeStyles = {
+    light: 'bg-white',
+    gray: 'bg-gray-50',
+    dark: 'bg-gray-900 text-white',
+  }
+
+  const cardStyles = {
+    light: 'bg-gray-50',
+    gray: 'bg-white shadow-sm',
+    dark: 'bg-gray-800',
+  }
+
+  const descStyles = {
+    light: 'text-gray-600',
+    gray: 'text-gray-600',
+    dark: 'text-gray-400',
+  }
+
+  const gridCols = {
+    2: 'md:grid-cols-2',
+    3: 'md:grid-cols-3',
+    4: 'md:grid-cols-2 lg:grid-cols-4',
+  }
+
+  return (
+    <section className={`py-20 px-6 ${themeStyles[theme]}`}>
+      <div className="max-w-6xl mx-auto">
+        {(title || paragraphs[0]) && (
+          <div className="text-center mb-16">
+            {title && (
+              <h2 className="text-3xl md:text-4xl font-bold mb-4">{title}</h2>
+            )}
+            {paragraphs[0] && (
+              <p className={`text-lg max-w-2xl mx-auto ${descStyles[theme]}`}>
+                {paragraphs[0]}
+              </p>
+            )}
+          </div>
+        )}
+
+        <div className={`grid gap-8 ${gridCols[columns] || 'md:grid-cols-3'}`}>
+          {features.map((feature, index) => {
+            const featureTitle = feature.header?.title
+            const featureDesc = feature.body?.paragraphs?.[0]
+
+            return (
+              <div
+                key={index}
+                className={`p-6 rounded-xl ${cardStyles[theme]}`}
+              >
+                <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
+                  <svg className="w-6 h-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                  </svg>
+                </div>
+                {featureTitle && (
+                  <h3 className="text-xl font-semibold mb-2">{featureTitle}</h3>
+                )}
+                {featureDesc && (
+                  <p className={descStyles[theme]}>{featureDesc}</p>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Features

package/templates/marketing/template/foundation/src/components/Features/meta.js

@@ -0,0 +1,46 @@
+/**
+ * Features Component Metadata
+ */
+export default {
+  title: 'Features Grid',
+  description: 'Showcase product features in a responsive grid layout',
+  category: 'Content',
+
+  elements: {
+    title: {
+      label: 'Section Title',
+      description: 'From H2 in markdown',
+    },
+    paragraphs: {
+      label: 'Section Description',
+      description: 'Introductory text for the features section',
+    },
+    subsections: {
+      label: 'Features',
+      description: 'Each H3 with its content becomes a feature card',
+    },
+  },
+
+  properties: {
+    columns: {
+      type: 'select',
+      label: 'Columns',
+      options: [
+        { value: 2, label: '2 Columns' },
+        { value: 3, label: '3 Columns' },
+        { value: 4, label: '4 Columns' },
+      ],
+      default: 3,
+    },
+    theme: {
+      type: 'select',
+      label: 'Theme',
+      options: [
+        { value: 'light', label: 'Light' },
+        { value: 'gray', label: 'Gray' },
+        { value: 'dark', label: 'Dark' },
+      ],
+      default: 'light',
+    },
+  },
+}

package/templates/marketing/template/foundation/src/components/Hero/index.jsx

@@ -0,0 +1,73 @@
+import React from 'react'
+
+export function Hero({ content, params }) {
+  const { title } = content.main?.header || {}
+  const { paragraphs = [], links = [] } = content.main?.body || {}
+  const { theme = 'gradient', alignment = 'center' } = params || {}
+
+  const cta = links[0]
+  const secondaryCta = links[1]
+
+  const themeStyles = {
+    gradient: 'bg-gradient-to-br from-primary to-blue-700 text-white',
+    light: 'bg-gray-50 text-gray-900',
+    dark: 'bg-gray-900 text-white',
+  }
+
+  const buttonStyles = {
+    gradient: 'bg-white text-primary hover:bg-blue-50',
+    light: 'bg-primary text-white hover:bg-blue-700',
+    dark: 'bg-primary text-white hover:bg-blue-700',
+  }
+
+  const secondaryButtonStyles = {
+    gradient: 'border-2 border-white text-white hover:bg-white/10',
+    light: 'border-2 border-gray-300 text-gray-700 hover:bg-gray-100',
+    dark: 'border-2 border-gray-600 text-gray-300 hover:bg-gray-800',
+  }
+
+  const descStyles = {
+    gradient: 'text-blue-100',
+    light: 'text-gray-600',
+    dark: 'text-gray-400',
+  }
+
+  return (
+    <section className={`py-24 px-6 ${themeStyles[theme]}`}>
+      <div className={`max-w-4xl mx-auto ${alignment === 'center' ? 'text-center' : 'text-left'}`}>
+        {title && (
+          <h1 className="text-4xl md:text-6xl font-bold mb-6 leading-tight">
+            {title}
+          </h1>
+        )}
+        {paragraphs[0] && (
+          <p className={`text-xl md:text-2xl mb-10 max-w-2xl ${alignment === 'center' ? 'mx-auto' : ''} ${descStyles[theme]}`}>
+            {paragraphs[0]}
+          </p>
+        )}
+        {(cta || secondaryCta) && (
+          <div className={`flex gap-4 ${alignment === 'center' ? 'justify-center' : ''} flex-wrap`}>
+            {cta && (
+              <a
+                href={cta.url}
+                className={`inline-block px-8 py-4 font-semibold rounded-lg transition-colors ${buttonStyles[theme]}`}
+              >
+                {cta.text}
+              </a>
+            )}
+            {secondaryCta && (
+              <a
+                href={secondaryCta.url}
+                className={`inline-block px-8 py-4 font-semibold rounded-lg transition-colors ${secondaryButtonStyles[theme]}`}
+              >
+                {secondaryCta.text}
+              </a>
+            )}
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}
+
+export default Hero

package/templates/marketing/template/foundation/src/components/Hero/meta.js

@@ -0,0 +1,46 @@
+/**
+ * Hero Component Metadata
+ */
+export default {
+  title: 'Hero Banner',
+  description: 'A bold hero section with headline, description, and call-to-action buttons',
+  category: 'Headers',
+
+  elements: {
+    title: {
+      label: 'Headline',
+      description: 'From H1 in markdown',
+      required: true,
+    },
+    paragraphs: {
+      label: 'Description',
+      description: 'From paragraphs in markdown',
+    },
+    links: {
+      label: 'Call to Action',
+      description: 'Primary and secondary buttons from links',
+    },
+  },
+
+  properties: {
+    theme: {
+      type: 'select',
+      label: 'Theme',
+      options: [
+        { value: 'gradient', label: 'Gradient' },
+        { value: 'light', label: 'Light' },
+        { value: 'dark', label: 'Dark' },
+      ],
+      default: 'gradient',
+    },
+    alignment: {
+      type: 'select',
+      label: 'Alignment',
+      options: [
+        { value: 'center', label: 'Center' },
+        { value: 'left', label: 'Left' },
+      ],
+      default: 'center',
+    },
+  },
+}

package/templates/marketing/template/foundation/src/components/Pricing/index.jsx

@@ -0,0 +1,108 @@
+import React from 'react'
+
+export function Pricing({ content, params }) {
+  const { title } = content.main?.header || {}
+  const { paragraphs = [] } = content.main?.body || {}
+  const { theme = 'light' } = params || {}
+
+  // Extract pricing tiers from subsections
+  const tiers = content.subsections || []
+
+  const themeStyles = {
+    light: 'bg-gray-50',
+    white: 'bg-white',
+    dark: 'bg-gray-900 text-white',
+  }
+
+  const cardStyles = {
+    light: 'bg-white shadow-lg',
+    white: 'bg-gray-50',
+    dark: 'bg-gray-800',
+  }
+
+  const descStyles = {
+    light: 'text-gray-600',
+    white: 'text-gray-600',
+    dark: 'text-gray-400',
+  }
+
+  return (
+    <section className={`py-20 px-6 ${themeStyles[theme]}`}>
+      <div className="max-w-6xl mx-auto">
+        {(title || paragraphs[0]) && (
+          <div className="text-center mb-16">
+            {title && (
+              <h2 className="text-3xl md:text-4xl font-bold mb-4">{title}</h2>
+            )}
+            {paragraphs[0] && (
+              <p className={`text-lg max-w-2xl mx-auto ${descStyles[theme]}`}>
+                {paragraphs[0]}
+              </p>
+            )}
+          </div>
+        )}
+
+        <div className="grid md:grid-cols-3 gap-8">
+          {tiers.map((tier, index) => {
+            const tierTitle = tier.header?.title
+            const tierDesc = tier.body?.paragraphs?.[0]
+            const features = tier.body?.lists?.[0] || []
+            const link = tier.body?.links?.[0]
+            const isPopular = index === 1 // Middle tier is popular
+
+            return (
+              <div
+                key={index}
+                className={`rounded-2xl p-8 ${cardStyles[theme]} ${
+                  isPopular ? 'ring-2 ring-primary scale-105' : ''
+                }`}
+              >
+                {isPopular && (
+                  <div className="text-center mb-4">
+                    <span className="bg-primary text-white text-sm font-semibold px-3 py-1 rounded-full">
+                      Most Popular
+                    </span>
+                  </div>
+                )}
+                {tierTitle && (
+                  <h3 className="text-2xl font-bold text-center mb-2">{tierTitle}</h3>
+                )}
+                {tierDesc && (
+                  <p className={`text-center mb-6 ${descStyles[theme]}`}>{tierDesc}</p>
+                )}
+
+                {features.length > 0 && (
+                  <ul className="space-y-3 mb-8">
+                    {features.map((feature, i) => (
+                      <li key={i} className="flex items-start gap-3">
+                        <svg className="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                        </svg>
+                        <span className={descStyles[theme]}>{feature}</span>
+                      </li>
+                    ))}
+                  </ul>
+                )}
+
+                {link && (
+                  <a
+                    href={link.url}
+                    className={`block w-full py-3 text-center font-semibold rounded-lg transition-colors ${
+                      isPopular
+                        ? 'bg-primary text-white hover:bg-blue-700'
+                        : 'bg-gray-100 text-gray-900 hover:bg-gray-200'
+                    }`}
+                  >
+                    {link.text}
+                  </a>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Pricing

package/templates/marketing/template/foundation/src/components/Pricing/meta.js

@@ -0,0 +1,36 @@
+/**
+ * Pricing Component Metadata
+ */
+export default {
+  title: 'Pricing Table',
+  description: 'Display pricing tiers with features and call-to-action',
+  category: 'Commerce',
+
+  elements: {
+    title: {
+      label: 'Section Title',
+      description: 'From H2 in markdown',
+    },
+    paragraphs: {
+      label: 'Section Description',
+      description: 'Introductory text',
+    },
+    subsections: {
+      label: 'Pricing Tiers',
+      description: 'Each H3 becomes a pricing card. Use lists for features.',
+    },
+  },
+
+  properties: {
+    theme: {
+      type: 'select',
+      label: 'Theme',
+      options: [
+        { value: 'light', label: 'Light' },
+        { value: 'white', label: 'White' },
+        { value: 'dark', label: 'Dark' },
+      ],
+      default: 'light',
+    },
+  },
+}

package/templates/marketing/template/foundation/src/components/Testimonials/index.jsx

@@ -0,0 +1,96 @@
+import React from 'react'
+
+export function Testimonials({ content, params }) {
+  const { title } = content.main?.header || {}
+  const { paragraphs = [] } = content.main?.body || {}
+  const { theme = 'light', columns = 3 } = params || {}
+
+  // Extract testimonials from subsections
+  const testimonials = content.subsections || []
+
+  const themeStyles = {
+    light: 'bg-white',
+    gray: 'bg-gray-50',
+    dark: 'bg-gray-900 text-white',
+  }
+
+  const cardStyles = {
+    light: 'bg-gray-50',
+    gray: 'bg-white shadow-sm',
+    dark: 'bg-gray-800',
+  }
+
+  const quoteStyles = {
+    light: 'text-gray-700',
+    gray: 'text-gray-700',
+    dark: 'text-gray-300',
+  }
+
+  const nameStyles = {
+    light: 'text-gray-900',
+    gray: 'text-gray-900',
+    dark: 'text-white',
+  }
+
+  const roleStyles = {
+    light: 'text-gray-500',
+    gray: 'text-gray-500',
+    dark: 'text-gray-400',
+  }
+
+  const gridCols = {
+    2: 'md:grid-cols-2',
+    3: 'md:grid-cols-3',
+  }
+
+  return (
+    <section className={`py-20 px-6 ${themeStyles[theme]}`}>
+      <div className="max-w-6xl mx-auto">
+        {(title || paragraphs[0]) && (
+          <div className="text-center mb-16">
+            {title && (
+              <h2 className="text-3xl md:text-4xl font-bold mb-4">{title}</h2>
+            )}
+            {paragraphs[0] && (
+              <p className={`text-lg max-w-2xl mx-auto ${roleStyles[theme]}`}>
+                {paragraphs[0]}
+              </p>
+            )}
+          </div>
+        )}
+
+        <div className={`grid gap-8 ${gridCols[columns] || 'md:grid-cols-3'}`}>
+          {testimonials.map((testimonial, index) => {
+            const name = testimonial.header?.title
+            const quote = testimonial.body?.paragraphs?.[0]
+            const role = testimonial.body?.paragraphs?.[1]
+
+            return (
+              <div
+                key={index}
+                className={`p-6 rounded-xl ${cardStyles[theme]}`}
+              >
+                <svg className="w-8 h-8 text-primary/30 mb-4" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z" />
+                </svg>
+                {quote && (
+                  <p className={`text-lg mb-4 ${quoteStyles[theme]}`}>"{quote}"</p>
+                )}
+                <div>
+                  {name && (
+                    <p className={`font-semibold ${nameStyles[theme]}`}>{name}</p>
+                  )}
+                  {role && (
+                    <p className={`text-sm ${roleStyles[theme]}`}>{role}</p>
+                  )}
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Testimonials

package/templates/marketing/template/foundation/src/components/Testimonials/meta.js

@@ -0,0 +1,44 @@
+/**
+ * Testimonials Component Metadata
+ */
+export default {
+  title: 'Testimonials',
+  description: 'Display customer quotes and social proof',
+  category: 'Social Proof',
+
+  elements: {
+    title: {
+      label: 'Section Title',
+      description: 'From H2 in markdown',
+    },
+    paragraphs: {
+      label: 'Section Description',
+    },
+    subsections: {
+      label: 'Testimonials',
+      description: 'Each H3 (name) with paragraphs (quote, role) becomes a testimonial',
+    },
+  },
+
+  properties: {
+    theme: {
+      type: 'select',
+      label: 'Theme',
+      options: [
+        { value: 'light', label: 'Light' },
+        { value: 'gray', label: 'Gray' },
+        { value: 'dark', label: 'Dark' },
+      ],
+      default: 'light',
+    },
+    columns: {
+      type: 'select',
+      label: 'Columns',
+      options: [
+        { value: 2, label: '2 Columns' },
+        { value: 3, label: '3 Columns' },
+      ],
+      default: 3,
+    },
+  },
+}

package/templates/marketing/template/foundation/src/entry-runtime.js

@@ -0,0 +1,3 @@
+import './styles.css'
+export * from './index.js'
+export { default } from './index.js'