Goa-gel-fullstack/frontend/src/app/layouts/auth-layout/auth-layout.component.html

<!-- Skip to main content - GIGW 3.0 Accessibility -->
<a href="#main-content" class="skip-link">Skip to main content</a>

<div class="auth-layout">
  <!-- Animated Background -->
  <div class="animated-background">
    <!-- Floating Blockchain Nodes -->
    <div class="node node-1"></div>
    <div class="node node-2"></div>
    <div class="node node-3"></div>
    <div class="node node-4"></div>
    <div class="node node-5"></div>
    <div class="node node-6"></div>

    <!-- Connection Lines -->
    <svg class="connections" viewBox="0 0 100 100" preserveAspectRatio="none">
      <line class="connection" x1="20" y1="30" x2="50" y2="50" />
      <line class="connection" x1="50" y1="50" x2="80" y2="25" />
      <line class="connection" x1="80" y1="25" x2="70" y2="70" />
      <line class="connection" x1="70" y1="70" x2="30" y2="80" />
      <line class="connection" x1="30" y1="80" x2="20" y2="30" />
      <line class="connection" x1="50" y1="50" x2="70" y2="70" />
      <line class="connection" x1="50" y1="50" x2="30" y2="80" />
    </svg>

    <!-- Gradient Overlay -->
    <div class="gradient-overlay"></div>
  </div>

  <!-- Main Content Container -->
  <div class="auth-container">
    <!-- Left Side - Branding -->
    <div class="auth-branding">
      <div class="branding-content">
        <div class="emblem-wrapper">
          <img
            src="assets/images/goa-emblem.svg"
            alt="Government of Goa Emblem"
            class="goa-emblem"
            onerror="this.style.display='none'"
          />
        </div>

        <h1 class="brand-title">
          <span class="title-line">Government of Goa</span>
          <span class="title-highlight">Blockchain e-Licensing</span>
        </h1>

        <p class="brand-tagline">
          Secure, Transparent, Immutable
        </p>

        <div class="features-grid">
          <div class="feature-item">
            <div class="feature-icon">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
                <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/>
              </svg>
            </div>
            <div class="feature-text">
              <span class="feature-title">Blockchain Secured</span>
              <span class="feature-desc">Tamper-proof license records</span>
            </div>
          </div>

          <div class="feature-item">
            <div class="feature-icon">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
              </svg>
            </div>
            <div class="feature-text">
              <span class="feature-title">Instant Verification</span>
              <span class="feature-desc">Real-time license validity</span>
            </div>
          </div>

          <div class="feature-item">
            <div class="feature-icon">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
                <path d="M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z"/>
              </svg>
            </div>
            <div class="feature-text">
              <span class="feature-title">Multi-Dept Workflow</span>
              <span class="feature-desc">Streamlined approvals</span>
            </div>
          </div>
        </div>

        <!-- Network Status -->
        <div class="network-status">
          <div class="status-dot"></div>
          <span class="status-text">Hyperledger Besu Network</span>
          <span class="status-badge">Live</span>
        </div>
      </div>
    </div>

    <!-- Right Side - Login Form -->
    <div class="auth-content" id="main-content" role="main">
      <div class="auth-card">
        <router-outlet></router-outlet>
      </div>

      <!-- Footer -->
      <footer class="auth-footer" role="contentinfo">
        <p class="copyright">&copy; 2024 Government of Goa. All rights reserved.</p>
        <div class="footer-links">
          <a href="#">Privacy Policy</a>
          <span class="divider">|</span>
          <a href="#">Terms of Service</a>
          <span class="divider">|</span>
          <a href="#">Help</a>
        </div>
      </footer>
    </div>
  </div>
</div>