Tạo thêm vùng chứa mã qr mừng cưới

components/navbar.js

@@ -111,8 +111,9 @@ class CustomNavbar extends HTMLElement {
                         <a href="#story" class="nav-link">Our Story</a>
                         <a href="#details" class="nav-link">Details</a>
                         <a href="#gallery" class="nav-link">Gallery</a>
+                        <a href="#gift" class="nav-link">Gift</a>
                         <a href="#rsvp" class="nav-link">RSVP</a>
-                    </div>
+</div>
                 </div>
             </nav>
         `;

index.html

@@ -120,10 +120,25 @@
                 </div>
             </div>
         </section>
+        <!-- Gift QR -->
+        <section id="gift" class="py-20">
+            <div class="max-w-2xl mx-auto px-4 text-center">
+                <div class="text-center mb-12">
+                    <h2 class="text-3xl md:text-4xl font-serif mb-4">Wedding Gift</h2>
+                    <div class="w-24 h-1 bg-gray-300 mx-auto"></div>
+                    <p class="text-gray-600 mt-4">Scan QR code to send your gift</p>
+                </div>
+                <div class="bg-white p-8 rounded-lg shadow-md inline-block">
+                    <img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=https://paypal.me/example" 
+                         alt="Wedding Gift QR Code" class="mx-auto">
+                    <p class="mt-4 text-gray-600">Or use this link: <a href="https://paypal.me/example" class="text-blue-500">paypal.me/example</a></p>
+                </div>
+            </div>
+        </section>
 
         <!-- RSVP -->
         <section id="rsvp" class="py-20 bg-gray-50">
-            <div class="max-w-2xl mx-auto px-4">
+<div class="max-w-2xl mx-auto px-4">
                 <div class="text-center mb-12">
                     <h2 class="text-3xl md:text-4xl font-serif mb-4">RSVP</h2>
                     <div class="w-24 h-1 bg-gray-300 mx-auto"></div>

style.css

@@ -54,6 +54,10 @@ section.show {
 .gallery-item:hover::after {
     opacity: 1;
 }
+/* QR Code section */
+#gift {
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+}
 
 /* Form input focus effect */
 input:focus, textarea:focus, select:focus {