| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <title>Redress — AI Complaint Resolution</title> |
| <style> |
| * { margin: 0; padding: 0; box-sizing: border-box; } |
| body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #0f0f1a; color: #ffffff; min-height: 100vh; } |
| .hero { text-align: center; padding: 80px 24px 60px; } |
| .badge { display: inline-block; background: #1e1e3a; border: 1px solid #3a3a6a; color: #8888ff; padding: 6px 16px; border-radius: 999px; font-size: 13px; margin-bottom: 24px; } |
| h1 { font-size: clamp(36px, 6vw, 64px); font-weight: 800; letter-spacing: -1px; margin-bottom: 20px; } |
| h1 span { color: #6366f1; } |
| .subtitle { font-size: clamp(16px, 2vw, 20px); color: #aaaacc; max-width: 560px; margin: 0 auto 40px; line-height: 1.6; } |
| .cta { display: inline-flex; gap: 16px; flex-wrap: wrap; justify-content: center; } |
| .btn { padding: 14px 32px; border-radius: 8px; font-size: 16px; font-weight: 600; text-decoration: none; transition: opacity 0.2s; } |
| .btn-primary { background: #6366f1; color: white; } |
| .btn-secondary { background: transparent; color: white; border: 1px solid #3a3a6a; } |
| .btn:hover { opacity: 0.85; } |
| .steps { padding: 60px 24px; max-width: 900px; margin: 0 auto; } |
| .steps h2 { text-align: center; font-size: 28px; margin-bottom: 40px; color: #ffffff; } |
| .steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; } |
| .step { background: #1a1a2e; border: 1px solid #2a2a4a; border-radius: 12px; padding: 28px; } |
| .step-num { font-size: 32px; font-weight: 800; color: #6366f1; margin-bottom: 12px; } |
| .step h3 { font-size: 18px; margin-bottom: 8px; } |
| .step p { color: #aaaacc; font-size: 14px; line-height: 1.6; } |
| .stack { padding: 40px 24px 60px; max-width: 700px; margin: 0 auto; text-align: center; } |
| .stack h2 { font-size: 24px; margin-bottom: 24px; } |
| .tags { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } |
| .tag { background: #1a1a2e; border: 1px solid #2a2a4a; color: #aaaacc; padding: 8px 18px; border-radius: 999px; font-size: 14px; } |
| .footer { text-align: center; padding: 32px 24px; border-top: 1px solid #1a1a2e; color: #555577; font-size: 14px; } |
| .footer a { color: #6366f1; text-decoration: none; } |
| </style> |
| </head> |
| <body> |
|
|
| <div class="hero"> |
| <div class="badge">🏆 AMD Developer Hackathon 2026</div> |
| <h1>Your complaint,<br /><span>handled.</span></h1> |
| <p class="subtitle">Redress is an AI agent that turns your complaint into a formal letter, finds the right channel, and escalates to regulators if ignored. Any country. Any sector.</p> |
| <div class="cta"> |
| <a href="https://redressamd.vercel.app" target="_blank" class="btn btn-primary">Try Redress Live</a> |
| <a href="https://github.com/AMDHACKATHON/Redress" target="_blank" class="btn btn-secondary">View on GitHub</a> |
| </div> |
| </div> |
|
|
| <div class="steps"> |
| <h2>How it works</h2> |
| <div class="steps-grid"> |
| <div class="step"> |
| <div class="step-num">01</div> |
| <h3>Describe your problem</h3> |
| <p>Tell the agent what happened in plain language. No legal knowledge needed.</p> |
| </div> |
| <div class="step"> |
| <div class="step-num">02</div> |
| <h3>Get your letter</h3> |
| <p>The agent drafts a professional complaint letter with the right recipient and channel.</p> |
| </div> |
| <div class="step"> |
| <div class="step-num">03</div> |
| <h3>Escalate if ignored</h3> |
| <p>If no response, escalate to the relevant regulatory body automatically.</p> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="stack"> |
| <h2>Built with</h2> |
| <div class="tags"> |
| <span class="tag">AMD Developer Cloud</span> |
| <span class="tag">Next.js 16</span> |
| <span class="tag">MongoDB</span> |
| <span class="tag">NextAuth.js</span> |
| <span class="tag">Tavily Search</span> |
| <span class="tag">TypeScript</span> |
| <span class="tag">Tailwind CSS</span> |
| <span class="tag">jsPDF</span> |
| </div> |
| </div> |
|
|
| <div class="footer"> |
| <p>Built by <a href="https://lablab.ai/ai-hackathons/amd-developer/team-samkiel" target="_blank">Team SAMKIEL</a> at the AMD Developer Hackathon 2026 | <a href="https://github.com/AMDHACKATHON/Redress" target="_blank">GitHub</a> | <a href="https://redressamd.vercel.app" target="_blank">Live App</a></p> |
| </div> |
|
|
| </body> |
| </html> |
