sync: Auto-sync from ACG-M-L5090 at 2026-03-10 19:11:00
Synced files: - Quote wizard frontend (all components, hooks, types, config) - API updates (config, models, routers, schemas, services) - Client work (bg-builders, gurushow) - Scripts (BGB Lesley termination, CIPP, Datto, migration) - Temp files (Bardach contacts, VWP investigation, misc) - Credentials and session logs - Email service, PHP API, session logs Machine: ACG-M-L5090 Timestamp: 2026-03-10 19:11:00 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -21,22 +21,29 @@ export function ExpandableInfo({
|
||||
const [isExpanded, setIsExpanded] = useState(defaultExpanded);
|
||||
|
||||
return (
|
||||
<div className={cn('border border-gray-200 rounded-lg overflow-hidden', className)}>
|
||||
<div className={cn('border border-gray-200/80 rounded-xl overflow-hidden bg-white shadow-card', className)}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
className="w-full flex items-center justify-between p-4 text-left hover:bg-gray-50 transition-colors"
|
||||
className="w-full flex items-center justify-between p-4 text-left hover:bg-[#f8f9fb] transition-colors"
|
||||
aria-expanded={isExpanded}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
{icon || <HelpCircle className="w-5 h-5 text-[#fe7400]" />}
|
||||
<span className="font-medium text-[#333d49]">{title}</span>
|
||||
{icon || (
|
||||
<div className="w-8 h-8 rounded-lg bg-[#fe7400]/8 flex items-center justify-center flex-shrink-0">
|
||||
<HelpCircle className="w-4 h-4 text-[#fe7400]" />
|
||||
</div>
|
||||
)}
|
||||
<span className="font-semibold text-[#333d49] text-sm"
|
||||
style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
|
||||
{title}
|
||||
</span>
|
||||
</div>
|
||||
<motion.div
|
||||
animate={{ rotate: isExpanded ? 180 : 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<ChevronDown className="w-5 h-5 text-gray-400" />
|
||||
<ChevronDown className="w-4 h-4 text-gray-400" />
|
||||
</motion.div>
|
||||
</button>
|
||||
|
||||
@@ -48,8 +55,8 @@ export function ExpandableInfo({
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<div className="px-4 pb-4 pt-0 text-sm text-gray-600 border-t border-gray-100">
|
||||
<div className="pt-4">{children}</div>
|
||||
<div className="px-4 pb-4 pt-0 text-sm text-gray-500 border-t border-gray-100">
|
||||
<div className="pt-4 leading-relaxed">{children}</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
@@ -16,40 +16,43 @@ export function PricingCard({ tier, isSelected, deviceCount, onSelect }: Pricing
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
whileHover={{ y: -4 }}
|
||||
whileHover={{ y: -3 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<Card
|
||||
variant={isSelected ? 'highlighted' : tier.recommended ? 'elevated' : 'default'}
|
||||
variant={isSelected ? 'highlighted' : 'default'}
|
||||
padding="none"
|
||||
className={cn(
|
||||
'relative overflow-hidden',
|
||||
tier.recommended && !isSelected && 'ring-2 ring-[#333d49]'
|
||||
tier.recommended && !isSelected && 'ring-2 ring-[#fe7400]/30'
|
||||
)}
|
||||
>
|
||||
{/* Recommended badge */}
|
||||
{tier.recommended && (
|
||||
<div className="absolute top-0 right-0">
|
||||
<div className="bg-[#fe7400] text-white text-xs font-semibold px-3 py-1 rounded-bl-lg">
|
||||
Recommended
|
||||
</div>
|
||||
<div className="bg-gradient-accent text-white text-[11px] font-bold px-3 py-1.5 text-center uppercase tracking-wider"
|
||||
style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
|
||||
Recommended
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="p-6">
|
||||
{/* Header */}
|
||||
<div className="mb-4">
|
||||
<h3 className="text-xl font-semibold text-[#333d49]">{tier.name}</h3>
|
||||
<p className="text-sm text-gray-500 mt-1">{tier.description}</p>
|
||||
<h3 className="text-xl font-bold text-[#333d49]"
|
||||
style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
|
||||
{tier.name}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-400 mt-1">{tier.description}</p>
|
||||
</div>
|
||||
|
||||
{/* Pricing */}
|
||||
<div className="mb-6">
|
||||
<div className="flex items-baseline gap-1">
|
||||
<span className="text-3xl font-bold text-[#333d49]">
|
||||
<span className="text-3xl font-bold text-[#333d49]"
|
||||
style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
|
||||
{formatCurrency(monthlyEstimate)}
|
||||
</span>
|
||||
<span className="text-gray-500">/month</span>
|
||||
<span className="text-gray-400">/month</span>
|
||||
</div>
|
||||
<p className="text-xs text-gray-400 mt-1">
|
||||
{formatCurrency(tier.basePrice)} base + {formatCurrency(tier.perDevicePrice)}/device
|
||||
@@ -57,10 +60,12 @@ export function PricingCard({ tier, isSelected, deviceCount, onSelect }: Pricing
|
||||
</div>
|
||||
|
||||
{/* Features */}
|
||||
<ul className="space-y-2 mb-6">
|
||||
<ul className="space-y-2.5 mb-6">
|
||||
{tier.features.map((feature, index) => (
|
||||
<li key={index} className="flex items-start gap-2 text-sm">
|
||||
<Check className="w-4 h-4 text-[#fe7400] mt-0.5 flex-shrink-0" />
|
||||
<li key={index} className="flex items-start gap-2.5 text-sm">
|
||||
<div className="w-4 h-4 rounded-full bg-[#fe7400]/10 flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<Check className="w-2.5 h-2.5 text-[#fe7400]" strokeWidth={3} />
|
||||
</div>
|
||||
<span className="text-gray-600">{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
|
||||
@@ -35,43 +35,57 @@ export function TierComparison({ tiers, selectedTier, onSelectTier }: TierCompar
|
||||
const renderCell = (value: boolean | string) => {
|
||||
if (typeof value === 'boolean') {
|
||||
return value ? (
|
||||
<Check className="w-5 h-5 text-green-500 mx-auto" />
|
||||
<div className="w-5 h-5 rounded-full bg-[#ecfdf5] flex items-center justify-center mx-auto">
|
||||
<Check className="w-3 h-3 text-[#059669]" strokeWidth={3} />
|
||||
</div>
|
||||
) : (
|
||||
<X className="w-5 h-5 text-gray-300 mx-auto" />
|
||||
<X className="w-4 h-4 text-gray-200 mx-auto" />
|
||||
);
|
||||
}
|
||||
return <span className="text-sm text-[#333d49]">{value}</span>;
|
||||
return (
|
||||
<span className="text-sm font-medium text-[#333d49]"
|
||||
style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
|
||||
{value}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="overflow-x-auto">
|
||||
<div className="overflow-x-auto rounded-xl border border-gray-200/80 shadow-card">
|
||||
<table className="w-full border-collapse">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="text-left p-4 border-b border-gray-200 bg-gray-50">
|
||||
<span className="font-semibold text-[#333d49]">Feature</span>
|
||||
<th className="text-left p-4 border-b border-gray-100 bg-[#f8f9fb]">
|
||||
<span className="font-bold text-[#333d49] text-sm"
|
||||
style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
|
||||
Feature
|
||||
</span>
|
||||
</th>
|
||||
{tiers.map((tier) => (
|
||||
<th
|
||||
key={tier.id}
|
||||
className={cn(
|
||||
'p-4 border-b border-gray-200 text-center cursor-pointer transition-colors',
|
||||
'p-4 border-b border-gray-100 text-center cursor-pointer transition-all duration-200',
|
||||
selectedTier === tier.id
|
||||
? 'bg-[#fe7400]/10'
|
||||
: 'bg-gray-50 hover:bg-gray-100'
|
||||
? 'bg-[#fe7400]/5'
|
||||
: 'bg-[#f8f9fb] hover:bg-gray-100'
|
||||
)}
|
||||
onClick={() => onSelectTier(tier.id)}
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
'font-semibold',
|
||||
'font-bold text-sm',
|
||||
selectedTier === tier.id ? 'text-[#fe7400]' : 'text-[#333d49]'
|
||||
)}
|
||||
style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}
|
||||
>
|
||||
{tier.name}
|
||||
</span>
|
||||
{tier.recommended && (
|
||||
<span className="block text-xs text-[#fe7400] mt-1">Recommended</span>
|
||||
<span className="block text-[10px] text-[#fe7400] mt-0.5 font-bold uppercase tracking-wider"
|
||||
style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
|
||||
Recommended
|
||||
</span>
|
||||
)}
|
||||
</th>
|
||||
))}
|
||||
@@ -79,30 +93,30 @@ export function TierComparison({ tiers, selectedTier, onSelectTier }: TierCompar
|
||||
</thead>
|
||||
<tbody>
|
||||
{comparisonFeatures.map((feature, index) => (
|
||||
<tr key={feature.name} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50/50'}>
|
||||
<td className="p-4 border-b border-gray-100 text-sm text-gray-600">
|
||||
<tr key={feature.name} className={index % 2 === 0 ? 'bg-white' : 'bg-[#f8f9fb]/50'}>
|
||||
<td className="p-4 border-b border-gray-50 text-sm text-gray-500">
|
||||
{feature.name}
|
||||
</td>
|
||||
<td
|
||||
className={cn(
|
||||
'p-4 border-b border-gray-100 text-center',
|
||||
selectedTier === 'essential' && 'bg-[#fe7400]/5'
|
||||
'p-4 border-b border-gray-50 text-center',
|
||||
selectedTier === 'essential' && 'bg-[#fe7400]/3'
|
||||
)}
|
||||
>
|
||||
{renderCell(feature.essential)}
|
||||
</td>
|
||||
<td
|
||||
className={cn(
|
||||
'p-4 border-b border-gray-100 text-center',
|
||||
selectedTier === 'professional' && 'bg-[#fe7400]/5'
|
||||
'p-4 border-b border-gray-50 text-center',
|
||||
selectedTier === 'professional' && 'bg-[#fe7400]/3'
|
||||
)}
|
||||
>
|
||||
{renderCell(feature.professional)}
|
||||
</td>
|
||||
<td
|
||||
className={cn(
|
||||
'p-4 border-b border-gray-100 text-center',
|
||||
selectedTier === 'enterprise' && 'bg-[#fe7400]/5'
|
||||
'p-4 border-b border-gray-50 text-center',
|
||||
selectedTier === 'enterprise' && 'bg-[#fe7400]/3'
|
||||
)}
|
||||
>
|
||||
{renderCell(feature.enterprise)}
|
||||
|
||||
Reference in New Issue
Block a user