@djangocfg/ui-nextjs 1.4.45

package/src/blocks/StatsSection.tsx

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

@@ -0,0 +1,328 @@
+"use client"
+
+import { ArrowRight, Sparkles, Wand2, Copy, Check } from 'lucide-react';
+import React from 'react';
+
+import { cn } from '@djangocfg/ui-core/lib';
+import { Button, ButtonLink, Sticky, Tooltip, TooltipTrigger, TooltipContent } from '@djangocfg/ui-core/components';
+import { useCopy } from '@djangocfg/ui-core/hooks';
+import { AnimatedBackground, type 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;
+  codeCommand?: 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,
+  className
+}) => {
+  const [currentVariant, setCurrentVariant] = React.useState<BackgroundVariant>(backgroundVariant);
+  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
+  const [heroTheme, setHeroTheme] = React.useState<'light' | 'dark'>('dark');
+  const { copyToClipboard } = useCopy();
+  
+  // Show background switcher in development mode or if explicitly enabled
+  const isDevelopment = process.env.NODE_ENV === 'development';
+  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">
+            {title.split('\n').map((line, index) => (
+              <React.Fragment key={index}>
+                {line}
+                {index < title.split('\n').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 Command */}
+          {codeCommand && (
+            <div className="flex justify-center mb-8">
+              <div 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 cursor-pointer"
+                   onClick={() => copyToClipboard(codeCommand, 'Command copied!')}>
+                <code className="font-mono text-lg text-primary font-semibold">
+                  {codeCommand}
+                </code>
+                <div className="p-1.5 rounded-md bg-primary/10 text-primary group-hover:bg-primary group-hover:text-primary-foreground transition-colors">
+                  <Copy className="w-4 h-4" />
+                </div>
+              </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

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

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