<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>About ELD Delivery</title>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
  <link rel="stylesheet" href="css/fa/all.css">
  <link rel="stylesheet" href="css/navbar.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Merriweather&display=swap');

        body {
            margin: 0;
            padding: 0;
            background-color: #1e2329;
            color: #fff;
            font-family: 'Roboto', sans-serif;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 400px;
            text-align: center;
        }

        .logo {
            margin-bottom: 30px;
        }

        .logo img {
            max-width: 100%;
            height: auto;
        }

        h1 {
            font-family: 'Merriweather', serif;
            font-weight: 700;
            font-size: 28px;
            margin-bottom: 20px;
            letter-spacing: 2px;
        }

        p.about-text {
            font-family: 'Merriweather', serif;
            font-size: 14px;
            line-height: 1.6;
            margin-bottom: 40px;
            color: #ddd;
        }

        .contact {
            margin-bottom: 40px;
        }

        .contact-item {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            font-weight: 700;
            font-size: 18px;
            color: #f5c518; /* Kuning khas */
            cursor: pointer;
            transition: color 0.3s ease;
            text-decoration: none;
        }

        .contact-item:hover {
            color: #ffeb3b;
        }

        .contact-item svg {
            width: 24px;
            height: 24px;
            margin-right: 12px;
            fill: #f5c518;
            flex-shrink: 0;
        }

        footer {
            font-size: 12px;
            color: #888;
            font-weight: 600;
        }

        footer .copyright {
            color: #f5c518;
            font-weight: 700;
            margin-bottom: 6px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="logo">
            <!-- Ganti src dengan logo Anda -->
            <img src="img/eld.png" alt="ELD Delivery Logo" />
        </div>

        <h1>ABOUT</h1>

        <p class="about-text">
            ELD NOTE is a driver mobility application specifically designed to support Driver activities in carrying out daily tasks more efficiently and organized. This application provides various features that facilitate the management of absences, recording order lists, and daily reports of related parties, thereby increasing productivity at work.
        </p>

        <div class="contact">
            <a href="https://wa.me/6281289446661" class="contact-item" target="_blank" rel="noopener noreferrer">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                    <path d="M20.52 3.48A11.94 11.94 0 0012 0C5.37 0 0 5.37 0 12a11.94 11.94 0 001.64 6.12L0 24l5.88-1.54A11.94 11.94 0 0012 24c6.63 0 12-5.37 12-12 0-3.2-1.25-6.2-3.48-8.52zM12 21.5a9.5 9.5 0 01-4.84-1.39l-.35-.22-3.5.92.93-3.41-.23-.36A9.5 9.5 0 1121.5 12 9.5 9.5 0 0112 21.5zm5.3-7.1c-.28-.14-1.65-.81-1.9-.9-.25-.1-.43-.14-.62.14-.18.28-.7.9-.86 1.08-.16.18-.32.2-.6.07-.28-.14-1.18-.44-2.25-1.39-.83-.74-1.39-1.65-1.55-1.93-.16-.28-.02-.43.12-.57.12-.12.28-.32.42-.48.14-.16.18-.28.28-.47.1-.18.05-.34-.02-.48-.07-.14-.62-1.5-.85-2.05-.22-.54-.45-.47-.62-.48-.16-.01-.34-.01-.52-.01s-.48.07-.73.34c-.25.28-.95.93-.95 2.27s.97 2.63 1.1 2.81c.14.18 1.9 2.9 4.6 4.06.64.28 1.14.45 1.53.58.64.21 1.22.18 1.68.11.51-.08 1.65-.67 1.88-1.32.23-.65.23-1.2.16-1.32-.07-.12-.25-.18-.53-.32z"/>
                </svg>
                0812 8944 6661
            </a>

            <a href="https://instagram.com/elddelivery" class="contact-item" target="_blank" rel="noopener noreferrer">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                    <path d="M7.75 2h8.5A5.75 5.75 0 0122 7.75v8.5A5.75 5.75 0 0116.25 22h-8.5A5.75 5.75 0 012 16.25v-8.5A5.75 5.75 0 017.75 2zm0 2A3.75 3.75 0 004 7.75v8.5A3.75 3.75 0 007.75 20h8.5a3.75 3.75 0 003.75-3.75v-8.5A3.75 3.75 0 0016.25 4h-8.5zm8.5 2.5a1 1 0 110 2 1 1 0 010-2zm-4.25 1.25a4.5 4.5 0 110 9 4.5 4.5 0 010-9zm0 2a2.5 2.5 0 100 5 2.5 2.5 0 000-5z"/>
                </svg>
                @elddelivery
            </a>
        </div>

        <footer>
            <div class="copyright">© <?php echo date("Y"); ?> ELD DELIVERY</div>
            <div>Developer: Bobby Iskandar</div>
            <div>App Version: 2.0</div>
        </footer>
    </div>
    <?php include 'navbar3.php'; ?>

</body>
</html>
