Refactor ValueDetailsExtended: static comparison cards with 3D flip, fixed heights, and consistent PAIN layout

[DanielCotoJ]

Only modify: web/src/components/ValueDetailsExtended.tsx

File

web/src/components/ValueDetailsExtended.tsx

Goal

Refactor this section to match the new card design shown in the attached references:

🖼 Design reference:
Use the images provided — each card has:

• Front: PAIN
• Back: Why we win
• Fixed height, clean alignment, dark theme (black/gray/white)
• 3D flip animation on button click (Why we win ↔ Back)

Tasks

1. Replace dropdown/accordion layout with static cards.
2. Implement 3D flip for each card:
   • Front → PAIN points
   • Back → Why we win summary
3. Ensure:
   • Same height for all cards (CARD_H)
   • Button stays inside the card (no overflow)
   • Scroll inside the content, not outside
4. Keep Framer Motion fade-in animation.
5. Maintain the Zero Databases section as-is.
6. Follow the design from the screenshots (layout, spacing, visual balance).

Acceptance Criteria

• All cards match design reference (structure & spacing).
• Smooth flip animation works for each card.
• All PAIN boxes align evenly.
• Responsive grid (2 cols on sm, 4 on lg).
• Dark theme preserved.

Reference strings

Use these English labels:

• Section title: Common alternatives — and why we win
• Label: PAIN
• Buttons: Why we win / Back

Notes

No new dependencies. No theme edits.
Keep the animation and logic lightweight.

---

Design reference (must match visually):

---

🧩 CARD 1 — Build in-house

PAIN

• High cost and long time-to-market
• Must maintain on-chain logic, security, and public verification

WHY WE WIN

• Acta provides API/SDK, anchoring, and public verification out of the box

🧾 CARD 2 — PDFs / e-sign
PAIN

• Hard to verify by third parties
• No live status or revocation tracking
  WHY WE WIN
• Live status + objective, public verification

🗄️ CARD 3 — Store everything on-chain
PAIN

• Costly and slow
• Risk of exposing PII
  WHY WE WIN
• Only hash on-chain; encrypted data off-chain (privacy + low cost)

🔗 CARD 4 — VCs without anchoring
PAIN

• Depend 100% on the issuer
• Low public traceability
  WHY WE WIN
• Public anchoring on Stellar — anyone can verify

[FabianSanchezD]

Hi @DanielCotoJ, I'm Fabian, I have experience working with issues such as this one! My ETA is less than 3 days.

Thanks!