��<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>AllyWidget - Making the Web Accessible for Everyone</title> <style> :root { --primary: #4A6FFF; --secondary: #34D399; --dark: #1F2937; --light: #F9FAFB; --accent: #EC4899; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; } body { background-color: var(--light); color: var(--dark); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; } .container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; } header { background-color: white; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); padding: 1.5rem 0; } .header-content { display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 1.8rem; font-weight: 700; color: var(--primary); } .logo span { color: var(--dark); } footer .logo span { color: var(--light); } .coming-soon-badge { background-color: var(--accent); color: white; padding: 0.5rem 1rem; border-radius: 2rem; font-size: 0.9rem; font-weight: 600; } .hero { padding: 6rem 0; text-align: center; } h1 { font-size: 3rem; margin-bottom: 1.5rem; color: var(--dark); } .highlight { color: var(--primary); } .subheading { font-size: 1.2rem; color: #4B5563; max-width: 600px; margin: 0 auto 3rem; } .cta { background-color: var(--primary); color: white; padding: 0.8rem 2rem; border-radius: 0.5rem; font-weight: 600; text-decoration: none; display: inline-block; transition: all 0.3s ease; margin-right: 1rem; } .cta:hover { background-color: #3A5CD8; transform: translateY(-2px); } .secondary-cta { background-color: white; color: var(--primary); border: 2px solid var(--primary); } .secondary-cta:hover { background-color: #EEF2FF; } .features { padding: 5rem 0; background-color: white; } .section-title { text-align: center; margin-bottom: 3rem; font-size: 2rem; } .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } .feature-card { padding: 2rem; border-radius: 0.5rem; background-color: var(--light); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; } .feature-card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); } .feature-icon { width: 50px; height: 50px; background-color: #EEF2FF; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; color: var(--primary); font-size: 1.5rem; } .feature-title { font-size: 1.3rem; margin-bottom: 1rem; } .waitlist { padding: 5rem 0; background-color: #EEF2FF; text-align: center; } .waitlist-form { max-width: 500px; margin: 0 auto; display: flex; gap: 1rem; } .waitlist-input { flex-grow: 1; padding: 0.8rem 1rem; border: 2px solid #D1D5DB; border-radius: 0.5rem; font-size: 1rem; } .waitlist-button { background-color: var(--primary); color: white; border: none; padding: 0 1.5rem; border-radius: 0.5rem; cursor: pointer; font-weight: 600; transition: all 0.3s ease; } .waitlist-button:hover { background-color: #3A5CD8; } footer { background-color: var(--dark); color: white; padding: 3rem 0; text-align: center; margin-top: auto; } .footer-links { display: flex; justify-content: center; gap: 2rem; margin: 2rem 0; } .footer-link { color: #D1D5DB; text-decoration: none; transition: color 0.3s ease; } .footer-link:hover { color: white; } .copyright { color: #e0e0e0; font-size: 0.9rem; } @media (max-width: 768px) { h1 { font-size: 2.5rem; } .waitlist-form { flex-direction: column; } .features-grid { grid-template-columns: 1fr; } } </style> </head> <body> <header> <div class="container header-content"> <div class="logo">Ally<span>Widget</span></div> <div class="coming-soon-badge">Coming Soon</div> </div> </header> <section class="hero"> <div class="container"> <h1>Make Your Website <span class="highlight">Accessible to Everyone</span></h1> <p class="subheading">AllyWidget is a powerful, easy-to-implement accessibility solution that helps you make your website ADA compliant and accessible to all users.</p> <div class="cta-group"> <a href="#waitlist" class="cta">Join the Waitlist</a> <!-- <a href="#features" class="cta secondary-cta">Learn More</a> --> </div> </div> </section> <section id="features" class="features"> <div class="container"> <h2 class="section-title">Why Choose <span class="highlight">AllyWidget</span>?</h2> <div class="features-grid"> <div class="feature-card"> <div class="feature-icon">&</div> <h3 class="feature-title">ADA & WCAG Compliance</h3> <p>Stay compliant with accessibility standards including ADA, WCAG 2.1, Section 508, and more.</p> </div> <div class="feature-card"> <div class="feature-icon">=� �</div> <h3 class="feature-title">Easy Implementation</h3> <p>Install our widget with a single line of code. No need for expensive redesigns or development work.</p> </div> <div class="feature-card"> <div class="feature-icon">=����</div> <h3 class="feature-title">Customizable Options</h3> <p>Tailor the widget to match your brand's look and feel with our intuitive dashboard.</p> </div> <div class="feature-card"> <div class="feature-icon">=���</div> <h3 class="feature-title">Detailed Analytics</h3> <p>Gain insights into how users interact with accessibility features on your site.</p> </div> <div class="feature-card"> <div class="feature-icon">=��</div> <h3 class="feature-title">Legal Protection</h3> <p>Reduce the risk of accessibility-related lawsuits with our comprehensive solution.</p> </div> <div class="feature-card"> <div class="feature-icon">=ؼ�</div> <h3 class="feature-title">Business Growth</h3> <p>Expand your audience by making your content accessible to the 1 billion+ people with disabilities worldwide.</p> </div> </div> </div> </section> <section id="waitlist" class="waitlist"> <div class="container"> <h2 class="section-title">Be the First to Know</h2> <p class="subheading">Join our waitlist to get early access and special launch pricing.</p> <form class="waitlist-form" action="https://formsubmit.co/270ed47e4e300080809f80ee87078e8e" method="POST"> <input type="email" name="email" class="waitlist-input" placeholder="Enter your email address" required> <input type="hidden" name="_captcha" value="false"> <input type="hidden" name="_next" value="https://allywidget.com/thank-you.html"> <button type="submit" class="waitlist-button">Join Waitlist</button> </form> </div> </section> <footer> <div class="container"> <div class="logo">Ally<span>Widget</span></div> <p class="copyright">� 2025 AllyWidget. All rights reserved.</p> </div> </footer> </body> </html>