https://laap-console.netlify.app/

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8" />
5  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6  <title>LAAP Suite – Launch Assistant | LaFaries Mortimer LLC</title>
7  <link rel="preconnect" href="https://fonts.googleapis.com">
8  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Cormorant+Garamond:wght@500;700&display=swap" rel="stylesheet">
9  <link rel="stylesheet" href="style.css" />
10</head>
11<body>
12  <div class="laap-app">
13    <header class="app-header">
14      <div class="brand">
15        <img src="./logo.png"
16             alt="LaFaries Mortimer LLC"
17             class="brand-logo"
18             onerror="this.style.display='none'; document.getElementById('brandMark').style.display='flex';">
19        <div class="brand-mark" id="brandMark" style="display:none;">L</div>
20        <div class="brand-text">
21          <h1>LAAP Suite</h1>
22          <p>Launch • Automate • Administer • Prosper</p>
23        </div>
24      </div>
25      <div class="progress-wrapper">
26        <div class="progress-label">
27          <span id="step-label">Step 1 of 4</span>
28          <span id="step-title">Business Profile</span>
29        </div>
30        <div class="progress-bar">
31          <div id="progress-fill"></div>
32        </div>
33      </div>
34    </header>
35
36    <main class="app-main">
37
38      <!-- STEP 1: BUSINESS PROFILE -->
39      <section class="step active" data-step="1">
40        <h2>Business Profile</h2>
41        <p class="step-desc">
42          Tell LAAP who you are and what your business does. This powers the rest of your launch plan.
43        </p>
44
45        <div class="grid-2">
46          <div class="field">
47            <label for="bizName">Business / Ministry Name</label>
48            <input type="text" id="bizName" placeholder="Example: LaFaries Mortimer LLC" />
49          </div>
50
51          <div class="field">
52            <label for="ownerName">Owner / Lead Name</label>
53            <input type="text" id="ownerName" placeholder="Your full name" />
54          </div>
55
56          <div class="field">
57            <label for="bizType">Type of Work</label>
58            <select id="bizType">
59              <option value="">Select one</option>
60              <option value="consulting">Consulting / Admin Services</option>
61              <option value="ministry">Ministry / Nonprofit</option>
62              <option value="creative">Creative / Media / Design</option>
63              <option value="ecommerce">E-Commerce / Online Store</option>
64              <option value="other">Other</option>
65            </select>
66          </div>
67
68          <div class="field">
69            <label for="primaryGoal">Primary Launch Goal (next 90 days)</label>
70            <input type="text" id="primaryGoal" placeholder="Example: Launch website + onboard 3 clients" />
71          </div>
72        </div>
73      </section>
74
75      <!-- STEP 2: SERVICES & PRICING -->
76      <section class="step" data-step="2">
77        <h2>Services & Pricing</h2>
78        <p class="step-desc">
79          Capture your core offers so LAAP can summarize what you sell and how you charge.
80        </p>
81
82        <div class="field">
83          <label for="serviceList">List your main services (one per line)</label>
84          <textarea id="serviceList" rows="5"
85            placeholder="Example:
86Admin + IT Setup
87YouTube + Content Tutorials
88Church Auxiliary Dashboards
89Family Adventures media packages"></textarea>
90        </div>
91
92        <div class="grid-2">
93          <div class="field">
94            <label for="pricingModel">General Pricing Model</label>
95            <select id="pricingModel">
96              <option value="">Select one</option>
97              <option value="hourly">Hourly</option>
98              <option value="fixed">Fixed Packages</option>
99              <option value="retainer">Monthly Retainer</option>
100              <option value="mixed">Mixed (some hourly, some packages)</option>
101            </select>
102          </div>
103
104          <div class="field">
105            <label for="targetClientCount">Target # of Clients (next 6 months)</label>
106            <input type="number" id="targetClientCount" min="0" placeholder="e.g. 10" />
107          </div>
108        </div>
109      </section>
110
111      <!-- STEP 3: SYSTEMS & TOOLS -->
112      <section class="step" data-step="3">
113        <h2>Systems & Tools</h2>
114        <p class="step-desc">
115          Choose the tools LAAP will track in your launch checklist (website, CRM, payments, and more).
116        </p>
117
118        <div class="field checkbox-group">
119          <label class="group-label">Which systems do you want to set up?</label>
120          <div class="checkbox-row">
121            <label><input type="checkbox" class="sys-tool" value="Website" /> Website / Landing Page</label>
122            <label><input type="checkbox" class="sys-tool" value="Email" /> Business Email</label>
123            <label><input type="checkbox" class="sys-tool" value="CRM" /> CRM / Contact Tracker</label>
124            <label><input type="checkbox" class="sys-tool" value="Payments" /> Payments / Invoicing</label>
125            <label><input type="checkbox" class="sys-tool" value="Scheduling" /> Scheduling / Booking</label>
126            <label><input type="checkbox" class="sys-tool" value="Analytics" /> Analytics / Dashboards</label>
127          </div>
128        </div>
129
130        <div class="field">
131          <label for="currentStack">Current tools you're already using (optional)</label>
132          <textarea id="currentStack" rows="3"
133            placeholder="Example: Excel, Power BI, FaithConnector, Netlify, ElevenLabs, Canva"></textarea>
134        </div>
135      </section>
136
137      <!-- STEP 4: LAUNCH CHECKLIST & SUMMARY -->
138      <section class="step" data-step="4">
139        <h2>Launch Checklist & Summary</h2>
140        <p class="step-desc">

141          Review your customized LAAP launch plan. You can export this summary when you are done.
142        </p>
143
144        <div class="summary-card">
145          <h3>Profile Snapshot</h3>
146          <p><strong>Business / Ministry:</strong> <span id="sumBizName">–</span></p>
147          <p><strong>Owner / Lead:</strong> <span id="sumOwnerName">–</span></p>
148          <p><strong>Type:</strong> <span id="sumBizType">–</span></p>
149          <p><strong>Primary Goal (90 days):</strong> <span id="sumGoal">–</span></p>
150        </div>
151
152        <div class="summary-card">
153          <h3>Services & Capacity</h3>
154          <p><strong>Services:</strong></p>
155          <ul id="sumServices"></ul>
156          <p><strong>Pricing Model:</strong> <span id="sumPricing">–</span></p>
157          <p><strong>Client Target (6 months):</strong> <span id="sumClientTarget">–</span></p>
158        </div>
159
160        <div class="summary-card">
161          <h3>Systems Checklist</h3>
162          <p><strong>Planned Systems:</strong></p>
163          <ul id="sumSystems"></ul>
164          <p><strong>Current Tools:</strong> <span id="sumStack">–</span></p>
165        </div>
166
167        <div class="summary-card checklist">
168          <h3>Your LAAP Launch Checklist</h3>
169          <ol id="launchChecklist"></ol>
170        </div>
171
172        <button id="exportButton" class="btn-secondary">Export Summary (JSON)</button>
173        <a id="downloadLink" style="display:none;"></a>
174      </section>
175
176    </main>
177
178    <footer class="app-footer">
179      <div class="nav-buttons">
180        <button id="prevBtn" class="btn-secondary" disabled>Back</button>
181        <button id="nextBtn" class="btn-primary">Next</button>
182      </div>
183      <div class="footer-note">
184        LAAP Suite – your launch assistant for administration, automation, and prosperity planning.
185      </div>
186    </footer>
187  </div>
188
189  

189<script src="app.js"></script>

189
190</body>
191</html>