improved build and install process

docs/index.html

@@ -284,6 +284,28 @@
             white-space: nowrap;
         }
 
+        .code-block {
+            font-family: 'Courier New', Courier, monospace;
+            background: var(--dark-gray);
+            color: var(--white);
+            padding: 1.5rem;
+            border-radius: 8px;
+            margin-top: 1rem;
+            overflow-x: auto;
+            font-size: 0.9rem;
+            line-height: 1.6;
+            font-weight: 400;
+            display: inline-block;
+        }
+
+        .code-block .comment {
+            color: var(--gray);
+        }
+
+        .code-block .command {
+            color: var(--accent);
+        }
+
         .code-list {
             list-style: auto;
             margin-left: 40px;
@@ -635,6 +657,21 @@
             color: var(--gray);
         }
 
+        .install-screenshot {
+            margin-top: 2rem;
+            border-radius: 8px;
+            overflow: hidden;
+            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+            border: 1px solid rgba(85, 96, 247, 0.3);
+            display: inline-block;
+        }
+
+        .install-screenshot img {
+            display: block;
+            max-width: 100%;
+            height: auto;
+        }
+
         /* CTA Section - INVERTED */
         .cta {
             min-height: 100vh;
@@ -870,7 +907,7 @@
             <p class="hero-subtitle">The AI workflow that puts planning first</p>
             <a href="https://github.com/jparkerweb/plan2code" class="github-link" target="_blank" rel="noopener noreferrer">
                 <svg class="github-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
-                View on GitHub
+                Get the Code
             </a>
         </div>
         <div class="hero-right">
@@ -1025,8 +1062,19 @@
                 <div class="start-step-number headline">01</div>
                 <div class="start-step-content">
                     <h3 class="subheadline">Install the workflow</h3>
-                    <p>Copy the Plan2Code prompts to your AI assistant. Works with Claude Code, Cursor, GitHub Copilot, Windsurf, and more.</p>
-                    <a href="https://github.com/jparkerweb/plan2code" class="inline-link" target="_blank" rel="noopener noreferrer">Get it on GitHub &rarr;</a>
+                    <p>Run the install script to copy the Plan2Code prompts to your AI assistant workflow directories. Works with Claude Code, Cursor, GitHub Copilot, Windsurf, and more.</p>
+                    <pre class="code-block"><span class="comment"># Clone the repository</span>
+<span class="command">git clone https://github.com/jparkerweb/plan2code.git</span>
+
+<span class="comment"># Navigate to the directory</span>
+<span class="command">cd plan2code</span>
+
+<span class="comment"># Run the interactive installer</span>
+<span class="command">node install.js</span></pre>
+                    <p><a href="https://github.com/jparkerweb/plan2code" class="inline-link" target="_blank" rel="noopener noreferrer">Get the Code &rarr;</a></p>
+                    <div class="install-screenshot">
+                        <img src="install-script.jpg" alt="Plan2Code global installation terminal interface showing platform selection menu">
+                    </div>
                 </div>
             </div>
             <div class="start-step">
@@ -1057,8 +1105,8 @@
     <!-- CTA Section -->
     <section class="cta">
         <h2 class="cta-text headline"><a class="-plain" href="https://github.com/jparkerweb/plan2code">START<br>PLANNING<br>NOW</a></h2>
-        <a href="https://github.com/jparkerweb/plan2code" class="cta-button" target="_blank" rel="noopener noreferrer">GET IT ON GITHUB</a>
-        <p class="cta-subtext">Free and open source &mdash; transform your AI development workflow today</p>
+        <a href="https://github.com/jparkerweb/plan2code" class="cta-button" target="_blank" rel="noopener noreferrer">GET THE CODE</a>
+        <p class="cta-subtext">Transform your AI development workflow today</p>
     </section>
 
     <script>