<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>MDAC Services | Premier Web Solutions</title>

    <script src="https://cdn.tailwindcss.com"></script>

    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;700;800&display=swap" rel="stylesheet">

    <style>

        body { background: #020617; color: white; font-family: 'Plus Jakarta Sans', sans-serif; }

        .glass { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); }

        .gradient-border:hover { border-color: #3b82f6; box-shadow: 0 0 30px rgba(59, 130, 246, 0.2); transition: all 0.4s ease; }

        .text-gradient { background: linear-gradient(to right, #60a5fa, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

    </style>

</head>

<body class="overflow-x-hidden">

    <nav class="flex justify-between items-center px-8 py-6 max-w-7xl mx-auto">

        <div class="text-2xl font-extrabold tracking-tighter">MDAC<span class="text-blue-500">SERVICES</span></div>

        <div class="hidden md:flex gap-8 items-center text-sm font-semibold text-slate-400">

            <a href="#services" class="hover:text-white transition">Services</a>

            <a href="#about" class="hover:text-white transition">Methodology</a>

            <a href="#contact" class="bg-blue-600 text-white px-6 py-2.5 rounded-full hover:bg-blue-500 transition shadow-lg shadow-blue-500/20">Contact Us</a>

        </div>

    </nav>

 

    <section class="max-w-6xl mx-auto px-6 pt-20 pb-32 text-center">

        <div class="inline-block px-4 py-1.5 mb-6 text-xs font-bold tracking-widest text-blue-400 uppercase border border-blue-500/20 rounded-full bg-blue-500/5">Now Accepting Clients for 2026</div>

        <h1 class="text-6xl md:text-8xl font-extrabold mb-8 tracking-tight leading-[1.1]">We engineer <span class="text-gradient">awesome</span> digital experiences.</h1>

        <p class="text-lg md:text-xl text-slate-400 max-w-2xl mx-auto mb-12">High-performance web development, AI integration, and cloud-native solutions built on the edge.</p>

        <div class="flex flex-col sm:flex-row justify-center gap-5">

            <a href="#contact" class="bg-white text-slate-950 px-10 py-4 rounded-2xl font-bold text-lg hover:scale-105 transition-transform">Get Started</a>

            <a href="#services" class="glass px-10 py-4 rounded-2xl font-bold text-lg hover:bg-white/10 transition">View Services</a>

        </div>

    </section>

 

    <section id="services" class="max-w-7xl mx-auto px-6 py-24 border-t border-slate-800">

        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">

            <div class="glass p-10 rounded-3xl gradient-border">

                <div class="w-12 h-12 bg-blue-500/20 rounded-xl mb-6 flex items-center justify-center text-blue-400"></div>

                <h3 class="text-2xl font-bold mb-4">Edge Speed</h3>

                <p class="text-slate-400">Lightning-fast deployment on global networks for sub-second load times.</p>

            </div>

            <div class="glass p-10 rounded-3xl gradient-border">

                <div class="w-12 h-12 bg-purple-500/20 rounded-xl mb-6 flex items-center justify-center text-purple-400">🤖</div>

                <h3 class="text-2xl font-bold mb-4">AI Integration</h3>

                <p class="text-slate-400">Smart features that learn and adapt to your users' specific needs.</p>

            </div>

            <div class="glass p-10 rounded-3xl gradient-border">

                <div class="w-12 h-12 bg-emerald-500/20 rounded-xl mb-6 flex items-center justify-center text-emerald-400">💎</div>

                <h3 class="text-2xl font-bold mb-4">Bespoke Design</h3>

                <p class="text-slate-400">Custom aesthetics that make your brand stand out in a crowded market.</p>

            </div>

        </div>

    </section>

 

    <section id="contact" class="max-w-4xl mx-auto px-6 py-32 text-center">

        <div class="glass p-12 rounded-[3rem] border-blue-500/20">

            <h2 class="text-4xl font-bold mb-4">Ready to build something awesome?</h2>

            <p class="text-slate-400 mb-10">Drop us a line and let's discuss your next project.</p>

            <a href="mailto:hello@mdacservices.com" class="text-2xl font-bold text-blue-400 hover:text-blue-300 underline underline-offset-8">hello@mdacservices.com</a>

        </div>

    </section>

 

    <footer class="py-12 text-center text-slate-600 text-sm border-t border-slate-900">

        &copy; 2026 MDAC Services. All rights reserved.

    </footer>

</body>

</html>