@hanzo/ui 4.7.0 → 4.8.3

package/blocks/marketing/features-grid.tsx

@@ -0,0 +1,156 @@
+'use client'
+
+import { cn } from '@hanzo/ui/util'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@hanzo/ui/primitives'
+import type { LucideIcon } from 'lucide-react'
+
+interface Feature {
+  icon?: LucideIcon
+  title: string
+  description: string
+  href?: string
+}
+
+interface FeaturesGridProps extends React.ComponentPropsWithoutRef<'section'> {
+  title?: string
+  subtitle?: string
+  description?: string
+  features: Feature[]
+  columns?: 2 | 3 | 4
+  variant?: 'default' | 'cards' | 'minimal'
+}
+
+export function FeaturesGrid({
+  className,
+  title,
+  subtitle,
+  description,
+  features,
+  columns = 3,
+  variant = 'default',
+  ...props
+}: FeaturesGridProps) {
+  const gridCols = {
+    2: 'md:grid-cols-2',
+    3: 'md:grid-cols-2 lg:grid-cols-3',
+    4: 'md:grid-cols-2 lg:grid-cols-4',
+  }[columns]
+
+  return (
+    <section className={cn('py-24 sm:py-32', className)} {...props}>
+      <div className="container">
+        {(title || subtitle || description) && (
+          <div className="mx-auto max-w-3xl text-center">
+            {subtitle && (
+              <p className="mb-4 text-sm font-semibold uppercase tracking-wide text-primary">
+                {subtitle}
+              </p>
+            )}
+            {title && (
+              <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
+                {title}
+              </h2>
+            )}
+            {description && (
+              <p className="mt-4 text-lg text-muted-foreground">
+                {description}
+              </p>
+            )}
+          </div>
+        )}
+        
+        {variant === 'cards' && (
+          <div className={cn('mt-16 grid gap-6', gridCols)}>
+            {features.map((feature, i) => {
+              const Icon = feature.icon
+              return (
+                <Card key={i} className="relative">
+                  {feature.href && (
+                    <a
+                      href={feature.href}
+                      className="absolute inset-0 z-10"
+                      aria-label={feature.title}
+                    />
+                  )}
+                  <CardHeader>
+                    {Icon && (
+                      <div className="mb-2 inline-flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
+                        <Icon className="h-5 w-5 text-primary" />
+                      </div>
+                    )}
+                    <CardTitle>{feature.title}</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <CardDescription>{feature.description}</CardDescription>
+                  </CardContent>
+                </Card>
+              )
+            })}
+          </div>
+        )}
+        
+        {variant === 'minimal' && (
+          <div className={cn('mt-16 grid gap-x-8 gap-y-10', gridCols)}>
+            {features.map((feature, i) => {
+              const Icon = feature.icon
+              return (
+                <div key={i} className="relative">
+                  {feature.href && (
+                    <a
+                      href={feature.href}
+                      className="absolute inset-0 z-10"
+                      aria-label={feature.title}
+                    />
+                  )}
+                  <div className="flex items-start gap-4">
+                    {Icon && (
+                      <div className="flex-shrink-0">
+                        <div className="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
+                          <Icon className="h-5 w-5 text-primary" />
+                        </div>
+                      </div>
+                    )}
+                    <div>
+                      <h3 className="font-semibold">{feature.title}</h3>
+                      <p className="mt-2 text-sm text-muted-foreground">
+                        {feature.description}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        )}
+        
+        {variant === 'default' && (
+          <div className={cn('mt-16 grid gap-8', gridCols)}>
+            {features.map((feature, i) => {
+              const Icon = feature.icon
+              return (
+                <div key={i} className="relative text-center">
+                  {feature.href && (
+                    <a
+                      href={feature.href}
+                      className="absolute inset-0 z-10"
+                      aria-label={feature.title}
+                    />
+                  )}
+                  {Icon && (
+                    <div className="mx-auto mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
+                      <Icon className="h-6 w-6 text-primary" />
+                    </div>
+                  )}
+                  <h3 className="mb-2 text-lg font-semibold">{feature.title}</h3>
+                  <p className="text-sm text-muted-foreground">
+                    {feature.description}
+                  </p>
+                </div>
+              )
+            })}
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}

package/blocks/marketing/hero-section.tsx

@@ -0,0 +1,192 @@
+'use client'
+
+import { cn } from '@hanzo/ui/util'
+import { Button } from '@hanzo/ui/primitives'
+
+interface HeroSectionProps extends React.ComponentPropsWithoutRef<'section'> {
+  title: string
+  subtitle?: string
+  description?: string
+  primaryAction?: {
+    label: string
+    onClick: () => void
+  }
+  secondaryAction?: {
+    label: string
+    onClick: () => void
+  }
+  backgroundImage?: string
+  variant?: 'default' | 'centered' | 'split'
+}
+
+export function HeroSection({
+  className,
+  title,
+  subtitle,
+  description,
+  primaryAction,
+  secondaryAction,
+  backgroundImage,
+  variant = 'default',
+  ...props
+}: HeroSectionProps) {
+  if (variant === 'centered') {
+    return (
+      <section
+        className={cn('relative py-24 sm:py-32', className)}
+        style={{
+          backgroundImage: backgroundImage ? `url(${backgroundImage})` : undefined,
+        }}
+        {...props}
+      >
+        {backgroundImage && (
+          <div className="absolute inset-0 bg-gradient-to-t from-background/90 to-background/20" />
+        )}
+        <div className="container relative">
+          <div className="mx-auto max-w-3xl text-center">
+            {subtitle && (
+              <p className="mb-4 text-sm font-semibold uppercase tracking-wide text-primary">
+                {subtitle}
+              </p>
+            )}
+            <h1 className="text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">
+              {title}
+            </h1>
+            {description && (
+              <p className="mt-6 text-lg text-muted-foreground">
+                {description}
+              </p>
+            )}
+            {(primaryAction || secondaryAction) && (
+              <div className="mt-10 flex flex-col gap-4 sm:flex-row sm:justify-center">
+                {primaryAction && (
+                  <Button
+                    size="lg"
+                    onClick={primaryAction.onClick}
+                    className="w-full sm:w-auto"
+                  >
+                    {primaryAction.label}
+                  </Button>
+                )}
+                {secondaryAction && (
+                  <Button
+                    size="lg"
+                    variant="outline"
+                    onClick={secondaryAction.onClick}
+                    className="w-full sm:w-auto"
+                  >
+                    {secondaryAction.label}
+                  </Button>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      </section>
+    )
+  }
+
+  if (variant === 'split') {
+    return (
+      <section className={cn('py-24 sm:py-32', className)} {...props}>
+        <div className="container">
+          <div className="grid gap-12 lg:grid-cols-2 lg:gap-8">
+            <div className="flex flex-col justify-center">
+              {subtitle && (
+                <p className="mb-4 text-sm font-semibold uppercase tracking-wide text-primary">
+                  {subtitle}
+                </p>
+              )}
+              <h1 className="text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">
+                {title}
+              </h1>
+              {description && (
+                <p className="mt-6 text-lg text-muted-foreground">
+                  {description}
+                </p>
+              )}
+              {(primaryAction || secondaryAction) && (
+                <div className="mt-10 flex flex-col gap-4 sm:flex-row">
+                  {primaryAction && (
+                    <Button
+                      size="lg"
+                      onClick={primaryAction.onClick}
+                      className="w-full sm:w-auto"
+                    >
+                      {primaryAction.label}
+                    </Button>
+                  )}
+                  {secondaryAction && (
+                    <Button
+                      size="lg"
+                      variant="outline"
+                      onClick={secondaryAction.onClick}
+                      className="w-full sm:w-auto"
+                    >
+                      {secondaryAction.label}
+                    </Button>
+                  )}
+                </div>
+              )}
+            </div>
+            {backgroundImage && (
+              <div className="relative aspect-[4/3] overflow-hidden rounded-lg">
+                <img
+                  src={backgroundImage}
+                  alt=""
+                  className="h-full w-full object-cover"
+                />
+              </div>
+            )}
+          </div>
+        </div>
+      </section>
+    )
+  }
+
+  // Default variant
+  return (
+    <section className={cn('py-24 sm:py-32', className)} {...props}>
+      <div className="container">
+        <div className="max-w-3xl">
+          {subtitle && (
+            <p className="mb-4 text-sm font-semibold uppercase tracking-wide text-primary">
+              {subtitle}
+            </p>
+          )}
+          <h1 className="text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">
+            {title}
+          </h1>
+          {description && (
+            <p className="mt-6 text-lg text-muted-foreground">
+              {description}
+            </p>
+          )}
+          {(primaryAction || secondaryAction) && (
+            <div className="mt-10 flex flex-col gap-4 sm:flex-row">
+              {primaryAction && (
+                <Button
+                  size="lg"
+                  onClick={primaryAction.onClick}
+                  className="w-full sm:w-auto"
+                >
+                  {primaryAction.label}
+                </Button>
+              )}
+              {secondaryAction && (
+                <Button
+                  size="lg"
+                  variant="outline"
+                  onClick={secondaryAction.onClick}
+                  className="w-full sm:w-auto"
+                >
+                  {secondaryAction.label}
+                </Button>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  )
+}

package/blocks/marketing/index.ts

@@ -0,0 +1,6 @@
+export { HeroSection } from './hero-section'
+export { FeaturesGrid } from './features-grid'
+export { PricingTable } from './pricing-table'
+export { Testimonials } from './testimonials'
+export { CTASection } from './cta-section'
+export { FAQ } from './faq'

package/blocks/marketing/pricing-table.tsx

@@ -0,0 +1,121 @@
+'use client'
+
+import { cn } from '@hanzo/ui/util'
+import { Button } from '@hanzo/ui/primitives'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@hanzo/ui/primitives'
+import { Check } from 'lucide-react'
+
+interface PricingPlan {
+  name: string
+  description: string
+  price: string | number
+  currency?: string
+  interval?: string
+  features: string[]
+  highlighted?: boolean
+  badge?: string
+  onSelect?: () => void
+  buttonLabel?: string
+  buttonVariant?: 'default' | 'outline' | 'ghost'
+}
+
+interface PricingTableProps extends React.ComponentPropsWithoutRef<'section'> {
+  title?: string
+  subtitle?: string
+  description?: string
+  plans: PricingPlan[]
+  columns?: 2 | 3 | 4
+}
+
+export function PricingTable({
+  className,
+  title,
+  subtitle,
+  description,
+  plans,
+  columns = 3,
+  ...props
+}: PricingTableProps) {
+  const gridCols = {
+    2: 'md:grid-cols-2',
+    3: 'md:grid-cols-2 lg:grid-cols-3',
+    4: 'md:grid-cols-2 lg:grid-cols-4',
+  }[columns]
+
+  return (
+    <section className={cn('py-24 sm:py-32', className)} {...props}>
+      <div className="container">
+        {(title || subtitle || description) && (
+          <div className="mx-auto max-w-3xl text-center">
+            {subtitle && (
+              <p className="mb-4 text-sm font-semibold uppercase tracking-wide text-primary">
+                {subtitle}
+              </p>
+            )}
+            {title && (
+              <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
+                {title}
+              </h2>
+            )}
+            {description && (
+              <p className="mt-4 text-lg text-muted-foreground">
+                {description}
+              </p>
+            )}
+          </div>
+        )}
+        
+        <div className={cn('mt-16 grid gap-8', gridCols)}>
+          {plans.map((plan, i) => (
+            <Card
+              key={i}
+              className={cn(
+                'relative flex flex-col',
+                plan.highlighted && 'border-primary shadow-lg'
+              )}
+            >
+              {plan.badge && (
+                <div className="absolute -top-3 left-0 right-0 mx-auto w-fit">
+                  <div className="rounded-full bg-primary px-3 py-1 text-xs font-semibold text-primary-foreground">
+                    {plan.badge}
+                  </div>
+                </div>
+              )}
+              <CardHeader className={plan.badge ? 'pt-8' : ''}>
+                <CardTitle className="text-xl">{plan.name}</CardTitle>
+                <CardDescription>{plan.description}</CardDescription>
+              </CardHeader>
+              <CardContent className="flex-1">
+                <div className="mb-6">
+                  <span className="text-4xl font-bold">
+                    {plan.currency || '$'}{plan.price}
+                  </span>
+                  {plan.interval && (
+                    <span className="text-muted-foreground">/{plan.interval}</span>
+                  )}
+                </div>
+                <ul className="space-y-3">
+                  {plan.features.map((feature, j) => (
+                    <li key={j} className="flex items-start gap-2">
+                      <Check className="mt-0.5 h-4 w-4 flex-shrink-0 text-primary" />
+                      <span className="text-sm">{feature}</span>
+                    </li>
+                  ))}
+                </ul>
+              </CardContent>
+              <CardFooter>
+                <Button
+                  className="w-full"
+                  variant={plan.buttonVariant || (plan.highlighted ? 'default' : 'outline')}
+                  onClick={plan.onSelect}
+                >
+                  {plan.buttonLabel || 'Get started'}
+                </Button>
+              </CardFooter>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

package/blocks/marketing/testimonials.tsx

@@ -0,0 +1,196 @@
+'use client'
+
+import { cn } from '@hanzo/ui/util'
+import { Avatar, AvatarFallback, AvatarImage } from '@hanzo/ui/primitives'
+import { Card, CardContent } from '@hanzo/ui/primitives'
+import { Star } from 'lucide-react'
+
+interface Testimonial {
+  content: string
+  author: {
+    name: string
+    title?: string
+    company?: string
+    avatar?: string
+  }
+  rating?: number
+}
+
+interface TestimonialsProps extends React.ComponentPropsWithoutRef<'section'> {
+  title?: string
+  subtitle?: string
+  description?: string
+  testimonials: Testimonial[]
+  columns?: 1 | 2 | 3
+  variant?: 'default' | 'cards' | 'minimal'
+}
+
+export function Testimonials({
+  className,
+  title,
+  subtitle,
+  description,
+  testimonials,
+  columns = 3,
+  variant = 'default',
+  ...props
+}: TestimonialsProps) {
+  const gridCols = {
+    1: '',
+    2: 'md:grid-cols-2',
+    3: 'md:grid-cols-2 lg:grid-cols-3',
+  }[columns]
+
+  return (
+    <section className={cn('py-24 sm:py-32', className)} {...props}>
+      <div className="container">
+        {(title || subtitle || description) && (
+          <div className="mx-auto max-w-3xl text-center">
+            {subtitle && (
+              <p className="mb-4 text-sm font-semibold uppercase tracking-wide text-primary">
+                {subtitle}
+              </p>
+            )}
+            {title && (
+              <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
+                {title}
+              </h2>
+            )}
+            {description && (
+              <p className="mt-4 text-lg text-muted-foreground">
+                {description}
+              </p>
+            )}
+          </div>
+        )}
+
+        {variant === 'cards' && (
+          <div className={cn('mt-16 grid gap-6', gridCols)}>
+            {testimonials.map((testimonial, i) => (
+              <Card key={i}>
+                <CardContent className="pt-6">
+                  {testimonial.rating && (
+                    <div className="mb-4 flex gap-1">
+                      {Array.from({ length: 5 }).map((_, j) => (
+                        <Star
+                          key={j}
+                          className={cn(
+                            'h-4 w-4',
+                            j < testimonial.rating
+                              ? 'fill-primary text-primary'
+                              : 'text-muted-foreground'
+                          )}
+                        />
+                      ))}
+                    </div>
+                  )}
+                  <blockquote className="text-lg">
+                    &ldquo;{testimonial.content}&rdquo;
+                  </blockquote>
+                  <div className="mt-6 flex items-center gap-4">
+                    <Avatar>
+                      <AvatarImage src={testimonial.author.avatar} />
+                      <AvatarFallback>
+                        {testimonial.author.name.split(' ').map(n => n[0]).join('')}
+                      </AvatarFallback>
+                    </Avatar>
+                    <div>
+                      <div className="font-semibold">{testimonial.author.name}</div>
+                      {(testimonial.author.title || testimonial.author.company) && (
+                        <div className="text-sm text-muted-foreground">
+                          {testimonial.author.title}
+                          {testimonial.author.title && testimonial.author.company && ', '}
+                          {testimonial.author.company}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        )}
+
+        {variant === 'minimal' && (
+          <div className={cn('mt-16 space-y-12', columns > 1 && 'md:space-y-0 md:grid md:gap-8', gridCols)}>
+            {testimonials.map((testimonial, i) => (
+              <div key={i} className="mx-auto max-w-2xl">
+                {testimonial.rating && (
+                  <div className="mb-4 flex gap-1">
+                    {Array.from({ length: 5 }).map((_, j) => (
+                      <Star
+                        key={j}
+                        className={cn(
+                          'h-4 w-4',
+                          j < testimonial.rating
+                            ? 'fill-primary text-primary'
+                            : 'text-muted-foreground'
+                        )}
+                      />
+                    ))}
+                  </div>
+                )}
+                <blockquote className="text-lg text-muted-foreground">
+                  &ldquo;{testimonial.content}&rdquo;
+                </blockquote>
+                <div className="mt-4">
+                  <div className="font-semibold">{testimonial.author.name}</div>
+                  {(testimonial.author.title || testimonial.author.company) && (
+                    <div className="text-sm text-muted-foreground">
+                      {testimonial.author.title}
+                      {testimonial.author.title && testimonial.author.company && ', '}
+                      {testimonial.author.company}
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {variant === 'default' && (
+          <div className={cn('mt-16 grid gap-8', gridCols)}>
+            {testimonials.map((testimonial, i) => (
+              <div key={i} className="text-center">
+                <div className="mx-auto mb-4 h-16 w-16">
+                  <Avatar className="h-full w-full">
+                    <AvatarImage src={testimonial.author.avatar} />
+                    <AvatarFallback className="text-lg">
+                      {testimonial.author.name.split(' ').map(n => n[0]).join('')}
+                    </AvatarFallback>
+                  </Avatar>
+                </div>
+                {testimonial.rating && (
+                  <div className="mb-4 flex justify-center gap-1">
+                    {Array.from({ length: 5 }).map((_, j) => (
+                      <Star
+                        key={j}
+                        className={cn(
+                          'h-4 w-4',
+                          j < testimonial.rating
+                            ? 'fill-primary text-primary'
+                            : 'text-muted-foreground'
+                        )}
+                      />
+                    ))}
+                  </div>
+                )}
+                <blockquote className="mb-4 text-lg">
+                  &ldquo;{testimonial.content}&rdquo;
+                </blockquote>
+                <div className="font-semibold">{testimonial.author.name}</div>
+                {(testimonial.author.title || testimonial.author.company) && (
+                  <div className="text-sm text-muted-foreground">
+                    {testimonial.author.title}
+                    {testimonial.author.title && testimonial.author.company && ', '}
+                    {testimonial.author.company}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}

package/components/index.ts

@@ -0,0 +1,9 @@
+// Component exports
+// This file provides a central import point for all UI components
+// Usage: import { Button, Card, cn } from '@hanzo/ui/components'
+
+// Export commonly used utilities
+export { cn, formatDate, absoluteUrl } from '../src/utils'
+
+// Re-export all primitives as components for backward compatibility
+export * from '../primitives/index-next'