tpikna/gobas-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Addition of basic files in structured format

Browse Source
This commit is contained in:
tpikna
2026-04-14 20:53:39 +02:00
commit 8dac76c758
8 changed files with 202 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

202
frontned/src/index.html Normal file
View File

@@ -0,0 +1,202 @@
<!DOCTYPE html>
<html lang="sk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gobas - Služby</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Konfigurácia vlastných farieb (prispôsob podľa originálu gobas.sk) -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
brand: {
DEFAULT: '#2563eb', // Zmeň na presný HEX kód značky
dark: '#1d4ed8',
}
}
}
}
}
</script>
</head>
<body class="font-sans antialiased text-gray-800 bg-gray-50">
<!-- NAVIGÁCIA -->
<header class="fixed w-full top-0 z-50 bg-white shadow-sm">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-20">
<!-- Logo -->
<div class="flex-shrink-0 flex items-center">
<a href="#" class="text-2xl font-bold text-brand">GOBAS</a>
<!-- Pre reálny klon nahraď text obrázkom: <img src="logo.png" alt="Gobas" class="h-10"> -->
</div>
<!-- Desktop Menu -->
<nav class="hidden md:flex space-x-8">
<a href="#domov" class="text-gray-600 hover:text-brand transition-colors font-medium">Domov</a>
<a href="#sluzby" class="text-gray-600 hover:text-brand transition-colors font-medium">Služby</a>
<a href="#referencie" class="text-gray-600 hover:text-brand transition-colors font-medium">Referencie</a>
<a href="#kontakt" class="text-gray-600 hover:text-brand transition-colors font-medium">Kontakt</a>
</nav>
<!-- Mobilné Menu Tlačidlo -->
<div class="md:hidden flex items-center">
<button id="mobile-menu-btn" class="text-gray-600 hover:text-brand focus:outline-none">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
</div>
</div>
</div>
<!-- Mobilné Menu (skryté v základe) -->
<div id="mobile-menu" class="hidden md:hidden bg-white border-t border-gray-100">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="#domov" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-brand hover:bg-gray-50">Domov</a>
<a href="#sluzby" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-brand hover:bg-gray-50">Služby</a>
<a href="#referencie" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-brand hover:bg-gray-50">Referencie</a>
<a href="#kontakt" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-brand hover:bg-gray-50">Kontakt</a>
</div>
</div>
</header>
<!-- HERO SEKCIA -->
<section id="domov" class="relative pt-20 pb-32 flex content-center items-center justify-center min-h-[80vh]">
<!-- Pozadie -->
<div class="absolute top-0 w-full h-full bg-center bg-cover" style="background-image: url('https://images.unsplash.com/photo-1503387762-592deb58ef4e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80');">
<span class="w-full h-full absolute opacity-60 bg-black"></span>
</div>
<!-- Obsah -->
<div class="container relative mx-auto px-4">
<div class="items-center flex flex-wrap">
<div class="w-full lg:w-8/12 px-4 mx-auto text-center">
<h1 class="text-white font-bold text-4xl md:text-5xl lg:text-6xl mb-6">
Profesionálne služby pre váš projekt
</h1>
<p class="mt-4 text-lg text-gray-200 mb-10 max-w-2xl mx-auto">
Poskytujeme komplexné riešenia s dôrazom na kvalitu, spoľahlivosť a maximálnu spokojnosť našich zákazníkov. Zistite, ako vám môžeme pomôcť.
</p>
<a href="#sluzby" class="bg-brand hover:bg-brand-dark text-white font-bold py-3 px-8 rounded-lg transition-colors shadow-lg">
Naše služby
</a>
</div>
</div>
</div>
</section>
<!-- SLUŽBY SEKCIA -->
<section id="sluzby" class="py-20 bg-white">
<div class="container mx-auto px-4 max-w-7xl">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Čo ponúkame</h2>
<div class="w-24 h-1 bg-brand mx-auto rounded"></div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Služba 1 -->
<div class="bg-gray-50 rounded-xl p-8 shadow-sm hover:shadow-md transition-shadow border border-gray-100">
<img src="https://via.placeholder.com/80" alt="Ikona služby" class="mb-6 rounded-lg">
<h3 class="text-xl font-bold text-gray-900 mb-3">Stavebné práce</h3>
<p class="text-gray-600 leading-relaxed">
Komplexná realizácia stavieb od základov až po strechu s využitím moderných technológií a materiálov.
</p>
</div>
<!-- Služba 2 -->
<div class="bg-gray-50 rounded-xl p-8 shadow-sm hover:shadow-md transition-shadow border border-gray-100">
<img src="https://via.placeholder.com/80" alt="Ikona služby" class="mb-6 rounded-lg">
<h3 class="text-xl font-bold text-gray-900 mb-3">Rekonštrukcie</h3>
<p class="text-gray-600 leading-relaxed">
Obnova a modernizácia starších objektov, bytových jadier a komerčných priestorov na kľúč.
</p>
</div>
<!-- Služba 3 -->
<div class="bg-gray-50 rounded-xl p-8 shadow-sm hover:shadow-md transition-shadow border border-gray-100">
<img src="https://via.placeholder.com/80" alt="Ikona služby" class="mb-6 rounded-lg">
<h3 class="text-xl font-bold text-gray-900 mb-3">Poradenstvo</h3>
<p class="text-gray-600 leading-relaxed">
Odborné konzultácie a príprava projektovej dokumentácie pre zabezpečenie plynulého chodu projektu.
</p>
</div>
</div>
</div>
</section>
<!-- REFERENCIE SEKCIA -->
<section id="referencie" class="py-20 bg-gray-50">
<div class="container mx-auto px-4 max-w-7xl">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Naše referencie</h2>
<div class="w-24 h-1 bg-brand mx-auto rounded"></div>
<p class="mt-4 text-gray-600">Čo o nás hovoria naši spokojní klienti</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12">
<!-- Referencia 1 -->
<div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100 relative">
<svg class="absolute top-4 right-4 h-8 w-8 text-gray-200" fill="currentColor" viewBox="0 0 24 24">
<path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z" />
</svg>
<p class="text-gray-600 italic mb-6 relative z-10">
"Profesionálny prístup, dodržanie termínov a vynikajúca kvalita práce. Výsledok predčil naše očakávania. Určite odporúčame pre akékoľvek projekty."
</p>
<div class="flex items-center">
<img src="https://via.placeholder.com/50" alt="Avatar" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold text-gray-900">Ján Novák</h4>
<span class="text-sm text-gray-500">Riaditeľ, Spoločnosť s.r.o.</span>
</div>
</div>
</div>
<!-- Referencia 2 -->
<div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100 relative">
<svg class="absolute top-4 right-4 h-8 w-8 text-gray-200" fill="currentColor" viewBox="0 0 24 24">
<path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z" />
</svg>
<p class="text-gray-600 italic mb-6 relative z-10">
"S firmou sa komunikovalo výborne. Všetky naše pripomienky boli okamžite zapracované. Ceníme si ich odbornosť a zmysel pre detail."
</p>
<div class="flex items-center">
<img src="https://via.placeholder.com/50" alt="Avatar" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold text-gray-900">Petra Kováčová</h4>
<span class="text-sm text-gray-500">Súkromný investor</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="bg-gray-900 text-white py-8">
<div class="container mx-auto px-4 max-w-7xl text-center md:text-left flex flex-col md:flex-row justify-between items-center">
<div class="mb-4 md:mb-0">
<span class="text-xl font-bold">GOBAS</span>
<p class="text-gray-400 text-sm mt-2">&copy; 2023 Gobas. Všetky práva vyhradené.</p>
</div>
<div class="flex space-x-6">
<a href="#" class="text-gray-400 hover:text-white transition-colors">Facebook</a>
<a href="#" class="text-gray-400 hover:text-white transition-colors">Instagram</a>
</div>
</div>
</footer>
<!-- Skript pre ovládanie mobilného menu -->
<script>
const btn = document.getElementById('mobile-menu-btn');
const menu = document.getElementById('mobile-menu');
btn.addEventListener('click', () => {
menu.classList.toggle('hidden');
});
</script>
</body>
</html>

0
frontned/src/script.js Normal file
View File

0
frontned/src/styles.css Normal file
View File