Spaces:
Running
Running
please a bit extend the modico site : http://www.copycomp.sk/peciatky-modico/cennik-peciatok-modico-a-online-objednavka http://www.copycomp.sk/peciatky-modico here are the sites. it can be as it is right now in one page, just add a pop up window for the formular maybe, and scrape the images for the modico http://www.copycomp.sk/wp-content/themes/copycomp/images/peciatky/velkoplosne-peciatky.jpg http://www.copycomp.sk/wp-content/themes/copycomp/images/peciatky/vreckove-gulate-peciatky.jpg etc etc - Follow Up Deployment
beef90a
verified
| <html lang="sk"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CopyComp - Kancelárske potreby, pečiatky a lacné tonery</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .sticky-nav { | |
| } | |
| .modal { | |
| transition: opacity 0.3s ease; | |
| } | |
| position: sticky; | |
| top: 0; | |
| z-index: 50; | |
| } | |
| .service-icon { | |
| font-size: 2.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <!-- Header with Navigation --> | |
| <header class="sticky-nav bg-white shadow-md"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <img src="http://www.copycomp.sk/wp-content/themes/copycomp/images/copycomp-logo.png" alt="CopyComp Logo" class="h-10 mr-3"> | |
| <h1 class="text-xl font-bold text-blue-800">CopyComp</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-6"> | |
| <a href="#home" class="text-blue-600 hover:text-blue-800 font-medium">Domov</a> | |
| <a href="#services" class="text-gray-600 hover:text-blue-800 font-medium">Služby</a> | |
| <a href="#stamps" class="text-gray-600 hover:text-blue-800 font-medium">Pečiatky</a> | |
| <a href="#equipment" class="text-gray-600 hover:text-blue-800 font-medium">Zariadenia</a> | |
| <a href="#contact" class="text-gray-600 hover:text-blue-800 font-medium">Kontakt</a> | |
| </nav> | |
| <button class="md:hidden text-gray-600"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section id="home" class="hero-gradient text-white py-16 md:py-24"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h1 class="text-3xl md:text-5xl font-bold mb-6">CopyComp - Kancelárske potreby, pečiatky a lacné tonery</h1> | |
| <p class="text-xl md:text-2xl mb-8">Vítajte na stránke CopyCompu. Vyberte si tému ktorá Vás zaujíma!</p> | |
| <a href="#contact" class="bg-white text-blue-600 font-bold py-3 px-8 rounded-full hover:bg-blue-50 transition duration-300 inline-block"> | |
| Žiadosť o ponuku | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Main Services Grid --> | |
| <section id="services" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Naše služby</h2> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Office Equipment Card --> | |
| <div class="bg-blue-50 rounded-xl p-6 shadow-lg card-hover border-t-4 border-blue-500"> | |
| <div class="text-center"> | |
| <i class="fas fa-print service-icon text-blue-600"></i> | |
| <h3 class="text-xl font-bold mb-3 text-blue-800">Kancelárska technika</h3> | |
| </div> | |
| <p class="text-gray-700 mb-4"> | |
| Ponúkame na predaj a na prenájom značkové tlačiarne a multifunkčné zariadenia, príslušenstvo do kancelárií. | |
| Ak nemáte peniaze na kúpu kvalitnej tlačiarne prenajmite naše stroje od 0,01 centov. | |
| </p> | |
| <div class="mb-4"> | |
| <h4 class="font-semibold text-blue-700">Výhody:</h4> | |
| <ul class="list-disc list-inside text-sm text-gray-600"> | |
| <li>Značkové tlačiarne a MF zariadenia</li> | |
| <li>Predaj aj prenájom</li> | |
| <li>Prenájom od 0,01€ za stranu</li> | |
| <li>Kompletný servis zadarmo</li> | |
| </ul> | |
| </div> | |
| <a href="#equipment" class="text-blue-600 font-medium hover:text-blue-800 inline-flex items-center"> | |
| Viac informácií <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Toners Card --> | |
| <div class="bg-green-50 rounded-xl p-6 shadow-lg card-hover border-t-4 border-green-500"> | |
| <div class="text-center"> | |
| <i class="fas fa-tint service-icon text-green-600"></i> | |
| <h3 class="text-xl font-bold mb-3 text-green-800">Tonery</h3> | |
| </div> | |
| <p class="text-gray-700 mb-4"> | |
| Potrebujete lacný toner alebo náplň do vašej tlačiarne? Ponúkame Vám kvalitné tonery a náplňe za výhodné ceny. | |
| Ponuka pre firmy, vyberte si u nás. Široký sortiment za nízke ceny. Posielame po celom Slovensku! | |
| </p> | |
| <div class="mb-4"> | |
| <h4 class="font-semibold text-green-700">Výhody:</h4> | |
| <ul class="list-disc list-inside text-sm text-gray-600"> | |
| <li>Kvalitné tonery za výhodné ceny</li> | |
| <li>Široký sortiment pre všetky značky</li> | |
| <li>Doručenie po celom Slovensku</li> | |
| <li>Expresné dodanie</li> | |
| </ul> | |
| </div> | |
| <a href="#toners" class="text-green-600 font-medium hover:text-green-800 inline-flex items-center"> | |
| Viac informácií <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- IT Services Card --> | |
| <div class="bg-purple-50 rounded-xl p-6 shadow-lg card-hover border-t-4 border-purple-500"> | |
| <div class="text-center"> | |
| <i class="fas fa-laptop service-icon text-purple-600"></i> | |
| <h3 class="text-xl font-bold mb-3 text-purple-800">Servis a služby</h3> | |
| </div> | |
| <p class="text-gray-700 mb-4"> | |
| Prvom rade ponúkame pozáručnú opravu notebookov na professionalnej úrovni. Medzi naše ďalšie služby sú správca | |
| počítačových sietí, výroba a google optimalizácia webových strán. | |
| </p> | |
| <div class="mb-4"> | |
| <h4 class="font-semibold text-purple-700">Služby:</h4> | |
| <ul class="list-disc list-inside text-sm text-gray-600"> | |
| <li>Pozáručné opravy notebookov</li> | |
| <li>Správa počítačových sietí</li> | |
| <li>Tvorba webových stránok</li> | |
| <li>SEO optimalizácia</li> | |
| </ul> | |
| </div> | |
| <a href="#it-services" class="text-purple-600 font-medium hover:text-purple-800 inline-flex items-center"> | |
| Viac informácií <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Modico Stamps Card --> | |
| <div class="bg-red-50 rounded-xl p-6 shadow-lg card-hover border-t-4 border-red-500"> | |
| <div class="text-center"> | |
| <i class="fas fa-stamp service-icon text-red-600"></i> | |
| <h3 class="text-xl font-bold mb-3 text-red-800">Modico pečiatky</h3> | |
| </div> | |
| <p class="text-gray-700 mb-4"> | |
| Novinka so svete pečiatok. Vyrobíme vám pečiatky do 5 minút od prijatia objednávky. Štočok s rozlíšením 1200dpi | |
| umožňuje tlačiť tenké čiary a drobné písmo. Vyrobíme Vám pečiatku aj s fotografiou. | |
| </p> | |
| <div class="mb-4"> | |
| <h4 class="font-semibold text-red-700">Výhody:</h4> | |
| <ul class="list-disc list-inside text-sm text-gray-600"> | |
| <li>Výroba do 5 minút</li> | |
| <li>Vysoké rozlíšenie 1200dpi</li> | |
| <li>Možnosť fotopečiatok</li> | |
| <li>Ekologická výroba</li> | |
| </ul> | |
| </div> | |
| <a href="#stamps" class="text-red-600 font-medium hover:text-red-800 inline-flex items-center"> | |
| Viac informácií <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Modico Stamps Section --> | |
| <section id="stamps" class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">M O D I C O – kvalitné pečiatky za dobrú cenu</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto"> | |
| Revolučná technológia výroby pečiatok s vysokým rozlíšením a rýchlou dodávkou | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-8 items-center"> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <img src="http://www.copycomp.sk/wp-content/themes/copycomp/images/peciatky/velkoplosne-peciatky.jpg" alt="Veľkoplošné pečiatky" class="rounded-lg shadow-xl w-full"> | |
| <img src="http://www.copycomp.sk/wp-content/themes/copycomp/images/peciatky/vreckove-gulate-peciatky.jpg" alt="Vreckové guľaté pečiatky" class="rounded-lg shadow-xl w-full"> | |
| <img src="http://www.copycomp.sk/wp-content/themes/copycomp/images/peciatky/automaticka-peciatka.jpg" alt="Automatická pečiatka" class="rounded-lg shadow-xl w-full"> | |
| <img src="http://www.copycomp.sk/wp-content/themes/copycomp/images/peciatky/pera-s-peciatkou.jpg" alt="Perá s pečiatkou" class="rounded-lg shadow-xl w-full"> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold text-red-600 mb-4">Technológia MODICO</h3> | |
| <p class="text-gray-700 mb-4"> | |
| Na výrobu pečiatok MODICO sa využíva nová, revolučná flash-technológia, ktorá bola vyvinutá v Japonsku. | |
| Táto technológia funguje na princípe záblesku. | |
| </p> | |
| <p class="text-gray-700 mb-4"> | |
| Výroba takýchto pečiatok je omnoho ekologickejšia než pečiatky vyrobené pomocou polyméru ktoré využívajú | |
| Colop a Trodat. Pečiatky MODICO ponúkajú vyžší štandard ako pečiatky na báze polyméru alebo gumy. | |
| </p> | |
| <p class="text-gray-700 mb-6"> | |
| S pečiatkami MODICO je možné tlačiť najmenšie písmená, ponúkajú vyžšie detaily a odtiene farieb. Neobsahujú | |
| otáčací mechanizmus čím vzniká menšia šanca na poruchu. Dovolujú tlačiť fotografie. | |
| </p> | |
| <button onclick="openModal()" class="bg-red-600 text-white font-bold py-3 px-6 rounded-lg hover:bg-red-700 transition duration-300 inline-block"> | |
| Objednať pečiatku | |
| </button> | |
| <div class="mt-8"> | |
| <h4 class="font-bold text-xl mb-4 text-red-600">Cenník pečiatok MODICO</h4> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full bg-white rounded-lg overflow-hidden"> | |
| <thead class="bg-red-600 text-white"> | |
| <tr> | |
| <th class="py-3 px-4 text-left">Typ pečiatky</th> | |
| <th class="py-3 px-4 text-left">Rozmer</th> | |
| <th class="py-3 px-4 text-left">Cena bez DPH</th> | |
| <th class="py-3 px-4 text-left">Cena s DPH</th> | |
| </tr> | |
| </thead> | |
| <tbody class="divide-y divide-gray-200"> | |
| <tr> | |
| <td class="py-3 px-4">Vrecková guľatá</td> | |
| <td class="py-3 px-4">Ø 25 mm</td> | |
| <td class="py-3 px-4">7,44 €</td> | |
| <td class="py-3 px-4">9,00 €</td> | |
| </tr> | |
| <tr class="bg-gray-50"> | |
| <td class="py-3 px-4">Vrecková guľatá</td> | |
| <td class="py-3 px-4">Ø 38 mm</td> | |
| <td class="py-3 px-4">9,92 €</td> | |
| <td class="py-3 px-4">12,00 €</td> | |
| </tr> | |
| <tr> | |
| <td class="py-3 px-4">Automatická</td> | |
| <td class="py-3 px-4">Ø 25 mm</td> | |
| <td class="py-3 px-4">14,88 €</td> | |
| <td class="py-3 px-4">18,00 €</td> | |
| </tr> | |
| <tr class="bg-gray-50"> | |
| <td class="py-3 px-4">Automatická</td> | |
| <td class="py-3 px-4">Ø 38 mm</td> | |
| <td class="py-3 px-4">19,83 €</td> | |
| <td class="py-3 px-4">24,00 €</td> | |
| </tr> | |
| <tr> | |
| <td class="py-3 px-4">Veľkoplošná</td> | |
| <td class="py-3 px-4">50x90 mm</td> | |
| <td class="py-3 px-4">24,79 €</td> | |
| <td class="py-3 px-4">30,00 €</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <p class="text-sm text-gray-500 mt-2">* Ceny sú orientačné, pre presnú cenovú ponuku nás kontaktujte</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-16 grid md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <div class="text-red-600 mb-4"> | |
| <i class="fas fa-bolt text-3xl"></i> | |
| </div> | |
| <h4 class="font-bold text-lg mb-2">Rýchla výroba</h4> | |
| <p class="text-gray-600">Pečiatku vyrobíme do 5 minút od prijatia objednávky. Ideálne pre urgentné prípady.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <div class="text-red-600 mb-4"> | |
| <i class="fas fa-expand text-3xl"></i> | |
| </div> | |
| <h4 class="font-bold text-lg mb-2">Vysoké rozlíšenie</h4> | |
| <p class="text-gray-600">Štočok s rozlíšením 1200dpi umožňuje tlačiť tenké čiary a drobné písmo.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <div class="text-red-600 mb-4"> | |
| <i class="fas fa-camera text-3xl"></i> | |
| </div> | |
| <h4 class="font-bold text-lg mb-2">Fotopečiatky</h4> | |
| <p class="text-gray-600">Vyrobíme Vám pečiatku aj s fotografiou alebo môžete mať perá s pečiatkou.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Equipment Section --> | |
| <section id="equipment" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Ponuka zariadení</h2> | |
| <div class="mb-12 bg-blue-50 rounded-xl p-8 text-center"> | |
| <h3 class="text-2xl font-bold text-blue-800 mb-4">Výhodný prenájom tlačiarní</h3> | |
| <p class="text-lg text-gray-700 mb-4"> | |
| Mesačný poplatok od 0€ s poplatkom za tlač len 0,01€ za stranu. Kompletný servis a tonery sú v cene! | |
| </p> | |
| <a href="#contact" class="bg-blue-600 text-white font-bold py-3 px-8 rounded-full hover:bg-blue-700 transition duration-300 inline-block"> | |
| Žiadosť o ponuku | |
| </a> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <!-- Kyocera FS-1128 --> | |
| <div class="border border-gray-200 rounded-lg overflow-hidden shadow-lg"> | |
| <div class="bg-gray-100 p-4"> | |
| <h3 class="text-xl font-bold text-gray-800">Kyocera FS-1128</h3> | |
| <p class="text-gray-600">Multifunkčné zariadenie</p> | |
| </div> | |
| <div class="p-6"> | |
| <img src="https://via.placeholder.com/400x300" alt="Kyocera FS-1128" class="w-full mb-4 rounded"> | |
| <div class="mb-4"> | |
| <h4 class="font-semibold text-blue-700 mb-2">Technické parametre:</h4> | |
| <ul class="space-y-2 text-sm text-gray-700"> | |
| <li><span class="font-medium">Technológia:</span> Laserová technológia Kyocera ECOSYS</li> | |
| <li><span class="font-medium">Rýchlosť:</span> 28 strán A4/min</li> | |
| <li><span class="font-medium">Duplex:</span> Áno</li> | |
| <li><span class="font-medium">Rozlíšenie:</span> 1200 x 1200 dpi</li> | |
| <li><span class="font-medium">Pamäť:</span> 256 MB (max. 768MB)</li> | |
| <li><span class="font-medium">Rozmery:</span> 494 x 410 x 366 mm</li> | |
| </ul> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-blue-600 font-bold">0,01€/strana</span> | |
| <a href="#contact" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 text-sm"> | |
| Objednať | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Kyocera KM-3035 --> | |
| <div class="border border-gray-200 rounded-lg overflow-hidden shadow-lg"> | |
| <div class="bg-gray-100 p-4"> | |
| <h3 class="text-xl font-bold text-gray-800">Kyocera KM-3035</h3> | |
| <p class="text-gray-600">Vysokovýkonné zariadenie</p> | |
| </div> | |
| <div class="p-6"> | |
| <img src="https://via.placeholder.com/400x300" alt="Kyocera KM-3035" class="w-full mb-4 rounded"> | |
| <div class="mb-4"> | |
| <h4 class="font-semibold text-blue-700 mb-2">Technické parametre:</h4> | |
| <ul class="space-y-2 text-sm text-gray-700"> | |
| <li><span class="font-medium">Technológia:</span> Laserová technológia Kyocera Mita</li> | |
| <li><span class="font-medium">Rýchlosť:</span> 30 strán A4/min, 20 A3/min</li> | |
| <li><span class="font-medium">Duplex:</span> Áno</li> | |
| <li><span class="font-medium">Rozlíšenie:</span> 1200 dpi</li> | |
| <li><span class="font-medium">Pamäť:</span> 64 MB (max. 576MB)</li> | |
| <li><span class="font-medium">Rozmery:</span> 585 x 646 x 745 mm</li> | |
| </ul> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-blue-600 font-bold">0,01€/strana</span> | |
| <a href="#contact" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 text-sm"> | |
| Objednať | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Toners Section --> | |
| <section id="toners" class="py-16 bg-green-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Tonery a náplne</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto"> | |
| Kvalitné tonery za výhodné ceny s expresným doručením po celom Slovensku | |
| </p> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-lg p-8 max-w-4xl mx-auto"> | |
| <div class="text-center mb-8"> | |
| <i class="fas fa-exclamation-circle text-4xl text-yellow-500 mb-4"></i> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-2">Momentálne sa pripravuje webshop</h3> | |
| <p class="text-gray-600"> | |
| Dovtedy si môžete žiadať cenovú ponuku mailom. Tonery posielame zvyčajne deň po objednávke. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div> | |
| <h4 class="font-bold text-lg mb-4 text-green-700">Ponúkame:</h4> | |
| <ul class="space-y-3 text-gray-700"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Nové tonery do vašich tlačiarni za dobré ceny</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Široký výber pre všetky hlavné značky tlačiarní</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Expresné dodanie - väčšinou nasledujúci deň</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Doručenie po celom Slovensku</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-4 text-green-700">Ako objednať?</h4> | |
| <ol class="space-y-3 text-gray-700 list-decimal list-inside"> | |
| <li>Vyplňte kontaktný formulár nižšie</li> | |
| <li>Uveďte model vašej tlačiarne</li> | |
| <li>My vám pošleme cenovú ponuku</li> | |
| <li>Po potvrdení expedujeme tonery</li> | |
| </ol> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- IT Services Section --> | |
| <section id="it-services" class="py-16 bg-purple-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">IT služby</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto"> | |
| Profesionálne IT riešenia pre vašu firmu alebo domácnosť | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <div class="bg-white p-6 rounded-lg shadow-md text-center"> | |
| <div class="text-purple-600 mb-4"> | |
| <i class="fas fa-tools text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Opravy notebookov</h3> | |
| <p class="text-gray-600"> | |
| Pozáručné opravy notebookov na profesionálnej úrovni. Rýchle a spoľahlivé riešenia problémov. | |
| </p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md text-center"> | |
| <div class="text-purple-600 mb-4"> | |
| <i class="fas fa-network-wired text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Správa sietí</h3> | |
| <p class="text-gray-600"> | |
| Komplexná správa počítačových sietí. Nastavenie, údržba a zabezpečenie vašej firemnej siete. | |
| </p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md text-center"> | |
| <div class="text-purple-600 mb-4"> | |
| <i class="fas fa-code text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Tvorba webov</h3> | |
| <p class="text-gray-600"> | |
| Tvorba moderných responzívnych webových stránok na mieru. Od jednoduchých prezentácií po komplexné eshopy. | |
| </p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md text-center"> | |
| <div class="text-purple-600 mb-4"> | |
| <i class="fas fa-search text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">SEO optimalizácia</h3> | |
| <p class="text-gray-600"> | |
| Optimalizácia webových stránok pre vyhľadávače. Zvýšenie viditeľnosti vášho webu v Google. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-16 bg-gray-800 text-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-4">Kontaktujte nás</h2> | |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto"> | |
| Vyplňte formulár a my sa vám čo najskôr ozveme späť | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-12"> | |
| <div> | |
| <form class="space-y-6"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium mb-1">Meno a priezvisko *</label> | |
| <input type="text" id="name" class="w-full px-4 py-3 rounded-lg bg-gray-700 border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium mb-1">Email *</label> | |
| <input type="email" id="email" class="w-full px-4 py-3 rounded-lg bg-gray-700 border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label for="phone" class="block text-sm font-medium mb-1">Telefón</label> | |
| <input type="tel" id="phone" class="w-full px-4 py-3 rounded-lg bg-gray-700 border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label for="service" class="block text-sm font-medium mb-1">Služba *</label> | |
| <select id="service" class="w-full px-4 py-3 rounded-lg bg-gray-700 border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option value="">Vyberte službu</option> | |
| <option value="rental">Prenájom tlačiarní</option> | |
| <option value="toners">Tonery a náplne</option> | |
| <option value="stamps">Modico pečiatky</option> | |
| <option value="it">IT služby</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-sm font-medium mb-1">Správa *</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-3 rounded-lg bg-gray-700 border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300"> | |
| Odoslať správu | |
| </button> | |
| </form> | |
| </div> | |
| <div> | |
| <div class="bg-gray-700 rounded-lg p-6 h-full"> | |
| <h3 class="text-xl font-bold mb-6">Kontaktné údaje</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <i class="fas fa-envelope text-blue-400 mt-1 mr-4"></i> | |
| <div> | |
| <h4 class="font-medium">Email</h4> | |
| <p class="text-gray-300">info@copycomp.sk</p> | |
| <p class="text-gray-300">info@tcms.eu</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-map-marker-alt text-blue-400 mt-1 mr-4"></i> | |
| <div> | |
| <h4 class="font-medium">Predajňa - servis</h4> | |
| <p class="text-gray-300">Damjanichova 3 (Telekom)</p> | |
| <p class="text-gray-300">945 01 Komárno</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-building text-blue-400 mt-1 mr-4"></i> | |
| <div> | |
| <h4 class="font-medium">Fakturačná adresa</h4> | |
| <p class="text-gray-300">T C M s.r.o.</p> | |
| <p class="text-gray-300">Budovateľská 7/22</p> | |
| <p class="text-gray-300">945 01 Komárno</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-phone text-blue-400 mt-1 mr-4"></i> | |
| <div> | |
| <h4 class="font-medium">Telefón</h4> | |
| <p class="text-gray-300">+421 908 080 070</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-id-card text-blue-400 mt-1 mr-4"></i> | |
| <div> | |
| <h4 class="font-medium">Identifikačné údaje</h4> | |
| <p class="text-gray-300">IČO: 45713901</p> | |
| <p class="text-gray-300">IČDPH: SK2023104468</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-clock text-blue-400 mt-1 mr-4"></i> | |
| <div> | |
| <h4 class="font-medium">Otváracie hodiny</h4> | |
| <p class="text-gray-300">Po-Pia: 8:00 - 17:00</p> | |
| <p class="text-gray-300">So: 9:00 - 12:00</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h4 class="font-bold mb-4">Nájdete nás</h4> | |
| <div class="aspect-w-16 aspect-h-9 bg-gray-600 rounded-lg overflow-hidden"> | |
| <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2682.0208683265755!2d18.130759676932456!3d47.76164957725715!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x476bad54f7bdd633%3A0x6542ae4aac9a48a9!2sCopyComp%20-%20Computer%20Shop%20%26%20Service!5e0!3m2!1sen!2ssk!4v1751451128338!5m2!1sen!2ssk" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-gray-400 py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-white text-lg font-bold mb-4">CopyComp</h3> | |
| <p class="mb-4"> | |
| Kancelárske potreby, pečiatky a lacné tonery pre firmy aj jednotlivcov. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-white text-lg font-bold mb-4">Služby</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#equipment" class="hover:text-white">Kancelárska technika</a></li> | |
| <li><a href="#toners" class="hover:text-white">Tonery a náplne</a></li> | |
| <li><a href="#it-services" class="hover:text-white">IT služby</a></li> | |
| <li><a href="#stamps" class="hover:text-white">Modico pečiatky</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white text-lg font-bold mb-4">Rýchle odkazy</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#home" class="hover:text-white">Domov</a></li> | |
| <li><a href="#services" class="hover:text-white">Služby</a></li> | |
| <li><a href="#contact" class="hover:text-white">Kontakt</a></li> | |
| <li><a href="#" class="hover:text-white">Ochrana osobných údajov</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white text-lg font-bold mb-4">Newsletter</h3> | |
| <p class="mb-4"> | |
| Prihláste sa na odber noviniek a získajte exkluzívne ponuky. | |
| </p> | |
| <form class="flex"> | |
| <input type="email" placeholder="Váš email" class="px-4 py-2 rounded-l-lg bg-gray-800 text-white focus:outline-none w-full"> | |
| <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-r-lg"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 text-center"> | |
| <p>© 2023 CopyComp. Všetky práva vyhradené.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Modal --> | |
| <div id="stampModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-lg p-8 max-w-md w-full mx-4"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-bold text-red-600">Objednávka pečiatky MODICO</h3> | |
| <button onclick="closeModal()" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <form class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Typ pečiatky *</label> | |
| <select class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-red-500"> | |
| <option value="">Vyberte typ</option> | |
| <option value="pocket_25">Vrecková guľatá (Ø 25mm)</option> | |
| <option value="pocket_38">Vrecková guľatá (Ø 38mm)</option> | |
| <option value="auto_25">Automatická (Ø 25mm)</option> | |
| <option value="auto_38">Automatická (Ø 38mm)</option> | |
| <option value="large">Veľkoplošná (50x90mm)</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Text pečiatky *</label> | |
| <textarea rows="3" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-red-500"></textarea> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Meno a priezvisko *</label> | |
| <input type="text" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-red-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Email *</label> | |
| <input type="email" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-red-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Telefón</label> | |
| <input type="tel" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-red-500"> | |
| </div> | |
| <button type="submit" class="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-lg transition duration-300"> | |
| Odoslať objednávku | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <script> | |
| // Modal functions | |
| function openModal() { | |
| document.getElementById('stampModal').classList.remove('hidden'); | |
| document.body.style.overflow = 'hidden'; | |
| } | |
| function closeModal() { | |
| document.getElementById('stampModal').classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| } | |
| // Close modal when clicking outside | |
| document.getElementById('stampModal').addEventListener('click', function(e) { | |
| if (e.target === this) { | |
| closeModal(); | |
| } | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.querySelector('.md\\:hidden'); | |
| const navLinks = document.querySelector('nav'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| navLinks.classList.toggle('hidden'); | |
| navLinks.classList.toggle('flex'); | |
| navLinks.classList.toggle('flex-col'); | |
| navLinks.classList.toggle('absolute'); | |
| navLinks.classList.toggle('top-16'); | |
| navLinks.classList.toggle('right-4'); | |
| navLinks.classList.toggle('bg-white'); | |
| navLinks.classList.toggle('p-4'); | |
| navLinks.classList.toggle('rounded-lg'); | |
| navLinks.classList.toggle('shadow-lg'); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=BladeSzaSza/copycomp" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |