LexMusic - Sell Project

LexMusic 🎯 Concept LexMusic is a web platform (React artifact in Claude.ai) that serves as an AI lawyer specialized in music contract law. It features two main functions: Analyze a contract — Upload or paste an existing music contract, and the AI detects legal loopholes, abusive clauses, missing rights, relevant organizations (SACEM, SPEDIDAM, BMDA, SUISA, SABAM...), and available subsidies. Create a contract — A 3-step form (general info → parties → collaborators/publishers) that generates a complete professional contract, tailored to the chosen country. Legal coverage: France, Belgium, Switzerland, Morocco, Canada, Senegal, Ivory Coast, United States, United Kingdom, International (Berne Convention, TRIPS, CISAC). 🏗️ Current Technical Architecture Platform: React Artifact (application/vnd.ant.react) in Claude.ai — a single file, with no real backend. Stack: React with hooks (useState, useEffect) No external routing — navigation is managed by page state in the root component Direct API calls to https://api.anthropic.com/v1/messages on the client side ("Claude in Claude" pattern) Models used: claude-sonnet-4-20250514 for analysis (requiring legal precision), claude-haiku-4-5-20251001 for generation (for speed) Pages/Views: landing — Marketing homepage (hero, features, stats, "how it works", testimonials, CTA, footer) login / signup — Simulated authentication (no real backend, just local state) pricing — 3 plans: Basic (free), Pro (€19/month), Prestige (€49/month) checkout — Simulated payment (card/PayPal/Apple Pay) with functional forms but fictitious processing contact — Simulated contact form app (MainApp) — Contains 3 sub-views: home, analyze, generate 🎨 Current Design System Theme: Premium dark mode, "luxury lawyer" palette Background: #080809 (almost black) Gold accent: #c8a44a / #ddb85e Green (success): #3b9458 Red (danger): #c44545 Amber (warning): #c47e30 Typography: Titles/Numbers: Cormorant Garamond (elegant serif, via Google Fonts) Body text: Inter Animations (CSS keyframes): fadeUp, fadeIn, scaleIn, slideRight — Staggered appearances floatBg, floatBg2 — Floating light halos in the background (gold + green) drawLine — The SVG logo draws itself upon loading glow — Golden pulsation on the main CTA shimmerText — A shimmer effect shining across the hero title noteFloat1/2/3 — Decorative floating musical notes (♪♫♩♬) on the hero section checkPop — Elastic bounce on confirmation checkmarks shake — Shaking effect on error messages gridOverlay — Subtle background grid ("blueprint" effect) Reusable components: Btn, Card, Field, Tag, Loader (double rotating ring), ErrMsg, PBar (progress bar), StepNav (stepper with checkmarks), AnimatedBg, FloatingNotes, LogoMark. 🐛 Bugs Resolved During Development (for reference) Truncated JSON — maxtokens was too low (1000), cutting the response in the middle → Increased to 4000 (analysis) / 2000-2500 (generation). Upload button not working on mobile — onClick on a div does not trigger the file input on iOS/Android → Replaced with a true native HTML <label htmlFor>. "JSON not found" — The model was wrapping its response in json ... despite instructions → Added aggressive regex cleanup (.replace(/^(?:json)?\s/i,"").replace(/\s\s$/,"")) + reinforced the prompt ("start directly with {"). React syntax error — Typo margin:"0 0:16px" (colon instead of space) → Broke the entire artifact rendering, corrected to "0 0 16px". Rate limit 429 — Temporary Anthropic limit, not a code bug; resolves itself by waiting a few hours.