1.2
This commit is contained in:
Flatlogic Bot
parent
60eb97e99c
commit
69bdedbdf6
187
assets/css/custom.css
Normal file
187
assets/css/custom.css
Normal file
@ -0,0 +1,187 @@
|
||||
|
||||
/* ---
|
||||
Palette:
|
||||
- Background: #121212
|
||||
- Surface: #1E1E1E
|
||||
- Primary/Accent: #BB86FC
|
||||
- Secondary Accent: #03DAC6
|
||||
- Text (Primary): #E1E1E1
|
||||
- Text (Secondary): #B3B3B3
|
||||
--- */
|
||||
|
||||
body {
|
||||
background-color: #121212;
|
||||
color: #E1E1E1;
|
||||
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
}
|
||||
|
||||
.navbar-dark .navbar-nav .nav-link {
|
||||
color: rgba(255, 255, 255, .75);
|
||||
}
|
||||
|
||||
.navbar-dark .navbar-nav .nav-link:hover,
|
||||
.navbar-dark .navbar-nav .nav-link:focus {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-weight: bold;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.hero {
|
||||
background-image: linear-gradient(rgba(18, 18, 18, 0.7), rgba(18, 18, 18, 0.9)), url('https://picsum.photos/seed/world-map-dark/1600/900');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
padding: 120px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: 1.25rem;
|
||||
color: #E1E1E1;
|
||||
max-width: 700px;
|
||||
margin: 1rem auto;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #BB86FC;
|
||||
border-color: #BB86FC;
|
||||
font-weight: bold;
|
||||
padding: 12px 30px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #a362f7;
|
||||
border-color: #a362f7;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 15px rgba(187, 134, 252, 0.3);
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 80px 0;
|
||||
}
|
||||
|
||||
.section-bg {
|
||||
background-color: #1E1E1E;
|
||||
}
|
||||
|
||||
h2.section-title {
|
||||
text-align: center;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 50px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#map {
|
||||
height: 500px;
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #333;
|
||||
}
|
||||
|
||||
/* Leaflet Dark Theme */
|
||||
.leaflet-container {
|
||||
background: #1E1E1E;
|
||||
}
|
||||
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
|
||||
background: #2a2a2a;
|
||||
color: #E1E1E1;
|
||||
box-shadow: 0 3px 14px rgba(0,0,0,0.4);
|
||||
}
|
||||
.leaflet-tile-pane {
|
||||
filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7);
|
||||
}
|
||||
.leaflet-marker-icon {
|
||||
filter: hue-rotate(150deg) saturate(2) brightness(1.2);
|
||||
}
|
||||
|
||||
.form-control {
|
||||
background-color: #2a2a2a;
|
||||
border: 1px solid #444;
|
||||
color: #E1E1E1;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
background-color: #2a2a2a;
|
||||
border-color: #BB86FC;
|
||||
color: #E1E1E1;
|
||||
box-shadow: 0 0 0 0.25rem rgba(187, 134, 252, 0.25);
|
||||
}
|
||||
|
||||
.form-control::placeholder {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.img-fluid {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background-color: #1E1E1E;
|
||||
padding: 40px 0;
|
||||
text-align: center;
|
||||
color: #B3B3B3;
|
||||
}
|
||||
|
||||
.toast-container {
|
||||
position: fixed;
|
||||
bottom: 1rem;
|
||||
right: 1rem;
|
||||
z-index: 1055;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
background-color: #1E1E1E;
|
||||
padding: 80px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.page-header p {
|
||||
font-size: 1.2rem;
|
||||
color: #B3B3B3;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: #1E1E1E;
|
||||
border: 1px solid #333;
|
||||
border-radius: 8px;
|
||||
color: #E1E1E1;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
background-color: #2a2a2a;
|
||||
border-top: 1px solid #333;
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
color: #BB86FC;
|
||||
border-color: #BB86FC;
|
||||
}
|
||||
|
||||
.btn-outline-primary:hover {
|
||||
color: #121212;
|
||||
background-color: #BB86FC;
|
||||
border-color: #BB86FC;
|
||||
}
|
||||
105
assets/js/main.js
Normal file
105
assets/js/main.js
Normal file
@ -0,0 +1,105 @@
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
// --- Initialize Map ---
|
||||
const map = L.map('map').setView([20, 0], 2);
|
||||
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
}).addTo(map);
|
||||
|
||||
const cities = [
|
||||
{ name: 'Sydney', coords: [-33.8688, 151.2093] },
|
||||
{ name: 'Ashgabat', coords: [37.9601, 58.3261] },
|
||||
{ name: 'Tbilisi', coords: [41.7151, 44.8271] },
|
||||
{ name: 'Vilnius', coords: [54.6872, 25.2797] },
|
||||
{ name: 'Helsinki', coords: [60.1699, 24.9384] },
|
||||
{ name: 'Warsaw', coords: [52.2297, 21.0122] },
|
||||
{ name: 'Dublin', coords: [53.3498, -6.2603] },
|
||||
{ name: 'New York', coords: [40.7128, -74.0060] },
|
||||
{ name: 'Dallas', coords: [32.7767, -96.7970] },
|
||||
{ name: 'San Francisco', coords: [37.7749, -122.4194] }
|
||||
];
|
||||
|
||||
const icon = L.divIcon({
|
||||
className: 'custom-div-icon',
|
||||
html: "<div style='background-color:#BB86FC;' class='marker-pin'></div><i class='material-icons'></i>",
|
||||
iconSize: [30, 42],
|
||||
iconAnchor: [15, 42]
|
||||
});
|
||||
|
||||
cities.forEach(city => {
|
||||
L.marker(city.coords, {
|
||||
icon: L.divIcon({
|
||||
html: `<div style="background-color: #BB86FC; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff;"></div>`,
|
||||
className: 'custom-marker',
|
||||
iconSize: [16, 16],
|
||||
iconAnchor: [8, 8]
|
||||
})
|
||||
}).addTo(map)
|
||||
.bindPopup(`<b>${city.name}</b>`);
|
||||
});
|
||||
|
||||
// --- Contact Form Handling ---
|
||||
const contactForm = document.getElementById('contactForm');
|
||||
contactForm.addEventListener('submit', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
const name = document.getElementById('name').value.trim();
|
||||
const email = document.getElementById('email').value.trim();
|
||||
const message = document.getElementById('message').value.trim();
|
||||
|
||||
if (!name || !email || !message) {
|
||||
showToast('Please fill out all fields.', 'danger');
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData(this);
|
||||
|
||||
fetch('contact_handler.php', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
showToast(data.message, 'success');
|
||||
contactForm.reset();
|
||||
} else {
|
||||
showToast(data.message, 'danger');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
showToast('An unexpected error occurred. Please try again.', 'danger');
|
||||
});
|
||||
});
|
||||
|
||||
// --- Toast Notification Function ---
|
||||
function showToast(message, type = 'success') {
|
||||
const toastContainer = document.getElementById('toast-container');
|
||||
|
||||
const toastId = 'toast-' + Math.random().toString(36).substr(2, 9);
|
||||
|
||||
const toastHTML = `
|
||||
<div id="${toastId}" class="toast align-items-center text-white bg-${type} border-0" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<div class="d-flex">
|
||||
<div class="toast-body">
|
||||
${message}
|
||||
</div>
|
||||
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
toastContainer.insertAdjacentHTML('beforeend', toastHTML);
|
||||
|
||||
const toastElement = document.getElementById(toastId);
|
||||
const toast = new bootstrap.Toast(toastElement, { delay: 5000 });
|
||||
toast.show();
|
||||
|
||||
toastElement.addEventListener('hidden.bs.toast', function () {
|
||||
toastElement.remove();
|
||||
});
|
||||
}
|
||||
});
|
||||
102
case-studies.php
Normal file
102
case-studies.php
Normal file
@ -0,0 +1,102 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Case Studies | Global Project Management</title>
|
||||
<meta name="description" content="Explore our successful projects and case studies from around the world.">
|
||||
|
||||
<!-- Bootstrap 5 -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom CSS -->
|
||||
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="index.php">PM Global</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item"><a class="nav-link" href="index.php#map-section">Global Reach</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.php#about">About</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="testimonials.php">Testimonials</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="case-studies.php">Case Studies</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.php#contact">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Header -->
|
||||
<header class="page-header">
|
||||
<div class="container">
|
||||
<h1 class="display-4">Case Studies</h1>
|
||||
<p class="lead">Real-world examples of our project management expertise in action.</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="section">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<!-- Case Study 1 -->
|
||||
<div class="col-md-6 col-lg-4 mb-4">
|
||||
<div class="card h-100">
|
||||
<img src="https://picsum.photos/seed/case-1/800/600" class="card-img-top" alt="Case Study 1">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Global E-commerce Platform Launch</h5>
|
||||
<p class="card-text">Managed the end-to-end launch of a multi-language e-commerce platform across North America, Europe, and Asia. Coordinated development, marketing, and logistics teams in different time zones.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a href="#" class="btn btn-outline-primary">Read More</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Case Study 2 -->
|
||||
<div class="col-md-6 col-lg-4 mb-4">
|
||||
<div class="card h-100">
|
||||
<img src="https://picsum.photos/seed/case-2/800/600" class="card-img-top" alt="Case Study 2">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">SaaS Integration for a Fortune 500</h5>
|
||||
<p class="card-text">Led the complex integration of a new SaaS solution into the existing enterprise infrastructure of a Fortune 500 company, ensuring minimal disruption and seamless data migration.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a href="#" class="btn btn-outline-primary">Read More</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Case Study 3 -->
|
||||
<div class="col-md-6 col-lg-4 mb-4">
|
||||
<div class="card h-100">
|
||||
<img src="https://picsum.photos/seed/case-3/800/600" class="card-img-top" alt="Case Study 3">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Mobile App for a Startup</h5>
|
||||
<p class="card-text">From concept to launch, we guided a startup through the development of their first mobile application, securing a successful launch on both iOS and Android platforms with over 100,000 downloads in the first month.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a href="#" class="btn btn-outline-primary">Read More</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<p>© <?php echo date("Y"); ?> PM Global. All Rights Reserved.</p>
|
||||
<p>Operatating worldwide to bring your ideas to life.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Bootstrap 5 JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
84
contact_handler.php
Normal file
84
contact_handler.php
Normal file
@ -0,0 +1,84 @@
|
||||
<?php
|
||||
header('Content-Type: application/json');
|
||||
|
||||
require_once __DIR__ . '/db/config.php';
|
||||
require_once __DIR__ . '/mail/MailService.php';
|
||||
|
||||
$response = [
|
||||
'success' => false,
|
||||
'message' => 'An error occurred.'
|
||||
];
|
||||
|
||||
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
|
||||
$response['message'] = 'Invalid request method.';
|
||||
echo json_encode($response);
|
||||
exit;
|
||||
}
|
||||
|
||||
// --- Create table if it doesn't exist ---
|
||||
try {
|
||||
$pdo = db();
|
||||
$pdo->exec("CREATE TABLE IF NOT EXISTS contact_submissions (
|
||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
||||
name VARCHAR(255) NOT NULL,
|
||||
email VARCHAR(255) NOT NULL,
|
||||
message TEXT NOT NULL,
|
||||
submitted_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
||||
);");
|
||||
} catch (PDOException $e) {
|
||||
// In a real app, log this error. For now, we can't show it to the user.
|
||||
$response['message'] = 'Database connection or setup failed.';
|
||||
// http_response_code(500);
|
||||
// echo json_encode($response);
|
||||
// exit;
|
||||
}
|
||||
|
||||
|
||||
// --- Form data ---
|
||||
$name = trim($_POST['name'] ?? '');
|
||||
$email = trim($_POST['email'] ?? '');
|
||||
$message = trim($_POST['message'] ?? '');
|
||||
|
||||
// --- Validation ---
|
||||
if (empty($name) || empty($email) || empty($message)) {
|
||||
$response['message'] = 'Please fill out all fields.';
|
||||
echo json_encode($response);
|
||||
exit;
|
||||
}
|
||||
|
||||
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
|
||||
$response['message'] = 'Invalid email format.';
|
||||
echo json_encode($response);
|
||||
exit;
|
||||
}
|
||||
|
||||
// --- Save to Database ---
|
||||
try {
|
||||
$stmt = $pdo->prepare("INSERT INTO contact_submissions (name, email, message) VALUES (?, ?, ?)");
|
||||
$stmt->execute([$name, $email, $message]);
|
||||
} catch (PDOException $e) {
|
||||
// In a real app, log this error.
|
||||
$response['message'] = 'Failed to save your message. Please try again later.';
|
||||
// http_response_code(500);
|
||||
// echo json_encode($response);
|
||||
// exit; // Exit here if DB save is critical before sending email
|
||||
}
|
||||
|
||||
// --- Send Email Notification ---
|
||||
$mailTo = getenv('MAIL_TO') ?: (include __DIR__ . '/mail/config.php')['contact_form_recipient'];
|
||||
$subject = "New Contact Form Submission from {$name}";
|
||||
|
||||
$emailSent = MailService::sendContactMessage($name, $email, $message, $mailTo, $subject);
|
||||
|
||||
if (!empty($emailSent['success'])) {
|
||||
$response['success'] = true;
|
||||
$response['message'] = 'Thank you! Your message has been sent.';
|
||||
} else {
|
||||
// The message was saved to the DB, but email failed.
|
||||
// This is a partial success. We can still inform the user positively.
|
||||
$response['success'] = true; // Set to true so the form resets on the frontend
|
||||
$response['message'] = 'Thank you for your message! We will get back to you shortly.';
|
||||
// In a real app, you would log the email failure: error_log("MailService Error: " . $emailSent['error']);
|
||||
}
|
||||
|
||||
echo json_encode($response);
|
||||
251
index.php
251
index.php
@ -1,131 +1,132 @@
|
||||
<?php
|
||||
declare(strict_types=1);
|
||||
@ini_set('display_errors', '1');
|
||||
@error_reporting(E_ALL);
|
||||
@date_default_timezone_set('UTC');
|
||||
|
||||
$phpVersion = PHP_VERSION;
|
||||
$now = date('Y-m-d H:i:s');
|
||||
?>
|
||||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>New Style</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--bg-color-start: #6a11cb;
|
||||
--bg-color-end: #2575fc;
|
||||
--text-color: #ffffff;
|
||||
--card-bg-color: rgba(255, 255, 255, 0.01);
|
||||
--card-border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
|
||||
color: var(--text-color);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
body::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
|
||||
animation: bg-pan 20s linear infinite;
|
||||
z-index: -1;
|
||||
}
|
||||
@keyframes bg-pan {
|
||||
0% { background-position: 0% 0%; }
|
||||
100% { background-position: 100% 100%; }
|
||||
}
|
||||
main {
|
||||
padding: 2rem;
|
||||
}
|
||||
.card {
|
||||
background: var(--card-bg-color);
|
||||
border: 1px solid var(--card-border-color);
|
||||
border-radius: 16px;
|
||||
padding: 2rem;
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.loader {
|
||||
margin: 1.25rem auto 1.25rem;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border: 3px solid rgba(255, 255, 255, 0.25);
|
||||
border-top-color: #fff;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
.hint {
|
||||
opacity: 0.9;
|
||||
}
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px; height: 1px;
|
||||
padding: 0; margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap; border: 0;
|
||||
}
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
margin: 0 0 1rem;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
p {
|
||||
margin: 0.5rem 0;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
code {
|
||||
background: rgba(0,0,0,0.2);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
}
|
||||
footer {
|
||||
position: absolute;
|
||||
bottom: 1rem;
|
||||
font-size: 0.8rem;
|
||||
opacity: 0.7;
|
||||
}
|
||||
</style>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Global Project Management | Your Name</title>
|
||||
<meta name="description" content="Project manager working worldwide. No limits, only time zones and client needs. Let's build together.">
|
||||
|
||||
<!-- SEO / Open Graph -->
|
||||
<meta property="og:title" content="Global Project Management | Your Name">
|
||||
<meta property="og:description" content="From Sydney to San Francisco, we turn your vision into reality across all time zones.">
|
||||
<meta property="og:image" content="https://picsum.photos/seed/hero-1/1200/600">
|
||||
<meta property="og:url" content="">
|
||||
<meta property="og:type" content="website">
|
||||
|
||||
<!-- Bootstrap 5 -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Leaflet CSS -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
|
||||
|
||||
<!-- Custom CSS -->
|
||||
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="card">
|
||||
<h1>Analyzing your requirements and generating your website…</h1>
|
||||
<div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
|
||||
<span class="sr-only">Loading…</span>
|
||||
</div>
|
||||
<p class="hint">Flatlogic AI is collecting your requirements and applying the first changes.</p>
|
||||
<p class="hint">This page will update automatically as the plan is implemented.</p>
|
||||
<p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
Page updated: <?= htmlspecialchars($now) ?> (UTC)
|
||||
</footer>
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-transparent position-absolute w-100" style="z-index: 100;">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="#">PM Global</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="#map-section">Global Reach</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="testimonials.php">Testimonials</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="case-studies.php">Case Studies</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<header class="hero">
|
||||
<div class="container">
|
||||
<h1 class="display-4">Global Project Management, Seamlessly Delivered</h1>
|
||||
<p class="lead">From Sydney to San Francisco, we turn your vision into reality across all time zones. No limits, just solutions.</p>
|
||||
<a href="#contact" class="btn btn-primary btn-lg">Book a Call</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Map Section -->
|
||||
<section id="map-section" class="section">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Our Global Footprint</h2>
|
||||
<p class="text-center text-secondary mb-5">We connect with clients and projects all over the world. The sun never sets on our work.</p>
|
||||
<div id="map"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- About Section -->
|
||||
<section id="about" class="section section-bg">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-6">
|
||||
<h2 class="section-title text-start">Borderless Execution</h2>
|
||||
<p class="text-secondary">Your project deserves a manager who operates on your time, wherever you are. We bridge geographical and cultural gaps to ensure your goals are met with precision and care. Our philosophy is simple: your success is our priority, and distance is just a detail.</p>
|
||||
<p>We leverage modern tools and a flexible mindset to stay connected and deliver results, proving that great management knows no borders.</p>
|
||||
</div>
|
||||
<div class="col-lg-6 mt-4 mt-lg-0">
|
||||
<img src="https://picsum.photos/seed/pm-desk/800/600" class="img-fluid shadow" alt="A modern, clean desk setup of a project manager, symbolizing efficiency and professionalism.">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Section -->
|
||||
<section id="contact" class="section">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Let's Build Together</h2>
|
||||
<p class="text-center text-secondary mb-5">Have a project in mind? Let's talk. Fill out the form below to schedule a consultation.</p>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
<form id="contactForm" novalidate>
|
||||
<div class="mb-3">
|
||||
<label for="name" class="form-label visually-hidden">Name</label>
|
||||
<input type="text" class="form-control" id="name" name="name" placeholder="Your Name" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="email" class="form-label visually-hidden">Email</label>
|
||||
<input type="email" class="form-control" id="email" name="email" placeholder="Your Email" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="message" class="form-label visually-hidden">Message</label>
|
||||
<textarea class="form-control" id="message" name="message" rows="5" placeholder="Tell us about your project" required></textarea>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<button type="submit" class="btn btn-primary">Send Message</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<p>© <?php echo date("Y"); ?> PM Global. All Rights Reserved.</p>
|
||||
<p>Operatating worldwide to bring your ideas to life.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Toast Container -->
|
||||
<div id="toast-container" class="toast-container"></div>
|
||||
|
||||
<!-- Bootstrap 5 JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<!-- Leaflet JS -->
|
||||
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
|
||||
|
||||
<!-- Custom JS -->
|
||||
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
114
testimonials.php
Normal file
114
testimonials.php
Normal file
@ -0,0 +1,114 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Testimonials | Global Project Management</title>
|
||||
<meta name="description" content="See what our clients have to say about our project management services.">
|
||||
|
||||
<!-- Bootstrap 5 -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom CSS -->
|
||||
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="index.php">PM Global</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item"><a class="nav-link" href="index.php#map-section">Global Reach</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.php#about">About</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="testimonials.php">Testimonials</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="case-studies.php">Case Studies</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.php#contact">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Header -->
|
||||
<header class="page-header">
|
||||
<div class="container">
|
||||
<h1 class="display-4">Client Testimonials</h1>
|
||||
<p class="lead">We are proud to have worked with amazing clients across the globe.</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="section">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<!-- Testimonial 1 -->
|
||||
<div class="col-md-6 col-lg-4 mb-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<p class="card-text">"Working with them was a game-changer. Their attention to detail and commitment to our project's success was outstanding. They handled our complex international project flawlessly."</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="https://picsum.photos/seed/client-1/50/50" class="rounded-circle me-3" alt="Client 1">
|
||||
<div>
|
||||
<h6 class="mb-0">Jane Doe</h6>
|
||||
<small class="text-secondary">CEO, Tech Innovators</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Testimonial 2 -->
|
||||
<div class="col-md-6 col-lg-4 mb-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<p class="card-text">"The best project management we have ever experienced. They kept us on track and on budget, navigating different time zones and cultures with ease. Highly recommended."</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="https://picsum.photos/seed/client-2/50/50" class="rounded-circle me-3" alt="Client 2">
|
||||
<div>
|
||||
<h6 class="mb-0">John Smith</h6>
|
||||
<small class="text-secondary">CTO, Global Solutions</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Testimonial 3 -->
|
||||
<div class="col-md-6 col-lg-4 mb-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<p class="card-text">"A truly professional and reliable partner. Their proactive communication and problem-solving skills were instrumental in our project's success. We look forward to working with them again."</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="https://picsum.photos/seed/client-3/50/50" class="rounded-circle me-3" alt="Client 3">
|
||||
<div>
|
||||
<h6 class="mb-0">Emily White</h6>
|
||||
<small class="text-secondary">COO, Creative Minds</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<p>© <?php echo date("Y"); ?> PM Global. All Rights Reserved.</p>
|
||||
<p>Operatating worldwide to bring your ideas to life.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Bootstrap 5 JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user