Alkemy OpenDesign // Workspace Console

Moteur de rendu et previsualisation deterministe local-first
RUNSC // RING 0 SANDBOX
Workspace Files
Source: FinancialBridgeCard.jsx
import React from 'react';

export default function FinancialBridgeCard({
  siren = '984 512 809',
  ca = '1 450 000 €',
  ebitda = '210 000 €',
  leakOpex = '48 000 € / an',
  capexGain = '+32 400 € net',
  subvention = 'Bpifrance France 2030 (50%)'
}) {
  return (
    <div style={{
      background: '#121214',
      border: '1px solid #27272A',
      borderRadius: '8px',
      padding: '24px',
      maxWidth: '420px',
      color: '#F4F4F5',
      fontFamily: 'Inter Tight, -apple-system, sans-serif'
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
        <span style={{ fontSize: '11px', color: '#A1A1AA', fontFamily: 'Geist Mono, monospace' }}>SIREN // {siren}</span>
        <span style={{ fontSize: '10px', background: '#27272A', color: '#A1A1AA', padding: '3px 8px', borderRadius: '4px' }}>CERTIFIÉ INPI</span>
      </div>
      
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px', marginBottom: '20px' }}>
        <div style={{ background: '#0A0A0B', border: '1px solid #27272A', padding: '12px', borderRadius: '6px' }}>
          <div style={{ fontSize: '10px', color: '#A1A1AA', textTransform: 'uppercase' }}>CA N-1</div>
          <div style={{ fontSize: '16px', fontWeight: 600, fontFamily: 'Geist Mono, monospace', color: '#FFFFFF' }}>{ca}</div>
        </div>
        <div style={{ background: '#0A0A0B', border: '1px solid #27272A', padding: '12px', borderRadius: '6px' }}>
          <div style={{ fontSize: '10px', color: '#A1A1AA', textTransform: 'uppercase' }}>EBITDA</div>
          <div style={{ fontSize: '16px', fontWeight: 600, fontFamily: 'Geist Mono, monospace', color: '#22C55E' }}>{ebitda}</div>
        </div>
      </div>

      <div style={{ borderTop: '1px solid #27272A', paddingTop: '16px', marginBottom: '16px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
          <span style={{ fontSize: '12px', color: '#A1A1AA' }}>Fuite SaaS OpEx (36 mois) :</span>
          <span style={{ fontSize: '12px', color: '#EF4444', fontFamily: 'Geist Mono, monospace' }}>{leakOpex}</span>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
          <span style={{ fontSize: '12px', color: '#A1A1AA' }}>Création Actif CapEx Net :</span>
          <span style={{ fontSize: '12px', color: '#22C55E', fontWeight: 600, fontFamily: 'Geist Mono, monospace' }}>{capexGain}</span>
        </div>
      </div>

      <div style={{ background: 'rgba(34, 197, 94, 0.05)', border: '1px solid rgba(34, 197, 94, 0.2)', padding: '10px 12px', borderRadius: '6px', fontSize: '11px', color: '#A1A1AA' }}>
        Levier Activable : <strong style={{ color: '#F4F4F5' }}>{subvention}</strong>
      </div>
    </div>
  );
}
Live Preview Sandbox