FluxDX — Digital Transformation & Growth Systems
tailwind.config = {
theme: {
extend: {
colors: {
brand: {
green: '#3FB97F', /* Primary Brand Green */
darkgreen: '#06644E', /* Dark Accent Green */
deepgreen: '#08312D', /* Deeper Green Shade */
mint: '#7FE6C3', /* Light Mint Green */
black: '#231F20', /* Authority Black */
lightbg: '#F4FAF7', /* Soft Light Tint */
cardbg: '#FFFFFF'
}
},
fontFamily: {
sans: ['Segoe UI', 'system-ui', '-apple-system', 'sans-serif'],
heading: ['Montserrat', 'Segoe UI', 'sans-serif'],
mono: ['Montserrat', 'monospace'],
}
}
}
}
:root {
--brand-green: #3FB97F;
--brand-darkgreen: #06644E;
--brand-black: #231F20;
--brand-light: #F4FAF7;
}
body {
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
background-color: #FFFFFF;
color: #231F20;
overflow-x: hidden;
scroll-behavior: smooth;
}
h1,
h2,
h3,
h4,
.font-heading {
font-family: 'Montserrat', sans-serif;
}
.bg-arrow-pattern {
background-image: radial-gradient(#3FB97F 1px, transparent 1px), radial-gradient(#06644E 1px, #ffffff 1px);
background-size: 40px 40px;
background-position: 0 0, 20px 20px;
opacity: 0.05;
}
.brand-card-glow {
box-shadow: 0 10px 30px -10px rgba(63, 185, 127, 0.15);
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.brand-card-glow:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px -10px rgba(63, 185, 127, 0.28);
}
/* Drag & Drop Highlight */
.drag-active {
border-color: #3FB97F !important;
background-color: rgba(63, 185, 127, 0.15) !important;
}
/* Scanning Radar Line Animation */
@keyframes scan {
0% {
top: 0%;
opacity: 0.8;
}
50% {
top: 95%;
opacity: 0.8;
}
100% {
top: 0%;
opacity: 0.8;
}
}
.scan-line {
position: absolute;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, transparent, #3FB97F, transparent);
box-shadow: 0 0 12px #3FB97F;
animation: scan 2s linear infinite;
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #F4FAF7;
}
::-webkit-scrollbar-thumb {
background: #3FB97F;
border-radius: 4px;
}
Next-Generation Agency Experience
Transforming Digital Platforms Into
High-Converting Revenue Engines
We combine research-backed strategy, award-winning craft, and technical precision to elevate brands and
accelerate measurable business growth.
FluxDX Brand Algorithm
Engine
Drag & drop any brand image, creative asset, or UI design
into the zone below to run our built-in analysis algorithm in real time.
Drag & drop your brand design here
Supports JPG, PNG, WEBP. Drop an image to calculate your
visual hierarchy, trust index, and revenue potential.
Browse File
![Uploaded Brand Asset]()
ASSET SCANNED ✓
Evaluating Typography, Color Balance & Conversion Triggers...
Brand Trust Score
Low visual authority &
unoptimized contrast
Perceived Value
Limits pricing power and premium
positioning
Visual Clarity
High friction visual layout
detected
Conversion Potential
Lacks high-converting
calls-to-action
The FluxDX
Advantage
Why Choose FluxDX
Engineered for ambitious brands seeking research-driven growth,
speed, and undeniable ROI.
01
Research
Strategy First
Every design starts with research, positioning, and a
clear goal to ensure long-term market dominance.
02
Excellence
Award-Winning Craft
Recognised work across identity, packaging, and digital
channels that elevates brand prestige.
03
Integrated
Full-Service Team
Strategists, designers, and motion artists working as one
cohesive execution pipeline.
04
Speed
Fast Delivery
Clear timelines and quick turnarounds without cutting
corners or compromising quality.
05
Clarity
Transparent Process
You see progress at every step, with no surprises, hidden
fees, or shifting deadlines.
06
Growth
Measurable Results
Brands that grow engagement, trust, and revenue through
data-verified design decisions.
Proven Track
Record
Metrics That Drive Scale
Real data from our completed website transformations
0%
Conversion Boost
Average conversion lift post-redesign
0%
Credibility Index
User trust & brand perception rating
0%
Client Retention
Long-term strategic partnership rate
0s
Sub-3s Loading
Mobile performance speed target
Project Consultation
Request Growth Proposal
Submit your details to receive a complimentary audit and transformation
strategy.
const dropZone = document.getElementById('drop-zone');
const scanLine = document.getElementById('scan-line');
const uploadPrompt = document.getElementById('upload-prompt');
const previewContainer = document.getElementById('preview-container');
const uploadedPreview = document.getElementById('uploaded-preview');
const processingIndicator = document.getElementById('processing-indicator');
const resetAction = document.getElementById('reset-action');
// Drag & Drop Handlers
function handleDragOver(e) {
e.preventDefault();
dropZone.classList.add('drag-active');
}
function handleDragLeave(e) {
e.preventDefault();
dropZone.classList.remove('drag-active');
}
function handleDrop(e) {
e.preventDefault();
dropZone.classList.remove('drag-active');
const files = e.dataTransfer.files;
if (files.length > 0) {
processUploadedFile(files[0]);
}
}
// Core Brand Algorithm Engine Logic
function processUploadedFile(file) {
if (!file || !file.type.startsWith('image/')) {
alert('Please drop or upload a valid image file.');
return;
}
const reader = new FileReader();
reader.onload = function (e) {
// Show Image Preview & Scanning Effect
uploadedPreview.src = e.target.result;
uploadPrompt.classList.add('hidden');
previewContainer.classList.remove('hidden');
scanLine.classList.remove('hidden');
processingIndicator.classList.remove('hidden');
// Simulate Algorithm Analysis Calculation
setTimeout(() => {
runBrandAlgorithmAnalysis();
}, 1800);
};
reader.readAsDataURL(file);
}
// Algorithm Scorer & UI Updater
function runBrandAlgorithmAnalysis() {
scanLine.classList.add('hidden');
processingIndicator.classList.add('hidden');
resetAction.classList.remove('hidden');
// Calculate Dynamic Dynamic Scores based on Algorithm Simulation
const randomTrustScore = (Math.random() * (9.8 - 7.5) + 7.5).toFixed(1);
const clarityPercentage = Math.floor(Math.random() * (98 - 85) + 85);
// Update Dashboard Metrics dynamically
const trustScoreElem = document.getElementById('score-trust');
trustScoreElem.innerText = `${randomTrustScore} / 10`;
trustScoreElem.className = "text-3xl font-extrabold font-mono text-brand-green transition-colors duration-500";
document.getElementById('trust-desc').innerText = "Verified high visual authority & optimal hierarchy";
const valueElem = document.getElementById('score-value');
valueElem.innerText = "Premium Tier";
valueElem.className = "text-2xl font-extrabold font-mono text-brand-green transition-colors duration-500";
document.getElementById('value-desc').innerText = "Unlocks maximum margin and high-end positioning";
const clarityElem = document.getElementById('score-clarity');
clarityElem.innerText = `${clarityPercentage}%`;
clarityElem.className = "text-3xl font-extrabold font-mono text-brand-green transition-colors duration-500";
document.getElementById('clarity-desc').innerText = "Low cognitive friction & high readability";
const conversionElem = document.getElementById('score-conversion');
conversionElem.innerText = "High Yield";
conversionElem.className = "text-2xl font-extrabold font-mono text-brand-green transition-colors duration-500";
document.getElementById('conversion-desc').innerText = "Strong call-to-action & engagement pathways";
}
// Reset Analyzer State
function resetAnalyzer() {
uploadPrompt.classList.remove('hidden');
previewContainer.classList.add('hidden');
resetAction.classList.add('hidden');
document.getElementById('brand-file-input').value = '';
// Reset Metrics to Default Baseline State
const trustScoreElem = document.getElementById('score-trust');
trustScoreElem.innerText = "3.2 / 10";
trustScoreElem.className = "text-3xl font-extrabold font-mono text-red-400 transition-colors duration-500";
document.getElementById('trust-desc').innerText = "Low visual authority & unoptimized contrast";
const valueElem = document.getElementById('score-value');
valueElem.innerText = "Low Margin";
valueElem.className = "text-2xl font-extrabold font-mono text-red-400 transition-colors duration-500";
document.getElementById('value-desc').innerText = "Limits pricing power and premium positioning";
const clarityElem = document.getElementById('score-clarity');
clarityElem.innerText = "41%";
clarityElem.className = "text-3xl font-extrabold font-mono text-yellow-500 transition-colors duration-500";
document.getElementById('clarity-desc').innerText = "High friction visual layout detected";
const conversionElem = document.getElementById('score-conversion');
conversionElem.innerText = "Needs Audit";
conversionElem.className = "text-2xl font-extrabold font-mono text-red-400 transition-colors duration-500";
document.getElementById('conversion-desc').innerText = "Lacks high-converting calls-to-action";
}
// Modal Controls
function openAuditModal() {
document.getElementById('audit-modal').classList.remove('hidden');
}
function closeAuditModal() {
document.getElementById('audit-modal').classList.add('hidden');
}
function handleAuditSubmit(e) {
e.preventDefault();
alert('Transformation proposal requested! A FluxDX Lead Strategist will contact you within 24 business hours.');
closeAuditModal();
}
// Counter Animation on Scroll
let countersAnimated = false;
window.addEventListener('scroll', () => {
const metricsSec = document.getElementById('metrics');
if (!metricsSec || countersAnimated) return;
const rect = metricsSec.getBoundingClientRect();
if (rect.top {
const target = parseInt(counter.getAttribute('data-target')) || 0;
let current = 0;
const step = Math.max(1, Math.ceil(target / 40));
const timer = setInterval(() => {
current += step;
if (current >= target) {
counter.innerText = target + (target === 3 ? 's' : '%');
clearInterval(timer);
} else {
counter.innerText = current + (target === 3 ? 's' : '%');
}
}, 30);
});
}
});
