<!DOCTYPE html>

<head>

<title>MMC Creative Group | Digital Innovation</title>

tailwind.config = {

theme: {

extend: {

colors: {

'brand-dark': '#0b2e3b',

'brand-darker': '#051820',

'brand-light': '#E0F2F1',

'brand-accent': '#48C9B0',

'brand-text': '#212529',

'brand-secondary': '#6C757D',

fontFamily: {

sans: ['Inter', 'sans-serif'],

}

</script>

<style>

html, body {

margin: 0;

padding: 0;

width: 100%;

overflow-x: hidden; /* Allow vertical scroll, prevent horizontal */

background-color: #0b2e3b; /* Fallback */

}

/* Fixed 3D Background */

#canvas-container {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 0;

background: linear-gradient(to bottom, #0b2e3b, #051820);

pointer-events: none;

}

/* Content Wrapper */

#app-content {

position: relative;

z-index: 10;

min-height: 100vh;

display: flex;

flex-direction: column;

}

/* Navigation */

.glass-nav {

background: rgba(11, 46, 59, 0.85);

backdrop-filter: blur(12px);

-webkit-backdrop-filter: blur(12px);

border-bottom: 1px solid rgba(255, 255, 255, 0.1);

height: 70px; /* Fixed height for calculations */

}

.nav-link {

position: relative;

}

.nav-link::after {

content: '';

position: absolute;

width: 0;

height: 2px;

bottom: -4px;

left: 0;

background-color: #48C9B0;

transition: width 0.3s ease;

}

.nav-link:hover::after, .nav-link.active::after {

width: 100%;

}

/* Page Transitions & Layout */

.page-view {

display: none;

opacity: 0;

transition: opacity 0.5s ease-in-out;

min-height: 100vh;

padding-top: 70px; /* Match nav height */

padding-bottom: 40px;

}

.page-view.active {

display: block;

opacity: 1;

animation: fadeIn 0.6s ease-out forwards;

}

/* Container for "One Screen" feel */

.screen-container {

min-height: calc(100vh - 70px);

display: flex;

flex-direction: column;

justify-content: center; /* Center content vertically */

padding: 1rem 1.5rem; /* Minimal padding */

}

/* Ensure content doesn't get hidden under nav on short screens */

@media (max-height: 700px) {

.screen-container {

justify-content: flex-start;

padding-top: 2rem;

}

@keyframes fadeIn {

from { opacity: 0; transform: translateY(10px); }

to { opacity: 1; transform: translateY(0); }

}

/* 3D Tilt Card */

.tilt-card {

transition: transform 0.1s ease, box-shadow 0.3s ease;

transform-style: preserve-3d;

perspective: 1000px;

}

.tilt-card:hover {

z-index: 20;

box-shadow: 0 20px 40px rgba(0,0,0,0.2);

}

/* Form Styling */

.form-input {

background: rgba(255, 255, 255, 0.05);

border: 1px solid rgba(255, 255, 255, 0.1);

color: white;

transition: all 0.3s ease;

}

.form-input:focus {

background: rgba(255, 255, 255, 0.1);

border-color: #48C9B0;

outline: none;

box-shadow: 0 0 10px rgba(72, 201, 176, 0.2);

}

/* Custom Scrollbar */

::-webkit-scrollbar { width: 8px; }

::-webkit-scrollbar-track { background: #0b2e3b; }

::-webkit-scrollbar-thumb { background: #48C9B0; border-radius: 4px; }

</style>

</head>

MMC <span class="text-brand-accent group-hover:text-white transition-colors">CREATIVE</span>

</a>

<a href="#services" class="nav-link text-white/80 hover:text-white font-medium text-sm tracking-wide transition-colors">SERVICES</a>

<a href="#about" class="nav-link text-white/80 hover:text-white font-medium text-sm tracking-wide transition-colors">ABOUT</a>

<a href="#contact" class="px-5 py-2 bg-brand-accent text-brand-dark font-bold rounded-full hover:bg-white transition-all duration-300 text-sm">GET IN TOUCH</a>

</div>

</button>

</div>

<a href="#services" class="text-white block py-2" onclick="document.getElementById('mobile-menu').classList.add('hidden')">Services</a>

<a href="#about" class="text-white block py-2" onclick="document.getElementById('mobile-menu').classList.add('hidden')">About</a>

<a href="#contact" class="text-brand-accent block py-2 font-bold" onclick="document.getElementById('mobile-menu').classList.add('hidden')">Contact</a>

</div>

</nav>

Digital Development Agency

</span>

BUILDING <br/><span class="text-transparent bg-clip-text bg-gradient-to-r from-brand-accent to-emerald-300">TOMORROW</span>

</h1>

We design and build high-performance digital ecosystems. Websites, Mobile Apps, & Scalable Platforms.

</p>

</div>

<h2 class="text-2xl font-bold text-white mb-4">Strategic Code.<br>Modern Design.</h2>

MMC Creative Group partners with ambitious brands to build digital products that scale. We don't just make things look good; we engineer them to perform.

</p>

<div class="flex items-center text-white text-sm font-medium"><span class="w-1.5 h-1.5 bg-brand-accent rounded-full mr-2"></span>Custom Websites</div>

<div class="flex items-center text-white text-sm font-medium"><span class="w-1.5 h-1.5 bg-brand-accent rounded-full mr-2"></span>Mobile Apps</div>

<div class="flex items-center text-white text-sm font-medium"><span class="w-1.5 h-1.5 bg-brand-accent rounded-full mr-2"></span>Web Applications</div>

<div class="flex items-center text-white text-sm font-medium"><span class="w-1.5 h-1.5 bg-brand-accent rounded-full mr-2"></span>UI/UX Design</div>

</div>

<span class="text-brand-accent font-bold tracking-widest uppercase text-xs">Capabilities</span>

<h2 class="text-3xl md:text-4xl font-bold text-white mt-1">What We Build</h2>

</div>

</div>

<h3 class="text-lg font-bold text-brand-dark mb-2 group-hover:text-brand-accent transition-colors">Custom Websites</h3>

<p class="text-brand-secondary text-sm mb-3 leading-snug">Responsive, blazing-fast websites using modern frameworks. Immersive landing pages to complex corporate sites.</p>

<li class="flex items-center"><span class="w-1.5 h-1.5 bg-brand-accent rounded-full mr-2"></span>React / Next.js</li>

<li class="flex items-center"><span class="w-1.5 h-1.5 bg-brand-accent rounded-full mr-2"></span>Tailwind CSS</li>

</ul>

</div>

</div>

<h3 class="text-lg font-bold text-brand-dark mb-2 group-hover:text-brand-accent transition-colors">Mobile Applications</h3>

<p class="text-brand-secondary text-sm mb-3 leading-snug">Native and cross-platform mobile apps designed for iOS and Android. Focused on performance and user retention.</p>

<li class="flex items-center"><span class="w-1.5 h-1.5 bg-brand-accent rounded-full mr-2"></span>iOS & Android</li>

<li class="flex items-center"><span class="w-1.5 h-1.5 bg-brand-accent rounded-full mr-2"></span>React Native</li>

</ul>

</div>

</div>

<h3 class="text-lg font-bold text-brand-dark mb-2 group-hover:text-brand-accent transition-colors">Web Applications</h3>

<p class="text-brand-secondary text-sm mb-3 leading-snug">Scalable SaaS platforms and custom dashboards. We build the engine that powers your digital business.</p>

<li class="flex items-center"><span class="w-1.5 h-1.5 bg-brand-accent rounded-full mr-2"></span>SaaS Development</li>

<li class="flex items-center"><span class="w-1.5 h-1.5 bg-brand-accent rounded-full mr-2"></span>Database Architecture</li>

</ul>

</div>

</div>

<h3 class="text-lg font-bold text-brand-dark mb-2 group-hover:text-brand-accent transition-colors">UI/UX Design</h3>

<p class="text-brand-secondary text-sm mb-3 leading-snug">User-centric design is at the core of our development. We ensure your app looks as good as it functions.</p>

<li class="flex items-center"><span class="w-1.5 h-1.5 bg-brand-accent rounded-full mr-2"></span>Wireframing</li>

<li class="flex items-center"><span class="w-1.5 h-1.5 bg-brand-accent rounded-full mr-2"></span>Interactive Prototypes</li>

</ul>

</div>

<span class="text-brand-accent font-bold tracking-widest uppercase text-xs mb-2 block">About Us</span>

<h1 class="text-4xl md:text-5xl font-black mb-6">Forward thinking,<br>Code driven.</h1>

In a rapidly evolving digital landscape, you need a partner who builds for tomorrow, not just for today.

</p>

<p>

MMC Creative Group is a modern development agency dedicated to crafting exceptional web and mobile experiences. As digital natives, we are untethered by legacy systems and fueled by the latest technologies. We bridge the gap between creative ambition and technical execution, ensuring every line of code serves a strategic purpose.

</p>

<p>

Whether you are launching a new product or scaling an existing platform, our team is ready to turn your vision into a robust, deployed reality.

</p>

</div>

<h3 class="text-xl font-bold text-brand-accent mb-1">Modern</h3>

<p class="text-xs text-brand-light uppercase tracking-wide">Tech Stack</p>

</div>

<h3 class="text-xl font-bold text-brand-accent mb-1">Agile</h3>

<p class="text-xs text-brand-light uppercase tracking-wide">Development</p>

</div>

<h3 class="text-xl font-bold text-brand-accent mb-1">Scalable</h3>

<p class="text-xs text-brand-light uppercase tracking-wide">Architecture</p>

</div>

<h3 class="text-xl font-bold text-brand-accent mb-1">Client</h3>

<p class="text-xs text-brand-light uppercase tracking-wide">Focused</p>

</div>

<span class="text-brand-accent font-bold tracking-widest uppercase text-xs mb-2 block">Get In Touch</span>

<h1 class="text-3xl md:text-5xl font-black mb-4">Let's build something<br>extraordinary.</h1>

Ready to start your next project? We're currently accepting new partnerships.

</p>

</div>

<div>

<h4 class="text-sm font-bold">Availability</h4>

<p class="text-brand-light text-sm">Accepting new projects for Q2</p>

</div>

</div>

<div>

<h4 class="text-sm font-bold">Response Time</h4>

<p class="text-brand-light text-sm">We reply within 24 hours</p>

</div>

<div>

<label class="block text-brand-secondary text-xs font-bold mb-1">First Name</label>

</div>

<div>

</div>

<div>

<label class="block text-brand-secondary text-xs font-bold mb-1">Email</label>

</div>

<div>

<label class="block text-brand-secondary text-xs font-bold mb-1">Project</label>

<option class="bg-brand-dark" value="Web Design & Dev">Website Development</option>

<option class="bg-brand-dark" value="Mobile App">Mobile App Development</option>

<option class="bg-brand-dark" value="Web Application">Web Application (SaaS)</option>

</select>

</div>

<div>

<label class="block text-brand-secondary text-xs font-bold mb-1">Message</label>

</div>

Send Message

</button>

</form>

</div>

// --- SPA ROUTER & SEO ---

const routes = {

'home': {

title: 'MMC Creative Group | Digital Innovation',

desc: 'MMC Creative Group is a strategic digital agency specializing in web design, video production, and creative systems.'

'services': {

title: 'Services | MMC Creative Group',

desc: 'Explore our services: Web Design, Video Editing, Digital Products, and Creative Systems.'

'about': {

title: 'About Us | MMC Creative Group',

desc: 'We are a multidisciplinary team of designers and developers building the future of digital.'

'contact': {

title: 'Contact | MMC Creative Group',

desc: 'Get in touch with MMC Creative Group to start your next project.'

}

};

const handleRoute = () => {

// Get hash or default to home

let hash = window.location.hash.slice(1) || 'home';

if (!routes[hash]) hash = 'home';

// Update Title & Meta

document.title = routes[hash].title;

const metaDesc = document.querySelector('meta[name="description"]');

if(metaDesc) metaDesc.setAttribute('content', routes[hash].desc);

// Hide all views

document.querySelectorAll('.page-view').forEach(el => {

el.classList.remove('active');

});

// Show current view

const activeView = document.getElementById(`view-${hash}`);

if (activeView) {

activeView.classList.add('active');

window.scrollTo(0, 0);

}

// Update Nav Active State

document.querySelectorAll('.nav-link').forEach(link => {

link.classList.remove('active');

if(link.getAttribute('href') === `#${hash}`) {

link.classList.add('active');

}

});

};

// Listen for hash changes

window.addEventListener('hashchange', handleRoute);

// Initial load

window.addEventListener('DOMContentLoaded', handleRoute);

// --- CONTACT FORM HANDLING ---

const contactForm = document.getElementById('contact-form');

if (contactForm) {

contactForm.addEventListener('submit', async function(event) {

event.preventDefault();

const status = document.getElementById('contact-status');

const data = new FormData(event.target);

status.innerHTML = "Sending...";

status.className = "text-brand-accent text-sm mt-2"; // Styling

fetch(event.target.action, {

method: contactForm.method,

body: data,

headers: {

'Accept': 'application/json'

}

}).then(response => {

if (response.ok) {

status.innerHTML = "Thanks for your submission!";

contactForm.reset();

} else {

response.json().then(data => {

if (Object.hasOwn(data, 'errors')) {

status.innerHTML = data["errors"].map(error => error["message"]).join(", ");

} else {

status.innerHTML = "Oops! There was a problem submitting your form";

}

})

}

}).catch(error => {

status.innerHTML = "Oops! There was a problem submitting your form";

});

}

// --- THREE.JS 3D SCENE SETUP ---

const init3D = () => {

const container = document.getElementById('canvas-container');

if (!container) return;

// Scene setup

const scene = new THREE.Scene();

// Fog to blend objects into background

scene.fog = new THREE.FogExp2(0x0b2e3b, 0.002);

// Camera setup

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

camera.position.z = 30;

// Renderer setup

const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });

renderer.setSize(window.innerWidth, window.innerHeight);

renderer.setPixelRatio(window.devicePixelRatio);

container.appendChild(renderer.domElement);

// Objects: Floating Shapes

const geometryGroup = new THREE.Group();

scene.add(geometryGroup);

// Create many floating particles/shapes

const particleCount = 60;

const shapes = [];

// Geometries

const geomIco = new THREE.IcosahedronGeometry(1, 0);

const geomTetra = new THREE.TetrahedronGeometry(1, 0);

// Material - Wireframe style with brand colors

const materialAccent = new THREE.MeshBasicMaterial({

color: 0x48C9B0,

wireframe: true,

transparent: true,

opacity: 0.4

});

const materialWhite = new THREE.MeshBasicMaterial({

color: 0xffffff,

wireframe: true,

transparent: true,

opacity: 0.1

});

for (let i = 0; i < particleCount; i++) {

const isAccent = Math.random() > 0.7;

const mesh = new THREE.Mesh(

Math.random() > 0.5 ? geomIco : geomTetra,

isAccent ? materialAccent : materialWhite

);

// Random position spread

mesh.position.x = (Math.random() - 0.5) * 100;

mesh.position.y = (Math.random() - 0.5) * 60;

mesh.position.z = (Math.random() - 0.5) * 40;

// Random scale

const scale = Math.random() * 2 + 0.5;

mesh.scale.set(scale, scale, scale);

// Store rotation speed and movement speed

mesh.userData = {

rotSpeedX: (Math.random() - 0.5) * 0.02,

rotSpeedY: (Math.random() - 0.5) * 0.02,

velY: (Math.random() * 0.05) + 0.01, // Move up slowly

initialY: mesh.position.y

};

geometryGroup.add(mesh);

shapes.push(mesh);

}

// Interactive Mouse Movement

let mouseX = 0;

let mouseY = 0;

let targetX = 0;

let targetY = 0;

const windowHalfX = window.innerWidth / 2;

const windowHalfY = window.innerHeight / 2;

document.addEventListener('mousemove', (event) => {

mouseX = (event.clientX - windowHalfX);

mouseY = (event.clientY - windowHalfY);

});

// Animation Loop

const animate = () => {

requestAnimationFrame(animate);

targetX = mouseX * 0.001;

targetY = mouseY * 0.001;

// Smooth rotation of the entire group based on mouse

geometryGroup.rotation.y += 0.05 * (targetX - geometryGroup.rotation.y);

geometryGroup.rotation.x += 0.05 * (targetY - geometryGroup.rotation.x);

// Animate individual shapes

shapes.forEach(mesh => {

mesh.rotation.x += mesh.userData.rotSpeedX;

mesh.rotation.y += mesh.userData.rotSpeedY;

// Float Upwards effect

mesh.position.y += mesh.userData.velY;

// Reset if too high

if (mesh.position.y > 40) {

mesh.position.y = -40;

}

});

renderer.render(scene, camera);

};

animate();

// Resize Handler

window.addEventListener('resize', () => {

camera.aspect = window.innerWidth / window.innerHeight;

camera.updateProjectionMatrix();

renderer.setSize(window.innerWidth, window.innerHeight);

});

};

// --- 3D TILT EFFECT FOR CARDS (Vanilla JS) ---

const initTilt = () => {

const cards = document.querySelectorAll('.tilt-card');

cards.forEach(card => {

card.addEventListener('mousemove', (e) => {

const rect = card.getBoundingClientRect();

const x = e.clientX - rect.left;

const y = e.clientY - rect.top;

const centerX = rect.width / 2;

const centerY = rect.height / 2;

const rotateX = ((y - centerY) / centerY) * -5; // Max -5deg to 5deg

const rotateY = ((x - centerX) / centerX) * 5;

card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.02, 1.02, 1.02)`;

});

card.addEventListener('mouseleave', () => {

card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)';

});

};

// Run Inits on Load

window.addEventListener('DOMContentLoaded', () => {

init3D();

initTilt();

});

</script>

</body>

</html>