@djangocfg/ui-nextjs 2.1.320 → 2.1.322

package/src/blocks/SplitHero/types.ts

@@ -1,75 +0,0 @@
-import type { ReactNode } from 'react';
-
-export interface SplitHeroBadge {
-  icon?: ReactNode;
-  text: string;
-}
-
-export interface SplitHeroAction {
-  label: string;
-  href?: string;
-  onClick?: () => void;
-  icon?: ReactNode;
-  variant?: 'default' | 'outline' | 'ghost' | 'secondary';
-}
-
-export interface SplitHeroFeature {
-  icon?: ReactNode;
-  text: string;
-}
-
-/** Image media type */
-export interface SplitHeroMediaImage {
-  type: 'image';
-  src: string;
-  alt?: string;
-}
-
-/** Video media type - uses VideoPlayer */
-export interface SplitHeroMediaVideo {
-  type: 'video';
-  url: string;
-  title?: string;
-  poster?: string;
-  autoplay?: boolean;
-  muted?: boolean;
-}
-
-/** Custom component media type */
-export interface SplitHeroMediaCustom {
-  type: 'custom';
-  content: ReactNode;
-}
-
-export type SplitHeroMedia = SplitHeroMediaImage | SplitHeroMediaVideo | SplitHeroMediaCustom;
-
-export interface SplitHeroProps {
-  /** Badge above title */
-  badge?: SplitHeroBadge;
-  /** Main title */
-  title: string;
-  /** Gradient part of title (optional) */
-  titleGradient?: string;
-  /** Subtitle text */
-  subtitle?: string;
-  /** Feature list */
-  features?: SplitHeroFeature[];
-  /** Primary CTA button */
-  primaryAction?: SplitHeroAction;
-  /** Secondary CTA button */
-  secondaryAction?: SplitHeroAction;
-  /** Media content - image, video, or custom component */
-  media?: SplitHeroMedia;
-  /** Layout direction */
-  layout?: 'text-left' | 'text-right';
-  /** Mobile stack order */
-  mobileOrder?: 'media-first' | 'text-first';
-  /** Content vertical alignment */
-  align?: 'top' | 'center' | 'bottom';
-  /** Container max width */
-  maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
-  /** Background style */
-  background?: 'none' | 'muted' | 'gradient';
-  /** Custom className */
-  className?: string;
-}

package/src/blocks/StatsSection.tsx

@@ -1,103 +0,0 @@
-import React from 'react';
-
-import { Card, CardContent } from '@djangocfg/ui-core/components';
-import { cn } from '@djangocfg/ui-core/lib';
-
-interface Stat {
-  number: string;
-  label: string;
-  description?: string;
-  icon?: React.ReactNode;
-}
-
-interface StatsSectionProps {
-  title: string;
-  subtitle?: string;
-  stats: Stat[];
-  columns?: 2 | 3 | 4;
-  className?: string;
-  background?: 'dark' | 'card' | 'gradient';
-}
-
-export const StatsSection: React.FC<StatsSectionProps> = ({
-  title,
-  subtitle,
-  stats,
-  columns = 4,
-  className,
-  background = 'dark'
-}) => {
-  const getGridClasses = () => {
-    switch (columns) {
-      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-2 sm:grid-cols-2 lg:grid-cols-4';
-      default:
-        return 'grid-cols-2 sm:grid-cols-2 lg:grid-cols-4';
-    }
-  };
-
-  const getBackgroundClasses = () => {
-    switch (background) {
-      case 'dark':
-        return 'bg-background';
-      case 'card':
-        return 'gradient-card';
-      case 'gradient':
-        return 'gradient-subtle';
-      default:
-        return 'bg-background';
-    }
-  };
-
-  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">
-        <div className="text-center mb-12 sm:mb-16 animate-fade-in">
-          <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())}>
-          {stats.map((stat, index) => (
-            <Card 
-              key={index} 
-              className="text-center hover:shadow-large transition-all duration-300 animate-scale-in backdrop-blur-sm border-border/50 hover:border-primary/30 group"
-              style={{ animationDelay: `${index * 0.1}s` }}
-            >
-              <CardContent className="p-6 sm:p-8">
-                {stat.icon && (
-                  <div className="w-12 h-12 sm:w-16 sm:h-16 bg-primary/10 text-primary rounded-lg flex items-center justify-center mx-auto mb-4 sm:mb-6 group-hover:scale-110 group-hover:bg-primary/20 transition-all duration-300">
-                    <div className="text-xl sm:text-2xl">
-                      {stat.icon}
-                    </div>
-                  </div>
-                )}
-                <div className="text-3xl sm:text-4xl lg:text-5xl font-bold text-foreground mb-2 sm:mb-3 group-hover:text-primary transition-colors duration-300">
-                  {stat.number}
-                </div>
-                <div className="text-sm sm:text-base text-muted-foreground font-medium">
-                  {stat.label}
-                </div>
-                {stat.description && (
-                  <p className="text-xs sm:text-sm text-muted-foreground mt-2">
-                    {stat.description}
-                  </p>
-                )}
-              </CardContent>
-            </Card>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}; 

package/src/blocks/SuperHero.tsx

@@ -1,352 +0,0 @@
-"use client"
-
-import { isDev as isDevelopment } from "@djangocfg/ui-core/lib";
-import { ArrowRight, Sparkles, Wand2 } from 'lucide-react';
-import React from 'react';
-
-import {
-    Button, ButtonLink, CopyButton, Sticky, Tooltip, TooltipContent, TooltipTrigger
-} from '@djangocfg/ui-core/components';
-
-import { cn } from '@djangocfg/ui-core/lib';
-
-import { AnimatedBackground, BackgroundVariant} from '../animations';
-import { ForceTheme } from '../theme';
-
-interface HeroFeature {
-  icon: React.ReactNode;
-  text: string;
-}
-
-interface StatItem {
-  number: string;
-  label: string;
-  icon?: React.ReactNode;
-}
-
-interface SuperHeroProps {
-  badge?: {
-    icon?: React.ReactNode;
-    text: string;
-  };
-  title: string;
-  titleGradient?: string;
-  subtitle: string;
-  features?: HeroFeature[];
-  primaryAction?: {
-    label: string;
-    href?: string;
-    onClick?: () => void;
-  };
-  secondaryAction?: {
-    label: string;
-    href?: string;
-    onClick?: () => void;
-    icon?: React.ReactNode;
-  };
-  stats?: StatItem[];
-  floatingElements?: React.ReactNode;
-  backgroundVariant?: BackgroundVariant;
-  backgroundIntensity?: 'subtle' | 'medium' | 'strong';
-  showBackgroundSwitcher?: boolean;
-  /** Single command (for backwards compatibility) */
-  codeCommand?: string;
-  /** Array of commands to display with copy buttons */
-  codeCommands?: string[];
-  className?: string;
-}
-
-const BACKGROUND_VARIANTS: BackgroundVariant[] = [
-  'aurora-borealis',
-  'mesh-gradient',
-  'floating-orbs',
-  'geometric-flow',
-  'liquid-gradient',
-  'spotlight',
-  'none'
-];
-
-const VARIANT_LABELS: Partial<Record<BackgroundVariant, string>> = {
-  'aurora-borealis': 'Aurora Borealis',
-  'mesh-gradient': 'Mesh Gradient',
-  'floating-orbs': 'Floating Orbs',
-  'geometric-flow': 'Geometric Flow',
-  'liquid-gradient': 'Liquid Gradient',
-  'spotlight': 'Spotlight',
-  'none': 'None',
-  // Legacy labels for backwards compatibility
-  'gradient-mesh': 'Gradient Mesh',
-  'dot-matrix': 'Dot Matrix',
-  'grid-lines': 'Grid Lines',
-  'aurora': 'Aurora',
-  'particles': 'Particles',
-  'waves': 'Waves',
-};
-
-export const SuperHero: React.FC<SuperHeroProps> = ({
-  badge,
-  title,
-  titleGradient,
-  subtitle,
-  features = [],
-  primaryAction,
-  secondaryAction,
-  stats = [],
-  floatingElements,
-  backgroundVariant = 'mesh-gradient',
-  backgroundIntensity = 'medium',
-  showBackgroundSwitcher = false,
-  codeCommand,
-  codeCommands,
-  className
-}) => {
-  const [currentVariant, setCurrentVariant] = React.useState<BackgroundVariant>(backgroundVariant);
-  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
-  const [heroTheme, _setHeroTheme] = React.useState<'light' | 'dark'>('dark');
-
-  // Merge codeCommand (deprecated) with codeCommands for backwards compatibility
-  const commands = React.useMemo(() => {
-    if (codeCommands && codeCommands.length > 0) return codeCommands;
-    if (codeCommand) return [codeCommand];
-    return [];
-  }, [codeCommand, codeCommands]);
-
-  // Pre-compute title lines to avoid repeated split in JSX
-  const titleLines = React.useMemo(() => title.split('\n'), [title]);
-  
-  // Show background switcher in development mode or if explicitly enabled
-  const shouldShowSwitcher = showBackgroundSwitcher || isDevelopment;
-
-  const cycleBackground = () => {
-    const currentIndex = BACKGROUND_VARIANTS.indexOf(currentVariant);
-    const nextIndex = (currentIndex + 1) % BACKGROUND_VARIANTS.length;
-    setCurrentVariant(BACKGROUND_VARIANTS[nextIndex]!);
-  };
-
-  return (
-    <ForceTheme theme={heroTheme}>
-      <section
-        className={cn(
-          "relative overflow-hidden bg-background text-foreground z-0 isolate",
-          className
-        )}
-      >
-        {/* Animated Background */}
-        <div className="absolute inset-0 -z-10">
-          <AnimatedBackground variant={currentVariant} intensity={backgroundIntensity} />
-        </div>
-
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 sm:py-24 lg:py-32 relative z-10">
-        <div className="text-center">
-          {/* Enhanced Badge */}
-          {badge && (
-            <div className="inline-flex items-center gap-2 px-4 py-2 bg-primary/10 text-primary rounded-full text-sm font-medium mb-6 border border-primary/20 hover:bg-primary/20 transition-all duration-300">
-              {badge.icon || <Sparkles className="w-4 h-4" />}
-              {badge.text}
-            </div>
-          )}
-
-          {/* Enhanced Main Title */}
-          <h1 className="text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-bold text-foreground mb-6 leading-tight">
-            {titleLines.map((line, index) => (
-              <React.Fragment key={index}>
-                {line}
-                {index < titleLines.length - 1 && <br />}
-              </React.Fragment>
-            ))}
-            {titleGradient && (
-              <>
-                <br />
-                <span className="bg-gradient-to-r from-primary via-primary/80 to-secondary bg-clip-text text-transparent animate-pulse">
-                  {titleGradient}
-                </span>
-              </>
-            )}
-          </h1>
-
-          {/* Enhanced Subtitle */}
-          <p className="text-xl sm:text-2xl lg:text-3xl text-muted-foreground mb-8 max-w-4xl mx-auto leading-relaxed">
-            {subtitle}
-          </p>
-
-          {/* Code Commands */}
-          {commands.length > 0 && (
-            <div className="flex flex-col items-center gap-2 mb-8">
-              {commands.map((cmd, index) => (
-                <div
-                  key={index}
-                  className="inline-flex items-center gap-3 px-6 py-3 bg-background/50 backdrop-blur-md border border-primary/20 rounded-xl shadow-lg hover:border-primary/40 transition-colors group"
-                >
-                  <span className="text-muted-foreground font-mono text-sm select-none">$</span>
-                  <code className="font-mono text-lg text-primary font-semibold">
-                    {cmd}
-                  </code>
-                  <CopyButton
-                    value={cmd}
-                    variant="ghost"
-                    className="p-1.5 h-auto rounded-md bg-primary/10 text-primary hover:bg-primary hover:text-primary-foreground transition-colors"
-                    iconClassName="w-4 h-4"
-                  />
-                </div>
-              ))}
-            </div>
-          )}
-
-          {/* Enhanced Features */}
-          {features.length > 0 && (
-            <div className="flex flex-wrap justify-center gap-6 mb-8">
-              {features.map((feature, index) => (
-                <div
-                  key={index}
-                  className="flex items-center gap-2 text-sm text-muted-foreground bg-card/50 px-4 py-2 rounded-full border border-border/50 hover:border-primary/30 hover:bg-card transition-all duration-300"
-                >
-                  {feature.icon}
-                  <span>{feature.text}</span>
-                </div>
-              ))}
-            </div>
-          )}
-
-          {/* Enhanced CTA Buttons */}
-          {(primaryAction || secondaryAction) && (
-            <div className="flex flex-col sm:flex-row gap-4 justify-center mb-12">
-              {primaryAction && (
-                <ButtonLink
-                  href={primaryAction.href || '#'}
-                  onClick={primaryAction.onClick}
-                  size="huge"
-                  className="group"
-                >
-                  {primaryAction.label}
-                  <ArrowRight className="group-hover:translate-x-1 transition-transform duration-300" />
-                </ButtonLink>
-              )}
-              {secondaryAction && (
-                <ButtonLink
-                  href={secondaryAction.href || '#'}
-                  onClick={secondaryAction.onClick}
-                  variant="outline"
-                  size="huge"
-                  className="group"
-                >
-                  {secondaryAction.label}
-                  {secondaryAction.icon && (
-                    <span className="group-hover:rotate-12 transition-transform duration-300">
-                      {secondaryAction.icon}
-                    </span>
-                  )}
-                </ButtonLink>
-              )}
-            </div>
-          )}
-
-          {/* Enhanced Stats Preview */}
-          {stats.length > 0 && (
-            <div className="flex flex-wrap justify-center gap-x-6 gap-y-3 md:gap-x-8 md:gap-y-4 max-w-3xl mx-auto">
-              {stats.map((stat, index) => (
-                <div
-                  key={index}
-                  className="text-center min-w-[80px] md:min-w-[100px] px-4 py-2 md:px-5 md:py-3 rounded-lg border border-foreground/8 bg-background/10 backdrop-blur-sm"
-                >
-                  <div className="text-lg md:text-xl font-bold text-foreground mb-0.5 md:mb-1">
-                    {stat.number}
-                  </div>
-                  <div className="text-[10px] md:text-xs text-foreground/50 uppercase tracking-wide">
-                    {stat.label}
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* Floating Elements */}
-      {floatingElements}
-
-      {/* Sticky Background Switcher Bar */}
-      {shouldShowSwitcher && (
-        <Sticky 
-          bottom 
-          offsetBottom={32}
-          className="w-full flex justify-center pointer-events-none"
-          zIndex={50}
-        >
-          <div className="inline-flex items-center gap-2 px-4 py-2 bg-background/90 backdrop-blur-md border border-border rounded-full shadow-lg pointer-events-auto">
-            {/* Current Background Label */}
-            <span className="text-xs text-muted-foreground font-medium">
-              {VARIANT_LABELS[currentVariant] || currentVariant}
-            </span>
-            
-            {/* Separator */}
-            <div className="w-px h-4 bg-border" />
-            
-            {/* Cycle Background Button */}
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  size="sm"
-                  variant="ghost"
-                  onClick={cycleBackground}
-                  className="h-7 w-7 p-0"
-                >
-                  <Wand2 className="w-3.5 h-3.5" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>
-                <p>Cycle background</p>
-              </TooltipContent>
-            </Tooltip>
-
-            {/* Background Menu */}
-            <div className="relative">
-              {isMenuOpen && (
-                <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 bg-card border border-border rounded-lg shadow-xl p-2 min-w-[180px]">
-                  <div className="text-xs font-semibold text-muted-foreground mb-2 px-2">
-                    Background Style
-                  </div>
-                  <div className="space-y-1">
-                    {BACKGROUND_VARIANTS.map((variant) => (
-                      <button
-                        key={variant}
-                        onClick={() => {
-                          setCurrentVariant(variant);
-                          setIsMenuOpen(false);
-                        }}
-                        className={cn(
-                          "w-full text-left px-3 py-2 rounded-md text-sm transition-colors",
-                          currentVariant === variant
-                            ? "bg-primary text-primary-foreground"
-                            : "hover:bg-accent hover:text-accent-foreground"
-                        )}
-                      >
-                        {VARIANT_LABELS[variant] || variant}
-                      </button>
-                    ))}
-                  </div>
-                </div>
-              )}
-
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    size="sm"
-                    variant="ghost"
-                    onClick={() => setIsMenuOpen(!isMenuOpen)}
-                    className="h-7 w-7 p-0"
-                  >
-                    <Sparkles className="w-3.5 h-3.5" />
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <p>Choose background</p>
-                </TooltipContent>
-              </Tooltip>
-            </div>
-          </div>
-        </Sticky>
-      )}
-    </section>
-    </ForceTheme>
-  );
-}; 

package/src/blocks/TestimonialSection.tsx

@@ -1,122 +0,0 @@
-import React from 'react';
-
-import { Card, CardContent } from '@djangocfg/ui-core/components';
-import { cn } from '@djangocfg/ui-core/lib';
-
-interface Testimonial {
-  content: string;
-  author: {
-    name: string;
-    title?: string;
-    company?: string;
-    avatar?: string;
-  };
-  rating?: number;
-}
-
-interface TestimonialSectionProps {
-  title?: string;
-  subtitle?: string;
-  testimonials: Testimonial[];
-  columns?: 1 | 2 | 3;
-  className?: string;
-  background?: 'dark' | 'card' | 'gradient';
-}
-
-export const TestimonialSection: React.FC<TestimonialSectionProps> = ({
-  title,
-  subtitle,
-  testimonials,
-  columns = 3,
-  className,
-  background = 'dark'
-}) => {
-  // Simple Tailwind 4 classes only - no custom utilities
-  const gridClasses = {
-    1: 'grid-cols-1 max-w-4xl mx-auto',
-    2: 'grid-cols-1 md:grid-cols-2',
-    3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
-  };
-
-  const backgroundClasses = {
-    dark: 'bg-background',
-    card: 'bg-muted/30',
-    gradient: 'bg-gradient-to-b from-background via-muted/10 to-background',
-  };
-
-  const renderStars = (rating: number) => {
-    return Array.from({ length: 5 }, (_, i) => (
-      <span key={i} className={i < rating ? 'text-yellow-400' : 'text-neutral-400'}>
-        ★
-      </span>
-    ));
-  };
-
-  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">
-        {(title || subtitle) && (
-          <div className="text-center mb-12 sm:mb-14 md:mb-16">
-            {title && (
-              <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-foreground mb-4 sm:mb-6">
-                {title}
-              </h2>
-            )}
-            {subtitle && (
-              <p className="text-lg sm:text-xl text-muted-foreground max-w-3xl mx-auto">
-                {subtitle}
-              </p>
-            )}
-          </div>
-        )}
-
-        <div className={cn('grid gap-6 sm:gap-8', gridClasses[columns])}>
-          {testimonials.map((testimonial, 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"
-            >
-              <CardContent className="p-8">
-                {testimonial.rating && (
-                  <div className="flex mb-6 text-lg">
-                    {renderStars(testimonial.rating)}
-                  </div>
-                )}
-                
-                <blockquote className="text-foreground mb-8 italic text-lg leading-relaxed group-hover:text-primary transition-colors duration-300">
-                  "{testimonial.content}"
-                </blockquote>
-                
-                <div className="flex items-center">
-                  {testimonial.author.avatar && (
-                    <img
-                      src={testimonial.author.avatar}
-                      alt={testimonial.author.name}
-                      className="w-14 h-14 rounded-full mr-4 ring-2 ring-primary/20 group-hover:ring-primary/40 transition-all duration-300"
-                    />
-                  )}
-                  
-                  <div>
-                    <div className="font-semibold text-foreground group-hover:text-primary transition-colors duration-300">
-                      {testimonial.author.name}
-                    </div>
-                    {testimonial.author.title && (
-                      <div className="text-sm text-muted-foreground">
-                        {testimonial.author.title}
-                        {testimonial.author.company && ` at ${testimonial.author.company}`}
-                      </div>
-                    )}
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}; 

package/src/blocks/index.ts

@@ -1,10 +0,0 @@
-export * from './ArticleCard';
-export * from './ArticleList';
-export * from './CTASection';
-export * from './FeatureSection';
-export * from './Hero';
-export * from './NewsletterSection';
-export * from './SplitHero';
-export * from './StatsSection';
-export * from './SuperHero';
-export * from './TestimonialSection';