feat: add pitch-deck service to core infrastructure
Migrated pitch-deck from breakpilot-pwa to breakpilot-core. Container: bp-core-pitch-deck on port 3012. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
82
pitch-deck/components/ui/PricingCard.tsx
Normal file
82
pitch-deck/components/ui/PricingCard.tsx
Normal file
@@ -0,0 +1,82 @@
|
||||
'use client'
|
||||
|
||||
import { motion } from 'framer-motion'
|
||||
import { PitchProduct, Language } from '@/lib/types'
|
||||
import { t } from '@/lib/i18n'
|
||||
import { Check } from 'lucide-react'
|
||||
import ProductShowcase from './ProductShowcase'
|
||||
|
||||
interface PricingCardProps {
|
||||
product: PitchProduct
|
||||
lang: Language
|
||||
delay?: number
|
||||
}
|
||||
|
||||
export default function PricingCard({ product, lang, delay = 0 }: PricingCardProps) {
|
||||
const i = t(lang)
|
||||
const productType = product.name.includes('Mini')
|
||||
? 'mini'
|
||||
: product.name.includes('Studio')
|
||||
? 'studio'
|
||||
: 'cloud'
|
||||
|
||||
const features = lang === 'de' ? product.features_de : product.features_en
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 40, rotateY: -10 }}
|
||||
animate={{ opacity: 1, y: 0, rotateY: 0 }}
|
||||
transition={{ duration: 0.6, delay }}
|
||||
className={`
|
||||
relative bg-white/[0.08] backdrop-blur-xl
|
||||
border rounded-3xl p-6
|
||||
transition-all duration-300
|
||||
${product.is_popular
|
||||
? 'border-indigo-500/50 shadow-lg shadow-indigo-500/10'
|
||||
: 'border-white/10 hover:border-white/20'
|
||||
}
|
||||
`}
|
||||
>
|
||||
{product.is_popular && (
|
||||
<div className="absolute -top-3 left-1/2 -translate-x-1/2 px-4 py-1 bg-indigo-500 rounded-full text-xs font-semibold">
|
||||
{i.product.popular}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<ProductShowcase type={productType} className="mb-4" />
|
||||
|
||||
<h3 className="text-xl font-bold mb-1">{product.name}</h3>
|
||||
<p className="text-white/50 text-sm mb-4">{product.hardware}</p>
|
||||
|
||||
<div className="mb-1">
|
||||
<span className="text-4xl font-bold">{product.monthly_price_eur}</span>
|
||||
<span className="text-white/50 text-lg ml-1">EUR</span>
|
||||
</div>
|
||||
<p className="text-white/40 text-sm mb-6">{i.product.monthly}</p>
|
||||
|
||||
<div className="w-full border-t border-white/10 pt-4 mb-4">
|
||||
<div className="flex justify-between text-sm mb-2">
|
||||
<span className="text-white/50">{i.product.llm}</span>
|
||||
<span className="font-medium">{product.llm_size}</span>
|
||||
</div>
|
||||
{product.hardware_cost_eur > 0 && (
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-white/50">{i.product.hardware}</span>
|
||||
<span className="font-medium">{product.hardware_cost_eur.toLocaleString('de-DE')} EUR</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<ul className="w-full space-y-2">
|
||||
{(features || []).map((feature, idx) => (
|
||||
<li key={idx} className="flex items-start gap-2 text-sm text-left">
|
||||
<Check className="w-4 h-4 text-green-400 shrink-0 mt-0.5" />
|
||||
<span className="text-white/70">{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user