96 lines
3.7 KiB
TypeScript
96 lines
3.7 KiB
TypeScript
import React from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
import { ArrowRight } from 'lucide-react';
|
|
|
|
interface Section {
|
|
id: string;
|
|
type: string;
|
|
layoutVariant?: string;
|
|
colorScheme?: string;
|
|
props: Record<string, { type: 'static' | 'dynamic'; value?: string; source?: string }>;
|
|
elementStyles?: Record<string, any>;
|
|
}
|
|
|
|
interface CTABannerRendererProps {
|
|
section: Section;
|
|
className?: string;
|
|
}
|
|
|
|
const COLOR_SCHEMES: Record<string, { bg: string; text: string; btnBg: string; btnText: string }> = {
|
|
default: { bg: '', text: 'text-gray-900', btnBg: 'bg-blue-600', btnText: 'text-white' },
|
|
primary: { bg: 'bg-blue-600', text: 'text-white', btnBg: 'bg-white', btnText: 'text-blue-600' },
|
|
secondary: { bg: 'bg-gray-800', text: 'text-white', btnBg: 'bg-white', btnText: 'text-gray-800' },
|
|
muted: { bg: 'bg-gray-50', text: 'text-gray-700', btnBg: 'bg-gray-800', btnText: 'text-white' },
|
|
gradient: { bg: 'bg-gradient-to-r from-purple-600 to-blue-500', text: 'text-white', btnBg: 'bg-white', btnText: 'text-purple-600' },
|
|
};
|
|
|
|
export function CTABannerRenderer({ section, className }: CTABannerRendererProps) {
|
|
const scheme = COLOR_SCHEMES[section.colorScheme || 'primary'];
|
|
|
|
const title = section.props?.title?.value || 'Ready to get started?';
|
|
const text = section.props?.text?.value || 'Join thousands of happy customers today.';
|
|
const buttonText = section.props?.button_text?.value || 'Get Started';
|
|
const buttonUrl = section.props?.button_url?.value || '#';
|
|
|
|
// Helper to get text styles (including font family)
|
|
const getTextStyles = (elementName: string) => {
|
|
const styles = section.elementStyles?.[elementName] || {};
|
|
return {
|
|
classNames: cn(
|
|
styles.fontSize,
|
|
styles.fontWeight,
|
|
{
|
|
'font-sans': styles.fontFamily === 'secondary',
|
|
'font-serif': styles.fontFamily === 'primary',
|
|
}
|
|
),
|
|
style: {
|
|
color: styles.color,
|
|
textAlign: styles.textAlign,
|
|
backgroundColor: styles.backgroundColor
|
|
}
|
|
};
|
|
};
|
|
|
|
const titleStyle = getTextStyles('title');
|
|
const textStyle = getTextStyles('text');
|
|
const btnStyle = getTextStyles('button_text');
|
|
|
|
return (
|
|
<div className={cn('py-12 px-4 md:py-20 md:px-8', scheme.bg, scheme.text, className)}>
|
|
<div className="max-w-4xl mx-auto text-center space-y-6">
|
|
<h2
|
|
className={cn(
|
|
!titleStyle.classNames && "text-3xl md:text-4xl font-bold",
|
|
titleStyle.classNames
|
|
)}
|
|
style={titleStyle.style}
|
|
>
|
|
{title}
|
|
</h2>
|
|
<p
|
|
className={cn(
|
|
"max-w-2xl mx-auto",
|
|
!textStyle.classNames && "text-lg opacity-90",
|
|
textStyle.classNames
|
|
)}
|
|
style={textStyle.style}
|
|
>
|
|
{text}
|
|
</p>
|
|
<button className={cn(
|
|
'inline-flex items-center gap-2 px-8 py-4 rounded-lg font-semibold transition hover:opacity-90',
|
|
!btnStyle.style?.backgroundColor && scheme.btnBg,
|
|
!btnStyle.style?.color && scheme.btnText,
|
|
btnStyle.classNames
|
|
)}
|
|
style={btnStyle.style}
|
|
>
|
|
{buttonText}
|
|
<ArrowRight className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|