<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>

    <div class="relative flex flex-col min-h-screen tk-proxima-nova">
        <video ref="videoRef" autoplay loop muted
            class="absolute top-0 blur-sm left-0 w-auto min-w-full min-h-full max-w-none z-[-1] object-cover"
            style="position: fixed;">
            <source src="/bg.mp4" type="video/mp4" />
            Your browser does not support the video tag.
        </video>

        <div class="absolute top-0 left-0 w-full h-full bg-black opacity-50 z-[-1]"></div>

        <div class="relative z-10">
            
            <div class="w-screen flex max-w-[1440px] mx-auto text-white flex-col justify-center px-6 lg:px-20 lg:flex-row h-screen">

        <div class="w-full lg:w-[60%] lg:mt-0 lg:h-full flex flex-col justify-center">

            <div class="absolute w-full lg:w-1/2 inset-y-0 lg:right-0 hidden lg:block">
                <span
                    class="absolute -left-6 lg:left-4 top-24 lg:top-28 w-24 h-24 rotate-90 skew-x-12 rounded-3xl bg-yellow-400 blur-xl opacity-60 lg:opacity-95 lg:block hidden"></span>
                <span class="absolute right-4 bottom-12 w-24 h-24 rounded-3xl bg-yellow-600 blur-xl opacity-80"></span>
            </div>
            <span
                class="w-4/12 lg:w-2/12 aspect-square bg-gradient-to-tr from-yellow-600 to-yellow-400 absolute -top-5 lg:left-0 rounded-full skew-y-12 blur-2xl opacity-40 skew-x-12 rotate-90"></span>

            <h1 class="w-max text-5xl lg:text-7xl text-center mx-auto lg:mx-2 lg:text-start font-bold">Printuri 3D Create <br /> Special Pentru <br /> <span
                    class="text-transparent bg-clip-text bg-gradient-to-br from-yellow-600 from-20% via-yellow-400 via-30% to-purple-600">
                    Tine</span></h1>


            <div class="w-full flex flex-row justify-center lg:justify-start">

            <p class="mt-8 ml-4 text-sm lg:text-lg text-center lg:text-start max-w-xl">Transformăm orice idee în realitate cu ajutorul printării
                3D! Indiferent de
                complexitate, aducem viziunea
                ta la viață cu precizie și atenție la detalii.</p>
            </div>

        </div>
        <div class="w-full lg:w-[40%] mt-10 lg:mt-0 lg:h-full flex flex-col lg:justify-center lg:items-center">

            <!--<img src="/images/hero.jpg" alt="hero" class="w-3/4 mx-auto border-2 border-solid border-white rounded-3xl" />-->
            <svg class="w-40 h-40 hidden lg:block text-white mx-auto" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="50" height="50" viewBox="0 0 50 50">
                <path fill="currentColor" d="M 49.029297 0.98632812 L 47.986328 1 C 47.986328 1 40.598263 1.0827039 33.552734 4.6054688 C 31.266002 5.7488348 28.987055 7.3041927 26.912109 9.2753906 L 26.902344 9.2832031 L 26.892578 9.2929688 C 24.356754 11.828823 20.761961 16.03623 17.484375 20 L 9 20 A 1.0001 1.0001 0 0 0 8.2324219 20.359375 L 3.2324219 26.359375 A 1.0001 1.0001 0 0 0 3.7597656 27.970703 L 9.8398438 29.470703 C 9.7984973 29.523418 9.5136719 29.882812 9.5136719 29.882812 L 9.3945312 30.033203 L 9.3398438 30.21875 C 9.3398438 30.21875 9.2633484 30.561044 9.2871094 30.898438 C 9.2964565 31.031166 9.3274503 31.194017 9.3613281 31.359375 A 1.0001 1.0001 0 0 0 9.3476562 31.378906 L 7.1523438 34.970703 C 7.1523438 34.970703 7.0528898 35.155031 7.0195312 35.277344 C 6.9861733 35.399657 6.9688321 35.537752 6.9707031 35.685547 C 6.9744431 35.981138 7.0520011 36.308999 7.2246094 36.695312 C 7.5698263 37.467942 8.2931567 38.508 9.8925781 40.107422 A 1.0001 1.0001 0 0 0 9.9042969 40.119141 C 11.501148 41.664481 12.53834 42.379066 13.289062 42.730469 C 13.664424 42.90617 13.972368 42.992586 14.25 43.013672 C 14.388816 43.024212 14.520327 43.017574 14.638672 42.996094 C 14.757017 42.974574 14.947266 42.894531 14.947266 42.894531 A 1.0001 1.0001 0 0 0 15.021484 42.853516 L 18.621094 40.652344 A 1.0001 1.0001 0 0 0 18.642578 40.638672 C 18.807119 40.672293 18.969382 40.703582 19.101562 40.712891 C 19.438956 40.736651 19.78125 40.660156 19.78125 40.660156 L 19.966797 40.605469 L 20.117188 40.486328 C 20.117188 40.486328 20.476853 40.201354 20.529297 40.160156 L 22.029297 46.240234 A 1.0001 1.0001 0 0 0 23.640625 46.767578 L 29.640625 41.767578 A 1.0001 1.0001 0 0 0 30 41 L 30 32.496094 C 33.961281 29.208477 38.148197 25.610598 40.607422 23.107422 L 40.609375 23.105469 C 42.702566 21.011733 44.162765 18.71158 45.294922 16.447266 C 48.814131 9.4087963 49 2.0273436 49 2.0273438 L 49.029297 0.98632812 z M 46.861328 3.125 C 46.768138 4.6297433 46.350016 9.8644209 43.505859 15.552734 C 42.438384 17.687685 41.099078 19.78764 39.193359 21.693359 L 39.189453 21.695312 L 39.1875 21.699219 C 36.785261 24.145135 32.518603 27.800785 28.529297 31.107422 A 1.0001 1.0001 0 0 0 28.214844 31.367188 C 23.582856 35.199041 19.411388 38.492857 19.154297 38.695312 C 19.033548 38.681753 18.856434 38.657641 18.525391 38.523438 C 17.770932 38.217576 16.442994 37.427369 14.507812 35.492188 C 12.572631 33.557006 11.782424 32.229068 11.476562 31.474609 C 11.342398 31.143526 11.31825 30.966452 11.304688 30.845703 C 11.505287 30.590413 14.763741 26.455014 18.580078 21.824219 A 1.0001 1.0001 0 0 0 18.927734 21.404297 C 22.201823 17.441453 25.819062 13.19789 28.296875 10.71875 C 30.22 8.8932089 32.336653 7.4498374 34.447266 6.3945312 C 40.128392 3.5539679 45.356599 3.1989128 46.861328 3.125 z M 34 11 C 31.254545 11 29 13.254545 29 16 C 29 18.745455 31.254545 21 34 21 C 36.745455 21 39 18.745455 39 16 C 39 13.254545 36.745455 11 34 11 z M 34 13 C 35.654545 13 37 14.345455 37 16 C 37 17.654545 35.654545 19 34 19 C 32.345455 19 31 17.654545 31 16 C 31 14.345455 32.345455 13 34 13 z M 9.46875 22 L 15.833984 22 C 13.917243 24.345629 12.349625 26.302305 11.203125 27.746094 L 5.7910156 26.412109 L 9.46875 22 z M 10.347656 33.574219 C 10.918684 34.485898 11.759161 35.571661 13.09375 36.90625 C 14.428339 38.240839 15.514102 39.081316 16.425781 39.652344 L 14.269531 40.96875 C 14.225741 40.95607 14.242791 40.969573 14.136719 40.919922 C 13.713405 40.721784 12.797835 40.134905 11.300781 38.6875 C 9.8078388 37.193037 9.2301539 36.280359 9.0507812 35.878906 C 9.0042905 35.774855 9.0181934 35.800268 9.0097656 35.765625 L 10.347656 33.574219 z M 28 34.150391 L 28 40.53125 L 23.587891 44.208984 L 22.253906 38.794922 C 23.698992 37.645173 25.653868 36.073521 28 34.150391 z M 6.3867188 38.210938 C 4.7536971 39.481065 3.2836627 39.65822 1.9511719 40.958984 C 1.2849265 41.609367 0.77362818 42.526787 0.4609375 43.794922 C 0.14824682 45.063056 0 46.705556 0 49 L 0 50 L 1 50 C 5.6037037 50 7.8714303 49.271077 9.2246094 47.902344 C 10.577788 46.533611 10.795287 44.999237 11.8125 43.583984 L 10.1875 42.416016 C 8.9047131 44.200763 8.6226022 45.664827 7.8007812 46.496094 C 7.0737742 47.231457 5.4328014 47.767343 2.09375 47.898438 C 2.145929 46.447949 2.2107544 45.050438 2.4023438 44.273438 C 2.652153 43.260322 2.9639018 42.765243 3.3476562 42.390625 C 4.1151655 41.64139 5.6463029 41.318936 7.6132812 39.789062 L 6.3867188 38.210938 z"></path>
            </svg>

            <h2 class="text-3xl font-bold mt-6 text-center">Ne lansăm curând!</h2>

            <div class="text-6xl text-center mt-6 flex w-full items-center justify-center">
            <div class="w-24 mx-1 p-2 bg-white text-[#F8C91B] rounded-lg">
                <div class="font-mono leading-none" id="zile">00</div>
                <div class="font-mono uppercase text-sm leading-none">Zile</div>
            </div>
            <div class="w-24 mx-1 p-2 bg-white text-[#DEA24E] rounded-lg">
                <div class="font-mono leading-none" id="ore">00</div>
                <div class="font-mono uppercase text-sm leading-none">Ore</div>
            </div>
            <div class="w-24 mx-1 p-2 bg-white text-[#C8817C] rounded-lg">
                <div class="font-mono leading-none" id="minute">00</div>
                <div class="font-mono uppercase text-sm leading-none">Minute</div>
            </div>
            <div class="w-24 mx-1 p-2 bg-white text-[#AB57B7] rounded-lg">
                <div class="font-mono leading-none" id="secunde">00</div>
                <div class="font-mono uppercase text-sm leading-none">Secunde</div>
            </div>
        </div>
        <p class="text-sm font-light text-center mt-3">Un concept &copy; HSCREATIVE. 2025.</p>

        </div>

    </div>

        </div>
    </div>

<script>
    const targetDate = new Date('2025-01-17T20:00:00').getTime();

    const timerInterval = setInterval(() => {
        const now = new Date().getTime();
        const timeLeft = targetDate - now;

        if (timeLeft <= 0) {
            clearInterval(timerInterval);
            document.getElementById('zile').innerText = '00';
            document.getElementById('ore').innerText = '00';
            document.getElementById('minute').innerText = '00';
            document.getElementById('secunde').innerText = '00';
            return;
        }

        const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
        const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

        document.getElementById('zile').innerText = String(days).padStart(2, '0');
        document.getElementById('ore').innerText = String(hours).padStart(2, '0');
        document.getElementById('minute').innerText = String(minutes).padStart(2, '0');
        document.getElementById('secunde').innerText = String(seconds).padStart(2, '0');
    }, 1000);
</script>


</body>
</html>