updated

Author: JeffGepiga

docs/guides.html

@@ -334,6 +334,74 @@ <h3>Open on another device</h3>
     </div>
   </section>
 
+  <!-- ============ Guide: Importing Projects ============ -->
+  <section class="section section-alt" id="guide-import">
+    <div class="container" style="max-width:900px;">
+      <div class="section-header animate-in">
+        <h2>📥 Importing an Existing Project</h2>
+        <p>Bring your existing codebase into DevBox Pro.</p>
+      </div>
+
+      <div class="animate-in">
+        <p style="color:var(--text-secondary); line-height:1.8; margin-bottom:var(--space-lg);">
+          If you already have a project directory, you don't need to create a new project. You can import it directly.
+        </p>
+
+        <ol class="steps">
+          <li class="step-item">
+            <div class="step-number">1</div>
+            <div class="step-content">
+              <h3>Click "Import Project"</h3>
+              <p>On the Dashboard or Projects tab, click the <strong>"Import"</strong> option next to the New Project button.</p>
+            </div>
+          </li>
+          <li class="step-item">
+            <div class="step-number">2</div>
+            <div class="step-content">
+              <h3>Select your folder</h3>
+              <p>Choose the directory where your existing project is located. DevBox Pro will auto-detect the project type (Laravel, Node.js, etc.).</p>
+            </div>
+          </li>
+          <li class="step-item">
+            <div class="step-number">3</div>
+            <div class="step-content">
+              <h3>Configure Services</h3>
+              <p>Set your desired PHP/Node.js version, assign a <code>.test</code> domain, and enable any databases you need. Click Import, and your project is ready to go!</p>
+            </div>
+          </li>
+        </ol>
+      </div>
+    </div>
+  </section>
+
+  <!-- ============ Guide: Settings ============ -->
+  <section class="section" id="guide-settings">
+    <div class="container" style="max-width:900px;">
+      <div class="section-header animate-in">
+        <h2>⚙️ Configuring Settings</h2>
+        <p>Customize DevBox Pro's appearance and advanced behavior.</p>
+      </div>
+
+      <div class="animate-in">
+        <h3 style="margin-bottom:var(--space-md);">Appearance</h3>
+        <p style="color:var(--text-secondary); line-height:1.8; margin-bottom:var(--space-lg);">
+          Head over to the <strong style="color:var(--text-primary);">Settings</strong> page and click the <strong style="color:var(--text-primary);">Appearance</strong> tab to change the look of DevBox Pro. You can switch between Light and Dark modes, or set it to match your system preferences. You can also customize the primary accent color to match your style.
+        </p>
+
+        <h3 style="margin-bottom:var(--space-md);">Advanced Settings</h3>
+        <p style="color:var(--text-secondary); line-height:1.8; margin-bottom:var(--space-md);">
+          The <strong style="color:var(--text-primary);">Advanced</strong> tab in Settings allows you to configure deep application behaviors:
+        </p>
+        <ul style="list-style:none; padding:0; margin-bottom:var(--space-lg); color:var(--text-secondary);">
+          <li style="padding:4px 0;">• <strong>Auto-Start Projects:</strong> Choose whether projects should automatically start when DevBox Pro opens.</li>
+          <li class="padding:4px 0;">• <strong>Default TLD:</strong> Change the default local domain suffix (e.g., from <code>.test</code> to <code>.local</code>).</li>
+          <li class="padding:4px 0;">• <strong>Port Ranges:</strong> Specify the starting ports for web servers to avoid conflicts with other apps.</li>
+          <li class="padding:4px 0;">• <strong>Hardware Acceleration:</strong> Toggle GPU acceleration for the desktop app.</li>
+        </ul>
+      </div>
+    </div>
+  </section>
+
   <!-- ============ Footer ============ -->
   <footer class="footer">
     <div class="container">