53 lines
1.9 KiB
TypeScript
53 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
import { LucideIcon } from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
interface FeatureBadgeProps {
|
|
icon: LucideIcon;
|
|
title: string;
|
|
subtitle: string;
|
|
}
|
|
|
|
export const FeatureBadge: React.FC<FeatureBadgeProps> = ({
|
|
icon: Icon,
|
|
title,
|
|
subtitle
|
|
}) => (
|
|
<div className="flex items-center p-3 bg-white/80 rounded-xl border border-gray-200 shadow-sm">
|
|
<div className="w-10 h-10 bg-gradient-to-br from-green-500 to-green-600 rounded-lg flex items-center justify-center text-white mr-3">
|
|
<Icon className="w-5 h-5" strokeWidth={2} />
|
|
</div>
|
|
<div>
|
|
<div className="font-semibold text-gray-800 text-sm">{title}</div>
|
|
<div className="text-gray-600 text-xs">{subtitle}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
interface FeatureItemProps {
|
|
feature: string;
|
|
index: number;
|
|
}
|
|
|
|
export const FeatureItem: React.FC<FeatureItemProps> = ({ feature, index }) => (
|
|
<div className="flex items-start bg-blue-50 rounded-xl p-4 border border-blue-200 hover:bg-blue-100 transition-colors duration-200 group">
|
|
<div className="w-6 h-6 bg-gradient-to-br from-blue-600 to-blue-500 rounded-full flex items-center justify-center mr-3 mt-0.5 flex-shrink-0 group-hover:scale-110 transition-transform duration-200">
|
|
<div className="w-2 h-2 bg-white rounded-full"></div>
|
|
</div>
|
|
<span className="text-gray-700 font-medium text-sm lg:text-base leading-relaxed">{feature}</span>
|
|
</div>
|
|
);
|
|
|
|
interface SectionTitleProps {
|
|
icon: LucideIcon;
|
|
title: string;
|
|
}
|
|
|
|
export const SectionTitle: React.FC<SectionTitleProps> = ({ icon: Icon, title }) => (
|
|
<h3 className="text-xl sm:text-2xl lg:text-3xl mb-4 lg:mb-6 text-gray-800 font-heading font-bold flex items-center">
|
|
<div className="w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center text-white mr-3">
|
|
<Icon className="w-5 h-5 sm:w-6 sm:h-6" strokeWidth={2} />
|
|
</div>
|
|
{title}
|
|
</h3>
|
|
); |