the heading text now work just change color to the blue dots around picture.

index.html

@@ -26,7 +26,15 @@
             background-clip: text;
             color: transparent;
         }
-        .editable {
+        .social-icon-placeholder {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background: #3b82f6;
+            margin: 0 2px;
+            display: inline-block;
+        }
+.editable {
             cursor: pointer;
             transition: all 0.3s ease;
             min-height: 1.2em;
@@ -154,6 +162,12 @@
                 <div class="mb-8">
                     <div class="flex justify-center flex-wrap gap-3 mb-4" id="socialIconsContainer">
                         <!-- Social media icons will be added here -->
+                        <div class="flex items-center justify-center space-x-1 mb-2 w-full">
+                            <span class="social-icon-placeholder"></span>
+                            <span class="social-icon-placeholder"></span>
+                            <span class="social-icon-placeholder"></span>
+                            <span class="text-xs text-gray-400">Click + to add social media</span>
+                        </div>
                         <!-- Plus button for adding social media -->
                         <div class="relative">
                             <button id="addSocialButton" class="w-12 h-12 rounded-full bg-indigo-600 hover:bg-indigo-700 flex items-center justify-center transition">
@@ -248,9 +262,9 @@
         document.querySelector('.image-upload-container').addEventListener('click', function() {
             document.getElementById('imageUpload').click();
         });
-
         // Social media dropdown functionality
-        document.getElementById('addSocialButton').addEventListener('click', function() {
+        document.getElementById('addSocialButton').addEventListener('click', function(e) {
+            e.stopPropagation();
             const dropdown = document.getElementById('socialDropdown');
             dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
         });
@@ -370,25 +384,6 @@ function getSocialUrl(platform, handle) {
             const phoneNumber = this.textContent.replace(/[^\d+]/g, '');
             this.href = `tel:${phoneNumber}`;
         });
-        // Enhanced social media dropdown positioning
-        const addSocialButton = document.getElementById('addSocialButton');
-        const socialDropdown = document.getElementById('socialDropdown');
-        
-        addSocialButton.addEventListener('click', function(e) {
-            e.stopPropagation();
-            const rect = addSocialButton.getBoundingClientRect();
-            const isVisible = socialDropdown.style.display === 'block';
-            socialDropdown.style.display = isVisible ? 'none' : 'block';
-            
-            if (!isVisible) {
-                socialDropdown.style.bottom = '100%';
-                socialDropdown.style.top = 'auto';
-                socialDropdown.style.left = '50%';
-                socialDropdown.style.transform = 'translateX(-50%)';
-                socialDropdown.style.marginBottom = '8px';
-            }
-        });
-
         // Social media platform selection
         document.querySelectorAll('.social-option').forEach(option => {
             option.addEventListener('click', function(e) {
@@ -424,6 +419,14 @@ function getSocialUrl(platform, handle) {
                     const handle = handleInput.value.trim();
                     if (handle) {
                         addSocialIcon(platform, handle);
+                        // Remove placeholder dots
+                        const placeholderDots = document.querySelectorAll('.social-icon-placeholder');
+                        if (placeholderDots.length > 0) {
+                            const placeholderContainer = placeholderDots[0].parentNode;
+                            if (placeholderContainer) {
+                                placeholderContainer.remove();
+                            }
+                        }
                     }
                     document.body.removeChild(modal);
                     document.getElementById('socialDropdown').style.display = 'none';
@@ -435,9 +438,16 @@ function getSocialUrl(platform, handle) {
                         document.body.removeChild(modal);
                     }
                 });
+                
+                // Handle Enter key
+                handleInput.addEventListener('keypress', function(e) {
+                    if (e.key === 'Enter') {
+                        saveBtn.click();
+                    }
+                });
             });
         });
-        function addSocialIcon(platform, handle) {
+function addSocialIcon(platform, handle) {
             const container = document.getElementById('socialIconsContainer');
             
             // Create social icon element