<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home - WebTact</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* Light Mode Styling */
        body.light-mode {
            background-color: #f5f5f5; /* Light grey background */
            color: #333333; /* Dark grey text */
        }

        .light-mode .navbar {
            background-color: #ffffff; /* White navbar */
        }

        .light-mode .navbar-light .navbar-nav .nav-link {
            color: #333333; /* Dark grey navbar text */
        }

        .light-mode .navbar-light .navbar-brand {
            color: #333333; /* Dark grey brand text */
        }

        .light-mode .card {
            background-color: #ffffff; /* White card background */
            color: #333333; /* Dark grey text */
        }

        .light-mode .footer {
            background-color: #ffffff; /* White footer */
            color: #333333; /* Dark grey footer text */
        }

        .light-mode .btn-primary {
            background-color: #455261; /* Blue buttons */
            border-color: #455261;
        }

        /* Dark Mode Styling */
        body.dark-mode {
            background-color: #121212; /* Dark background */
            color: #e0e0e0; /* Light grey text */
        }

        .dark-mode .navbar {
            background-color: #1c1c1c; /* Dark grey navbar */
        }

        .dark-mode .navbar-light .navbar-nav .nav-link {
            color: #e0e0e0; /* Light grey navbar text */
        }

        .dark-mode .navbar-light .navbar-brand {
            color: #e0e0e0; /* Light grey brand text */
        }

        .dark-mode .card {
            background-color: #1c1c1c; /* Dark card background */
            color: #e0e0e0; /* Light grey text */
        }

        .dark-mode .footer {
            background-color: #1c1c1c; /* Dark footer */
            color: #e0e0e0; /* Light grey footer text */
        }

        .dark-mode .btn-primary {
            background-color: #455261; /* Blue buttons */
            border-color: #455261;
        }

        /* Service Plan Card */
        .plan-card {
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .plan-card:hover {
            transform: scale(1.05);
        }

        .plan-card .card-body {
            padding: 2rem;
        }

        .plan-card .card-title {
            font-size: 1.8rem;
            font-weight: bold;
        }

        .plan-card .price {
            font-size: 2rem;
            color: #6184ac;
        }

        .plan-card .btn-order {
            background-color: #6184ac;
            border-color: #6184ac;
        }

        /* Plan Features */
        .plan-features li {
            margin-bottom: 1rem;
        }

        .checkmark {
            font-size: 1.2rem;
            color: green !important;
        }

        /* Kruisje in normale modus (licht) */
        .small-cross {
            font-size: 1.2rem;
            color: #bbb;
            opacity: 0.6;
        }

        /* Lichtere kleur voor doorstreepte tekst */
        del {
            color: #bbb;
            opacity: 0.6;
        }

        /* Welcome Section */
        .welcome-section {
            background-image:url(""); /* Voeg je afbeelding toe */
            background-size: auto; /* Zorg ervoor dat de afbeelding het gehele gedeelte bedekt */
            background-position: center center; /* Centreer de afbeelding */
            height: 30vh; /* Pas deze waarde aan op basis van hoe groot je wilt dat de sectie is */
            display: flex;
            justify-content: center;
            align-items: center;
            color: white; /* Pas de tekstkleur aan voor een beter contrast */
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Optioneel: voegt schaduw toe aan tekst voor betere leesbaarheid */
        }

        /* Light Mode Text in Welcome Section */
        .light-mode .welcome-section {
            color: #333; /* Donkere tekst voor light mode */
        }

        /* Dark Mode Text in Welcome Section */
        .dark-mode .welcome-section {
            color: #e0e0e0; /* Lichte tekst voor dark mode */
        }

        /* Dark Mode Specific Styles */
        @media (prefers-color-scheme: dark) {
            .checkmark {
                color: white !important; /* Verander de vinkjes naar wit in dark mode */
            }

            .small-cross {
                color: #999; /* Verander kruis naar lichte kleur in dark mode */
                opacity: 0.9;
            }

            del {
                color: #ddd;
                opacity: 0.9;
            }
        }

    </style>
</head>

<body class="light-mode">
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-light">
        <div class="container">
            <a class="navbar-brand" href="index.html">WebTact</a>

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="index.html">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="service.html">Services</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="Websites.html">Website Pakketen</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="contact.html">Contact</a>
                    </li>
                </ul>
                <!-- Light/Dark Mode Toggle Button -->
                <button id="toggleMode" class="btn btn-outline-primary ms-3">Switch to Dark Mode</button>
            </div>
        </div>
    </nav>

    <!-- Welcome Section with Background Image -->
    <section class="welcome-section">
<h1>Welkom bij Webtact: We maken van jou visie realiteit!

</h1>
    </section>

    <!-- Service Plans Section -->
    <section class="services-section py-5">
        <div class="container">
            <h2 class="text-center mb-5">Onze Diensten</h2>
            <div class="row">
                <!-- Website Bouwen -->
                <div class="col-md-6 mb-4">
                    <div class="card plan-card">
                        <div class="card-body">
                            <h5 class="card-title">Website Bouwen</h5>
                            <p class="price">Vanaf €199.99</p>
                            <ul class="list-unstyled plan-features">
                                <li><span class="checkmark">&#10003;</span> Op maat gemaakte website</li>
                                <li><span class="checkmark">&#10003;</span> Responsive design voor mobiel en desktop</li>
                                <li><span class="checkmark">&#10003;</span> Gebruikersvriendelijke interface</li>
                                <li><span class="checkmark">&#10003;</span> E-commerce </li>
                            </ul>
                            <a href="Websites.html" class="btn btn-order">Bestel nu</a>
                        </div>
                    </div>
                </div>

                <!-- Websites Hostten -->
                <div class="col-md-6 mb-4">
                    <div class="card plan-card">
                        <div class="card-body">
                            <h5 class="card-title">Websites Hosten</h5>
                            <p class="price">Vanaf €7.50 / Maand</p>
                            <ul class="list-unstyled plan-features">
                                <li><span class="checkmark">&#10003;</span> Betrouwbare hosting</li>
                                <li><span class="checkmark">&#10003;</span> Snelle serverlocaties</li>
                                <li><span class="checkmark">&#10003;</span> Gratis SSL-certificaat</li>
                                <li><span class="checkmark">&#10003;</span> Gratis domeinnaam</li>
                            </ul>
                            <a href="service.html" class="btn btn-order">Bestel nu</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer py-3">
        <div class="container text-center">
            <p>&copy; 2024 WebTact. All rights reserved.</p>
        </div>
    </footer>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

    <!-- JavaScript for Dark Mode Toggle -->
    <script>
        const toggleButton = document.getElementById('toggleMode');
        const body = document.body;

        // Load saved theme from localStorage
        if (localStorage.getItem('theme') === 'dark') {
            body.classList.add('dark-mode');
            body.classList.remove('light-mode');
            toggleButton.textContent = 'Switch to Light Mode';
            toggleButton.classList.remove('btn-outline-primary');
            toggleButton.classList.add('btn-outline-light');
        } else {
            body.classList.add('light-mode');
            body.classList.remove('dark-mode');
            toggleButton.textContent = 'Switch to Dark Mode';
            toggleButton.classList.remove('btn-outline-light');
            toggleButton.classList.add('btn-outline-primary');
        }

        // Toggle button event listener
        toggleButton.addEventListener('click', () => {
            if (body.classList.contains('dark-mode')) {
                body.classList.remove('dark-mode');
                body.classList.add('light-mode');
                localStorage.setItem('theme', 'light');
                toggleButton.textContent = 'Switch to Dark Mode';
                toggleButton.classList.remove('btn-outline-light');
                toggleButton.classList.add('btn-outline-primary');
            } else {
                body.classList.remove('light-mode');
                body.classList.add('dark-mode');
                localStorage.setItem('theme', 'dark');
                toggleButton.textContent = 'Switch to Light Mode';
                toggleButton.classList.remove('btn-outline-primary');
                toggleButton.classList.add('btn-outline-light');
            }
        });
    </script>
</body>

</html>