import { forwardRef } from "react";
import {
Smartphone,
Monitor,
Tablet,
CheckCircle,
Star
} from "lucide-react";
import {
Block,
Stack,
Grid,
Group,
Title,
Text,
Badge,
Button,
Card,
Image,
Icon,
Box
} from "@ui8kit/core";
import { skyOSTheme } from "@ui8kit/theme";
const currentTheme = skyOSTheme;
const theme = {
theme: currentTheme,
themeRounded: currentTheme.rounded,
themeButtonSize: currentTheme.buttonSize
}
import {
SplitBlock,
createContentHook,
} from "@ui8kit/core";
// CTA interfaces (reuse from CenteredCTA)
interface CTAButton {
id: string;
text: string;
variant?: "default" | "outline" | "secondary" | "ghost" | "link" | "destructive";
lucideIcon?: any;
href?: string;
}
interface CTAFeature {
id: string;
title: string;
description?: string;
lucideIcon?: any;
}
// Split CTA data interface
export interface SplitCTAData {
badge?: string;
title: string;
description: string;
buttons: CTAButton[];
image?: {
src: string;
alt: string;
};
features?: CTAFeature[];
stats?: {
users: string;
rating: string;
downloads: string;
};
devices?: {
desktop: string;
mobile: string;
tablet: string;
};
backgroundImage?: string;
gradient?: string;
}
interface SplitCTAProps {
content: SplitCTAData;
variant?: "withImage" | "withBackground" | "withStats" | "withDevices" | "withFeatures";
leftMedia?: boolean;
useContainer?: boolean;
py?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
className?: string;
}
// Custom content hooks for different split CTA variants
const splitCTAContentHooks = {
// CTA with image
withImage: createContentHook({
content: (content: SplitCTAData) => (
{content.badge && (
{content.badge}
)}
{content.title}
{content.description}
{content.buttons.map((button) => (
) : undefined}
>
{button.text}
))}
{/* Additional Features */}
{content.features && (
{content.features.slice(0, 3).map((feature) => (
{feature.title}
{feature.description && (
{feature.description}
)}
))}
)}
)
}),
// CTA with background
withBackground: createContentHook({
content: (content: SplitCTAData) => (
{content.badge && (
{content.badge}
)}
{content.title}
{content.description}
{content.buttons.map((button) => (
) : undefined}
className={button.variant === "outline" ? "border-white text-white hover:bg-white hover:text-black" : ""}
>
{button.text}
))}
{/* Trust Indicators */}
{content.stats && (
{content.stats.users}
Users
{content.stats.rating}
Rating
{content.stats.downloads}
Downloads
)}
)
}),
// CTA with stats
withStats: createContentHook({
content: (content: SplitCTAData) => (
{content.badge && (
{content.badge}
)}
{content.title}
{content.description}
{/* Stats Cards */}
{content.stats && (
{content.stats.users}
Active Users
{content.stats.rating}
User Rating
{content.stats.downloads}
Total Downloads
)}
{content.buttons.map((button) => (
) : undefined}
>
{button.text}
))}
)
}),
// CTA with devices
withDevices: createContentHook({
content: (content: SplitCTAData) => (
{content.badge && (
{content.badge}
)}
{content.title}
{content.description}
{/* Device Stats */}
{content.devices && (
{content.devices.desktop}
Desktop Users
{content.devices.mobile}
Mobile Users
{content.devices.tablet}
Tablet Users
)}
{content.buttons.map((button) => (
) : undefined}
>
{button.text}
))}
Available on all devices • Free download • No signup required
)
}),
// CTA with features
withFeatures: createContentHook({
content: (content: SplitCTAData) => (
{content.badge && (
{content.badge}
)}
{content.title}
{content.description}
{/* Features List */}
{content.features && (
{content.features.map((feature) => (
{feature.lucideIcon && (
)}
{feature.title}
{feature.description && (
{feature.description}
)}
))}
)}
{content.buttons.map((button) => (
) : undefined}
>
{button.text}
))}
)
})
};
export const SplitCTA = forwardRef(
({
content,
variant = "withImage",
leftMedia = false,
useContainer = true,
py = "lg",
gap = "xl",
className,
...props
}, ref) => {
// Create media section based on variant and content
const createMediaSection = () => {
if (variant === "withBackground") {
// For background variant, create a gradient background
const backgroundClass = content.backgroundImage
? `bg-[url('${content.backgroundImage}')] bg-cover bg-center`
: content.gradient || "bg-gradient-to-br from-primary to-secondary";
return (
);
}
if (content.image) {
return (
);
}
// Default gradient based on variant
const gradientMap = {
withImage: "from-primary/5 to-secondary/10",
withBackground: "from-primary to-secondary",
withStats: "from-primary/5 to-secondary/10",
withDevices: "from-primary/5 to-secondary/10",
withFeatures: "from-primary/5 to-secondary/10"
};
return (
{/* Decorative Elements */}
);
};
// Choose content hooks based on variant
const contentHooks = splitCTAContentHooks[variant] || splitCTAContentHooks.withImage;
return (
);
}
);
SplitCTA.displayName = "SplitCTA";
// Export template configurations
export const splitCTATemplates = {
withImage: {
id: "splitCTAWithImage",
name: "Split CTA with Image",
description: "Split layout CTA with image and content",
component: SplitCTA,
defaultProps: { variant: "withImage" as const }
},
withBackground: {
id: "splitCTAWithBackground",
name: "Split CTA with Background",
description: "Split layout CTA with background image or gradient",
component: SplitCTA,
defaultProps: { variant: "withBackground" as const }
},
withStats: {
id: "splitCTAWithStats",
name: "Split CTA with Statistics",
description: "Split layout CTA showcasing key statistics",
component: SplitCTA,
defaultProps: { variant: "withStats" as const }
},
withDevices: {
id: "splitCTAWithDevices",
name: "Split CTA with Device Stats",
description: "Split layout CTA highlighting multi-device support",
component: SplitCTA,
defaultProps: { variant: "withDevices" as const }
},
withFeatures: {
id: "splitCTAWithFeatures",
name: "Split CTA with Features",
description: "Split layout CTA highlighting key features",
component: SplitCTA,
defaultProps: { variant: "withFeatures" as const }
}
};