mirror of
https://github.com/thecyberlearn/quantumtaskai-caprover.git
synced 2026-08-18 10:12:57 +00:00
Clean up unused files and reduce codebase size
Remove 10 unused files including standalone HTML, old templates, unused CSS, and Docker Compose configuration. Keep only files actively used by the Django application for CapRover deployment. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
thecyberlearn
parent
e70ba5a8df
commit
200e8015e5
205
brandfind.html
205
brandfind.html
@ -1,205 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>Tesla Brand Analysis Report</title>
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
font-family: Arial, sans-serif;
|
|
||||||
margin: 40px;
|
|
||||||
background-color: #f8f9fa;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1, h2, h3 {
|
|
||||||
color: #1a1a1a;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: #007bff;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section {
|
|
||||||
margin-bottom: 40px;
|
|
||||||
background: #fff;
|
|
||||||
padding: 25px;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: collapse;
|
|
||||||
margin-top: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
th, td {
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
padding: 12px;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
|
||||||
background-color: #f1f1f1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge {
|
|
||||||
padding: 5px 10px;
|
|
||||||
border-radius: 4px;
|
|
||||||
color: white;
|
|
||||||
font-size: 0.9em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.verified { background-color: #28a745; }
|
|
||||||
.unverified { background-color: #dc3545; }
|
|
||||||
.not-found { background-color: #6c757d; }
|
|
||||||
.low { background-color: #ffc107; color: black; }
|
|
||||||
.medium { background-color: #17a2b8; }
|
|
||||||
.high { background-color: #007bff; }
|
|
||||||
|
|
||||||
.recommendation {
|
|
||||||
margin: 10px 0;
|
|
||||||
padding: 15px;
|
|
||||||
background: #e9ecef;
|
|
||||||
border-left: 5px solid #007bff;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<h1>Tesla Brand Analysis Report</h1>
|
|
||||||
|
|
||||||
<div class="section">
|
|
||||||
<h2>Brand Information</h2>
|
|
||||||
<p><strong>Brand:</strong> Tesla</p>
|
|
||||||
<p><strong>Website:</strong> <a href="https://www.tesla.com" target="_blank">https://www.tesla.com</a></p>
|
|
||||||
<p><strong>Analysis Date:</strong> August 27, 2025</p>
|
|
||||||
<p><strong>Processing Time:</strong> AI-powered analysis</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="section">
|
|
||||||
<h2>Platform Presence</h2>
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Platform</th>
|
|
||||||
<th>Status</th>
|
|
||||||
<th>Verified</th>
|
|
||||||
<th>Confidence</th>
|
|
||||||
<th>Profile URL</th>
|
|
||||||
<th>Notes</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<!-- Loop Starts -->
|
|
||||||
<tr>
|
|
||||||
<td>Google Business</td>
|
|
||||||
<td><span class="badge verified">Found</span></td>
|
|
||||||
<td><span class="badge verified">Verified</span></td>
|
|
||||||
<td><span class="badge high">High</span></td>
|
|
||||||
<td><a href="https://business.google.com/tesla" target="_blank">Profile</a></td>
|
|
||||||
<td>Verified business listing with reviews and location info</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>LinkedIn</td>
|
|
||||||
<td><span class="badge verified">Found</span></td>
|
|
||||||
<td><span class="badge verified">Verified</span></td>
|
|
||||||
<td><span class="badge high">High</span></td>
|
|
||||||
<td><a href="https://linkedin.com/company/tesla-motors" target="_blank">Profile</a></td>
|
|
||||||
<td>Official company page with verified badge</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>YouTube</td>
|
|
||||||
<td><span class="badge verified">Found</span></td>
|
|
||||||
<td><span class="badge verified">Verified</span></td>
|
|
||||||
<td><span class="badge high">High</span></td>
|
|
||||||
<td><a href="https://youtube.com/tesla" target="_blank">Profile</a></td>
|
|
||||||
<td>Official channel with verification checkmark</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>TikTok</td>
|
|
||||||
<td><span class="badge not-found">Not Found</span></td>
|
|
||||||
<td><span class="badge not-found">N/A</span></td>
|
|
||||||
<td><span class="badge not-found">N/A</span></td>
|
|
||||||
<td>N/A</td>
|
|
||||||
<td>No official business account found</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Instagram</td>
|
|
||||||
<td><span class="badge verified">Found</span></td>
|
|
||||||
<td><span class="badge verified">Verified</span></td>
|
|
||||||
<td><span class="badge high">High</span></td>
|
|
||||||
<td><a href="https://instagram.com/teslamotors" target="_blank">Profile</a></td>
|
|
||||||
<td>Verified business account with blue checkmark</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Pinterest</td>
|
|
||||||
<td><span class="badge not-found">Not Found</span></td>
|
|
||||||
<td><span class="badge not-found">N/A</span></td>
|
|
||||||
<td><span class="badge not-found">N/A</span></td>
|
|
||||||
<td>N/A</td>
|
|
||||||
<td>No official business account found</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>X (Twitter)</td>
|
|
||||||
<td><span class="badge verified">Found</span></td>
|
|
||||||
<td><span class="badge verified">Verified</span></td>
|
|
||||||
<td><span class="badge high">High</span></td>
|
|
||||||
<td><a href="https://x.com/tesla" target="_blank">Profile</a></td>
|
|
||||||
<td>Official verified account with gold checkmark</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Facebook</td>
|
|
||||||
<td><span class="badge verified">Found</span></td>
|
|
||||||
<td><span class="badge verified">Verified</span></td>
|
|
||||||
<td><span class="badge medium">Medium</span></td>
|
|
||||||
<td><a href="https://facebook.com/tesla" target="_blank">Profile</a></td>
|
|
||||||
<td>Business page with verification badge</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Threads</td>
|
|
||||||
<td><span class="badge verified">Found</span></td>
|
|
||||||
<td><span class="badge unverified">Unverified</span></td>
|
|
||||||
<td><span class="badge low">Low</span></td>
|
|
||||||
<td><a href="https://threads.net/teslamotors" target="_blank">Profile</a></td>
|
|
||||||
<td>Unverified account, authenticity uncertain</td>
|
|
||||||
</tr>
|
|
||||||
<!-- Add others similarly... -->
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="section">
|
|
||||||
<h2>Summary</h2>
|
|
||||||
<p><strong>Total Platforms Checked:</strong> 14</p>
|
|
||||||
<p><strong>Platforms Found:</strong> 8</p>
|
|
||||||
<p><strong>Platforms Missing:</strong> 6</p>
|
|
||||||
<p><strong>Completion:</strong> 57%</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="section">
|
|
||||||
<h2>Recommendations</h2>
|
|
||||||
<div class="recommendation">
|
|
||||||
<strong>TikTok</strong> – <span class="badge high">High Priority</span><br>
|
|
||||||
Growing platform for reaching younger demographics and viral marketing
|
|
||||||
</div>
|
|
||||||
<div class="recommendation">
|
|
||||||
<strong>Pinterest</strong> – <span class="badge medium">Medium Priority</span><br>
|
|
||||||
Visual platform good for showcasing products and design aesthetics
|
|
||||||
</div>
|
|
||||||
<div class="recommendation">
|
|
||||||
<strong>Medium</strong> – <span class="badge medium">Medium Priority</span><br>
|
|
||||||
Professional publishing platform for thought leadership content
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="section">
|
|
||||||
<h2>Metadata</h2>
|
|
||||||
<p><strong>Analyzer Version:</strong> 1.0</p>
|
|
||||||
<p><strong>Platforms Supported:</strong> 14</p>
|
|
||||||
<p><strong>Analysis Method:</strong> AI-powered web research</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
128
brandfind1.html
128
brandfind1.html
@ -1,128 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Tesla Brand Analysis</title>
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
|
||||||
</head>
|
|
||||||
<body class="bg-gray-100 text-gray-900">
|
|
||||||
|
|
||||||
<!-- Header -->
|
|
||||||
<header class="bg-gradient-to-r from-gray-900 to-gray-700 text-white p-6 shadow-lg">
|
|
||||||
<h1 class="text-3xl font-bold">🚀 Tesla Brand Analysis</h1>
|
|
||||||
<p class="text-sm mt-2">AI-powered social presence analysis</p>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<!-- Brand Info -->
|
|
||||||
<section class="max-w-5xl mx-auto mt-8 bg-white p-6 rounded-2xl shadow">
|
|
||||||
<h2 class="text-2xl font-semibold mb-4">📌 Brand Information</h2>
|
|
||||||
<ul class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
||||||
<li><strong>Brand Name:</strong> Tesla</li>
|
|
||||||
<li><strong>Website:</strong> <a href="https://www.tesla.com" class="text-blue-600 hover:underline">www.tesla.com</a></li>
|
|
||||||
<li><strong>Analysis Date:</strong> 2025-08-27</li>
|
|
||||||
<li><strong>Processing:</strong> AI-powered analysis</li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Platforms Section -->
|
|
||||||
<section class="max-w-6xl mx-auto mt-8 bg-white p-6 rounded-2xl shadow">
|
|
||||||
<h2 class="text-2xl font-semibold mb-4">🌐 Platform Analysis</h2>
|
|
||||||
<div id="platforms" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"></div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Summary Section -->
|
|
||||||
<section class="max-w-5xl mx-auto mt-8 bg-white p-6 rounded-2xl shadow">
|
|
||||||
<h2 class="text-2xl font-semibold mb-4">📊 Summary</h2>
|
|
||||||
<ul class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
||||||
<li><strong>Total Platforms Checked:</strong> 14</li>
|
|
||||||
<li><strong>Platforms Found:</strong> 8</li>
|
|
||||||
<li><strong>Platforms Missing:</strong> 6</li>
|
|
||||||
<li><strong>Completion:</strong> 57%</li>
|
|
||||||
</ul>
|
|
||||||
<div class="mt-4 w-full bg-gray-200 rounded-full h-4">
|
|
||||||
<div class="bg-green-500 h-4 rounded-full" style="width:57%"></div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Recommendations Section -->
|
|
||||||
<section class="max-w-5xl mx-auto mt-8 bg-white p-6 rounded-2xl shadow">
|
|
||||||
<h2 class="text-2xl font-semibold mb-4">💡 Recommendations</h2>
|
|
||||||
<div class="space-y-4">
|
|
||||||
<div class="p-4 border-l-4 border-red-500 bg-red-50 rounded">
|
|
||||||
<strong>TikTok (High Priority):</strong> Growing platform for younger demographics & viral marketing
|
|
||||||
</div>
|
|
||||||
<div class="p-4 border-l-4 border-yellow-500 bg-yellow-50 rounded">
|
|
||||||
<strong>Pinterest (Medium Priority):</strong> Great for showcasing products and design aesthetics
|
|
||||||
</div>
|
|
||||||
<div class="p-4 border-l-4 border-yellow-500 bg-yellow-50 rounded">
|
|
||||||
<strong>Medium (Medium Priority):</strong> Professional publishing platform for thought leadership
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer class="mt-12 bg-gray-900 text-gray-300 text-center p-6">
|
|
||||||
<p class="text-sm">🔍 Analysis powered by AI | Version 1.0 | Platforms Supported: 14</p>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<!-- Script to Render Platforms -->
|
|
||||||
<script>
|
|
||||||
const platforms = [
|
|
||||||
{name:"Google Business", found:true, verified:true, profile_url:"https://business.google.com/tesla", confidence:"high", notes:"Verified business listing with reviews and location info"},
|
|
||||||
{name:"LinkedIn", found:true, verified:true, profile_url:"https://linkedin.com/company/tesla-motors", confidence:"high", notes:"Official company page with verified badge"},
|
|
||||||
{name:"YouTube", found:true, verified:true, profile_url:"https://youtube.com/tesla", confidence:"high", notes:"Official channel with verification checkmark"},
|
|
||||||
{name:"TikTok", found:false, verified:null, profile_url:null, confidence:null, notes:"No official business account found"},
|
|
||||||
{name:"Instagram", found:true, verified:true, profile_url:"https://instagram.com/teslamotors", confidence:"high", notes:"Verified business account with blue checkmark"},
|
|
||||||
{name:"Pinterest", found:false, verified:null, profile_url:null, confidence:null, notes:"No official business account found"},
|
|
||||||
{name:"X (Twitter)", found:true, verified:true, profile_url:"https://x.com/tesla", confidence:"high", notes:"Official verified account with gold checkmark"},
|
|
||||||
{name:"Facebook", found:true, verified:true, profile_url:"https://facebook.com/tesla", confidence:"medium", notes:"Business page with verification badge"},
|
|
||||||
{name:"Medium", found:false, verified:null, profile_url:null, confidence:null, notes:"No official publication found"},
|
|
||||||
{name:"Tumblr", found:false, verified:null, profile_url:null, confidence:null, notes:"No official business account found"},
|
|
||||||
{name:"Threads", found:true, verified:false, profile_url:"https://threads.net/teslamotors", confidence:"low", notes:"Unverified account, authenticity uncertain"},
|
|
||||||
{name:"Quora", found:false, verified:null, profile_url:null, confidence:null, notes:"No official business space found"},
|
|
||||||
{name:"Reddit", found:false, verified:null, profile_url:null, confidence:null, notes:"No official business account found"},
|
|
||||||
{name:"Blue Sky", found:false, verified:null, profile_url:null, confidence:null, notes:"No official business account found"},
|
|
||||||
];
|
|
||||||
|
|
||||||
const container = document.getElementById("platforms");
|
|
||||||
|
|
||||||
platforms.forEach(p => {
|
|
||||||
const card = document.createElement("div");
|
|
||||||
card.className = "p-4 border rounded-xl shadow hover:shadow-lg transition bg-gray-50";
|
|
||||||
|
|
||||||
const title = document.createElement("h3");
|
|
||||||
title.className = "font-bold text-lg flex items-center gap-2";
|
|
||||||
title.innerHTML = p.name + (p.verified ? " ✅" : p.found ? " ⚠️" : " ❌");
|
|
||||||
card.appendChild(title);
|
|
||||||
|
|
||||||
const status = document.createElement("p");
|
|
||||||
if (p.found) {
|
|
||||||
status.className = "text-sm " + (p.verified ? "text-green-700" : "text-yellow-600");
|
|
||||||
status.innerText = p.verified ? `Verified (${p.confidence} confidence)` : `Found (Unverified)`;
|
|
||||||
} else {
|
|
||||||
status.className = "text-sm text-red-600";
|
|
||||||
status.innerText = "Not Found";
|
|
||||||
}
|
|
||||||
card.appendChild(status);
|
|
||||||
|
|
||||||
if (p.profile_url) {
|
|
||||||
const link = document.createElement("a");
|
|
||||||
link.href = p.profile_url;
|
|
||||||
link.target = "_blank";
|
|
||||||
link.className = "block text-blue-600 hover:underline mt-2";
|
|
||||||
link.innerText = "View Profile";
|
|
||||||
card.appendChild(link);
|
|
||||||
}
|
|
||||||
|
|
||||||
const notes = document.createElement("p");
|
|
||||||
notes.className = "text-xs mt-2 text-gray-600";
|
|
||||||
notes.innerText = p.notes;
|
|
||||||
card.appendChild(notes);
|
|
||||||
|
|
||||||
container.appendChild(card);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,327 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
||||||
<title>Tesla — Brand Analysis (Standalone HTML)</title>
|
|
||||||
<!-- Tailwind (CDN) -->
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
|
||||||
<!-- Chart.js -->
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
||||||
<style>
|
|
||||||
/* small helpers to mimic subtle glassy dark cards */
|
|
||||||
.card { background: rgba(15, 23, 42, 0.8); border-radius: 1rem; box-shadow: 0 6px 18px rgba(2,6,23,0.6); border: 1px solid rgba(255,255,255,0.04); }
|
|
||||||
.muted { color: #9ca3af; }
|
|
||||||
.badge { font-size: 0.75rem; padding: 0.25rem 0.6rem; border-radius: 9999px; }
|
|
||||||
.pill { background: rgba(255,255,255,0.03); padding: .3rem .6rem; border-radius: .5rem; }
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="bg-gradient-to-b from-gray-950 via-black to-black text-white min-h-screen">
|
|
||||||
<div class="max-w-7xl mx-auto px-6 py-8">
|
|
||||||
<!-- Header -->
|
|
||||||
<header class="flex flex-col md:flex-row md:items-end md:justify-between gap-4">
|
|
||||||
<div>
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<img src="https://www.tesla.com/themes/custom/tesla_frontend/assets/favicons/favicon.ico" alt="logo" class="w-8 h-8 rounded"/>
|
|
||||||
<div>
|
|
||||||
<h1 class="text-2xl md:text-3xl font-bold">Tesla — Digital Presence Report</h1>
|
|
||||||
<p class="text-sm muted mt-1">Website: <a href="https://www.tesla.com/" target="_blank" class="text-sky-300 hover:underline">https://www.tesla.com/</a></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p class="text-xs muted mt-2" id="analysisDate">Analyzed on —</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-3 w-full md:w-auto">
|
|
||||||
<div class="card p-4">
|
|
||||||
<p class="text-xs muted uppercase">Checked</p>
|
|
||||||
<p class="text-lg font-semibold" id="statChecked">—</p>
|
|
||||||
</div>
|
|
||||||
<div class="card p-4">
|
|
||||||
<p class="text-xs muted uppercase">Found</p>
|
|
||||||
<p class="text-lg font-semibold" id="statFound">—</p>
|
|
||||||
</div>
|
|
||||||
<div class="card p-4">
|
|
||||||
<p class="text-xs muted uppercase">Verified</p>
|
|
||||||
<p class="text-lg font-semibold" id="statVerified">—</p>
|
|
||||||
</div>
|
|
||||||
<div class="card p-4">
|
|
||||||
<p class="text-xs muted uppercase">Total Followers</p>
|
|
||||||
<p class="text-lg font-semibold" id="statFollowers">—</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<!-- Score & charts row -->
|
|
||||||
<section class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
||||||
<div class="card p-5">
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<p class="text-sm muted">Presence Score</p>
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<h2 class="text-3xl font-bold" id="finalScore">—</h2>
|
|
||||||
<span class="badge pill" id="grade">—</span>
|
|
||||||
</div>
|
|
||||||
<p class="text-xs muted mt-2" id="benchmark">Industry benchmark —</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="mt-4">
|
|
||||||
<div class="h-2 bg-zinc-800 rounded-full overflow-hidden">
|
|
||||||
<div id="completionBar" style="width:0%" class="h-full bg-sky-500"></div>
|
|
||||||
</div>
|
|
||||||
<p class="text-xs muted mt-2">Profile completion: <span id="completionPct">—</span>%</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card p-5">
|
|
||||||
<p class="text-sm muted">Found vs Missing</p>
|
|
||||||
<canvas id="donut" class="mt-3"></canvas>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card p-5">
|
|
||||||
<p class="text-sm muted">Followers by Platform</p>
|
|
||||||
<canvas id="bars" class="mt-3"></canvas>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Recommendations -->
|
|
||||||
<section class="mt-6 card p-5">
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<h3 class="text-lg font-semibold">Actionable Recommendations</h3>
|
|
||||||
<div class="text-xs muted">Biggest opportunity: <span id="biggestOpportunity">—</span></div>
|
|
||||||
</div>
|
|
||||||
<div class="mt-4 grid md:grid-cols-3 gap-4" id="recoList"></div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Controls + Platform cards -->
|
|
||||||
<section class="mt-6 card p-5">
|
|
||||||
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
|
|
||||||
<div class="flex items-center gap-3 w-full md:w-2/3">
|
|
||||||
<div class="relative w-full">
|
|
||||||
<input id="q" placeholder="Search platforms..." class="w-full p-3 rounded-lg bg-zinc-900 text-white" />
|
|
||||||
<div class="absolute right-3 top-3 text-xs muted">/</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 w-full md:w-1/3">
|
|
||||||
<select id="filter" class="w-1/2 p-2 rounded bg-zinc-900">
|
|
||||||
<option value="all">All</option>
|
|
||||||
<option value="found">Found</option>
|
|
||||||
<option value="missing">Missing</option>
|
|
||||||
</select>
|
|
||||||
<select id="sort" class="w-1/2 p-2 rounded bg-zinc-900">
|
|
||||||
<option value="default">Sort</option>
|
|
||||||
<option value="followers">Followers</option>
|
|
||||||
<option value="completeness">Completeness</option>
|
|
||||||
<option value="name">Name (A–Z)</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="platformGrid" class="mt-5 grid sm:grid-cols-2 lg:grid-cols-3 gap-4"></div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Meta -->
|
|
||||||
<section class="mt-6 grid md:grid-cols-3 gap-4">
|
|
||||||
<div class="card p-4">
|
|
||||||
<p class="text-xs muted">Analyzer Version</p>
|
|
||||||
<p id="analyzerVersion" class="font-medium">—</p>
|
|
||||||
</div>
|
|
||||||
<div class="card p-4">
|
|
||||||
<p class="text-xs muted">Platforms Supported</p>
|
|
||||||
<p id="platformsSupported" class="font-medium">—</p>
|
|
||||||
</div>
|
|
||||||
<div class="card p-4">
|
|
||||||
<p class="text-xs muted">Analysis Method</p>
|
|
||||||
<p id="analysisMethod" class="font-medium">—</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<footer class="mt-8 text-center muted text-xs">Built with ♥ — Dark cards for emphasis as requested.</footer>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// Full JSON provided by user (trimmed keys preserved)
|
|
||||||
const RAW = {
|
|
||||||
"status": "success",
|
|
||||||
"brand_analysis": {
|
|
||||||
"brand_name": "Tesla",
|
|
||||||
"website": "https://www.tesla.com/",
|
|
||||||
"analysis_date": "2025-08-28T15:04:31.442279",
|
|
||||||
"processing_time": "Real-time SERP + GPT-4o analysis",
|
|
||||||
"analysis_method": "SerpAPI + GPT-4o with follower tracking"
|
|
||||||
},
|
|
||||||
"data": {
|
|
||||||
"platforms": [
|
|
||||||
{"name":"Google Business","found":false,"verified":null,"profile_url":null,"confidence":"low","search_ranking":null,"followers_count":null,"subscribers_count":null,"engagement_level":"unknown","posts_count":null,"verification_badge":"none","account_age_estimate":"unknown","last_activity":"unknown","profile_completeness":0,"notes":"No official Tesla profile found on Google Business.","activity_level":"unknown"},
|
|
||||||
{"name":"LinkedIn","found":true,"verified":true,"profile_url":"https://www.linkedin.com/company/tesla-motors","confidence":"high","search_ranking":1,"followers_count":12261045,"subscribers_count":null,"engagement_level":"high","posts_count":null,"verification_badge":"verified","account_age_estimate":"unknown","last_activity":"unknown","profile_completeness":90,"notes":"Official Tesla LinkedIn profile with over 12 million followers. Verified account.","activity_level":"unknown"},
|
|
||||||
{"name":"YouTube","found":true,"verified":true,"profile_url":"https://www.youtube.com/channel/UC5WjFrtBdufl6CZojX3D8dQ","confidence":"high","search_ranking":1,"followers_count":null,"subscribers_count":null,"engagement_level":"high","posts_count":null,"verification_badge":"verified","account_age_estimate":"unknown","last_activity":"recent","profile_completeness":80,"notes":"Official Tesla YouTube channel. Verified with regular content updates.","activity_level":"high"},
|
|
||||||
{"name":"TikTok","found":false,"verified":null,"profile_url":null,"confidence":"low","search_ranking":null,"followers_count":null,"subscribers_count":null,"engagement_level":"unknown","posts_count":null,"verification_badge":"none","account_age_estimate":"unknown","last_activity":"unknown","profile_completeness":0,"notes":"No official Tesla profile found on TikTok.","activity_level":"unknown"},
|
|
||||||
{"name":"Instagram","found":true,"verified":true,"profile_url":"https://www.instagram.com/teslamotors/","confidence":"high","search_ranking":1,"followers_count":null,"subscribers_count":null,"engagement_level":"high","posts_count":null,"verification_badge":"verified","account_age_estimate":"unknown","last_activity":"recent","profile_completeness":85,"notes":"Official Tesla Instagram profile. Verified with active engagement.","activity_level":"high"},
|
|
||||||
{"name":"Pinterest","found":false,"verified":null,"profile_url":null,"confidence":"low","search_ranking":null,"followers_count":null,"subscribers_count":null,"engagement_level":"unknown","posts_count":null,"verification_badge":"none","account_age_estimate":"unknown","last_activity":"unknown","profile_completeness":0,"notes":"No official Tesla profile found on Pinterest.","activity_level":"unknown"},
|
|
||||||
{"name":"X (Twitter)","found":true,"verified":true,"profile_url":"https://x.com/teslaownerssv","confidence":"medium","search_ranking":1,"followers_count":null,"subscribers_count":null,"engagement_level":"high","posts_count":null,"verification_badge":"verified","account_age_estimate":"unknown","last_activity":"recent","profile_completeness":70,"notes":"Tesla Owners Silicon Valley is a prominent Tesla-related account. Verified.","activity_level":"high"},
|
|
||||||
{"name":"Facebook","found":true,"verified":false,"profile_url":"https://www.facebook.com/TeslaMotorsCorp/","confidence":"medium","search_ranking":1,"followers_count":278870,"subscribers_count":null,"engagement_level":"medium","posts_count":null,"verification_badge":"none","account_age_estimate":"unknown","last_activity":"unknown","profile_completeness":60,"notes":"Tesla fan page with significant following but not verified.","activity_level":"medium"},
|
|
||||||
{"name":"Medium","found":false,"verified":null,"profile_url":null,"confidence":"low","search_ranking":null,"followers_count":null,"subscribers_count":null,"engagement_level":"unknown","posts_count":null,"verification_badge":"none","account_age_estimate":"unknown","last_activity":"unknown","profile_completeness":0,"notes":"No official Tesla profile found on Medium.","activity_level":"unknown"},
|
|
||||||
{"name":"Tumblr","found":false,"verified":null,"profile_url":null,"confidence":"low","search_ranking":null,"followers_count":null,"subscribers_count":null,"engagement_level":"unknown","posts_count":null,"verification_badge":"none","account_age_estimate":"unknown","last_activity":"unknown","profile_completeness":0,"notes":"No official Tesla profile found on Tumblr.","activity_level":"unknown"},
|
|
||||||
{"name":"Threads","found":false,"verified":null,"profile_url":null,"confidence":"low","search_ranking":null,"followers_count":null,"subscribers_count":null,"engagement_level":"unknown","posts_count":null,"verification_badge":"none","account_age_estimate":"unknown","last_activity":"unknown","profile_completeness":0,"notes":"No official Tesla profile found on Threads.","activity_level":"unknown"},
|
|
||||||
{"name":"Quora","found":false,"verified":null,"profile_url":null,"confidence":"low","search_ranking":null,"followers_count":null,"subscribers_count":null,"engagement_level":"unknown","posts_count":null,"verification_badge":"none","account_age_estimate":"unknown","last_activity":"unknown","profile_completeness":0,"notes":"No official Tesla profile found on Quora.","activity_level":"unknown"},
|
|
||||||
{"name":"Reddit","found":false,"verified":null,"profile_url":null,"confidence":"low","search_ranking":null,"followers_count":null,"subscribers_count":null,"engagement_level":"unknown","posts_count":null,"verification_badge":"none","account_age_estimate":"unknown","last_activity":"unknown","profile_completeness":0,"notes":"No official Tesla profile found on Reddit.","activity_level":"unknown"},
|
|
||||||
{"name":"Blue Sky","found":false,"verified":null,"profile_url":null,"confidence":"low","search_ranking":null,"followers_count":null,"subscribers_count":null,"engagement_level":"unknown","posts_count":null,"verification_badge":"none","account_age_estimate":"unknown","last_activity":"unknown","profile_completeness":0,"notes":"No official Tesla profile found on Blue Sky.","activity_level":"unknown"}
|
|
||||||
],
|
|
||||||
"summary": {"total_platforms_checked":14,"platforms_found":5,"platforms_missing":9,"completion_percentage":35.71,"verification_rate":60,"average_search_ranking":1,"total_followers":12539915,"average_engagement":"medium","verified_accounts":3}
|
|
||||||
},
|
|
||||||
"competitor_analysis": {},
|
|
||||||
"insights": {"digital_presence_score":"B-","final_score":66.7,"strongest_presence":"LinkedIn","biggest_opportunity":"Google Business","total_followers":12539915,"average_engagement":"high","verification_gaps":1,"industry_benchmark":"Below average (36% vs 52% industry average)","recommendations":[{"platform":"Google Business","priority":"medium","reason":"Critical for local SEO and customer reviews","estimated_setup_time":"2-4 hours","potential_reach":"Local search dominance"},{"platform":"TikTok","priority":"high","reason":"Fastest-growing platform for viral marketing and reaching Gen Z/Millennial audiences","estimated_setup_time":"1-2 hours","potential_reach":"500K+ monthly views potential"},{"platform":"Pinterest","priority":"medium","reason":"Perfect for visual discovery and driving website traffic","estimated_setup_time":"2-3 hours","potential_reach":"50K+ monthly pin impressions"}]},
|
|
||||||
"meta": {"analyzer_version":"2.1 Pro Enhanced","platforms_supported":14,"analysis_method":"Real-time SERP search + GPT-4o analysis","model":"GPT-4o","serp_provider":"serpapi","features":["live_verification","actual_urls","search_rankings","follower_counts","engagement_metrics","verification_badges","account_age_estimation","profile_completeness","follower_weighted_scoring","competitor_analysis","actionable_insights"]}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Utilities
|
|
||||||
const safeNum = (v) => (typeof v === 'number' ? v : 0);
|
|
||||||
|
|
||||||
// Fill header stats
|
|
||||||
document.getElementById('analysisDate').textContent = 'Analyzed on ' + new Date(RAW.brand_analysis.analysis_date).toLocaleString();
|
|
||||||
const summary = RAW.data.summary;
|
|
||||||
document.getElementById('statChecked').textContent = summary.total_platforms_checked;
|
|
||||||
document.getElementById('statFound').textContent = summary.platforms_found;
|
|
||||||
document.getElementById('statVerified').textContent = summary.verified_accounts;
|
|
||||||
document.getElementById('statFollowers').textContent = (summary.total_followers || 0).toLocaleString();
|
|
||||||
|
|
||||||
// Score / insights
|
|
||||||
document.getElementById('finalScore').textContent = RAW.insights.final_score;
|
|
||||||
document.getElementById('grade').textContent = RAW.insights.digital_presence_score;
|
|
||||||
document.getElementById('benchmark').textContent = 'Industry benchmark: ' + RAW.insights.industry_benchmark;
|
|
||||||
document.getElementById('completionPct').textContent = summary.completion_percentage;
|
|
||||||
document.getElementById('completionBar').style.width = (summary.completion_percentage || 0) + '%';
|
|
||||||
document.getElementById('biggestOpportunity').textContent = RAW.insights.biggest_opportunity;
|
|
||||||
|
|
||||||
// Recommendations
|
|
||||||
const recoList = document.getElementById('recoList');
|
|
||||||
RAW.insights.recommendations.forEach(r => {
|
|
||||||
const el = document.createElement('div');
|
|
||||||
el.className = 'p-4 card';
|
|
||||||
el.innerHTML = `
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<h4 class="font-semibold">${r.platform}</h4>
|
|
||||||
<span class="badge ${r.priority === 'high' ? 'bg-amber-500 text-black' : 'bg-sky-500 text-white'}">${r.priority}</span>
|
|
||||||
</div>
|
|
||||||
<p class="text-sm muted mt-2">${r.reason}</p>
|
|
||||||
<div class="mt-3 text-xs muted grid grid-cols-2 gap-2">
|
|
||||||
<div class="pill">Setup: ${r.estimated_setup_time}</div>
|
|
||||||
<div class="pill">Reach: ${r.potential_reach}</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
recoList.appendChild(el);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Platform rendering logic
|
|
||||||
let platforms = RAW.data.platforms.map(p => ({
|
|
||||||
...p,
|
|
||||||
followers: safeNum(p.followers_count) + safeNum(p.subscribers_count),
|
|
||||||
profile_completeness: p.profile_completeness || 0
|
|
||||||
}));
|
|
||||||
|
|
||||||
const grid = document.getElementById('platformGrid');
|
|
||||||
const q = document.getElementById('q');
|
|
||||||
const filterEl = document.getElementById('filter');
|
|
||||||
const sortEl = document.getElementById('sort');
|
|
||||||
|
|
||||||
function render() {
|
|
||||||
const term = q.value.trim().toLowerCase();
|
|
||||||
let arr = platforms.slice();
|
|
||||||
if (term) arr = arr.filter(p => (p.name + ' ' + (p.notes||'')).toLowerCase().includes(term));
|
|
||||||
if (filterEl.value === 'found') arr = arr.filter(p => p.found);
|
|
||||||
if (filterEl.value === 'missing') arr = arr.filter(p => !p.found);
|
|
||||||
|
|
||||||
if (sortEl.value === 'followers') arr.sort((a,b) => (b.followers||0) - (a.followers||0));
|
|
||||||
if (sortEl.value === 'completeness') arr.sort((a,b) => (b.profile_completeness||0) - (a.profile_completeness||0));
|
|
||||||
if (sortEl.value === 'name') arr.sort((a,b) => a.name.localeCompare(b.name));
|
|
||||||
|
|
||||||
grid.innerHTML = '';
|
|
||||||
arr.forEach(p => {
|
|
||||||
const c = document.createElement('div');
|
|
||||||
c.className = 'p-4 card';
|
|
||||||
const verified = p.verified === true;
|
|
||||||
const found = p.found === true;
|
|
||||||
c.innerHTML = `
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="text-lg font-semibold">${p.name}</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span class="badge ${found ? (verified ? 'bg-emerald-500 text-black' : 'bg-sky-500 text-white') : 'bg-rose-500 text-white'}">${found ? (verified ? 'Verified' : 'Found') : 'Missing'}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="mt-3 grid grid-cols-2 gap-2 text-sm muted">
|
|
||||||
<div>Rank: ${p.search_ranking ?? '-'}</div>
|
|
||||||
<div>Followers: ${p.followers ? p.followers.toLocaleString() : '-'}</div>
|
|
||||||
<div>Engagement: ${p.engagement_level ?? '-'}</div>
|
|
||||||
<div>Completeness: ${p.profile_completeness}%</div>
|
|
||||||
</div>
|
|
||||||
<div class="mt-3 flex items-center gap-3 text-xs">
|
|
||||||
${p.profile_url ? `<a href="${p.profile_url}" target="_blank" class="text-sky-300">Visit profile ↗</a>` : `<span class="muted">No URL</span>`}
|
|
||||||
${verified ? `<span class="pill">Verified</span>` : ''}
|
|
||||||
${p.last_activity ? `<span class="muted">Last: ${p.last_activity}</span>` : ''}
|
|
||||||
</div>
|
|
||||||
${p.notes ? `<p class="text-xs muted mt-3">${p.notes}</p>` : ''}
|
|
||||||
`;
|
|
||||||
grid.appendChild(c);
|
|
||||||
});
|
|
||||||
|
|
||||||
// update charts with current filtered data
|
|
||||||
updateCharts(arr);
|
|
||||||
}
|
|
||||||
|
|
||||||
q.addEventListener('input', render);
|
|
||||||
filterEl.addEventListener('change', render);
|
|
||||||
sortEl.addEventListener('change', render);
|
|
||||||
|
|
||||||
// Charts setup
|
|
||||||
const donutCtx = document.getElementById('donut').getContext('2d');
|
|
||||||
const barsCtx = document.getElementById('bars').getContext('2d');
|
|
||||||
let donutChart, barChart;
|
|
||||||
|
|
||||||
function createCharts() {
|
|
||||||
const foundCount = platforms.filter(p => p.found).length;
|
|
||||||
const missingCount = platforms.length - foundCount;
|
|
||||||
donutChart = new Chart(donutCtx, {
|
|
||||||
type: 'doughnut',
|
|
||||||
data: {
|
|
||||||
labels: ['Found','Missing'],
|
|
||||||
datasets: [{ data: [foundCount, missingCount], backgroundColor: ['#34d399','#f87171'] }]
|
|
||||||
},
|
|
||||||
options: { plugins: { legend: { labels: { color: '#cbd5e1' } } } }
|
|
||||||
});
|
|
||||||
|
|
||||||
barChart = new Chart(barsCtx, {
|
|
||||||
type: 'bar',
|
|
||||||
data: {
|
|
||||||
labels: platforms.map(p => p.name),
|
|
||||||
datasets: [{ label: 'Followers', data: platforms.map(p => p.followers||0), backgroundColor: '#60a5fa' }]
|
|
||||||
},
|
|
||||||
options: { scales: { x: { ticks: { color: '#9ca3af' } }, y: { ticks: { color: '#9ca3af' }, beginAtZero: true } }, plugins: { legend: { display: false } } }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateCharts(filteredArr) {
|
|
||||||
const foundCount = filteredArr.filter(p => p.found).length;
|
|
||||||
const missingCount = filteredArr.length - foundCount;
|
|
||||||
if (donutChart) {
|
|
||||||
donutChart.data.datasets[0].data = [foundCount, missingCount];
|
|
||||||
donutChart.update();
|
|
||||||
}
|
|
||||||
if (barChart) {
|
|
||||||
barChart.data.labels = filteredArr.map(p => p.name);
|
|
||||||
barChart.data.datasets[0].data = filteredArr.map(p => p.followers||0);
|
|
||||||
barChart.update();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// meta
|
|
||||||
document.getElementById('analyzerVersion').textContent = RAW.meta.analyzer_version;
|
|
||||||
document.getElementById('platformsSupported').textContent = RAW.meta.platforms_supported;
|
|
||||||
document.getElementById('analysisMethod').textContent = RAW.meta.analysis_method;
|
|
||||||
|
|
||||||
createCharts();
|
|
||||||
render();
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,34 +0,0 @@
|
|||||||
version: '3.8'
|
|
||||||
|
|
||||||
services:
|
|
||||||
web:
|
|
||||||
build: .
|
|
||||||
ports:
|
|
||||||
- "3000:80"
|
|
||||||
environment:
|
|
||||||
- SECRET_KEY=${SECRET_KEY}
|
|
||||||
- DEBUG=${DEBUG:-false}
|
|
||||||
- ALLOWED_HOSTS=${ALLOWED_HOSTS}
|
|
||||||
- DATABASE_URL=${DATABASE_URL}
|
|
||||||
- EMAIL_HOST_USER=${EMAIL_HOST_USER:-}
|
|
||||||
- EMAIL_HOST_PASSWORD=${EMAIL_HOST_PASSWORD:-}
|
|
||||||
- STRIPE_SECRET_KEY=${STRIPE_SECRET_KEY:-}
|
|
||||||
depends_on:
|
|
||||||
- db
|
|
||||||
volumes:
|
|
||||||
- static_volume:/app/staticfiles
|
|
||||||
- media_volume:/app/media
|
|
||||||
|
|
||||||
db:
|
|
||||||
image: postgres:15
|
|
||||||
environment:
|
|
||||||
- POSTGRES_DB=${POSTGRES_DB:-quantumtasks}
|
|
||||||
- POSTGRES_USER=${POSTGRES_USER:-postgres}
|
|
||||||
- POSTGRES_PASSWORD=${POSTGRES_PASSWORD}
|
|
||||||
volumes:
|
|
||||||
- postgres_data:/var/lib/postgresql/data
|
|
||||||
|
|
||||||
volumes:
|
|
||||||
postgres_data:
|
|
||||||
static_volume:
|
|
||||||
media_volume:
|
|
||||||
@ -1,652 +0,0 @@
|
|||||||
/* Digital Branding Services Page Styles */
|
|
||||||
/* Following homepage.css patterns and using unified color system from base.css */
|
|
||||||
|
|
||||||
/* Hero Section - matches homepage hero */
|
|
||||||
.digital-branding-hero {
|
|
||||||
position: relative;
|
|
||||||
background: var(--gradient-hero);
|
|
||||||
overflow: hidden;
|
|
||||||
min-height: 85vh;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: clamp(40px, 10vw, 80px) clamp(16px, 4vw, 24px) clamp(60px, 15vw, 100px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-container {
|
|
||||||
max-width: 1280px;
|
|
||||||
margin: 0 auto;
|
|
||||||
text-align: center;
|
|
||||||
position: relative;
|
|
||||||
z-index: 10;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.trust-badge {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
background: rgba(59, 130, 246, 0.08);
|
|
||||||
padding: 0.5rem 1.25rem;
|
|
||||||
border-radius: 50px;
|
|
||||||
margin-bottom: 2.5rem;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--primary-blue);
|
|
||||||
border: 1px solid rgba(59, 130, 246, 0.15);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.trust-badge-emoji {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-title {
|
|
||||||
font-weight: 800;
|
|
||||||
margin-bottom: 2.5rem;
|
|
||||||
line-height: 1.1;
|
|
||||||
letter-spacing: -0.02em;
|
|
||||||
font-size: clamp(36px, 8vw, 110px);
|
|
||||||
margin-bottom: clamp(24px, 6vw, 40px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-title-gradient {
|
|
||||||
background: var(--gradient-primary);
|
|
||||||
background-size: 300% 300%;
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-title-normal {
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-description {
|
|
||||||
color: var(--text-secondary);
|
|
||||||
margin-bottom: 3.5rem;
|
|
||||||
max-width: 720px;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
line-height: 1.7;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: clamp(1.1rem, 3vw, 1.4rem);
|
|
||||||
margin-bottom: clamp(32px, 8vw, 56px);
|
|
||||||
padding: 0 clamp(8px, 2vw, 16px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-buttons {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
margin-bottom: 5rem;
|
|
||||||
gap: clamp(12px, 3vw, 20px);
|
|
||||||
margin-bottom: clamp(40px, 10vw, 80px);
|
|
||||||
padding: 0 clamp(8px, 2vw, 16px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
background: var(--gradient-primary);
|
|
||||||
color: white;
|
|
||||||
border-radius: 1rem;
|
|
||||||
font-weight: bold;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
box-shadow: 0 8px 24px rgba(59, 130, 246, 0.25), 0 4px 12px rgba(0, 0, 0, 0.05);
|
|
||||||
letter-spacing: 0.01em;
|
|
||||||
text-align: center;
|
|
||||||
text-decoration: none;
|
|
||||||
display: inline-block;
|
|
||||||
padding: clamp(14px, 4vw, 18px) clamp(24px, 6vw, 36px);
|
|
||||||
font-size: clamp(14px, 3.5vw, 18px);
|
|
||||||
min-height: 48px;
|
|
||||||
min-width: clamp(140px, 40vw, 180px);
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
|
|
||||||
filter: brightness(1.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:active {
|
|
||||||
transform: translateY(0);
|
|
||||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary {
|
|
||||||
background: var(--background-card);
|
|
||||||
color: var(--primary-blue);
|
|
||||||
border-radius: 1rem;
|
|
||||||
font-weight: 600;
|
|
||||||
border: 2px solid var(--border-light);
|
|
||||||
text-decoration: none;
|
|
||||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(59, 130, 246, 0.08);
|
|
||||||
letter-spacing: 0.01em;
|
|
||||||
display: inline-block;
|
|
||||||
text-align: center;
|
|
||||||
padding: clamp(14px, 4vw, 18px) clamp(24px, 6vw, 36px);
|
|
||||||
font-size: clamp(14px, 3.5vw, 18px);
|
|
||||||
min-height: 48px;
|
|
||||||
min-width: clamp(140px, 40vw, 180px);
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 8px 20px rgba(59, 130, 246, 0.15);
|
|
||||||
border-color: var(--primary-blue);
|
|
||||||
background: rgba(59, 130, 246, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary:active {
|
|
||||||
transform: translateY(0);
|
|
||||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.12);
|
|
||||||
}
|
|
||||||
|
|
||||||
.trust-indicators {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
|
|
||||||
gap: clamp(16px, 4vw, 48px);
|
|
||||||
max-width: 600px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 0 clamp(8px, 2vw, 16px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.trust-card {
|
|
||||||
text-align: center;
|
|
||||||
background: rgba(255, 255, 255, 0.5);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.8);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
|
|
||||||
border-radius: 1rem;
|
|
||||||
padding: clamp(16px, 4vw, 24px) clamp(12px, 3vw, 16px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.trust-number {
|
|
||||||
background: var(--text-gradient);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
font-weight: 800;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
font-size: clamp(1rem, 3vw, 1.2rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.trust-text {
|
|
||||||
color: var(--text-secondary);
|
|
||||||
font-weight: 500;
|
|
||||||
letter-spacing: 0.01em;
|
|
||||||
font-size: clamp(12px, 3vw, 15px);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Why Choose Us Section - matches company profile */
|
|
||||||
.why-choose-us {
|
|
||||||
position: relative;
|
|
||||||
background: var(--company-gradient);
|
|
||||||
overflow: hidden;
|
|
||||||
padding: clamp(60px, 15vw, 120px) clamp(16px, 4vw, 24px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-container {
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 0 auto;
|
|
||||||
position: relative;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-header {
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: clamp(40px, 10vw, 80px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-badge {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
background: rgba(30, 64, 175, 0.1);
|
|
||||||
padding: 0.5rem 1.25rem;
|
|
||||||
border-radius: 50px;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
border: 1px solid rgba(30, 64, 175, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-badge-icon {
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-badge-text {
|
|
||||||
font-size: 0.875rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--primary-blue);
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-title {
|
|
||||||
font-weight: 800;
|
|
||||||
color: var(--primary-blue);
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
text-align: center;
|
|
||||||
font-size: clamp(2rem, 5vw, 3.5rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-subtitle {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
color: var(--text-light);
|
|
||||||
max-width: 600px;
|
|
||||||
margin: 0 auto;
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.why-choose-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
|
|
||||||
gap: clamp(24px, 6vw, 40px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.choice-card {
|
|
||||||
background: white;
|
|
||||||
border-radius: clamp(16px, 4vw, 24px);
|
|
||||||
box-shadow: 0 8px 32px rgba(30, 64, 175, 0.08);
|
|
||||||
text-align: center;
|
|
||||||
padding: clamp(24px, 6vw, 40px);
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.choice-icon {
|
|
||||||
margin-bottom: 1.25rem;
|
|
||||||
font-size: clamp(2.5rem, 6vw, 3.5rem);
|
|
||||||
margin-bottom: clamp(16px, 4vw, 20px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.choice-title {
|
|
||||||
font-weight: bold;
|
|
||||||
color: var(--primary-blue);
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
font-size: clamp(1.2rem, 4vw, 1.5rem);
|
|
||||||
margin-bottom: clamp(12px, 3vw, 16px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.choice-description {
|
|
||||||
color: var(--text-light);
|
|
||||||
line-height: 1.6;
|
|
||||||
font-size: clamp(14px, 3.5vw, 18px);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Our Process Section - matches services */
|
|
||||||
.our-process {
|
|
||||||
background: var(--services-gradient);
|
|
||||||
padding: clamp(60px, 15vw, 120px) clamp(16px, 4vw, 24px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.process-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
|
|
||||||
gap: clamp(20px, 5vw, 32px);
|
|
||||||
margin-bottom: clamp(40px, 10vw, 60px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.process-step-card {
|
|
||||||
background: white;
|
|
||||||
border-radius: clamp(16px, 4vw, 20px);
|
|
||||||
box-shadow: 0 8px 32px rgba(30, 64, 175, 0.08);
|
|
||||||
padding: clamp(24px, 6vw, 32px);
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: clamp(16px, 4vw, 20px);
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.step-number {
|
|
||||||
background: var(--gradient-primary);
|
|
||||||
color: white;
|
|
||||||
width: clamp(40px, 10vw, 50px);
|
|
||||||
height: clamp(40px, 10vw, 50px);
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: clamp(16px, 4vw, 20px);
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.step-content {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.step-title {
|
|
||||||
font-weight: bold;
|
|
||||||
color: var(--primary-blue);
|
|
||||||
margin-bottom: 0.75rem;
|
|
||||||
font-size: clamp(1.1rem, 3.5vw, 1.3rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.step-description {
|
|
||||||
color: var(--text-light);
|
|
||||||
line-height: 1.6;
|
|
||||||
font-size: clamp(14px, 3.5vw, 16px);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* RACE Framework */
|
|
||||||
.race-framework {
|
|
||||||
background: white;
|
|
||||||
border-radius: clamp(16px, 4vw, 24px);
|
|
||||||
box-shadow: 0 12px 40px rgba(30, 64, 175, 0.08);
|
|
||||||
padding: clamp(24px, 6vw, 40px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.race-title {
|
|
||||||
text-align: center;
|
|
||||||
font-weight: bold;
|
|
||||||
color: var(--primary-blue);
|
|
||||||
margin-bottom: clamp(20px, 5vw, 32px);
|
|
||||||
font-size: clamp(1.3rem, 4vw, 1.8rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.race-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
|
|
||||||
gap: clamp(16px, 4vw, 24px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.race-card {
|
|
||||||
text-align: center;
|
|
||||||
background: var(--background-light);
|
|
||||||
border-radius: clamp(12px, 3vw, 16px);
|
|
||||||
padding: clamp(16px, 4vw, 24px);
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.race-phase {
|
|
||||||
margin-bottom: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.race-icon {
|
|
||||||
font-size: clamp(1.5rem, 4vw, 2rem);
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.race-phase h4 {
|
|
||||||
font-weight: bold;
|
|
||||||
color: var(--primary-blue);
|
|
||||||
margin: 0;
|
|
||||||
font-size: clamp(1.1rem, 3.5vw, 1.3rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.race-focus {
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--text-primary);
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
font-size: clamp(14px, 3.5vw, 16px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.race-actions {
|
|
||||||
color: var(--text-light);
|
|
||||||
font-size: clamp(12px, 3vw, 14px);
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Branding Services Section - matches services */
|
|
||||||
.branding-services {
|
|
||||||
background: var(--clients-gradient);
|
|
||||||
padding: clamp(60px, 15vw, 120px) clamp(16px, 4vw, 24px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.services-title {
|
|
||||||
font-weight: bold;
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
color: var(--primary-blue);
|
|
||||||
font-size: clamp(1.8rem, 5vw, 2.5rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.services-subtitle {
|
|
||||||
text-align: center;
|
|
||||||
color: var(--text-light);
|
|
||||||
margin-bottom: 3rem;
|
|
||||||
font-size: clamp(16px, 4vw, 20px);
|
|
||||||
margin-bottom: clamp(24px, 6vw, 48px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.branding-services-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
|
|
||||||
gap: clamp(20px, 5vw, 32px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.service-card {
|
|
||||||
background: white;
|
|
||||||
border-radius: clamp(16px, 4vw, 20px);
|
|
||||||
box-shadow: 0 8px 32px rgba(30, 64, 175, 0.08);
|
|
||||||
text-align: center;
|
|
||||||
padding: clamp(24px, 6vw, 32px);
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.service-icon {
|
|
||||||
margin-bottom: 1.25rem;
|
|
||||||
font-size: clamp(2.5rem, 6vw, 3rem);
|
|
||||||
margin-bottom: clamp(16px, 4vw, 20px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.service-title {
|
|
||||||
font-weight: bold;
|
|
||||||
color: var(--primary-blue);
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
font-size: clamp(1.2rem, 4vw, 1.4rem);
|
|
||||||
margin-bottom: clamp(12px, 3vw, 16px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.service-description {
|
|
||||||
color: var(--text-light);
|
|
||||||
line-height: 1.6;
|
|
||||||
font-size: clamp(14px, 3.5vw, 16px);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* CTA Section - matches contact */
|
|
||||||
.branding-cta {
|
|
||||||
background: var(--contact-gradient);
|
|
||||||
padding: clamp(60px, 15vw, 120px) clamp(16px, 4vw, 24px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta-container {
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta-title {
|
|
||||||
font-weight: bold;
|
|
||||||
text-align: center;
|
|
||||||
color: var(--primary-blue);
|
|
||||||
font-size: clamp(1.8rem, 5vw, 2.5rem);
|
|
||||||
margin-bottom: clamp(24px, 6vw, 48px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
|
|
||||||
gap: clamp(30px, 8vw, 60px);
|
|
||||||
align-items: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta-content {
|
|
||||||
background: white;
|
|
||||||
border-radius: clamp(16px, 4vw, 20px);
|
|
||||||
box-shadow: 0 8px 32px rgba(30, 64, 175, 0.08);
|
|
||||||
padding: clamp(24px, 6vw, 40px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta-content-title {
|
|
||||||
font-weight: bold;
|
|
||||||
color: var(--primary-blue);
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
font-size: clamp(1.3rem, 4vw, 1.6rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta-description {
|
|
||||||
color: var(--text-light);
|
|
||||||
line-height: 1.6;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
font-size: clamp(14px, 3.5vw, 18px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta-features {
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta-feature {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.75rem;
|
|
||||||
margin-bottom: 0.75rem;
|
|
||||||
font-size: clamp(14px, 3.5vw, 16px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-icon {
|
|
||||||
color: var(--success-green);
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta-buttons {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: clamp(12px, 3vw, 16px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta-btn {
|
|
||||||
padding: clamp(14px, 4vw, 16px) clamp(20px, 5vw, 24px);
|
|
||||||
border-radius: clamp(8px, 2vw, 12px);
|
|
||||||
font-weight: 600;
|
|
||||||
text-decoration: none;
|
|
||||||
text-align: center;
|
|
||||||
font-size: clamp(14px, 3.5vw, 16px);
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
min-height: 48px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta-btn.primary {
|
|
||||||
background: var(--gradient-primary);
|
|
||||||
color: white;
|
|
||||||
box-shadow: 0 4px 16px rgba(59, 130, 246, 0.25);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta-btn.primary:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 6px 20px rgba(59, 130, 246, 0.35);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta-btn.secondary {
|
|
||||||
background: var(--background-card);
|
|
||||||
color: var(--primary-blue);
|
|
||||||
border: 2px solid var(--border-light);
|
|
||||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta-btn.secondary:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
border-color: var(--primary-blue);
|
|
||||||
background: rgba(59, 130, 246, 0.05);
|
|
||||||
box-shadow: 0 6px 20px rgba(59, 130, 246, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta-info {
|
|
||||||
background: white;
|
|
||||||
border-radius: clamp(16px, 4vw, 20px);
|
|
||||||
box-shadow: 0 8px 32px rgba(30, 64, 175, 0.08);
|
|
||||||
padding: clamp(24px, 6vw, 40px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta-info-title {
|
|
||||||
font-weight: bold;
|
|
||||||
color: var(--primary-blue);
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
font-size: clamp(1.2rem, 4vw, 1.5rem);
|
|
||||||
margin-bottom: clamp(16px, 4vw, 24px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: clamp(12px, 3vw, 16px);
|
|
||||||
margin-bottom: clamp(20px, 5vw, 32px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-icon {
|
|
||||||
background: var(--primary-gradient);
|
|
||||||
border-radius: clamp(8px, 2vw, 12px);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
flex-shrink: 0;
|
|
||||||
width: clamp(40px, 10vw, 50px);
|
|
||||||
height: clamp(40px, 10vw, 50px);
|
|
||||||
font-size: clamp(16px, 4vw, 20px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-details h4 {
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--primary-blue);
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
font-size: clamp(16px, 4vw, 19px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-details p {
|
|
||||||
color: var(--text-light);
|
|
||||||
line-height: 1.6;
|
|
||||||
font-size: clamp(14px, 3.5vw, 16px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-email {
|
|
||||||
color: var(--primary-blue);
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-email:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.commitment-statement {
|
|
||||||
background: var(--services-gradient);
|
|
||||||
border-left: 4px solid var(--primary-blue);
|
|
||||||
border-radius: clamp(12px, 3vw, 16px);
|
|
||||||
padding: clamp(16px, 4vw, 24px);
|
|
||||||
margin-top: clamp(20px, 5vw, 32px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.commitment-text {
|
|
||||||
color: var(--primary-blue);
|
|
||||||
font-weight: 600;
|
|
||||||
text-align: center;
|
|
||||||
font-size: clamp(14px, 3.5vw, 18px);
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Loading state for buttons */
|
|
||||||
.cta-btn.loading {
|
|
||||||
opacity: 0.7;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Mobile responsive adjustments */
|
|
||||||
@media (max-width: 767px) {
|
|
||||||
.cta-buttons {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.process-step-card {
|
|
||||||
flex-direction: column;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.step-number {
|
|
||||||
margin: 0 auto 1rem auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.race-grid {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,802 +0,0 @@
|
|||||||
/* Homepage-specific styles for NetCop AI Hub */
|
|
||||||
/* Using unified color system from base.css */
|
|
||||||
|
|
||||||
/* Hero Section */
|
|
||||||
.hero {
|
|
||||||
position: relative;
|
|
||||||
background: var(--gradient-hero);
|
|
||||||
overflow: hidden;
|
|
||||||
min-height: 85vh;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: clamp(40px, 10vw, 80px) clamp(16px, 4vw, 24px) clamp(60px, 15vw, 100px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-container {
|
|
||||||
max-width: 1280px;
|
|
||||||
margin: 0 auto;
|
|
||||||
text-align: center;
|
|
||||||
position: relative;
|
|
||||||
z-index: 10;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.trust-badge {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
background: rgba(59, 130, 246, 0.08);
|
|
||||||
padding: 0.5rem 1.25rem;
|
|
||||||
border-radius: 50px;
|
|
||||||
margin-bottom: 2.5rem;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--primary-blue);
|
|
||||||
border: 1px solid rgba(59, 130, 246, 0.15);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.trust-badge-emoji {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-title {
|
|
||||||
font-weight: 800;
|
|
||||||
margin-bottom: 2.5rem;
|
|
||||||
line-height: 1.1;
|
|
||||||
letter-spacing: -0.02em;
|
|
||||||
font-size: clamp(36px, 8vw, 110px);
|
|
||||||
margin-bottom: clamp(24px, 6vw, 40px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-title-gradient {
|
|
||||||
background: var(--gradient-primary);
|
|
||||||
background-size: 300% 300%;
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-title-normal {
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-description {
|
|
||||||
color: var(--text-secondary);
|
|
||||||
margin-bottom: 3.5rem;
|
|
||||||
max-width: 720px;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
line-height: 1.7;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: clamp(1.1rem, 3vw, 1.4rem);
|
|
||||||
margin-bottom: clamp(32px, 8vw, 56px);
|
|
||||||
padding: 0 clamp(8px, 2vw, 16px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-buttons {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
margin-bottom: 5rem;
|
|
||||||
gap: clamp(12px, 3vw, 20px);
|
|
||||||
margin-bottom: clamp(40px, 10vw, 80px);
|
|
||||||
padding: 0 clamp(8px, 2vw, 16px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
background: var(--gradient-primary);
|
|
||||||
color: white;
|
|
||||||
border-radius: 1rem;
|
|
||||||
font-weight: bold;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
box-shadow: 0 8px 24px rgba(59, 130, 246, 0.25), 0 4px 12px rgba(0, 0, 0, 0.05);
|
|
||||||
letter-spacing: 0.01em;
|
|
||||||
text-align: center;
|
|
||||||
text-decoration: none;
|
|
||||||
display: inline-block;
|
|
||||||
padding: clamp(14px, 4vw, 18px) clamp(24px, 6vw, 36px);
|
|
||||||
font-size: clamp(14px, 3.5vw, 18px);
|
|
||||||
min-height: 48px;
|
|
||||||
min-width: clamp(140px, 40vw, 180px);
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
|
|
||||||
filter: brightness(1.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:active {
|
|
||||||
transform: translateY(0);
|
|
||||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary {
|
|
||||||
background: var(--background-card);
|
|
||||||
color: var(--primary-blue);
|
|
||||||
border-radius: 1rem;
|
|
||||||
font-weight: 600;
|
|
||||||
border: 2px solid var(--border-light);
|
|
||||||
text-decoration: none;
|
|
||||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(59, 130, 246, 0.08);
|
|
||||||
letter-spacing: 0.01em;
|
|
||||||
display: inline-block;
|
|
||||||
text-align: center;
|
|
||||||
padding: clamp(14px, 4vw, 18px) clamp(24px, 6vw, 36px);
|
|
||||||
font-size: clamp(14px, 3.5vw, 18px);
|
|
||||||
min-height: 48px;
|
|
||||||
min-width: clamp(140px, 40vw, 180px);
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 8px 20px rgba(59, 130, 246, 0.15);
|
|
||||||
border-color: var(--primary-blue);
|
|
||||||
background: rgba(59, 130, 246, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary:active {
|
|
||||||
transform: translateY(0);
|
|
||||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.12);
|
|
||||||
}
|
|
||||||
|
|
||||||
.trust-indicators {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
|
|
||||||
gap: clamp(16px, 4vw, 48px);
|
|
||||||
max-width: 600px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 0 clamp(8px, 2vw, 16px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.trust-card {
|
|
||||||
text-align: center;
|
|
||||||
background: rgba(255, 255, 255, 0.5);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.8);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
|
|
||||||
border-radius: 1rem;
|
|
||||||
padding: clamp(16px, 4vw, 24px) clamp(12px, 3vw, 16px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.trust-number {
|
|
||||||
background: var(--text-gradient);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
font-weight: 800;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
font-size: clamp(1.8rem, 5vw, 2.5rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.trust-text {
|
|
||||||
color: var(--text-secondary);
|
|
||||||
font-weight: 500;
|
|
||||||
letter-spacing: 0.01em;
|
|
||||||
font-size: clamp(12px, 3vw, 15px);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Company Profile Section */
|
|
||||||
.company-profile {
|
|
||||||
position: relative;
|
|
||||||
background: var(--company-gradient);
|
|
||||||
overflow: hidden;
|
|
||||||
padding: clamp(60px, 15vw, 120px) clamp(16px, 4vw, 24px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.company-container {
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 0 auto;
|
|
||||||
position: relative;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-header {
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: clamp(40px, 10vw, 80px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-badge {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
background: rgba(30, 64, 175, 0.1);
|
|
||||||
padding: 0.5rem 1.25rem;
|
|
||||||
border-radius: 50px;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
border: 1px solid rgba(30, 64, 175, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-badge-icon {
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-badge-text {
|
|
||||||
font-size: 0.875rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--primary-blue);
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-title {
|
|
||||||
font-weight: 800;
|
|
||||||
color: var(--primary-blue);
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
text-align: center;
|
|
||||||
font-size: clamp(2rem, 5vw, 3.5rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-subtitle {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
color: var(--text-light);
|
|
||||||
max-width: 600px;
|
|
||||||
margin: 0 auto;
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.company-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
|
|
||||||
gap: clamp(40px, 10vw, 80px);
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.company-content-card {
|
|
||||||
background: white;
|
|
||||||
border-radius: 1.5rem;
|
|
||||||
box-shadow: 0 20px 60px rgba(30, 64, 175, 0.08);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.8);
|
|
||||||
position: relative;
|
|
||||||
padding: clamp(24px, 6vw, 48px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.decorative-corner {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
width: 80px;
|
|
||||||
height: 80px;
|
|
||||||
background: var(--primary-gradient);
|
|
||||||
border-top-right-radius: 1.5rem;
|
|
||||||
border-bottom-left-radius: 1.5rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.company-content-title {
|
|
||||||
font-weight: bold;
|
|
||||||
color: var(--primary-blue);
|
|
||||||
font-size: clamp(1.3rem, 4vw, 1.8rem);
|
|
||||||
margin-bottom: clamp(16px, 4vw, 24px);
|
|
||||||
margin-top: clamp(12px, 3vw, 20px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.company-content-text {
|
|
||||||
color: var(--text-secondary);
|
|
||||||
line-height: 1.8;
|
|
||||||
margin-bottom: clamp(20px, 5vw, 32px);
|
|
||||||
font-size: clamp(14px, 3.5vw, 18px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.company-badges {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
|
|
||||||
gap: clamp(12px, 3vw, 16px);
|
|
||||||
margin-bottom: clamp(20px, 5vw, 32px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.company-badge {
|
|
||||||
color: white;
|
|
||||||
border-radius: 0.75rem;
|
|
||||||
text-align: center;
|
|
||||||
font-size: clamp(12px, 3vw, 14px);
|
|
||||||
font-weight: 600;
|
|
||||||
padding: clamp(12px, 3vw, 16px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.company-badge-primary {
|
|
||||||
background: var(--primary-gradient);
|
|
||||||
box-shadow: 0 4px 16px rgba(64, 224, 208, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.company-badge-purple {
|
|
||||||
background: var(--badge-purple);
|
|
||||||
box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.company-badge-orange {
|
|
||||||
background: var(--badge-orange);
|
|
||||||
box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.company-badge-icon {
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
font-size: clamp(18px, 4vw, 24px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.company-visual {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-visual {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 500px;
|
|
||||||
background: var(--visual-gradient);
|
|
||||||
border-radius: clamp(16px, 4vw, 32px);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
box-shadow: 0 32px 80px rgba(30, 64, 175, 0.2);
|
|
||||||
position: relative;
|
|
||||||
margin: 0 auto;
|
|
||||||
overflow: hidden;
|
|
||||||
height: clamp(250px, 50vw, 400px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-visual-icon {
|
|
||||||
color: white;
|
|
||||||
position: relative;
|
|
||||||
z-index: 10;
|
|
||||||
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
|
||||||
font-size: clamp(3rem, 8vw, 5rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.floating-element {
|
|
||||||
position: absolute;
|
|
||||||
background: white;
|
|
||||||
border-radius: clamp(8px, 2vw, 16px);
|
|
||||||
box-shadow: 0 8px 32px rgba(30, 64, 175, 0.15);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.floating-element-1 {
|
|
||||||
top: 10%;
|
|
||||||
right: clamp(-20%, -10%, -5%);
|
|
||||||
width: clamp(50px, 12vw, 80px);
|
|
||||||
height: clamp(50px, 12vw, 80px);
|
|
||||||
font-size: clamp(1.2rem, 3vw, 2rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.floating-element-2 {
|
|
||||||
bottom: 15%;
|
|
||||||
left: clamp(-10%, -5%, 0%);
|
|
||||||
width: clamp(40px, 10vw, 60px);
|
|
||||||
height: clamp(40px, 10vw, 60px);
|
|
||||||
border-radius: 50%;
|
|
||||||
box-shadow: 0 8px 32px rgba(64, 224, 208, 0.15);
|
|
||||||
font-size: clamp(1rem, 2.5vw, 1.5rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.achievement-strip {
|
|
||||||
background: white;
|
|
||||||
border-radius: clamp(12px, 3vw, 20px);
|
|
||||||
box-shadow: 0 16px 48px rgba(30, 64, 175, 0.08);
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
|
|
||||||
gap: clamp(16px, 4vw, 32px);
|
|
||||||
align-items: center;
|
|
||||||
margin-top: clamp(40px, 10vw, 80px);
|
|
||||||
padding: clamp(20px, 5vw, 32px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.achievement-item {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.achievement-icon {
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
font-size: clamp(1.5rem, 4vw, 2rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.achievement-title {
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--primary-blue);
|
|
||||||
font-size: clamp(14px, 3.5vw, 18px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.achievement-text {
|
|
||||||
color: var(--text-light);
|
|
||||||
font-size: clamp(12px, 3vw, 14px);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Services Section */
|
|
||||||
.services {
|
|
||||||
background: var(--services-gradient);
|
|
||||||
padding: clamp(40px, 10vw, 80px) clamp(16px, 4vw, 24px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.services-container {
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.services-title {
|
|
||||||
font-weight: bold;
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
color: var(--primary-blue);
|
|
||||||
font-size: clamp(1.8rem, 5vw, 2.5rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.services-subtitle {
|
|
||||||
text-align: center;
|
|
||||||
color: var(--text-light);
|
|
||||||
margin-bottom: 3rem;
|
|
||||||
font-size: clamp(16px, 4vw, 20px);
|
|
||||||
margin-bottom: clamp(24px, 6vw, 48px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.services-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
|
|
||||||
gap: clamp(16px, 4vw, 32px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.service-card {
|
|
||||||
background: white;
|
|
||||||
border-radius: clamp(12px, 3vw, 20px);
|
|
||||||
box-shadow: 0 8px 32px rgba(30, 64, 175, 0.08);
|
|
||||||
text-align: center;
|
|
||||||
padding: clamp(20px, 5vw, 40px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.service-icon {
|
|
||||||
margin-bottom: 1.25rem;
|
|
||||||
font-size: clamp(2rem, 6vw, 3rem);
|
|
||||||
margin-bottom: clamp(12px, 3vw, 20px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.service-title {
|
|
||||||
font-weight: bold;
|
|
||||||
color: var(--primary-blue);
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
font-size: clamp(1.2rem, 4vw, 1.5rem);
|
|
||||||
margin-bottom: clamp(12px, 3vw, 16px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.service-description {
|
|
||||||
color: var(--text-light);
|
|
||||||
line-height: 1.6;
|
|
||||||
font-size: clamp(14px, 3.5vw, 18px);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Clients Section */
|
|
||||||
.clients {
|
|
||||||
background: var(--clients-gradient);
|
|
||||||
padding: clamp(40px, 10vw, 80px) clamp(16px, 4vw, 24px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.clients-container {
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.clients-title {
|
|
||||||
font-weight: bold;
|
|
||||||
text-align: center;
|
|
||||||
color: var(--primary-blue);
|
|
||||||
font-size: clamp(1.8rem, 5vw, 2.5rem);
|
|
||||||
margin-bottom: clamp(24px, 6vw, 48px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.clients-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
|
|
||||||
gap: clamp(16px, 4vw, 32px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.client-card {
|
|
||||||
background: white;
|
|
||||||
border-radius: clamp(12px, 3vw, 16px);
|
|
||||||
box-shadow: 0 4px 16px rgba(30, 64, 175, 0.07);
|
|
||||||
text-align: center;
|
|
||||||
padding: clamp(20px, 5vw, 32px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.client-icon {
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
font-size: clamp(1.5rem, 4vw, 2rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.client-name {
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--primary-blue);
|
|
||||||
margin-bottom: 0.375rem;
|
|
||||||
font-size: clamp(14px, 3.5vw, 18px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.client-industry {
|
|
||||||
color: var(--text-light);
|
|
||||||
font-size: clamp(12px, 3vw, 16px);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Founder Section */
|
|
||||||
.founder {
|
|
||||||
background: white;
|
|
||||||
padding: clamp(40px, 10vw, 80px) clamp(16px, 4vw, 24px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.founder-container {
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.founder-title {
|
|
||||||
font-weight: bold;
|
|
||||||
text-align: center;
|
|
||||||
color: var(--primary-blue);
|
|
||||||
font-size: clamp(1.8rem, 5vw, 2.5rem);
|
|
||||||
margin-bottom: clamp(24px, 6vw, 48px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.founder-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
|
|
||||||
gap: clamp(30px, 8vw, 60px);
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.founder-card-container {
|
|
||||||
order: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.founder-card {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 400px;
|
|
||||||
margin: 0 auto;
|
|
||||||
background: var(--founder-gradient);
|
|
||||||
border-radius: clamp(16px, 4vw, 24px);
|
|
||||||
text-align: center;
|
|
||||||
color: white;
|
|
||||||
box-shadow: 0 20px 40px rgba(30, 64, 175, 0.15);
|
|
||||||
padding: clamp(24px, 6vw, 40px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.founder-avatar {
|
|
||||||
margin-bottom: 1.25rem;
|
|
||||||
font-size: clamp(2.5rem, 8vw, 4rem);
|
|
||||||
margin-bottom: clamp(12px, 3vw, 20px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.founder-name {
|
|
||||||
font-weight: bold;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
font-size: clamp(1.3rem, 4vw, 1.8rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.founder-role {
|
|
||||||
opacity: 0.9;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
font-size: clamp(14px, 3.5vw, 18px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.founder-badges {
|
|
||||||
display: flex;
|
|
||||||
gap: clamp(8px, 2vw, 12px);
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.founder-badge {
|
|
||||||
background: rgba(255, 255, 255, 0.2);
|
|
||||||
border-radius: clamp(16px, 4vw, 20px);
|
|
||||||
font-weight: 600;
|
|
||||||
padding: clamp(6px, 2vw, 8px) clamp(12px, 3vw, 16px);
|
|
||||||
font-size: clamp(10px, 2.5vw, 12px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.founder-content {
|
|
||||||
order: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.founder-text {
|
|
||||||
color: var(--text-light);
|
|
||||||
line-height: 1.8;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
font-size: clamp(16px, 4vw, 19px);
|
|
||||||
margin-bottom: clamp(16px, 4vw, 24px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.founder-text:last-of-type {
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
margin-bottom: clamp(20px, 5vw, 32px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.founder-quote {
|
|
||||||
background: var(--services-gradient);
|
|
||||||
border-left: 4px solid var(--primary-blue);
|
|
||||||
border-radius: clamp(12px, 3vw, 16px);
|
|
||||||
padding: clamp(16px, 4vw, 24px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.founder-quote-text {
|
|
||||||
color: var(--primary-blue);
|
|
||||||
font-weight: 600;
|
|
||||||
font-style: italic;
|
|
||||||
font-size: clamp(14px, 3.5vw, 18px);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Contact Section */
|
|
||||||
.contact {
|
|
||||||
background: var(--contact-gradient);
|
|
||||||
padding: clamp(40px, 10vw, 80px) clamp(16px, 4vw, 24px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-container {
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-title {
|
|
||||||
font-weight: bold;
|
|
||||||
text-align: center;
|
|
||||||
color: var(--primary-blue);
|
|
||||||
font-size: clamp(1.8rem, 5vw, 2.5rem);
|
|
||||||
margin-bottom: clamp(24px, 6vw, 48px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
|
|
||||||
gap: clamp(30px, 8vw, 60px);
|
|
||||||
align-items: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-form {
|
|
||||||
background: white;
|
|
||||||
border-radius: clamp(16px, 4vw, 20px);
|
|
||||||
box-shadow: 0 8px 32px rgba(30, 64, 175, 0.08);
|
|
||||||
padding: clamp(24px, 6vw, 40px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-title {
|
|
||||||
font-weight: bold;
|
|
||||||
color: var(--primary-blue);
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
font-size: clamp(1.2rem, 4vw, 1.5rem);
|
|
||||||
margin-bottom: clamp(16px, 4vw, 24px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group {
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-label {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
color: var(--primary-blue);
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-input,
|
|
||||||
.form-textarea {
|
|
||||||
width: 100%;
|
|
||||||
border: 2px solid var(--border-light);
|
|
||||||
border-radius: clamp(8px, 2vw, 12px);
|
|
||||||
padding: clamp(12px, 3vw, 14px);
|
|
||||||
font-size: clamp(14px, 3.5vw, 16px);
|
|
||||||
transition: border-color 0.2s;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-input:focus,
|
|
||||||
.form-textarea:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: var(--light-blue);
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-textarea {
|
|
||||||
resize: vertical;
|
|
||||||
min-height: 120px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-submit {
|
|
||||||
width: 100%;
|
|
||||||
background: var(--primary-gradient);
|
|
||||||
color: white;
|
|
||||||
font-weight: 600;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
box-shadow: 0 4px 16px rgba(30, 64, 175, 0.20);
|
|
||||||
border-radius: clamp(8px, 2vw, 12px);
|
|
||||||
min-height: 48px;
|
|
||||||
padding: clamp(14px, 4vw, 16px);
|
|
||||||
font-size: clamp(14px, 3.5vw, 18px);
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-submit:hover {
|
|
||||||
transform: translateY(-1px);
|
|
||||||
box-shadow: 0 6px 16px rgba(30, 64, 175, 0.30);
|
|
||||||
background: var(--gradient-success);
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-submit:active {
|
|
||||||
transform: translateY(0px);
|
|
||||||
box-shadow: 0 4px 12px rgba(30, 64, 175, 0.25);
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-info {
|
|
||||||
background: white;
|
|
||||||
border-radius: clamp(16px, 4vw, 20px);
|
|
||||||
box-shadow: 0 8px 32px rgba(30, 64, 175, 0.08);
|
|
||||||
padding: clamp(24px, 6vw, 40px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-info-title {
|
|
||||||
font-weight: bold;
|
|
||||||
color: var(--primary-blue);
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
font-size: clamp(1.2rem, 4vw, 1.5rem);
|
|
||||||
margin-bottom: clamp(16px, 4vw, 24px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: clamp(12px, 3vw, 16px);
|
|
||||||
margin-bottom: clamp(20px, 5vw, 32px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-icon {
|
|
||||||
background: var(--primary-gradient);
|
|
||||||
border-radius: clamp(8px, 2vw, 12px);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
flex-shrink: 0;
|
|
||||||
width: clamp(40px, 10vw, 50px);
|
|
||||||
height: clamp(40px, 10vw, 50px);
|
|
||||||
font-size: clamp(16px, 4vw, 20px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-details h4 {
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--primary-blue);
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
font-size: clamp(16px, 4vw, 19px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-details p {
|
|
||||||
color: var(--text-light);
|
|
||||||
line-height: 1.6;
|
|
||||||
font-size: clamp(14px, 3.5vw, 16px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-email {
|
|
||||||
color: var(--primary-blue);
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.commitment-statement {
|
|
||||||
background: var(--services-gradient);
|
|
||||||
border-left: 4px solid var(--primary-blue);
|
|
||||||
border-radius: clamp(12px, 3vw, 16px);
|
|
||||||
padding: clamp(16px, 4vw, 24px);
|
|
||||||
margin-top: clamp(20px, 5vw, 32px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.commitment-text {
|
|
||||||
color: var(--primary-blue);
|
|
||||||
font-weight: 600;
|
|
||||||
text-align: center;
|
|
||||||
font-size: clamp(14px, 3.5vw, 18px);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Mobile responsive adjustments */
|
|
||||||
@media (max-width: 767px) {
|
|
||||||
.founder-card-container {
|
|
||||||
order: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.founder-content {
|
|
||||||
order: 2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,498 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>{{ brand_name }} - Digital Presence Analysis</title>
|
|
||||||
<style>
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
||||||
min-height: 100vh;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard {
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 0 auto;
|
|
||||||
background: white;
|
|
||||||
border-radius: 20px;
|
|
||||||
box-shadow: 0 20px 60px rgba(0,0,0,0.1);
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
|
||||||
background: linear-gradient(135deg, #2D3748 0%, #1A202C 100%);
|
|
||||||
color: white;
|
|
||||||
padding: 40px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.brand-title {
|
|
||||||
font-size: 2.5rem;
|
|
||||||
font-weight: 700;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle {
|
|
||||||
opacity: 0.9;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.score-container {
|
|
||||||
background: rgba(255,255,255,0.1);
|
|
||||||
border-radius: 15px;
|
|
||||||
padding: 30px;
|
|
||||||
display: inline-block;
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.score-grade {
|
|
||||||
font-size: 4rem;
|
|
||||||
font-weight: 900;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
background: linear-gradient(45deg, #48BB78, #38A169);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.score-number {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
padding: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.metrics-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
||||||
gap: 20px;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.metric-card {
|
|
||||||
background: #F7FAFC;
|
|
||||||
border-radius: 15px;
|
|
||||||
padding: 30px;
|
|
||||||
text-align: center;
|
|
||||||
border: 2px solid transparent;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.metric-card:hover {
|
|
||||||
transform: translateY(-5px);
|
|
||||||
border-color: #667eea;
|
|
||||||
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.metric-number {
|
|
||||||
font-size: 2.5rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #2D3748;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.metric-label {
|
|
||||||
color: #718096;
|
|
||||||
font-weight: 500;
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-title {
|
|
||||||
font-size: 1.8rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #2D3748;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.platforms-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|
||||||
gap: 20px;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.platform-card {
|
|
||||||
background: white;
|
|
||||||
border-radius: 15px;
|
|
||||||
padding: 25px;
|
|
||||||
border: 2px solid #E2E8F0;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.platform-card.found {
|
|
||||||
border-color: #48BB78;
|
|
||||||
background: linear-gradient(135deg, #F0FFF4 0%, #C6F6D5 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.platform-card.missing {
|
|
||||||
border-color: #F56565;
|
|
||||||
background: linear-gradient(135deg, #FFF5F5 0%, #FED7D7 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.platform-card:hover {
|
|
||||||
transform: translateY(-3px);
|
|
||||||
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.platform-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.platform-name {
|
|
||||||
font-size: 1.3rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #2D3748;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.platform-icon {
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-badge {
|
|
||||||
padding: 6px 12px;
|
|
||||||
border-radius: 20px;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
font-weight: 600;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-found {
|
|
||||||
background: #48BB78;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-missing {
|
|
||||||
background: #F56565;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-verified {
|
|
||||||
background: #3182CE;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.platform-metrics {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
gap: 15px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.platform-metric {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.platform-metric-number {
|
|
||||||
font-size: 1.4rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #2D3748;
|
|
||||||
}
|
|
||||||
|
|
||||||
.platform-metric-label {
|
|
||||||
font-size: 0.8rem;
|
|
||||||
color: #718096;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.platform-url {
|
|
||||||
margin-top: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.platform-url a {
|
|
||||||
display: inline-block;
|
|
||||||
background: #667eea;
|
|
||||||
color: white;
|
|
||||||
padding: 10px 20px;
|
|
||||||
border-radius: 25px;
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: 500;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.platform-url a:hover {
|
|
||||||
background: #5A67D8;
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.recommendations {
|
|
||||||
background: linear-gradient(135deg, #EBF8FF 0%, #BEE3F8 100%);
|
|
||||||
border-radius: 15px;
|
|
||||||
padding: 30px;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recommendation {
|
|
||||||
background: white;
|
|
||||||
border-radius: 10px;
|
|
||||||
padding: 20px;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
border-left: 5px solid #3182CE;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recommendation:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recommendation-title {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #2D3748;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recommendation-text {
|
|
||||||
color: #4A5568;
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.priority-high {
|
|
||||||
border-left-color: #F56565;
|
|
||||||
}
|
|
||||||
|
|
||||||
.priority-medium {
|
|
||||||
border-left-color: #ED8936;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
background: #F7FAFC;
|
|
||||||
padding: 30px 40px;
|
|
||||||
text-align: center;
|
|
||||||
border-top: 1px solid #E2E8F0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-text {
|
|
||||||
color: #718096;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.powered-by {
|
|
||||||
margin-top: 15px;
|
|
||||||
padding-top: 15px;
|
|
||||||
border-top: 1px solid #E2E8F0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.powered-by strong {
|
|
||||||
color: #667eea;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.dashboard {
|
|
||||||
margin: 0;
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.brand-title {
|
|
||||||
font-size: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.score-grade {
|
|
||||||
font-size: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.platforms-grid {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Progress Bars */
|
|
||||||
.progress-bar {
|
|
||||||
background: #E2E8F0;
|
|
||||||
border-radius: 10px;
|
|
||||||
height: 8px;
|
|
||||||
overflow: hidden;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-fill {
|
|
||||||
height: 100%;
|
|
||||||
background: linear-gradient(90deg, #48BB78 0%, #38A169 100%);
|
|
||||||
border-radius: 10px;
|
|
||||||
transition: width 0.8s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Animations */
|
|
||||||
@keyframes slideInUp {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(30px);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.platform-card {
|
|
||||||
animation: slideInUp 0.6s ease forwards;
|
|
||||||
}
|
|
||||||
|
|
||||||
.platform-card:nth-child(1) { animation-delay: 0.1s; }
|
|
||||||
.platform-card:nth-child(2) { animation-delay: 0.2s; }
|
|
||||||
.platform-card:nth-child(3) { animation-delay: 0.3s; }
|
|
||||||
.platform-card:nth-child(4) { animation-delay: 0.4s; }
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="dashboard">
|
|
||||||
<!-- Header with Brand Info and Score -->
|
|
||||||
<div class="header">
|
|
||||||
<h1 class="brand-title">{{ brand_name }}</h1>
|
|
||||||
<p class="subtitle">Digital Presence Analysis • {{ analysis_date }}</p>
|
|
||||||
|
|
||||||
<div class="score-container">
|
|
||||||
<div class="score-grade">{{ digital_presence_score }}</div>
|
|
||||||
<div class="score-number">{{ final_score }}/100</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content">
|
|
||||||
<!-- Key Metrics Grid -->
|
|
||||||
<div class="metrics-grid">
|
|
||||||
<div class="metric-card">
|
|
||||||
<div class="metric-number">{{ platforms_found }}/{{ total_platforms }}</div>
|
|
||||||
<div class="metric-label">Platforms Found</div>
|
|
||||||
<div class="progress-bar">
|
|
||||||
<div class="progress-fill" style="width: {{ completion_percentage }}%"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="metric-card">
|
|
||||||
<div class="metric-number">{{ total_followers_formatted }}</div>
|
|
||||||
<div class="metric-label">Total Followers</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="metric-card">
|
|
||||||
<div class="metric-number">{{ average_engagement|title }}</div>
|
|
||||||
<div class="metric-label">Avg Engagement</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="metric-card">
|
|
||||||
<div class="metric-number">{{ verified_accounts }}</div>
|
|
||||||
<div class="metric-label">Verified Accounts</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Platform Analysis -->
|
|
||||||
<h2 class="section-title">
|
|
||||||
🌐 Platform Analysis
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<div class="platforms-grid">
|
|
||||||
{% for platform in platforms %}
|
|
||||||
<div class="platform-card {% if platform.found %}found{% else %}missing{% endif %}">
|
|
||||||
<div class="platform-header">
|
|
||||||
<div class="platform-name">
|
|
||||||
<img src="data:image/svg+xml,{{ platform.icon }}" alt="{{ platform.name }}" class="platform-icon">
|
|
||||||
{{ platform.name }}
|
|
||||||
</div>
|
|
||||||
<span class="status-badge {% if platform.found %}status-found{% if platform.verified %}status-verified{% endif %}{% else %}status-missing{% endif %}">
|
|
||||||
{% if platform.found %}
|
|
||||||
{% if platform.verified %}Verified{% else %}Found{% endif %}
|
|
||||||
{% else %}Missing{% endif %}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{% if platform.found %}
|
|
||||||
<div class="platform-metrics">
|
|
||||||
<div class="platform-metric">
|
|
||||||
<div class="platform-metric-number">{{ platform.followers_formatted|default:"N/A" }}</div>
|
|
||||||
<div class="platform-metric-label">Followers</div>
|
|
||||||
</div>
|
|
||||||
<div class="platform-metric">
|
|
||||||
<div class="platform-metric-number">{{ platform.engagement_level|title|default:"N/A" }}</div>
|
|
||||||
<div class="platform-metric-label">Engagement</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{% if platform.profile_url %}
|
|
||||||
<div class="platform-url">
|
|
||||||
<a href="{{ platform.profile_url }}" target="_blank" rel="noopener">Visit Profile</a>
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<p style="margin-top: 15px; color: #4A5568; font-size: 0.9rem;">{{ platform.notes }}</p>
|
|
||||||
{% else %}
|
|
||||||
<p style="color: #4A5568; font-size: 0.9rem; margin-bottom: 15px;">{{ platform.notes }}</p>
|
|
||||||
<p style="color: #718096; font-size: 0.8rem; font-style: italic;">Opportunity to establish presence and reach new audiences.</p>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Recommendations -->
|
|
||||||
{% if recommendations %}
|
|
||||||
<h2 class="section-title">
|
|
||||||
💡 Recommendations
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<div class="recommendations">
|
|
||||||
{% for rec in recommendations %}
|
|
||||||
<div class="recommendation priority-{{ rec.priority }}">
|
|
||||||
<div class="recommendation-title">{{ rec.platform }}</div>
|
|
||||||
<div class="recommendation-text">{{ rec.reason }}</div>
|
|
||||||
<div style="margin-top: 10px; font-size: 0.8rem; color: #718096;">
|
|
||||||
<strong>Setup Time:</strong> {{ rec.estimated_setup_time }} •
|
|
||||||
<strong>Potential:</strong> {{ rec.potential_reach }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<div class="footer">
|
|
||||||
<div class="footer-text">
|
|
||||||
Analysis completed in {{ processing_time }} using {{ analysis_method }}
|
|
||||||
</div>
|
|
||||||
<div class="powered-by">
|
|
||||||
<strong>Powered by Quantum Tasks AI</strong> • Brand Digital Presence Finder Pro v{{ analyzer_version }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// Add smooth animations on page load
|
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
|
||||||
// Animate progress bars
|
|
||||||
const progressBars = document.querySelectorAll('.progress-fill');
|
|
||||||
progressBars.forEach(bar => {
|
|
||||||
const width = bar.style.width;
|
|
||||||
bar.style.width = '0%';
|
|
||||||
setTimeout(() => {
|
|
||||||
bar.style.width = width;
|
|
||||||
}, 500);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,523 +0,0 @@
|
|||||||
{% extends 'base.html' %}
|
|
||||||
{% load static %}
|
|
||||||
|
|
||||||
{% block title %}AI Digital Branding Services - Quantum Tasks AI{% endblock %}
|
|
||||||
|
|
||||||
{% block extra_css %}
|
|
||||||
<link rel="stylesheet" href="{% static 'css/digital-branding.css' %}">
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block content %}
|
|
||||||
<style>
|
|
||||||
/* Override main-container for full-width sections */
|
|
||||||
.main-container {
|
|
||||||
max-width: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<!-- Hero Section -->
|
|
||||||
<section id="digital-branding-hero" class="digital-branding-hero">
|
|
||||||
<div class="hero-container">
|
|
||||||
<!-- Trust Badge -->
|
|
||||||
<div class="trust-badge">
|
|
||||||
<span class="trust-badge-emoji">✨</span>
|
|
||||||
<span>Trusted Digital Brand Partner</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="hero-title">
|
|
||||||
<span class="hero-title-gradient">
|
|
||||||
AI-Powered Digital Branding
|
|
||||||
</span>
|
|
||||||
<br />
|
|
||||||
<span class="hero-title-normal">
|
|
||||||
Intelligence
|
|
||||||
</span>
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p class="hero-description">
|
|
||||||
Elevate Your Brand with Intelligent Digital Strategies. Combine proven marketing expertise with AI automation to accelerate growth, optimize performance, and deliver measurable results that matter.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<!-- CTA Buttons -->
|
|
||||||
<div class="hero-buttons">
|
|
||||||
{% if user.is_authenticated %}
|
|
||||||
<a href="https://form.jotform.com/252121444918050" target="_blank" class="btn-primary">
|
|
||||||
Start Discovery
|
|
||||||
</a>
|
|
||||||
<a href="#our-process" class="btn-secondary">
|
|
||||||
View Process
|
|
||||||
</a>
|
|
||||||
{% else %}
|
|
||||||
<a href="https://form.jotform.com/252121444918050" target="_blank" class="btn-primary">
|
|
||||||
Get Started
|
|
||||||
</a>
|
|
||||||
<a href="#our-process" class="btn-secondary">
|
|
||||||
Learn More
|
|
||||||
</a>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Trust Indicators -->
|
|
||||||
<div class="trust-indicators">
|
|
||||||
<div class="trust-card">
|
|
||||||
<div class="trust-number">
|
|
||||||
250%
|
|
||||||
</div>
|
|
||||||
<div class="trust-text">
|
|
||||||
Average ROI Increase
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="trust-card">
|
|
||||||
<div class="trust-number">
|
|
||||||
3x
|
|
||||||
</div>
|
|
||||||
<div class="trust-text">
|
|
||||||
Faster Content Creation
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="trust-card">
|
|
||||||
<div class="trust-number">
|
|
||||||
24/7
|
|
||||||
</div>
|
|
||||||
<div class="trust-text">
|
|
||||||
Performance Monitoring
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Why Choose Us Section -->
|
|
||||||
<section id="why-choose-us" class="why-choose-us">
|
|
||||||
<div class="section-container">
|
|
||||||
<!-- Section Header -->
|
|
||||||
<div class="section-header">
|
|
||||||
<div class="section-badge">
|
|
||||||
<span class="section-badge-icon">🎯</span>
|
|
||||||
<span class="section-badge-text">Why Choose Us</span>
|
|
||||||
</div>
|
|
||||||
<h2 class="section-title">
|
|
||||||
Intelligent Digital Excellence
|
|
||||||
</h2>
|
|
||||||
<p class="section-subtitle">
|
|
||||||
Combine proven digital strategies with smart automation and data insights to accelerate your brand's growth and market impact
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="why-choose-grid">
|
|
||||||
<div class="choice-card">
|
|
||||||
<div class="choice-icon">🤖</div>
|
|
||||||
<h3 class="choice-title">Data-Driven Brand Intelligence</h3>
|
|
||||||
<p class="choice-description">
|
|
||||||
Advanced analytics and automation for real-time audience insights, trend forecasting, and competitive intelligence. Our smart systems continuously optimize your strategy based on performance data.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="choice-card">
|
|
||||||
<div class="choice-icon">🌐</div>
|
|
||||||
<h3 class="choice-title">Comprehensive Digital Automation</h3>
|
|
||||||
<p class="choice-description">
|
|
||||||
End-to-end digital presence management with smart automation, content optimization, intelligent scheduling, SEO enhancement, and reputation management for maximum efficiency and impact.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="choice-card">
|
|
||||||
<div class="choice-icon">⚡</div>
|
|
||||||
<h3 class="choice-title">Smart Personalization & Optimization</h3>
|
|
||||||
<p class="choice-description">
|
|
||||||
Intelligent systems that learn your brand identity, automatically adapt strategies for your market, and continuously optimize campaigns based on performance data and market insights.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Our Process Section -->
|
|
||||||
<section id="our-process" class="our-process">
|
|
||||||
<div class="section-container">
|
|
||||||
<div class="section-header">
|
|
||||||
<div class="section-badge">
|
|
||||||
<span class="section-badge-icon">📋</span>
|
|
||||||
<span class="section-badge-text">Our Process</span>
|
|
||||||
</div>
|
|
||||||
<h2 class="section-title">
|
|
||||||
AI-Enhanced SOSTAC+RACE Framework
|
|
||||||
</h2>
|
|
||||||
<p class="section-subtitle">
|
|
||||||
Our proven methodology supercharged with artificial intelligence, machine learning insights, and automated optimization at every stage
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="process-grid">
|
|
||||||
<div class="process-step-card">
|
|
||||||
<div class="step-number">1</div>
|
|
||||||
<div class="step-content">
|
|
||||||
<h3 class="step-title">AI-Powered Situation Analysis</h3>
|
|
||||||
<p class="step-description">
|
|
||||||
Deploy machine learning algorithms to analyze your brand's digital DNA, competitive intelligence automation, and predictive market positioning with real-time data insights.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="process-step-card">
|
|
||||||
<div class="step-number">2</div>
|
|
||||||
<div class="step-content">
|
|
||||||
<h3 class="step-title">AI-Optimized Objectives</h3>
|
|
||||||
<p class="step-description">
|
|
||||||
Generate data-driven SMART goals using predictive analytics, automated KPI tracking, and AI-powered performance forecasting with continuous goal optimization.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="process-step-card">
|
|
||||||
<div class="step-number">3</div>
|
|
||||||
<div class="step-content">
|
|
||||||
<h3 class="step-title">Intelligent Strategy Design</h3>
|
|
||||||
<p class="step-description">
|
|
||||||
AI-driven customer journey mapping, automated audience segmentation, dynamic value proposition testing, and intelligent channel selection with performance optimization.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="process-step-card">
|
|
||||||
<div class="step-number">4</div>
|
|
||||||
<div class="step-content">
|
|
||||||
<h3 class="step-title">AI-Automated Tactics (RACE Framework)</h3>
|
|
||||||
<p class="step-description">
|
|
||||||
Deploy intelligent automation for Reach (AI-powered visibility), Act (automated engagement), Convert (smart sales funnels), and Engage (AI-driven loyalty programs).
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="process-step-card">
|
|
||||||
<div class="step-number">5</div>
|
|
||||||
<div class="step-content">
|
|
||||||
<h3 class="step-title">Automated Action Execution</h3>
|
|
||||||
<p class="step-description">
|
|
||||||
AI-powered task automation, intelligent timeline management, and automated brand asset generation with smart content creation and deployment systems.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="process-step-card">
|
|
||||||
<div class="step-number">6</div>
|
|
||||||
<div class="step-content">
|
|
||||||
<h3 class="step-title">Intelligent Control & Optimization</h3>
|
|
||||||
<p class="step-description">
|
|
||||||
Real-time AI monitoring, predictive KPI analysis, automated strategy refinement, and continuous machine learning optimization with performance forecasting.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- RACE Framework Details -->
|
|
||||||
<div class="race-framework">
|
|
||||||
<h3 class="race-title">RACE Framework Breakdown</h3>
|
|
||||||
<div class="race-grid">
|
|
||||||
<div class="race-card">
|
|
||||||
<div class="race-phase">
|
|
||||||
<span class="race-icon">📢</span>
|
|
||||||
<h4>Reach</h4>
|
|
||||||
</div>
|
|
||||||
<div class="race-focus">AI-Powered Visibility</div>
|
|
||||||
<div class="race-actions">Automated LLM optimization, AI-driven SEO, smart ad targeting, AI influencer matching, automated PR distribution</div>
|
|
||||||
</div>
|
|
||||||
<div class="race-card">
|
|
||||||
<div class="race-phase">
|
|
||||||
<span class="race-icon">💬</span>
|
|
||||||
<h4>Act</h4>
|
|
||||||
</div>
|
|
||||||
<div class="race-focus">Intelligent Engagement</div>
|
|
||||||
<div class="race-actions">AI content generation, dynamic landing pages, chatbot interactions, automated social responses</div>
|
|
||||||
</div>
|
|
||||||
<div class="race-card">
|
|
||||||
<div class="race-phase">
|
|
||||||
<span class="race-icon">🎯</span>
|
|
||||||
<h4>Convert</h4>
|
|
||||||
</div>
|
|
||||||
<div class="race-focus">Smart Conversions</div>
|
|
||||||
<div class="race-actions">AI-optimized CTAs, predictive retargeting, automated lead scoring, intelligent funnel optimization</div>
|
|
||||||
</div>
|
|
||||||
<div class="race-card">
|
|
||||||
<div class="race-phase">
|
|
||||||
<span class="race-icon">❤️</span>
|
|
||||||
<h4>Engage</h4>
|
|
||||||
</div>
|
|
||||||
<div class="race-focus">AI-Driven Loyalty</div>
|
|
||||||
<div class="race-actions">Automated email personalization, AI community management, predictive advocacy, smart retention campaigns</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Services Section -->
|
|
||||||
<section id="services" class="branding-services">
|
|
||||||
<div class="section-container">
|
|
||||||
<h2 class="services-title">
|
|
||||||
AI-Powered Service Portfolio
|
|
||||||
</h2>
|
|
||||||
<p class="services-subtitle">
|
|
||||||
Advanced artificial intelligence solutions that automate, optimize, and accelerate your digital brand transformation
|
|
||||||
</p>
|
|
||||||
<div class="branding-services-grid">
|
|
||||||
<div class="service-card">
|
|
||||||
<div class="service-icon">🎨</div>
|
|
||||||
<h3 class="service-title">Brand Discovery & Smart Identity Design</h3>
|
|
||||||
<p class="service-description">
|
|
||||||
Complete brand audit enhanced with AI insights, strategic identity creation, and adaptive design systems that evolve with market trends and audience data.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="service-card">
|
|
||||||
<div class="service-icon">📱</div>
|
|
||||||
<h3 class="service-title">Strategic Platform Management & Automation</h3>
|
|
||||||
<p class="service-description">
|
|
||||||
Smart platform selection and optimization, automated content distribution, intelligent scheduling, and performance optimization across social media, websites, and digital touchpoints.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="service-card">
|
|
||||||
<div class="service-icon">🔍</div>
|
|
||||||
<h3 class="service-title">Advanced Content & Marketing Automation</h3>
|
|
||||||
<p class="service-description">
|
|
||||||
AI-enhanced content creation, automated SEO optimization, intelligent ad targeting and social media management with real-time performance adjustments for maximum impact.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="service-card">
|
|
||||||
<div class="service-icon">📢</div>
|
|
||||||
<h3 class="service-title">Influencer Partnerships & Digital PR</h3>
|
|
||||||
<p class="service-description">
|
|
||||||
Strategic influencer discovery and matching, automated PR campaign management, smart media outreach, and comprehensive relationship management for maximum brand amplification.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="service-card">
|
|
||||||
<div class="service-icon">🎯</div>
|
|
||||||
<h3 class="service-title">Brand Consistency & Messaging Systems</h3>
|
|
||||||
<p class="service-description">
|
|
||||||
Unified brand guidelines with automated enforcement, intelligent messaging frameworks, smart visual asset management, and consistent brand voice across all platforms.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="service-card">
|
|
||||||
<div class="service-icon">📊</div>
|
|
||||||
<h3 class="service-title">Predictive AI Analytics & Automated Insights</h3>
|
|
||||||
<p class="service-description">
|
|
||||||
Real-time predictive analytics, automated performance optimization, AI-generated insights and recommendations, with intelligent forecasting and proactive strategy adjustments.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- CTA Section -->
|
|
||||||
<section id="discovery-form" class="branding-cta">
|
|
||||||
<div class="cta-container">
|
|
||||||
<h2 class="cta-title">
|
|
||||||
Accelerate Your Digital Brand Growth
|
|
||||||
</h2>
|
|
||||||
<div class="cta-grid">
|
|
||||||
<!-- CTA Content -->
|
|
||||||
<div class="cta-content">
|
|
||||||
<h3 class="cta-content-title">Ready to transform your digital brand presence?</h3>
|
|
||||||
<p class="cta-description">
|
|
||||||
Complete our Digital Brand Strategy Assessment and receive a customized growth roadmap with smart automation recommendations within 24 hours.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<!-- Features List -->
|
|
||||||
<div class="cta-features">
|
|
||||||
<div class="cta-feature">
|
|
||||||
<span class="feature-icon">✓</span>
|
|
||||||
<span>Free comprehensive brand analysis</span>
|
|
||||||
</div>
|
|
||||||
<div class="cta-feature">
|
|
||||||
<span class="feature-icon">✓</span>
|
|
||||||
<span>Personalized growth automation roadmap</span>
|
|
||||||
</div>
|
|
||||||
<div class="cta-feature">
|
|
||||||
<span class="feature-icon">✓</span>
|
|
||||||
<span>Custom strategy proposal in 24 hours</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- CTA Buttons -->
|
|
||||||
<div class="cta-buttons">
|
|
||||||
<!-- <a href="https://form.jotform.com/252121444918050" target="_blank" class="cta-btn primary">
|
|
||||||
🚀 Get Discovery Questionnaire
|
|
||||||
</a> -->
|
|
||||||
<a href="https://form.jotform.com/252121444918050" target="_blank" class="cta-btn secondary">
|
|
||||||
💬 Contact Us Directly
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Contact Information -->
|
|
||||||
<div class="cta-info">
|
|
||||||
<h3 class="cta-info-title">Get in Touch</h3>
|
|
||||||
|
|
||||||
<!-- Contact Item -->
|
|
||||||
<div class="contact-item">
|
|
||||||
<div class="contact-icon">
|
|
||||||
✉️
|
|
||||||
</div>
|
|
||||||
<div class="contact-details">
|
|
||||||
<h4>Email Address</h4>
|
|
||||||
<p>
|
|
||||||
<a href="mailto:abhay@quantumtaskai.com" class="contact-email">
|
|
||||||
abhay@quantumtaskai.com
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Commitment Statement -->
|
|
||||||
<div class="commitment-statement">
|
|
||||||
<p class="commitment-text">
|
|
||||||
Leading the AI Revolution in Digital Branding - Where Artificial Intelligence Meets Brand Excellence for Unprecedented Growth and Automation.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block extra_js %}
|
|
||||||
<script>
|
|
||||||
class DigitalBrandingManager {
|
|
||||||
constructor() {
|
|
||||||
this.processCards = document.querySelectorAll('.process-step-card');
|
|
||||||
this.raceCards = document.querySelectorAll('.race-card');
|
|
||||||
this.serviceCards = document.querySelectorAll('.service-card');
|
|
||||||
this.ctaButtons = document.querySelectorAll('.cta-btn');
|
|
||||||
|
|
||||||
this.init();
|
|
||||||
}
|
|
||||||
|
|
||||||
init() {
|
|
||||||
this.setupCardInteractions();
|
|
||||||
this.setupButtonHovers();
|
|
||||||
this.addScrollAnimations();
|
|
||||||
this.setupSmoothScrolling();
|
|
||||||
}
|
|
||||||
|
|
||||||
setupCardInteractions() {
|
|
||||||
// Process step cards
|
|
||||||
this.processCards.forEach(card => {
|
|
||||||
card.addEventListener('mouseenter', () => {
|
|
||||||
this.highlightCard(card);
|
|
||||||
});
|
|
||||||
|
|
||||||
card.addEventListener('mouseleave', () => {
|
|
||||||
this.removeHighlight(card);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// RACE framework cards
|
|
||||||
this.raceCards.forEach(card => {
|
|
||||||
card.addEventListener('mouseenter', () => {
|
|
||||||
this.highlightCard(card);
|
|
||||||
});
|
|
||||||
|
|
||||||
card.addEventListener('mouseleave', () => {
|
|
||||||
this.removeHighlight(card);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Service cards
|
|
||||||
this.serviceCards.forEach(card => {
|
|
||||||
card.addEventListener('mouseenter', () => {
|
|
||||||
this.highlightCard(card);
|
|
||||||
});
|
|
||||||
|
|
||||||
card.addEventListener('mouseleave', () => {
|
|
||||||
this.removeHighlight(card);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
highlightCard(card) {
|
|
||||||
card.style.transform = 'translateY(-4px)';
|
|
||||||
card.style.boxShadow = '0 20px 40px rgba(30, 64, 175, 0.15)';
|
|
||||||
}
|
|
||||||
|
|
||||||
removeHighlight(card) {
|
|
||||||
card.style.transform = 'translateY(0)';
|
|
||||||
card.style.boxShadow = '';
|
|
||||||
}
|
|
||||||
|
|
||||||
setupButtonHovers() {
|
|
||||||
this.ctaButtons.forEach(button => {
|
|
||||||
button.addEventListener('mouseenter', () => {
|
|
||||||
button.style.transform = 'translateY(-2px)';
|
|
||||||
});
|
|
||||||
|
|
||||||
button.addEventListener('mouseleave', () => {
|
|
||||||
button.style.transform = '';
|
|
||||||
});
|
|
||||||
|
|
||||||
button.addEventListener('click', () => {
|
|
||||||
if (!button.classList.contains('loading')) {
|
|
||||||
button.classList.add('loading');
|
|
||||||
const originalText = button.textContent;
|
|
||||||
button.textContent = '⏳ Loading...';
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
if (button.classList.contains('loading')) {
|
|
||||||
button.classList.remove('loading');
|
|
||||||
button.textContent = originalText;
|
|
||||||
}
|
|
||||||
}, 2000);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
addScrollAnimations() {
|
|
||||||
if ('IntersectionObserver' in window) {
|
|
||||||
const observerOptions = {
|
|
||||||
threshold: 0.1,
|
|
||||||
rootMargin: '0px 0px -50px 0px'
|
|
||||||
};
|
|
||||||
|
|
||||||
const observer = new IntersectionObserver((entries) => {
|
|
||||||
entries.forEach(entry => {
|
|
||||||
if (entry.isIntersecting) {
|
|
||||||
entry.target.style.opacity = '1';
|
|
||||||
entry.target.style.transform = 'translateY(0)';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}, observerOptions);
|
|
||||||
|
|
||||||
// Observe cards for scroll animations
|
|
||||||
[...this.processCards, ...this.raceCards, ...this.serviceCards].forEach((card, index) => {
|
|
||||||
card.style.opacity = '0';
|
|
||||||
card.style.transform = 'translateY(20px)';
|
|
||||||
card.style.transition = `opacity 0.6s ease ${index * 0.1}s, transform 0.6s ease ${index * 0.1}s`;
|
|
||||||
observer.observe(card);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Observe sections
|
|
||||||
document.querySelectorAll('.section-header, .cta-content').forEach(section => {
|
|
||||||
section.style.opacity = '0';
|
|
||||||
section.style.transform = 'translateY(20px)';
|
|
||||||
section.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
|
|
||||||
observer.observe(section);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
setupSmoothScrolling() {
|
|
||||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
||||||
anchor.addEventListener('click', function (e) {
|
|
||||||
e.preventDefault();
|
|
||||||
const target = document.querySelector(this.getAttribute('href'));
|
|
||||||
if (target) {
|
|
||||||
target.scrollIntoView({
|
|
||||||
behavior: 'smooth',
|
|
||||||
block: 'start'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initialize when DOM is loaded
|
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
|
||||||
new DigitalBrandingManager();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
{% endblock %}
|
|
||||||
@ -1,751 +0,0 @@
|
|||||||
{% extends 'base.html' %}
|
|
||||||
{% load static %}
|
|
||||||
|
|
||||||
{% block title %}Quantum Tasks AI - AI & Task Automation Solutions{% endblock %}
|
|
||||||
|
|
||||||
{% block extra_css %}
|
|
||||||
<link rel="stylesheet" href="{% static 'css/homepage.css' %}">
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block content %}
|
|
||||||
<style>
|
|
||||||
/* Override main-container for homepage full-width sections */
|
|
||||||
.main-container {
|
|
||||||
max-width: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<!-- Hero Section -->
|
|
||||||
<section id="home" class="hero">
|
|
||||||
<div class="hero-container">
|
|
||||||
<!-- Trust Badge -->
|
|
||||||
<div class="trust-badge">
|
|
||||||
<span class="trust-badge-emoji">✨</span>
|
|
||||||
<span>Trusted by Industry Leaders</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="hero-title">
|
|
||||||
<span class="hero-title-gradient">
|
|
||||||
AI & Cybersecurity
|
|
||||||
</span>
|
|
||||||
<br />
|
|
||||||
<span class="hero-title-normal">
|
|
||||||
Solutions
|
|
||||||
</span>
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p class="hero-description">
|
|
||||||
Secure your digital future with state-of-the-art AI solutions and expert cybersecurity strategies tailored for your business needs.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<!-- CTA Buttons -->
|
|
||||||
<div class="hero-buttons">
|
|
||||||
{% if user.is_authenticated %}
|
|
||||||
<a href="{% url 'agents:marketplace' %}" class="btn-primary">
|
|
||||||
Explore AI Hub
|
|
||||||
</a>
|
|
||||||
<a href="{% url 'wallet:wallet' %}" class="btn-secondary">
|
|
||||||
Manage Wallet
|
|
||||||
</a>
|
|
||||||
{% else %}
|
|
||||||
<a href="{% url 'authentication:register' %}" class="btn-primary">
|
|
||||||
Get Protected Now
|
|
||||||
</a>
|
|
||||||
<a href="{% url 'agents:marketplace' %}" class="btn-secondary">
|
|
||||||
Explore AI Hub
|
|
||||||
</a>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Trust Indicators -->
|
|
||||||
<div class="trust-indicators">
|
|
||||||
<div class="trust-card">
|
|
||||||
<div class="trust-number">
|
|
||||||
35+
|
|
||||||
</div>
|
|
||||||
<div class="trust-text">
|
|
||||||
Years Experience
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="trust-card">
|
|
||||||
<div class="trust-number">
|
|
||||||
24/7
|
|
||||||
</div>
|
|
||||||
<div class="trust-text">
|
|
||||||
Rapid Response
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="trust-card">
|
|
||||||
<div class="trust-number">
|
|
||||||
100%
|
|
||||||
</div>
|
|
||||||
<div class="trust-text">
|
|
||||||
Secure Solutions
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Company Profile Section -->
|
|
||||||
<section id="about" class="company-profile">
|
|
||||||
<div class="company-container">
|
|
||||||
<!-- Section Header -->
|
|
||||||
<div class="section-header">
|
|
||||||
<div class="section-badge">
|
|
||||||
<span class="section-badge-icon">🏢</span>
|
|
||||||
<span class="section-badge-text">About Quantum Tasks AI</span>
|
|
||||||
</div>
|
|
||||||
<h2 class="section-title">
|
|
||||||
Your Trusted Digital Guardian
|
|
||||||
</h2>
|
|
||||||
<p class="section-subtitle">
|
|
||||||
Pioneering the future of Automation & Cybersecurity with AI-powered solutions
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="company-grid">
|
|
||||||
<!-- Content Side -->
|
|
||||||
<div>
|
|
||||||
<div class="company-content-card">
|
|
||||||
<!-- Decorative corner -->
|
|
||||||
<div class="decorative-corner">
|
|
||||||
🛡️
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h3 class="company-content-title">
|
|
||||||
Defending Digital Frontiers
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
<p class="company-content-text">
|
|
||||||
At Quantum Tasks AI, we provide <strong>state-of-the-art AI & Cybersecurity solutions</strong> tailored to safeguard your business. From advanced AI Agents to robust defense strategies, we empower you to navigate the digital world with confidence.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<!-- Enhanced badges -->
|
|
||||||
<div class="company-badges">
|
|
||||||
<div class="company-badge company-badge-primary">
|
|
||||||
<div class="company-badge-icon">📅</div>
|
|
||||||
35+ Years Experience
|
|
||||||
</div>
|
|
||||||
<div class="company-badge company-badge-purple">
|
|
||||||
<div class="company-badge-icon">🏆</div>
|
|
||||||
Top Certifications
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="company-badge company-badge-orange">
|
|
||||||
<div class="company-badge-icon">⚫</div>
|
|
||||||
Lean Six Sigma Black Belt
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Visual Side -->
|
|
||||||
<div class="company-visual">
|
|
||||||
<!-- Main visual container -->
|
|
||||||
<div class="main-visual">
|
|
||||||
<!-- Main icon -->
|
|
||||||
<div class="main-visual-icon">
|
|
||||||
🛡️
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Floating elements around the main visual -->
|
|
||||||
<div class="floating-element floating-element-1">
|
|
||||||
🔒
|
|
||||||
</div>
|
|
||||||
<div class="floating-element floating-element-2">
|
|
||||||
🤖
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Bottom achievement strip -->
|
|
||||||
<div class="achievement-strip">
|
|
||||||
<div class="achievement-item">
|
|
||||||
<div class="achievement-icon">🎯</div>
|
|
||||||
<div class="achievement-title">Mission Critical</div>
|
|
||||||
<div class="achievement-text">Zero Compromise</div>
|
|
||||||
</div>
|
|
||||||
<div class="achievement-item">
|
|
||||||
<div class="achievement-icon">⚡</div>
|
|
||||||
<div class="achievement-title">Rapid Response</div>
|
|
||||||
<div class="achievement-text">24/7 Protection</div>
|
|
||||||
</div>
|
|
||||||
<div class="achievement-item">
|
|
||||||
<div class="achievement-icon">🔬</div>
|
|
||||||
<div class="achievement-title">Innovation</div>
|
|
||||||
<div class="achievement-text">Cutting Edge Tech</div>
|
|
||||||
</div>
|
|
||||||
<div class="achievement-item">
|
|
||||||
<div class="achievement-icon">🤝</div>
|
|
||||||
<div class="achievement-title">Trusted Partner</div>
|
|
||||||
<div class="achievement-text">Industry Leaders</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Services Section -->
|
|
||||||
<section id="services" class="services">
|
|
||||||
<div class="services-container">
|
|
||||||
<h2 class="services-title">
|
|
||||||
Our Services
|
|
||||||
</h2>
|
|
||||||
<p class="services-subtitle">
|
|
||||||
Tailored strategies for your business
|
|
||||||
</p>
|
|
||||||
<div class="services-grid">
|
|
||||||
<div class="service-card">
|
|
||||||
<div class="service-icon">🛡️</div>
|
|
||||||
<h3 class="service-title">Cybersecurity Consultation</h3>
|
|
||||||
<p class="service-description">
|
|
||||||
Tailored strategies, advanced threat detection, and comprehensive security frameworks to protect your digital assets and business operations.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="service-card">
|
|
||||||
<div class="service-icon">🤖</div>
|
|
||||||
<h3 class="service-title">AI Based Automation</h3>
|
|
||||||
<p class="service-description">
|
|
||||||
Empower your Business with AI. Strategic AI adoption, machine learning solutions, and intelligent automation to transform your processes.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="service-card">
|
|
||||||
<div class="service-icon">⚡</div>
|
|
||||||
<h3 class="service-title">Rapid Response Solutions</h3>
|
|
||||||
<p class="service-description">
|
|
||||||
Rapid response to minimize damage. Emergency incident response and real-time threat mitigation to protect your business.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Clients Section -->
|
|
||||||
<section class="clients">
|
|
||||||
<div class="clients-container">
|
|
||||||
<h2 class="clients-title">
|
|
||||||
Our Clients
|
|
||||||
</h2>
|
|
||||||
<div class="clients-grid">
|
|
||||||
<div class="client-card">
|
|
||||||
<div class="client-icon">🏭</div>
|
|
||||||
<h3 class="client-name">MTSV Foods Industries Pvt Ltd</h3>
|
|
||||||
<p class="client-industry">Food & Beverage Industry</p>
|
|
||||||
</div>
|
|
||||||
<div class="client-card">
|
|
||||||
<div class="client-icon">🏗️</div>
|
|
||||||
<h3 class="client-name">Apple Tree Industries</h3>
|
|
||||||
<p class="client-industry">Manufacturing & Processing</p>
|
|
||||||
</div>
|
|
||||||
<div class="client-card">
|
|
||||||
<div class="client-icon">💻</div>
|
|
||||||
<h3 class="client-name">TechStart Solutions</h3>
|
|
||||||
<p class="client-industry">Technology Consulting</p>
|
|
||||||
</div>
|
|
||||||
<div class="client-card">
|
|
||||||
<div class="client-icon">🚚</div>
|
|
||||||
<h3 class="client-name">Global Logistics Corp</h3>
|
|
||||||
<p class="client-industry">Supply Chain Management</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Founder Section -->
|
|
||||||
<section class="founder">
|
|
||||||
<div class="founder-container">
|
|
||||||
<h2 class="founder-title">
|
|
||||||
Our Founders
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<!-- JP Goenka -->
|
|
||||||
<div class="founder-grid">
|
|
||||||
<div class="founder-card-container">
|
|
||||||
<div class="founder-card">
|
|
||||||
<div class="founder-avatar">👨💼</div>
|
|
||||||
<h3 class="founder-name">Mr. JP Goenka</h3>
|
|
||||||
<p class="founder-role">
|
|
||||||
Founder & Business Development Leader
|
|
||||||
</p>
|
|
||||||
<div class="founder-badges">
|
|
||||||
<div class="founder-badge">
|
|
||||||
International Trading Expert
|
|
||||||
</div>
|
|
||||||
<div class="founder-badge">
|
|
||||||
Dubai Business Leader
|
|
||||||
</div>
|
|
||||||
<div class="founder-badge">
|
|
||||||
Global Perspective
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="founder-content">
|
|
||||||
<p class="founder-text">
|
|
||||||
Mr. J. P. Goenka
|
|
||||||
|
|
||||||
With over 45 years of entrepreneurial and leadership experience, Mr. J. P. Goenka has built a distinguished career across a diverse range of industries, including food processing, printed circuit boards, plastics manufacturing, beans splitting units, and international trade (import & export).
|
|
||||||
|
|
||||||
</p>
|
|
||||||
<p class="founder-text">
|
|
||||||
Mr. Goenka brings deep global business insight, supported by an extensive international network and a strong understanding of various markets, products, and cultural dynamics. Recognizing the transformative impact of emerging technologies, he co-founded Quantum Task AI LLC FZ in partnership with Mr. Abhay Chauhan, focusing on advancing solutions in Artificial Intelligence and Cybersecurity—two key pillars shaping the future of global business.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Abhay Pal Chauhan -->
|
|
||||||
<div class="founder-grid" style="margin-top: 3rem;">
|
|
||||||
<div class="founder-card-container">
|
|
||||||
<div class="founder-card">
|
|
||||||
<div class="founder-avatar">👨💼</div>
|
|
||||||
<h3 class="founder-name">Abhay Pal Chauhan</h3>
|
|
||||||
<p class="founder-role">
|
|
||||||
Founder & Principal Consultant
|
|
||||||
</p>
|
|
||||||
<div class="founder-badges">
|
|
||||||
<div class="founder-badge">
|
|
||||||
35+ Years Experience
|
|
||||||
</div>
|
|
||||||
<div class="founder-badge">
|
|
||||||
Cybersecurity Expert
|
|
||||||
</div>
|
|
||||||
<div class="founder-badge">
|
|
||||||
Six Sigma Black Belt
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="founder-content">
|
|
||||||
<p class="founder-text">
|
|
||||||
Our Founder leverages over <strong>35 years of expertise</strong> in cybersecurity and process automation and optimization, backed by top certifications in Cybersecurity and <strong>Black Belt in Lean Six Sigma</strong>.
|
|
||||||
</p>
|
|
||||||
<p class="founder-text">
|
|
||||||
His unique blend of technical knowledge and operational excellence ensures <strong>tailored, secure, and efficient solutions</strong> for our clients, driving business resilience and maximizing value in every engagement.
|
|
||||||
</p>
|
|
||||||
<div class="founder-quote">
|
|
||||||
<p class="founder-quote-text">
|
|
||||||
"Delivering top-tier solutions that combine cutting-edge technology with proven operational methodologies to secure and optimize your business operations."
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Contact Section -->
|
|
||||||
<section id="contact" class="contact">
|
|
||||||
<div class="contact-container">
|
|
||||||
<h2 class="contact-title">
|
|
||||||
Get In Touch
|
|
||||||
</h2>
|
|
||||||
<div class="contact-grid">
|
|
||||||
<!-- Contact Form -->
|
|
||||||
<form class="contact-form" method="post" action="{% url 'core:contact_form' %}" id="contactForm">
|
|
||||||
{% csrf_token %}
|
|
||||||
<h3 class="form-title">Send us a Message</h3>
|
|
||||||
|
|
||||||
<!-- Form Messages -->
|
|
||||||
<div id="form-messages" class="form-messages" style="display: none;"></div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="name" class="form-label">Full Name *</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="name"
|
|
||||||
name="name"
|
|
||||||
required
|
|
||||||
class="form-input"
|
|
||||||
maxlength="100"
|
|
||||||
pattern="[a-zA-Z\s\-\.']+"
|
|
||||||
title="Please enter a valid name using only letters, spaces, hyphens, dots, and apostrophes"
|
|
||||||
/>
|
|
||||||
<div class="field-error" id="name-error"></div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="email" class="form-label">Email Address *</label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
id="email"
|
|
||||||
name="email"
|
|
||||||
required
|
|
||||||
class="form-input"
|
|
||||||
maxlength="254"
|
|
||||||
/>
|
|
||||||
<div class="field-error" id="email-error"></div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="company" class="form-label">Company</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="company"
|
|
||||||
name="company"
|
|
||||||
class="form-input"
|
|
||||||
maxlength="100"
|
|
||||||
/>
|
|
||||||
<div class="field-error" id="company-error"></div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="message" class="form-label">Message *</label>
|
|
||||||
<textarea
|
|
||||||
id="message"
|
|
||||||
name="message"
|
|
||||||
required
|
|
||||||
class="form-textarea"
|
|
||||||
maxlength="1000"
|
|
||||||
minlength="10"
|
|
||||||
placeholder="Please describe your inquiry (minimum 10 characters)..."
|
|
||||||
></textarea>
|
|
||||||
<div class="char-counter">
|
|
||||||
<span id="message-count">0</span>/1000 characters
|
|
||||||
</div>
|
|
||||||
<div class="field-error" id="message-error"></div>
|
|
||||||
</div>
|
|
||||||
<button type="submit" class="form-submit" id="submitBtn">
|
|
||||||
<span class="btn-text">Send Message</span>
|
|
||||||
<span class="btn-loading" style="display: none;">
|
|
||||||
<span class="spinner"></span> Sending...
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<!-- Contact Information -->
|
|
||||||
<div class="contact-info">
|
|
||||||
<h3 class="contact-info-title">Contact Information</h3>
|
|
||||||
|
|
||||||
<!-- Mailing Address -->
|
|
||||||
<div class="contact-item">
|
|
||||||
<div class="contact-icon">
|
|
||||||
📍
|
|
||||||
</div>
|
|
||||||
<div class="contact-details">
|
|
||||||
<h4>Mailing Address</h4>
|
|
||||||
<p>
|
|
||||||
Meydan Grandstand, 6th floor<br />
|
|
||||||
Meydan Road, Nad Al Sheba<br />
|
|
||||||
Dubai, U.A.E.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Email Address -->
|
|
||||||
<div class="contact-item">
|
|
||||||
<div class="contact-icon">
|
|
||||||
✉️
|
|
||||||
</div>
|
|
||||||
<div class="contact-details">
|
|
||||||
<h4>Email Address</h4>
|
|
||||||
<p>
|
|
||||||
<a href="mailto:abhay@quantumtaskai.com" class="contact-email">
|
|
||||||
abhay@quantumtaskai.com
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Commitment Statement -->
|
|
||||||
<div class="commitment-statement">
|
|
||||||
<p class="commitment-text">
|
|
||||||
We are committed to deliver top-tier AI & Cybersecurity solutions for businesses of all sizes.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block extra_js %}
|
|
||||||
<style>
|
|
||||||
/* Contact Form Security Enhancements */
|
|
||||||
.form-messages {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
padding: 12px;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-messages.success {
|
|
||||||
background: rgba(16, 185, 129, 0.1);
|
|
||||||
color: #059669;
|
|
||||||
border: 1px solid rgba(16, 185, 129, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-messages.error {
|
|
||||||
background: rgba(239, 68, 68, 0.1);
|
|
||||||
color: #dc2626;
|
|
||||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.field-error {
|
|
||||||
color: #dc2626;
|
|
||||||
font-size: 12px;
|
|
||||||
margin-top: 4px;
|
|
||||||
min-height: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.char-counter {
|
|
||||||
text-align: right;
|
|
||||||
font-size: 12px;
|
|
||||||
color: #6b7280;
|
|
||||||
margin-top: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.char-counter.warning {
|
|
||||||
color: #d97706;
|
|
||||||
}
|
|
||||||
|
|
||||||
.char-counter.error {
|
|
||||||
color: #dc2626;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-input.error, .form-textarea.error {
|
|
||||||
border-color: #dc2626;
|
|
||||||
box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.spinner {
|
|
||||||
display: inline-block;
|
|
||||||
width: 12px;
|
|
||||||
height: 12px;
|
|
||||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
|
||||||
border-radius: 50%;
|
|
||||||
border-top: 2px solid white;
|
|
||||||
animation: spin 1s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin {
|
|
||||||
0% { transform: rotate(0deg); }
|
|
||||||
100% { transform: rotate(360deg); }
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-loading {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
class SecureContactForm {
|
|
||||||
constructor() {
|
|
||||||
this.form = document.getElementById('contactForm');
|
|
||||||
this.submitBtn = document.getElementById('submitBtn');
|
|
||||||
this.messagesDiv = document.getElementById('form-messages');
|
|
||||||
this.messageTextarea = document.getElementById('message');
|
|
||||||
this.messageCounter = document.getElementById('message-count');
|
|
||||||
|
|
||||||
if (this.form) {
|
|
||||||
this.init();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
init() {
|
|
||||||
this.setupEventListeners();
|
|
||||||
this.updateCharCounter();
|
|
||||||
}
|
|
||||||
|
|
||||||
setupEventListeners() {
|
|
||||||
this.form.addEventListener('submit', this.handleSubmit.bind(this));
|
|
||||||
this.messageTextarea.addEventListener('input', this.updateCharCounter.bind(this));
|
|
||||||
|
|
||||||
// Real-time validation
|
|
||||||
['name', 'email', 'company', 'message'].forEach(fieldName => {
|
|
||||||
const field = document.getElementById(fieldName);
|
|
||||||
if (field) {
|
|
||||||
field.addEventListener('blur', () => this.validateField(fieldName));
|
|
||||||
field.addEventListener('input', () => this.clearFieldError(fieldName));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
updateCharCounter() {
|
|
||||||
const length = this.messageTextarea.value.length;
|
|
||||||
this.messageCounter.textContent = length;
|
|
||||||
|
|
||||||
const counter = this.messageCounter.parentElement;
|
|
||||||
counter.classList.remove('warning', 'error');
|
|
||||||
|
|
||||||
if (length > 900) {
|
|
||||||
counter.classList.add('error');
|
|
||||||
} else if (length > 800) {
|
|
||||||
counter.classList.add('warning');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
validateField(fieldName) {
|
|
||||||
const field = document.getElementById(fieldName);
|
|
||||||
const errorDiv = document.getElementById(`${fieldName}-error`);
|
|
||||||
const value = field.value.trim();
|
|
||||||
|
|
||||||
let isValid = true;
|
|
||||||
let errorMessage = '';
|
|
||||||
|
|
||||||
switch(fieldName) {
|
|
||||||
case 'name':
|
|
||||||
if (value.length < 2) {
|
|
||||||
errorMessage = 'Name must be at least 2 characters long';
|
|
||||||
isValid = false;
|
|
||||||
} else if (value.length > 100) {
|
|
||||||
errorMessage = 'Name must be less than 100 characters';
|
|
||||||
isValid = false;
|
|
||||||
} else if (!/^[a-zA-Z\s\-\.']+$/.test(value)) {
|
|
||||||
errorMessage = 'Name contains invalid characters';
|
|
||||||
isValid = false;
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'email':
|
|
||||||
if (!value || value.length > 254) {
|
|
||||||
errorMessage = 'Please provide a valid email address';
|
|
||||||
isValid = false;
|
|
||||||
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
|
|
||||||
errorMessage = 'Please enter a valid email format';
|
|
||||||
isValid = false;
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'company':
|
|
||||||
if (value && value.length > 100) {
|
|
||||||
errorMessage = 'Company name must be less than 100 characters';
|
|
||||||
isValid = false;
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'message':
|
|
||||||
if (value.length < 10) {
|
|
||||||
errorMessage = 'Message must be at least 10 characters long';
|
|
||||||
isValid = false;
|
|
||||||
} else if (value.length > 1000) {
|
|
||||||
errorMessage = 'Message must be less than 1000 characters';
|
|
||||||
isValid = false;
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isValid) {
|
|
||||||
field.classList.remove('error');
|
|
||||||
errorDiv.textContent = '';
|
|
||||||
} else {
|
|
||||||
field.classList.add('error');
|
|
||||||
errorDiv.textContent = errorMessage;
|
|
||||||
}
|
|
||||||
|
|
||||||
return isValid;
|
|
||||||
}
|
|
||||||
|
|
||||||
clearFieldError(fieldName) {
|
|
||||||
const field = document.getElementById(fieldName);
|
|
||||||
const errorDiv = document.getElementById(`${fieldName}-error`);
|
|
||||||
field.classList.remove('error');
|
|
||||||
errorDiv.textContent = '';
|
|
||||||
}
|
|
||||||
|
|
||||||
validateForm() {
|
|
||||||
const fields = ['name', 'email', 'message'];
|
|
||||||
let isValid = true;
|
|
||||||
|
|
||||||
fields.forEach(fieldName => {
|
|
||||||
if (!this.validateField(fieldName)) {
|
|
||||||
isValid = false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Validate company if provided
|
|
||||||
const company = document.getElementById('company').value.trim();
|
|
||||||
if (company && !this.validateField('company')) {
|
|
||||||
isValid = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
return isValid;
|
|
||||||
}
|
|
||||||
|
|
||||||
showMessage(message, type = 'success') {
|
|
||||||
this.messagesDiv.className = `form-messages ${type}`;
|
|
||||||
this.messagesDiv.textContent = message;
|
|
||||||
this.messagesDiv.style.display = 'block';
|
|
||||||
|
|
||||||
// Scroll to message
|
|
||||||
this.messagesDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
|
||||||
|
|
||||||
// Auto-hide success messages after 10 seconds
|
|
||||||
if (type === 'success') {
|
|
||||||
setTimeout(() => {
|
|
||||||
this.messagesDiv.style.display = 'none';
|
|
||||||
}, 10000);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
setLoading(loading) {
|
|
||||||
const btnText = this.submitBtn.querySelector('.btn-text');
|
|
||||||
const btnLoading = this.submitBtn.querySelector('.btn-loading');
|
|
||||||
|
|
||||||
if (loading) {
|
|
||||||
btnText.style.display = 'none';
|
|
||||||
btnLoading.style.display = 'flex';
|
|
||||||
this.submitBtn.disabled = true;
|
|
||||||
} else {
|
|
||||||
btnText.style.display = 'inline';
|
|
||||||
btnLoading.style.display = 'none';
|
|
||||||
this.submitBtn.disabled = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async handleSubmit(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
// Clear previous messages
|
|
||||||
this.messagesDiv.style.display = 'none';
|
|
||||||
|
|
||||||
// Validate form
|
|
||||||
if (!this.validateForm()) {
|
|
||||||
this.showMessage('Please correct the errors above.', 'error');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.setLoading(true);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const formData = new FormData(this.form);
|
|
||||||
|
|
||||||
const response = await fetch(this.form.action, {
|
|
||||||
method: 'POST',
|
|
||||||
body: formData,
|
|
||||||
headers: {
|
|
||||||
'X-Requested-With': 'XMLHttpRequest',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const data = await response.json();
|
|
||||||
|
|
||||||
if (data.success) {
|
|
||||||
this.showMessage(data.message, 'success');
|
|
||||||
this.form.reset();
|
|
||||||
this.updateCharCounter();
|
|
||||||
|
|
||||||
// Clear any field errors
|
|
||||||
['name', 'email', 'company', 'message'].forEach(fieldName => {
|
|
||||||
this.clearFieldError(fieldName);
|
|
||||||
});
|
|
||||||
|
|
||||||
} else {
|
|
||||||
this.showMessage(data.error || 'An error occurred. Please try again.', 'error');
|
|
||||||
}
|
|
||||||
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Contact form error:', error);
|
|
||||||
this.showMessage('Network error. Please check your connection and try again.', 'error');
|
|
||||||
} finally {
|
|
||||||
this.setLoading(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initialize contact form when DOM is loaded
|
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
|
||||||
new SecureContactForm();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
{% endblock %}
|
|
||||||
@ -1,636 +0,0 @@
|
|||||||
import React, { useMemo, useState } from "react";
|
|
||||||
import { CheckCircle, XCircle, Link as LinkIcon, ShieldCheck, Timer, Globe, Users, TrendingUp, AlertTriangle, Search, Filter, BarChart3, PieChart as PieIcon, Star } from "lucide-react";
|
|
||||||
import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip, Bar, BarChart, XAxis, YAxis, CartesianGrid } from "recharts";
|
|
||||||
|
|
||||||
// Single-file, drop-in React page. TailwindCSS recommended for styling.
|
|
||||||
// Default export is required by the canvas preview.
|
|
||||||
|
|
||||||
const RAW = {
|
|
||||||
"status": "success",
|
|
||||||
"brand_analysis": {
|
|
||||||
"brand_name": "Tesla",
|
|
||||||
"website": "https://www.tesla.com/",
|
|
||||||
"analysis_date": "2025-08-28T15:04:31.442279",
|
|
||||||
"processing_time": "Real-time SERP + GPT-4o analysis",
|
|
||||||
"analysis_method": "SerpAPI + GPT-4o with follower tracking"
|
|
||||||
},
|
|
||||||
"data": {
|
|
||||||
"platforms": [
|
|
||||||
{
|
|
||||||
"name": "Google Business",
|
|
||||||
"found": false,
|
|
||||||
"verified": null,
|
|
||||||
"profile_url": null,
|
|
||||||
"confidence": "low",
|
|
||||||
"search_ranking": null,
|
|
||||||
"followers_count": null,
|
|
||||||
"subscribers_count": null,
|
|
||||||
"engagement_level": "unknown",
|
|
||||||
"posts_count": null,
|
|
||||||
"verification_badge": "none",
|
|
||||||
"account_age_estimate": "unknown",
|
|
||||||
"last_activity": "unknown",
|
|
||||||
"profile_completeness": 0,
|
|
||||||
"notes": "No official Tesla profile found on Google Business.",
|
|
||||||
"activity_level": "unknown"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "LinkedIn",
|
|
||||||
"found": true,
|
|
||||||
"verified": true,
|
|
||||||
"profile_url": "https://www.linkedin.com/company/tesla-motors",
|
|
||||||
"confidence": "high",
|
|
||||||
"search_ranking": 1,
|
|
||||||
"followers_count": 12261045,
|
|
||||||
"subscribers_count": null,
|
|
||||||
"engagement_level": "high",
|
|
||||||
"posts_count": null,
|
|
||||||
"verification_badge": "verified",
|
|
||||||
"account_age_estimate": "unknown",
|
|
||||||
"last_activity": "unknown",
|
|
||||||
"profile_completeness": 90,
|
|
||||||
"notes": "Official Tesla LinkedIn profile with over 12 million followers. Verified account.",
|
|
||||||
"activity_level": "unknown"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "YouTube",
|
|
||||||
"found": true,
|
|
||||||
"verified": true,
|
|
||||||
"profile_url": "https://www.youtube.com/channel/UC5WjFrtBdufl6CZojX3D8dQ",
|
|
||||||
"confidence": "high",
|
|
||||||
"search_ranking": 1,
|
|
||||||
"followers_count": null,
|
|
||||||
"subscribers_count": null,
|
|
||||||
"engagement_level": "high",
|
|
||||||
"posts_count": null,
|
|
||||||
"verification_badge": "verified",
|
|
||||||
"account_age_estimate": "unknown",
|
|
||||||
"last_activity": "recent",
|
|
||||||
"profile_completeness": 80,
|
|
||||||
"notes": "Official Tesla YouTube channel. Verified with regular content updates.",
|
|
||||||
"activity_level": "high"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "TikTok",
|
|
||||||
"found": false,
|
|
||||||
"verified": null,
|
|
||||||
"profile_url": null,
|
|
||||||
"confidence": "low",
|
|
||||||
"search_ranking": null,
|
|
||||||
"followers_count": null,
|
|
||||||
"subscribers_count": null,
|
|
||||||
"engagement_level": "unknown",
|
|
||||||
"posts_count": null,
|
|
||||||
"verification_badge": "none",
|
|
||||||
"account_age_estimate": "unknown",
|
|
||||||
"last_activity": "unknown",
|
|
||||||
"profile_completeness": 0,
|
|
||||||
"notes": "No official Tesla profile found on TikTok.",
|
|
||||||
"activity_level": "unknown"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Instagram",
|
|
||||||
"found": true,
|
|
||||||
"verified": true,
|
|
||||||
"profile_url": "https://www.instagram.com/teslamotors/",
|
|
||||||
"confidence": "high",
|
|
||||||
"search_ranking": 1,
|
|
||||||
"followers_count": null,
|
|
||||||
"subscribers_count": null,
|
|
||||||
"engagement_level": "high",
|
|
||||||
"posts_count": null,
|
|
||||||
"verification_badge": "verified",
|
|
||||||
"account_age_estimate": "unknown",
|
|
||||||
"last_activity": "recent",
|
|
||||||
"profile_completeness": 85,
|
|
||||||
"notes": "Official Tesla Instagram profile. Verified with active engagement.",
|
|
||||||
"activity_level": "high"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Pinterest",
|
|
||||||
"found": false,
|
|
||||||
"verified": null,
|
|
||||||
"profile_url": null,
|
|
||||||
"confidence": "low",
|
|
||||||
"search_ranking": null,
|
|
||||||
"followers_count": null,
|
|
||||||
"subscribers_count": null,
|
|
||||||
"engagement_level": "unknown",
|
|
||||||
"posts_count": null,
|
|
||||||
"verification_badge": "none",
|
|
||||||
"account_age_estimate": "unknown",
|
|
||||||
"last_activity": "unknown",
|
|
||||||
"profile_completeness": 0,
|
|
||||||
"notes": "No official Tesla profile found on Pinterest.",
|
|
||||||
"activity_level": "unknown"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "X (Twitter)",
|
|
||||||
"found": true,
|
|
||||||
"verified": true,
|
|
||||||
"profile_url": "https://x.com/teslaownerssv",
|
|
||||||
"confidence": "medium",
|
|
||||||
"search_ranking": 1,
|
|
||||||
"followers_count": null,
|
|
||||||
"subscribers_count": null,
|
|
||||||
"engagement_level": "high",
|
|
||||||
"posts_count": null,
|
|
||||||
"verification_badge": "verified",
|
|
||||||
"account_age_estimate": "unknown",
|
|
||||||
"last_activity": "recent",
|
|
||||||
"profile_completeness": 70,
|
|
||||||
"notes": "Tesla Owners Silicon Valley is a prominent Tesla-related account. Verified.",
|
|
||||||
"activity_level": "high"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Facebook",
|
|
||||||
"found": true,
|
|
||||||
"verified": false,
|
|
||||||
"profile_url": "https://www.facebook.com/TeslaMotorsCorp/",
|
|
||||||
"confidence": "medium",
|
|
||||||
"search_ranking": 1,
|
|
||||||
"followers_count": 278870,
|
|
||||||
"subscribers_count": null,
|
|
||||||
"engagement_level": "medium",
|
|
||||||
"posts_count": null,
|
|
||||||
"verification_badge": "none",
|
|
||||||
"account_age_estimate": "unknown",
|
|
||||||
"last_activity": "unknown",
|
|
||||||
"profile_completeness": 60,
|
|
||||||
"notes": "Tesla fan page with significant following but not verified.",
|
|
||||||
"activity_level": "medium"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Medium",
|
|
||||||
"found": false,
|
|
||||||
"verified": null,
|
|
||||||
"profile_url": null,
|
|
||||||
"confidence": "low",
|
|
||||||
"search_ranking": null,
|
|
||||||
"followers_count": null,
|
|
||||||
"subscribers_count": null,
|
|
||||||
"engagement_level": "unknown",
|
|
||||||
"posts_count": null,
|
|
||||||
"verification_badge": "none",
|
|
||||||
"account_age_estimate": "unknown",
|
|
||||||
"last_activity": "unknown",
|
|
||||||
"profile_completeness": 0,
|
|
||||||
"notes": "No official Tesla profile found on Medium.",
|
|
||||||
"activity_level": "unknown"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Tumblr",
|
|
||||||
"found": false,
|
|
||||||
"verified": null,
|
|
||||||
"profile_url": null,
|
|
||||||
"confidence": "low",
|
|
||||||
"search_ranking": null,
|
|
||||||
"followers_count": null,
|
|
||||||
"subscribers_count": null,
|
|
||||||
"engagement_level": "unknown",
|
|
||||||
"posts_count": null,
|
|
||||||
"verification_badge": "none",
|
|
||||||
"account_age_estimate": "unknown",
|
|
||||||
"last_activity": "unknown",
|
|
||||||
"profile_completeness": 0,
|
|
||||||
"notes": "No official Tesla profile found on Tumblr.",
|
|
||||||
"activity_level": "unknown"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Threads",
|
|
||||||
"found": false,
|
|
||||||
"verified": null,
|
|
||||||
"profile_url": null,
|
|
||||||
"confidence": "low",
|
|
||||||
"search_ranking": null,
|
|
||||||
"followers_count": null,
|
|
||||||
"subscribers_count": null,
|
|
||||||
"engagement_level": "unknown",
|
|
||||||
"posts_count": null,
|
|
||||||
"verification_badge": "none",
|
|
||||||
"account_age_estimate": "unknown",
|
|
||||||
"last_activity": "unknown",
|
|
||||||
"profile_completeness": 0,
|
|
||||||
"notes": "No official Tesla profile found on Threads.",
|
|
||||||
"activity_level": "unknown"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Quora",
|
|
||||||
"found": false,
|
|
||||||
"verified": null,
|
|
||||||
"profile_url": null,
|
|
||||||
"confidence": "low",
|
|
||||||
"search_ranking": null,
|
|
||||||
"followers_count": null,
|
|
||||||
"subscribers_count": null,
|
|
||||||
"engagement_level": "unknown",
|
|
||||||
"posts_count": null,
|
|
||||||
"verification_badge": "none",
|
|
||||||
"account_age_estimate": "unknown",
|
|
||||||
"last_activity": "unknown",
|
|
||||||
"profile_completeness": 0,
|
|
||||||
"notes": "No official Tesla profile found on Quora.",
|
|
||||||
"activity_level": "unknown"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Reddit",
|
|
||||||
"found": false,
|
|
||||||
"verified": null,
|
|
||||||
"profile_url": null,
|
|
||||||
"confidence": "low",
|
|
||||||
"search_ranking": null,
|
|
||||||
"followers_count": null,
|
|
||||||
"subscribers_count": null,
|
|
||||||
"engagement_level": "unknown",
|
|
||||||
"posts_count": null,
|
|
||||||
"verification_badge": "none",
|
|
||||||
"account_age_estimate": "unknown",
|
|
||||||
"last_activity": "unknown",
|
|
||||||
"profile_completeness": 0,
|
|
||||||
"notes": "No official Tesla profile found on Reddit.",
|
|
||||||
"activity_level": "unknown"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Blue Sky",
|
|
||||||
"found": false,
|
|
||||||
"verified": null,
|
|
||||||
"profile_url": null,
|
|
||||||
"confidence": "low",
|
|
||||||
"search_ranking": null,
|
|
||||||
"followers_count": null,
|
|
||||||
"subscribers_count": null,
|
|
||||||
"engagement_level": "unknown",
|
|
||||||
"posts_count": null,
|
|
||||||
"verification_badge": "none",
|
|
||||||
"account_age_estimate": "unknown",
|
|
||||||
"last_activity": "unknown",
|
|
||||||
"profile_completeness": 0,
|
|
||||||
"notes": "No official Tesla profile found on Blue Sky.",
|
|
||||||
"activity_level": "unknown"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"summary": {
|
|
||||||
"total_platforms_checked": 14,
|
|
||||||
"platforms_found": 5,
|
|
||||||
"platforms_missing": 9,
|
|
||||||
"completion_percentage": 35.71,
|
|
||||||
"verification_rate": 60,
|
|
||||||
"average_search_ranking": 1,
|
|
||||||
"total_followers": 12539915,
|
|
||||||
"average_engagement": "medium",
|
|
||||||
"verified_accounts": 3
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"competitor_analysis": {},
|
|
||||||
"insights": {
|
|
||||||
"digital_presence_score": "B-",
|
|
||||||
"final_score": 66.7,
|
|
||||||
"strongest_presence": "LinkedIn",
|
|
||||||
"biggest_opportunity": "Google Business",
|
|
||||||
"total_followers": 12539915,
|
|
||||||
"average_engagement": "high",
|
|
||||||
"verification_gaps": 1,
|
|
||||||
"industry_benchmark": "Below average (36% vs 52% industry average)",
|
|
||||||
"recommendations": [
|
|
||||||
{
|
|
||||||
"platform": "Google Business",
|
|
||||||
"priority": "medium",
|
|
||||||
"reason": "Critical for local SEO and customer reviews",
|
|
||||||
"estimated_setup_time": "2-4 hours",
|
|
||||||
"potential_reach": "Local search dominance"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"platform": "TikTok",
|
|
||||||
"priority": "high",
|
|
||||||
"reason": "Fastest-growing platform for viral marketing and reaching Gen Z/Millennial audiences",
|
|
||||||
"estimated_setup_time": "1-2 hours",
|
|
||||||
"potential_reach": "500K+ monthly views potential"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"platform": "Pinterest",
|
|
||||||
"priority": "medium",
|
|
||||||
"reason": "Perfect for visual discovery and driving website traffic",
|
|
||||||
"estimated_setup_time": "2-3 hours",
|
|
||||||
"potential_reach": "50K+ monthly pin impressions"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"meta": {
|
|
||||||
"analyzer_version": "2.1 Pro Enhanced",
|
|
||||||
"platforms_supported": 14,
|
|
||||||
"analysis_method": "Real-time SERP search + GPT-4o analysis",
|
|
||||||
"model": "GPT-4o",
|
|
||||||
"serp_provider": "serpapi",
|
|
||||||
"features": [
|
|
||||||
"live_verification",
|
|
||||||
"actual_urls",
|
|
||||||
"search_rankings",
|
|
||||||
"follower_counts",
|
|
||||||
"engagement_metrics",
|
|
||||||
"verification_badges",
|
|
||||||
"account_age_estimation",
|
|
||||||
"profile_completeness",
|
|
||||||
"follower_weighted_scoring",
|
|
||||||
"competitor_analysis",
|
|
||||||
"actionable_insights"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const COLORS = ["#60A5FA", "#34D399", "#FBBF24", "#F87171", "#A78BFA", "#F472B6", "#22D3EE", "#F59E0B"]; // Tailwind palette-ish
|
|
||||||
|
|
||||||
function Badge({ children, intent = "neutral" }) {
|
|
||||||
const map = {
|
|
||||||
success: "bg-emerald-500/20 text-emerald-300 ring-1 ring-emerald-400/30",
|
|
||||||
danger: "bg-rose-500/20 text-rose-300 ring-1 ring-rose-400/30",
|
|
||||||
warn: "bg-amber-500/20 text-amber-200 ring-1 ring-amber-400/30",
|
|
||||||
info: "bg-sky-500/20 text-sky-200 ring-1 ring-sky-400/30",
|
|
||||||
neutral: "bg-zinc-700/40 text-zinc-200 ring-1 ring-white/5",
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<span className={`px-2.5 py-1 rounded-full text-xs font-medium ${map[intent]}`}>{children}</span>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function Stat({ icon: Icon, label, value, hint }) {
|
|
||||||
return (
|
|
||||||
<div className="rounded-2xl bg-zinc-900/80 backdrop-blur p-4 shadow-xl ring-1 ring-white/10">
|
|
||||||
<div className="flex items-start justify-between">
|
|
||||||
<div>
|
|
||||||
<p className="text-zinc-400 text-xs uppercase tracking-wider">{label}</p>
|
|
||||||
<p className="mt-1 text-2xl font-semibold text-white">{value}</p>
|
|
||||||
{hint && <p className="text-zinc-400 text-xs mt-1">{hint}</p>}
|
|
||||||
</div>
|
|
||||||
<div className="p-2 rounded-xl bg-zinc-800/60 ring-1 ring-white/10">
|
|
||||||
<Icon className="h-5 w-5 text-zinc-200" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function Progress({ value }) {
|
|
||||||
return (
|
|
||||||
<div className="w-full h-2 bg-zinc-800 rounded-full overflow-hidden ring-1 ring-white/10">
|
|
||||||
<div className="h-full bg-sky-500" style={{ width: `${Math.min(100, Math.max(0, value))}%` }} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function PlatformCard({ p }) {
|
|
||||||
const found = p.found;
|
|
||||||
const verified = p.verified === true;
|
|
||||||
const notFound = p.found === false;
|
|
||||||
const statusIntent = found ? (verified ? "success" : "info") : "danger";
|
|
||||||
const engagementMap = {
|
|
||||||
high: "High",
|
|
||||||
medium: "Medium",
|
|
||||||
low: "Low",
|
|
||||||
unknown: "Unknown",
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="group rounded-2xl bg-zinc-950/70 backdrop-blur hover:bg-zinc-950/90 transition-colors shadow-2xl ring-1 ring-white/10 p-4">
|
|
||||||
<div className="flex items-center justify-between gap-3">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
{found ? (
|
|
||||||
<CheckCircle className="h-5 w-5 text-emerald-400" />
|
|
||||||
) : (
|
|
||||||
<XCircle className="h-5 w-5 text-rose-400" />
|
|
||||||
)}
|
|
||||||
<h3 className="text-white font-semibold text-base">{p.name}</h3>
|
|
||||||
</div>
|
|
||||||
<Badge intent={statusIntent}>{found ? (verified ? "Verified" : "Found") : "Missing"}</Badge>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mt-3 grid grid-cols-2 gap-3 text-sm">
|
|
||||||
<div className="flex items-center gap-2 text-zinc-300"><Globe className="h-4 w-4"/>Rank: {p.search_ranking ?? "-"}</div>
|
|
||||||
<div className="flex items-center gap-2 text-zinc-300"><Users className="h-4 w-4"/>Followers: {p.followers_count ?? p.subscribers_count ?? "-"}</div>
|
|
||||||
<div className="flex items-center gap-2 text-zinc-300"><TrendingUp className="h-4 w-4"/>Engagement: {engagementMap[p.engagement_level] ?? p.engagement_level}</div>
|
|
||||||
<div className="flex items-center gap-2 text-zinc-300"><Star className="h-4 w-4"/>Profile completeness: {p.profile_completeness ?? 0}%</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mt-3 flex items-center gap-2">
|
|
||||||
{p.profile_url ? (
|
|
||||||
<a href={p.profile_url} target="_blank" rel="noreferrer" className="inline-flex items-center gap-1 text-sky-300 hover:text-sky-200 text-sm">
|
|
||||||
<LinkIcon className="h-4 w-4"/> Visit profile
|
|
||||||
</a>
|
|
||||||
) : (
|
|
||||||
<span className="inline-flex items-center gap-1 text-zinc-500 text-sm"><AlertTriangle className="h-4 w-4"/> No URL</span>
|
|
||||||
)}
|
|
||||||
{verified && <span className="inline-flex items-center gap-1 text-emerald-300 text-sm"><ShieldCheck className="h-4 w-4"/> Verified</span>}
|
|
||||||
{p.last_activity && <span className="inline-flex items-center gap-1 text-zinc-400 text-sm"><Timer className="h-4 w-4"/>Last: {p.last_activity}</span>}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{p.notes && <p className="mt-3 text-xs text-zinc-400 leading-relaxed">{p.notes}</p>}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function Section({ title, icon: Icon, right }) {
|
|
||||||
return (
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<div className="p-2 rounded-xl bg-zinc-900 ring-1 ring-white/10"><Icon className="h-4 w-4 text-zinc-200"/></div>
|
|
||||||
<h2 className="text-lg md:text-xl font-semibold text-white">{title}</h2>
|
|
||||||
</div>
|
|
||||||
{right}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function BrandAnalysisPage() {
|
|
||||||
const [query, setQuery] = useState("");
|
|
||||||
const [filter, setFilter] = useState("all"); // all | found | missing
|
|
||||||
const [sort, setSort] = useState("default"); // default | followers | completeness | name
|
|
||||||
|
|
||||||
const platforms = RAW.data.platforms;
|
|
||||||
const summary = RAW.data.summary;
|
|
||||||
const insights = RAW.insights;
|
|
||||||
const brand = RAW.brand_analysis;
|
|
||||||
|
|
||||||
const filtered = useMemo(() => {
|
|
||||||
let arr = [...platforms];
|
|
||||||
if (filter === "found") arr = arr.filter(p => p.found);
|
|
||||||
if (filter === "missing") arr = arr.filter(p => p.found === false);
|
|
||||||
if (query.trim()) {
|
|
||||||
const q = query.toLowerCase();
|
|
||||||
arr = arr.filter(p => `${p.name} ${p.notes ?? ""}`.toLowerCase().includes(q));
|
|
||||||
}
|
|
||||||
if (sort === "followers") arr.sort((a,b) => (b.followers_count ?? b.subscribers_count ?? -1) - (a.followers_count ?? a.subscribers_count ?? -1));
|
|
||||||
if (sort === "completeness") arr.sort((a,b) => (b.profile_completeness ?? 0) - (a.profile_completeness ?? 0));
|
|
||||||
if (sort === "name") arr.sort((a,b) => a.name.localeCompare(b.name));
|
|
||||||
return arr;
|
|
||||||
}, [platforms, filter, query, sort]);
|
|
||||||
|
|
||||||
const foundCount = platforms.filter(p => p.found).length;
|
|
||||||
const missingCount = platforms.length - foundCount;
|
|
||||||
|
|
||||||
const pieData = [
|
|
||||||
{ name: "Found", value: foundCount },
|
|
||||||
{ name: "Missing", value: missingCount },
|
|
||||||
];
|
|
||||||
|
|
||||||
const followerBars = platforms
|
|
||||||
.map(p => ({ name: p.name, followers: p.followers_count ?? p.subscribers_count ?? 0 }))
|
|
||||||
.filter(d => d.followers > 0);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="min-h-screen bg-gradient-to-b from-zinc-950 via-zinc-950 to-black text-zinc-100">
|
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 md:py-10">
|
|
||||||
{/* Header */}
|
|
||||||
<div className="flex flex-col md:flex-row md:items-end md:justify-between gap-6">
|
|
||||||
<div>
|
|
||||||
<div className="inline-flex items-center gap-2">
|
|
||||||
<img src="https://www.tesla.com/themes/custom/tesla_frontend/assets/favicons/favicon.ico" alt="logo" className="h-6 w-6"/>
|
|
||||||
<h1 className="text-2xl md:text-3xl font-bold text-white">{brand.brand_name} – Digital Presence Report</h1>
|
|
||||||
</div>
|
|
||||||
<p className="text-zinc-400 mt-1 text-sm">Website: <a href={brand.website} target="_blank" rel="noreferrer" className="text-sky-300 hover:text-sky-200">{brand.website}</a></p>
|
|
||||||
<p className="text-zinc-500 text-xs mt-1">Analyzed on {new Date(brand.analysis_date).toLocaleString()}</p>
|
|
||||||
</div>
|
|
||||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3 w-full md:w-auto">
|
|
||||||
<Stat icon={Globe} label="Checked" value={summary.total_platforms_checked} hint="Platforms" />
|
|
||||||
<Stat icon={CheckCircle} label="Found" value={summary.platforms_found} hint={`${Math.round((foundCount/platforms.length)*100)}% presence`} />
|
|
||||||
<Stat icon={ShieldCheck} label="Verified" value={summary.verified_accounts} hint={`${summary.verification_rate}% rate`} />
|
|
||||||
<Stat icon={Users} label="Total Followers" value={summary.total_followers.toLocaleString()} hint="across platforms" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Score & Overview */}
|
|
||||||
<div className="mt-6 grid md:grid-cols-3 gap-4">
|
|
||||||
<div className="rounded-2xl bg-zinc-900/80 p-5 ring-1 ring-white/10 shadow-xl">
|
|
||||||
<Section title="Presence Score" icon={PieIcon} />
|
|
||||||
<div className="mt-4">
|
|
||||||
<div className="flex items-end gap-2">
|
|
||||||
<p className="text-4xl font-semibold text-white">{insights.final_score}</p>
|
|
||||||
<Badge intent="info">{insights.digital_presence_score}</Badge>
|
|
||||||
</div>
|
|
||||||
<p className="text-zinc-400 text-sm mt-2">Industry benchmark: {insights.industry_benchmark}</p>
|
|
||||||
<div className="mt-3">
|
|
||||||
<Progress value={summary.completion_percentage} />
|
|
||||||
<p className="text-zinc-400 text-xs mt-1">Profile completion: {summary.completion_percentage}%</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="rounded-2xl bg-zinc-900/80 p-5 ring-1 ring-white/10 shadow-xl">
|
|
||||||
<Section title="Found vs Missing" icon={PieIcon} />
|
|
||||||
<div className="h-44 mt-2">
|
|
||||||
<ResponsiveContainer width="100%" height="100%">
|
|
||||||
<PieChart>
|
|
||||||
<Pie dataKey="value" data={pieData} outerRadius={70} label>
|
|
||||||
{pieData.map((entry, index) => (
|
|
||||||
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
|
|
||||||
))}
|
|
||||||
</Pie>
|
|
||||||
<Tooltip contentStyle={{ background: "#0a0a0a", border: "1px solid #3f3f46" }} />
|
|
||||||
</PieChart>
|
|
||||||
</ResponsiveContainer>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="rounded-2xl bg-zinc-900/80 p-5 ring-1 ring-white/10 shadow-xl">
|
|
||||||
<Section title="Followers by Platform" icon={BarChart3} />
|
|
||||||
<div className="h-44 mt-2">
|
|
||||||
<ResponsiveContainer width="100%" height="100%">
|
|
||||||
<BarChart data={followerBars}>
|
|
||||||
<CartesianGrid strokeDasharray="3 3" stroke="#27272a" />
|
|
||||||
<XAxis dataKey="name" tick={{ fill: "#a1a1aa" }} interval={0} angle={-20} textAnchor="end" height={50} />
|
|
||||||
<YAxis tick={{ fill: "#a1a1aa" }} />
|
|
||||||
<Tooltip contentStyle={{ background: "#0a0a0a", border: "1px solid #3f3f46" }} />
|
|
||||||
<Bar dataKey="followers">
|
|
||||||
{followerBars.map((_, index) => (
|
|
||||||
<Cell key={`bar-${index}`} fill={COLORS[index % COLORS.length]} />
|
|
||||||
))}
|
|
||||||
</Bar>
|
|
||||||
</BarChart>
|
|
||||||
</ResponsiveContainer>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Recommendations */}
|
|
||||||
<div className="mt-8 rounded-2xl bg-zinc-900/80 p-5 ring-1 ring-white/10 shadow-xl">
|
|
||||||
<Section title="Actionable Recommendations" icon={TrendingUp} />
|
|
||||||
<div className="mt-4 grid md:grid-cols-3 gap-4">
|
|
||||||
{RAW.insights.recommendations.map((r, i) => (
|
|
||||||
<div key={i} className="rounded-2xl bg-zinc-950/70 ring-1 ring-white/10 p-4">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<h3 className="text-white font-semibold">{r.platform}</h3>
|
|
||||||
<Badge intent={r.priority === 'high' ? 'warn' : 'info'}>Priority: {r.priority}</Badge>
|
|
||||||
</div>
|
|
||||||
<p className="text-zinc-300 text-sm mt-2">{r.reason}</p>
|
|
||||||
<div className="mt-3 grid grid-cols-2 gap-2 text-xs text-zinc-400">
|
|
||||||
<div className="p-2 rounded-lg bg-zinc-900 ring-1 ring-white/10">Setup: {r.estimated_setup_time}</div>
|
|
||||||
<div className="p-2 rounded-lg bg-zinc-900 ring-1 ring-white/10">Reach: {r.potential_reach}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Platforms List */}
|
|
||||||
<div className="mt-8 rounded-2xl bg-zinc-900/80 p-5 ring-1 ring-white/10 shadow-xl">
|
|
||||||
<Section
|
|
||||||
title="Platform Analysis (All Platforms)"
|
|
||||||
icon={Globe}
|
|
||||||
right={
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<div className="relative">
|
|
||||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-400"/>
|
|
||||||
<input
|
|
||||||
className="pl-9 pr-3 py-2 rounded-xl bg-zinc-950/70 ring-1 ring-white/10 text-sm text-white placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-sky-500"
|
|
||||||
placeholder="Search platforms..."
|
|
||||||
value={query}
|
|
||||||
onChange={e=>setQuery(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Filter className="h-4 w-4 text-zinc-400"/>
|
|
||||||
<select value={filter} onChange={e=>setFilter(e.target.value)} className="bg-zinc-950/70 ring-1 ring-white/10 rounded-xl px-3 py-2 text-sm">
|
|
||||||
<option value="all">All</option>
|
|
||||||
<option value="found">Found</option>
|
|
||||||
<option value="missing">Missing</option>
|
|
||||||
</select>
|
|
||||||
<select value={sort} onChange={e=>setSort(e.target.value)} className="bg-zinc-950/70 ring-1 ring-white/10 rounded-xl px-3 py-2 text-sm">
|
|
||||||
<option value="default">Sort</option>
|
|
||||||
<option value="followers">Followers</option>
|
|
||||||
<option value="completeness">Completeness</option>
|
|
||||||
<option value="name">Name (A-Z)</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="mt-4 grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
||||||
{filtered.map((p) => (
|
|
||||||
<PlatformCard key={p.name} p={p} />
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Meta */}
|
|
||||||
<div className="mt-8 rounded-2xl bg-zinc-900/80 p-5 ring-1 ring-white/10 shadow-xl">
|
|
||||||
<Section title="Analyzer Meta" icon={Globe} />
|
|
||||||
<div className="mt-3 grid md:grid-cols-3 gap-3 text-sm">
|
|
||||||
<div className="p-4 rounded-2xl bg-zinc-950/70 ring-1 ring-white/10">
|
|
||||||
<p className="text-zinc-400 text-xs">Analyzer Version</p>
|
|
||||||
<p className="text-white font-medium mt-1">{RAW.meta.analyzer_version}</p>
|
|
||||||
</div>
|
|
||||||
<div className="p-4 rounded-2xl bg-zinc-950/70 ring-1 ring-white/10">
|
|
||||||
<p className="text-zinc-400 text-xs">Platforms Supported</p>
|
|
||||||
<p className="text-white font-medium mt-1">{RAW.meta.platforms_supported}</p>
|
|
||||||
</div>
|
|
||||||
<div className="p-4 rounded-2xl bg-zinc-950/70 ring-1 ring-white/10">
|
|
||||||
<p className="text-zinc-400 text-xs">Method</p>
|
|
||||||
<p className="text-white font-medium mt-1">{RAW.meta.analysis_method}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<footer className="mt-10 pb-6 text-center text-xs text-zinc-500">
|
|
||||||
Built with ❤ for {brand.brand_name}. Dark cards for emphasis as requested.
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue
Block a user