update

index.html

@@ -334,14 +334,126 @@ nav ul li a:hover::after {
     line-height: 1.6;
 }
 
-/* Product Carousel */
-.products {
+/* Aktuality Section */
+.aktuality {
     padding: 80px 0;
-    background: linear-gradient(to bottom, var(--primary), rgba(255, 255, 255, 0.8));
+    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), var(--primary));
+}
+
+.aktuality-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+.aktuality-title {
+    font-family: 'Playfair Display', serif;
+    font-size: 36px;
+    margin-bottom: 60px;
+    color: var(--accent);
+    text-align: center;
+}
+
+.aktuality-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+    gap: 30px;
+}
+
+.aktuality-card {
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(245, 245, 245, 0.8));
+    backdrop-filter: blur(5px);
+    border-radius: 8px;
+    padding: 30px;
+    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
+    border: 1px solid rgba(201, 169, 95, 0.1);
+    transition: var(--transition);
     position: relative;
     overflow: hidden;
 }
 
+.aktuality-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+    border-color: rgba(201, 169, 95, 0.3);
+}
+
+.aktuality-badge {
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    background: var(--accent);
+    color: var(--primary);
+    padding: 5px 12px;
+    border-radius: 20px;
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+}
+
+.aktuality-date {
+    color: var(--text-dark);
+    font-size: 14px;
+    margin-bottom: 15px;
+    display: flex;
+    align-items: center;
+}
+
+.aktuality-date i {
+    color: var(--accent);
+    margin-right: 8px;
+}
+
+.aktuality-card h3 {
+    font-size: 22px;
+    margin-bottom: 15px;
+    color: var(--accent);
+    line-height: 1.3;
+}
+
+.aktuality-card p {
+    font-size: 16px;
+    line-height: 1.6;
+    color: var(--text-dark);
+    margin-bottom: 20px;
+}
+
+.aktuality-link {
+    color: var(--accent);
+    text-decoration: none;
+    font-weight: 600;
+    display: inline-flex;
+    align-items: center;
+    transition: var(--transition);
+}
+
+.aktuality-link:hover {
+    transform: translateX(5px);
+}
+
+.aktuality-link i {
+    margin-left: 5px;
+    transition: var(--transition);
+}
+
+.aktuality-link:hover i {
+    transform: translateX(3px);
+}
+
+.aktuality-loading,
+.aktuality-error,
+.aktuality-empty {
+    text-align: center;
+    padding: 40px;
+    color: var(--text-dark);
+    font-size: 16px;
+}
+
+.aktuality-error {
+    color: #e74c3c;
+}
+
+/* Product Carousel */
 .products::before {
     content: '';
     position: absolute;
@@ -887,6 +999,9 @@ footer::before {
     .feature-grid {
         grid-template-columns: 1fr;
     }
+    .aktuality-grid {
+        grid-template-columns: 1fr;
+    }
     .carousel-item {
         flex: 0 0 calc(100% - 20px);
     }
@@ -1009,6 +1124,20 @@ footer::before {
             </div>
         </div>
     </section>
+
+        <!-- Aktuality Section -->
+    <section class="aktuality">
+        <div class="aktuality-container">
+            <h2 class="aktuality-title">Aktuality</h2>
+            <div class="aktuality-grid">
+                <!-- Aktuality budou načteny z XML souboru pomocí JavaScriptu -->
+                <div class="aktuality-loading">
+                    <p>Načítám aktuality...</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    
     <!-- Product Carousel -->
     <section class="products" id="products">
         <div class="container">
@@ -1296,7 +1425,6 @@ footer::before {
             });
         });
     </script>
-    
+    <script src="aktuality.js"></script>
 </body>
-</html>
-``` 
+</html>