Files
Nicole/Old/index5.html

421 lines
22 KiB
HTML

<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JPM Security & Services</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<link rel="stylesheet" href="style5.css">
</head>
<body>
<!-- Cursor -->
<div class="cursor"></div>
<div class="cursor-follower"></div>
<!-- Preloader -->
<div class="preloader">
<div class="loader">
<div class="logo-text">JPM</div>
</div>
</div>
<!-- Header -->
<header class="header">
<div class="container-fluid">
<div class="row">
<div class="col-6">
<div class="logo">
<a href="#home">
<div class="logo-text">JPM</div>
<div class="logo-tagline">SECURITY & SERVICES</div>
</a>
</div>
</div>
<div class="col-6 text-end">
<div class="menu-toggle">
<span>Menu</span>
<div class="hamburger">
<span></span>
<span></span>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Full Screen Menu -->
<div class="fullscreen-menu">
<div class="menu-close">
<span>Sluiten</span>
<div class="close-btn">
<span></span>
<span></span>
</div>
</div>
<div class="menu-content">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="menu-links">
<ul>
<li><a href="#home" class="menu-link">Home</a></li>
<li><a href="#diensten" class="menu-link">Diensten</a></li>
<li><a href="#over-ons" class="menu-link">Over Ons</a></li>
<li><a href="#contact" class="menu-link">Contact</a></li>
</ul>
</div>
</div>
<div class="col-lg-6">
<div class="menu-info">
<h3>Contact Info</h3>
<p><i class="fas fa-map-marker-alt"></i> Hoofdstraat 123, 1234 AB Amsterdam</p>
<p><i class="fas fa-phone"></i> +31 20 123 4567</p>
<div class="menu-social">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Main Content -->
<main>
<!-- Hero Section -->
<section id="home" class="hero-section">
<div class="container-fluid p-0">
<div class="row g-0">
<div class="col-lg-6">
<div class="hero-content">
<div data-aos="fade-up" data-aos-delay="200">
<h1 class="hero-title">JPM</h1>
<h2 class="hero-subtitle">SECURITY & SERVICES</h2>
<p class="hero-text">Uw partner in beveiliging & dienstverlening</p>
<div class="hero-btns">
<a href="#diensten" class="btn btn-primary">Ontdek Onze Diensten</a>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="hero-image">
<div class="hero-img-inner"></div>
</div>
</div>
</div>
</div>
<div class="scroll-down">
<a href="#diensten">
<div class="mouse">
<div class="wheel"></div>
</div>
<div class="arrow">
<span></span>
<span></span>
<span></span>
</div>
</a>
</div>
</section>
<!-- Services Section -->
<section id="diensten" class="services-section">
<div class="container">
<div class="section-header" data-aos="fade-up">
<span class="section-subtitle">Onze Diensten</span>
<h2 class="section-title">Wat Wij Bieden</h2>
<p class="section-description">Professionele oplossingen voor al uw beveiligings- en servicebehoeften</p>
</div>
<div class="row">
<div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="100">
<div class="service-card">
<div class="service-icon">
<i class="fas fa-shield-alt"></i>
</div>
<h3>Beveiliging</h3>
<p>Professionele beveiligingsdiensten voor evenementen, bedrijven en particulieren. Onze gecertificeerde beveiligers zijn getraind in de nieuwste veiligheidstechnieken en werken met geavanceerde beveiligingssystemen om optimale bescherming te bieden voor uw mensen, eigendommen en reputatie.</p>
<a href="#contact" class="service-link">
<span>Meer Info</span>
<i class="fas fa-arrow-right"></i>
</a>
</div>
</div>
<div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="200">
<div class="service-card">
<div class="service-icon">
<i class="fas fa-utensils"></i>
</div>
<h3>Catering</h3>
<p>Hoogwaardige cateringdiensten voor zakelijke en privé-evenementen. Van exclusieve diners tot grote recepties, onze culinaire experts zorgen voor een onvergetelijke gastronomische ervaring met seizoensgebonden en lokale ingrediënten, afgestemd op uw specifieke wensen en dieetvereisten.</p>
<a href="#contact" class="service-link">
<span>Meer Info</span>
<i class="fas fa-arrow-right"></i>
</a>
</div>
</div>
<div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="300">
<div class="service-card">
<div class="service-icon">
<i class="fas fa-concierge-bell"></i>
</div>
<h3>Conciërge</h3>
<p>Exclusieve conciërgediensten voor bedrijven en luxe residenties. Onze discrete en efficiënte conciërges anticiperen op uw behoeften en zorgen voor een naadloze ervaring, van het regelen van vervoer tot het organiseren van speciale evenementen en het coördineren van onderhoudsdiensten.</p>
<a href="#contact" class="service-link">
<span>Meer Info</span>
<i class="fas fa-arrow-right"></i>
</a>
</div>
</div>
<div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="400">
<div class="service-card">
<div class="service-icon">
<i class="fas fa-hands-helping"></i>
</div>
<h3>Ondersteuning</h3>
<p>Aanvullende diensten op maat voor uw specifieke behoeften. Onze flexibele ondersteuningsdiensten omvatten administratieve hulp, facilitair beheer, en logistieke ondersteuning, allemaal afgestemd op uw unieke eisen en verwachtingen om uw organisatie soepel te laten functioneren.</p>
<a href="#contact" class="service-link">
<span>Meer Info</span>
<i class="fas fa-arrow-right"></i>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="over-ons" class="about-section">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6" data-aos="fade-right">
<div class="about-image">
<div class="about-img-inner"></div>
<div class="about-pattern"></div>
</div>
</div>
<div class="col-lg-6" data-aos="fade-left">
<div class="about-content">
<span class="section-subtitle">Over Ons</span>
<h2 class="section-title">Wie Wij Zijn</h2>
<p>JPM Security & Services is een toonaangevende leverancier van beveiligings- en aanvullende diensten in Nederland. Met meer dan 15 jaar ervaring in de branche bieden wij professionele oplossingen die voldoen aan de hoogste standaarden.</p>
<p>Onze missie is om betrouwbare en hoogwaardige diensten te leveren die bijdragen aan de veiligheid en het comfort van onze klanten. Wij geloven in een persoonlijke aanpak en streven naar langdurige relaties met onze klanten.</p>
<p>Sinds onze oprichting in 2010 hebben we een sterke reputatie opgebouwd voor uitmuntendheid en betrouwbaarheid. Ons team van meer dan 50 professionals heeft een brede expertise in verschillende sectoren, waaronder retail, horeca, evenementen, en vastgoed. Deze diversiteit stelt ons in staat om geïntegreerde oplossingen te bieden die perfect aansluiten bij de unieke behoeften van elke klant.</p>
<div class="about-values">
<h3>Onze Kernwaarden</h3>
<div class="values-grid">
<div class="value-item" data-aos="zoom-in" data-aos-delay="100">
<div class="value-icon">
<i class="fas fa-check-circle"></i>
</div>
<h4>Betrouwbaarheid</h4>
<p>Wij staan altijd voor u klaar, ongeacht de omstandigheden of het tijdstip</p>
</div>
<div class="value-item" data-aos="zoom-in" data-aos-delay="200">
<div class="value-icon">
<i class="fas fa-user-tie"></i>
</div>
<h4>Professionaliteit</h4>
<p>Hoogopgeleide medewerkers met relevante certificeringen en continue training</p>
</div>
<div class="value-item" data-aos="zoom-in" data-aos-delay="300">
<div class="value-icon">
<i class="fas fa-gem"></i>
</div>
<h4>Kwaliteit</h4>
<p>Dienstverlening van het hoogste niveau met aandacht voor detail en klanttevredenheid</p>
</div>
<div class="value-item" data-aos="zoom-in" data-aos-delay="400">
<div class="value-icon">
<i class="fas fa-balance-scale"></i>
</div>
<h4>Integriteit</h4>
<p>Eerlijk en transparant in alles wat we doen, met respect voor privacy en vertrouwelijkheid</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="cta-section">
<div class="container">
<div class="cta-inner" data-aos="zoom-in">
<div class="row align-items-center">
<div class="col-lg-9">
<div class="cta-content">
<h2>Klaar om uw beveiliging en service naar een hoger niveau te tillen?</h2>
<p>Neem vandaag nog contact met ons op voor een vrijblijvende offerte en ontdek hoe JPM Security & Services uw organisatie kan ondersteunen.</p>
</div>
</div>
<div class="col-lg-3 text-lg-end">
<a href="#contact" class="btn btn-light">Neem Contact Op</a>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="contact-section">
<div class="container">
<div class="section-header" data-aos="fade-up">
<span class="section-subtitle">Contact</span>
<h2 class="section-title">Neem Contact Met Ons Op</h2>
<p class="section-description">Gebruik onze contactgegevens om contact met ons op te nemen</p>
</div>
<div class="row">
<div class="col-lg-8 mx-auto" data-aos="fade-up">
<div class="contact-info-box">
<div class="contact-info-header">
<h3>Contactgegevens</h3>
</div>
<div class="contact-info-content">
<div class="contact-info-item">
<div class="icon">
<i class="fas fa-map-marker-alt"></i>
</div>
<div class="text">
<h4>Adres</h4>
<p>Hoofdstraat 123, 1234 AB Amsterdam</p>
</div>
</div>
<div class="contact-info-item">
<div class="icon">
<i class="fas fa-phone"></i>
</div>
<div class="text">
<h4>Telefoon</h4>
<p>+31 20 123 4567</p>
</div>
</div>
</div>
<div class="contact-social">
<h4>Volg ons</h4>
<div class="social-icons">
<a href="#" class="social-icon"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="social-icon"><i class="fab fa-linkedin-in"></i></a>
<a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col-lg-8 mx-auto" data-aos="fade-up" data-aos-delay="200">
<div class="additional-info-box">
<div class="additional-info-header">
<h3>Meer Informatie</h3>
</div>
<div class="additional-info-content">
<div class="row">
<div class="col-md-6">
<div class="info-block">
<h4>Openingstijden</h4>
<ul class="list-unstyled">
<li><strong>Maandag - Vrijdag:</strong> 9:00 - 17:00</li>
<li><strong>Zaterdag:</strong> 10:00 - 14:00</li>
<li><strong>Zondag:</strong> Gesloten</li>
</ul>
<p>Voor noodgevallen zijn wij 24/7 bereikbaar via ons telefoonnummer.</p>
</div>
</div>
<div class="col-md-6">
<div class="info-block">
<h4>Certificeringen</h4>
<ul class="list-unstyled">
<li>• ISO 9001:2015 - Kwaliteitsmanagement</li>
<li>• VCA** - Veiligheid, Gezondheid en Milieu</li>
<li>• Lid van de Nederlandse Veiligheidsbranche</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="footer-widget about-widget">
<div class="footer-logo">
<div class="logo-text">JPM</div>
<div class="logo-tagline">SECURITY & SERVICES</div>
</div>
<p>Professionele beveiligings- en servicediensten voor bedrijven en particulieren. Wij bieden hoogwaardige dienstverlening met een persoonlijke aanpak.</p>
</div>
</div>
<div class="col-lg-2 col-md-6">
<div class="footer-widget links-widget">
<h3>Links</h3>
<ul class="footer-links">
<li><a href="#home">Home</a></li>
<li><a href="#diensten">Diensten</a></li>
<li><a href="#over-ons">Over Ons</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="footer-widget services-widget">
<h3>Diensten</h3>
<ul class="footer-links">
<li><a href="#diensten">Beveiliging</a></li>
<li><a href="#diensten">Catering</a></li>
<li><a href="#diensten">Conciërge</a></li>
<li><a href="#diensten">Ondersteuning</a></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="footer-widget contact-widget">
<h3>Contact</h3>
<ul class="footer-contact-info">
<li><i class="fas fa-map-marker-alt"></i> Hoofdstraat 123, 1234 AB Amsterdam</li>
<li><i class="fas fa-phone"></i> +31 20 123 4567</li>
</ul>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="row">
<div class="col-md-6">
<p class="copyright">&copy; 2025 JPM Security & Services. Alle rechten voorbehouden.</p>
</div>
<div class="col-md-6 text-md-end">
<div class="footer-bottom-links">
<a href="#">Privacybeleid</a>
<a href="#">Algemene voorwaarden</a>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- Back to Top -->
<a href="#" class="back-to-top">
<i class="fas fa-arrow-up"></i>
</a>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script src="script.js"></script>
</body>
</html>