feat: Modularer Baukasten + mitarbeiterbasiertes Pricing + Savings-ROI
Produkte: 8 Module als Baukasten (Code Security, CE-Risiko, Compliance-Docs, Audit Manager, LLM, Academy, Jira, Full Compliance) Pricing: nach MA (<50: 15k, 50-250: 30k, 250+: 40-50k EUR/Jahr) Cloud Standard (BSI DE/OVH FR), Mac Mini nur fuer <10 MA Geschaeftsmodell: ROI-Rechnung statt HW-Amortisation (Kunde zahlt 40-50k, spart 50-110k: Pentests, CE, Auditmanager) So funktioniert's: Cloud-Vertrag statt HW aufstellen, Audit vorbereiten statt Audit bestehen Competition: Pricing-Tiers auf Cloud-Modell umgestellt FAQ: Alle 65+-Referenzen + alte Tier-Preise entfernt Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
@@ -1,142 +1,104 @@
|
||||
'use client'
|
||||
|
||||
import { motion } from 'framer-motion'
|
||||
import { Language, PitchProduct } from '@/lib/types'
|
||||
import { Language } from '@/lib/types'
|
||||
import { t } from '@/lib/i18n'
|
||||
import GradientText from '../ui/GradientText'
|
||||
import FadeInView from '../ui/FadeInView'
|
||||
import GlassCard from '../ui/GlassCard'
|
||||
import { DollarSign, Repeat, TrendingUp } from 'lucide-react'
|
||||
import AnimatedCounter from '../ui/AnimatedCounter'
|
||||
import { Repeat, TrendingUp, PiggyBank, ShieldCheck, Clock, Users } from 'lucide-react'
|
||||
|
||||
interface BusinessModelSlideProps {
|
||||
lang: Language
|
||||
products: PitchProduct[]
|
||||
products?: unknown[]
|
||||
}
|
||||
|
||||
const AMORT_MONTHS = 24
|
||||
|
||||
function computeKPIs(products: PitchProduct[]) {
|
||||
if (!products.length) return { weightedMarginDuring: 0, weightedMarginAfter: 0, amortMonths: AMORT_MONTHS }
|
||||
|
||||
// Compute weighted margin based on product mix (equal weight per product as proxy)
|
||||
const n = products.length
|
||||
let sumMarginDuring = 0
|
||||
let sumMarginAfter = 0
|
||||
let maxAmortMonths = 0
|
||||
|
||||
for (const p of products) {
|
||||
const price = p.monthly_price_eur
|
||||
if (price <= 0) continue
|
||||
const amort = p.hardware_cost_eur > 0 ? p.hardware_cost_eur / AMORT_MONTHS : 0
|
||||
const opex = p.operating_cost_eur > 0 ? p.operating_cost_eur : 0
|
||||
|
||||
// Margin during amortization
|
||||
const marginDuring = (price - amort - opex) / price
|
||||
sumMarginDuring += marginDuring
|
||||
|
||||
// Margin after amortization (no more HW cost)
|
||||
const marginAfter = (price - opex) / price
|
||||
sumMarginAfter += marginAfter
|
||||
|
||||
// Payback period in months
|
||||
if (p.hardware_cost_eur > 0 && price - opex > 0) {
|
||||
const payback = Math.ceil(p.hardware_cost_eur / (price - opex))
|
||||
if (payback > maxAmortMonths) maxAmortMonths = payback
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
weightedMarginDuring: Math.round((sumMarginDuring / n) * 100),
|
||||
weightedMarginAfter: Math.round((sumMarginAfter / n) * 100),
|
||||
amortMonths: maxAmortMonths || AMORT_MONTHS,
|
||||
}
|
||||
}
|
||||
|
||||
export default function BusinessModelSlide({ lang, products }: BusinessModelSlideProps) {
|
||||
export default function BusinessModelSlide({ lang }: BusinessModelSlideProps) {
|
||||
const i = t(lang)
|
||||
const { weightedMarginDuring, weightedMarginAfter, amortMonths } = computeKPIs(products)
|
||||
const de = lang === 'de'
|
||||
|
||||
return (
|
||||
<div>
|
||||
<FadeInView className="text-center mb-12">
|
||||
<FadeInView className="text-center mb-10">
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-3">
|
||||
<GradientText>{i.businessModel.title}</GradientText>
|
||||
</h2>
|
||||
<p className="text-lg text-white/50 max-w-2xl mx-auto">{i.businessModel.subtitle}</p>
|
||||
</FadeInView>
|
||||
|
||||
{/* Key Metrics — dynamisch berechnet */}
|
||||
{/* Key Metrics */}
|
||||
<div className="grid md:grid-cols-3 gap-4 mb-8">
|
||||
<GlassCard delay={0.2} className="text-center">
|
||||
<Repeat className="w-6 h-6 text-indigo-400 mx-auto mb-2" />
|
||||
<p className="text-sm text-white/50 mb-1">{i.businessModel.recurringRevenue}</p>
|
||||
<p className="text-2xl font-bold text-white">100%</p>
|
||||
<p className="text-xs text-white/30">SaaS / Subscription</p>
|
||||
<p className="text-2xl font-bold text-white">100% SaaS</p>
|
||||
<p className="text-xs text-white/30">{de ? 'Mitarbeiterbasiertes Pricing' : 'Employee-based pricing'}</p>
|
||||
</GlassCard>
|
||||
<GlassCard delay={0.3} className="text-center">
|
||||
<DollarSign className="w-6 h-6 text-green-400 mx-auto mb-2" />
|
||||
<TrendingUp className="w-6 h-6 text-green-400 mx-auto mb-2" />
|
||||
<p className="text-sm text-white/50 mb-1">{i.businessModel.margin}</p>
|
||||
<p className="text-2xl font-bold text-white">>{weightedMarginAfter}%</p>
|
||||
<p className="text-xs text-white/30">
|
||||
{lang === 'de' ? 'nach Amortisation' : 'post amortization'}
|
||||
{' · '}
|
||||
{weightedMarginDuring}% {lang === 'de' ? 'waehrend' : 'during'}
|
||||
</p>
|
||||
<p className="text-2xl font-bold text-white">>80%</p>
|
||||
<p className="text-xs text-white/30">{de ? 'Cloud-native, keine HW-Kosten' : 'Cloud-native, no HW costs'}</p>
|
||||
</GlassCard>
|
||||
<GlassCard delay={0.4} className="text-center">
|
||||
<TrendingUp className="w-6 h-6 text-purple-400 mx-auto mb-2" />
|
||||
<p className="text-sm text-white/50 mb-1">{i.businessModel.amortization}</p>
|
||||
<p className="text-2xl font-bold text-white">{amortMonths} {i.businessModel.months}</p>
|
||||
<p className="text-xs text-white/30">{lang === 'de' ? 'max. Hardware-Amortisation' : 'max. Hardware Amortization'}</p>
|
||||
<PiggyBank className="w-6 h-6 text-amber-400 mx-auto mb-2" />
|
||||
<p className="text-sm text-white/50 mb-1">{de ? 'Kundenersparnis' : 'Customer Savings'}</p>
|
||||
<p className="text-2xl font-bold text-white">50.000+ EUR</p>
|
||||
<p className="text-xs text-white/30">{de ? 'pro Kunde pro Jahr' : 'per customer per year'}</p>
|
||||
</GlassCard>
|
||||
</div>
|
||||
|
||||
{/* Unit Economics per Product */}
|
||||
{/* Savings Breakdown — the core argument */}
|
||||
<FadeInView delay={0.5}>
|
||||
<h3 className="text-lg font-semibold mb-4 text-white/70">{i.businessModel.unitEconomics}</h3>
|
||||
<div className="grid md:grid-cols-3 gap-4">
|
||||
{products.map((p, idx) => {
|
||||
const amort = p.hardware_cost_eur > 0 ? Math.round(p.hardware_cost_eur / AMORT_MONTHS) : 0
|
||||
const monthlyMargin = p.monthly_price_eur - amort - (p.operating_cost_eur > 0 ? p.operating_cost_eur : 0)
|
||||
const marginPct = Math.round((monthlyMargin / p.monthly_price_eur) * 100)
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key={p.id}
|
||||
initial={{ opacity: 0, rotateY: -15 }}
|
||||
animate={{ opacity: 1, rotateY: 0 }}
|
||||
transition={{ delay: 0.6 + idx * 0.15 }}
|
||||
className="bg-white/[0.05] border border-white/10 rounded-2xl p-5"
|
||||
>
|
||||
<h4 className="font-bold text-white mb-3">{p.name}</h4>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-white/50">{lang === 'de' ? 'Monatspreis' : 'Monthly Price'}</span>
|
||||
<span className="text-white font-medium">{p.monthly_price_eur} EUR</span>
|
||||
</div>
|
||||
{p.hardware_cost_eur > 0 && (
|
||||
<div className="flex justify-between">
|
||||
<span className="text-white/50">{i.businessModel.hardwareCost}</span>
|
||||
<span className="text-white/70">-{amort} EUR/Mo</span>
|
||||
<GlassCard hover={false} className="p-6">
|
||||
<h3 className="text-lg font-semibold mb-5 text-white/70 text-center">
|
||||
{de ? 'ROI-Rechnung: Kunde mit 250+ Mitarbeitern' : 'ROI Calculation: Customer with 250+ employees'}
|
||||
</h3>
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
{/* Customer pays */}
|
||||
<div>
|
||||
<h4 className="text-xs font-bold text-indigo-400 uppercase tracking-wider mb-3">
|
||||
{i.businessModel.customerPays}
|
||||
</h4>
|
||||
<div className="bg-indigo-500/10 border border-indigo-500/20 rounded-xl p-4">
|
||||
<p className="text-3xl font-bold text-white text-center mb-1">
|
||||
<AnimatedCounter target={40} suffix="-50k" duration={1500} /> EUR
|
||||
</p>
|
||||
<p className="text-xs text-white/40 text-center">{de ? 'pro Jahr, modular waehlbar' : 'per year, modular choice'}</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Customer saves */}
|
||||
<div>
|
||||
<h4 className="text-xs font-bold text-emerald-400 uppercase tracking-wider mb-3">
|
||||
{i.businessModel.customerSaves}
|
||||
</h4>
|
||||
<div className="space-y-2">
|
||||
{[
|
||||
{ label: i.businessModel.savingsPentest, amount: '30.000', icon: ShieldCheck },
|
||||
{ label: i.businessModel.savingsCE, amount: '20.000', icon: Clock },
|
||||
{ label: i.businessModel.savingsAudit, amount: '60.000+', icon: Users },
|
||||
].map((item, idx) => (
|
||||
<div key={idx} className="flex items-center justify-between bg-emerald-500/10 rounded-lg px-3 py-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<item.icon className="w-3.5 h-3.5 text-emerald-400" />
|
||||
<span className="text-xs text-white/70">{item.label}</span>
|
||||
</div>
|
||||
)}
|
||||
{p.operating_cost_eur > 0 && (
|
||||
<div className="flex justify-between">
|
||||
<span className="text-white/50">{i.businessModel.operatingCost}</span>
|
||||
<span className="text-white/70">-{p.operating_cost_eur} EUR/Mo</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="border-t border-white/10 pt-2 flex justify-between">
|
||||
<span className="text-white/50">{i.businessModel.margin}</span>
|
||||
<span className={`font-bold ${marginPct > 0 ? 'text-green-400' : 'text-red-400'}`}>
|
||||
{marginPct > 0 ? '+' : ''}{monthlyMargin} EUR ({marginPct}%)
|
||||
</span>
|
||||
<span className="text-xs font-bold text-emerald-300">{item.amount} EUR</span>
|
||||
</div>
|
||||
))}
|
||||
<div className="flex items-center justify-between bg-emerald-500/20 border border-emerald-500/30 rounded-lg px-3 py-2">
|
||||
<span className="text-xs font-bold text-white">{i.businessModel.savingsTotal}</span>
|
||||
<span className="text-sm font-bold text-emerald-300">50.000 - 110.000+ EUR</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-center text-xs text-white/30 mt-4">
|
||||
{de
|
||||
? '+ Strafvermeidung, Echtzeit-Kundenanfragen, kein Auditmanager noetig'
|
||||
: '+ penalty avoidance, real-time customer inquiries, no audit manager needed'}
|
||||
</p>
|
||||
</GlassCard>
|
||||
</FadeInView>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -277,12 +277,12 @@ const PRICING_COMPARISON: CompetitorPricing[] = [
|
||||
{
|
||||
name: 'ComplAI',
|
||||
flag: '🇩🇪',
|
||||
model: 'Self-Hosted',
|
||||
model: 'Cloud (BSI DE / OVH FR)',
|
||||
publicPricing: true,
|
||||
tiers: [
|
||||
{ name: { de: 'Starter', en: 'Starter' }, price: '€990/mo', annual: '€11.880/yr', notes: { de: 'Mac Mini, 30B LLM, 84 Regularien', en: 'Mac Mini, 30B LLM, 84 regulations' } },
|
||||
{ name: { de: 'Professional', en: 'Professional' }, price: '€1.490/mo', annual: '€17.880/yr', notes: { de: 'Mac Studio, 70B LLM, Priority', en: 'Mac Studio, 70B LLM, priority' } },
|
||||
{ name: { de: 'Enterprise', en: 'Enterprise' }, price: '€2.990/mo', annual: '€35.880/yr', notes: { de: '2x Mac Studio, 1000B Cloud-LLM', en: '2x Mac Studio, 1000B cloud LLM' } },
|
||||
{ name: { de: '<50 MA', en: '<50 emp.' }, price: 'ab €1.250/mo', annual: 'ab €15.000/yr', notes: { de: 'Cloud, modular, 84 Regularien', en: 'Cloud, modular, 84 regulations' } },
|
||||
{ name: { de: '50-250 MA', en: '50-250 emp.' }, price: 'ab €2.500/mo', annual: 'ab €30.000/yr', notes: { de: 'Cloud, alle Module, Priority', en: 'Cloud, all modules, priority' } },
|
||||
{ name: { de: '250+ MA', en: '250+ emp.' }, price: 'ab €3.500/mo', annual: 'ab €40.000/yr', notes: { de: 'Cloud, Enterprise, Dedicated', en: 'Cloud, enterprise, dedicated' } },
|
||||
],
|
||||
setupFee: '€0',
|
||||
isBP: true,
|
||||
|
||||
@@ -1,61 +1,119 @@
|
||||
'use client'
|
||||
|
||||
import Image from 'next/image'
|
||||
import { Language, PitchProduct } from '@/lib/types'
|
||||
import { t } from '@/lib/i18n'
|
||||
import GradientText from '../ui/GradientText'
|
||||
import FadeInView from '../ui/FadeInView'
|
||||
import PricingCard from '../ui/PricingCard'
|
||||
import GlassCard from '../ui/GlassCard'
|
||||
import {
|
||||
ScanLine, Shield, FileText, ClipboardCheck, GraduationCap,
|
||||
Brain, CheckCircle2, Puzzle, Cloud, HardDrive
|
||||
} from 'lucide-react'
|
||||
|
||||
interface ProductSlideProps {
|
||||
lang: Language
|
||||
products: PitchProduct[]
|
||||
products?: unknown[]
|
||||
}
|
||||
|
||||
export default function ProductSlide({ lang, products }: ProductSlideProps) {
|
||||
const MODULES = [
|
||||
{ icon: ScanLine, color: '#ef4444', de: 'Code Security', en: 'Code Security', descDe: 'SAST, DAST, SBOM, kontinuierliches Pentesting', descEn: 'SAST, DAST, SBOM, continuous pentesting' },
|
||||
{ icon: Shield, color: '#f97316', de: 'CE-Risikobeurteilung', en: 'CE Risk Assessment', descDe: 'Software-Risikoanalyse fuer CE-Kennzeichnung', descEn: 'Software risk assessment for CE marking' },
|
||||
{ icon: FileText, color: '#6366f1', de: 'Compliance-Dokumente', en: 'Compliance Documents', descDe: 'VVT, DSFA, TOMs, Loeschfristen, AGB, DSE', descEn: 'RoPA, DPIA, TOMs, retention, T&Cs, privacy' },
|
||||
{ icon: ClipboardCheck, color: '#10b981', de: 'Audit Manager', en: 'Audit Manager', descDe: 'Abweichungen, Nachweise, Stichtage, Eskalation', descEn: 'Deviations, evidence, deadlines, escalation' },
|
||||
{ icon: Brain, color: '#a855f7', de: 'Compliance LLM', en: 'Compliance LLM', descDe: 'GPT fuer Text und Audio — sicher in der EU gehostet', descEn: 'GPT for text and audio — securely hosted in EU' },
|
||||
{ icon: GraduationCap, color: '#ec4899', de: 'Academy', en: 'Academy', descDe: 'Online-Schulungen fuer GF und Mitarbeiter', descEn: 'Online training for management and employees' },
|
||||
{ icon: Puzzle, color: '#0ea5e9', de: 'Jira-Integration', en: 'Jira Integration', descDe: 'Tickets mit Implementierungsvorschlaegen', descEn: 'Tickets with implementation suggestions' },
|
||||
{ icon: CheckCircle2, color: '#22c55e', de: 'Full Compliance', en: 'Full Compliance', descDe: 'Alle Module + Regulierungs-Updates + Support', descEn: 'All modules + regulatory updates + support' },
|
||||
]
|
||||
|
||||
const PRICING_TIERS = [
|
||||
{ employees: '< 50', priceDe: 'ab 15.000 EUR/Jahr', priceEn: 'from EUR 15,000/yr', highlight: false },
|
||||
{ employees: '50 – 250', priceDe: 'ab 30.000 EUR/Jahr', priceEn: 'from EUR 30,000/yr', highlight: false },
|
||||
{ employees: '250+', priceDe: 'ab 40.000 EUR/Jahr', priceEn: 'from EUR 40,000/yr', highlight: true },
|
||||
]
|
||||
|
||||
export default function ProductSlide({ lang }: ProductSlideProps) {
|
||||
const i = t(lang)
|
||||
const de = lang === 'de'
|
||||
|
||||
return (
|
||||
<div>
|
||||
<FadeInView className="text-center mb-8">
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-3">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<FadeInView className="text-center mb-6">
|
||||
<h2 className="text-3xl md:text-5xl font-bold mb-2">
|
||||
<GradientText>{i.product.title}</GradientText>
|
||||
</h2>
|
||||
<p className="text-lg text-white/50 max-w-2xl mx-auto">{i.product.subtitle}</p>
|
||||
<p className="text-base text-white/50 max-w-2xl mx-auto">{i.product.subtitle}</p>
|
||||
</FadeInView>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6 mb-8">
|
||||
{products.map((product, idx) => (
|
||||
<PricingCard key={product.id} product={product} lang={lang} delay={0.2 + idx * 0.15} />
|
||||
))}
|
||||
{/* Module Grid */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
|
||||
{MODULES.map((mod, idx) => {
|
||||
const Icon = mod.icon
|
||||
return (
|
||||
<GlassCard key={idx} delay={0.1 + idx * 0.05} hover className="p-3 text-center">
|
||||
<Icon className="w-5 h-5 mx-auto mb-2" style={{ color: mod.color }} />
|
||||
<p className="text-xs font-bold text-white mb-1">{de ? mod.de : mod.en}</p>
|
||||
<p className="text-[10px] text-white/40 leading-tight">{de ? mod.descDe : mod.descEn}</p>
|
||||
</GlassCard>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* SDK Preview */}
|
||||
<FadeInView delay={0.6}>
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="rounded-xl overflow-hidden border border-white/10 bg-black/20 shadow-lg shadow-indigo-500/5">
|
||||
<div className="flex items-center gap-2 px-3 py-1.5 bg-white/[0.03] border-b border-white/10">
|
||||
<div className="flex gap-1">
|
||||
<div className="w-2 h-2 rounded-full bg-red-500/50" />
|
||||
<div className="w-2 h-2 rounded-full bg-yellow-500/50" />
|
||||
<div className="w-2 h-2 rounded-full bg-green-500/50" />
|
||||
</div>
|
||||
<span className="text-[10px] text-white/20 font-mono ml-2">admin.breakpilot.ai/sdk</span>
|
||||
{/* Pricing + Deployment */}
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
{/* Pricing */}
|
||||
<FadeInView delay={0.6}>
|
||||
<GlassCard hover={false} className="p-4">
|
||||
<h3 className="text-xs font-bold text-indigo-400 uppercase tracking-wider mb-3">{i.product.pricingTitle}</h3>
|
||||
<p className="text-[10px] text-white/40 mb-3">{i.product.pricingSubtitle}</p>
|
||||
<div className="space-y-2">
|
||||
{PRICING_TIERS.map((tier, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className={`flex justify-between items-center p-2.5 rounded-xl ${
|
||||
tier.highlight ? 'bg-indigo-500/15 border border-indigo-500/30' : 'bg-white/[0.04]'
|
||||
}`}
|
||||
>
|
||||
<div>
|
||||
<span className="text-xs text-white/70 font-medium">{tier.employees}</span>
|
||||
<span className="text-[10px] text-white/40 ml-1">{de ? 'Mitarbeiter' : 'employees'}</span>
|
||||
</div>
|
||||
<span className={`text-xs font-bold ${tier.highlight ? 'text-indigo-300' : 'text-white/70'}`}>
|
||||
{de ? tier.priceDe : tier.priceEn}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Image
|
||||
src="/screenshots/01-dashboard.png"
|
||||
alt={de ? 'SDK Dashboard' : 'SDK Dashboard'}
|
||||
width={1920}
|
||||
height={1080}
|
||||
className="w-full h-auto opacity-80"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-center text-xs text-white/30 mt-2 font-mono">
|
||||
{de ? '65+ Module · Live-Plattform · Details im Anhang' : '65+ Modules · Live Platform · Details in Appendix'}
|
||||
</p>
|
||||
</div>
|
||||
</FadeInView>
|
||||
</GlassCard>
|
||||
</FadeInView>
|
||||
|
||||
{/* Deployment Options */}
|
||||
<FadeInView delay={0.7}>
|
||||
<GlassCard hover={false} className="p-4">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<Cloud className="w-4 h-4 text-blue-400" />
|
||||
<h3 className="text-xs font-bold text-blue-400 uppercase tracking-wider">{i.product.cloud}</h3>
|
||||
</div>
|
||||
<p className="text-[10px] text-white/50 leading-relaxed">{i.product.cloudDesc}</p>
|
||||
<div className="flex gap-2 mt-2">
|
||||
<span className="text-[9px] bg-blue-500/15 text-blue-300 px-2 py-0.5 rounded-full">BSI DE</span>
|
||||
<span className="text-[9px] bg-blue-500/15 text-blue-300 px-2 py-0.5 rounded-full">OVH FR</span>
|
||||
<span className="text-[9px] bg-blue-500/15 text-blue-300 px-2 py-0.5 rounded-full">{de ? 'Fix oder flexibel' : 'Fixed or flexible'}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-t border-white/10 pt-3">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<HardDrive className="w-4 h-4 text-white/40" />
|
||||
<h3 className="text-xs font-bold text-white/40 uppercase tracking-wider">{i.product.privacy}</h3>
|
||||
</div>
|
||||
<p className="text-[10px] text-white/40 leading-relaxed">{i.product.privacyDesc}</p>
|
||||
</div>
|
||||
</div>
|
||||
</GlassCard>
|
||||
</FadeInView>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user