cms.uldp.edu.vn/views/index.ejs

<!-- Hero Section -->
<section class="container">
  <div class="hero"
    style="background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); color: white; border-radius: 20px; box-shadow: 0 15px 30px rgba(0,0,0,0.1); margin-top: 2rem; overflow: hidden; position: relative;">
    <div class="position-absolute top-0 end-0 p-3 d-none d-lg-block">
      <div class="d-flex gap-2">
        <div class="rounded-circle bg-white bg-opacity-10" style="width: 12px; height: 12px;"></div>
        <div class="rounded-circle bg-white bg-opacity-10" style="width: 12px; height: 12px;"></div>
        <div class="rounded-circle bg-white bg-opacity-10" style="width: 12px; height: 12px;"></div>
      </div>
    </div>

    <div class="row align-items-center">
      <div class="col-lg-6 p-5">
        <h1 class="fw-bold mb-4 text-white">API Management</h1>
        <p class="lead mb-4 text-white-50">Simple dashboard to control your APIs</p>
        <div class="d-flex gap-3">
          <% if (locals.user) { %>
            <a href="/admin/dashboard" class="btn btn-lg"
              style="background-color: white; color: var(--primary-color); font-weight: 600;">
              <i class="fas fa-tachometer-alt me-2"></i>Go to Dashboard
            </a>
            <% } else { %>
              <a href="/auth/login" class="btn btn-lg"
                style="background-color: white; color: var(--primary-color); font-weight: 600;">
                <i class="fas fa-sign-in-alt me-2"></i>Login
              </a>
              <% } %>
        </div>
      </div>
      <div class="col-lg-6 d-none d-lg-block text-center">
        <div style="position: relative; z-index: 1;">
          <div class="position-absolute"
            style="top: -20px; right: -20px; width: 100px; height: 100px; background: rgba(255,255,255,0.1); border-radius: 50%; z-index: -1;">
          </div>
          <div class="position-absolute"
            style="bottom: -30px; left: -20px; width: 150px; height: 150px; background: rgba(255,255,255,0.1); border-radius: 50%; z-index: -1;">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<% if (locals.user) { %>
  <!-- Features Section -->
  <section class="container py-5">
    <div class="card border-0 shadow-sm" style="border-radius: 20px; overflow: hidden;">
      <div class="card-body p-4 p-lg-5">
        <div class="text-center mb-5">
          <span class="badge rounded-pill px-3 py-2 mb-2"
            style="background-color: rgba(184, 183, 106, 0.1); color: var(--primary-color);">Features</span>
          <h2 class="fw-bold" style="color: var(--primary-color);">Key Features</h2>
        </div>

        <div class="row g-4">
          <div class="col-md-4">
            <div class="card h-100 border-0 shadow-sm" style="border-radius: 15px; transition: transform 0.3s;">
              <div class="card-body p-4">
                <div class="rounded-circle bg-light d-inline-flex align-items-center justify-content-center mb-4"
                  style="width: 60px; height: 60px;">
                  <i class="fas fa-lock fa-lg" style="color: var(--primary-color);"></i>
                </div>
                <h4 class="card-title fw-bold" style="color: var(--primary-color);">High Security</h4>
                <p class="card-text text-muted">Secure user authentication system with password encryption.</p>
              </div>
            </div>
          </div>

          <div class="col-md-4">
            <div class="card h-100 border-0 shadow-sm" style="border-radius: 15px; transition: transform 0.3s;">
              <div class="card-body p-4">
                <div class="rounded-circle bg-light d-inline-flex align-items-center justify-content-center mb-4"
                  style="width: 60px; height: 60px;">
                  <i class="fas fa-chart-line fa-lg" style="color: var(--primary-color);"></i>
                </div>
                <h4 class="card-title fw-bold" style="color: var(--primary-color);">Analytics Dashboard</h4>
                <p class="card-text text-muted">Monitor and analyze data through visual charts.</p>
              </div>
            </div>
          </div>

          <div class="col-md-4">
            <div class="card h-100 border-0 shadow-sm" style="border-radius: 15px; transition: transform 0.3s;">
              <div class="card-body p-4">
                <div class="rounded-circle bg-light d-inline-flex align-items-center justify-content-center mb-4"
                  style="width: 60px; height: 60px;">
                  <i class="fas fa-cogs fa-lg" style="color: var(--primary-color);"></i>
                </div>
                <h4 class="card-title fw-bold" style="color: var(--primary-color);">API Integration</h4>
                <p class="card-text text-muted">Provides API endpoints for easy data integration into other
                  applications.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- CTA Section -->
  <section class="container py-5">
    <div class="card border-0 shadow-sm"
      style="border-radius: 20px; overflow: hidden; background:  linear-gradient(135deg, var(--primary-color), var(--primary-dark)); color: white;">
      <div class="card-body p-4 p-lg-5">
        <div class="row align-items-center">
          <div class="col-lg-8 mx-auto text-center">
            <h2 class="fw-bold mb-4 text-white">Start Using CMS.HAILearning Today</h2>
            <p class="lead mb-4 text-white-50">Experience simple and effective API management system</p>
            <a href="/admin/dashboard" class="btn btn-lg"
              style="background-color: white; color: var(--primary-color); font-weight: 600; border-radius: 10px; padding: 12px 30px;">
              <i class="fas fa-tachometer-alt me-2"></i>Go to Dashboard
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>


  <% } else { %>
    <!-- Info Section for non-logged in users -->
    <section class="container py-5">
      <div class="row g-4">
        <div class="col-md-6">
          <div class="card border-0 shadow-sm h-100" style="border-radius: 20px; overflow: hidden;">
            <div class="card-body p-4">
              <div class="d-flex align-items-center mb-4">
                <div class="rounded-circle d-flex align-items-center justify-content-center me-3"
                  style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
                  <i class="fas fa-shield-alt fa-lg" style="color: var(--primary-color);"></i>
                </div>
                <h3 class="fw-bold mb-0" style="color: var(--primary-color);">Secure Access</h3>
              </div>
              <p class="text-muted mb-4">Our CMS provides secure access to manage your content with advanced
                authentication and authorization features.</p>
              <ul class="list-unstyled mb-0">
                <li class="d-flex align-items-center mb-3">
                  <i class="fas fa-check-circle me-2" style="color: var(--primary-color);"></i>
                  <span class="text-muted">Role-based access control</span>
                </li>
                <li class="d-flex align-items-center mb-3">
                  <i class="fas fa-check-circle me-2" style="color: var(--primary-color);"></i>
                  <span class="text-muted">Encrypted data transmission</span>
                </li>
                <li class="d-flex align-items-center">
                  <i class="fas fa-check-circle me-2" style="color: var(--primary-color);"></i>
                  <span class="text-muted">Secure session management</span>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <div class="col-md-6">
          <div class="card border-0 shadow-sm h-100" style="border-radius: 20px; overflow: hidden;">
            <div class="card-body p-4">
              <div class="d-flex align-items-center mb-4">
                <div class="rounded-circle d-flex align-items-center justify-content-center me-3"
                  style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
                  <i class="fas fa-code fa-lg" style="color: var(--primary-color);"></i>
                </div>
                <h3 class="fw-bold mb-0" style="color: var(--primary-color);">API Integration</h3>
              </div>
              <p class="text-muted mb-4">Access our comprehensive API documentation and integrate your applications
                seamlessly.</p>
              <ul class="list-unstyled mb-4">
                <li class="d-flex align-items-center mb-3">
                  <i class="fas fa-check-circle me-2" style="color: var(--primary-color);"></i>
                  <span class="text-muted">RESTful API endpoints</span>
                </li>
                <li class="d-flex align-items-center mb-3">
                  <i class="fas fa-check-circle me-2" style="color: var(--primary-color);"></i>
                  <span class="text-muted">JSON data format</span>
                </li>
                <li class="d-flex align-items-center">
                  <i class="fas fa-check-circle me-2" style="color: var(--primary-color);"></i>
                  <span class="text-muted">Detailed documentation</span>
                </li>
              </ul>
              <div class="text-center mt-auto">
                <a href="/auth/login" class="btn btn-primary px-4 py-2" style="border-radius: 10px;">
                  <i class="fas fa-sign-in-alt me-2"></i>Login to Access
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <% } %>