@djangocfg/ui-nextjs 1.4.45

package/src/blocks/ArticleCard.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { cn } from '@djangocfg/ui-core/lib';
+import { Badge, Card, CardContent, CardDescription, CardHeader, CardTitle, ButtonLink } from '@djangocfg/ui-core/components';
+
+export type ArticleType = 'security' | 'release' | 'announcement' | 'feature';
+
+interface ArticleCardProps {
+  title: string;
+  description?: string;
+  date: string;
+  type: ArticleType;
+  href: string;
+  author?: string;
+  tags?: string[];
+  featured?: boolean;
+  className?: string;
+}
+
+const typeConfig: Record<ArticleType, { label: string; variant: 'default' | 'secondary' | 'destructive' | 'outline'; icon: string }> = {
+  security: { label: 'Security', variant: 'destructive', icon: '🛡️' },
+  release: { label: 'Release', variant: 'default', icon: '📦' },
+  announcement: { label: 'Announcement', variant: 'secondary', icon: '📢' },
+  feature: { label: 'Feature', variant: 'outline', icon: '✨' },
+};
+
+export const ArticleCard: React.FC<ArticleCardProps> = ({
+  title,
+  description,
+  date,
+  type,
+  href,
+  author,
+  tags,
+  featured = false,
+  className,
+}) => {
+  const config = typeConfig[type];
+
+  const formattedDate = new Date(date).toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+
+  return (
+    <Card className={cn(
+      'group relative overflow-hidden transition-all duration-200 hover:shadow-lg',
+      featured && 'border-primary/50 bg-primary/5',
+      className
+    )}>
+      <CardHeader className="pb-3">
+        <div className="flex items-center justify-between gap-2 mb-2">
+          <div className="flex items-center gap-2">
+            <span className="text-lg">{config.icon}</span>
+            <Badge variant={config.variant}>{config.label}</Badge>
+          </div>
+          <time className="text-sm text-muted-foreground">{formattedDate}</time>
+        </div>
+        <CardTitle className="text-xl group-hover:text-primary transition-colors line-clamp-2">
+          <a href={href} className="hover:underline">
+            {title}
+          </a>
+        </CardTitle>
+        {description && (
+          <CardDescription className="line-clamp-2 mt-2">
+            {description}
+          </CardDescription>
+        )}
+      </CardHeader>
+
+      <CardContent className="pt-0">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            {author && (
+              <span className="text-sm text-muted-foreground">by {author}</span>
+            )}
+            {tags && tags.length > 0 && (
+              <div className="flex gap-1">
+                {tags.slice(0, 2).map((tag) => (
+                  <Badge key={tag} variant="outline" className="text-xs">
+                    {tag}
+                  </Badge>
+                ))}
+              </div>
+            )}
+          </div>
+          <ButtonLink href={href} variant="ghost" size="sm">
+            Read more →
+          </ButtonLink>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};

package/src/blocks/ArticleList.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { cn } from '@djangocfg/ui-core/lib';
+import { ArticleCard, ArticleType } from './ArticleCard';
+
+export interface Article {
+  title: string;
+  description?: string;
+  date: string;
+  type: ArticleType;
+  href: string;
+  author?: string;
+  tags?: string[];
+  featured?: boolean;
+}
+
+interface ArticleListProps {
+  articles: Article[];
+  title?: string;
+  description?: string;
+  showFeatured?: boolean;
+  columns?: 1 | 2 | 3;
+  className?: string;
+}
+
+export const ArticleList: React.FC<ArticleListProps> = ({
+  articles,
+  title,
+  description,
+  showFeatured = true,
+  columns = 2,
+  className,
+}) => {
+  // Sort by date, newest first
+  const sortedArticles = [...articles].sort(
+    (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()
+  );
+
+  // Separate featured and regular articles
+  const featuredArticles = showFeatured
+    ? sortedArticles.filter((a) => a.featured)
+    : [];
+  const regularArticles = showFeatured
+    ? sortedArticles.filter((a) => !a.featured)
+    : sortedArticles;
+
+  const gridCols = {
+    1: 'grid-cols-1',
+    2: 'grid-cols-1 md:grid-cols-2',
+    3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+  };
+
+  return (
+    <section className={cn('py-8', className)}>
+      {(title || description) && (
+        <div className="mb-8">
+          {title && (
+            <h2 className="text-3xl font-bold tracking-tight">{title}</h2>
+          )}
+          {description && (
+            <p className="mt-2 text-lg text-muted-foreground">{description}</p>
+          )}
+        </div>
+      )}
+
+      {/* Featured Articles */}
+      {featuredArticles.length > 0 && (
+        <div className="mb-8">
+          <h3 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground mb-4">
+            Featured
+          </h3>
+          <div className="grid gap-4">
+            {featuredArticles.map((article, index) => (
+              <ArticleCard key={index} {...article} featured />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Regular Articles */}
+      {regularArticles.length > 0 && (
+        <div className={cn('grid gap-4', gridCols[columns])}>
+          {regularArticles.map((article, index) => (
+            <ArticleCard key={index} {...article} />
+          ))}
+        </div>
+      )}
+
+      {articles.length === 0 && (
+        <div className="text-center py-12 text-muted-foreground">
+          No articles yet. Check back soon!
+        </div>
+      )}
+    </section>
+  );
+};

package/src/blocks/CTASection.tsx

@@ -0,0 +1,136 @@
+"use client"
+
+import Link from 'next/link';
+import React from 'react';
+
+import { Button } from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
+
+interface CTAButton {
+  label: string;
+  href?: string;
+  onClick?: () => void;
+  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
+  size?: 'default' | 'sm' | 'lg' | 'icon';
+}
+
+interface CTASectionProps {
+  title: string;
+  subtitle?: string;
+  primaryCTA?: CTAButton;
+  secondaryCTA?: CTAButton;
+  background?: 'default' | 'muted' | 'primary' | 'gradient';
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const CTASection: React.FC<CTASectionProps> = ({
+  title,
+  subtitle,
+  primaryCTA,
+  secondaryCTA,
+  background = 'default',
+  className,
+  children
+}) => {
+  // Simple Tailwind 4 classes - no custom utilities
+  const backgroundClasses = {
+    default: 'bg-background',
+    muted: 'bg-muted/30',
+    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
+      )}
+    >
+      {/* Simple decorative background - using only Tailwind classes */}
+      {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-4xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="text-center space-y-6 sm:space-y-8">
+          {/* Title */}
+          <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight">
+            {title}
+          </h2>
+
+          {/* Subtitle */}
+          {subtitle && (
+            <p className="text-base sm:text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto leading-relaxed">
+              {subtitle}
+            </p>
+          )}
+
+          {/* CTA Buttons */}
+          {(primaryCTA || secondaryCTA) && (
+            <div className="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center items-center pt-4">
+              {primaryCTA && (
+                primaryCTA.onClick ? (
+                  <Button
+                    onClick={primaryCTA.onClick}
+                    variant={primaryCTA.variant || 'default'}
+                    size={primaryCTA.size || 'lg'}
+                    className="w-full sm:w-auto"
+                  >
+                    {primaryCTA.label}
+                  </Button>
+                ) : (
+                  <Button
+                    asChild
+                    variant={primaryCTA.variant || 'default'}
+                    size={primaryCTA.size || 'lg'}
+                    className="w-full sm:w-auto"
+                  >
+                    <Link href={primaryCTA.href || '#'}>
+                      {primaryCTA.label}
+                    </Link>
+                  </Button>
+                )
+              )}
+
+              {secondaryCTA && (
+                secondaryCTA.onClick ? (
+                  <Button
+                    onClick={secondaryCTA.onClick}
+                    variant={secondaryCTA.variant || 'outline'}
+                    size={secondaryCTA.size || 'lg'}
+                    className="w-full sm:w-auto"
+                  >
+                    {secondaryCTA.label}
+                  </Button>
+                ) : (
+                  <Button
+                    asChild
+                    variant={secondaryCTA.variant || 'outline'}
+                    size={secondaryCTA.size || 'lg'}
+                    className="w-full sm:w-auto"
+                  >
+                    <Link href={secondaryCTA.href || '#'}>
+                      {secondaryCTA.label}
+                    </Link>
+                  </Button>
+                )
+              )}
+            </div>
+          )}
+
+          {/* Optional children content */}
+          {children && (
+            <div className="pt-8 sm:pt-12">
+              {children}
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+};

package/src/blocks/FeatureSection.tsx

@@ -0,0 +1,104 @@
+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;
+  className?: string;
+  background?: 'dark' | 'card' | 'gradient';
+}
+
+export const FeatureSection: React.FC<FeatureSectionProps> = ({
+  title,
+  subtitle,
+  features,
+  columns = 3,
+  className,
+  background = 'dark'
+}) => {
+  const getGridClasses = () => {
+    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';
+      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';
+      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">
+          <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

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

@@ -0,0 +1,119 @@
+"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>
+  );
+};