@djangocfg/ui-nextjs 2.1.43 → 2.1.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-nextjs",
-  "version": "2.1.43",
+  "version": "2.1.44",
   "description": "Next.js UI component library with Radix UI primitives, Tailwind CSS styling, charts, and form components",
   "keywords": [
     "ui-components",
@@ -58,8 +58,8 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.43",
-    "@djangocfg/ui-core": "^2.1.43",
+    "@djangocfg/api": "^2.1.44",
+    "@djangocfg/ui-core": "^2.1.44",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
     "consola": "^3.4.2",
@@ -106,7 +106,7 @@
     "vidstack": "next"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.43",
+    "@djangocfg/typescript-config": "^2.1.44",
     "@types/node": "^24.7.2",
     "eslint": "^9.37.0",
     "tailwindcss-animate": "1.0.7",

package/src/blocks/SplitHero/SplitHero.tsx

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

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

@@ -0,0 +1,66 @@
+'use client';
+
+import React from 'react';
+import Image from 'next/image';
+import { cn } from '@djangocfg/ui-core/lib';
+import { VideoPlayer } from '../../tools/VideoPlayer';
+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={{
+              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

@@ -0,0 +1,13 @@
+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';

package/src/blocks/SplitHero/types.ts

@@ -0,0 +1,75 @@
+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/index.ts

@@ -4,6 +4,7 @@ export * from './CTASection';
 export * from './FeatureSection';
 export * from './Hero';
 export * from './NewsletterSection';
+export * from './SplitHero';
 export * from './StatsSection';
 export * from './SuperHero';
 export * from './TestimonialSection';