From 1f4e2e8ea89770b0e8cd49c19ffa1201872a33e5 Mon Sep 17 00:00:00 2001
From: Aigerim_Ryskalievna <mirazova.a90@gmail.com>
Date: Wed, 16 Sep 2026 09:55:34 +0000
Subject: [PATCH] add flower decorations throughout the page

---
 index.html | 93 +++++++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 85 insertions(+), 8 deletions(-)

diff --git a/index.html b/index.html
index 6c61119..a19c904 100644
--- a/index.html
+++ b/index.html
@@ -12,11 +12,12 @@
 <style>
   a.kt-ai-btn { text-decoration: none; }
   .wedding-hero { 
-    background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,240,245,0.95)), url('https://images.unsplash.com/photo-1519741497674-611481863552?w=1920&q=80') center/cover fixed;
+    background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,240,245,0.9)), url('https://images.unsplash.com/photo-1519225421980-715cb0202128?w=1920&q=80') center/cover fixed;
     padding: var(--kt-ai-space-12) 0;
     min-height: 90vh;
     display: flex;
     align-items: center;
+    position: relative;
   }
   .wedding-hero::before {
     content: '';
@@ -25,12 +26,35 @@
     left: 0;
     right: 0;
     bottom: 0;
-    background: radial-gradient(circle at 50% 50%, transparent 0%, rgba(255,255,255,0.3) 100%);
+    background: radial-gradient(circle at 20% 30%, rgba(255,182,193,0.15) 0%, transparent 40%),
+                radial-gradient(circle at 80% 70%, rgba(255,105,180,0.12) 0%, transparent 40%);
     pointer-events: none;
   }
+  .flower-decoration {
+    position: absolute;
+    width: 120px;
+    height: 120px;
+    opacity: 0.8;
+    pointer-events: none;
+  }
+  .flower-top-left { top: -40px; left: -40px; transform: rotate(-15deg); }
+  .flower-top-right { top: -40px; right: -40px; transform: rotate(15deg); }
+  .flower-bottom-left { bottom: -40px; left: -40px; transform: rotate(15deg); }
+  .flower-bottom-right { bottom: -40px; right: -40px; transform: rotate(-15deg); }
   body {
     background: linear-gradient(180deg, var(--kt-ai-bg-soft) 0%, var(--kt-ai-bg) 50%, var(--kt-ai-bg-soft) 100%);
   }
+  .flower-divider {
+    text-align: center;
+    margin: var(--kt-ai-space-8) 0;
+    font-size: var(--kt-ai-text-3xl);
+    color: var(--kt-ai-primary);
+  }
+  .couple-photo {
+    border: 4px solid rgba(255,182,193,0.3);
+    box-shadow: 0 20px 40px rgba(255,182,193,0.2);
+  }
+</style>
   .couple-photo {
     width: 280px;
     height: 350px;
@@ -87,7 +111,23 @@
 </header>
 
 <section class="wedding-hero kt-ai-hero" data-align="center">
-  <div class="kt-ai-wrap">
+  <div class="kt-ai-wrap" style="position: relative;">
+    <svg class="flower-decoration flower-top-left" viewBox="0 0 100 100" fill="none">
+      <circle cx="50" cy="50" r="45" fill="rgba(255,182,193,0.3)"/>
+      <circle cx="50" cy="20" r="12" fill="rgba(255,105,180,0.5)"/>
+      <circle cx="80" cy="50" r="12" fill="rgba(255,105,180,0.5)"/>
+      <circle cx="50" cy="80" r="12" fill="rgba(255,105,180,0.5)"/>
+      <circle cx="20" cy="50" r="12" fill="rgba(255,105,180,0.5)"/>
+      <circle cx="50" cy="50" r="15" fill="rgba(255,255,255,0.8)"/>
+    </svg>
+    <svg class="flower-decoration flower-top-right" viewBox="0 0 100 100" fill="none">
+      <circle cx="50" cy="50" r="45" fill="rgba(255,182,193,0.3)"/>
+      <circle cx="50" cy="20" r="12" fill="rgba(255,105,180,0.5)"/>
+      <circle cx="80" cy="50" r="12" fill="rgba(255,105,180,0.5)"/>
+      <circle cx="50" cy="80" r="12" fill="rgba(255,105,180,0.5)"/>
+      <circle cx="20" cy="50" r="12" fill="rgba(255,105,180,0.5)"/>
+      <circle cx="50" cy="50" r="15" fill="rgba(255,255,255,0.8)"/>
+    </svg>
     <h1>Приглашаем на нашу свадьбу!</h1>
     <p class="kt-ai-hero-sub" style="margin-top: var(--kt-ai-space-3)">Али и Зарина</p>
     <p class="kt-ai-hero-sub">Дорогие друзья и родные! Приглашаем вас разделить с нами этот особенный день</p>
@@ -109,15 +149,36 @@
       <p>Мы очень ждем этого дня и хотим разделить его с вами</p>
     </div>
     <div class="couple-grid">
-      <div class="couple-card reveal">
+      <div class="couple-card reveal" style="position: relative;">
+        <svg class="flower-decoration flower-top-left" style="width: 80px; height: 80px; top: -20px; left: -20px;" viewBox="0 0 100 100" fill="none">
+          <circle cx="50" cy="50" r="40" fill="rgba(255,182,193,0.25)"/>
+          <circle cx="50" cy="15" r="10" fill="rgba(255,105,180,0.4)"/>
+          <circle cx="85" cy="50" r="10" fill="rgba(255,105,180,0.4)"/>
+          <circle cx="50" cy="85" r="10" fill="rgba(255,105,180,0.4)"/>
+          <circle cx="15" cy="50" r="10" fill="rgba(255,105,180,0.4)"/>
+          <circle cx="50" cy="50" r="12" fill="rgba(255,255,255,0.7)"/>
+        </svg>
         <img src="https://loremflickr.com/400/500/groom,suit" alt="Жених" class="couple-photo">
         <h3>Али</h3>
         <p style="color: var(--kt-ai-fg-muted)">Жених</p>
       </div>
-      <div class="reveal" style="display: flex; align-items: center; justify-content: center;">
+      <div class="reveal" style="display: flex; align-items: center; justify-content: center; flex-direction: column;">
         <svg class="heart-icon"><use href="#sparkles"></use></svg>
+        <div class="flower-divider">
+          <svg class="kt-icon" style="width: 24px; height: 24px;"><use href="#sparkles"></use></svg>
+          <svg class="kt-icon" style="width: 24px; height: 24px; margin: 0 8px;"><use href="#sparkles"></use></svg>
+          <svg class="kt-icon" style="width: 24px; height: 24px;"><use href="#sparkles"></use></svg>
+        </div>
       </div>
-      <div class="couple-card reveal">
+      <div class="couple-card reveal" style="position: relative;">
+        <svg class="flower-decoration flower-top-right" style="width: 80px; height: 80px; top: -20px; right: -20px;" viewBox="0 0 100 100" fill="none">
+          <circle cx="50" cy="50" r="40" fill="rgba(255,182,193,0.25)"/>
+          <circle cx="50" cy="15" r="10" fill="rgba(255,105,180,0.4)"/>
+          <circle cx="85" cy="50" r="10" fill="rgba(255,105,180,0.4)"/>
+          <circle cx="50" cy="85" r="10" fill="rgba(255,105,180,0.4)"/>
+          <circle cx="15" cy="50" r="10" fill="rgba(255,105,180,0.4)"/>
+          <circle cx="50" cy="50" r="12" fill="rgba(255,255,255,0.7)"/>
+        </svg>
         <img src="https://loremflickr.com/400/500/bride,wedding" alt="Невеста" class="couple-photo">
         <h3>Зарина</h3>
         <p style="color: var(--kt-ai-fg-muted)">Невеста</p>
@@ -152,8 +213,24 @@
   </div>
 </section>
 
-<section id="location" class="kt-ai-cta reveal">
-  <div class="kt-ai-wrap" data-width="narrow">
+<section id="location" class="kt-ai-cta reveal" style="position: relative; overflow: hidden;">
+  <svg class="flower-decoration flower-bottom-left" style="width: 100px; height: 100px; bottom: 20px; left: 20px;" viewBox="0 0 100 100" fill="none">
+    <circle cx="50" cy="50" r="45" fill="rgba(255,182,193,0.2)"/>
+    <circle cx="50" cy="15" r="11" fill="rgba(255,105,180,0.35)"/>
+    <circle cx="85" cy="50" r="11" fill="rgba(255,105,180,0.35)"/>
+    <circle cx="50" cy="85" r="11" fill="rgba(255,105,180,0.35)"/>
+    <circle cx="15" cy="50" r="11" fill="rgba(255,105,180,0.35)"/>
+    <circle cx="50" cy="50" r="14" fill="rgba(255,255,255,0.6)"/>
+  </svg>
+  <svg class="flower-decoration flower-bottom-right" style="width: 100px; height: 100px; bottom: 20px; right: 20px;" viewBox="0 0 100 100" fill="none">
+    <circle cx="50" cy="50" r="45" fill="rgba(255,182,193,0.2)"/>
+    <circle cx="50" cy="15" r="11" fill="rgba(255,105,180,0.35)"/>
+    <circle cx="85" cy="50" r="11" fill="rgba(255,105,180,0.35)"/>
+    <circle cx="50" cy="85" r="11" fill="rgba(255,105,180,0.35)"/>
+    <circle cx="15" cy="50" r="11" fill="rgba(255,105,180,0.35)"/>
+    <circle cx="50" cy="50" r="14" fill="rgba(255,255,255,0.6)"/>
+  </svg>
+  <div class="kt-ai-wrap" data-width="narrow" style="position: relative; z-index: 1;">
     <h2>Место проведения</h2>
     <p style="font-size: var(--kt-ai-text-xl); margin: var(--kt-ai-space-4) 0;">
       Ресторан «Астана»<br>