@hanzo/ui 4.6.0 → 4.8.2

package/blocks/marketing/cta-section.tsx

@@ -0,0 +1,207 @@
+'use client'
+
+import { cn } from '@hanzo/ui/util'
+import { Button } from '@hanzo/ui/primitives'
+
+interface CTASectionProps extends React.ComponentPropsWithoutRef<'section'> {
+  title: string
+  description?: string
+  primaryAction?: {
+    label: string
+    onClick: () => void
+  }
+  secondaryAction?: {
+    label: string
+    onClick: () => void
+  }
+  variant?: 'default' | 'centered' | 'card' | 'gradient'
+}
+
+export function CTASection({
+  className,
+  title,
+  description,
+  primaryAction,
+  secondaryAction,
+  variant = 'default',
+  ...props
+}: CTASectionProps) {
+  if (variant === 'card') {
+    return (
+      <section className={cn('py-24 sm:py-32', className)} {...props}>
+        <div className="container">
+          <div className="rounded-2xl bg-muted px-6 py-16 sm:px-12 sm:py-20">
+            <div className="mx-auto max-w-3xl text-center">
+              <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>
+              )}
+              {(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>
+        </div>
+      </section>
+    )
+  }
+
+  if (variant === 'gradient') {
+    return (
+      <section
+        className={cn(
+          'relative overflow-hidden bg-gradient-to-br from-primary/90 to-primary py-24 sm:py-32',
+          className
+        )}
+        {...props}
+      >
+        <div className="absolute inset-0 bg-grid-white/10" />
+        <div className="container relative">
+          <div className="mx-auto max-w-3xl text-center">
+            <h2 className="text-3xl font-bold tracking-tight text-primary-foreground sm:text-4xl">
+              {title}
+            </h2>
+            {description && (
+              <p className="mt-4 text-lg text-primary-foreground/90">
+                {description}
+              </p>
+            )}
+            {(primaryAction || secondaryAction) && (
+              <div className="mt-10 flex flex-col gap-4 sm:flex-row sm:justify-center">
+                {primaryAction && (
+                  <Button
+                    size="lg"
+                    variant="secondary"
+                    onClick={primaryAction.onClick}
+                    className="w-full sm:w-auto"
+                  >
+                    {primaryAction.label}
+                  </Button>
+                )}
+                {secondaryAction && (
+                  <Button
+                    size="lg"
+                    variant="outline"
+                    className="w-full border-primary-foreground/20 text-primary-foreground hover:bg-primary-foreground/10 sm:w-auto"
+                    onClick={secondaryAction.onClick}
+                  >
+                    {secondaryAction.label}
+                  </Button>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      </section>
+    )
+  }
+
+  if (variant === 'centered') {
+    return (
+      <section className={cn('py-24 sm:py-32', className)} {...props}>
+        <div className="container">
+          <div className="mx-auto max-w-3xl text-center">
+            <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>
+            )}
+            {(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>
+    )
+  }
+
+  // Default variant
+  return (
+    <section className={cn('py-24 sm:py-32', className)} {...props}>
+      <div className="container">
+        <div className="flex flex-col items-center justify-between gap-8 sm:flex-row sm:gap-12">
+          <div className="max-w-xl">
+            <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>
+          {(primaryAction || secondaryAction) && (
+            <div className="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/faq.tsx

@@ -0,0 +1,159 @@
+'use client'
+
+import { cn } from '@hanzo/ui/util'
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@hanzo/ui/primitives'
+
+interface FAQItem {
+  question: string
+  answer: string
+}
+
+interface FAQProps extends React.ComponentPropsWithoutRef<'section'> {
+  title?: string
+  subtitle?: string
+  description?: string
+  items: FAQItem[]
+  variant?: 'default' | 'centered' | 'split'
+}
+
+export function FAQ({
+  className,
+  title,
+  subtitle,
+  description,
+  items,
+  variant = 'default',
+  ...props
+}: FAQProps) {
+  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-5">
+            <div className="lg:col-span-2">
+              {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="lg:col-span-3">
+              <Accordion type="single" collapsible className="w-full">
+                {items.map((item, i) => (
+                  <AccordionItem key={i} value={`item-${i}`}>
+                    <AccordionTrigger className="text-left">
+                      {item.question}
+                    </AccordionTrigger>
+                    <AccordionContent>{item.answer}</AccordionContent>
+                  </AccordionItem>
+                ))}
+              </Accordion>
+            </div>
+          </div>
+        </div>
+      </section>
+    )
+  }
+
+  if (variant === 'centered') {
+    return (
+      <section className={cn('py-24 sm:py-32', className)} {...props}>
+        <div className="container">
+          <div className="mx-auto max-w-3xl">
+            {(title || subtitle || description) && (
+              <div className="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>
+            )}
+            <Accordion 
+              type="single" 
+              collapsible 
+              className={cn('w-full', (title || subtitle || description) && 'mt-12')}
+            >
+              {items.map((item, i) => (
+                <AccordionItem key={i} value={`item-${i}`}>
+                  <AccordionTrigger className="text-left">
+                    {item.question}
+                  </AccordionTrigger>
+                  <AccordionContent>{item.answer}</AccordionContent>
+                </AccordionItem>
+              ))}
+            </Accordion>
+          </div>
+        </div>
+      </section>
+    )
+  }
+
+  // Default variant
+  return (
+    <section className={cn('py-24 sm:py-32', className)} {...props}>
+      <div className="container">
+        <div className="mx-auto max-w-4xl">
+          {(title || subtitle || description) && (
+            <div>
+              {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>
+          )}
+          <Accordion 
+            type="single" 
+            collapsible 
+            className={cn('w-full', (title || subtitle || description) && 'mt-12')}
+          >
+            {items.map((item, i) => (
+              <AccordionItem key={i} value={`item-${i}`}>
+                <AccordionTrigger className="text-left">
+                  {item.question}
+                </AccordionTrigger>
+                <AccordionContent>{item.answer}</AccordionContent>
+              </AccordionItem>
+            ))}
+          </Accordion>
+        </div>
+      </div>
+    </section>
+  )
+}

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>
+  )
+}