365DevNet/Nicole
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove all image assets, HTML files, stylesheets, scripts, and documentation from the project.

Browse Source
This commit is contained in:
becarta
2025-05-18 21:33:30 +02:00
parent 0fe2099c9d
commit ea09fdad9f
56 changed files with 8807 additions and 6627 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
.gitignore vendored Normal file
View File

@@ -0,0 +1,24 @@
# build output
dist/
# generated types
.astro/
# dependencies
node_modules/
# logs
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# environment variables
.env
.env.production
# macOS-specific files
.DS_Store
# jetbrains setting folder
.idea/

4
.vscode/extensions.json vendored Normal file
View File

@@ -0,0 +1,4 @@
{
"recommendations": ["astro-build.astro-vscode"],
"unwantedRecommendations": []
}

11
.vscode/launch.json vendored Normal file
View File

@@ -0,0 +1,11 @@
{
"version": "0.2.0",
"configurations": [
{
"command": "./node_modules/.bin/astro dev",
"name": "Development server",
"request": "launch",
"type": "node-terminal"
}
]
}

BIN
IMG_4032.JPG
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.6 MiB

BIN
Old/3366B190-203B-475F-B20A-8E051206AE73_1_102_o.jpeg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 MiB

BIN
Old/A2D3B646-3E67-4CB7-95AE-3C4BCF8A4D83_1_102_o.jpeg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 640 KiB

9
Old/LICENSE
View File

@@ -1,9 +0,0 @@
MIT License
Copyright (c) 2025 Richard
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

46
Old/README.md
View File

@@ -1,46 +0,0 @@
# JPM Security & Services
This repository contains multiple versions of the JPM Security & Services website, showcasing different design iterations and layouts. The site serves as a professional platform for JPM Security & Services, a security and services company.
## Overview
The website features multiple design versions (index.html through index6.html), each with its own unique styling and layout approach. The site is built using modern web technologies and follows responsive design principles.
## Features
- Multiple design iterations for comparison and selection
- Responsive design that works across all devices
- Modern UI with gradient effects and smooth animations
- Bootstrap 5 integration for robust layout and components
- Font Awesome icons for enhanced visual elements
- Custom CSS styling with modern design principles
## Technical Stack
- HTML5
- CSS3 (with custom styling)
- JavaScript
- Bootstrap 5
- Font Awesome 6.0.0
## File Structure
- `index.html` - Main landing page with version selection
- `index2.html` through `index6.html` - Alternative design versions
- `style.css` through `style6.css` - Corresponding stylesheets for each version
- `script.js` - JavaScript functionality
- Various image assets for visual content
## Getting Started
1. Clone the repository
2. Open `index.html` in your web browser to view the main landing page
3. Navigate through different versions using the provided links
## Design Versions
Each version (1-6) offers a unique take on the website's design, allowing for easy comparison and selection of the preferred layout and style.
## License
This project is licensed under the terms included in the LICENSE file.

BIN
Old/ben-rosett-WdJkXFQ4VHY-unsplash.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 324 KiB

BIN
Old/cytonn-photography-n95VMLxqM2I-unsplash.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 316 KiB

274
Old/index.html
View File

@@ -1,274 +0,0 @@
<!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 - Versie Selectie</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">
<style>
:root {
--primary-dark: #1a1f2c;
--primary-light: #ffffff;
--accent-color: #2c3e50;
--accent-hover: #34495e;
--text-light: #f8f9fa;
--text-dark: #2c3e50;
--gradient-start: #2c3e50;
--gradient-end: #3498db;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f8f9fa;
color: var(--text-dark);
line-height: 1.6;
}
.header {
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
color: var(--text-light);
padding: 4rem 0;
text-align: center;
margin-bottom: 4rem;
position: relative;
overflow: hidden;
}
.header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('cytonn-photography-n95VMLxqM2I-unsplash.jpg') center/cover;
opacity: 0.1;
z-index: 0;
}
.header .container {
position: relative;
z-index: 1;
}
.header h1 {
font-weight: 800;
letter-spacing: 8px;
margin-bottom: 0;
font-size: 3.5rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}
.header h2 {
font-size: 1.4rem;
letter-spacing: 4px;
font-weight: 400;
margin-bottom: 1.5rem;
text-transform: uppercase;
}
.version-card {
background: var(--primary-light);
border: none;
border-radius: 15px;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
height: 100%;
margin-bottom: 2rem;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.version-card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.version-img {
height: 250px;
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
}
.version-img::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50%;
background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
}
.version-content {
padding: 2rem;
position: relative;
}
.version-content h3 {
margin-bottom: 1.5rem;
font-weight: 700;
color: var(--accent-color);
font-size: 1.8rem;
}
.version-content p {
color: #666;
margin-bottom: 1.5rem;
}
.btn-view {
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
color: var(--text-light);
border: none;
padding: 12px 25px;
border-radius: 30px;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 1px;
transition: all 0.3s ease;
display: inline-block;
margin-top: 1rem;
position: relative;
overflow: hidden;
}
.btn-view::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: 0.5s;
}
.btn-view:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.btn-view:hover::before {
left: 100%;
}
.footer {
background: var(--primary-dark);
color: var(--text-light);
padding: 3rem 0;
text-align: center;
margin-top: 4rem;
}
.footer p {
margin-bottom: 0;
opacity: 0.8;
}
.version-1-img { background-image: url('cytonn-photography-n95VMLxqM2I-unsplash.jpg'); }
.version-2-img { background-image: url('cytonn-photography-n95VMLxqM2I-unsplash.jpg'); }
.version-3-img { background-image: url('cytonn-photography-n95VMLxqM2I-unsplash.jpg'); }
.version-4-img { background-image: url('cytonn-photography-n95VMLxqM2I-unsplash.jpg'); }
.version-5-img { background-image: url('cytonn-photography-n95VMLxqM2I-unsplash.jpg'); }
@media (max-width: 768px) {
.header {
padding: 3rem 0;
}
.header h1 {
font-size: 2.5rem;
}
.version-card {
margin-bottom: 1.5rem;
}
}
</style>
</head>
<body>
<!-- Header -->
<header class="header">
<div class="container">
<h1>JPM</h1>
<h2>SECURITY & SERVICES</h2>
<p>Selecteer een versie van de website om te bekijken</p>
</div>
</header>
<!-- Version Selection -->
<section class="version-selection">
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-4">
<div class="version-card">
<div class="version-img version-1-img"></div>
<div class="version-content">
<h3>Versie 1</h3>
<p>Een moderne, responsieve website met een clean design en een focus op professionaliteit. Deze versie heeft een full-screen hero sectie en een duidelijke presentatie van diensten.</p>
<p><strong>Kenmerken:</strong> Bootstrap framework, full-screen hero sectie, responsief design</p>
<a href="index6.html" class="btn-view" target="_blank">Bekijk Versie 1</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="version-card">
<div class="version-img version-2-img"></div>
<div class="version-content">
<h3>Versie 2</h3>
<p>Een minimalistische website met zijnavigatie voor een unieke gebruikerservaring. Deze versie legt de nadruk op elegantie en eenvoud met een strakke layout.</p>
<p><strong>Kenmerken:</strong> Zijnavigatie, minimalistische stijl, sectienummering</p>
<a href="index2.html" class="btn-view" target="_blank">Bekijk Versie 2</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="version-card">
<div class="version-img version-3-img"></div>
<div class="version-content">
<h3>Versie 3</h3>
<p>Een full-screen website met parallax effecten voor een moderne en dynamische uitstraling. Deze versie biedt een meeslepende gebruikerservaring met visuele diepte.</p>
<p><strong>Kenmerken:</strong> Parallax effecten, preloader, scroll-animaties</p>
<a href="index3.html" class="btn-view" target="_blank">Bekijk Versie 3</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="version-card">
<div class="version-img version-4-img"></div>
<div class="version-content">
<h3>Versie 4</h3>
<p>Een corporate en professionele website met clean lines en een gestructureerde layout. Deze versie is perfect voor een zakelijke uitstraling met duidelijke informatiehiërarchie.</p>
<p><strong>Kenmerken:</strong> Corporate design, feature boxes, top bar met contactinfo</p>
<a href="index4.html" class="btn-view" target="_blank">Bekijk Versie 4</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="version-card">
<div class="version-img version-5-img"></div>
<div class="version-content">
<h3>Versie 5</h3>
<p>Een creatieve en moderne website met animaties en visuele elementen. Deze versie biedt een unieke gebruikerservaring met interactieve elementen en een stijlvol design.</p>
<p><strong>Kenmerken:</strong> Animaties, custom cursor, fullscreen menu, AOS effecten</p>
<a href="index5.html" class="btn-view" target="_blank">Bekijk Versie 5</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<p>&copy; 2025 JPM Security & Services. Alle rechten voorbehouden.</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

284
Old/index2.html
View File

@@ -1,284 +0,0 @@
<!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="style2.css">
</head>
<body>
<!-- Side Navigation -->
<div class="side-nav">
<div class="logo-container">
<div class="logo-text">JPM</div>
<div class="logo-subtext">SECURITY & SERVICES</div>
</div>
<nav>
<ul>
<li><a href="#home" class="active">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>
</nav>
<div class="nav-footer">
<div class="social-links">
<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>
<p>&copy; 2025 JPM</p>
</div>
</div>
<!-- Mobile Navigation -->
<div class="mobile-nav">
<div class="container">
<div class="mobile-nav-header">
<div class="logo-text">JPM</div>
<button class="menu-toggle">
<span></span>
<span></span>
<span></span>
</button>
</div>
</div>
<div class="mobile-menu">
<nav>
<ul>
<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>
</nav>
<div class="mobile-social-links">
<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>
<!-- Main Content -->
<main class="main-content">
<!-- Hero Section -->
<section id="home" class="hero-section">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 hero-content">
<div class="hero-logo"></div>
<h1>JPM</h1>
<h2>SECURITY & SERVICES</h2>
<p class="hero-text">Uw partner in beveiliging & dienstverlening</p>
<a href="#contact" class="btn btn-primary">Neem contact op</a>
</div>
<div class="col-lg-6 hero-image">
<div class="overlay"></div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="diensten" class="services-section">
<div class="container">
<div class="section-header">
<span class="section-number">01</span>
<h2>Onze Diensten</h2>
<p>Professionele oplossingen voor al uw beveiligings- en servicebehoeften</p>
</div>
<div class="row services-grid">
<div class="col-md-6">
<div class="service-item">
<div class="service-icon">
<i class="fas fa-shield-alt"></i>
</div>
<div class="service-content">
<h3>Beveiliging</h3>
<p>Professionele beveiligingsdiensten voor evenementen, bedrijven en particulieren. Onze getrainde beveiligers zorgen voor een veilige omgeving met geavanceerde beveiligingssystemen en protocollen. Wij bieden zowel fysieke beveiliging als elektronische beveiligingsoplossingen, afgestemd op uw specifieke situatie.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="service-item">
<div class="service-icon">
<i class="fas fa-utensils"></i>
</div>
<div class="service-content">
<h3>Catering</h3>
<p>Hoogwaardige cateringdiensten voor zakelijke en privé-evenementen. Wij verzorgen smakelijke maaltijden en verfrissende dranken met aandacht voor detail en presentatie. Onze ervaren chef-koks bereiden gerechten met verse, lokale ingrediënten en kunnen rekening houden met diverse dieetwensen en culturele voorkeuren.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="service-item">
<div class="service-icon">
<i class="fas fa-concierge-bell"></i>
</div>
<div class="service-content">
<h3>Conciërge</h3>
<p>Exclusieve conciërgediensten voor bedrijven en luxe residenties. Onze conciërges staan 24/7 voor u klaar om aan al uw wensen te voldoen, van het regelen van vervoer en reserveringen tot het coördineren van onderhoudsdiensten. Wij bieden een persoonlijke service die uw comfort en gemak maximaliseert.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="service-item">
<div class="service-icon">
<i class="fas fa-hands-helping"></i>
</div>
<div class="service-content">
<h3>Ondersteuning</h3>
<p>Aanvullende diensten op maat voor uw specifieke behoeften. Wij denken met u mee en bieden oplossingen die bij uw situatie passen, van administratieve ondersteuning tot facilitair beheer. Onze flexibele aanpak zorgt ervoor dat we snel kunnen inspelen op veranderende omstandigheden en nieuwe uitdagingen.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="over-ons" class="about-section">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="section-header">
<span class="section-number">02</span>
<h2>Over Ons</h2>
</div>
<div class="about-content">
<p>JPM Security & Services is een toonaangevende leverancier van beveiligings- en aanvullende diensten in Nederland. Met jarenlange 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>Opgericht in 2010, is JPM Security & Services uitgegroeid tot een vertrouwde naam in de beveiligingsbranche. Ons team bestaat uit meer dan 50 hoogopgeleide professionals die zich dagelijks inzetten om de beste service te leveren. Wij investeren continu in training en ontwikkeling om op de hoogte te blijven van de nieuwste technieken en trends in de sector.</p>
<div class="values-grid">
<div class="value-item">
<h4>Betrouwbaarheid</h4>
<p>Wij staan altijd voor u klaar, ongeacht de omstandigheden of het tijdstip</p>
</div>
<div class="value-item">
<h4>Professionaliteit</h4>
<p>Hoogopgeleide medewerkers met relevante certificeringen en continue training</p>
</div>
<div class="value-item">
<h4>Kwaliteit</h4>
<p>Dienstverlening van het hoogste niveau met aandacht voor detail en klanttevredenheid</p>
</div>
<div class="value-item">
<h4>Integriteit</h4>
<p>Eerlijk en transparant in alles wat we doen, met respect voor privacy en vertrouwelijkheid</p>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="about-image-container">
<div class="about-image"></div>
<div class="about-image-overlay"></div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="contact-section">
<div class="container">
<div class="section-header">
<span class="section-number">03</span>
<h2>Contact</h2>
<p>Neem contact met ons op voor meer informatie of een vrijblijvende offerte</p>
</div>
<div class="row">
<div class="col-lg-8 mx-auto">
<div class="contact-info">
<div class="contact-item">
<div class="contact-icon">
<i class="fas fa-map-marker-alt"></i>
</div>
<div class="contact-text">
<h4>Adres</h4>
<p>Hoofdstraat 123, 1234 AB Amsterdam</p>
</div>
</div>
<div class="contact-item">
<div class="contact-icon">
<i class="fas fa-phone"></i>
</div>
<div class="contact-text">
<h4>Telefoon</h4>
<p>+31 20 123 4567</p>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col-lg-8 mx-auto">
<div class="business-hours">
<h3>Openingstijden</h3>
<div class="row">
<div class="col-md-6">
<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>
</div>
<div class="col-md-6">
<p>Voor noodgevallen zijn wij 24/7 bereikbaar via ons telefoonnummer.</p>
<p>Bezoek aan ons kantoor is mogelijk op afspraak.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="footer-logo">
<div class="logo-text">JPM</div>
<div class="logo-subtext">SECURITY & SERVICES</div>
</div>
</div>
<div class="col-md-4">
<div class="footer-links">
<h4>Snelle Links</h4>
<ul>
<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-md-4">
<div class="footer-contact">
<h4>Contact</h4>
<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>
</div>
</div>
<div class="footer-bottom">
<p>&copy; 2025 JPM Security & Services. Alle rechten voorbehouden.</p>
<div class="footer-legal">
<a href="#">Privacybeleid</a>
<a href="#">Algemene voorwaarden</a>
</div>
</div>
</div>
</footer>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script src="script.js"></script>
</body>
</html>

352
Old/index3.html
View File

@@ -1,352 +0,0 @@
<!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="style3.css">
</head>
<body>
<!-- Preloader -->
<div class="preloader">
<div class="logo-container">
<div class="logo-text">JPM</div>
</div>
</div>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#home">
<span class="brand-text">JPM</span>
</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 active" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#diensten">Diensten</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#over-ons">Over Ons</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Hero Section -->
<section id="home" class="hero-section">
<div class="hero-content">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto text-center">
<div class="hero-logo"></div>
<h1 class="hero-title">JPM</h1>
<h2 class="hero-subtitle">SECURITY & SERVICES</h2>
<p class="hero-text">Uw partner in beveiliging & dienstverlening</p>
<a href="#contact" class="btn btn-primary btn-lg">Neem contact op</a>
</div>
</div>
</div>
</div>
<div class="scroll-down">
<a href="#diensten">
<span></span>
<span></span>
<span></span>
</a>
</div>
</section>
<!-- Services Section -->
<section id="diensten" class="services-section">
<div class="container">
<div class="row">
<div class="col-lg-6 offset-lg-3 text-center">
<div class="section-title">
<span class="subtitle">Wat wij bieden</span>
<h2>Onze Diensten</h2>
<p>Professionele oplossingen voor al uw beveiligings- en servicebehoeften</p>
</div>
</div>
</div>
<div class="row services-container">
<div class="col-md-6 col-lg-3">
<div class="service-box">
<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.</p>
<a href="#contact" class="service-link">Meer info <i class="fas fa-arrow-right"></i></a>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="service-box">
<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.</p>
<a href="#contact" class="service-link">Meer info <i class="fas fa-arrow-right"></i></a>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="service-box">
<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.</p>
<a href="#contact" class="service-link">Meer info <i class="fas fa-arrow-right"></i></a>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="service-box">
<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.</p>
<a href="#contact" class="service-link">Meer info <i class="fas fa-arrow-right"></i></a>
</div>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="over-ons" class="about-section parallax-section">
<div class="parallax-bg"></div>
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="about-content">
<div class="section-title light">
<span class="subtitle">Wie wij zijn</span>
<h2>Over Ons</h2>
</div>
<p>JPM Security & Services is een toonaangevende leverancier van beveiligings- en aanvullende diensten in Nederland. Met jarenlange 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 Waarden</h3>
<div class="values-container">
<div class="value-item">
<div class="value-icon">
<i class="fas fa-check-circle"></i>
</div>
<div class="value-text">
<h4>Betrouwbaarheid</h4>
<p>Wij staan altijd voor u klaar, ongeacht de omstandigheden of het tijdstip</p>
</div>
</div>
<div class="value-item">
<div class="value-icon">
<i class="fas fa-user-tie"></i>
</div>
<div class="value-text">
<h4>Professionaliteit</h4>
<p>Hoogopgeleide medewerkers met relevante certificeringen en continue training</p>
</div>
</div>
<div class="value-item">
<div class="value-icon">
<i class="fas fa-gem"></i>
</div>
<div class="value-text">
<h4>Kwaliteit</h4>
<p>Dienstverlening van het hoogste niveau met aandacht voor detail en klanttevredenheid</p>
</div>
</div>
<div class="value-item">
<div class="value-icon">
<i class="fas fa-balance-scale"></i>
</div>
<div class="value-text">
<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 class="col-lg-6">
<div class="about-image">
<div class="image-frame">
<div class="image-content"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="cta-section">
<div class="container">
<div class="cta-inner">
<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="row">
<div class="col-lg-6 offset-lg-3 text-center">
<div class="section-title">
<span class="subtitle">Contact</span>
<h2>Neem Contact Met Ons Op</h2>
<p>Gebruik onze contactgegevens om contact met ons op te nemen</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-8 mx-auto">
<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">
<div class="business-hours-box">
<div class="business-hours-header">
<h3>Openingstijden</h3>
</div>
<div class="business-hours-content">
<div class="row">
<div class="col-md-6">
<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>
</div>
<div class="col-md-6">
<p>Voor noodgevallen zijn wij 24/7 bereikbaar via ons telefoonnummer.</p>
<p>Bezoek aan ons kantoor is mogelijk op afspraak.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="footer-about">
<div class="footer-logo">
<div class="logo-text">JPM</div>
<div class="logo-subtext">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-4">
<div class="footer-links">
<h3>Snelle Links</h3>
<ul>
<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-4">
<div class="footer-newsletter">
<h3>Certificeringen</h3>
<p>JPM Security & Services is trots op onze certificeringen en lidmaatschappen:</p>
<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 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-legal">
<a href="#">Privacybeleid</a>
<a href="#">Algemene voorwaarden</a>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- Back to Top Button -->
<a href="#" class="back-to-top">
<i class="fas fa-chevron-up"></i>
</a>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script src="script.js"></script>
</body>
</html>

429
Old/index4.html
View File

@@ -1,429 +0,0 @@
<!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="style4.css">
</head>
<body>
<!-- Top Bar -->
<div class="top-bar">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="top-contact">
<span><i class="fas fa-phone"></i> +31 20 123 4567</span>
<span><i class="fas fa-map-marker-alt"></i> Amsterdam, NL</span>
</div>
</div>
<div class="col-md-6">
<div class="top-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>
<!-- Header -->
<header class="header">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-3">
<div class="logo">
<a href="index.html">
<div class="logo-img"></div>
<div class="logo-text">
<span class="logo-main">JPM</span>
<span class="logo-sub">SECURITY & SERVICES</span>
</div>
</a>
</div>
</div>
<div class="col-lg-9">
<nav class="main-nav">
<ul>
<li><a href="#home" class="active">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>
<li><a href="#contact" class="nav-btn">Offerte Aanvragen</a></li>
</ul>
</nav>
<div class="mobile-menu-toggle">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</div>
</header>
<!-- Mobile Menu -->
<div class="mobile-menu">
<div class="container">
<ul>
<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>
<li><a href="#contact" class="nav-btn">Offerte Aanvragen</a></li>
</ul>
</div>
</div>
<!-- Hero Section -->
<section id="home" class="hero-section">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<div class="hero-content">
<h1>Professionele Beveiliging & Services</h1>
<p>JPM Security & Services is uw betrouwbare partner voor beveiligingsdiensten, catering, conciërge en meer. Wij bieden hoogwaardige dienstverlening met een persoonlijke aanpak en meer dan 15 jaar ervaring in de branche.</p>
<div class="hero-btns">
<a href="#diensten" class="btn btn-primary">Onze Diensten</a>
<a href="#contact" class="btn btn-outline">Neem Contact Op</a>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="hero-image">
<div class="hero-img-container">
<div class="hero-img"></div>
</div>
<div class="hero-shape"></div>
</div>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section class="features-section">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="feature-box">
<div class="feature-icon">
<i class="fas fa-shield-alt"></i>
</div>
<h3>Betrouwbare Beveiliging</h3>
<p>Professionele beveiligingsdiensten voor uw gemoedsrust, met gecertificeerde beveiligers en moderne technologie</p>
</div>
</div>
<div class="col-md-4">
<div class="feature-box">
<div class="feature-icon">
<i class="fas fa-user-tie"></i>
</div>
<h3>Ervaren Personeel</h3>
<p>Hoogopgeleide medewerkers met jarenlange ervaring en doorlopende training in de nieuwste technieken</p>
</div>
</div>
<div class="col-md-4">
<div class="feature-box">
<div class="feature-icon">
<i class="fas fa-headset"></i>
</div>
<h3>24/7 Ondersteuning</h3>
<p>Altijd bereikbaar voor al uw vragen en behoeften, met snelle responstijden en persoonlijke service</p>
</div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="diensten" class="services-section">
<div class="container">
<div class="section-header">
<span class="section-subtitle">Wat wij bieden</span>
<h2 class="section-title">Onze Diensten</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">
<div class="service-card">
<div class="service-icon">
<i class="fas fa-shield-alt"></i>
</div>
<div class="service-content">
<h3>Beveiliging</h3>
<p>Professionele beveiligingsdiensten voor evenementen, bedrijven en particulieren. Onze getrainde beveiligers zorgen voor een veilige omgeving met geavanceerde beveiligingssystemen en risicoanalyses. Wij bieden zowel fysieke beveiliging als elektronische beveiligingsoplossingen.</p>
<a href="#contact" class="read-more">Meer informatie <i class="fas fa-arrow-right"></i></a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="service-card">
<div class="service-icon">
<i class="fas fa-utensils"></i>
</div>
<div class="service-content">
<h3>Catering</h3>
<p>Hoogwaardige cateringdiensten voor zakelijke en privé-evenementen. Ons culinaire team bereidt smakelijke maaltijden en verfrissende dranken met verse, lokale ingrediënten. Van kleine vergaderingen tot grote gala's, wij verzorgen catering op maat met aandacht voor presentatie en detail.</p>
<a href="#contact" class="read-more">Meer informatie <i class="fas fa-arrow-right"></i></a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="service-card">
<div class="service-icon">
<i class="fas fa-concierge-bell"></i>
</div>
<div class="service-content">
<h3>Conciërge</h3>
<p>Exclusieve conciërgediensten voor bedrijven en luxe residenties. Onze conciërges staan 24/7 voor u klaar om aan al uw wensen te voldoen, van het regelen van vervoer en reserveringen tot het coördineren van onderhoudsdiensten en speciale evenementen. Wij maken het leven gemakkelijker.</p>
<a href="#contact" class="read-more">Meer informatie <i class="fas fa-arrow-right"></i></a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="service-card">
<div class="service-icon">
<i class="fas fa-hands-helping"></i>
</div>
<div class="service-content">
<h3>Ondersteuning</h3>
<p>Aanvullende diensten op maat voor uw specifieke behoeften. Wij bieden flexibele oplossingen zoals administratieve ondersteuning, facilitair beheer, en logistieke diensten. Onze ervaren professionals werken nauw samen met u om de perfecte oplossing te vinden voor uw unieke situatie.</p>
<a href="#contact" class="read-more">Meer informatie <i class="fas fa-arrow-right"></i></a>
</div>
</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">
<div class="about-image">
<div class="about-img"></div>
<div class="about-experience">
<span class="years">15+</span>
<span class="text">Jaren Ervaring</span>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="about-content">
<span class="section-subtitle">Over Ons</span>
<h2 class="section-title">Uw Betrouwbare Partner in Beveiliging & Dienstverlening</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>Wat ons onderscheidt is onze holistische benadering van dienstverlening. Door beveiliging, catering, conciërge en ondersteunende diensten te combineren, kunnen we een naadloze en geïntegreerde ervaring bieden. Onze klanten waarderen deze one-stop-shop aanpak, die tijd bespaart en zorgt voor consistente kwaliteit over alle diensten heen.</p>
<div class="about-features">
<div class="row">
<div class="col-md-6">
<div class="about-feature-item">
<div class="icon"><i class="fas fa-check"></i></div>
<div class="text">Betrouwbaarheid</div>
</div>
</div>
<div class="col-md-6">
<div class="about-feature-item">
<div class="icon"><i class="fas fa-check"></i></div>
<div class="text">Professionaliteit</div>
</div>
</div>
<div class="col-md-6">
<div class="about-feature-item">
<div class="icon"><i class="fas fa-check"></i></div>
<div class="text">Kwaliteit</div>
</div>
</div>
<div class="col-md-6">
<div class="about-feature-item">
<div class="icon"><i class="fas fa-check"></i></div>
<div class="text">Integriteit</div>
</div>
</div>
</div>
</div>
<a href="#contact" class="btn btn-primary">Neem Contact Op</a>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="cta-section">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-8">
<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-4 text-lg-end">
<a href="#contact" class="btn btn-light">Offerte Aanvragen</a>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="contact-section">
<div class="container">
<div class="section-header">
<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">
<div class="contact-info">
<div class="contact-info-item">
<div class="icon">
<i class="fas fa-map-marker-alt"></i>
</div>
<div class="content">
<h4>Ons 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="content">
<h4>Telefoon</h4>
<p>+31 20 123 4567</p>
</div>
</div>
<div class="contact-info-item">
<div class="icon">
<i class="fas fa-clock"></i>
</div>
<div class="content">
<h4>Openingstijden</h4>
<p>Maandag - Vrijdag: 9:00 - 17:00</p>
<p>Zaterdag: 10:00 - 14:00</p>
<p>Zondag: Gesloten</p>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col-lg-8 mx-auto">
<div class="additional-info">
<h3>Meer Informatie</h3>
<div class="row">
<div class="col-md-6">
<div class="info-box">
<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 class="col-md-6">
<div class="info-box">
<h4>Werkgebied</h4>
<p>Wij zijn actief in heel Nederland, met focus op de Randstad (Amsterdam, Rotterdam, Den Haag, Utrecht) en omliggende gebieden.</p>
<p>Voor grote projecten zijn wij ook beschikbaar in België en Duitsland.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="footer-top">
<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">
<span class="logo-main">JPM</span>
<span class="logo-sub">SECURITY & SERVICES</span>
</div>
</div>
<p>Professionele beveiligings- en servicediensten voor bedrijven en particulieren. Wij bieden hoogwaardige dienstverlening met een persoonlijke aanpak.</p>
<div class="footer-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 class="col-lg-2 col-md-6">
<div class="footer-widget links-widget">
<h3 class="footer-widget-title">Snelle 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 class="footer-widget-title">Onze 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 class="footer-widget-title">Contact Info</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>
</div>
<div class="footer-bottom">
<div class="container">
<div class="row align-items-center">
<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="script.js"></script>
</body>
</html>

421
Old/index5.html
View File

@@ -1,421 +0,0 @@
<!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>

203
Old/index6.html
View File

@@ -1,203 +0,0 @@
<!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="style6.css">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">
<span class="brand-text">JPM</span>
</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="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#diensten">Diensten</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#over-ons">Over Ons</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Hero Section -->
<section id="home" class="hero">
<div class="container h-100 position-relative" style="z-index: 1;">
<div class="row h-100 align-items-center">
<div class="col-lg-6">
<div class="hero-content">
<div class="logo-container mb-4">
<div class="logo-image"></div>
</div>
<h1>JPM</h1>
<h2>SECURITY & SERVICES</h2>
<p class="lead">Uw partner in beveiliging & dienstverlening</p>
<a href="#contact" class="btn btn-primary btn-lg">Neem contact op</a>
</div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="diensten" class="services py-5">
<div class="container">
<div class="section-header text-center mb-5">
<h2>Onze Diensten</h2>
<p>Professionele oplossingen voor al uw beveiligings- en servicebehoeften</p>
</div>
<div class="row">
<div class="col-md-6 col-lg-3 mb-4">
<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 getrainde beveiligers zorgen voor een veilige omgeving met 24/7 toezicht en snelle responstijden.</p>
</div>
</div>
<div class="col-md-6 col-lg-3 mb-4">
<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. Ons ervaren team verzorgt smakelijke maaltijden en verfrissende dranken, afgestemd op uw specifieke wensen en dieetvereisten.</p>
</div>
</div>
<div class="col-md-6 col-lg-3 mb-4">
<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 conciërges staan 24/7 voor u klaar om aan al uw wensen te voldoen, van reserveringen tot persoonlijke assistentie.</p>
</div>
</div>
<div class="col-md-6 col-lg-3 mb-4">
<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. Wij bieden flexibele oplossingen die naadloos aansluiten bij uw situatie, van administratieve ondersteuning tot facilitair beheer.</p>
</div>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="over-ons" class="about py-5">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 mb-4 mb-lg-0">
<div class="about-image"></div>
</div>
<div class="col-lg-6">
<div class="section-header mb-4">
<h2>Over Ons</h2>
</div>
<p>JPM Security & Services is een toonaangevende leverancier van beveiligings- en aanvullende diensten in Nederland. Met jarenlange 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>Bij JPM Security & Services begrijpen we dat elke klant unieke behoeften heeft. Daarom bieden we op maat gemaakte oplossingen die perfect aansluiten bij uw specifieke situatie. Onze flexibele aanpak en toewijding aan kwaliteit maken ons de ideale partner voor al uw beveiligings- en servicevereisten.</p>
<div class="values mt-4">
<h3>Onze Waarden</h3>
<ul>
<li><strong>Betrouwbaarheid</strong> - Wij staan altijd voor u klaar, ongeacht de omstandigheden</li>
<li><strong>Professionaliteit</strong> - Hoogopgeleide medewerkers met relevante certificeringen</li>
<li><strong>Kwaliteit</strong> - Dienstverlening van het hoogste niveau met aandacht voor detail</li>
<li><strong>Integriteit</strong> - Eerlijk en transparant in alles wat we doen, met respect voor privacy</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="contact py-5">
<div class="container">
<div class="section-header text-center mb-5">
<h2>Contact</h2>
<p>Neem contact met ons op voor meer informatie of een vrijblijvende offerte</p>
</div>
<div class="row">
<div class="col-lg-8 mx-auto mb-4">
<div class="contact-info">
<h3>Contactgegevens</h3>
<ul class="list-unstyled">
<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 class="social-links mt-4">
<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 class="row mt-4">
<div class="col-lg-8 mx-auto">
<div class="business-hours">
<h3>Openingstijden</h3>
<div class="row">
<div class="col-md-6">
<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>
</div>
<div class="col-md-6">
<p>Voor noodgevallen zijn wij 24/7 bereikbaar via ons telefoonnummer.</p>
<p>Bezoek aan ons kantoor is mogelijk op afspraak.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer py-4">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-4 text-lg-start">
<div class="footer-logo">JPM</div>
<div class="footer-tagline">SECURITY & SERVICES</div>
</div>
<div class="col-lg-4 text-lg-center">
<p class="mb-0">&copy; 2025 JPM Security & Services. Alle rechten voorbehouden.</p>
</div>
<div class="col-lg-4 text-lg-end">
<a href="#" class="text-decoration-none me-3">Privacybeleid</a>
<a href="#" class="text-decoration-none">Algemene voorwaarden</a>
</div>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script src="script.js"></script>
</body>
</html>

BIN
Old/jpm_extracted.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.4 MiB

392
Old/script.js
View File

@@ -1,392 +0,0 @@
/**
* JPM Security & Services - Main Script
* Handles interactive elements and functionality for all website versions
*/
document.addEventListener('DOMContentLoaded', function() {
// Determine which version of the website is being used
const currentPage = window.location.pathname.split('/').pop();
// Common functionality for all versions
initCommonFunctionality();
// Version-specific functionality
if (currentPage === 'index.html' || currentPage === '') {
initVersion1();
} else if (currentPage === 'index2.html') {
initVersion2();
} else if (currentPage === 'index3.html') {
initVersion3();
} else if (currentPage === 'index4.html') {
initVersion4();
} else if (currentPage === 'index5.html') {
initVersion5();
}
});
/**
* Common functionality for all website versions
*/
function initCommonFunctionality() {
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
// Get navbar height for offset (if navbar exists)
let navbarHeight = 0;
const navbar = document.querySelector('.navbar, .header');
if (navbar) {
navbarHeight = navbar.offsetHeight;
}
const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - navbarHeight;
window.scrollTo({
top: targetPosition,
behavior: 'smooth'
});
// Close mobile menu if open (different selectors for different versions)
const mobileMenu = document.querySelector('.navbar-collapse.show, .mobile-menu.active, .fullscreen-menu.active');
if (mobileMenu) {
// Different ways to close the menu depending on version
const menuToggle = document.querySelector('.navbar-toggler, .menu-toggle, .mobile-menu-toggle');
if (menuToggle) {
menuToggle.click();
}
}
}
});
});
// Form submission handling for all contact forms
const contactForms = document.querySelectorAll('.contact-form');
if (contactForms.length > 0) {
contactForms.forEach(form => {
form.addEventListener('submit', function(e) {
e.preventDefault();
// Get form data
const formData = new FormData(this);
const formValues = Object.fromEntries(formData.entries());
// Here you would typically send the data to a server
// For demonstration, we'll just show an alert
alert('Bedankt voor uw bericht! We nemen zo spoedig mogelijk contact met u op.');
// Reset the form
this.reset();
});
});
}
// Back to top button functionality
const backToTopButton = document.querySelector('.back-to-top');
if (backToTopButton) {
window.addEventListener('scroll', function() {
if (window.scrollY > 300) {
backToTopButton.classList.add('active');
} else {
backToTopButton.classList.remove('active');
}
});
backToTopButton.addEventListener('click', function(e) {
e.preventDefault();
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
}
// Preloader functionality (for versions that have it)
const preloader = document.querySelector('.preloader');
if (preloader) {
window.addEventListener('load', function() {
setTimeout(function() {
preloader.classList.add('fade-out');
setTimeout(function() {
preloader.style.display = 'none';
}, 500);
}, 1000);
});
}
}
/**
* Version 1 specific functionality
*/
function initVersion1() {
// Navbar scroll behavior
const navbar = document.querySelector('.navbar');
if (navbar) {
window.addEventListener('scroll', function() {
if (window.scrollY > 50) {
navbar.style.padding = '10px 0';
navbar.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)';
} else {
navbar.style.padding = '15px 0';
navbar.style.boxShadow = 'none';
}
});
}
// Animation on scroll (simple implementation)
const animateElements = document.querySelectorAll('.service-card, .about-image, .contact-info, .contact-form');
const animateOnScroll = function() {
animateElements.forEach(element => {
const elementPosition = element.getBoundingClientRect().top;
const windowHeight = window.innerHeight;
if (elementPosition < windowHeight - 100) {
element.style.opacity = '1';
element.style.transform = 'translateY(0)';
}
});
};
// Set initial state for animation
animateElements.forEach(element => {
element.style.opacity = '0';
element.style.transform = 'translateY(20px)';
element.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
});
// Run animation check on load and scroll
window.addEventListener('load', animateOnScroll);
window.addEventListener('scroll', animateOnScroll);
}
/**
* Version 2 specific functionality
*/
function initVersion2() {
// Mobile menu toggle
const menuToggle = document.querySelector('.menu-toggle');
const mobileMenu = document.querySelector('.mobile-menu');
if (menuToggle && mobileMenu) {
menuToggle.addEventListener('click', function() {
this.classList.toggle('active');
mobileMenu.classList.toggle('active');
});
}
// Active link highlighting
const sections = document.querySelectorAll('section[id]');
const navLinks = document.querySelectorAll('.side-nav nav ul li a, .mobile-menu nav ul li a');
window.addEventListener('scroll', function() {
let current = '';
sections.forEach(section => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if (window.scrollY >= sectionTop - 200) {
current = section.getAttribute('id');
}
});
navLinks.forEach(link => {
link.classList.remove('active');
if (link.getAttribute('href') === `#${current}`) {
link.classList.add('active');
}
});
});
}
/**
* Version 3 specific functionality
*/
function initVersion3() {
// Navbar scroll behavior
const navbar = document.querySelector('.navbar');
if (navbar) {
window.addEventListener('scroll', function() {
if (window.scrollY > 50) {
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
});
}
// Active link highlighting
const sections = document.querySelectorAll('section[id]');
const navLinks = document.querySelectorAll('.navbar-nav .nav-link');
window.addEventListener('scroll', function() {
let current = '';
sections.forEach(section => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if (window.scrollY >= sectionTop - 200) {
current = section.getAttribute('id');
}
});
navLinks.forEach(link => {
link.classList.remove('active');
if (link.getAttribute('href') === `#${current}`) {
link.classList.add('active');
}
});
});
}
/**
* Version 4 specific functionality
*/
function initVersion4() {
// Mobile menu toggle
const menuToggle = document.querySelector('.mobile-menu-toggle');
const mobileMenu = document.querySelector('.mobile-menu');
if (menuToggle && mobileMenu) {
menuToggle.addEventListener('click', function() {
this.classList.toggle('active');
mobileMenu.classList.toggle('active');
});
}
// Header scroll behavior
const header = document.querySelector('.header');
if (header) {
window.addEventListener('scroll', function() {
if (window.scrollY > 50) {
header.classList.add('scrolled');
} else {
header.classList.remove('scrolled');
}
});
}
// Active link highlighting
const sections = document.querySelectorAll('section[id]');
const navLinks = document.querySelectorAll('.main-nav ul li a, .mobile-menu ul li a');
window.addEventListener('scroll', function() {
let current = '';
sections.forEach(section => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if (window.scrollY >= sectionTop - 200) {
current = section.getAttribute('id');
}
});
navLinks.forEach(link => {
link.classList.remove('active');
if (link.getAttribute('href') === `#${current}`) {
link.classList.add('active');
}
});
});
}
/**
* Version 5 specific functionality
*/
function initVersion5() {
// Initialize AOS (Animate On Scroll) library if available
if (typeof AOS !== 'undefined') {
AOS.init({
duration: 800,
easing: 'ease-in-out',
once: true,
mirror: false
});
}
// Custom cursor
const cursor = document.querySelector('.cursor');
const cursorFollower = document.querySelector('.cursor-follower');
if (cursor && cursorFollower) {
document.addEventListener('mousemove', function(e) {
cursor.style.left = e.clientX + 'px';
cursor.style.top = e.clientY + 'px';
setTimeout(function() {
cursorFollower.style.left = e.clientX + 'px';
cursorFollower.style.top = e.clientY + 'px';
}, 100);
});
document.addEventListener('mousedown', function() {
cursor.classList.add('active');
cursorFollower.classList.add('active');
});
document.addEventListener('mouseup', function() {
cursor.classList.remove('active');
cursorFollower.classList.remove('active');
});
// Add hover effect to links and buttons
const hoverElements = document.querySelectorAll('a, button, .btn, .menu-toggle, .menu-close');
hoverElements.forEach(element => {
element.addEventListener('mouseenter', function() {
cursor.classList.add('active');
cursorFollower.classList.add('active');
});
element.addEventListener('mouseleave', function() {
cursor.classList.remove('active');
cursorFollower.classList.remove('active');
});
});
}
// Fullscreen menu toggle
const menuToggle = document.querySelector('.menu-toggle');
const menuClose = document.querySelector('.menu-close');
const fullscreenMenu = document.querySelector('.fullscreen-menu');
if (menuToggle && menuClose && fullscreenMenu) {
menuToggle.addEventListener('click', function() {
fullscreenMenu.classList.add('active');
document.body.style.overflow = 'hidden';
});
menuClose.addEventListener('click', function() {
fullscreenMenu.classList.remove('active');
document.body.style.overflow = '';
});
// Close menu when clicking on a menu link
const menuLinks = document.querySelectorAll('.menu-link');
menuLinks.forEach(link => {
link.addEventListener('click', function() {
fullscreenMenu.classList.remove('active');
document.body.style.overflow = '';
});
});
}
// Header scroll behavior
const header = document.querySelector('.header');
if (header) {
window.addEventListener('scroll', function() {
if (window.scrollY > 50) {
header.classList.add('scrolled');
} else {
header.classList.remove('scrolled');
}
});
}
}

363
Old/style.css
View File

@@ -1,363 +0,0 @@
/*
* JPM Security & Services - Style 1
* A modern, responsive design based on the business card colors
*/
:root {
--primary-dark: #0a0e17; /* Dark navy/black from the card */
--primary-light: #ffffff; /* White/silver from the card */
--accent-gray: #3a3a3a; /* Gray from the card borders */
--accent-silver: #e0e0e0; /* Lighter silver for accents */
--text-dark: #333333;
--text-light: #f8f9fa;
}
/* General Styles */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: var(--text-dark);
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
}
section {
padding: 80px 0;
}
.btn-primary {
background-color: var(--primary-dark);
border-color: var(--primary-dark);
color: var(--primary-light);
padding: 10px 25px;
border-radius: 0;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 1px;
transition: all 0.3s ease;
}
.btn-primary:hover, .btn-primary:focus {
background-color: var(--accent-gray);
border-color: var(--accent-gray);
color: var(--primary-light);
}
/* Navigation */
.navbar {
background-color: var(--primary-dark);
padding: 15px 0;
transition: all 0.3s ease;
}
.navbar-brand {
font-weight: 800;
font-size: 1.8rem;
}
.brand-text {
color: var(--primary-light);
letter-spacing: 2px;
}
.navbar-dark .navbar-nav .nav-link {
color: var(--primary-light);
font-weight: 500;
padding: 10px 15px;
transition: all 0.3s ease;
}
.navbar-dark .navbar-nav .nav-link:hover {
color: var(--accent-silver);
}
/* Hero Section */
.hero {
background-color: var(--primary-dark);
color: var(--primary-light);
height: 100vh;
position: relative;
display: flex;
align-items: center;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(10, 14, 23, 0.9) 0%, rgba(10, 14, 23, 0.7) 100%);
z-index: 1;
}
.hero .container {
position: relative;
z-index: 2;
}
.hero-content {
padding: 30px;
max-width: 600px;
}
.hero h1 {
font-size: 4rem;
font-weight: 800;
letter-spacing: 5px;
margin-bottom: 0;
}
.hero h2 {
font-size: 1.5rem;
letter-spacing: 3px;
margin-bottom: 20px;
font-weight: 400;
}
.logo-container {
width: 120px;
height: 120px;
position: relative;
}
.logo-image {
width: 100%;
height: 100%;
background-image: url('ben-rosett-WdJkXFQ4VHY-unsplash.jpg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
filter: brightness(0) invert(1);
}
/* Services Section */
.services {
background-color: var(--primary-light);
}
.section-header h2 {
color: var(--primary-dark);
margin-bottom: 15px;
position: relative;
padding-bottom: 15px;
}
.section-header h2::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 3px;
background-color: var(--primary-dark);
}
.service-card {
background-color: #f8f9fa;
padding: 30px 20px;
text-align: center;
height: 100%;
transition: all 0.3s ease;
border: 1px solid #e9ecef;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.service-icon {
font-size: 2.5rem;
color: var(--primary-dark);
margin-bottom: 20px;
}
.service-card h3 {
font-size: 1.5rem;
margin-bottom: 15px;
color: var(--primary-dark);
}
/* About Section */
.about {
background-color: #f8f9fa;
}
.about-image {
height: 400px;
background-image: url('ben-rosett-WdJkXFQ4VHY-unsplash.jpg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
border: 5px solid var(--primary-dark);
}
.values ul {
list-style: none;
padding-left: 0;
}
.values ul li {
padding: 8px 0;
border-bottom: 1px solid #e9ecef;
}
.values ul li:last-child {
border-bottom: none;
}
/* Contact Section */
.contact {
background-color: var(--primary-light);
}
.contact-info {
background-color: var(--primary-dark);
color: var(--primary-light);
padding: 30px;
height: 100%;
}
.contact-info h3 {
margin-bottom: 20px;
position: relative;
padding-bottom: 15px;
}
.contact-info h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 3px;
background-color: var(--primary-light);
}
.contact-info ul li {
margin-bottom: 15px;
display: flex;
align-items: flex-start;
}
.contact-info ul li i {
margin-right: 15px;
margin-top: 5px;
}
.social-links {
display: flex;
}
.social-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.1);
color: var(--primary-light);
border-radius: 50%;
margin-right: 10px;
transition: all 0.3s ease;
}
.social-icon:hover {
background-color: var(--primary-light);
color: var(--primary-dark);
}
.contact-form .form-control {
border-radius: 0;
padding: 12px 15px;
margin-bottom: 15px;
border: 1px solid #ced4da;
}
.contact-form .form-control:focus {
box-shadow: none;
border-color: var(--primary-dark);
}
/* Footer */
.footer {
background-color: var(--primary-dark);
color: var(--primary-light);
}
.footer a {
color: var(--primary-light);
}
.footer a:hover {
color: var(--accent-silver);
}
.footer-logo {
font-size: 2rem;
font-weight: 800;
letter-spacing: 3px;
}
.footer-tagline {
font-size: 0.9rem;
letter-spacing: 2px;
}
/* Responsive Styles */
@media (max-width: 991.98px) {
.hero {
height: auto;
min-height: 100vh;
}
.hero h1 {
font-size: 3rem;
}
.about-image {
height: 300px;
}
}
@media (max-width: 767.98px) {
section {
padding: 60px 0;
}
.hero-content {
text-align: center;
padding: 30px 15px;
}
.logo-container {
margin: 0 auto;
}
.hero h1 {
font-size: 2.5rem;
}
.hero h2 {
font-size: 1.2rem;
}
.contact-info {
margin-bottom: 30px;
}
}
@media (max-width: 575.98px) {
.hero h1 {
font-size: 2rem;
}
.section-header h2 {
font-size: 1.8rem;
}
}

824
Old/style2.css
View File

@@ -1,824 +0,0 @@
/*
* JPM Security & Services - Style 2
* A minimalist design with side navigation
*/
:root {
--primary-dark: #1a1f2c;
--primary-light: #ffffff;
--accent-color: #3498db;
--accent-hover: #2980b9;
--text-dark: #2c3e50;
--text-light: #f8f9fa;
--side-nav-width: 280px;
--gradient-start: #2c3e50;
--gradient-end: #3498db;
}
/* General Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: var(--text-dark);
background-color: var(--primary-light);
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
margin-bottom: 1rem;
}
a {
text-decoration: none;
color: inherit;
transition: all 0.3s ease;
}
ul {
list-style: none;
}
section {
padding: 100px 0;
position: relative;
}
.btn-primary {
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
border: none;
color: var(--primary-light);
padding: 12px 30px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
transition: all 0.3s ease;
border-radius: 30px;
position: relative;
overflow: hidden;
}
.btn-primary::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: 0.5s;
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.btn-primary:hover::before {
left: 100%;
}
/* Side Navigation */
.side-nav {
position: fixed;
top: 0;
left: 0;
width: var(--side-nav-width);
height: 100vh;
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
color: var(--primary-light);
padding: 40px 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
z-index: 1000;
box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
}
.logo-container {
margin-bottom: 60px;
position: relative;
overflow: hidden;
}
.logo-text {
font-size: 2.5rem;
font-weight: 800;
letter-spacing: 5px;
position: relative;
z-index: 1;
}
.logo-subtext {
font-size: 0.8rem;
letter-spacing: 2px;
opacity: 0.8;
position: relative;
z-index: 1;
}
.side-nav nav ul li {
margin-bottom: 20px;
position: relative;
}
.side-nav nav ul li a {
font-size: 1.1rem;
font-weight: 500;
display: block;
padding: 8px 0;
position: relative;
opacity: 0.7;
transition: all 0.3s ease;
}
.side-nav nav ul li a:hover,
.side-nav nav ul li a.active {
opacity: 1;
transform: translateX(10px);
}
.side-nav nav ul li a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: var(--primary-light);
transition: width 0.3s ease;
}
.side-nav nav ul li a:hover::after,
.side-nav nav ul li a.active::after {
width: 30px;
}
.nav-footer {
margin-top: auto;
}
.social-links {
display: flex;
margin-bottom: 20px;
}
.social-icon {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 50%;
margin-right: 10px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.social-icon::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: 0.5s;
}
.social-icon:hover {
background-color: var(--primary-light);
color: var(--primary-dark);
transform: translateY(-3px);
}
.social-icon:hover::before {
left: 100%;
}
.nav-footer p {
font-size: 0.8rem;
opacity: 0.7;
}
/* Mobile Navigation */
.mobile-nav {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
color: var(--primary-light);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.mobile-nav-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
}
.menu-toggle {
background: none;
border: none;
width: 30px;
height: 20px;
position: relative;
cursor: pointer;
transition: all 0.3s ease;
}
.menu-toggle span {
display: block;
width: 100%;
height: 2px;
background-color: var(--primary-light);
position: absolute;
left: 0;
transition: all 0.3s ease;
}
.menu-toggle span:nth-child(1) {
top: 0;
}
.menu-toggle span:nth-child(2) {
top: 50%;
transform: translateY(-50%);
}
.menu-toggle span:nth-child(3) {
bottom: 0;
}
.menu-toggle.active span:nth-child(1) {
top: 50%;
transform: translateY(-50%) rotate(45deg);
}
.menu-toggle.active span:nth-child(2) {
opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
bottom: 50%;
transform: translateY(50%) rotate(-45deg);
}
.mobile-menu {
display: none;
padding: 20px 0;
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
transform: translateY(-100%);
transition: transform 0.3s ease;
}
.mobile-menu.active {
display: block;
transform: translateY(0);
}
.mobile-menu nav ul li {
margin-bottom: 15px;
opacity: 0;
transform: translateY(20px);
transition: all 0.3s ease;
}
.mobile-menu.active nav ul li {
opacity: 1;
transform: translateY(0);
}
.mobile-menu nav ul li a {
display: block;
padding: 10px 0;
font-size: 1.1rem;
font-weight: 500;
transition: all 0.3s ease;
}
.mobile-menu nav ul li a:hover {
transform: translateX(10px);
}
.mobile-social-links {
display: flex;
margin-top: 20px;
}
/* Main Content */
.main-content {
margin-left: var(--side-nav-width);
overflow-x: hidden;
}
/* Hero Section */
.hero-section {
height: 100vh;
padding: 0;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
.hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
z-index: 1;
pointer-events: none;
}
.hero-content {
padding: 60px;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
position: relative;
z-index: 1;
}
.hero-logo {
width: 100px;
height: 100px;
background-image: url('ben-rosett-WdJkXFQ4VHY-unsplash.jpg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
margin-bottom: 30px;
filter: brightness(0);
}
.hero-content h1 {
font-size: 4rem;
font-weight: 800;
letter-spacing: 5px;
color: var(--primary-dark);
margin-bottom: 0;
}
.hero-content h2 {
font-size: 1.2rem;
letter-spacing: 3px;
color: var(--primary-dark);
font-weight: 400;
margin-bottom: 30px;
}
.hero-text {
font-size: 1.2rem;
margin-bottom: 40px;
max-width: 500px;
}
.hero-image {
height: 100%;
background-image: url('cytonn-photography-n95VMLxqM2I-unsplash.jpg');
background-size: cover;
background-position: center;
position: relative;
min-height: 100vh;
display: block;
z-index: 0;
}
.hero-image .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);
}
/* Section Headers */
.section-header {
margin-bottom: 60px;
position: relative;
}
.section-number {
font-size: 5rem;
font-weight: 800;
color: rgba(10, 14, 23, 0.05);
position: absolute;
top: -60px;
left: -20px;
z-index: -1;
}
.section-header h2 {
font-size: 2.5rem;
margin-bottom: 15px;
position: relative;
display: inline-block;
}
.section-header h2::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 60px;
height: 3px;
background-color: var(--primary-dark);
}
.section-header p {
font-size: 1.1rem;
color: var(--accent-gray);
max-width: 600px;
}
/* Services Section */
.services-section {
background-color: #f8f9fa;
}
.services-grid {
margin-top: 40px;
}
.service-item {
display: flex;
margin-bottom: 40px;
transition: all 0.3s ease;
}
.service-item:hover {
transform: translateY(-5px);
}
.service-icon {
font-size: 2rem;
color: var(--primary-dark);
margin-right: 20px;
min-width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(10, 14, 23, 0.05);
border-radius: 50%;
}
.service-content h3 {
font-size: 1.5rem;
margin-bottom: 10px;
}
/* About Section */
.about-section {
background-color: var(--primary-light);
}
.about-content {
padding-right: 30px;
}
.about-content p {
margin-bottom: 20px;
line-height: 1.8;
}
.values-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 40px;
}
.value-item {
padding: 20px;
background-color: #f8f9fa;
transition: all 0.3s ease;
}
.value-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}
.value-item h4 {
font-size: 1.2rem;
margin-bottom: 10px;
color: var(--primary-dark);
}
.about-image-container {
position: relative;
height: 100%;
min-height: 500px;
}
.about-image {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background-image: url('ben-rosett-WdJkXFQ4VHY-unsplash.jpg');
background-size: cover;
background-position: center;
}
.about-image-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(10, 14, 23, 0.3);
}
/* Contact Section */
.contact-section {
background-color: #f8f9fa;
}
.contact-info {
margin-bottom: 40px;
}
.contact-item {
display: flex;
margin-bottom: 30px;
}
.contact-icon {
font-size: 1.5rem;
color: var(--primary-dark);
margin-right: 20px;
min-width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(10, 14, 23, 0.05);
border-radius: 50%;
}
.contact-text h4 {
font-size: 1.2rem;
margin-bottom: 5px;
}
.form-group {
margin-bottom: 25px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
}
.form-control {
width: 100%;
padding: 12px 15px;
border: 1px solid #ced4da;
border-radius: 0;
transition: all 0.3s ease;
}
.form-control:focus {
border-color: var(--primary-dark);
outline: none;
box-shadow: none;
}
/* Footer */
.footer {
background-color: var(--primary-dark);
color: var(--primary-light);
padding: 80px 0 30px;
}
.footer-logo {
margin-bottom: 30px;
}
.footer-logo .logo-text {
font-size: 2rem;
}
.footer-logo .logo-subtext {
font-size: 0.7rem;
}
.footer h4 {
font-size: 1.2rem;
margin-bottom: 20px;
position: relative;
padding-bottom: 10px;
}
.footer h4::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 2px;
background-color: var(--primary-light);
}
.footer-links ul li {
margin-bottom: 10px;
}
.footer-links ul li a {
opacity: 0.7;
transition: all 0.3s ease;
}
.footer-links ul li a:hover {
opacity: 1;
padding-left: 5px;
}
.footer-contact p {
margin-bottom: 10px;
display: flex;
align-items: center;
}
.footer-contact p i {
margin-right: 10px;
opacity: 0.7;
}
.footer-bottom {
margin-top: 50px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
}
.footer-bottom p {
font-size: 0.9rem;
opacity: 0.7;
}
.footer-legal a {
margin-left: 20px;
font-size: 0.9rem;
opacity: 0.7;
}
.footer-legal a:hover {
opacity: 1;
}
/* Responsive Styles */
@media (max-width: 1199.98px) {
.hero-content {
padding: 40px;
}
.hero-content h1 {
font-size: 3.5rem;
}
}
@media (max-width: 991.98px) {
:root {
--side-nav-width: 240px;
}
.hero-content h1 {
font-size: 3rem;
}
.hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: none;
z-index: 1;
pointer-events: none;
}
.section-header h2 {
font-size: 2.2rem;
}
.about-image-container {
min-height: 400px;
margin-top: 40px;
}
}
@media (max-width: 767.98px) {
/* Switch to mobile navigation */
.side-nav {
display: none;
}
.mobile-nav {
display: block;
}
.main-content {
margin-left: 0;
padding-top: 70px;
}
.hero-section {
height: auto;
}
.hero-content {
padding: 60px 20px;
text-align: center;
align-items: center;
}
.hero-image {
height: 50vh;
}
.hero-image .overlay {
background: linear-gradient(to bottom, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 100%);
}
.section {
padding: 60px 0;
}
.section-number {
font-size: 4rem;
top: -40px;
}
.section-header h2 {
font-size: 2rem;
}
.values-grid {
grid-template-columns: 1fr;
}
.footer-bottom {
flex-direction: column;
text-align: center;
}
.footer-legal {
margin-top: 15px;
}
.footer-legal a {
margin: 0 10px;
}
}
@media (max-width: 575.98px) {
.hero-content h1 {
font-size: 2.5rem;
}
.hero-content h2 {
font-size: 1rem;
}
.service-item {
flex-direction: column;
text-align: center;
}
.service-icon {
margin: 0 auto 20px;
}
.contact-item {
flex-direction: column;
text-align: center;
}
.contact-icon {
margin: 0 auto 15px;
}
}

1024
Old/style3.css
View File

File diff suppressed because it is too large Load Diff

599
Old/style4.css
View File

@@ -1,599 +0,0 @@
/*
* JPM Security & Services - Style 4
* A modern corporate design with dynamic elements
*/
:root {
--primary-dark: #1a1f2c;
--primary-light: #ffffff;
--accent-color: #3498db;
--accent-hover: #2980b9;
--text-dark: #2c3e50;
--text-light: #f8f9fa;
--gradient-start: #2c3e50;
--gradient-end: #3498db;
--border-color: #e9e9e9;
--bg-light: #f8f9fa;
--transition: all 0.3s ease;
}
/* General Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: var(--text-dark);
background-color: var(--primary-light);
line-height: 1.6;
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
margin-bottom: 1rem;
color: var(--primary-dark);
}
a {
text-decoration: none;
color: inherit;
transition: var(--transition);
}
ul {
list-style: none;
}
section {
padding: 100px 0;
position: relative;
}
.btn {
display: inline-block;
padding: 15px 35px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
border-radius: 30px;
transition: var(--transition);
cursor: pointer;
position: relative;
overflow: hidden;
z-index: 1;
}
.btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: 0.5s;
z-index: -1;
}
.btn:hover::before {
left: 100%;
}
.btn-primary {
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
color: var(--primary-light);
border: none;
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.btn-outline {
background: transparent;
color: var(--primary-dark);
border: 2px solid var(--primary-dark);
}
.btn-outline:hover {
background: var(--primary-dark);
color: var(--primary-light);
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
/* Top Bar */
.top-bar {
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
color: var(--primary-light);
padding: 10px 0;
font-size: 0.9rem;
}
.top-contact span {
margin-right: 20px;
display: inline-flex;
align-items: center;
}
.top-contact i {
margin-right: 8px;
font-size: 1rem;
}
.top-social {
text-align: right;
}
.top-social a {
color: var(--primary-light);
margin-left: 15px;
opacity: 0.8;
transition: var(--transition);
}
.top-social a:hover {
opacity: 1;
transform: translateY(-2px);
}
/* Header */
.header {
background-color: rgba(255, 255, 255, 0.95);
padding: 20px 0;
position: sticky;
top: 0;
z-index: 100;
backdrop-filter: blur(10px);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transition: var(--transition);
}
.header.scrolled {
padding: 15px 0;
background-color: rgba(255, 255, 255, 0.98);
}
.logo {
display: flex;
align-items: center;
}
.logo a {
display: flex;
align-items: center;
}
.logo-img {
width: 50px;
height: 50px;
background-image: url('ben-rosett-WdJkXFQ4VHY-unsplash.jpg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
margin-right: 15px;
filter: brightness(0);
transition: var(--transition);
}
.logo:hover .logo-img {
transform: scale(1.1);
}
.logo-text {
display: flex;
flex-direction: column;
}
.logo-main {
font-size: 1.8rem;
font-weight: 800;
letter-spacing: 3px;
color: var(--primary-dark);
line-height: 1;
}
.logo-sub {
font-size: 0.7rem;
letter-spacing: 1.5px;
color: var(--accent-color);
}
.main-nav {
display: flex;
justify-content: flex-end;
}
.main-nav ul {
display: flex;
align-items: center;
margin: 0;
padding: 0;
}
.main-nav ul li {
margin-left: 30px;
}
.main-nav ul li a {
color: var(--text-dark);
font-weight: 500;
padding: 5px 0;
position: relative;
}
.main-nav ul li a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--accent-color);
transition: var(--transition);
}
.main-nav ul li a:hover::after,
.main-nav ul li a.active::after {
width: 100%;
}
.nav-btn {
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
color: var(--primary-light);
padding: 10px 25px;
border-radius: 30px;
transition: var(--transition);
}
.nav-btn:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
/* Hero Section */
.hero-section {
padding: 120px 0;
position: relative;
overflow: hidden;
background-color: var(--bg-light);
}
.hero-content {
position: relative;
z-index: 1;
}
.hero-content h1 {
font-size: 3.5rem;
font-weight: 800;
margin-bottom: 1.5rem;
line-height: 1.2;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 1s ease forwards;
}
.hero-content p {
font-size: 1.2rem;
color: var(--text-dark);
margin-bottom: 2rem;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 1s ease 0.2s forwards;
}
.hero-btns {
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 1s ease 0.4s forwards;
}
.hero-btns .btn {
margin-right: 15px;
}
.hero-image {
position: relative;
z-index: 1;
}
.hero-img-container {
position: relative;
padding-bottom: 100%;
overflow: hidden;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.hero-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('cytonn-photography-n95VMLxqM2I-unsplash.jpg');
background-size: cover;
background-position: center;
transition: var(--transition);
}
.hero-img-container:hover .hero-img {
transform: scale(1.1);
}
.hero-shape {
position: absolute;
top: 50%;
right: -100px;
width: 300px;
height: 300px;
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
border-radius: 50%;
opacity: 0.1;
transform: translateY(-50%);
z-index: -1;
}
/* Features Section */
.features-section {
padding: 80px 0;
background-color: var(--primary-light);
}
.feature-box {
text-align: center;
padding: 40px 30px;
background: var(--primary-light);
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: var(--transition);
height: 100%;
position: relative;
overflow: hidden;
}
.feature-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
opacity: 0;
transition: var(--transition);
z-index: 0;
}
.feature-box:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.feature-box:hover::before {
opacity: 0.05;
}
.feature-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 25px;
position: relative;
z-index: 1;
transition: var(--transition);
}
.feature-icon i {
font-size: 35px;
color: var(--primary-light);
}
.feature-box h3 {
font-size: 1.5rem;
margin-bottom: 15px;
position: relative;
z-index: 1;
}
.feature-box p {
color: var(--text-dark);
margin-bottom: 0;
position: relative;
z-index: 1;
}
/* Services Section */
.services-section {
padding: 100px 0;
background-color: var(--bg-light);
}
.service-card {
background: var(--primary-light);
padding: 40px 30px;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: var(--transition);
height: 100%;
position: relative;
overflow: hidden;
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
opacity: 0;
transition: var(--transition);
z-index: 0;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.service-card:hover::before {
opacity: 0.05;
}
.service-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
position: relative;
z-index: 1;
}
.service-icon i {
font-size: 30px;
color: var(--primary-light);
}
.service-content h3 {
font-size: 1.5rem;
margin-bottom: 15px;
position: relative;
z-index: 1;
}
.service-content p {
color: var(--text-dark);
margin-bottom: 20px;
position: relative;
z-index: 1;
}
.read-more {
color: var(--accent-color);
font-weight: 600;
display: inline-flex;
align-items: center;
position: relative;
z-index: 1;
transition: var(--transition);
}
.read-more i {
margin-left: 5px;
transition: transform 0.3s ease;
}
.read-more:hover {
color: var(--accent-hover);
}
.read-more:hover i {
transform: translateX(5px);
}
/* Animations */
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
/* Responsive Styles */
@media (max-width: 1199.98px) {
.hero-content h1 {
font-size: 3rem;
}
.section-title {
font-size: 2.2rem;
}
}
@media (max-width: 991.98px) {
.main-nav {
display: none;
}
.mobile-menu-toggle {
display: block;
}
.hero-content {
text-align: center;
margin-bottom: 50px;
}
.hero-shape {
display: none;
}
.about-content {
margin-top: 50px;
}
}
@media (max-width: 767.98px) {
section {
padding: 60px 0;
}
.hero-content h1 {
font-size: 2.5rem;
}
.section-title {
font-size: 2rem;
}
.feature-box,
.service-card {
margin-bottom: 30px;
}
}
@media (max-width: 575.98px) {
.hero-content h1 {
font-size: 2rem;
}
.section-subtitle {
font-size: 0.9rem;
}
.section-subtitle::before {
width: 30px;
}
}

817
Old/style5.css
View File

@@ -1,817 +0,0 @@
/*
* JPM Security & Services - Style 5
* A creative and modern design with animations
*/
:root {
--primary-dark: #1a1f2c;
--primary-light: #ffffff;
--accent-color: #3498db;
--accent-hover: #2980b9;
--text-dark: #2c3e50;
--text-light: #f8f9fa;
--gradient-start: #2c3e50;
--gradient-end: #3498db;
--border-color: #e9e9e9;
--bg-light: #f8f9fa;
--transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* General Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: var(--text-dark);
background-color: var(--primary-light);
line-height: 1.6;
overflow-x: hidden;
cursor: none;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
margin-bottom: 1rem;
color: var(--primary-dark);
}
a {
text-decoration: none;
color: inherit;
transition: var(--transition);
cursor: none;
}
ul {
list-style: none;
}
section {
padding: 100px 0;
position: relative;
}
.btn {
display: inline-block;
padding: 15px 35px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
border-radius: 30px;
transition: var(--transition);
position: relative;
overflow: hidden;
z-index: 1;
cursor: none;
}
.btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: 0.5s;
z-index: -1;
}
.btn:hover::before {
left: 100%;
}
.btn-primary {
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
color: var(--primary-light);
border: none;
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.btn-light {
background: var(--primary-light);
color: var(--primary-dark);
border: 2px solid var(--primary-dark);
}
.btn-light:hover {
background: var(--primary-dark);
color: var(--primary-light);
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
/* Custom Cursor */
.cursor {
position: fixed;
width: 10px;
height: 10px;
border-radius: 50%;
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
pointer-events: none;
z-index: 9999;
transform: translate(-50%, -50%);
transition: width 0.3s, height 0.3s, background-color 0.3s;
}
.cursor-follower {
position: fixed;
width: 40px;
height: 40px;
border: 1px solid var(--accent-color);
border-radius: 50%;
pointer-events: none;
z-index: 9998;
transform: translate(-50%, -50%);
transition: all 0.2s ease-out;
}
.cursor.active {
width: 20px;
height: 20px;
background: var(--accent-color);
}
.cursor-follower.active {
width: 50px;
height: 50px;
border-width: 2px;
border-color: var(--accent-hover);
}
/* Preloader */
.preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
.preloader.fade-out {
opacity: 0;
visibility: hidden;
}
.loader {
position: relative;
}
.logo-text {
font-size: 4rem;
font-weight: 800;
letter-spacing: 8px;
color: var(--primary-light);
animation: pulse 1.5s infinite;
text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.1);
opacity: 0.8;
}
100% {
transform: scale(1);
opacity: 1;
}
}
/* Header */
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 30px 0;
z-index: 100;
transition: var(--transition);
}
.header.scrolled {
background-color: rgba(255, 255, 255, 0.95);
padding: 15px 0;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
}
.logo {
display: flex;
align-items: center;
}
.logo a {
display: flex;
align-items: center;
}
.logo-text {
font-size: 2.5rem;
font-weight: 800;
letter-spacing: 3px;
color: var(--primary-light);
line-height: 1;
transition: var(--transition);
}
.logo-tagline {
font-size: 0.8rem;
letter-spacing: 2px;
color: var(--accent-color);
margin-left: 15px;
transition: var(--transition);
}
.header.scrolled .logo-text {
color: var(--primary-dark);
font-size: 2rem;
}
.header.scrolled .logo-tagline {
color: var(--accent-color);
}
/* Menu Toggle */
.menu-toggle {
display: flex;
align-items: center;
cursor: none;
}
.menu-toggle span {
font-size: 1rem;
font-weight: 600;
color: var(--primary-light);
margin-right: 15px;
transition: var(--transition);
}
.hamburger {
width: 30px;
height: 20px;
position: relative;
cursor: none;
}
.hamburger span {
display: block;
width: 100%;
height: 2px;
background-color: var(--primary-light);
position: absolute;
left: 0;
transition: var(--transition);
}
.hamburger span:first-child {
top: 0;
}
.hamburger span:last-child {
bottom: 0;
}
.header.scrolled .menu-toggle span,
.header.scrolled .hamburger span {
color: var(--primary-dark);
background-color: var(--primary-dark);
}
/* Fullscreen Menu */
.fullscreen-menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
z-index: 99;
opacity: 0;
visibility: hidden;
transition: var(--transition);
}
.fullscreen-menu.active {
opacity: 1;
visibility: visible;
}
.menu-close {
position: absolute;
top: 30px;
right: 30px;
display: flex;
align-items: center;
cursor: none;
}
.menu-close span {
font-size: 1rem;
font-weight: 600;
color: var(--primary-light);
margin-right: 15px;
}
.close-btn {
width: 30px;
height: 20px;
position: relative;
}
.close-btn span {
display: block;
width: 100%;
height: 2px;
background-color: var(--primary-light);
position: absolute;
left: 0;
transition: var(--transition);
}
.close-btn span:first-child {
top: 50%;
transform: translateY(-50%) rotate(45deg);
}
.close-btn span:last-child {
top: 50%;
transform: translateY(-50%) rotate(-45deg);
}
.menu-content {
padding: 100px 0;
}
.menu-links ul li {
margin-bottom: 30px;
}
.menu-link {
font-size: 3rem;
font-weight: 700;
color: var(--primary-light);
position: relative;
display: inline-block;
transition: var(--transition);
}
.menu-link::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background-color: var(--primary-light);
transition: var(--transition);
}
.menu-link:hover {
transform: translateX(20px);
}
.menu-link:hover::after {
width: 100%;
}
.menu-info {
margin-top: 50px;
}
.menu-info h3 {
font-size: 1.5rem;
color: var(--primary-light);
margin-bottom: 20px;
}
.menu-info p {
color: var(--primary-light);
opacity: 0.8;
margin-bottom: 10px;
}
.menu-info p i {
margin-right: 10px;
}
.menu-social {
margin-top: 30px;
}
.menu-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid var(--primary-light);
border-radius: 50%;
color: var(--primary-light);
margin-right: 10px;
transition: var(--transition);
}
.menu-social a:hover {
background-color: var(--primary-light);
color: var(--primary-dark);
transform: translateY(-3px);
}
/* Hero Section */
.hero-section {
height: 100vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
background-color: var(--primary-dark);
}
.hero-content {
position: relative;
z-index: 1;
padding: 0 50px;
}
.hero-title {
font-size: 5rem;
font-weight: 800;
color: var(--primary-light);
line-height: 1;
margin-bottom: 20px;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 1s ease forwards;
}
.hero-subtitle {
font-size: 1.5rem;
color: var(--accent-color);
margin-bottom: 30px;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 1s ease 0.2s forwards;
}
.hero-text {
font-size: 1.2rem;
color: var(--primary-light);
opacity: 0.8;
margin-bottom: 40px;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 1s ease 0.4s forwards;
}
.hero-btns .btn {
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 1s ease 0.6s forwards;
}
.hero-image {
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
z-index: 0;
}
.hero-img-inner {
width: 100%;
height: 100%;
background-image: url('cytonn-photography-n95VMLxqM2I-unsplash.jpg');
background-size: cover;
background-position: center;
transition: var(--transition);
transform: scale(1.1);
}
.hero-section:hover .hero-img-inner {
transform: scale(1);
}
/* Scroll Down */
.scroll-down {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
.mouse {
width: 30px;
height: 50px;
border: 2px solid var(--primary-light);
border-radius: 15px;
position: relative;
}
.wheel {
width: 4px;
height: 8px;
background-color: var(--primary-light);
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
border-radius: 2px;
animation: scroll 1.5s infinite;
}
@keyframes scroll {
0% {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
100% {
opacity: 0;
transform: translateX(-50%) translateY(20px);
}
}
.arrow {
margin-top: 10px;
display: flex;
flex-direction: column;
align-items: center;
}
.arrow span {
display: block;
width: 10px;
height: 10px;
border-bottom: 2px solid var(--primary-light);
border-right: 2px solid var(--primary-light);
transform: rotate(45deg);
margin: -5px;
animation: arrow 1.5s infinite;
}
.arrow span:nth-child(2) {
animation-delay: 0.2s;
}
.arrow span:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes arrow {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/* Services Section */
.services-section {
background-color: var(--bg-light);
padding: 100px 0;
}
.service-card {
background: var(--primary-light);
padding: 40px 30px;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: var(--transition);
height: 100%;
position: relative;
overflow: hidden;
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
opacity: 0;
transition: var(--transition);
z-index: 0;
}
.service-card:hover::before {
opacity: 0.05;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.service-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
position: relative;
z-index: 1;
}
.service-icon i {
font-size: 30px;
color: var(--primary-light);
}
.service-card h3 {
font-size: 1.5rem;
margin-bottom: 15px;
position: relative;
z-index: 1;
}
.service-card p {
color: var(--text-dark);
margin-bottom: 20px;
position: relative;
z-index: 1;
}
.service-link {
color: var(--accent-color);
font-weight: 600;
display: inline-flex;
align-items: center;
position: relative;
z-index: 1;
transition: var(--transition);
}
.service-link span {
margin-right: 5px;
}
.service-link i {
transition: transform 0.3s ease;
}
.service-card:hover .service-link {
color: var(--accent-hover);
}
.service-link:hover i {
transform: translateX(5px);
}
/* Animations */
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive Styles */
@media (max-width: 1199.98px) {
.hero-title {
font-size: 4rem;
}
.menu-link {
font-size: 2.5rem;
}
}
@media (max-width: 991.98px) {
section {
padding: 80px 0;
}
.hero-title {
font-size: 3.5rem;
}
.hero-subtitle {
font-size: 1.3rem;
}
.hero-content {
padding: 0 30px;
}
.about-content {
margin-top: 50px;
}
.values-grid {
grid-template-columns: repeat(2, 1fr);
}
.contact-info {
margin-bottom: 50px;
}
}
@media (max-width: 767.98px) {
.hero-section {
height: auto;
padding: 150px 0 100px;
}
.hero-content {
text-align: center;
margin-bottom: 50px;
}
.hero-image {
position: relative;
width: 100%;
height: 300px;
}
.hero-title {
font-size: 3rem;
}
.menu-close {
top: 20px;
right: 20px;
}
.menu-link {
font-size: 2rem;
}
.cta-inner {
padding: 50px 30px;
}
.contact-form-box {
padding: 30px;
}
.footer h3::after {
left: 50%;
transform: translateX(-50%);
}
}
@media (max-width: 575.98px) {
.hero-title {
font-size: 2.5rem;
}
.hero-subtitle {
font-size: 1.1rem;
}
.section-title {
font-size: 2rem;
}
.menu-link {
font-size: 1.8rem;
}
.about-pattern {
display: none;
}
.cursor, .cursor-follower {
display: none;
}
body {
cursor: auto;
}
a, .btn {
cursor: pointer;
}
}

590
Old/style6.css
View File

@@ -1,590 +0,0 @@
/*
* JPM Security & Services - Style 6
* A modern and sophisticated design with enhanced animations
*/
:root {
--primary-dark: #1a1f2c;
--primary-light: #ffffff;
--accent-color: #e63946;
--accent-hover: #c1121f;
--text-dark: #2b2d42;
--text-light: #f8f9fa;
--gradient-start: #1a1f2c;
--gradient-end: #2b2d42;
--border-color: #e9ecef;
--bg-light: #f8f9fa;
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* General Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: var(--text-dark);
background-color: var(--primary-light);
line-height: 1.6;
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
margin-bottom: 1rem;
color: var(--primary-dark);
}
a {
text-decoration: none;
color: inherit;
transition: var(--transition);
}
ul {
list-style: none;
}
section {
padding: 100px 0;
position: relative;
}
/* Navigation */
.navbar {
padding: 20px 0;
transition: var(--transition);
background: transparent;
}
.navbar.scrolled {
background: rgba(255, 255, 255, 0.95);
padding: 15px 0;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
}
.navbar-brand {
font-size: 2rem;
font-weight: 800;
color: var(--primary-light);
transition: var(--transition);
}
.navbar.scrolled .navbar-brand {
color: var(--primary-dark);
}
.nav-link {
color: var(--primary-light) !important;
font-weight: 600;
padding: 10px 20px !important;
position: relative;
transition: var(--transition);
}
.navbar.scrolled .nav-link {
color: var(--primary-dark) !important;
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: var(--accent-color);
transition: var(--transition);
transform: translateX(-50%);
}
.nav-link:hover::after {
width: 100%;
}
/* Hero Section */
.hero {
height: 100vh;
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('cytonn-photography-n95VMLxqM2I-unsplash.jpg');
background-size: cover;
background-position: center;
opacity: 0.1;
animation: zoomIn 20s infinite alternate;
}
@keyframes zoomIn {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}
.hero-content {
color: var(--primary-light);
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 1s ease forwards;
}
.logo-container {
width: 100px;
height: 100px;
margin-bottom: 30px;
opacity: 0;
animation: fadeIn 1s ease 0.5s forwards;
}
.logo-image {
width: 100%;
height: 100%;
background: var(--accent-color);
border-radius: 50%;
position: relative;
overflow: hidden;
}
.logo-image::before {
content: 'JPM';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2rem;
font-weight: 800;
color: var(--primary-light);
}
.hero h1 {
font-size: 5rem;
font-weight: 800;
color: var(--primary-light);
margin-bottom: 0;
line-height: 1;
}
.hero h2 {
font-size: 2rem;
color: var(--accent-color);
margin-bottom: 20px;
font-weight: 600;
}
.hero .lead {
font-size: 1.2rem;
margin-bottom: 30px;
opacity: 0.9;
}
/* Buttons */
.btn {
padding: 15px 35px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
border-radius: 30px;
transition: var(--transition);
position: relative;
overflow: hidden;
z-index: 1;
}
.btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: 0.5s;
z-index: -1;
}
.btn:hover::before {
left: 100%;
}
.btn-primary {
background: var(--accent-color);
color: var(--primary-light);
border: none;
}
.btn-primary:hover {
background: var(--accent-hover);
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(230, 57, 70, 0.3);
}
/* Services Section */
.services {
background-color: var(--bg-light);
}
.section-header {
margin-bottom: 60px;
}
.section-header h2 {
font-size: 2.5rem;
position: relative;
display: inline-block;
margin-bottom: 20px;
}
.section-header h2::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
width: 50px;
height: 3px;
background: var(--accent-color);
transform: translateX(-50%);
}
.service-card {
background: var(--primary-light);
padding: 40px 30px;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: var(--transition);
height: 100%;
position: relative;
overflow: hidden;
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
opacity: 0;
transition: var(--transition);
z-index: 0;
}
.service-card:hover::before {
opacity: 0.05;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.service-icon {
width: 70px;
height: 70px;
background: var(--accent-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
position: relative;
z-index: 1;
}
.service-icon i {
font-size: 30px;
color: var(--primary-light);
}
.service-card h3 {
font-size: 1.5rem;
margin-bottom: 15px;
position: relative;
z-index: 1;
}
.service-card p {
color: var(--text-dark);
margin-bottom: 20px;
position: relative;
z-index: 1;
}
/* About Section */
.about {
background-color: var(--primary-light);
}
.about-image {
height: 500px;
background-image: url('ben-rosett-WdJkXFQ4VHY-unsplash.jpg');
background-size: cover;
background-position: center;
border-radius: 15px;
position: relative;
overflow: hidden;
}
.about-image::before {
content: '';
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
border: 3px solid var(--accent-color);
border-radius: 15px;
z-index: 1;
}
.values {
margin-top: 40px;
}
.values h3 {
margin-bottom: 20px;
position: relative;
display: inline-block;
}
.values h3::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 40px;
height: 3px;
background: var(--accent-color);
}
.values ul li {
margin-bottom: 15px;
padding-left: 25px;
position: relative;
}
.values ul li::before {
content: '→';
position: absolute;
left: 0;
color: var(--accent-color);
}
/* Contact Section */
.contact {
background-color: var(--bg-light);
}
.contact-info {
background: var(--primary-light);
padding: 40px;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.contact-info h3 {
margin-bottom: 25px;
position: relative;
display: inline-block;
}
.contact-info h3::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 40px;
height: 3px;
background: var(--accent-color);
}
.contact-info ul li {
margin-bottom: 15px;
display: flex;
align-items: center;
}
.contact-info ul li i {
width: 30px;
color: var(--accent-color);
}
.social-links {
display: flex;
gap: 15px;
}
.social-icon {
width: 40px;
height: 40px;
background: var(--accent-color);
color: var(--primary-light);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
}
.social-icon:hover {
background: var(--accent-hover);
transform: translateY(-3px);
}
.business-hours {
background: var(--primary-light);
padding: 40px;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
margin-top: 30px;
}
.business-hours h3 {
margin-bottom: 25px;
position: relative;
display: inline-block;
}
.business-hours h3::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 40px;
height: 3px;
background: var(--accent-color);
}
/* Footer */
.footer {
background: var(--primary-dark);
color: var(--primary-light);
}
.footer-logo {
font-size: 2rem;
font-weight: 800;
color: var(--primary-light);
}
.footer-tagline {
font-size: 1rem;
color: var(--accent-color);
margin-top: 5px;
}
.footer a {
color: var(--primary-light);
opacity: 0.8;
transition: var(--transition);
}
.footer a:hover {
opacity: 1;
color: var(--accent-color);
}
/* Animations */
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
/* Responsive Styles */
@media (max-width: 1199.98px) {
.hero h1 {
font-size: 4rem;
}
}
@media (max-width: 991.98px) {
section {
padding: 80px 0;
}
.hero h1 {
font-size: 3.5rem;
}
.hero h2 {
font-size: 1.8rem;
}
.about-image {
margin-bottom: 40px;
}
}
@media (max-width: 767.98px) {
.hero {
height: auto;
padding: 150px 0 100px;
}
.hero-content {
text-align: center;
}
.hero h1 {
font-size: 3rem;
}
.hero h2 {
font-size: 1.5rem;
}
.section-header h2 {
font-size: 2rem;
}
.contact-info,
.business-hours {
padding: 30px;
}
}
@media (max-width: 575.98px) {
.hero h1 {
font-size: 2.5rem;
}
.hero h2 {
font-size: 1.2rem;
}
.section-header h2 {
font-size: 1.8rem;
}
.btn {
padding: 12px 25px;
}
}

47
README.md Normal file
View File

@@ -0,0 +1,47 @@
# Astro Starter Kit: Minimal
```sh
npm create astro@latest -- --template minimal
```
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/minimal)
[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/minimal)
[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/minimal/devcontainer.json)
> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
## 🚀 Project Structure
Inside of your Astro project, you'll see the following folders and files:
```text
/
├── public/
├── src/
│ └── pages/
│ └── index.astro
└── package.json
```
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
Any static assets, like images, can be placed in the `public/` directory.
## 🧞 Commands
All commands are run from the root of the project, from a terminal:
| Command | Action |
| :------------------------ | :----------------------------------------------- |
| `npm install` | Installs dependencies |
| `npm run dev` | Starts local dev server at `localhost:4321` |
| `npm run build` | Build your production site to `./dist/` |
| `npm run preview` | Preview your build locally, before deploying |
| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
| `npm run astro -- --help` | Get help using the Astro CLI |
## 👀 Want to learn more?
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

9
astro.config.mjs Normal file
View File

@@ -0,0 +1,9 @@
// @ts-check
import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';
// https://astro.build/config
export default defineConfig({
integrations: [tailwind()],
trailingSlash: 'always'
});

6568
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

21
package.json Normal file
View File

@@ -0,0 +1,21 @@
{
"name": "",
"type": "module",
"version": "0.0.1",
"scripts": {
"dev": "astro dev",
"build": "astro build",
"preview": "astro preview",
"astro": "astro"
},
"dependencies": {
"@astrojs/tailwind": "^6.0.0",
"@tailwindcss/typography": "^0.5.10",
"aos": "^3.0.0-beta.6",
"astro": "^5.7.13",
"autoprefixer": "^10.4.16",
"inter-ui": "^3.19.3",
"postcss": "^8.4.32",
"tailwindcss": "^3.4.1"
}
}

6
postcss.config.js Normal file
View File

@@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};

BIN
public/Logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

3
public/assets/README.md Normal file
View File

@@ -0,0 +1,3 @@
# Assets
Place logo, SVG backgrounds, and other static assets here.

8
public/assets/grid-pattern.svg Normal file
View File

@@ -0,0 +1,8 @@
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
<path d="M 20 0 L 0 0 0 20" fill="none" stroke="#c0c0c0" stroke-width="0.5" opacity="0.2"/>
</pattern>
</defs>
<rect width="100" height="100" fill="url(#grid)" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 336 B

37
public/assets/knight-logo.svg Normal file
View File

@@ -0,0 +1,37 @@
<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- Background -->
<rect width="120" height="120" rx="5" fill="#0f0f0f"/>
<!-- Lion body -->
<path d="M30 90 C28 80, 35 70, 40 65 L45 60 L42 55 C40 52, 38 48, 40 45 C42 42, 48 42, 50 45 L55 50
L60 45 L65 40 C68 37, 74 38, 75 42 C76 46, 72 50, 70 55 L75 60 L80 65 C85 70, 90 80, 88 90
C85 95, 80 95, 75 90 L70 85 L60 87 L50 85 L45 90 C40 95, 35 95, 30 90Z"
fill="white"/>
<!-- Lion mane -->
<path d="M65 40 C60 35, 52 35, 47 40 C43 44, 43 48, 45 52 C47 56, 50 57, 55 60 C52 50, 57 45, 65 40Z"
fill="white"/>
<!-- Lion tail -->
<path d="M30 65 C28 60, 28 55, 30 50 L32 48 C33 47, 35 47, 36 48 C38 50, 38 55, 36 60 C35 63, 33 65, 30 65Z"
fill="white"/>
<!-- Crown -->
<path d="M60 33 L58 30 L60 27 L62 30 L60 33 Z
M56 27 L54 24 L56 21 L58 24 L56 27 Z
M64 27 L66 24 L64 21 L62 24 L64 27 Z
M54 24 H66 V26 H54 Z"
fill="white"/>
<!-- Flag pole -->
<path d="M65 40 L85 15" stroke="white" stroke-width="2"/>
<!-- Flag -->
<path d="M82 18 C78 20, 75 25, 78 30 C81 33, 84 33, 86 30 L85 24 L87 18 C86 17, 84 17, 82 18Z"
fill="white"/>
<!-- Face -->
<circle cx="58" cy="48" r="1.5" fill="#0f0f0f"/>
<circle cx="66" cy="48" r="1.5" fill="#0f0f0f"/>
<path d="M60 55 C62 57, 66 57, 68 55" stroke="#0f0f0f" stroke-width="1.2" fill="none"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

37
public/assets/lion-logo.svg Normal file
View File

@@ -0,0 +1,37 @@
<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- Background -->
<rect width="120" height="120" rx="5" fill="#0f0f0f"/>
<!-- Lion body -->
<path d="M30 90 C28 80, 35 70, 40 65 L45 60 L42 55 C40 52, 38 48, 40 45 C42 42, 48 42, 50 45 L55 50
L60 45 L65 40 C68 37, 74 38, 75 42 C76 46, 72 50, 70 55 L75 60 L80 65 C85 70, 90 80, 88 90
C85 95, 80 95, 75 90 L70 85 L60 87 L50 85 L45 90 C40 95, 35 95, 30 90Z"
fill="white"/>
<!-- Lion mane -->
<path d="M65 40 C60 35, 52 35, 47 40 C43 44, 43 48, 45 52 C47 56, 50 57, 55 60 C52 50, 57 45, 65 40Z"
fill="white"/>
<!-- Lion tail -->
<path d="M30 65 C28 60, 28 55, 30 50 L32 48 C33 47, 35 47, 36 48 C38 50, 38 55, 36 60 C35 63, 33 65, 30 65Z"
fill="white"/>
<!-- Crown -->
<path d="M60 33 L58 30 L60 27 L62 30 L60 33 Z
M56 27 L54 24 L56 21 L58 24 L56 27 Z
M64 27 L66 24 L64 21 L62 24 L64 27 Z
M54 24 H66 V26 H54 Z"
fill="white"/>
<!-- Flag pole -->
<path d="M65 40 L85 15" stroke="white" stroke-width="2"/>
<!-- Flag -->
<path d="M82 18 C78 20, 75 25, 78 30 C81 33, 84 33, 86 30 L85 24 L87 18 C86 17, 84 17, 82 18Z"
fill="white"/>
<!-- Face -->
<circle cx="58" cy="48" r="1.5" fill="#0f0f0f"/>
<circle cx="66" cy="48" r="1.5" fill="#0f0f0f"/>
<path d="M60 55 C62 57, 66 57, 68 55" stroke="#0f0f0f" stroke-width="1.2" fill="none"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

1
public/favicon.ico Normal file
View File

@@ -0,0 +1 @@

3
public/favicon.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<image href="/Logo.png" width="100" height="100" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 123 B

118
src/components/Footer.astro Normal file
View File

@@ -0,0 +1,118 @@
---
import { ui, languages, defaultLang } from '../i18n/ui';
// Get current language from URL
const { pathname } = Astro.url;
// Extract the first path segment
const pathSegments = pathname.split('/').filter(Boolean);
const langCode = pathSegments[0];
// Check if the first segment is a valid language code
const currentLang = langCode && Object.keys(languages).includes(langCode)
? langCode
: defaultLang;
const t = ui[currentLang as keyof typeof ui];
const phone = t['phone'];
const currentYear = new Date().getFullYear();
---
<footer class="relative pt-16 pb-10 bg-gradient-to-b from-black-deep to-black-medium overflow-hidden">
<!-- Background elements -->
<div class="absolute inset-0 bg-[url('/assets/grid-pattern.svg')] opacity-5 pointer-events-none"></div>
<div class="absolute top-0 left-0 w-full h-0.5 bg-gradient-to-r from-transparent via-silver-metallic/20 to-transparent pointer-events-none"></div>
<div class="max-w-7xl mx-auto px-4">
<!-- Top footer content -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-10 mb-12">
<!-- Company info -->
<div>
<div class="flex items-center gap-3 mb-6">
<div class="relative w-10 h-10 flex items-center justify-center shadow-lg">
<img src="/Logo.png" alt="JPM Logo" class="h-8 w-8 object-contain" />
</div>
<span class="text-xl font-bold tracking-wide text-transparent bg-clip-text bg-gradient-to-r from-silver-metallic to-silver-light">JPM</span>
</div>
<p class="text-silver-light/70 text-sm max-w-xs mb-4">
{t['footer.description']}
</p>
<div class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-accent-gold" viewBox="0 0 20 20" fill="currentColor">
<path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
</svg>
<span class="text-silver-light text-sm font-medium">{phone}</span>
</div>
</div>
<!-- Quick links -->
<div class="z-10 relative">
<h3 class="text-silver-metallic font-medium mb-6">{t['footer.quicklinks']}</h3>
<ul class="space-y-3 text-sm">
<li><a href={`/${currentLang}/#services`} class="text-silver-light/70 hover:text-silver-metallic transition-colors relative z-10 py-1 inline-block">{t['nav.services']}</a></li>
<li><a href={`/${currentLang}/#about`} class="text-silver-light/70 hover:text-silver-metallic transition-colors relative z-10 py-1 inline-block">{t['nav.about']}</a></li>
<li><a href={`/${currentLang}/#testimonials`} class="text-silver-light/70 hover:text-silver-metallic transition-colors relative z-10 py-1 inline-block">{t['nav.testimonials']}</a></li>
<li><a href={`/${currentLang}/#contact`} class="text-silver-light/70 hover:text-silver-metallic transition-colors relative z-10 py-1 inline-block">{t['nav.contact']}</a></li>
</ul>
</div>
<!-- Connect -->
<div>
<h3 class="text-silver-metallic font-medium mb-6">{t['footer.connect']}</h3>
<div class="flex gap-3 mb-5">
<a href="#" class="w-9 h-9 rounded-full bg-black-deep border border-silver-dark/30 flex items-center justify-center text-silver-light/70 hover:text-accent-gold hover:border-accent-gold/50 transition-colors relative z-10">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
<path d="M22 5.9c-.7.3-1.5.5-2.4.6.9-.5 1.5-1.3 1.8-2.3-.8.5-1.7.8-2.6 1-.8-.8-1.8-1.3-3-1.3-2.3 0-4.1 1.9-4.1 4.1 0 .3 0 .6.1.9-3.4-.2-6.5-1.8-8.5-4.3-.4.6-.6 1.3-.6 2.1 0 1.4.7 2.7 1.8 3.4-.7 0-1.3-.2-1.9-.5v.1c0 2 1.4 3.7 3.3 4.1-.3.1-.7.1-1.1.1-.3 0-.5 0-.8-.1.5 1.6 2 2.8 3.8 2.8-1.4 1.1-3.2 1.8-5.1 1.8-.3 0-.7 0-1-.1 1.8 1.2 4 1.8 6.3 1.8 7.5 0 11.7-6.3 11.7-11.7v-.5c.8-.6 1.5-1.3 2-2.1Z" />
</svg>
</a>
<a href="#" class="w-9 h-9 rounded-full bg-black-deep border border-silver-dark/30 flex items-center justify-center text-silver-light/70 hover:text-accent-gold hover:border-accent-gold/50 transition-colors relative z-10">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
<path d="M20 2a2 2 0 012 2v16a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h16zm-4 7.25a.75.75 0 00-.75-.75h-2.5v-2.5a.75.75 0 00-.75-.75h-2a.75.75 0 00-.75.75v2.5h-2.5a.75.75 0 00-.75.75v2c0 .414.336.75.75.75h2.5v2.5c0 .414.336.75.75.75h2a.75.75 0 00.75-.75v-2.5h2.5a.75.75 0 00.75-.75v-2z" />
</svg>
</a>
<a href="#" class="w-9 h-9 rounded-full bg-black-deep border border-silver-dark/30 flex items-center justify-center text-silver-light/70 hover:text-accent-gold hover:border-accent-gold/50 transition-colors relative z-10">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
<path d="M16 8.25a.75.75 0 00-.75-.75h-7a.75.75 0 000 1.5h7a.75.75 0 00.75-.75zM15.25 11.75a.75.75 0 01-.75.75h-7a.75.75 0 010-1.5h7a.75.75 0 01.75.75zM14.5 15.25a.75.75 0 000-1.5h-7a.75.75 0 000 1.5h7z" />
<path d="M7.75 21.5C6.785 21.5 6 20.715 6 19.75v-15.5C6 3.283 6.784 2.5 7.75 2.5h8.5c.967 0 1.75.783 1.75 1.75v15.5c0 .965-.785 1.75-1.75 1.75h-8.5zm0-1.5h8.5a.25.25 0 00.25-.25v-15.5a.25.25 0 00-.25-.25h-8.5a.25.25 0 00-.25.25v15.5c0 .138.112.25.25.25z" />
</svg>
</a>
</div>
<p class="text-silver-dark text-xs">
{t['footer.social']}
</p>
</div>
</div>
<!-- Bottom footer content -->
<div class="pt-6 border-t border-silver-dark/20 flex flex-col md:flex-row justify-between items-center gap-4">
<div class="text-silver-dark text-xs">
{t['footer.copyright'].replace('{year}', currentYear.toString())}
</div>
<div class="flex gap-6">
<a href={`/${currentLang}/privacy/`} class="text-silver-dark text-xs hover:text-silver-light transition-colors relative z-10 py-1 inline-block">{t['footer.privacy']}</a>
<a href={`/${currentLang}/terms/`} class="text-silver-dark text-xs hover:text-silver-light transition-colors relative z-10 py-1 inline-block">{t['footer.terms']}</a>
</div>
</div>
</div>
</footer>
<script>
// Fix for footer links
document.addEventListener('DOMContentLoaded', function() {
const footerLinks = document.querySelectorAll('footer a[href*="#"]');
footerLinks.forEach(link => {
link.addEventListener('click', (e) => {
const target = e.currentTarget as HTMLAnchorElement;
const href = target.getAttribute('href');
if (href && href.includes('#')) {
const targetId = href.split('#')[1];
const targetElement = document.getElementById(targetId);
if (targetElement) {
e.preventDefault();
targetElement.scrollIntoView({ behavior: 'smooth' });
}
}
});
});
});
</script>

40
src/components/Header.astro Normal file
View File

@@ -0,0 +1,40 @@
---
import { ui, languages, defaultLang } from '../i18n/ui';
import LanguageSelector from './LanguageSelector.astro';
// Get current language from URL
const { pathname } = Astro.url;
// Extract the first path segment
const pathSegments = pathname.split('/').filter(Boolean);
const langCode = pathSegments[0];
// Check if the first segment is a valid language code
const currentLang = langCode && Object.keys(languages).includes(langCode)
? langCode
: defaultLang;
const t = ui[currentLang as keyof typeof ui];
const phone = t['phone'];
---
<header class="sticky top-0 z-50 bg-gradient-to-r from-black-deep to-black-medium backdrop-blur-md border-b border-silver-dark/30">
<div class="max-w-7xl mx-auto flex items-center justify-between px-4 py-3">
<a href={`/${currentLang}/`} class="flex items-center gap-3 group">
<div class="relative w-14 h-14 flex items-center justify-center shadow-lg">
<img src="/Logo.png" alt="JPM Security Logo" class="h-12 w-12 object-contain transition-all group-hover:scale-110" />
</div>
<span class="text-xl font-bold tracking-wide text-transparent bg-clip-text bg-gradient-to-r from-silver-metallic to-silver-light">JPM</span>
</a>
<div class="flex items-center gap-6">
<LanguageSelector />
<div class="flex flex-col items-end text-right">
<span class="text-xl font-bold tracking-wide text-silver-light">Security & Services</span>
<div class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-accent-gold" viewBox="0 0 20 20" fill="currentColor">
<path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
</svg>
<span class="text-silver-light text-sm font-medium">{phone}</span>
</div>
</div>
</div>
</div>
</header>

34
src/components/LanguageSelector.astro Normal file
View File

@@ -0,0 +1,34 @@
---
import { languages } from '../i18n/ui';
// Get the current URL path
const { pathname } = Astro.url;
// Function to get the current language and generate the URL for a different language
function getTargetPath(targetLang) {
// Check if the current path starts with a language code, if so, replace it
const langPathRegex = /^\/(en|nl)\//;
const matches = pathname.match(langPathRegex);
if (matches) {
return pathname.replace(langPathRegex, `/${targetLang}/`);
}
// If no language code in the path, assume we're at the root
// and add the target language code
return `/${targetLang}/`;
}
---
<div class="flex items-center space-x-2">
{Object.entries(languages).map(([lang, label]) => (
<a
href={getTargetPath(lang)}
class={`text-sm px-2 py-1 rounded ${pathname.includes(`/${lang}/`) || (pathname === '/' && lang === 'en')
? 'bg-accent-blue/20 text-silver-metallic font-medium'
: 'text-silver-light/70 hover:text-silver-metallic'}`}
>
{label}
</a>
))}
</div>

22
src/components/ServiceCard.astro Normal file
View File

@@ -0,0 +1,22 @@
---
const { icon, title, description, link } = Astro.props;
---
<a href={link} class="block group relative bg-gradient-to-br from-black-deep to-black-medium overflow-hidden rounded-xl border border-silver-dark/20 shadow-xl transition-all duration-300 hover:shadow-2xl hover:border-silver-metallic/50 hover:translate-y-[-5px]">
<div class="absolute top-0 left-0 w-full h-1/3 bg-gradient-to-b from-accent-blue/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div class="p-8 flex flex-col items-center text-center z-10 relative">
<div class="mb-6 text-silver-metallic w-16 h-16 flex items-center justify-center bg-black-deep/50 rounded-full border border-silver-dark/30 shadow-inner p-4 transition-all duration-300 group-hover:scale-110 group-hover:border-accent-gold/50">
<Fragment set:html={icon} />
</div>
<h3 class="text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-silver-metallic to-silver-light mb-4">{title}</h3>
<p class="text-silver-light/80 text-base mb-6">{description}</p>
<div class="mt-auto">
<span class="inline-flex items-center text-accent-gold hover:text-accent-blue transition-colors duration-300 text-sm font-medium">
Learn More
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</span>
</div>
</div>
</a>

189
src/i18n/ui.ts Normal file
View File

@@ -0,0 +1,189 @@
// Define the languages your site supports
export const languages = {
en: 'English',
nl: 'Nederlands',
};
// Set your default language
export const defaultLang = 'en';
// Whether to show the default language in the URL - set to true to avoid redirect loops
export const showDefaultLang = true;
// Translation dictionaries for UI strings
export const ui = {
en: {
// Header
'phone': '+1 (555) 123-4567',
// Navigation
'nav.services': 'Services',
'nav.about': 'About Us',
'nav.testimonials': 'Testimonials',
'nav.contact': 'Contact',
// Hero Section
'hero.tagline': 'Professional. Discreet. Dependable.',
'hero.subtitle': 'Security, Concierge, and Food Services — Tailored to Your Needs.',
'hero.cta': 'Explore Our Services',
'hero.scroll': 'Scroll Down',
// Services Section
'services.title': 'What We Offer',
'services.heading': 'Our Services',
'services.security.title': 'Security Services',
'services.security.description': 'Event Security, Access Control, Surveillance',
'services.concierge.title': 'Concierge Services',
'services.concierge.description': 'Guest Handling, VIP Assistance, Parking',
'services.food.title': 'Food Services',
'services.food.description': 'Staff Refreshment, Venue Hospitality',
// Service Detail Pages
'services.back': 'Back to Services',
'services.security.page.title': 'Security Services',
'services.security.page.description': 'Professional security solutions tailored to your specific needs.',
'services.security.page.content': 'Our highly trained security professionals provide comprehensive security services for events, venues, and private clients. We offer access control, surveillance, threat assessment, and emergency response capabilities. Each security plan is tailored to your specific requirements, ensuring maximum protection while maintaining a discreet and professional presence.',
'services.security.page.features': 'Our Security Services Include:',
'services.security.page.feature1': 'Event Security',
'services.security.page.feature2': 'Access Control',
'services.security.page.feature3': '24/7 Surveillance',
'services.security.page.feature4': 'VIP Protection',
'services.security.page.feature5': 'Risk Assessment',
'services.concierge.page.title': 'Concierge Services',
'services.concierge.page.description': 'Exceptional hospitality services for events and venues.',
'services.concierge.page.content': 'Our concierge team provides premium hospitality services to ensure your guests experience the highest level of comfort and assistance. From guest reception and VIP handling to personal assistance and transportation coordination, our professional staff ensures every detail is managed with discretion and efficiency.',
'services.concierge.page.features': 'Our Concierge Services Include:',
'services.concierge.page.feature1': 'Guest Reception',
'services.concierge.page.feature2': 'VIP Assistance',
'services.concierge.page.feature3': 'Transportation Coordination',
'services.concierge.page.feature4': 'Personal Assistance',
'services.concierge.page.feature5': 'Event Information',
'services.food.page.title': 'Food Services',
'services.food.page.description': 'High-quality catering and hospitality solutions.',
'services.food.page.content': 'Our food services division specializes in providing refreshments and hospitality solutions for staff and guests at events and venues. We focus on quality, presentation, and service, ensuring that all dietary requirements are met with professionalism and attention to detail.',
'services.food.page.features': 'Our Food Services Include:',
'services.food.page.feature1': 'Staff Refreshments',
'services.food.page.feature2': 'Venue Hospitality',
'services.food.page.feature3': 'Catering Coordination',
'services.food.page.feature4': 'Dietary Accommodation',
'services.food.page.feature5': 'Premium Service Options',
// About Section
'about.label': 'Who We Are',
'about.title': 'About Us',
'about.content': 'JPM Security & Services is built on the values of discretion, professionalism, and versatility. Our team is dedicated to providing tailored solutions for every client, whether you need vigilant security, attentive concierge, or seamless hospitality support.',
'about.values': 'Our Core Values',
'about.value1': 'Discretion',
'about.value2': 'Professionalism',
'about.value3': 'Versatility',
// Testimonials Section
'testimonials.label': 'Client Feedback',
'testimonials.title': 'What Our Clients Say',
// Contact Section
'contact.label': 'Get in Touch',
'contact.title': 'Contact Us',
'contact.info.title': 'Contact Information',
'contact.message.title': 'Send us a Message',
'contact.message.prompt': 'Fill out the form below and we\'ll get back to you as soon as possible.',
'contact.button': 'Contact Form Coming Soon',
'contact.email': 'info@jpmsecurity.com',
'contact.address': '123 Security Ave, Amsterdam',
// Footer
'footer.description': 'Professional security, concierge, and food services tailored to meet your unique requirements.',
'footer.quicklinks': 'Quick Links',
'footer.connect': 'Connect With Us',
'footer.social': 'Join our social channels for the latest updates and security tips.',
'footer.copyright': '© {year} JPM Security & Services. All rights reserved.',
'footer.privacy': 'Privacy Policy',
'footer.terms': 'Terms of Service',
},
nl: {
// Header
'phone': '+1 (555) 123-4567',
// Navigation
'nav.services': 'Diensten',
'nav.about': 'Over Ons',
'nav.testimonials': 'Getuigenissen',
'nav.contact': 'Contact',
// Hero Section
'hero.tagline': 'Professioneel. Discreet. Betrouwbaar.',
'hero.subtitle': 'Beveiliging, Conciërge en Cateringdiensten — Op Maat van Uw Behoeften.',
'hero.cta': 'Ontdek Onze Diensten',
'hero.scroll': 'Scroll Omlaag',
// Services Section
'services.title': 'Wat Wij Bieden',
'services.heading': 'Onze Diensten',
'services.security.title': 'Beveiligingsdiensten',
'services.security.description': 'Evenementbeveiliging, Toegangscontrole, Surveillance',
'services.concierge.title': 'Conciërgediensten',
'services.concierge.description': 'Gastenontvangst, VIP-Assistentie, Parkeren',
'services.food.title': 'Cateringdiensten',
'services.food.description': 'Personeelsverversingen, Locatiehoreca',
// Service Detail Pages
'services.back': 'Terug naar Diensten',
'services.security.page.title': 'Beveiligingsdiensten',
'services.security.page.description': 'Professionele beveiligingsoplossingen op maat van uw specifieke behoeften.',
'services.security.page.content': 'Onze hoogopgeleide beveiligingsprofessionals bieden uitgebreide beveiligingsdiensten voor evenementen, locaties en privéklanten. We bieden toegangscontrole, surveillance, dreigingsbeoordeling en noodrespons. Elk beveiligingsplan is afgestemd op uw specifieke eisen, zodat maximale bescherming wordt gegarandeerd terwijl een discrete en professionele aanwezigheid wordt gehandhaafd.',
'services.security.page.features': 'Onze Beveiligingsdiensten Omvatten:',
'services.security.page.feature1': 'Evenementbeveiliging',
'services.security.page.feature2': 'Toegangscontrole',
'services.security.page.feature3': '24/7 Surveillance',
'services.security.page.feature4': 'VIP-Bescherming',
'services.security.page.feature5': 'Risicobeoordeling',
'services.concierge.page.title': 'Conciërgediensten',
'services.concierge.page.description': 'Uitzonderlijke hospitalitydiensten voor evenementen en locaties.',
'services.concierge.page.content': 'Ons conciërgeteam biedt premium hospitalitydiensten om ervoor te zorgen dat uw gasten het hoogste niveau van comfort en assistentie ervaren. Van gastontvangst en VIP-behandeling tot persoonlijke assistentie en transportcoördinatie, ons professionele personeel zorgt ervoor dat elk detail met discretie en efficiëntie wordt beheerd.',
'services.concierge.page.features': 'Onze Conciërgediensten Omvatten:',
'services.concierge.page.feature1': 'Gastontvangst',
'services.concierge.page.feature2': 'VIP-Assistentie',
'services.concierge.page.feature3': 'Transportcoördinatie',
'services.concierge.page.feature4': 'Persoonlijke Assistentie',
'services.concierge.page.feature5': 'Evenementinformatie',
'services.food.page.title': 'Cateringdiensten',
'services.food.page.description': 'Hoogwaardige catering- en hospitalityoplossingen.',
'services.food.page.content': 'Onze cateringafdeling is gespecialiseerd in het verstrekken van verfrissingen en hospitalityoplossingen voor personeel en gasten bij evenementen en locaties. We richten ons op kwaliteit, presentatie en service, zodat aan alle dieetvereisten wordt voldaan met professionaliteit en aandacht voor detail.',
'services.food.page.features': 'Onze Cateringdiensten Omvatten:',
'services.food.page.feature1': 'Personeelsverversingen',
'services.food.page.feature2': 'Locatiehoreca',
'services.food.page.feature3': 'Cateringcoördinatie',
'services.food.page.feature4': 'Dieetaccommodatie',
'services.food.page.feature5': 'Premium Serviceopties',
// About Section
'about.label': 'Wie Wij Zijn',
'about.title': 'Over Ons',
'about.content': 'JPM Security & Services is gebouwd op de waarden van discretie, professionaliteit en veelzijdigheid. Ons team is toegewijd aan het leveren van oplossingen op maat voor elke klant, of u nu behoefte heeft aan waakzame beveiliging, attente conciërge, of naadloze horeca ondersteuning.',
'about.values': 'Onze Kernwaarden',
'about.value1': 'Discretie',
'about.value2': 'Professionaliteit',
'about.value3': 'Veelzijdigheid',
// Testimonials Section
'testimonials.label': 'Klantenfeedback',
'testimonials.title': 'Wat Onze Klanten Zeggen',
// Contact Section
'contact.label': 'Neem Contact Op',
'contact.title': 'Contact Ons',
'contact.info.title': 'Contactgegevens',
'contact.message.title': 'Stuur ons een Bericht',
'contact.message.prompt': 'Vul het onderstaande formulier in en we nemen zo snel mogelijk contact met u op.',
'contact.button': 'Contactformulier Binnenkort Beschikbaar',
'contact.email': 'info@jpmsecurity.com',
'contact.address': '123 Security Ave, Amsterdam',
// Footer
'footer.description': 'Professionele beveiliging, conciërge en catering diensten op maat van uw unieke behoeften.',
'footer.quicklinks': 'Snelle Links',
'footer.connect': 'Verbind Met Ons',
'footer.social': 'Volg onze sociale kanalen voor de nieuwste updates en beveiligingstips.',
'footer.copyright': '© {year} JPM Security & Services. Alle rechten voorbehouden.',
'footer.privacy': 'Privacybeleid',
'footer.terms': 'Servicevoorwaarden',
},
};
// Define routes by language, useful for translated paths
export const routes = {
en: {
'services': 'services',
'about': 'about',
'testimonials': 'testimonials',
},
nl: {
'services': 'diensten',
'about': 'over-ons',
'testimonials': 'getuigenissen',
},
};

98
src/layouts/BaseLayout.astro Normal file
View File

@@ -0,0 +1,98 @@
---
import '../styles/global.css';
import { defaultLang, languages } from '../i18n/ui';
// Get current language from URL
const { pathname } = Astro.url;
// Extract the first path segment
const pathSegments = pathname.split('/').filter(Boolean);
const langCode = pathSegments[0];
// Check if the first segment is a valid language code
const currentLang = langCode && Object.keys(languages).includes(langCode)
? langCode
: defaultLang;
// Init AOS animation library on client-side
---
<!DOCTYPE html>
<html lang={currentLang} class="dark scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="JPM Security & Services: Professional, Discreet, Dependable. Security, Concierge, and Food Services tailored to your needs." />
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Preloads -->
<link rel="preload" href="/fonts/Inter.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- AOS animations -->
<link href="https://unpkg.com/aos@next/dist/aos.css" rel="stylesheet">
<title>JPM Security & Services | Professional, Discreet, Dependable</title>
<!-- Prevent infinite redirects -->
<script is:inline>
// Reset redirect count once the page is fully loaded
document.addEventListener('DOMContentLoaded', () => {
if (typeof sessionStorage !== 'undefined') {
sessionStorage.setItem('redirectCount', '0');
}
});
</script>
<style is:global>
/* Ensure section ids have proper spacing for anchor navigation */
section[id] {
scroll-margin-top: 2rem;
}
/* Ensure proper z-index layering */
.relative {
position: relative;
}
/* Fix for AOS animations that might create layers blocking interaction */
[data-aos] {
pointer-events: none;
}
[data-aos] * {
pointer-events: auto;
}
/* Ensure links are always clickable */
a, button {
position: relative;
z-index: 5;
}
</style>
</head>
<body class="min-h-screen bg-black-deep text-silver-light font-sans antialiased selection:bg-accent-blue selection:text-silver-light">
<slot />
<!-- Initialize AOS -->
<script is:inline src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script is:inline>
document.addEventListener('DOMContentLoaded', () => {
AOS.init({
duration: 800,
easing: 'ease-out-cubic',
once: true,
offset: 50,
disableMutationObserver: false
});
// Ensure AOS doesn't block interactions
document.querySelectorAll('[data-aos]').forEach(el => {
el.addEventListener('animationend', () => {
el.style.pointerEvents = 'auto';
});
});
});
</script>
</body>
</html>

36
src/middleware.js Normal file
View File

@@ -0,0 +1,36 @@
// This is a client-side script to prevent infinite redirect loops
// Import this in your BaseLayout component
export function handleLanguageRedirects() {
// Only run in the browser
if (typeof window === 'undefined') return;
// Track redirects to prevent infinite loops
const redirectCount = sessionStorage.getItem('redirectCount') || 0;
// If we've redirected more than 3 times, stop redirecting to prevent infinite loops
if (parseInt(redirectCount, 10) > 3) {
console.warn('Too many redirects detected, stopping to prevent infinite loop');
sessionStorage.setItem('redirectCount', '0');
return;
}
// Add logic here if needed to handle redirects
// For example, detect language from URL and redirect if needed
// Increment redirect count when a redirect happens
// This should be called right before redirecting
function incrementRedirectCount() {
const currentCount = parseInt(sessionStorage.getItem('redirectCount') || '0', 10);
sessionStorage.setItem('redirectCount', (currentCount + 1).toString());
}
// Reset redirect count when navigation is complete
window.addEventListener('load', () => {
sessionStorage.setItem('redirectCount', '0');
});
return {
incrementRedirectCount
};
}

257
src/pages/[lang]/index.astro Normal file
View File

@@ -0,0 +1,257 @@
---
import BaseLayout from '../../layouts/BaseLayout.astro';
import Header from '../../components/Header.astro';
import Footer from '../../components/Footer.astro';
import ServiceCard from '../../components/ServiceCard.astro';
import { ui, languages, defaultLang } from '../../i18n/ui';
// Get language from the URL
export async function getStaticPaths() {
return Object.keys(languages).map(lang => {
return { params: { lang } };
});
}
const { lang = defaultLang } = Astro.params;
const t = ui[lang as keyof typeof ui];
// Get translations needed for multiple sections
const phone = t['phone'];
const services = [
{
icon: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-full h-full"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 11c0-1.657-1.343-3-3-3s-3 1.343-3 3 1.343 3 3 3 3-1.343 3-3zm0 0c0-1.657 1.343-3 3-3s3 1.343 3 3-1.343 3-3 3-3-1.343-3-3z" /></svg>',
title: t['services.security.title'],
description: t['services.security.description'],
link: `/${lang}/services/security/`
},
{
icon: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-full h-full"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>',
title: t['services.concierge.title'],
description: t['services.concierge.description'],
link: `/${lang}/services/concierge/`
},
{
icon: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-full h-full"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 10h16M4 14h16M4 18h16" /></svg>',
title: t['services.food.title'],
description: t['services.food.description'],
link: `/${lang}/services/food/`
},
];
const testimonials = [
{ quote: 'JPM provided exceptional service and peace of mind at our event.', author: 'A.B., Event Manager' },
{ quote: 'Professional, discreet, and always dependable.', author: 'C.D., Private Client' },
{ quote: 'Their concierge team made our guests feel truly welcome.', author: 'E.F., Venue Director' },
];
---
<BaseLayout>
<Header />
<!-- Hero Section -->
<section class="relative min-h-[80vh] flex flex-col items-center justify-center py-20 overflow-hidden">
<!-- Background elements -->
<div class="absolute inset-0 -z-20">
<div class="absolute inset-0 bg-gradient-to-b from-black-deep via-black-medium to-black-deep"></div>
<div class="absolute inset-0 opacity-10 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-silver-metallic/20 to-transparent"></div>
</div>
<!-- Logo watermark -->
<div class="absolute inset-0 -z-10 flex items-center justify-center opacity-10 pointer-events-none select-none">
<img src="/Logo.png" alt="JPM Logo" class="w-[40rem] h-[40rem] object-contain mx-auto" loading="eager" />
</div>
<!-- Blur overlay for text readability -->
<div class="absolute inset-0 -z-5 backdrop-blur-[2px] bg-black-deep/30 pointer-events-none"></div>
<!-- Animated lines -->
<div class="absolute inset-0 -z-10 overflow-hidden">
<div class="absolute top-0 left-0 w-full h-0.5 bg-gradient-to-r from-transparent via-silver-metallic/30 to-transparent"></div>
<div class="absolute bottom-0 left-0 w-full h-0.5 bg-gradient-to-r from-transparent via-silver-metallic/30 to-transparent"></div>
</div>
<!-- Content -->
<div class="container mx-auto px-4 text-center relative z-10">
<h1 class="text-5xl md:text-7xl font-extrabold mb-6">
<span class="block text-transparent bg-clip-text bg-gradient-to-r from-silver-metallic to-silver-light drop-shadow-xl">
{t['hero.tagline']}
</span>
</h1>
<p class="text-xl md:text-2xl text-silver-light/90 mb-10 max-w-3xl mx-auto leading-relaxed">
{t['hero.subtitle']}
</p>
<a href="#services" class="inline-block bg-gradient-to-r from-accent-blue to-accent-blue/80 text-silver-light font-semibold px-8 py-3 rounded-full shadow-2xl hover:shadow-accent-blue/20 transition-all duration-300 hover:translate-y-[-2px]">
{t['hero.cta']}
</a>
</div>
<!-- Scroll indicator -->
<div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 flex flex-col items-center">
<span class="text-silver-light/50 text-sm mb-2">{t['hero.scroll']}</span>
<div class="w-0.5 h-10 bg-gradient-to-b from-silver-metallic/50 to-transparent animate-pulse"></div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="relative py-24 px-4 bg-gradient-to-b from-black-deep to-black-medium">
<div class="absolute inset-0 bg-[url('/assets/grid-pattern.svg')] opacity-5"></div>
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<span class="inline-block text-accent-gold text-sm font-medium tracking-wider uppercase mb-3">{t['services.title']}</span>
<h2 class="text-3xl md:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-silver-metallic to-silver-light mb-6">{t['services.heading']}</h2>
<div class="w-24 h-1 bg-gradient-to-r from-silver-dark to-transparent rounded mx-auto"></div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-10">
{services.map(service => (
<ServiceCard
icon={service.icon}
title={service.title}
description={service.description}
link={service.link}
/>
))}
</div>
</div>
</section>
<!-- About Us Section -->
<section id="about" class="relative py-24 px-4">
<div class="absolute inset-0 bg-gradient-to-br from-black-deep to-black-medium"></div>
<div class="absolute inset-y-0 right-0 w-1/2 bg-gradient-to-l from-accent-blue/5 to-transparent"></div>
<div class="max-w-4xl mx-auto relative z-10">
<div class="bg-gradient-to-br from-black-deep/90 to-black-medium/90 backdrop-blur-sm rounded-2xl border border-silver-dark/20 shadow-xl overflow-hidden">
<div class="absolute top-0 right-0 w-full h-1 bg-gradient-to-r from-transparent via-accent-gold/30 to-transparent"></div>
<div class="p-10 md:p-12">
<span class="inline-block text-accent-gold text-sm font-medium tracking-wider uppercase mb-3">{t['about.label']}</span>
<h2 class="text-2xl md:text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-silver-metallic to-silver-light mb-6">{t['about.title']}</h2>
<p class="text-lg text-silver-light/80 mb-6 leading-relaxed">
{t['about.content']}
</p>
<div class="mt-8">
<h3 class="text-silver-light text-lg font-medium mb-4">{t['about.values']}</h3>
<ul class="flex flex-wrap gap-4">
<li class="bg-gradient-to-r from-black-deep to-black-medium border border-silver-dark/30 rounded-full px-6 py-2 text-silver-metallic text-sm font-medium flex items-center gap-2">
<span class="w-2 h-2 bg-accent-gold rounded-full"></span>
{t['about.value1']}
</li>
<li class="bg-gradient-to-r from-black-deep to-black-medium border border-silver-dark/30 rounded-full px-6 py-2 text-silver-metallic text-sm font-medium flex items-center gap-2">
<span class="w-2 h-2 bg-accent-gold rounded-full"></span>
{t['about.value2']}
</li>
<li class="bg-gradient-to-r from-black-deep to-black-medium border border-silver-dark/30 rounded-full px-6 py-2 text-silver-metallic text-sm font-medium flex items-center gap-2">
<span class="w-2 h-2 bg-accent-gold rounded-full"></span>
{t['about.value3']}
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section id="testimonials" class="relative py-24 px-4 bg-gradient-to-b from-black-medium to-black-deep">
<div class="absolute inset-0 bg-[radial-gradient(circle_at_top_right,_var(--tw-gradient-stops))] from-accent-blue/5 to-transparent"></div>
<div class="max-w-7xl mx-auto relative z-10">
<div class="text-center mb-16">
<span class="inline-block text-accent-gold text-sm font-medium tracking-wider uppercase mb-3">{t['testimonials.label']}</span>
<h2 class="text-3xl md:text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-silver-metallic to-silver-light mb-6">{t['testimonials.title']}</h2>
<div class="w-24 h-1 bg-gradient-to-r from-silver-dark to-transparent rounded mx-auto"></div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
{testimonials.map((t, i) => (
<div class="backdrop-blur-sm bg-gradient-to-br from-black-deep/80 to-black-medium/80 border-l-2 border-accent-gold/50 rounded-lg p-8 shadow-xl">
<svg class="w-8 h-8 text-accent-gold/30 mb-4" fill="currentColor" viewBox="0 0 24 24">
<path d="M4.583 17.321C3.553 16.227 3 15 3 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 01-3.5 3.5c-1.073 0-2.099-.49-2.748-1.179zm10 0C13.553 16.227 13 15 13 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804 .167 3.226 1.648 3.226 3.489a3.5 3.5 0 01-3.5 3.5c-1.073 0-2.099-.49-2.748-1.179z"></path>
</svg>
<p class="text-silver-light/90 text-lg italic mb-6 leading-relaxed">"{t.quote}"</p>
<div class="flex items-center justify-between">
<div class="text-silver-dark text-sm font-medium">— {t.author}</div>
<div class="flex">
{Array(5).fill(0).map((_, idx) => (
<svg class={`w-4 h-4 ${idx < 5 ? 'text-accent-gold' : 'text-silver-dark/30'}`} fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
))}
</div>
</div>
</div>
))}
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="relative py-24 px-4 bg-gradient-to-b from-black-deep to-black-medium">
<div class="absolute inset-0 opacity-10 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-silver-metallic/20 to-transparent"></div>
<div class="max-w-4xl mx-auto relative z-10">
<div class="text-center mb-12">
<span class="inline-block text-accent-gold text-sm font-medium tracking-wider uppercase mb-3">{t['contact.label']}</span>
<h2 class="text-3xl md:text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-silver-metallic to-silver-light mb-6">{t['contact.title']}</h2>
<div class="w-24 h-1 bg-gradient-to-r from-silver-dark to-transparent rounded mx-auto"></div>
</div>
<div class="bg-gradient-to-br from-black-deep/90 to-black-medium/90 backdrop-blur-sm rounded-2xl border border-silver-dark/20 shadow-xl overflow-hidden">
<div class="absolute top-0 right-0 w-full h-1 bg-gradient-to-r from-transparent via-accent-gold/30 to-transparent"></div>
<div class="p-10 md:p-12">
<div class="flex flex-col md:flex-row gap-10 items-start justify-between">
<div class="md:w-1/2">
<h3 class="text-xl text-silver-light font-semibold mb-4">{t['contact.info.title']}</h3>
<div class="space-y-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-black-deep border border-silver-dark/30 flex items-center justify-center text-accent-gold">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
</svg>
</div>
<span class="text-silver-light/80">{phone}</span>
</div>
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-black-deep border border-silver-dark/30 flex items-center justify-center text-accent-gold">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</div>
<span class="text-silver-light/80">{t['contact.email']}</span>
</div>
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-black-deep border border-silver-dark/30 flex items-center justify-center text-accent-gold">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</div>
<span class="text-silver-light/80">{t['contact.address']}</span>
</div>
</div>
</div>
<div class="md:w-1/2">
<h3 class="text-xl text-silver-light font-semibold mb-4">{t['contact.message.title']}</h3>
<p class="text-silver-light/80 mb-6">{t['contact.message.prompt']}</p>
<div class="space-y-4">
<button class="w-full bg-gradient-to-r from-accent-blue to-accent-blue/80 text-silver-light font-semibold px-6 py-3 rounded-lg shadow-xl hover:shadow-accent-blue/20 transition-all duration-300 hover:translate-y-[-2px]">
{t['contact.button']}
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<Footer />
</BaseLayout>

133
src/pages/[lang]/privacy.astro Normal file
View File

@@ -0,0 +1,133 @@
---
import BaseLayout from '../../layouts/BaseLayout.astro';
import Header from '../../components/Header.astro';
import Footer from '../../components/Footer.astro';
import { ui, languages, defaultLang } from '../../i18n/ui';
// Get language from the URL
export async function getStaticPaths() {
return Object.keys(languages).map(lang => {
return { params: { lang } };
});
}
const { lang = defaultLang } = Astro.params;
const t = ui[lang as keyof typeof ui];
---
<BaseLayout>
<Header />
<!-- Hero Section -->
<section class="relative pt-32 pb-12 overflow-hidden">
<!-- Background elements -->
<div class="absolute inset-0 -z-10">
<div class="absolute inset-0 bg-gradient-to-b from-black-deep via-black-medium to-black-deep"></div>
<div class="absolute inset-0 opacity-10 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-silver-metallic/20 to-transparent"></div>
</div>
<!-- Content -->
<div class="container mx-auto px-4 relative z-10">
<h1 class="text-4xl md:text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-silver-metallic to-silver-light mb-6">
Privacy Policy
</h1>
</div>
</section>
<!-- Main Content Section -->
<section class="relative py-12 px-4">
<div class="absolute inset-0 bg-gradient-to-br from-black-deep to-black-medium"></div>
<div class="max-w-4xl mx-auto relative z-10">
<div class="bg-gradient-to-br from-black-deep/90 to-black-medium/90 backdrop-blur-sm rounded-2xl border border-silver-dark/20 shadow-xl overflow-hidden">
<div class="p-8 md:p-10">
<div class="prose prose-invert max-w-none text-silver-light/90">
<p class="mb-6">Last updated: {new Date().toISOString().split('T')[0]}</p>
<h2 class="text-2xl text-silver-metallic font-semibold mb-4">1. Introduction</h2>
<p class="mb-4">This Privacy Policy explains how JPM Security & Services ("we," "our," or "us") collects, uses, shares, and protects your personal information when you visit our website, use our services, or interact with us in any way.</p>
<p class="mb-6">We are committed to protecting your privacy and complying with applicable data protection laws, including the General Data Protection Regulation (GDPR).</p>
<h2 class="text-2xl text-silver-metallic font-semibold mb-4">2. Information We Collect</h2>
<p class="mb-4">We may collect the following types of information:</p>
<ul class="list-disc pl-6 mb-6 space-y-2">
<li><strong>Personal Information:</strong> Name, email address, phone number, and other contact details when you contact us through our website or sign up for our services.</li>
<li><strong>Usage Data:</strong> Information about how you interact with our website, including IP address, browser type, pages visited, time spent on pages, and other browsing data.</li>
<li><strong>Communication Data:</strong> Any information you provide when communicating with us via email, phone, or through our contact forms.</li>
</ul>
<h2 class="text-2xl text-silver-metallic font-semibold mb-4">3. How We Use Your Information</h2>
<p class="mb-4">We use your information for the following purposes:</p>
<ul class="list-disc pl-6 mb-6 space-y-2">
<li>To provide and improve our services</li>
<li>To respond to your inquiries and communications</li>
<li>To send you information about our services (with your consent)</li>
<li>To ensure the security and functionality of our website</li>
<li>To comply with legal obligations</li>
</ul>
<h2 class="text-2xl text-silver-metallic font-semibold mb-4">4. Legal Basis for Processing</h2>
<p class="mb-4">We process your personal data on the following legal grounds:</p>
<ul class="list-disc pl-6 mb-6 space-y-2">
<li><strong>Consent:</strong> Where you have given clear consent for us to process your personal data for a specific purpose.</li>
<li><strong>Contract:</strong> Where processing is necessary for the performance of a contract with you or to take steps at your request before entering into a contract.</li>
<li><strong>Legitimate Interests:</strong> Where processing is necessary for our legitimate interests or those of a third party, except where such interests are overridden by your interests or fundamental rights.</li>
<li><strong>Legal Obligation:</strong> Where processing is necessary for compliance with a legal obligation to which we are subject.</li>
</ul>
<h2 class="text-2xl text-silver-metallic font-semibold mb-4">5. Data Sharing and Disclosure</h2>
<p class="mb-4">We may share your personal information with:</p>
<ul class="list-disc pl-6 mb-6 space-y-2">
<li>Service providers who help us operate our business and website</li>
<li>Legal authorities when required by law or to protect our rights</li>
<li>Business partners with your consent or when necessary to provide services</li>
</ul>
<p class="mb-6">We do not sell your personal information to third parties.</p>
<h2 class="text-2xl text-silver-metallic font-semibold mb-4">6. Data Retention</h2>
<p class="mb-6">We retain your personal information only for as long as necessary to fulfill the purposes for which we collected it, including for the purposes of satisfying any legal, accounting, or reporting requirements. To determine the appropriate retention period, we consider the amount, nature, and sensitivity of the data, the potential risk of harm from unauthorized use or disclosure, and applicable legal requirements.</p>
<h2 class="text-2xl text-silver-metallic font-semibold mb-4">7. Your Data Protection Rights</h2>
<p class="mb-4">Under the GDPR and other applicable data protection laws, you have the following rights:</p>
<ul class="list-disc pl-6 mb-6 space-y-2">
<li><strong>Right to Access:</strong> You can request a copy of the personal information we hold about you.</li>
<li><strong>Right to Rectification:</strong> You can request that we correct any inaccurate or incomplete information.</li>
<li><strong>Right to Erasure:</strong> You can request that we delete your personal information in certain circumstances.</li>
<li><strong>Right to Restrict Processing:</strong> You can request that we restrict the processing of your information in certain circumstances.</li>
<li><strong>Right to Data Portability:</strong> You can request to receive your personal information in a structured, machine-readable format.</li>
<li><strong>Right to Object:</strong> You can object to our processing of your personal information in certain circumstances.</li>
<li><strong>Right to Withdraw Consent:</strong> Where we rely on your consent to process your personal information, you have the right to withdraw that consent at any time.</li>
</ul>
<p class="mb-6">To exercise any of these rights, please contact us using the information provided in the "Contact Us" section below.</p>
<h2 class="text-2xl text-silver-metallic font-semibold mb-4">8. Cookies and Similar Technologies</h2>
<p class="mb-6">Our website uses cookies and similar technologies to enhance your browsing experience, analyze site traffic, and understand where our visitors are coming from. You can control cookies through your browser settings and other tools. For more information about our use of cookies, please see our Cookie Policy.</p>
<h2 class="text-2xl text-silver-metallic font-semibold mb-4">9. Data Security</h2>
<p class="mb-6">We implement appropriate technical and organizational measures to protect your personal information from unauthorized access, disclosure, alteration, or destruction. However, no method of transmission over the Internet or electronic storage is 100% secure, so we cannot guarantee absolute security.</p>
<h2 class="text-2xl text-silver-metallic font-semibold mb-4">10. International Data Transfers</h2>
<p class="mb-6">Your personal information may be transferred to, and processed in, countries other than the country in which you reside. These countries may have data protection laws that are different from the laws of your country. We ensure that appropriate safeguards are in place to protect your personal information when it is transferred internationally.</p>
<h2 class="text-2xl text-silver-metallic font-semibold mb-4">11. Children's Privacy</h2>
<p class="mb-6">Our services are not directed to individuals under the age of 16. We do not knowingly collect personal information from children. If we become aware that we have collected personal information from a child without parental consent, we will take steps to delete that information.</p>
<h2 class="text-2xl text-silver-metallic font-semibold mb-4">12. Changes to This Privacy Policy</h2>
<p class="mb-6">We may update this Privacy Policy from time to time to reflect changes in our practices or for other operational, legal, or regulatory reasons. We will notify you of any material changes by posting the updated policy on our website or by other means as required by law.</p>
<h2 class="text-2xl text-silver-metallic font-semibold mb-4">13. Contact Us</h2>
<p class="mb-6">If you have any questions, concerns, or requests regarding this Privacy Policy or our data practices, please contact us at:</p>
<p class="mb-2">JPM Security & Services</p>
<p class="mb-2">Email: privacy@jpmsecurityservices.com</p>
<p class="mb-6">Phone: [Your phone number]</p>
<h2 class="text-2xl text-silver-metallic font-semibold mb-4">14. Data Protection Authority</h2>
<p class="mb-6">If you are located in the European Economic Area (EEA) and believe we are unlawfully processing your personal information, you also have the right to complain to your local data protection supervisory authority.</p>
</div>
</div>
</div>
</div>
</section>
<Footer />
</BaseLayout>

150
src/pages/[lang]/services/concierge/index.astro Normal file
View File

@@ -0,0 +1,150 @@
---
import BaseLayout from '../../../../layouts/BaseLayout.astro';
import Header from '../../../../components/Header.astro';
import Footer from '../../../../components/Footer.astro';
import { ui, languages, defaultLang } from '../../../../i18n/ui';
// Get language from the URL
export async function getStaticPaths() {
return Object.keys(languages).map(lang => {
return { params: { lang } };
});
}
const { lang = defaultLang } = Astro.params;
const t = ui[lang as keyof typeof ui];
---
<BaseLayout>
<Header />
<!-- Hero Section -->
<section class="relative pt-32 pb-20 overflow-hidden">
<!-- Background elements -->
<div class="absolute inset-0 -z-10">
<div class="absolute inset-0 bg-gradient-to-b from-black-deep via-black-medium to-black-deep"></div>
<div class="absolute inset-0 opacity-10 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-silver-metallic/20 to-transparent"></div>
</div>
<!-- Content -->
<div class="container mx-auto px-4 relative z-10">
<div class="mb-8">
<a href={`/${lang}/#services`} class="inline-flex items-center text-silver-light/70 hover:text-accent-gold transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
{t['services.back']}
</a>
</div>
<h1 class="text-4xl md:text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-silver-metallic to-silver-light mb-6">
{t['services.concierge.page.title']}
</h1>
<p class="text-xl text-silver-light/90 mb-12 max-w-3xl leading-relaxed">
{t['services.concierge.page.description']}
</p>
</div>
</section>
<!-- Main Content Section -->
<section class="relative py-16 px-4">
<div class="absolute inset-0 bg-gradient-to-br from-black-deep to-black-medium"></div>
<div class="max-w-6xl mx-auto relative z-10">
<div class="grid grid-cols-1 md:grid-cols-2 gap-16">
<!-- Left Column: Image -->
<div class="relative rounded-2xl overflow-hidden h-full min-h-[400px] order-2 md:order-1">
<div class="absolute inset-0 bg-gradient-to-br from-black-deep to-black-medium opacity-40"></div>
<img src="/assets/concierge-service.jpg" alt="Concierge Services" class="absolute inset-0 w-full h-full object-cover" onerror="this.src='/Logo.png';this.classList.add('p-12', 'object-contain', 'opacity-10');" />
<div class="absolute inset-0 bg-gradient-to-t from-black-deep to-transparent"></div>
<!-- Contact box -->
<div class="absolute bottom-0 left-0 right-0 p-8">
<div class="bg-gradient-to-br from-black-deep/90 to-black-medium/80 backdrop-blur-sm rounded-xl border border-silver-dark/30 p-6">
<h3 class="text-xl text-silver-light font-semibold mb-4">Elevate Your Guest Experience</h3>
<p class="text-silver-light/70 text-sm mb-6">Contact us today to learn how our concierge services can enhance your event or venue.</p>
<a href={`/${lang}/#contact`} class="inline-block bg-gradient-to-r from-accent-blue to-accent-blue/80 text-silver-light font-medium px-6 py-3 rounded-lg shadow-xl hover:shadow-accent-blue/20 transition-all duration-300 hover:translate-y-[-2px] w-full text-center">
Contact Us
</a>
</div>
</div>
</div>
<!-- Right Column: Content -->
<div class="order-1 md:order-2">
<div class="bg-gradient-to-br from-black-deep/90 to-black-medium/90 backdrop-blur-sm rounded-2xl border border-silver-dark/20 shadow-xl overflow-hidden h-full">
<div class="absolute top-0 right-0 w-full h-1 bg-gradient-to-r from-transparent via-accent-gold/30 to-transparent"></div>
<div class="p-8 md:p-10">
<p class="text-lg text-silver-light/80 mb-8 leading-relaxed">
{t['services.concierge.page.content']}
</p>
<h3 class="text-xl text-silver-light font-semibold mb-6">{t['services.concierge.page.features']}</h3>
<ul class="space-y-4">
<li class="flex items-start gap-4">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-accent-blue/20 flex items-center justify-center mt-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-accent-blue" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</div>
<div>
<h4 class="text-silver-metallic font-medium">{t['services.concierge.page.feature1']}</h4>
<p class="text-silver-light/70 text-sm mt-1">Professional welcoming and assistance for all guests.</p>
</div>
</li>
<li class="flex items-start gap-4">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-accent-blue/20 flex items-center justify-center mt-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-accent-blue" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</div>
<div>
<h4 class="text-silver-metallic font-medium">{t['services.concierge.page.feature2']}</h4>
<p class="text-silver-light/70 text-sm mt-1">Personalized service for high-profile and important guests.</p>
</div>
</li>
<li class="flex items-start gap-4">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-accent-blue/20 flex items-center justify-center mt-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-accent-blue" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</div>
<div>
<h4 class="text-silver-metallic font-medium">{t['services.concierge.page.feature3']}</h4>
<p class="text-silver-light/70 text-sm mt-1">Arranging transportation and managing arrival/departure logistics.</p>
</div>
</li>
<li class="flex items-start gap-4">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-accent-blue/20 flex items-center justify-center mt-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-accent-blue" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</div>
<div>
<h4 class="text-silver-metallic font-medium">{t['services.concierge.page.feature4']}</h4>
<p class="text-silver-light/70 text-sm mt-1">Dedicated support for special requests and individual needs.</p>
</div>
</li>
<li class="flex items-start gap-4">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-accent-blue/20 flex items-center justify-center mt-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-accent-blue" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</div>
<div>
<h4 class="text-silver-metallic font-medium">{t['services.concierge.page.feature5']}</h4>
<p class="text-silver-light/70 text-sm mt-1">Providing guidance on event schedules, venue facilities, and local amenities.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<Footer />
</BaseLayout>

151
src/pages/[lang]/services/food/index.astro Normal file
View File

@@ -0,0 +1,151 @@
---
import BaseLayout from '../../../../layouts/BaseLayout.astro';
import Header from '../../../../components/Header.astro';
import Footer from '../../../../components/Footer.astro';
import { ui, languages, defaultLang } from '../../../../i18n/ui';
// Get language from the URL
export async function getStaticPaths() {
return Object.keys(languages).map(lang => {
return { params: { lang } };
});
}
const { lang = defaultLang } = Astro.params;
const t = ui[lang as keyof typeof ui];
---
<BaseLayout>
<Header />
<!-- Hero Section -->
<section class="relative pt-32 pb-20 overflow-hidden">
<!-- Background elements -->
<div class="absolute inset-0 -z-10">
<div class="absolute inset-0 bg-gradient-to-b from-black-deep via-black-medium to-black-deep"></div>
<div class="absolute inset-0 opacity-10 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-silver-metallic/20 to-transparent"></div>
</div>
<!-- Content -->
<div class="container mx-auto px-4 relative z-10">
<div class="mb-8">
<a href={`/${lang}/#services`} class="inline-flex items-center text-silver-light/70 hover:text-accent-gold transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
{t['services.back']}
</a>
</div>
<h1 class="text-4xl md:text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-silver-metallic to-silver-light mb-6">
{t['services.food.page.title']}
</h1>
<p class="text-xl text-silver-light/90 mb-12 max-w-3xl leading-relaxed">
{t['services.food.page.description']}
</p>
</div>
</section>
<!-- Main Content Section -->
<section class="relative py-16 px-4">
<div class="absolute inset-0 bg-gradient-to-br from-black-deep to-black-medium"></div>
<div class="max-w-6xl mx-auto relative z-10">
<!-- Features Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
<div class="bg-gradient-to-br from-black-deep/90 to-black-medium/90 backdrop-blur-sm rounded-xl border border-silver-dark/20 shadow-xl overflow-hidden p-6">
<div class="w-12 h-12 flex items-center justify-center bg-accent-blue/10 rounded-full mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-accent-blue" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<h3 class="text-lg font-semibold text-silver-metallic mb-2">{t['services.food.page.feature1']}</h3>
<p class="text-silver-light/70 text-sm">Quality refreshments for staff at events and venues, ensuring they remain energized and focused.</p>
</div>
<div class="bg-gradient-to-br from-black-deep/90 to-black-medium/90 backdrop-blur-sm rounded-xl border border-silver-dark/20 shadow-xl overflow-hidden p-6">
<div class="w-12 h-12 flex items-center justify-center bg-accent-blue/10 rounded-full mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-accent-blue" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 15.546c-.523 0-1.046.151-1.5.454a2.704 2.704 0 01-3 0 2.704 2.704 0 00-3 0 2.704 2.704 0 01-3 0 2.704 2.704 0 00-3 0 2.701 2.701 0 00-1.5-.454M9 6v2m3-2v2m3-2v2M9 3h.01M12 3h.01M15 3h.01M21 21v-7a2 2 0 00-2-2H5a2 2 0 00-2 2v7h18zm-3-9v-2a2 2 0 00-2-2H8a2 2 0 00-2 2v2h12z" />
</svg>
</div>
<h3 class="text-lg font-semibold text-silver-metallic mb-2">{t['services.food.page.feature2']}</h3>
<p class="text-silver-light/70 text-sm">Premium hospitality services for venues, creating a welcoming atmosphere for all guests.</p>
</div>
<div class="bg-gradient-to-br from-black-deep/90 to-black-medium/90 backdrop-blur-sm rounded-xl border border-silver-dark/20 shadow-xl overflow-hidden p-6">
<div class="w-12 h-12 flex items-center justify-center bg-accent-blue/10 rounded-full mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-accent-blue" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
</svg>
</div>
<h3 class="text-lg font-semibold text-silver-metallic mb-2">{t['services.food.page.feature3']}</h3>
<p class="text-silver-light/70 text-sm">Seamless coordination with caterers and food service providers for your event needs.</p>
</div>
</div>
<!-- Main Content -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-16">
<!-- Left Column: Content -->
<div>
<div class="bg-gradient-to-br from-black-deep/90 to-black-medium/90 backdrop-blur-sm rounded-2xl border border-silver-dark/20 shadow-xl overflow-hidden h-full">
<div class="absolute top-0 right-0 w-full h-1 bg-gradient-to-r from-transparent via-accent-gold/30 to-transparent"></div>
<div class="p-8 md:p-10">
<p class="text-lg text-silver-light/80 mb-8 leading-relaxed">
{t['services.food.page.content']}
</p>
<h3 class="text-xl text-silver-light font-semibold mb-6">Additional Services</h3>
<ul class="space-y-4">
<li class="flex items-start gap-4">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-accent-blue/20 flex items-center justify-center mt-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-accent-blue" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</div>
<div>
<h4 class="text-silver-metallic font-medium">{t['services.food.page.feature4']}</h4>
<p class="text-silver-light/70 text-sm mt-1">Catering for special dietary requirements and restrictions.</p>
</div>
</li>
<li class="flex items-start gap-4">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-accent-blue/20 flex items-center justify-center mt-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-accent-blue" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</div>
<div>
<h4 class="text-silver-metallic font-medium">{t['services.food.page.feature5']}</h4>
<p class="text-silver-light/70 text-sm mt-1">Enhanced service offerings for executive and VIP hospitality needs.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- Right Column: Image -->
<div class="relative rounded-2xl overflow-hidden h-full min-h-[400px]">
<div class="absolute inset-0 bg-gradient-to-br from-black-deep to-black-medium opacity-40"></div>
<img src="/assets/food-service.jpg" alt="Food Services" class="absolute inset-0 w-full h-full object-cover" onerror="this.src='/Logo.png';this.classList.add('p-12', 'object-contain', 'opacity-10');" />
<div class="absolute inset-0 bg-gradient-to-t from-black-deep to-transparent"></div>
<!-- Contact box -->
<div class="absolute bottom-0 left-0 right-0 p-8">
<div class="bg-gradient-to-br from-black-deep/90 to-black-medium/80 backdrop-blur-sm rounded-xl border border-silver-dark/30 p-6">
<h3 class="text-xl text-silver-light font-semibold mb-4">Quality Hospitality Solutions</h3>
<p class="text-silver-light/70 text-sm mb-6">Contact us to discuss how our food services can enhance your event or venue experience.</p>
<a href={`/${lang}/#contact`} class="inline-block bg-gradient-to-r from-accent-blue to-accent-blue/80 text-silver-light font-medium px-6 py-3 rounded-lg shadow-xl hover:shadow-accent-blue/20 transition-all duration-300 hover:translate-y-[-2px] w-full text-center">
Contact Us
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<Footer />
</BaseLayout>

150
src/pages/[lang]/services/security/index.astro Normal file
View File

@@ -0,0 +1,150 @@
---
import BaseLayout from '../../../../layouts/BaseLayout.astro';
import Header from '../../../../components/Header.astro';
import Footer from '../../../../components/Footer.astro';
import { ui, languages, defaultLang } from '../../../../i18n/ui';
// Get language from the URL
export async function getStaticPaths() {
return Object.keys(languages).map(lang => {
return { params: { lang } };
});
}
const { lang = defaultLang } = Astro.params;
const t = ui[lang as keyof typeof ui];
---
<BaseLayout>
<Header />
<!-- Hero Section -->
<section class="relative pt-32 pb-20 overflow-hidden">
<!-- Background elements -->
<div class="absolute inset-0 -z-10">
<div class="absolute inset-0 bg-gradient-to-b from-black-deep via-black-medium to-black-deep"></div>
<div class="absolute inset-0 opacity-10 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-silver-metallic/20 to-transparent"></div>
</div>
<!-- Content -->
<div class="container mx-auto px-4 relative z-10">
<div class="mb-8">
<a href={`/${lang}/#services`} class="inline-flex items-center text-silver-light/70 hover:text-accent-gold transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
{t['services.back']}
</a>
</div>
<h1 class="text-4xl md:text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-silver-metallic to-silver-light mb-6">
{t['services.security.page.title']}
</h1>
<p class="text-xl text-silver-light/90 mb-12 max-w-3xl leading-relaxed">
{t['services.security.page.description']}
</p>
</div>
</section>
<!-- Main Content Section -->
<section class="relative py-16 px-4">
<div class="absolute inset-0 bg-gradient-to-br from-black-deep to-black-medium"></div>
<div class="max-w-6xl mx-auto relative z-10">
<div class="grid grid-cols-1 md:grid-cols-2 gap-16">
<!-- Left Column: Content -->
<div>
<div class="bg-gradient-to-br from-black-deep/90 to-black-medium/90 backdrop-blur-sm rounded-2xl border border-silver-dark/20 shadow-xl overflow-hidden h-full">
<div class="absolute top-0 right-0 w-full h-1 bg-gradient-to-r from-transparent via-accent-gold/30 to-transparent"></div>
<div class="p-8 md:p-10">
<p class="text-lg text-silver-light/80 mb-8 leading-relaxed">
{t['services.security.page.content']}
</p>
<h3 class="text-xl text-silver-light font-semibold mb-6">{t['services.security.page.features']}</h3>
<ul class="space-y-4">
<li class="flex items-start gap-4">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-accent-blue/20 flex items-center justify-center mt-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-accent-blue" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</div>
<div>
<h4 class="text-silver-metallic font-medium">{t['services.security.page.feature1']}</h4>
<p class="text-silver-light/70 text-sm mt-1">Professional security presence for public and private events.</p>
</div>
</li>
<li class="flex items-start gap-4">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-accent-blue/20 flex items-center justify-center mt-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-accent-blue" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</div>
<div>
<h4 class="text-silver-metallic font-medium">{t['services.security.page.feature2']}</h4>
<p class="text-silver-light/70 text-sm mt-1">Controlled entry systems and identity verification procedures.</p>
</div>
</li>
<li class="flex items-start gap-4">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-accent-blue/20 flex items-center justify-center mt-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-accent-blue" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</div>
<div>
<h4 class="text-silver-metallic font-medium">{t['services.security.page.feature3']}</h4>
<p class="text-silver-light/70 text-sm mt-1">Continuous monitoring and vigilant security oversight.</p>
</div>
</li>
<li class="flex items-start gap-4">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-accent-blue/20 flex items-center justify-center mt-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-accent-blue" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</div>
<div>
<h4 class="text-silver-metallic font-medium">{t['services.security.page.feature4']}</h4>
<p class="text-silver-light/70 text-sm mt-1">Specialist protection for high-profile individuals and assets.</p>
</div>
</li>
<li class="flex items-start gap-4">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-accent-blue/20 flex items-center justify-center mt-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-accent-blue" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</div>
<div>
<h4 class="text-silver-metallic font-medium">{t['services.security.page.feature5']}</h4>
<p class="text-silver-light/70 text-sm mt-1">Comprehensive evaluation of security vulnerabilities and threats.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- Right Column: Image -->
<div class="relative rounded-2xl overflow-hidden h-full min-h-[400px]">
<div class="absolute inset-0 bg-gradient-to-br from-black-deep to-black-medium opacity-40"></div>
<img src="/assets/security-service.jpg" alt="Security Services" class="absolute inset-0 w-full h-full object-cover" onerror="this.src='/Logo.png';this.classList.add('p-12', 'object-contain', 'opacity-10');" />
<div class="absolute inset-0 bg-gradient-to-t from-black-deep to-transparent"></div>
<!-- Contact box -->
<div class="absolute bottom-0 left-0 right-0 p-8">
<div class="bg-gradient-to-br from-black-deep/90 to-black-medium/80 backdrop-blur-sm rounded-xl border border-silver-dark/30 p-6">
<h3 class="text-xl text-silver-light font-semibold mb-4">Need Security Services?</h3>
<p class="text-silver-light/70 text-sm mb-6">Contact us today to discuss your security requirements and receive a tailored solution.</p>
<a href={`/${lang}/#contact`} class="inline-block bg-gradient-to-r from-accent-blue to-accent-blue/80 text-silver-light font-medium px-6 py-3 rounded-lg shadow-xl hover:shadow-accent-blue/20 transition-all duration-300 hover:translate-y-[-2px] w-full text-center">
Contact Us
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<Footer />
</BaseLayout>

121
src/pages/[lang]/terms.astro Normal file
View File

@@ -0,0 +1,121 @@
---
import BaseLayout from '../../layouts/BaseLayout.astro';
import Header from '../../components/Header.astro';
import Footer from '../../components/Footer.astro';
import { ui, languages, defaultLang } from '../../i18n/ui';
// Get language from the URL
export async function getStaticPaths() {
return Object.keys(languages).map(lang => {
return { params: { lang } };
});
}
const { lang = defaultLang } = Astro.params;
const t = ui[lang as keyof typeof ui];
---
<BaseLayout>
<Header />
<!-- Hero Section -->
<section class="relative pt-32 pb-12 overflow-hidden">
<!-- Background elements -->
<div class="absolute inset-0 -z-10">
<div class="absolute inset-0 bg-gradient-to-b from-black-deep via-black-medium to-black-deep"></div>
<div class="absolute inset-0 opacity-10 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-silver-metallic/20 to-transparent"></div>
</div>
<!-- Content -->
<div class="container mx-auto px-4 relative z-10">
<h1 class="text-4xl md:text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-silver-metallic to-silver-light mb-6">
Terms of Service
</h1>
</div>
</section>
<!-- Main Content Section -->
<section class="relative py-12 px-4">
<div class="absolute inset-0 bg-gradient-to-br from-black-deep to-black-medium"></div>
<div class="max-w-4xl mx-auto relative z-10">
<div class="bg-gradient-to-br from-black-deep/90 to-black-medium/90 backdrop-blur-sm rounded-2xl border border-silver-dark/20 shadow-xl overflow-hidden">
<div class="p-8 md:p-10">
<div class="prose prose-invert max-w-none text-silver-light/90">
<p class="mb-6">Last updated: {new Date().toISOString().split('T')[0]}</p>
<h2 class="text-2xl text-silver-metallic font-semibold mb-4">1. Introduction</h2>
<p class="mb-4">These Terms of Service ("Terms") govern your access to and use of the website and services provided by JPM Security & Services ("we," "our," or "us").</p>
<p class="mb-6">By accessing or using our services, you agree to be bound by these Terms. If you do not agree to these Terms, you should not access or use our services.</p>
<h2 class="text-2xl text-silver-metallic font-semibold mb-4">2. Service Description</h2>
<p class="mb-6">JPM Security & Services provides security, concierge, and food services as described on our website. Our services may include, but are not limited to, security personnel, event management, hospitality services, and related consultancy.</p>
<h2 class="text-2xl text-silver-metallic font-semibold mb-4">3. Eligibility</h2>
<p class="mb-6">To use our services, you must be at least 18 years old and have the legal capacity to enter into binding contracts. If you are accessing or using our services on behalf of a company or other legal entity, you represent that you have the authority to bind such entity to these Terms.</p>
<h2 class="text-2xl text-silver-metallic font-semibold mb-4">4. User Accounts</h2>
<p class="mb-4">When you create an account with us, you must provide accurate, complete, and current information at all times. Failure to do so constitutes a breach of the Terms, which may result in immediate termination of your account.</p>
<p class="mb-6">You are responsible for safeguarding the password that you use to access our services and for any activities or actions under your account. We encourage you to use "strong" passwords (passwords that use a combination of upper and lower case letters, numbers, and symbols) with your account.</p>
<h2 class="text-2xl text-silver-metallic font-semibold mb-4">5. User Conduct</h2>
<p class="mb-4">You agree not to engage in any of the following prohibited activities:</p>
<ul class="list-disc pl-6 mb-6 space-y-2">
<li>Using our services for any illegal purpose or in violation of any local, state, national, or international law</li>
<li>Harassing, threatening, or intimidating any person or entity</li>
<li>Impersonating any person or entity, or falsely stating or otherwise misrepresenting your affiliation with a person or entity</li>
<li>Interfering with or disrupting the services or servers or networks connected to the services</li>
<li>Attempting to gain unauthorized access to any portion of the services or any other systems or networks connected to the services</li>
</ul>
<h2 class="text-2xl text-silver-metallic font-semibold mb-4">6. Intellectual Property Rights</h2>
<p class="mb-4">The content on our website, including text, graphics, logos, images, and software, is the property of JPM Security & Services or its licensors and is protected by copyright, trademark, and other intellectual property laws.</p>
<p class="mb-6">You may not reproduce, distribute, modify, create derivative works of, publicly display, publicly perform, republish, download, store, or transmit any of the material on our website, except as permitted by law or with our prior written consent.</p>
<h2 class="text-2xl text-silver-metallic font-semibold mb-4">7. Content Standards</h2>
<p class="mb-6">Any content you submit to our website or services must comply with all applicable laws and regulations and must not infringe on any third party's rights. We reserve the right to remove or refuse to display any content that we believe violates the Terms or that may expose us or other users to any harm or liability.</p>
<h2 class="text-2xl text-silver-metallic font-semibold mb-4">8. Service Modifications</h2>
<p class="mb-6">We reserve the right to modify, suspend, or discontinue any part of our services at any time, with or without notice. We shall not be liable to you or any third party for any modification, suspension, or discontinuance of our services.</p>
<h2 class="text-2xl text-silver-metallic font-semibold mb-4">9. Fees and Payment</h2>
<p class="mb-4">If you engage our services, you agree to pay all fees associated with such services. All fees are non-refundable unless otherwise specified in writing.</p>
<p class="mb-6">We reserve the right to change our fees at any time, and such changes will be posted on our website and will apply to any services provided after the date of the change.</p>
<h2 class="text-2xl text-silver-metallic font-semibold mb-4">10. Termination</h2>
<p class="mb-6">We may terminate or suspend your access to our services immediately, without prior notice or liability, for any reason whatsoever, including, without limitation, if you breach the Terms. Upon termination, your right to use our services will immediately cease.</p>
<h2 class="text-2xl text-silver-metallic font-semibold mb-4">11. Disclaimer of Warranties</h2>
<p class="mb-6">Our services are provided on an "as is" and "as available" basis. We make no warranties, expressed or implied, regarding the operation of our services or the information, content, or materials included therein. To the fullest extent permitted by law, we disclaim all warranties, including but not limited to, implied warranties of merchantability and fitness for a particular purpose.</p>
<h2 class="text-2xl text-silver-metallic font-semibold mb-4">12. Limitation of Liability</h2>
<p class="mb-6">To the maximum extent permitted by law, in no event shall we be liable for any damages whatsoever, including but not limited to, direct, indirect, special, incidental, or consequential damages, arising out of or in connection with the use or inability to use our services or any content provided on or through our services, even if we have been advised of the possibility of such damages.</p>
<h2 class="text-2xl text-silver-metallic font-semibold mb-4">13. Indemnification</h2>
<p class="mb-6">You agree to indemnify, defend, and hold harmless JPM Security & Services, its officers, directors, employees, agents, licensors, and suppliers from and against all losses, expenses, damages, and costs, including reasonable attorneys' fees, resulting from any violation of these Terms or any activity related to your account (including negligent or wrongful conduct) by you or any other person accessing our services using your account.</p>
<h2 class="text-2xl text-silver-metallic font-semibold mb-4">14. Governing Law</h2>
<p class="mb-6">These Terms shall be governed by and construed in accordance with the laws of [Your Country], without regard to its conflict of law provisions. Our failure to enforce any right or provision of these Terms will not be considered a waiver of those rights.</p>
<h2 class="text-2xl text-silver-metallic font-semibold mb-4">15. Dispute Resolution</h2>
<p class="mb-6">Any dispute arising out of or relating to these Terms, or the breach thereof, shall be settled by arbitration administered by [Arbitration Body] in accordance with its rules, and judgment on the award rendered by the arbitrator(s) may be entered in any court having jurisdiction thereof.</p>
<h2 class="text-2xl text-silver-metallic font-semibold mb-4">16. Severability</h2>
<p class="mb-6">If any provision of these Terms is held to be invalid or unenforceable by a court, the remaining provisions of these Terms will remain in effect.</p>
<h2 class="text-2xl text-silver-metallic font-semibold mb-4">17. Changes to Terms</h2>
<p class="mb-6">We reserve the right, at our sole discretion, to modify or replace these Terms at any time. We will provide notice of any changes by posting the new Terms on our website. Your continued use of our services after any such changes constitutes your acceptance of the new Terms.</p>
<h2 class="text-2xl text-silver-metallic font-semibold mb-4">18. Contact Information</h2>
<p class="mb-6">If you have any questions about these Terms, please contact us at:</p>
<p class="mb-2">JPM Security & Services</p>
<p class="mb-2">Email: legal@jpmsecurityservices.com</p>
<p class="mb-6">Phone: [Your phone number]</p>
</div>
</div>
</div>
</div>
</section>
<Footer />
</BaseLayout>

143
src/pages/en/services/concierge/index.astro Normal file
View File

@@ -0,0 +1,143 @@
---
import BaseLayout from '../../../../layouts/BaseLayout.astro';
import Header from '../../../../components/Header.astro';
import Footer from '../../../../components/Footer.astro';
import { ui, languages, defaultLang } from '../../../../i18n/ui';
const lang = 'en';
const t = ui[lang];
---
<BaseLayout>
<Header />
<!-- Hero Section -->
<section class="relative pt-32 pb-20 overflow-hidden">
<!-- Background elements -->
<div class="absolute inset-0 -z-10">
<div class="absolute inset-0 bg-gradient-to-b from-black-deep via-black-medium to-black-deep"></div>
<div class="absolute inset-0 opacity-10 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-silver-metallic/20 to-transparent"></div>
</div>
<!-- Content -->
<div class="container mx-auto px-4 relative z-10">
<div class="mb-8">
<a href={`/${lang}/#services`} class="inline-flex items-center text-silver-light/70 hover:text-accent-gold transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
{t['services.back']}
</a>
</div>
<h1 class="text-4xl md:text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-silver-metallic to-silver-light mb-6">
{t['services.concierge.page.title']}
</h1>
<p class="text-xl text-silver-light/90 mb-12 max-w-3xl leading-relaxed">
{t['services.concierge.page.description']}
</p>
</div>
</section>
<!-- Main Content Section -->
<section class="relative py-16 px-4">
<div class="absolute inset-0 bg-gradient-to-br from-black-deep to-black-medium"></div>
<div class="max-w-6xl mx-auto relative z-10">
<div class="grid grid-cols-1 md:grid-cols-2 gap-16">
<!-- Left Column: Image -->
<div class="relative rounded-2xl overflow-hidden h-full min-h-[400px] order-2 md:order-1">
<div class="absolute inset-0 bg-gradient-to-br from-black-deep to-black-medium opacity-40"></div>
<img src="/assets/concierge-service.jpg" alt="Concierge Services" class="absolute inset-0 w-full h-full object-cover" onerror="this.src='/Logo.png';this.classList.add('p-12', 'object-contain', 'opacity-10');" />
<div class="absolute inset-0 bg-gradient-to-t from-black-deep to-transparent"></div>
<!-- Contact box -->
<div class="absolute bottom-0 left-0 right-0 p-8">
<div class="bg-gradient-to-br from-black-deep/90 to-black-medium/80 backdrop-blur-sm rounded-xl border border-silver-dark/30 p-6">
<h3 class="text-xl text-silver-light font-semibold mb-4">Elevate Your Guest Experience</h3>
<p class="text-silver-light/70 text-sm mb-6">Contact us today to learn how our concierge services can enhance your event or venue.</p>
<a href={`/${lang}/#contact`} class="inline-block bg-gradient-to-r from-accent-blue to-accent-blue/80 text-silver-light font-medium px-6 py-3 rounded-lg shadow-xl hover:shadow-accent-blue/20 transition-all duration-300 hover:translate-y-[-2px] w-full text-center">
Contact Us
</a>
</div>
</div>
</div>
<!-- Right Column: Content -->
<div class="order-1 md:order-2">
<div class="bg-gradient-to-br from-black-deep/90 to-black-medium/90 backdrop-blur-sm rounded-2xl border border-silver-dark/20 shadow-xl overflow-hidden h-full">
<div class="absolute top-0 right-0 w-full h-1 bg-gradient-to-r from-transparent via-accent-gold/30 to-transparent"></div>
<div class="p-8 md:p-10">
<p class="text-lg text-silver-light/80 mb-8 leading-relaxed">
{t['services.concierge.page.content']}
</p>
<h3 class="text-xl text-silver-light font-semibold mb-6">{t['services.concierge.page.features']}</h3>
<ul class="space-y-4">
<li class="flex items-start gap-4">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-accent-blue/20 flex items-center justify-center mt-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-accent-blue" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</div>
<div>
<h4 class="text-silver-metallic font-medium">{t['services.concierge.page.feature1']}</h4>
<p class="text-silver-light/70 text-sm mt-1">Professional welcoming and assistance for all guests.</p>
</div>
</li>
<li class="flex items-start gap-4">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-accent-blue/20 flex items-center justify-center mt-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-accent-blue" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</div>
<div>
<h4 class="text-silver-metallic font-medium">{t['services.concierge.page.feature2']}</h4>
<p class="text-silver-light/70 text-sm mt-1">Personalized service for high-profile and important guests.</p>
</div>
</li>
<li class="flex items-start gap-4">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-accent-blue/20 flex items-center justify-center mt-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-accent-blue" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</div>
<div>
<h4 class="text-silver-metallic font-medium">{t['services.concierge.page.feature3']}</h4>
<p class="text-silver-light/70 text-sm mt-1">Arranging transportation and managing arrival/departure logistics.</p>
</div>
</li>
<li class="flex items-start gap-4">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-accent-blue/20 flex items-center justify-center mt-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-accent-blue" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</div>
<div>
<h4 class="text-silver-metallic font-medium">{t['services.concierge.page.feature4']}</h4>
<p class="text-silver-light/70 text-sm mt-1">Dedicated support for special requests and individual needs.</p>
</div>
</li>
<li class="flex items-start gap-4">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-accent-blue/20 flex items-center justify-center mt-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-accent-blue" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</div>
<div>
<h4 class="text-silver-metallic font-medium">{t['services.concierge.page.feature5']}</h4>
<p class="text-silver-light/70 text-sm mt-1">Providing guidance on event schedules, venue facilities, and local amenities.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<Footer />
</BaseLayout>

144
src/pages/en/services/food/index.astro Normal file
View File

@@ -0,0 +1,144 @@
---
import BaseLayout from '../../../../layouts/BaseLayout.astro';
import Header from '../../../../components/Header.astro';
import Footer from '../../../../components/Footer.astro';
import { ui, languages, defaultLang } from '../../../../i18n/ui';
const lang = 'en';
const t = ui[lang];
---
<BaseLayout>
<Header />
<!-- Hero Section -->
<section class="relative pt-32 pb-20 overflow-hidden">
<!-- Background elements -->
<div class="absolute inset-0 -z-10">
<div class="absolute inset-0 bg-gradient-to-b from-black-deep via-black-medium to-black-deep"></div>
<div class="absolute inset-0 opacity-10 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-silver-metallic/20 to-transparent"></div>
</div>
<!-- Content -->
<div class="container mx-auto px-4 relative z-10">
<div class="mb-8">
<a href={`/${lang}/#services`} class="inline-flex items-center text-silver-light/70 hover:text-accent-gold transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
{t['services.back']}
</a>
</div>
<h1 class="text-4xl md:text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-silver-metallic to-silver-light mb-6">
{t['services.food.page.title']}
</h1>
<p class="text-xl text-silver-light/90 mb-12 max-w-3xl leading-relaxed">
{t['services.food.page.description']}
</p>
</div>
</section>
<!-- Main Content Section -->
<section class="relative py-16 px-4">
<div class="absolute inset-0 bg-gradient-to-br from-black-deep to-black-medium"></div>
<div class="max-w-6xl mx-auto relative z-10">
<!-- Features Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
<div class="bg-gradient-to-br from-black-deep/90 to-black-medium/90 backdrop-blur-sm rounded-xl border border-silver-dark/20 shadow-xl overflow-hidden p-6">
<div class="w-12 h-12 flex items-center justify-center bg-accent-blue/10 rounded-full mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-accent-blue" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<h3 class="text-lg font-semibold text-silver-metallic mb-2">{t['services.food.page.feature1']}</h3>
<p class="text-silver-light/70 text-sm">Quality refreshments for staff at events and venues, ensuring they remain energized and focused.</p>
</div>
<div class="bg-gradient-to-br from-black-deep/90 to-black-medium/90 backdrop-blur-sm rounded-xl border border-silver-dark/20 shadow-xl overflow-hidden p-6">
<div class="w-12 h-12 flex items-center justify-center bg-accent-blue/10 rounded-full mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-accent-blue" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 15.546c-.523 0-1.046.151-1.5.454a2.704 2.704 0 01-3 0 2.704 2.704 0 00-3 0 2.704 2.704 0 01-3 0 2.704 2.704 0 00-3 0 2.701 2.701 0 00-1.5-.454M9 6v2m3-2v2m3-2v2M9 3h.01M12 3h.01M15 3h.01M21 21v-7a2 2 0 00-2-2H5a2 2 0 00-2 2v7h18zm-3-9v-2a2 2 0 00-2-2H8a2 2 0 00-2 2v2h12z" />
</svg>
</div>
<h3 class="text-lg font-semibold text-silver-metallic mb-2">{t['services.food.page.feature2']}</h3>
<p class="text-silver-light/70 text-sm">Premium hospitality services for venues, creating a welcoming atmosphere for all guests.</p>
</div>
<div class="bg-gradient-to-br from-black-deep/90 to-black-medium/90 backdrop-blur-sm rounded-xl border border-silver-dark/20 shadow-xl overflow-hidden p-6">
<div class="w-12 h-12 flex items-center justify-center bg-accent-blue/10 rounded-full mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-accent-blue" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
</svg>
</div>
<h3 class="text-lg font-semibold text-silver-metallic mb-2">{t['services.food.page.feature3']}</h3>
<p class="text-silver-light/70 text-sm">Seamless coordination with caterers and food service providers for your event needs.</p>
</div>
</div>
<!-- Main Content -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-16">
<!-- Left Column: Content -->
<div>
<div class="bg-gradient-to-br from-black-deep/90 to-black-medium/90 backdrop-blur-sm rounded-2xl border border-silver-dark/20 shadow-xl overflow-hidden h-full">
<div class="absolute top-0 right-0 w-full h-1 bg-gradient-to-r from-transparent via-accent-gold/30 to-transparent"></div>
<div class="p-8 md:p-10">
<p class="text-lg text-silver-light/80 mb-8 leading-relaxed">
{t['services.food.page.content']}
</p>
<h3 class="text-xl text-silver-light font-semibold mb-6">Additional Services</h3>
<ul class="space-y-4">
<li class="flex items-start gap-4">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-accent-blue/20 flex items-center justify-center mt-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-accent-blue" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</div>
<div>
<h4 class="text-silver-metallic font-medium">{t['services.food.page.feature4']}</h4>
<p class="text-silver-light/70 text-sm mt-1">Catering for special dietary requirements and restrictions.</p>
</div>
</li>
<li class="flex items-start gap-4">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-accent-blue/20 flex items-center justify-center mt-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-accent-blue" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</div>
<div>
<h4 class="text-silver-metallic font-medium">{t['services.food.page.feature5']}</h4>
<p class="text-silver-light/70 text-sm mt-1">Enhanced service offerings for executive and VIP hospitality needs.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- Right Column: Image -->
<div class="relative rounded-2xl overflow-hidden h-full min-h-[400px]">
<div class="absolute inset-0 bg-gradient-to-br from-black-deep to-black-medium opacity-40"></div>
<img src="/assets/food-service.jpg" alt="Food Services" class="absolute inset-0 w-full h-full object-cover" onerror="this.src='/Logo.png';this.classList.add('p-12', 'object-contain', 'opacity-10');" />
<div class="absolute inset-0 bg-gradient-to-t from-black-deep to-transparent"></div>
<!-- Contact box -->
<div class="absolute bottom-0 left-0 right-0 p-8">
<div class="bg-gradient-to-br from-black-deep/90 to-black-medium/80 backdrop-blur-sm rounded-xl border border-silver-dark/30 p-6">
<h3 class="text-xl text-silver-light font-semibold mb-4">Quality Hospitality Solutions</h3>
<p class="text-silver-light/70 text-sm mb-6">Contact us to discuss how our food services can enhance your event or venue experience.</p>
<a href={`/${lang}/#contact`} class="inline-block bg-gradient-to-r from-accent-blue to-accent-blue/80 text-silver-light font-medium px-6 py-3 rounded-lg shadow-xl hover:shadow-accent-blue/20 transition-all duration-300 hover:translate-y-[-2px] w-full text-center">
Contact Us
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<Footer />
</BaseLayout>

143
src/pages/en/services/security/index.astro Normal file
View File

@@ -0,0 +1,143 @@
---
import BaseLayout from '../../../../layouts/BaseLayout.astro';
import Header from '../../../../components/Header.astro';
import Footer from '../../../../components/Footer.astro';
import { ui, languages, defaultLang } from '../../../../i18n/ui';
const lang = 'en';
const t = ui[lang];
---
<BaseLayout>
<Header />
<!-- Hero Section -->
<section class="relative pt-32 pb-20 overflow-hidden">
<!-- Background elements -->
<div class="absolute inset-0 -z-10">
<div class="absolute inset-0 bg-gradient-to-b from-black-deep via-black-medium to-black-deep"></div>
<div class="absolute inset-0 opacity-10 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-silver-metallic/20 to-transparent"></div>
</div>
<!-- Content -->
<div class="container mx-auto px-4 relative z-10">
<div class="mb-8">
<a href={`/${lang}/#services`} class="inline-flex items-center text-silver-light/70 hover:text-accent-gold transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
{t['services.back']}
</a>
</div>
<h1 class="text-4xl md:text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-silver-metallic to-silver-light mb-6">
{t['services.security.page.title']}
</h1>
<p class="text-xl text-silver-light/90 mb-12 max-w-3xl leading-relaxed">
{t['services.security.page.description']}
</p>
</div>
</section>
<!-- Main Content Section -->
<section class="relative py-16 px-4">
<div class="absolute inset-0 bg-gradient-to-br from-black-deep to-black-medium"></div>
<div class="max-w-6xl mx-auto relative z-10">
<div class="grid grid-cols-1 md:grid-cols-2 gap-16">
<!-- Left Column: Content -->
<div>
<div class="bg-gradient-to-br from-black-deep/90 to-black-medium/90 backdrop-blur-sm rounded-2xl border border-silver-dark/20 shadow-xl overflow-hidden h-full">
<div class="absolute top-0 right-0 w-full h-1 bg-gradient-to-r from-transparent via-accent-gold/30 to-transparent"></div>
<div class="p-8 md:p-10">
<p class="text-lg text-silver-light/80 mb-8 leading-relaxed">
{t['services.security.page.content']}
</p>
<h3 class="text-xl text-silver-light font-semibold mb-6">{t['services.security.page.features']}</h3>
<ul class="space-y-4">
<li class="flex items-start gap-4">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-accent-blue/20 flex items-center justify-center mt-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-accent-blue" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</div>
<div>
<h4 class="text-silver-metallic font-medium">{t['services.security.page.feature1']}</h4>
<p class="text-silver-light/70 text-sm mt-1">Professional security presence for public and private events.</p>
</div>
</li>
<li class="flex items-start gap-4">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-accent-blue/20 flex items-center justify-center mt-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-accent-blue" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</div>
<div>
<h4 class="text-silver-metallic font-medium">{t['services.security.page.feature2']}</h4>
<p class="text-silver-light/70 text-sm mt-1">Controlled entry systems and identity verification procedures.</p>
</div>
</li>
<li class="flex items-start gap-4">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-accent-blue/20 flex items-center justify-center mt-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-accent-blue" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</div>
<div>
<h4 class="text-silver-metallic font-medium">{t['services.security.page.feature3']}</h4>
<p class="text-silver-light/70 text-sm mt-1">Continuous monitoring and vigilant security oversight.</p>
</div>
</li>
<li class="flex items-start gap-4">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-accent-blue/20 flex items-center justify-center mt-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-accent-blue" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</div>
<div>
<h4 class="text-silver-metallic font-medium">{t['services.security.page.feature4']}</h4>
<p class="text-silver-light/70 text-sm mt-1">Specialist protection for high-profile individuals and assets.</p>
</div>
</li>
<li class="flex items-start gap-4">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-accent-blue/20 flex items-center justify-center mt-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-accent-blue" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</div>
<div>
<h4 class="text-silver-metallic font-medium">{t['services.security.page.feature5']}</h4>
<p class="text-silver-light/70 text-sm mt-1">Comprehensive evaluation of security vulnerabilities and threats.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- Right Column: Image -->
<div class="relative rounded-2xl overflow-hidden h-full min-h-[400px]">
<div class="absolute inset-0 bg-gradient-to-br from-black-deep to-black-medium opacity-40"></div>
<img src="/assets/security-service.jpg" alt="Security Services" class="absolute inset-0 w-full h-full object-cover" onerror="this.src='/Logo.png';this.classList.add('p-12', 'object-contain', 'opacity-10');" />
<div class="absolute inset-0 bg-gradient-to-t from-black-deep to-transparent"></div>
<!-- Contact box -->
<div class="absolute bottom-0 left-0 right-0 p-8">
<div class="bg-gradient-to-br from-black-deep/90 to-black-medium/80 backdrop-blur-sm rounded-xl border border-silver-dark/30 p-6">
<h3 class="text-xl text-silver-light font-semibold mb-4">Need Security Services?</h3>
<p class="text-silver-light/70 text-sm mb-6">Contact us today to discuss your security requirements and receive a tailored solution.</p>
<a href={`/${lang}/#contact`} class="inline-block bg-gradient-to-r from-accent-blue to-accent-blue/80 text-silver-light font-medium px-6 py-3 rounded-lg shadow-xl hover:shadow-accent-blue/20 transition-all duration-300 hover:translate-y-[-2px] w-full text-center">
Contact Us
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<Footer />
</BaseLayout>

41
src/pages/index.astro Normal file
View File

@@ -0,0 +1,41 @@
---
import { defaultLang, showDefaultLang } from '../i18n/ui';
// Always redirect to a specific language route, not a dynamic path
// This ensures we don't get into redirect loops
const redirectPath = `/${defaultLang}/`;
// Add a timestamp parameter to prevent caching of redirects which can cause loops
const timestamp = Date.now();
const redirectUrl = `${redirectPath}?t=${timestamp}`;
---
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="refresh" content={`0;url=${redirectUrl}`} />
<script>
// Prevent infinite redirects on the client side
if (typeof window !== 'undefined') {
const redirectCount = parseInt(sessionStorage.getItem('redirectCount') || '0', 10);
if (redirectCount > 3) {
console.warn('Too many redirects detected, stopping to prevent infinite loop');
sessionStorage.setItem('redirectCount', '0');
// Cancel the meta refresh redirect
const metaRefresh = document.querySelector('meta[http-equiv="refresh"]');
if (metaRefresh) {
metaRefresh.remove();
}
} else {
sessionStorage.setItem('redirectCount', (redirectCount + 1).toString());
}
}
</script>
<title>Redirecting...</title>
</head>
<body>
<p>Redirecting to <a href={redirectUrl}>the homepage</a>...</p>
</body>
</html>

18
src/styles/global.css Normal file
View File

@@ -0,0 +1,18 @@
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@font-face {
font-family: 'Inter';
src: url('/fonts/Inter.woff2') format('woff2');
font-weight: 100 900;
font-display: swap;
}
html {
font-family: 'Inter', 'Lato', ui-sans-serif, system-ui, sans-serif;
}
body {
@apply bg-black-deep text-silver-metallic;
}

35
tailwind.config.js Normal file
View File

@@ -0,0 +1,35 @@
module.exports = {
darkMode: 'class',
content: [
'./src/**/*.{astro,js,jsx,ts,tsx,vue,svelte}',
'./public/**/*.html',
],
theme: {
extend: {
colors: {
'black-deep': '#121214',
'black-medium': '#18181b',
'silver-metallic': '#c0c0c0',
'silver-light': '#e5e7eb',
'silver-dark': '#a3a3a3',
'accent-blue': '#1E3A8A',
'accent-gold': '#B7935A',
},
fontFamily: {
sans: ['Inter', 'Lato', 'ui-sans-serif', 'system-ui'],
},
boxShadow: {
silver: '0 4px 32px 0 rgba(192,192,192,0.15)',
inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.15)',
},
animation: {
'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
},
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
'gradient-conic': 'conic-gradient(var(--tw-gradient-stops))',
},
},
},
plugins: [require('@tailwindcss/typography')],
};

5
tsconfig.json Normal file
View File

@@ -0,0 +1,5 @@
{
"extends": "astro/tsconfigs/strict",
"include": [".astro/types.d.ts", "**/*"],
"exclude": ["dist"]
}