1034 lines
30 KiB
PHP
1034 lines
30 KiB
PHP
<?php
|
||
// Ensure session is properly started for both PHP 7.4 and 8.x
|
||
if (session_status() === PHP_SESSION_NONE) {
|
||
// Use basic session settings that work in both PHP 7.4 and 8.x
|
||
// Skip advanced options that might cause compatibility issues
|
||
session_start();
|
||
}
|
||
header("X-Robots-Tag: noindex, nofollow, noarchive", true);
|
||
|
||
$contact_success = false;
|
||
$contact_error = null; // validation / user-facing errors
|
||
$contact_internal_note = null; // only shown after success if logging failed
|
||
|
||
// Configure webhook URL - can be set via environment or directly here
|
||
// In PHP 7.4, constants can't use expressions like ternary operators
|
||
$discord_webhook_env = getenv('DISCORD_WEBHOOK');
|
||
define('DISCORD_WEBHOOK', $discord_webhook_env ? $discord_webhook_env : "WEBHOOK GOES HERE");
|
||
|
||
/* --- Safe multibyte fallbacks --- */
|
||
function cc_strlen(string $s): int
|
||
{
|
||
return function_exists("mb_strlen") ? mb_strlen($s, "UTF-8") : strlen($s);
|
||
}
|
||
function cc_substr(string $s, int $start, ?int $len = null): string
|
||
{
|
||
if (function_exists("mb_substr")) {
|
||
return $len === null
|
||
? mb_substr($s, $start, mb_strlen($s, "UTF-8"), "UTF-8")
|
||
: mb_substr($s, $start, $len, "UTF-8");
|
||
}
|
||
return $len === null ? substr($s, $start) : substr($s, $start, $len);
|
||
}
|
||
|
||
/* --- Sanitizer --- */
|
||
function cc_safe_text(string $text): string
|
||
{
|
||
$text = str_replace(["\r\n", "\r"], "\n", $text);
|
||
$text = str_replace(
|
||
["@everyone", "@here"],
|
||
["(everyone)", "(here)"],
|
||
$text,
|
||
);
|
||
$text = preg_replace("/[`]/u", "´", $text);
|
||
$text = preg_replace("/[\x{200B}-\x{200D}\x{FEFF}]/u", "", $text);
|
||
$text = preg_replace("/@([A-Za-z0-9_]{1,32})/", '(at)$1', $text);
|
||
return trim($text);
|
||
}
|
||
|
||
/* --- JSON encode with optional mbstring --- */
|
||
function cc_json_encode(array $data): string
|
||
{
|
||
// First attempt: standard JSON encode
|
||
$json = json_encode($data, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE);
|
||
if ($json !== false) {
|
||
return $json;
|
||
}
|
||
|
||
// JSON encoding failed - create a deep copy to avoid reference issues in PHP 7.4
|
||
$data_copy = unserialize(serialize($data));
|
||
|
||
// Process strings for potential encoding issues
|
||
$process_strings = function(&$v) {
|
||
if (!is_string($v)) {
|
||
return;
|
||
}
|
||
|
||
// Check and fix encoding issues
|
||
if (
|
||
function_exists("mb_detect_encoding") &&
|
||
function_exists("mb_convert_encoding") &&
|
||
!mb_detect_encoding($v, "UTF-8", true)
|
||
) {
|
||
$converted = @mb_convert_encoding($v, "UTF-8", "UTF-8");
|
||
if ($converted !== false) {
|
||
$v = $converted;
|
||
}
|
||
}
|
||
};
|
||
|
||
array_walk_recursive($data_copy, $process_strings);
|
||
|
||
// Second attempt with sanitized data
|
||
$json = json_encode($data_copy, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE);
|
||
return $json === false ? '{"error":"encoding_failed"}' : $json;
|
||
}
|
||
|
||
/* --- Discord sender --- */
|
||
function cc_send_discord_contact(
|
||
string $name,
|
||
string $email,
|
||
string $message
|
||
): array {
|
||
$webhook_url = DISCORD_WEBHOOK;
|
||
if (!$webhook_url) {
|
||
return [
|
||
"ok" => false,
|
||
"error" => "Webhook not configured",
|
||
"detail" => null,
|
||
];
|
||
}
|
||
|
||
$nameSafe = cc_safe_text($name);
|
||
$emailSafe = cc_safe_text($email);
|
||
$raw = trim($message);
|
||
$rawLen = cc_strlen($raw);
|
||
$maxDesc = 4096;
|
||
if ($rawLen > $maxDesc) {
|
||
$raw = cc_substr($raw, 0, $maxDesc - 25) . "\n\n[... truncated ...]";
|
||
}
|
||
$desc = ">>> " . cc_safe_text($raw);
|
||
|
||
// Get client IP address - compatible with both PHP 7.4 and 8.x
|
||
if (!empty($_SERVER["HTTP_CF_CONNECTING_IP"])) {
|
||
$ip = $_SERVER["HTTP_CF_CONNECTING_IP"];
|
||
} elseif (!empty($_SERVER["HTTP_X_FORWARDED_FOR"])) {
|
||
$ip = $_SERVER["HTTP_X_FORWARDED_FOR"];
|
||
} elseif (!empty($_SERVER["REMOTE_ADDR"])) {
|
||
$ip = $_SERVER["REMOTE_ADDR"];
|
||
} else {
|
||
$ip = "Unknown";
|
||
}
|
||
|
||
if (strpos($ip, ",") !== false) {
|
||
$ip = trim(explode(",", $ip)[0]);
|
||
}
|
||
|
||
// Get user agent
|
||
$ua = cc_substr(
|
||
cc_safe_text(!empty($_SERVER["HTTP_USER_AGENT"]) ? $_SERVER["HTTP_USER_AGENT"] : "Unknown"),
|
||
0,
|
||
900,
|
||
);
|
||
|
||
// Determine protocol - compatible with both PHP 7.4 and 8.x
|
||
$scheme = (!empty($_SERVER["HTTPS"]) && $_SERVER["HTTPS"] !== "off") ? "https://" : "http://";
|
||
$host = !empty($_SERVER["HTTP_HOST"]) ? $_SERVER["HTTP_HOST"] : "localhost";
|
||
$uri = strtok(!empty($_SERVER["REQUEST_URI"]) ? $_SERVER["REQUEST_URI"] : "/", "?");
|
||
$url = $scheme . $host . $uri;
|
||
|
||
// Build simple plain text payload for Discord (no embed)
|
||
$baseContent =
|
||
"**New Contact Submission**\n" .
|
||
"Name: {$nameSafe}\n" .
|
||
"Email: {$emailSafe}\n" .
|
||
"URL: {$url}\n" .
|
||
"Message:\n";
|
||
|
||
$room = 2000 - strlen($baseContent);
|
||
if ($room < 0) {
|
||
$room = 0;
|
||
}
|
||
if (strlen($raw) > $room) {
|
||
$rawDisplay = substr($raw, 0, max(0, $room - 15)) . "\n[...truncated]";
|
||
} else {
|
||
$rawDisplay = $raw;
|
||
}
|
||
|
||
$payload = [
|
||
"content" => $baseContent . $rawDisplay,
|
||
"allowed_mentions" => ["parse" => []],
|
||
];
|
||
|
||
$json = cc_json_encode($payload);
|
||
$status = null;
|
||
$detail = null;
|
||
|
||
if (function_exists("curl_init")) {
|
||
$ch = @curl_init($webhook_url);
|
||
if (!$ch) {
|
||
$detail = "Cannot init cURL";
|
||
} else {
|
||
curl_setopt_array($ch, [
|
||
CURLOPT_POST => true,
|
||
CURLOPT_HTTPHEADER => ["Content-Type: application/json"],
|
||
CURLOPT_POSTFIELDS => $json,
|
||
CURLOPT_RETURNTRANSFER => true,
|
||
CURLOPT_TIMEOUT => 8,
|
||
]);
|
||
$resp = curl_exec($ch);
|
||
$status = curl_getinfo($ch, CURLINFO_HTTP_CODE);
|
||
if ($resp === false) {
|
||
$detail = "cURL: " . curl_error($ch);
|
||
} elseif ($status < 200 || $status >= 300) {
|
||
$detail = "HTTP $status: $resp";
|
||
}
|
||
curl_close($ch);
|
||
}
|
||
} else {
|
||
$ctx = stream_context_create([
|
||
"http" => [
|
||
"method" => "POST",
|
||
"header" => "Content-Type: application/json\r\n",
|
||
"content" => $json,
|
||
"timeout" => 8,
|
||
],
|
||
]);
|
||
// Error handling improved for PHP 7.4 compatibility
|
||
$resp = @file_get_contents($webhook_url, false, $ctx);
|
||
$status = null;
|
||
|
||
// Parse response headers safely
|
||
if (!empty($http_response_header) && is_array($http_response_header)) {
|
||
foreach ($http_response_header as $h) {
|
||
if (!is_string($h)) continue;
|
||
|
||
if (preg_match("#HTTP/\\S+\\s+(\\d{3})#", $h, $m)) {
|
||
$status = (int) $m[1];
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
|
||
if ($resp === false || ($status !== null && ($status < 200 || $status >= 300))) {
|
||
$detail = "Stream send failed (HTTP " . ($status !== null ? $status : "??") . ")";
|
||
}
|
||
}
|
||
|
||
if ($detail) {
|
||
error_log("[DiscordWebhook] " . $detail);
|
||
return [
|
||
"ok" => false,
|
||
"error" => "Discord send failed",
|
||
"detail" => $detail,
|
||
];
|
||
}
|
||
return ["ok" => true, "error" => null, "detail" => null];
|
||
}
|
||
|
||
/* --- Handle POST --- */
|
||
if (
|
||
$_SERVER["REQUEST_METHOD"] === "POST" &&
|
||
isset($_POST["contact_token"]) &&
|
||
empty($_POST["website"])
|
||
) {
|
||
// Form processing compatible with both PHP 7.4 and 8.x
|
||
$name = trim(!empty($_POST["name"]) ? $_POST["name"] : "");
|
||
$email = trim(!empty($_POST["email"]) ? $_POST["email"] : "");
|
||
$message = trim(!empty($_POST["message"]) ? $_POST["message"] : "");
|
||
|
||
if (
|
||
$name !== "" &&
|
||
filter_var($email, FILTER_VALIDATE_EMAIL) &&
|
||
$message !== ""
|
||
) {
|
||
$contact_success = true;
|
||
cc_send_discord_contact($name, $email, $message);
|
||
} else {
|
||
$contact_error = "Please provide a valid name, email, and message.";
|
||
}
|
||
}
|
||
?>
|
||
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Clay Consulting - Driving Innovation, Delivering Value.</title>
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<meta name="description" content="Clay Consulting delivers strategic advisory, digital transformation, cloud integration and data-driven enterprise solutions.">
|
||
<meta name="robots" content="noindex, nofollow, noarchive">
|
||
<style>
|
||
:root {
|
||
--primary:#1c4f8a;
|
||
--primary-accent:#2f6fbf;
|
||
--primary-rgb:28,79,138;
|
||
--bg:#f7f9fc;
|
||
--bg-alt:#ffffff;
|
||
--text:#22303e;
|
||
--muted:#5e6b78;
|
||
--border:#d6dde5;
|
||
--radius:10px;
|
||
--gradient:linear-gradient(135deg, rgba(var(--primary-rgb),0.95) 0%, #193d66 100%);
|
||
font-family: "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
|
||
}
|
||
|
||
* { box-sizing:border-box; }
|
||
body {
|
||
margin:0;
|
||
background:var(--bg);
|
||
color:var(--text);
|
||
line-height:1.55;
|
||
-webkit-font-smoothing:antialiased;
|
||
}
|
||
|
||
a { color:var(--primary-accent); text-decoration:none; }
|
||
a:hover { text-decoration:underline; }
|
||
|
||
header {
|
||
position:sticky; top:0; z-index:100;
|
||
background:rgba(255,255,255,0.86);
|
||
backdrop-filter:blur(12px);
|
||
border-bottom:1px solid var(--border);
|
||
}
|
||
|
||
.navbar {
|
||
max-width:1200px;
|
||
margin:0 auto;
|
||
display:flex;
|
||
align-items:center;
|
||
justify-content:space-between;
|
||
padding:.75rem 1.25rem;
|
||
gap:1rem;
|
||
}
|
||
|
||
.brand {
|
||
font-size:1.1rem;
|
||
font-weight:600;
|
||
letter-spacing:.5px;
|
||
display:flex;
|
||
align-items:center;
|
||
gap:.5rem;
|
||
}
|
||
|
||
.brand span.logo {
|
||
width:36px; height:36px;
|
||
background:var(--gradient);
|
||
color:#fff; display:flex;
|
||
align-items:center; justify-content:center;
|
||
font-weight:700; font-size:.85rem;
|
||
border-radius:50%;
|
||
box-shadow:0 4px 8px -2px rgba(var(--primary-rgb),0.45);
|
||
}
|
||
|
||
nav ul {
|
||
list-style:none;
|
||
padding:0; margin:0;
|
||
display:flex; gap:1.25rem;
|
||
font-size:.9rem;
|
||
font-weight:500;
|
||
}
|
||
|
||
nav a {
|
||
padding:.55rem .85rem;
|
||
border-radius:30px;
|
||
position:relative;
|
||
transition:.25s background, .25s color;
|
||
}
|
||
|
||
nav a:hover,
|
||
nav a:focus {
|
||
background:var(--primary);
|
||
color:#fff;
|
||
text-decoration:none;
|
||
}
|
||
|
||
#mobileToggle {
|
||
display:none;
|
||
background:none;
|
||
border:1px solid var(--border);
|
||
border-radius:8px;
|
||
padding:.5rem .65rem;
|
||
font:inherit;
|
||
cursor:pointer;
|
||
color:var(--primary);
|
||
background:#fff;
|
||
}
|
||
|
||
@media (max-width: 880px) {
|
||
nav { position:absolute; top:100%; left:0; right:0; background:#fff; border-bottom:1px solid var(--border); display:none; }
|
||
nav.open { display:block; animation:fadeSlide .35s ease; }
|
||
nav ul { flex-direction:column; padding:0.75rem 1rem; }
|
||
nav a { width:100%; }
|
||
#mobileToggle { display:inline-flex; align-items:center; }
|
||
}
|
||
|
||
@keyframes fadeSlide {
|
||
from { opacity:0; transform:translateY(-8px); }
|
||
to { opacity:1; transform:translateY(0); }
|
||
}
|
||
|
||
/* Hero */
|
||
.hero {
|
||
background:var(--gradient), url("https://images.unsplash.com/photo-1520607162513-77705c0f0d4a?auto=format&fit=crop&w=1400&q=60") center/cover;
|
||
color:#fff;
|
||
padding:clamp(3rem, 10vh, 7rem) 1.25rem;
|
||
text-align:center;
|
||
position:relative;
|
||
isolation:isolate;
|
||
}
|
||
|
||
.hero::after {
|
||
content:"";
|
||
position:absolute;
|
||
inset:0;
|
||
background:linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,.55) 100%);
|
||
z-index:-1;
|
||
}
|
||
|
||
.hero-inner {
|
||
max-width:950px;
|
||
margin:0 auto;
|
||
}
|
||
|
||
.hero h1 {
|
||
font-size:clamp(2rem, 4vw + 1rem, 3.25rem);
|
||
margin:0 0 1rem;
|
||
line-height:1.1;
|
||
letter-spacing:1px;
|
||
}
|
||
|
||
.hero p.tagline {
|
||
font-size:clamp(1.05rem, 1.1rem + .5vw, 1.5rem);
|
||
margin:0 0 1.75rem;
|
||
font-weight:300;
|
||
color:#e4eef7;
|
||
}
|
||
|
||
.hero .cta-group {
|
||
display:flex;
|
||
flex-wrap:wrap;
|
||
gap:.9rem;
|
||
justify-content:center;
|
||
}
|
||
|
||
.btn {
|
||
--btn-bg:var(--primary);
|
||
--btn-border:var(--primary);
|
||
--btn-color:#fff;
|
||
appearance:none;
|
||
border:1px solid var(--btn-border);
|
||
background:var(--btn-bg);
|
||
color:var(--btn-color);
|
||
padding:.9rem 1.35rem;
|
||
font-size:.95rem;
|
||
font-weight:600;
|
||
letter-spacing:.5px;
|
||
border-radius:40px;
|
||
cursor:pointer;
|
||
position:relative;
|
||
overflow:hidden;
|
||
transition:.35s;
|
||
text-decoration:none;
|
||
display:inline-flex;
|
||
align-items:center;
|
||
gap:.4rem;
|
||
}
|
||
|
||
.btn.secondary {
|
||
--btn-bg:rgba(255,255,255,0.1);
|
||
--btn-border:rgba(255,255,255,0.4);
|
||
--btn-color:#fff;
|
||
backdrop-filter:blur(4px);
|
||
}
|
||
|
||
.btn:hover,
|
||
.btn:focus {
|
||
filter:brightness(1.08) saturate(1.1);
|
||
box-shadow:0 5px 20px -5px rgba(var(--primary-rgb), .5);
|
||
text-decoration:none;
|
||
}
|
||
|
||
/* Sections */
|
||
section {
|
||
padding:clamp(3rem, 6vh, 5rem) 1.25rem;
|
||
}
|
||
|
||
.section-inner {
|
||
max-width:1200px;
|
||
margin:0 auto;
|
||
}
|
||
|
||
section h2 {
|
||
font-size:1.85rem;
|
||
margin:0 0 1.25rem;
|
||
font-weight:600;
|
||
letter-spacing:.75px;
|
||
position:relative;
|
||
}
|
||
|
||
section h2 span.accent {
|
||
background:linear-gradient(90deg,var(--primary), var(--primary-accent));
|
||
-webkit-background-clip:text;
|
||
color:transparent;
|
||
}
|
||
|
||
.lead {
|
||
font-size:1.1rem;
|
||
color:var(--muted);
|
||
max-width:760px;
|
||
margin:0 0 2rem;
|
||
}
|
||
|
||
.grid {
|
||
display:grid;
|
||
gap:1.65rem;
|
||
}
|
||
|
||
.grid.cols-3 {
|
||
grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
|
||
}
|
||
|
||
.card {
|
||
background:var(--bg-alt);
|
||
border:1px solid var(--border);
|
||
padding:1.15rem 1.15rem 1.35rem;
|
||
border-radius:var(--radius);
|
||
position:relative;
|
||
overflow:hidden;
|
||
display:flex;
|
||
flex-direction:column;
|
||
gap:.65rem;
|
||
transition:.35s;
|
||
}
|
||
|
||
.card:hover {
|
||
box-shadow:0 8px 28px -8px rgba(var(--primary-rgb),0.25), 0 2px 6px -1px rgba(var(--primary-rgb),0.15);
|
||
transform:translateY(-4px);
|
||
}
|
||
|
||
.card h3 {
|
||
margin:.25rem 0 .35rem;
|
||
font-size:1.05rem;
|
||
letter-spacing:.5px;
|
||
}
|
||
|
||
.badge {
|
||
display:inline-block;
|
||
background:rgba(var(--primary-rgb),0.08);
|
||
color:var(--primary);
|
||
padding:.35rem .65rem;
|
||
font-size:.65rem;
|
||
letter-spacing:.75px;
|
||
border-radius:6px;
|
||
font-weight:600;
|
||
text-transform:uppercase;
|
||
margin-right:.4rem;
|
||
}
|
||
|
||
.muted { color:var(--muted); }
|
||
|
||
.split {
|
||
display:grid;
|
||
gap:2.5rem;
|
||
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
|
||
align-items:start;
|
||
}
|
||
|
||
/* Careers */
|
||
.careers-cta {
|
||
background:var(--gradient);
|
||
color:#fff;
|
||
padding:2.25rem clamp(1.25rem, 3vw, 3rem);
|
||
border-radius:var(--radius);
|
||
position:relative;
|
||
overflow:hidden;
|
||
}
|
||
|
||
.careers-cta::before {
|
||
content:"";
|
||
position:absolute;
|
||
width:450px; height:450px;
|
||
background:radial-gradient(circle at center, rgba(255,255,255,.25), transparent 70%);
|
||
top:-150px; right:-120px;
|
||
filter:blur(2px);
|
||
}
|
||
|
||
.careers-cta h3 {
|
||
margin:0 0 .75rem;
|
||
font-size:1.6rem;
|
||
letter-spacing:.5px;
|
||
}
|
||
|
||
.careers-cta p {
|
||
margin:0 0 1.35rem;
|
||
max-width:640px;
|
||
font-size:1rem;
|
||
color:#e1ebf5;
|
||
}
|
||
|
||
.careers-cta .btn {
|
||
--btn-bg:#fff;
|
||
--btn-border:#fff;
|
||
--btn-color:var(--primary);
|
||
font-weight:700;
|
||
}
|
||
|
||
/* Contact */
|
||
.contact-box {
|
||
background:var(--bg-alt);
|
||
border:1px solid var(--border);
|
||
border-radius:var(--radius);
|
||
padding:2rem clamp(1.25rem, 3vw, 2.25rem);
|
||
display:grid;
|
||
gap:1.75rem;
|
||
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
|
||
align-items:start;
|
||
}
|
||
|
||
.inline-inputs { display:grid; gap:1rem; }
|
||
|
||
.inline-inputs.two { grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
|
||
|
||
form label {
|
||
font-size:.75rem;
|
||
font-weight:600;
|
||
letter-spacing:.75px;
|
||
text-transform:uppercase;
|
||
display:block;
|
||
margin:0 0 .35rem;
|
||
color:var(--primary);
|
||
}
|
||
|
||
input[type="text"],
|
||
input[type="email"],
|
||
textarea {
|
||
width:100%;
|
||
padding:.75rem .85rem;
|
||
border:1px solid var(--border);
|
||
border-radius:8px;
|
||
font:inherit;
|
||
background:#fff;
|
||
resize:vertical;
|
||
min-height:46px;
|
||
transition:border-color .25s, box-shadow .25s;
|
||
}
|
||
|
||
textarea { min-height:140px; }
|
||
|
||
input:focus,
|
||
textarea:focus {
|
||
outline:none;
|
||
border-color:var(--primary-accent);
|
||
box-shadow:0 0 0 3px rgba(var(--primary-rgb),0.15);
|
||
}
|
||
|
||
footer {
|
||
background:#0e2337;
|
||
color:#b5c2ce;
|
||
padding:2.75rem 1.25rem 2.5rem;
|
||
margin-top:4rem;
|
||
position:relative;
|
||
}
|
||
|
||
footer .footer-inner {
|
||
max-width:1200px;
|
||
margin:0 auto;
|
||
display:grid;
|
||
gap:2.5rem;
|
||
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
|
||
}
|
||
|
||
footer h4 {
|
||
margin:0 0 .85rem;
|
||
font-size:1rem;
|
||
color:#fff;
|
||
letter-spacing:.75px;
|
||
text-transform:uppercase;
|
||
}
|
||
|
||
footer a { color:#cfe2f3; }
|
||
footer a:hover { color:#fff; }
|
||
|
||
.footer-bar {
|
||
max-width:1200px;
|
||
margin:2.25rem auto 0;
|
||
border-top:1px solid #27455f;
|
||
padding-top:1rem;
|
||
font-size:.75rem;
|
||
letter-spacing:.6px;
|
||
text-transform:uppercase;
|
||
display:flex;
|
||
flex-wrap:wrap;
|
||
justify-content:space-between;
|
||
gap:1rem;
|
||
color:#7c93a6;
|
||
}
|
||
|
||
/* Utilities */
|
||
.fade-in { opacity:0; transform:translateY(20px); transition: .7s ease; }
|
||
.fade-in.visible { opacity:1; transform:translateY(0); }
|
||
|
||
.separator {
|
||
height:2px; width:80px;
|
||
background:linear-gradient(90deg,var(--primary),transparent);
|
||
margin:-.5rem 0 1.75rem;
|
||
border-radius:2px;
|
||
}
|
||
|
||
.small { font-size:.85rem; }
|
||
|
||
blockquote.fake {
|
||
margin:0;
|
||
padding:1.1rem 1.25rem 1.2rem 1.1rem;
|
||
background:linear-gradient(90deg, rgba(var(--primary-rgb),0.08), rgba(var(--primary-rgb),0.02));
|
||
border-left:4px solid var(--primary);
|
||
border-radius:0 8px 8px 0;
|
||
font-size:.95rem;
|
||
color:var(--muted);
|
||
line-height:1.5;
|
||
}
|
||
|
||
.inline-icon {
|
||
width:22px; height:22px;
|
||
display:inline-flex;
|
||
align-items:center; justify-content:center;
|
||
border-radius:6px;
|
||
background:rgba(var(--primary-rgb),0.1);
|
||
color:var(--primary);
|
||
font-size:.7rem;
|
||
font-weight:700;
|
||
margin-right:.45rem;
|
||
vertical-align:middle;
|
||
}
|
||
|
||
::-webkit-scrollbar { width:11px; }
|
||
::-webkit-scrollbar-track { background:#e6edf4; }
|
||
::-webkit-scrollbar-thumb { background:#b0c2d3; border-radius:20px; border:3px solid #e6edf4; }
|
||
::-webkit-scrollbar-thumb:hover { background:#90a8bb; }
|
||
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header>
|
||
<div class="navbar">
|
||
<div class="brand">
|
||
<span class="logo">CC</span>
|
||
<span>Clay Consulting</span>
|
||
</div>
|
||
<button id="mobileToggle" aria-expanded="false" aria-controls="primaryNav">Menu</button>
|
||
<nav id="primaryNav" aria-label="Main navigation">
|
||
<ul>
|
||
<li><a href="#hero">Home</a></li>
|
||
<li><a href="#about">About</a></li>
|
||
<li><a href="#services">Services</a></li>
|
||
<li><a href="#cases">Case Studies</a></li>
|
||
<li><a href="#careers">Careers</a></li>
|
||
<li><a href="#contact">Contact</a></li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Hero Section -->
|
||
<section class="hero" id="hero">
|
||
<div class="hero-inner fade-in">
|
||
<h1>Driving Innovation, Delivering Value.</h1>
|
||
<p class="tagline">Positioning organizations for tomorrow through scalable, synergistic, cross-functional excellence.</p>
|
||
<div class="cta-group">
|
||
<a href="#services" class="btn">Explore Services</a>
|
||
<a href="#contact" class="btn secondary">Get In Touch</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- About Us -->
|
||
<section id="about">
|
||
<div class="section-inner fade-in">
|
||
<h2><span class="accent">About</span> Us</h2>
|
||
<div class="separator"></div>
|
||
<div class="split">
|
||
<div>
|
||
<p class="lead">
|
||
At Clay Consulting, we leverage cutting-edge strategies to empower businesses across diverse sectors. Harnessing
|
||
a culture of continuous improvement, we synchronize transformative roadmaps with scalable operational rigor.
|
||
</p>
|
||
<p>
|
||
Our mission is to deliver scalable solutions that align with tomorrow’s challenges. Through an integrated focus
|
||
on stakeholder alignment, value acceleration, and enterprise resilience, we enable organizations to convert
|
||
strategic intent into measurable outcomes.
|
||
</p>
|
||
<p>
|
||
We orchestrate innovation by embedding data-driven optionality within core processes, ensuring sustainable
|
||
differentiation and end-to-end lifecycle performance across global value chains.
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<blockquote class="fake">
|
||
“Their framework empowered us to pivot, optimize, and accelerate our multi-market engagement model with
|
||
unparalleled clarity and speed.”
|
||
<div class="small muted" style="margin-top:.55rem;">— Customer Testimonial</div>
|
||
</blockquote>
|
||
<div style="margin-top:1.85rem;">
|
||
<span class="badge">Core Pillars</span>
|
||
<ul class="muted" style="margin:.5rem 0 0; padding-left:1.1rem;">
|
||
<li>Strategic Enablement</li>
|
||
<li>Resilient Scalability</li>
|
||
<li>Operational Alignment</li>
|
||
<li>Insight Optimization</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Services -->
|
||
<section id="services" style="background:linear-gradient(180deg,#f0f5fa 0%, #ffffff 100%);">
|
||
<div class="section-inner fade-in">
|
||
<h2><span class="accent">Services</span></h2>
|
||
<div class="separator"></div>
|
||
<p class="lead">
|
||
We provide a broad matrix of capability layers engineered to unlock latent enterprise potential and drive
|
||
multidimensional value capture.
|
||
</p>
|
||
<div class="grid cols-3">
|
||
<div class="card">
|
||
<div><span class="inline-icon">BC</span><strong>Business Consulting</strong></div>
|
||
<p class="muted">Strategic frameworks and holistic advisory aligning vision with scalable execution across global
|
||
delivery channels.</p>
|
||
</div>
|
||
<div class="card">
|
||
<div><span class="inline-icon">DT</span><strong>Digital Transformation</strong></div>
|
||
<p class="muted">End-to-end modernization blueprints catalyzing platform agility, omnichannel integration, and
|
||
adaptive governance.</p>
|
||
</div>
|
||
<div class="card">
|
||
<div><span class="inline-icon">CI</span><strong>Cloud Integration</strong></div>
|
||
<p class="muted">Composable cloud migration and interoperability pathways optimizing elasticity and workload
|
||
orchestration.</p>
|
||
</div>
|
||
<div class="card">
|
||
<div><span class="inline-icon">ES</span><strong>Enterprise Solutions</strong></div>
|
||
<p class="muted">Modular architectures unifying stakeholder ecosystems through scalable, service-driven operating
|
||
layers.</p>
|
||
</div>
|
||
<div class="card">
|
||
<div><span class="inline-icon">DD</span><strong>Data-Driven Insights</strong></div>
|
||
<p class="muted">Analytics amplification converting fragmented datasets into predictive intelligence and
|
||
actionable levers.</p>
|
||
</div>
|
||
<div class="card">
|
||
<div><span class="inline-icon">VX</span><strong>Value Expansion</strong></div>
|
||
<p class="muted">Portfolio rationalization and continuous improvement loops reinforcing sustainable ROI horizons.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Case Studies / Clients -->
|
||
<section id="cases">
|
||
<div class="section-inner fade-in">
|
||
<h2><span class="accent">Case</span> Studies & Clients</h2>
|
||
<div class="separator"></div>
|
||
<p class="lead">
|
||
We have supported Fortune 500 companies in achieving operational efficiency and worked with global partners to
|
||
streamline innovation pipelines.
|
||
</p>
|
||
<div class="grid cols-3">
|
||
<div class="card">
|
||
<h3>Operational Efficiency Enablement</h3>
|
||
<p class="muted">Delivered a layered maturity model accelerating cross-silo transparency and compressing
|
||
decision latency.</p>
|
||
<div class="small muted">Fortune 500 | Global Footprint</div>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Innovation Pipeline Streamlining</h3>
|
||
<p class="muted">Unified prototype gating process with governance telemetry, amplifying throughput and reducing
|
||
redundancy.</p>
|
||
<div class="small muted">International Consortium</div>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Cloud-Native Adoption Catalyst</h3>
|
||
<p class="muted">Architected microservice modularity enabling horizontal scale and improving release velocity.</p>
|
||
<div class="small muted">Enterprise Technology Sector</div>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Lifecycle Analytics Fabric</h3>
|
||
<p class="muted">Implemented an insight fabric translating real-time signals into proactive intervention
|
||
scenarios.</p>
|
||
<div class="small muted">Industrial Vertical</div>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Global Integration Alignment</h3>
|
||
<p class="muted">Harmonized multi-region platforms under a unifying interoperability schema.</p>
|
||
<div class="small muted">Multinational Portfolio</div>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Strategic Resilience Roadmap</h3>
|
||
<p class="muted">Developed resilience indices enabling adaptive risk recalibration and continuity acceleration.</p>
|
||
<div class="small muted">Corporate Advisory</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Careers -->
|
||
<section id="careers" style="background:linear-gradient(180deg,#ffffff 0%, #f4f8fc 100%);">
|
||
<div class="section-inner fade-in">
|
||
<h2><span class="accent">Careers</span></h2>
|
||
<div class="separator"></div>
|
||
<div class="careers-cta">
|
||
<h3>Join Our Growing Team</h3>
|
||
<p>We are always seeking talented professionals to join our growing team. If you are passionate about enabling
|
||
enterprise transformation and shaping scalable value creation, we invite you to express interest.</p>
|
||
<a class="btn" href="#contact">Submit Resume</a>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Contact -->
|
||
<section id="contact">
|
||
<div class="section-inner fade-in">
|
||
<h2><span class="accent">Contact</span> Us</h2>
|
||
<div class="separator"></div>
|
||
<p class="lead">Ready to explore alignment opportunities? Reach out via the form below.</p>
|
||
<div class="contact-box">
|
||
<div>
|
||
<h3 style="margin-top:0;">General Inquiries</h3>
|
||
<p class="muted" style="margin-top:.4rem;">For engagements, partnerships, or additional information, contact us using the form.</p>
|
||
|
||
<p class="muted small" style="margin-top:1.25rem;">We respond to legitimate business inquiries in a timely manner.</p>
|
||
</div>
|
||
<div>
|
||
<form action="#contact" method="post" autocomplete="on" aria-label="Contact form" novalidate>
|
||
<?php if ($contact_success): ?>
|
||
<div class="small" style="margin:0 0 1rem; color:#1d6f3a; font-weight:600;">
|
||
Thank you — your message has been received.
|
||
<?php if ($contact_internal_note): ?>
|
||
<br><span style="color:#b36200;">(Note: <?php echo htmlspecialchars(
|
||
$contact_internal_note,
|
||
ENT_QUOTES,
|
||
); ?>)</span>
|
||
<?php endif; ?>
|
||
</div>
|
||
<?php elseif ($contact_error): ?>
|
||
<div class="small" style="margin:0 0 1rem; color:#8a1d1d; font-weight:600;">
|
||
<?php echo htmlspecialchars($contact_error, ENT_QUOTES); ?>
|
||
</div>
|
||
<?php endif; ?>
|
||
<input type="hidden" name="contact_token" value="<?php echo hash(
|
||
"crc32b",
|
||
session_id() ?: "token",
|
||
); ?>">
|
||
|
||
<div style="display:none;">
|
||
<label>Website <input type="text" name="website" value=""></label>
|
||
</div>
|
||
<div class="inline-inputs two">
|
||
<div>
|
||
<label for="name">Name</label>
|
||
<input id="name" type="text" name="name" placeholder="Your Name" required>
|
||
</div>
|
||
<div>
|
||
<label for="email">Email</label>
|
||
<input id="email" type="email" name="email" placeholder="you@example.com" required>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top:1rem;">
|
||
<label for="message">Message</label>
|
||
<textarea id="message" name="message" placeholder="How can we help you?" required></textarea>
|
||
</div>
|
||
<div style="margin-top:1.1rem;">
|
||
<button class="btn" type="submit">Send Message</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer>
|
||
<div class="footer-inner">
|
||
<div>
|
||
<h4>Clay Consulting</h4>
|
||
<p class="small">Driving Innovation, Delivering Value.</p>
|
||
<p class="small muted" style="max-width:240px;">We partner with organizations to operationalize strategy through scalable technology and insight-driven execution.</p>
|
||
</div>
|
||
<div>
|
||
<h4>Navigation</h4>
|
||
<div class="small">
|
||
<p><a href="#about">About</a></p>
|
||
<p><a href="#services">Services</a></p>
|
||
<p><a href="#cases">Case Studies</a></p>
|
||
<p><a href="#careers">Careers</a></p>
|
||
<p><a href="#contact">Contact</a></p>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h4>Engage</h4>
|
||
<div class="small">
|
||
<p><a href="#services">Capabilities Overview</a></p>
|
||
<p><a href="#careers">Talent Portal</a></p>
|
||
<p><a href="#contact">Connect With Us</a></p>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h4>Legal</h4>
|
||
<div class="small muted">
|
||
Information on this site is provided for general corporate purposes. © <?php echo date(
|
||
"Y",
|
||
); ?> Clay Consulting.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="footer-bar small">
|
||
<div>© <?php echo date("Y"); ?> Clay Consulting</div>
|
||
<div>All Rights Reserved</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
/* Simple intersection observer for fade-ins */
|
||
const observer = new IntersectionObserver(entries => {
|
||
entries.forEach(e => {
|
||
if (e.isIntersecting) {
|
||
e.target.classList.add('visible');
|
||
observer.unobserve(e.target);
|
||
}
|
||
});
|
||
}, { threshold:.15 });
|
||
|
||
document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
|
||
|
||
/* Mobile nav toggle */
|
||
const toggle = document.getElementById('mobileToggle');
|
||
const nav = document.getElementById('primaryNav');
|
||
toggle?.addEventListener('click', () => {
|
||
const open = nav.classList.toggle('open');
|
||
toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
|
||
toggle.textContent = open ? 'Close' : 'Menu';
|
||
});
|
||
|
||
/* Basic smooth scroll */
|
||
document.querySelectorAll('a[href^="#"]').forEach(a => {
|
||
a.addEventListener('click', e => {
|
||
const id = a.getAttribute('href').slice(1);
|
||
const target = document.getElementById(id);
|
||
if (target) {
|
||
e.preventDefault();
|
||
nav.classList.remove('open');
|
||
toggle.setAttribute('aria-expanded','false');
|
||
toggle.textContent='Menu';
|
||
const y = target.getBoundingClientRect().top + window.scrollY - 70;
|
||
window.scrollTo({ top:y, behavior:'smooth' });
|
||
history.replaceState(null,'','#'+id);
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|