<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zakaria Elhariri - Professional Public Speaker</title>
    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="shortcut icon" href="assets/favicon.ico" type="image/x-icon">
</head>
<body>
    <header>
        <nav class="nav-container">
            <div class="logo">Zakaria Elhariri</div>
            <div class="hamburger">
                <span></span>
                <span></span>
                <span></span>
            </div>
            <div class="nav-links">
                <a href="#home" data-lang="home">Home</a>
                <a href="#about" data-lang="about">About</a>
                <a href="#gallery" data-lang="gallery">Gallery</a>
                <a href="#contact" data-lang="contact">Contact</a>
            </div>
        </nav>
    </header>
    <div class="sticky-social">
        <a href="https://www.linkedin.com/in/zakaria-elhariri-a54205236/" target="_blank" class="social-icon linkedin">
            <i class="fab fa-linkedin"></i>
        </a>
        <button onclick="copyEmail()" class="social-icon gmail">
            <i class="far fa-envelope"></i>
        </button>
        <div id="emailTooltip" class="tooltip">Email copied!</div>
        <button onclick="generateWhatsAppMessage()" class="social-icon whatsapp">
            <i class="fab fa-whatsapp"></i>
        </button>
        <a href="https://www.instagram.com/zakaria_elhariri20" target="_blank" class="social-icon instagram">
            <i class="fab fa-instagram"></i>
        </a>
    </div>
    <section id="home" class="hero">
        <div class="hero-content">
            <h1 data-lang="heroTitle">Professional Public Speaker</h1>
            <p data-lang="heroSubtitle">Inspiring audiences worldwide</p>
            <button onclick="generateWhatsAppMessage()" class="cta-button">Book Now</button>
        </div>
    </section>
    <section id="about" class="about">
        <div class="about-container">
            <div class="about-text">
                <h2 data-lang="aboutTitle">About Me</h2>
                <p data-lang="aboutText">With years of experience in public speaking, I help individuals and organizations deliver powerful messages that resonate with their audience.</p>
                <div class="typed-text">
                    <span id="typed"></span>
                </div>
            </div>
            <div class="about-image">
                <img src="assets/pictures/IMG_0703 (1).JPEG" alt="Zakaria Elhariri Speaking">
            </div>
        </div>
    </section>
    <section id="video" class="video-section">
        <div class="video-container">
            <video autoplay loop muted playsinline>
                <source src="assets/the video.mp4" type="video/mp4">
                Your browser does not support the video tag.
            </video>
        </div>
    </section>
    <section id="gallery" class="gallery">
        <h2 data-lang="gallery">Gallery</h2>
        <div class="gallery-grid">
            <div class="gallery-item"><img src="assets/pictures/ASM_8007.JPG" alt="Speaking Event 1"></div>
            <div class="gallery-item"><img src="assets/pictures/ASM_9844.JPG" alt="Speaking Event 2"></div>
            <div class="gallery-item"><img src="assets/pictures/DSC_0190.JPG" alt="Speaking Event 3"></div>
            <div class="gallery-item"><img src="assets/pictures/Hult Prize.png" alt="Speaking Event 4"></div>
            <div class="gallery-item"><img src="assets/pictures/IMG_0760.JPG" alt="Speaking Event 5"></div>
            <div class="gallery-item"><img src="assets/pictures/IMG_4949.JPG" alt="Speaking Event 6"></div>
            <div class="gallery-item"><img src="assets/pictures/IMG_4958.JPG" alt="Speaking Event 7"></div>
            <div class="gallery-item"><img src="assets/pictures/IMG_5197.JPEG" alt="Speaking Event 8"></div>
            <div class="gallery-item"><img src="assets/pictures/IMG_7933.JPG" alt="Speaking Event 9"></div>
            <div class="gallery-item"><img src="assets/pictures/IMG_9896.JPG" alt="Speaking Event 10"></div>
            <div class="gallery-item"><img src="assets/pictures/WhatsApp Image 2024-11-06 at 19.12.54.jpeg" alt="Speaking Event 11"></div>
            <div class="gallery-item"><img src="assets/pictures/WhatsApp Image 2024-12-13 at 21.01.03.jpeg" alt="Speaking Event 12"></div>
            <div class="gallery-item"><img src="assets/pictures/WhatsApp Image 2024-12-19 at 00.25.28.jpeg" alt="Speaking Event 13"></div>
            <div class="gallery-item"><img src="assets/pictures/unnamed (1).jpg" alt="Speaking Event 14"></div>
            <div class="gallery-item"><img src="assets/pictures/unnamed (4).jpg" alt="Speaking Event 15"></div>
            <div class="gallery-item"><img src="assets/pictures/unnamed (8).jpg" alt="Speaking Event 16"></div>
            <div class="gallery-item"><img src="assets/pictures/zakaria dar america crop.PNG" alt="Speaking Event 17"></div>
        </div>
    </section>
    <section id="contact" class="contact">
        <video class="contact-bg-video" autoplay loop muted playsinline>
            <source src="assets/the video.mp4" type="video/mp4">
        </video>
        <div class="contact-overlay"></div>
        <div class="contact-content">
            <h2 data-lang="contactTitle">Get in Touch</h2>
            <p data-lang="contactText">Book me for your next event or training session</p>
            <div class="contact-buttons">
                <button onclick="generateWhatsAppMessage()" class="contact-btn whatsapp-btn">
                    <i class="fab fa-whatsapp"></i> WhatsApp
                </button>
                <a href="https://www.instagram.com/zakaria_elhariri20" target="_blank" class="contact-btn instagram-btn">
                    <i class="fab fa-instagram"></i> Instagram
                </a>
            </div>
        </div>
    </section>
    <footer>
        <p>
            <span data-lang="footerText">Made with love by</span> 
            <a href="https://wadiebch.com" target="_blank">Wadie Bch</a> 
            <span data-lang="allRightsReserved">جميع الحقوق محفوظة</span>
            <span id="currentYear"></span>
        </p>
    </footer>
    <button id="langSwitch" class="lang-switch">
        <i class="fas fa-language"></i>
    </button>
    <button class="scroll-top">
        <i class="fas fa-arrow-up"></i>
    </button>
    <script src="js/main.js"></script>
</body>
</html>
