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="landing-page">
  <!-- Immersive Background with Blockchain Visualization -->
  <div class="hero-background">
    <!-- Animated Gradient Mesh -->
    <div class="gradient-mesh"></div>

    <!-- Floating Blockchain Network -->
    <div class="blockchain-network">
      <!-- Primary Nodes -->
      <div class="bc-node primary" style="--x: 15%; --y: 20%; --delay: 0s; --size: 20px;"></div>
      <div class="bc-node primary" style="--x: 75%; --y: 15%; --delay: 1.5s; --size: 24px;"></div>
      <div class="bc-node primary" style="--x: 85%; --y: 60%; --delay: 3s; --size: 18px;"></div>
      <div class="bc-node primary" style="--x: 25%; --y: 70%; --delay: 2s; --size: 22px;"></div>
      <div class="bc-node primary" style="--x: 50%; --y: 45%; --delay: 0.5s; --size: 28px;"></div>

      <!-- Secondary Nodes -->
      <div class="bc-node secondary" style="--x: 35%; --y: 30%; --delay: 0.8s; --size: 12px;"></div>
      <div class="bc-node secondary" style="--x: 65%; --y: 35%; --delay: 2.3s; --size: 10px;"></div>
      <div class="bc-node secondary" style="--x: 45%; --y: 75%; --delay: 1.2s; --size: 14px;"></div>
      <div class="bc-node secondary" style="--x: 90%; --y: 30%; --delay: 3.5s; --size: 8px;"></div>
      <div class="bc-node secondary" style="--x: 10%; --y: 50%; --delay: 1.8s; --size: 10px;"></div>

      <!-- Connection Lines SVG -->
      <svg class="network-connections" viewBox="0 0 100 100" preserveAspectRatio="none">
        <defs>
          <linearGradient id="lineGrad1" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stop-color="rgba(99, 102, 241, 0.8)" />
            <stop offset="100%" stop-color="rgba(168, 85, 247, 0.4)" />
          </linearGradient>
          <linearGradient id="lineGrad2" x1="100%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stop-color="rgba(16, 185, 129, 0.6)" />
            <stop offset="100%" stop-color="rgba(99, 102, 241, 0.3)" />
          </linearGradient>
          <filter id="glow">
            <feGaussianBlur stdDeviation="1" result="coloredBlur"/>
            <feMerge>
              <feMergeNode in="coloredBlur"/>
              <feMergeNode in="SourceGraphic"/>
            </feMerge>
          </filter>
        </defs>
        <!-- Network Connections -->
        <path class="connection-line" d="M15,20 Q30,35 50,45" filter="url(#glow)"/>
        <path class="connection-line" d="M50,45 Q65,30 75,15" filter="url(#glow)"/>
        <path class="connection-line" d="M75,15 Q85,35 85,60" filter="url(#glow)"/>
        <path class="connection-line" d="M85,60 Q60,65 50,45" filter="url(#glow)"/>
        <path class="connection-line" d="M50,45 Q35,60 25,70" filter="url(#glow)"/>
        <path class="connection-line" d="M25,70 Q15,45 15,20" filter="url(#glow)"/>
        <path class="connection-line secondary" d="M35,30 Q42,38 50,45" filter="url(#glow)"/>
        <path class="connection-line secondary" d="M65,35 Q58,40 50,45" filter="url(#glow)"/>
        <path class="connection-line secondary" d="M45,75 Q47,60 50,45" filter="url(#glow)"/>

        <!-- Data Packets Animation -->
        <circle class="data-packet" r="1">
          <animateMotion dur="4s" repeatCount="indefinite" path="M15,20 Q30,35 50,45 Q65,30 75,15"/>
        </circle>
        <circle class="data-packet" r="1">
          <animateMotion dur="5s" repeatCount="indefinite" path="M75,15 Q85,35 85,60 Q60,65 50,45 Q35,60 25,70"/>
        </circle>
        <circle class="data-packet" r="0.8">
          <animateMotion dur="3s" repeatCount="indefinite" path="M25,70 Q15,45 15,20 Q30,35 50,45"/>
        </circle>
      </svg>
    </div>

    <!-- Floating Particles -->
    <div class="particles">
      <div class="particle" style="--x: 10%; --y: 15%; --duration: 20s;"></div>
      <div class="particle" style="--x: 20%; --y: 80%; --duration: 25s;"></div>
      <div class="particle" style="--x: 80%; --y: 25%; --duration: 22s;"></div>
      <div class="particle" style="--x: 90%; --y: 85%; --duration: 28s;"></div>
      <div class="particle" style="--x: 40%; --y: 10%; --duration: 18s;"></div>
      <div class="particle" style="--x: 60%; --y: 90%; --duration: 24s;"></div>
    </div>

    <!-- Ambient Light Effects -->
    <div class="ambient-light light-1"></div>
    <div class="ambient-light light-2"></div>
    <div class="ambient-light light-3"></div>
  </div>

  <!-- Main Content Area -->
  <div class="landing-content">
    <!-- Top Navigation Bar -->
    <header class="top-nav">
      <div class="nav-brand">
        <div class="emblem-container">
          <img
            src="assets/images/goa-emblem.svg"
            alt="Government of Goa Emblem"
            class="goa-emblem"
            onerror="this.style.display='none'"
          />
        </div>
        <div class="brand-text">
          <span class="brand-name">Government of Goa</span>
          <span class="brand-subtitle">Blockchain e-Licensing Platform</span>
        </div>
      </div>
      <div class="nav-status">
        <div class="status-indicator">
          <span class="status-dot"></span>
          <span class="status-label">Network Active</span>
        </div>
      </div>
    </header>

    <!-- Hero Section with Login -->
    <main class="hero-section" id="main-content" role="main">
      <!-- Left Column - Hero Content -->
      <div class="hero-content">
        <div class="hero-badge">
          <svg viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z"/>
          </svg>
          <span>Powered by Hyperledger Besu</span>
        </div>

        <h1 class="hero-title">
          <span class="title-line-1">Secure &amp; Transparent</span>
          <span class="title-line-2">License Management</span>
        </h1>

        <p class="hero-description">
          Experience the future of government services with blockchain-backed
          license applications, instant verification, and tamper-proof records.
        </p>

        <!-- Feature Pills -->
        <div class="feature-pills">
          <div class="feature-pill">
            <svg viewBox="0 0 24 24" fill="currentColor">
              <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>
            <span>Instant Verification</span>
          </div>
          <div class="feature-pill">
            <svg viewBox="0 0 24 24" fill="currentColor">
              <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/>
            </svg>
            <span>Tamper-Proof</span>
          </div>
          <div class="feature-pill">
            <svg viewBox="0 0 24 24" fill="currentColor">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
            </svg>
            <span>Multi-Department</span>
          </div>
        </div>

        <!-- Benefits List -->
        <div class="benefits-list">
          <div class="benefit-item">
            <svg viewBox="0 0 24 24" fill="currentColor">
              <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/>
            </svg>
            <span>100% Paperless Process</span>
          </div>
          <div class="benefit-item">
            <svg viewBox="0 0 24 24" fill="currentColor">
              <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>
            </svg>
            <span>Apply Anytime, Anywhere</span>
          </div>
          <div class="benefit-item">
            <svg viewBox="0 0 24 24" fill="currentColor">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
            </svg>
            <span>Real-time Status Tracking</span>
          </div>
        </div>
      </div>

      <!-- Right Column - Login Card -->
      <div class="login-container">
        <div class="login-card">
          <div class="card-glow"></div>
          <router-outlet></router-outlet>
        </div>
      </div>
    </main>

    <!-- Footer -->
    <footer class="landing-footer" role="contentinfo">
      <div class="footer-content">
        <p class="copyright">&copy; {{ currentYear }} Government of Goa, India. All rights reserved.</p>
        <div class="footer-links">
          <a href="/policies" aria-label="Website Policies">Policies</a>
          <a href="/terms" aria-label="Terms and Conditions">Terms</a>
          <a href="/accessibility" aria-label="Accessibility Statement">Accessibility</a>
          <a href="/contact" aria-label="Contact Information">Contact</a>
        </div>
      </div>
    </footer>
  </div>
</div>