@hanzo/ui 5.0.2 → 5.1.0

package/blocks/marketing/features-grid.tsx

@@ -1,156 +0,0 @@
-'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

@@ -1,192 +0,0 @@
-'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

@@ -1,6 +0,0 @@
-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

@@ -1,121 +0,0 @@
-'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

@@ -1,196 +0,0 @@
-'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

@@ -1,9 +0,0 @@
-// 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'