@djangocfg/ui-nextjs 2.1.320 → 2.1.321

package/src/blocks/FeatureSection.tsx

@@ -1,176 +0,0 @@
-import React from 'react';
-
-import {
-    Card, CardContent, CardDescription, CardHeader, CardTitle
-} from '@djangocfg/ui-core/components';
-import { cn } from '@djangocfg/ui-core/lib';
-
-interface Feature {
-  icon?: React.ReactNode;
-  title: string;
-  description: string;
-  gradient?: string;
-}
-
-interface FeatureSectionProps {
-  title?: string;
-  subtitle?: string;
-  features: Feature[];
-  columns?: 1 | 2 | 3 | 4 | 6;
-  className?: string;
-  background?: 'dark' | 'card' | 'gradient' | 'none';
-  /** Compact variant: smaller icons, no cards, minimal spacing */
-  variant?: 'default' | 'compact';
-}
-
-export const FeatureSection: React.FC<FeatureSectionProps> = ({
-  title,
-  subtitle,
-  features,
-  columns = 3,
-  className,
-  background = 'dark',
-  variant = 'default'
-}) => {
-  const getGridClasses = () => {
-    if (variant === 'compact') {
-      switch (columns) {
-        case 2:
-          return 'grid-cols-2';
-        case 3:
-          return 'grid-cols-2 md:grid-cols-3';
-        case 4:
-          return 'grid-cols-2 md:grid-cols-4';
-        case 6:
-          return 'grid-cols-2 md:grid-cols-3 lg:grid-cols-6';
-        default:
-          return 'grid-cols-2 md:grid-cols-3';
-      }
-    }
-    switch (columns) {
-      case 1:
-        return 'grid-cols-1 max-w-2xl mx-auto';
-      case 2:
-        return 'grid-cols-1 sm:grid-cols-2';
-      case 3:
-        return 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3';
-      case 4:
-        return 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4';
-      case 6:
-        return 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-6';
-      default:
-        return 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3';
-    }
-  };
-
-  const getBackgroundClasses = () => {
-    switch (background) {
-      case 'dark':
-        return 'bg-muted/30';
-      case 'card':
-        return 'bg-card';
-      case 'gradient':
-        return 'bg-gradient-to-b from-background to-muted/20';
-      case 'none':
-        return '';
-      default:
-        return 'bg-background';
-    }
-  };
-
-  // Compact variant render
-  if (variant === 'compact') {
-    return (
-      <section className={cn('py-12 md:py-16', getBackgroundClasses(), className)}>
-        <div className="container max-w-5xl mx-auto px-4">
-          {(title || subtitle) && (
-            <div className="text-center mb-8">
-              {title && (
-                <h2 className="text-xl sm:text-2xl font-bold text-foreground mb-2">
-                  {title}
-                </h2>
-              )}
-              {subtitle && (
-                <p className="text-sm text-muted-foreground max-w-2xl mx-auto">
-                  {subtitle}
-                </p>
-              )}
-            </div>
-          )}
-          <div className={cn('grid gap-4', getGridClasses())}>
-            {features.map((feature, index) => (
-              <div key={index} className="text-center p-4">
-                {feature.icon && (
-                  <div
-                    className={cn(
-                      'w-10 h-10 mx-auto mb-3 rounded-lg flex items-center justify-center',
-                      feature.gradient || 'bg-primary/10 text-primary'
-                    )}
-                  >
-                    <div className="[&>svg]:w-5 [&>svg]:h-5">
-                      {feature.icon}
-                    </div>
-                  </div>
-                )}
-                <h3 className="font-medium text-sm mb-1">{feature.title}</h3>
-                <p className="text-xs text-muted-foreground">{feature.description}</p>
-              </div>
-            ))}
-          </div>
-        </div>
-      </section>
-    );
-  }
-
-  // Default variant render
-  return (
-    <section className={cn('py-12 sm:py-16 lg:py-24', getBackgroundClasses(), className)}>
-      <div className="w-full px-4 sm:px-6 lg:px-8">
-        {(title || subtitle) && (
-          <div className="text-center mb-12 sm:mb-16">
-            {title && (
-              <h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-foreground mb-4 sm:mb-6">
-                {title}
-              </h2>
-            )}
-            {subtitle && (
-              <p className="text-base sm:text-lg md:text-xl text-muted-foreground max-w-3xl mx-auto px-2">
-                {subtitle}
-              </p>
-            )}
-          </div>
-        )}
-
-        <div className={cn('grid gap-6 sm:gap-8', getGridClasses())}>
-          {features.map((feature, index) => (
-            <Card
-              key={index}
-              className="h-full hover:shadow-lg transition-all duration-300 backdrop-blur-sm border-border/50 hover:border-primary/30 group"
-            >
-              <CardHeader className="pb-4">
-                {feature.icon && (
-                  <div className={cn(
-                    'w-12 h-12 sm:w-16 sm:h-16 rounded-lg flex items-center justify-center mb-4 sm:mb-6 group-hover:scale-110 transition-all duration-300',
-                    feature.gradient || 'bg-primary/10 text-primary group-hover:bg-primary/20'
-                  )}>
-                    <div className="text-xl sm:text-2xl">
-                      {feature.icon}
-                    </div>
-                  </div>
-                )}
-                <CardTitle className="text-lg sm:text-xl text-foreground group-hover:text-primary transition-colors duration-300">
-                  {feature.title}
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                <CardDescription className="text-sm sm:text-base text-muted-foreground leading-relaxed">
-                  {feature.description}
-                </CardDescription>
-              </CardContent>
-            </Card>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}; 

package/src/blocks/Hero.tsx

@@ -1,102 +0,0 @@
-import React from 'react';
-
-import { ButtonLink } from '@djangocfg/ui-core/components';
-import { cn } from '@djangocfg/ui-core/lib';
-
-interface HeroProps {
-  title: string;
-  subtitle?: string;
-  description?: string;
-  primaryAction?: {
-    label: string;
-    href: string;
-    variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
-  };
-  secondaryAction?: {
-    label: string;
-    href: string;
-    variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
-  };
-  background?: 'gradient' | 'solid' | 'image' | 'dark';
-  className?: string;
-  children?: React.ReactNode;
-}
-
-export const Hero: React.FC<HeroProps> = ({
-  title,
-  subtitle,
-  description,
-  primaryAction,
-  secondaryAction,
-  background = 'dark',
-  className,
-  children
-}) => {
-  // Simple Tailwind 4 classes only - no custom utilities
-  const backgroundClasses = {
-    gradient: 'bg-gradient-to-b from-primary/10 to-background',
-    solid: 'bg-primary text-primary-foreground',
-    image: 'bg-cover bg-center bg-no-repeat text-white',
-    dark: 'bg-background text-foreground',
-  };
-
-  return (
-    <section className={cn(
-      'relative py-16 sm:py-20 md:py-24 lg:py-32',
-      backgroundClasses[background],
-      className
-    )}>
-      <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="text-center max-w-4xl mx-auto">
-          {subtitle && (
-            <p className="text-base sm:text-lg md:text-xl mb-4 sm:mb-6 text-muted-foreground font-medium">
-              {subtitle}
-            </p>
-          )}
-
-          <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold mb-6 sm:mb-8 leading-tight">
-            {title}
-          </h1>
-
-          {description && (
-            <p className="text-lg sm:text-xl md:text-2xl mb-8 sm:mb-10 md:mb-12 text-muted-foreground leading-relaxed max-w-3xl mx-auto">
-              {description}
-            </p>
-          )}
-
-          {(primaryAction || secondaryAction) && (
-            <div className="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center">
-              {primaryAction && (
-                <ButtonLink
-                  href={primaryAction.href}
-                  variant={primaryAction.variant || 'default'}
-                  size="huge"
-                  className="w-full sm:w-auto"
-                >
-                  {primaryAction.label}
-                </ButtonLink>
-              )}
-
-              {secondaryAction && (
-                <ButtonLink
-                  href={secondaryAction.href}
-                  variant={secondaryAction.variant || 'outline'}
-                  size="huge"
-                  className="w-full sm:w-auto"
-                >
-                  {secondaryAction.label}
-                </ButtonLink>
-              )}
-            </div>
-          )}
-
-          {children && (
-            <div className="mt-12 sm:mt-14 md:mt-16 flex justify-center">
-              {children}
-            </div>
-          )}
-        </div>
-      </div>
-    </section>
-  );
-}; 

package/src/blocks/NewsletterSection.tsx

@@ -1,119 +0,0 @@
-"use client"
-
-import { Mail } from 'lucide-react';
-import React from 'react';
-
-import { Button, Input } from '@djangocfg/ui-core/components';
-import { cn } from '@djangocfg/ui-core/lib';
-
-interface NewsletterSectionProps {
-  title?: string;
-  description?: string;
-  placeholder?: string;
-  buttonText?: string;
-  disclaimer?: string;
-  background?: 'default' | 'muted' | 'primary' | 'gradient';
-  className?: string;
-  onSubmit?: (email: string) => void;
-}
-
-/**
- * NewsletterSection - Email subscription block
- * Fully responsive and theme-aware (light/dark mode)
- * Follows Tailwind CSS v4 canons - no custom utilities
- */
-export const NewsletterSection: React.FC<NewsletterSectionProps> = ({
-  title = "Stay Updated with Our Newsletter",
-  description = "Get the latest insights on AI, technology, and software development delivered to your inbox.",
-  placeholder = "Enter your email address",
-  buttonText = "Subscribe",
-  disclaimer = "No spam, unsubscribe at any time",
-  background = 'muted',
-  className,
-  onSubmit
-}) => {
-  const [email, setEmail] = React.useState('');
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (email && onSubmit) {
-      onSubmit(email);
-      setEmail('');
-    }
-  };
-
-  // Simple Tailwind 4 classes only - no custom utilities
-  // All variants work in both light and dark themes
-  const backgroundClasses = {
-    default: 'bg-background',
-    muted: 'bg-muted/50',
-    primary: 'bg-primary/5',
-    gradient: 'bg-gradient-to-b from-background via-primary/5 to-background',
-  };
-
-  return (
-    <section className={cn(
-      'relative py-16 sm:py-20 md:py-24 lg:py-32',
-      backgroundClasses[background],
-      className
-    )}>
-      {/* Decorative background for gradient variant only */}
-      {background === 'gradient' && (
-        <div className="absolute inset-0 -z-10 overflow-hidden pointer-events-none" aria-hidden="true">
-          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-4xl aspect-square bg-primary/10 rounded-full blur-3xl" />
-        </div>
-      )}
-
-      <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="text-center max-w-3xl mx-auto">
-          {/* Title */}
-          <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight mb-4 sm:mb-6">
-            {title}
-          </h2>
-
-          {/* Description */}
-          {description && (
-            <p className="text-base sm:text-lg md:text-xl text-muted-foreground leading-relaxed mb-8 sm:mb-10 md:mb-12">
-              {description}
-            </p>
-          )}
-
-          {/* Form */}
-          <form onSubmit={handleSubmit} className="max-w-md mx-auto">
-            <div className="flex flex-col sm:flex-row gap-3 sm:gap-4">
-              {/* Email Input */}
-              <div className="relative flex-1">
-                <Mail className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
-                <Input
-                  type="email"
-                  placeholder={placeholder}
-                  value={email}
-                  onChange={(e) => setEmail(e.target.value)}
-                  className="pl-10 h-12 w-full"
-                  required
-                  aria-label="Email address"
-                />
-              </div>
-
-              {/* Submit Button */}
-              <Button
-                type="submit"
-                size="lg"
-                className="h-12 w-full sm:w-auto sm:min-w-[120px]"
-              >
-                {buttonText}
-              </Button>
-            </div>
-
-            {/* Disclaimer */}
-            {disclaimer && (
-              <p className="text-xs sm:text-sm text-muted-foreground mt-3 text-center">
-                {disclaimer}
-              </p>
-            )}
-          </form>
-        </div>
-      </div>
-    </section>
-  );
-}; 

package/src/blocks/SplitHero/SplitHero.tsx

@@ -1,95 +0,0 @@
-'use client';
-
-import React from 'react';
-import { cn } from '@djangocfg/ui-core/lib';
-import { SplitHeroContent } from './SplitHeroContent';
-import { SplitHeroMedia } from './SplitHeroMedia';
-import type { SplitHeroProps } from './types';
-
-const MAX_WIDTH_CLASSES = {
-  sm: 'max-w-3xl',
-  md: 'max-w-4xl',
-  lg: 'max-w-5xl',
-  xl: 'max-w-6xl',
-  full: 'max-w-7xl',
-};
-
-const BACKGROUND_CLASSES = {
-  none: '',
-  muted: 'bg-muted/30',
-  gradient: 'bg-gradient-to-br from-primary/5 via-background to-secondary/5',
-};
-
-export const SplitHero: React.FC<SplitHeroProps> = ({
-  badge,
-  title,
-  titleGradient,
-  subtitle,
-  features,
-  primaryAction,
-  secondaryAction,
-  media,
-  layout = 'text-left',
-  mobileOrder = 'text-first',
-  align = 'center',
-  maxWidth = 'xl',
-  background = 'none',
-  className,
-}) => {
-  const isTextLeft = layout === 'text-left';
-  const isMediaFirst = mobileOrder === 'media-first';
-
-  return (
-    <section
-      className={cn(
-        'py-12 md:py-16 lg:py-20',
-        BACKGROUND_CLASSES[background],
-        className
-      )}
-    >
-      <div className={cn('mx-auto px-4', MAX_WIDTH_CLASSES[maxWidth])}>
-        <div
-          className={cn(
-            'grid gap-8 lg:gap-12 items-center',
-            media ? 'lg:grid-cols-2' : 'lg:grid-cols-1 max-w-3xl mx-auto'
-          )}
-        >
-          {/* Content - order changes based on layout and mobile settings */}
-          <div
-            className={cn(
-              // Desktop order based on layout
-              isTextLeft ? 'lg:order-1' : 'lg:order-2',
-              // Mobile order based on mobileOrder
-              isMediaFirst ? 'order-2' : 'order-1'
-            )}
-          >
-            <SplitHeroContent
-              badge={badge}
-              title={title}
-              titleGradient={titleGradient}
-              subtitle={subtitle}
-              features={features}
-              primaryAction={primaryAction}
-              secondaryAction={secondaryAction}
-              align={align}
-            />
-          </div>
-
-          {/* Media */}
-          {media && (
-            <div
-              className={cn(
-                // Desktop order based on layout
-                isTextLeft ? 'lg:order-2' : 'lg:order-1',
-                // Mobile order based on mobileOrder
-                isMediaFirst ? 'order-1' : 'order-2'
-              )}
-            >
-              <SplitHeroMedia media={media} />
-            </div>
-          )}
-        </div>
-      </div>
-    </section>
-  );
-};

package/src/blocks/SplitHero/SplitHeroContent.tsx

@@ -1,117 +0,0 @@
-'use client';
-
-import React from 'react';
-import { ArrowRight, Sparkles } from 'lucide-react';
-import { ButtonLink } from '@djangocfg/ui-core/components';
-import { cn } from '@djangocfg/ui-core/lib';
-import type { SplitHeroBadge, SplitHeroAction, SplitHeroFeature } from './types';
-
-interface SplitHeroContentProps {
-  badge?: SplitHeroBadge;
-  title: string;
-  titleGradient?: string;
-  subtitle?: string;
-  features?: SplitHeroFeature[];
-  primaryAction?: SplitHeroAction;
-  secondaryAction?: SplitHeroAction;
-  align?: 'top' | 'center' | 'bottom';
-  className?: string;
-}
-
-export const SplitHeroContent: React.FC<SplitHeroContentProps> = ({
-  badge,
-  title,
-  titleGradient,
-  subtitle,
-  features = [],
-  primaryAction,
-  secondaryAction,
-  align = 'center',
-  className,
-}) => {
-  const alignClasses = {
-    top: 'justify-start',
-    center: 'justify-center',
-    bottom: 'justify-end',
-  };
-
-  return (
-    <div className={cn('flex flex-col', alignClasses[align], className)}>
-      {/* Badge */}
-      {badge && (
-        <div className="inline-flex items-center gap-2 px-3 py-1.5 bg-primary/10 text-primary rounded-full text-sm font-medium mb-4 w-fit border border-primary/20">
-          {badge.icon || <Sparkles className="w-3.5 h-3.5" />}
-          {badge.text}
-        </div>
-      )}
-
-      {/* Title */}
-      <h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-foreground mb-4 leading-tight">
-        {title}
-        {titleGradient && (
-          <>
-            {' '}
-            <span className="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
-              {titleGradient}
-            </span>
-          </>
-        )}
-      </h1>
-
-      {/* Subtitle */}
-      {subtitle && (
-        <p className="text-lg text-muted-foreground mb-6 leading-relaxed">
-          {subtitle}
-        </p>
-      )}
-
-      {/* Features */}
-      {features.length > 0 && (
-        <div className="flex flex-wrap gap-3 mb-6">
-          {features.map((feature, index) => (
-            <div
-              key={index}
-              className="flex items-center gap-2 text-sm text-muted-foreground"
-            >
-              {feature.icon && (
-                <span className="text-primary">{feature.icon}</span>
-              )}
-              <span>{feature.text}</span>
-            </div>
-          ))}
-        </div>
-      )}
-
-      {/* Actions */}
-      {(primaryAction || secondaryAction) && (
-        <div className="flex flex-wrap gap-3">
-          {primaryAction && (
-            <ButtonLink
-              href={primaryAction.href || '#'}
-              onClick={primaryAction.onClick}
-              variant={primaryAction.variant || 'default'}
-              size="lg"
-              className="group"
-            >
-              {primaryAction.label}
-              {primaryAction.icon || (
-                <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
-              )}
-            </ButtonLink>
-          )}
-          {secondaryAction && (
-            <ButtonLink
-              href={secondaryAction.href || '#'}
-              onClick={secondaryAction.onClick}
-              variant={secondaryAction.variant || 'outline'}
-              size="lg"
-            >
-              {secondaryAction.label}
-              {secondaryAction.icon}
-            </ButtonLink>
-          )}
-        </div>
-      )}
-    </div>
-  );
-};

package/src/blocks/SplitHero/SplitHeroMedia.tsx

@@ -1,67 +0,0 @@
-'use client';
-
-import React from 'react';
-import Image from 'next/image';
-import { cn } from '@djangocfg/ui-core/lib';
-import { VideoPlayer } from '@djangocfg/ui-tools';
-import type { SplitHeroMedia as SplitHeroMediaType } from './types';
-
-interface SplitHeroMediaProps {
-  media: SplitHeroMediaType;
-  className?: string;
-}
-
-export const SplitHeroMedia: React.FC<SplitHeroMediaProps> = ({
-  media,
-  className,
-}) => {
-  const containerClass = cn(
-    'relative w-full rounded-xl overflow-hidden',
-    className
-  );
-
-  switch (media.type) {
-    case 'image':
-      return (
-        <div className={containerClass}>
-          <div className="relative aspect-[4/3] w-full">
-            <Image
-              src={media.src}
-              alt={media.alt || ''}
-              fill
-              className="object-cover"
-              sizes="(max-width: 768px) 100vw, 50vw"
-            />
-          </div>
-        </div>
-      );
-
-    case 'video':
-      return (
-        <div className={containerClass}>
-          <VideoPlayer
-            source={{
-              type: 'url',
-              url: media.url,
-              title: media.title,
-              poster: media.poster,
-            }}
-            theme="modern"
-            aspectRatio={16 / 9}
-            autoPlay={media.autoplay}
-            muted={media.muted ?? media.autoplay}
-          />
-        </div>
-      );
-
-    case 'custom':
-      return (
-        <div className={containerClass}>
-          {media.content}
-        </div>
-      );
-
-    default:
-      return null;
-  }
-};

package/src/blocks/SplitHero/index.ts

@@ -1,13 +0,0 @@
-export { SplitHero } from './SplitHero';
-export { SplitHeroContent } from './SplitHeroContent';
-export { SplitHeroMedia } from './SplitHeroMedia';
-export type {
-  SplitHeroProps,
-  SplitHeroMedia as SplitHeroMediaType,
-  SplitHeroMediaImage,
-  SplitHeroMediaVideo,
-  SplitHeroMediaCustom,
-  SplitHeroBadge,
-  SplitHeroAction,
-  SplitHeroFeature,
-} from './types';