success_derdiedas

const { useState, useEffect } = React;

const Mail = ({ size = 24, className = "", strokeWidth = 2 }) => (
        <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" className={className}><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
      );
      const Instagram = ({ size = 24, className = "", strokeWidth = 2 }) => (
        <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" className={className}><rect width="20" height="20" x="2" y="2" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"/></svg>
      );
      const MessageCircle = ({ size = 24, className = "", strokeWidth = 2 }) => (
        <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" className={className}><path d="m3 21 1.9-5.7a8.5 8.5 0 1 1 3.8 3.8z"/></svg>
      );
      const CheckCircle = ({ size = 24, className = "", strokeWidth = 2 }) => (
        <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg>
      );

const sectionBgWhite = {
        background: 'radial-gradient(ellipse 70% 45% at 50% 0%, rgba(255, 200, 0, 0.12) 0%, transparent 50%), radial-gradient(ellipse 55% 40% at 100% 100%, rgba(253, 246, 227, 0.9) 0%, transparent 50%), radial-gradient(ellipse 58% 42% at 0% 35%, rgba(28, 176, 246, 0.07) 0%, transparent 55%)',
      };

const Header = () => (
        <header className="pt-10 pb-6 overflow-hidden bg-white relative hero-mesh">
          <div className="max-w-4xl mx-auto px-4 sm:px-6 relative z-10 text-center">
            <h1 className="text-5xl sm:text-7xl font-black leading-[1.05] text-duo-dark tracking-tight">
              <span className="text-duo-blue">DER</span>{' '}
              <span className="text-duo-red">DIE</span>{' '}
              <span className="text-duo-green">DAS</span>
            </h1>
          </div>
        </header>
      );

const SuccessSection = () => (
        <section className="py-10 sm:py-14 bg-duo-cream flex-1">
          <div className="max-w-2xl mx-auto px-4 sm:px-6">
            <div className="success-card text-center">
              <div className="mx-auto mb-5 w-16 h-16 rounded-full border-2 border-duo-green bg-duo-green/10 flex items-center justify-center">
                <CheckCircle className="w-9 h-9 text-duo-green" strokeWidth={2.5} />
              </div>
              <h2 className="text-3xl sm:text-4xl font-black text-duo-dark leading-tight mb-4">
                Registration successful!
              </h2>
              <p className="text-lg sm:text-xl font-bold text-duo-dark leading-relaxed mb-4">
                Thank you for registering for the <span className="text-duo-blue">Der</span>{' '}
                <span className="text-duo-red">Die</span>{' '}
                <span className="text-duo-green">Das</span> Mastery Course.
              </p>
              <p className="text-base sm:text-lg font-bold text-duo-muted leading-relaxed mb-3">
                Your registration was successful. Within a few hours during business hours, we will verify your payment and send course access to the email address you provided.
              </p>
              <p className="text-base sm:text-lg font-bold text-duo-muted leading-relaxed">
                Please check your spam folder if you do not receive the email in your inbox.
              </p>
            </div>
          </div>
        </section>
      );

const ContactsSection = () => {
        const contacts = [
          { label: 'Email', href: 'mailto:mnemo.german.team@gmail.com', ariaLabel: 'Send email', icon: <Mail className="w-5 h-5" strokeWidth={2.25} />, color: 'bg-duo-blue/10 text-duo-blue-dark border-duo-blue/25' },
          { label: 'Instagram', href: 'https://www.instagram.com/mnemo.deutsch/', ariaLabel: 'Open Instagram', icon: <Instagram className="w-5 h-5" strokeWidth={2.25} />, color: 'bg-duo-red/10 text-duo-red border-duo-red/20' },
          { label: 'WhatsApp', href: 'https://wa.me/380938906935', ariaLabel: 'Open WhatsApp', icon: <MessageCircle className="w-5 h-5" strokeWidth={2.25} />, color: 'bg-[#25D366]/15 text-[#128C7E] border-[#25D366]/35' },
        ];
        return (
          <section id="contact" className="py-14 bg-white relative overflow-hidden">
            <div className="absolute inset-0 pointer-events-none" aria-hidden style={sectionBgWhite} />
            <div className="max-w-4xl mx-auto px-4 sm:px-6 relative z-10">
              <div className="text-center mb-8">
                <h2 className="text-3xl sm:text-4xl font-black text-duo-dark leading-tight tracking-tight">Contact us</h2>
                <p className="mt-3 text-base sm:text-lg font-bold text-duo-muted">Questions about the course? Reach out anytime.</p>
              </div>
              <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
                {contacts.map((item) => (
                  <a key={item.label} href={item.href} aria-label={item.ariaLabel}
                    target={item.href.startsWith('http') ? '_blank' : undefined}
                    rel={item.href.startsWith('http') ? 'noopener noreferrer' : undefined}
                    className="contact-card rounded-2xl border-2 border-duo-border bg-white p-5 text-center shadow-[0_6px_0_0_#e5e5e5] no-underline transition-colors hover:bg-duo-cream/40">
                    <div className={`mx-auto mb-3 w-12 h-12 rounded-xl border-2 flex items-center justify-center ${item.color}`}>{item.icon}</div>
                    <p className="contact-card-label text-xs font-black uppercase tracking-widest text-duo-muted">{item.label}</p>
                  </a>
                ))}
              </div>
            </div>
          </section>
        );
      };

function App() {
        return (
          <div className="mnemo-dd min-h-screen w-full max-w-full mx-auto overflow-x-hidden flex flex-col selection:bg-duo-green selection:text-white">
            <div className="noise-bg" aria-hidden="true" />
            <Header />
            <SuccessSection />
            <ContactsSection />
          </div>
        );
      }

const root = ReactDOM.createRoot(document.getElementById('root'));
      root.render(<App />);