every section with text input have same problem, its hiding text after user tap to add his text, so user dont see nothing, and second issue that there is a border who appear when tap to add text, and this make it not nice and looking ugly, so the text color and backgroung and the borderless design must remain the same,

index.html

@@ -30,12 +30,16 @@
             cursor: pointer;
             transition: all 0.3s ease;
         }
+        .editable:focus {
+            outline: none;
+            background: transparent;
+            border-radius: 4px;
+        }
         .editable:hover {
-            background: rgba(255, 255, 255, 0.1);
+            background: rgba(255, 255, 255, 0.05);
             border-radius: 4px;
-            padding: 2px 4px;
         }
-        .social-dropdown {
+.social-dropdown {
             display: none;
             position: absolute;
             background: rgba(0, 0, 0, 0.9);
@@ -93,15 +97,13 @@
                 <h1 id="editableName" class="text-3xl font-bold mb-3 gradient-text editable" contenteditable="true">
                     Tap to Add your Name
                 </h1>
-                
                 <!-- Contact Button -->
                 <div class="relative mb-4 w-3/5 mx-auto">
-                    <a id="contactButton" href="tel:" class="px-6 py-3 border border-indigo-500 rounded-full hover:bg-indigo-900/30 transition text-base w-full block editable" contenteditable="true">
+                    <a id="contactButton" href="tel:" class="px-4 py-2 border border-indigo-500 rounded-full hover:bg-indigo-900/30 transition text-sm w-full block editable" contenteditable="true">
                         Tap to Add Phone Number
                     </a>
                 </div>
-                
-                <!-- Editable Title -->
+<!-- Editable Title -->
                 <p id="editableTitle" class="text-xl text-gray-300 mb-4 editable" contenteditable="true">
                     Tap to Add your Title
                 </p>
@@ -172,6 +174,106 @@
                 });
             });
         });
+
+        // Image upload functionality
+        document.getElementById('imageUpload').addEventListener('change', function(e) {
+            const file = e.target.files[0];
+            if (file) {
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                    document.getElementById('profileImage').src = e.target.result;
+                }
+                reader.readAsDataURL(file);
+            }
+        });
+
+        // Make image container clickable
+        document.querySelector('.image-upload-container').addEventListener('click', function() {
+            document.getElementById('imageUpload').click();
+        });
+
+        // Social media dropdown functionality
+        document.getElementById('addSocialButton').addEventListener('click', function() {
+            const dropdown = document.getElementById('socialDropdown');
+            dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
+        });
+
+        // Close dropdown when clicking outside
+        document.addEventListener('click', function(e) {
+            if (!e.target.closest('#socialDropdown') && !e.target.closest('#addSocialButton')) {
+                document.getElementById('socialDropdown').style.display = 'none';
+            }
+        });
+
+        // Social media platform selection
+        document.querySelectorAll('.social-option').forEach(option => {
+            option.addEventListener('click', function() {
+                const platform = this.getAttribute('data-platform');
+                const handle = prompt(`Enter your ${platform} handle:`);
+                if (handle) {
+                    addSocialIcon(platform, handle);
+                }
+                document.getElementById('socialDropdown').style.display = 'none';
+            });
+        });
+
+        function addSocialIcon(platform, handle) {
+            const container = document.getElementById('socialIconsContainer');
+            const icon = document.createElement('a');
+            icon.href = getSocialUrl(platform, handle);
+            icon.target = '_blank';
+            icon.className = 'text-gray-400 hover:text-white transition';
+            icon.innerHTML = `<i data-feather="${platform}"></i>`;
+            container.appendChild(icon);
+            feather.replace();
+        }
+
+        function getSocialUrl(platform, handle) {
+            const urls = {
+                instagram: `https://instagram.com/${handle}`,
+                facebook: `https://facebook.com/${handle}`,
+                twitter: `https://twitter.com/${handle}`,
+                tiktok: `https://tiktok.com/@${handle}`,
+                youtube: `https://youtube.com/@${handle}`,
+                linkedin: `https://linkedin.com/in/${handle}`,
+                snapchat: `https://snapchat.com/add/${handle}`,
+                pinterest: `https://pinterest.com/${handle}`,
+                reddit: `https://reddit.com/user/${handle}`,
+                github: `https://github.com/${handle}`
+            };
+            return urls[platform] || '#';
+        }
+
+        // Update contact button href when editing
+        document.getElementById('contactButton').addEventListener('input', function() {
+            const phoneNumber = this.textContent.replace(/[^\d+]/g, '');
+            this.href = `tel:${phoneNumber}`;
+        });
+
+        // Save profile functionality
+        document.getElementById('saveProfile').addEventListener('click', function() {
+            const profileData = {
+                name: document.getElementById('editableName').textContent,
+                title: document.getElementById('editableTitle').textContent,
+                description: document.getElementById('editableDescription').textContent,
+                phone: document.getElementById('contactButton').textContent,
+                image: document.getElementById('profileImage').src
+            };
+            localStorage.setItem('profileData', JSON.stringify(profileData));
+            alert('Profile saved successfully!');
+        });
+
+        // Load saved profile
+        const savedProfile = localStorage.getItem('profileData');
+        if (savedProfile) {
+            const profileData = JSON.parse(savedProfile);
+            document.getElementById('editableName').textContent = profileData.name;
+            document.getElementById('editableTitle').textContent = profileData.title;
+            document.getElementById('editableDescription').textContent = profileData.description;
+            document.getElementById('contactButton').textContent = profileData.phone;
+            document.getElementById('contactButton').href = `tel:${profileData.phone.replace(/[^\d+]/g, '')}`;
+            document.getElementById('profileImage').src = profileData.image;
+        }
     </script>
 </body>
 </html>