fachrynuzuli.github.io/freebuilder.html at main · fachrynuzuli/fachrynuzuli.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Freebuilder.co — AI Education for Southeast Asia</title>
  <meta name="description"
    content="Prompt packs, AI workflows, and vibe coding resources for builders in Southeast Asia. Learn from someone who ships first and teaches second.">
  <meta property="og:title" content="Freebuilder.co — AI Education">
  <meta property="og:description"
    content="Prompt it till you make it. AI workflows and prompt packs built from real shipping experience.">
  <meta property="og:url" content="https://fachrynuzuli.github.io/freebuilder.html">
  <meta property="og:type" content="website">
  <meta name="twitter:card" content="summary_large_image">
  <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicon-32.png">
  <link rel="icon" type="image/png" sizes="192x192" href="assets/images/favicon-192.png">
  <link rel="apple-touch-icon" href="assets/images/apple-touch-icon.png">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=JetBrains+Mono:wght@400;500;700&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap"
    rel="stylesheet">
    <link rel="stylesheet" href="assets/css/freebuilder.css">
</head>

<body>
  <div class="grid-bg"></div>

  <header>
    <!-- SITE NAV (SHARED GLOBALLY) -->
    <nav class="site-nav" id="globalNav" aria-label="Global Navigation">
      <a href="index.html">home</a>
      <a href="freebuilder.html" class="active">freebuilder.co</a>
      <a href="freeware.html">freeware.lab</a>
      <a href="freewriter.html">freewriter.lab</a>
    </nav>

    <!-- PAGE NAV -->
    <nav class="page-nav" aria-label="Page Navigation">
      <div class="nav-logo">FREE<span>BUILDER</span></div>
      <div class="nav-links">
        <a href="https://x.com/fachrynuzuli" data-link="socials.x">𝕏 Twitter</a>
        <a href="https://instagram.com/fachrynuzuli" data-link="socials.instagram">Instagram</a>
        <a href="https://linkedin.com/in/fachrynuzuli" data-link="socials.linkedin">LinkedIn</a>
        <a href="https://fachry.substack.com" data-link="socials.substack">Substack</a>
      </div>
    </nav>
  </header>


  <main>
    <!-- HERO -->
    <section>
      <div class="hero">
        <p class="hero-tag">// AI Education · Southeast Asia</p>
        <h1>PROMPT<br><span class="accent">IT TILL</span><br>YOU MAKE IT.</h1>
        <p class="hero-sub">I ship first and teach second. Every prompt pack and playbook I share is built running real
          projects—not theory. I use $0 AI tools to build working MVPs, and here is exactly how I do it.</p>
        <div class="hero-btns">
          <a href="#products" class="btn-primary">GET PROMPT PACKS →</a>
          <a href="#runbook" class="btn-secondary">GRAB FREE RUNBOOK</a>
        </div>
      </div>
    </section>

    <!-- AUTHORITY NOTE -->
    <div class="authority-bar reveal" style="max-width: 600px; margin: 0 auto;">
      <div class="authority-line">
        <strong>Why this works:</strong> Every lesson here is written after the code has shipped. Corporate PM. Real
        clients. Working apps. Then education. The sequence matters.
      </div>
    </div>

    <!-- STATS -->
    <div class="stats-bar">
      <div class="stat-item reveal">
        <div class="stat-num">1M+</div>
        <div class="stat-label">Impressions</div>
        <div class="stat-context">Across X, Instagram, LinkedIn</div>
      </div>
      <div class="stat-item reveal reveal-d1">
        <div class="stat-num">500+</div>
        <div class="stat-label">Users Helped</div>
        <div class="stat-context">Via free products and builds</div>
      </div>
      <div class="stat-item reveal reveal-d2">
        <div class="stat-num">230</div>
        <div class="stat-label">Substack Subs</div>
        <div class="stat-context">Warm list, actively reading</div>
      </div>
      <div class="stat-item reveal reveal-d3">
        <div class="stat-num">$0</div>
        <div class="stat-label">Tools Cost</div>
        <div class="stat-context">Lovable, Bolt, v0 — free tier</div>
      </div>
    </div>

    <!-- TICKER -->
    <div class="ticker-wrap">
      <div class="ticker">
        <span class="ticker-item"><em>⚡</em>PROMPT IT TILL YOU MAKE IT</span>
        <span class="ticker-item"><em>🔨</em>DONE > PERFECT</span>
        <span class="ticker-item"><em>📦</em>VISIBLE PROOF BEATS THEORY</span>
        <span class="ticker-item"><em>🤖</em>AI IS THE TOOL. DOMAIN KNOWLEDGE IS THE STRATEGY</span>
        <span class="ticker-item"><em>🆓</em>BUILT WITH $0 AI TOOLS</span>
        <span class="ticker-item"><em>🌏</em>SECOND-TIER CITY. FIRST-TIER OUTPUT</span>
        <span class="ticker-item"><em>⚡</em>PROMPT IT TILL YOU MAKE IT</span>
        <span class="ticker-item"><em>🔨</em>DONE > PERFECT</span>
        <span class="ticker-item"><em>📦</em>VISIBLE PROOF BEATS THEORY</span>
        <span class="ticker-item"><em>🤖</em>AI IS THE TOOL. DOMAIN KNOWLEDGE IS THE STRATEGY</span>
        <span class="ticker-item"><em>🆓</em>BUILT WITH $0 AI TOOLS</span>
        <span class="ticker-item"><em>🌏</em>SECOND-TIER CITY. FIRST-TIER OUTPUT</span>
      </div>
    </div>

    <!-- PROMPT FILES -->
    <section id="products">
      <div class="section-head">
        <p class="section-tag">// Digital Products · Pre-Launch</p>
        <h2 class="section-title">PROMPT FILES</h2>
      </div>
      <div class="section-wrap" style="padding-bottom: 0;">
        <div class="products-grid">
          <div class="product-card reveal">
            <div class="product-icon">✍️</div>
            <span class="product-badge">// Content & Brand</span>
            <h3 class="product-name">Content Creation Pack</h3>
            <p class="product-desc">JSON context systems and 50+ ideas to build your voice. Stop pulling generic
              templates off Twitter and start prompting AI to sound exactly like you.</p>
            <div class="product-footer">
              <span class="product-price">$19</span>
              <a href="mailto:fachrynuzuli@gmail.com?subject=Freebuilder%20waitlist%3A%20Content%20Creation%20Pack" class="product-cta" data-link="links.contentPack">JOIN WAITLIST →</a>
            </div>
          </div>
          <div class="product-card reveal reveal-d1">
            <div class="product-icon">🧠</div>
            <span class="product-badge">// AI Workflow</span>
            <h3 class="product-name">Context Management Pack</h3>
            <p class="product-desc">Structured memory and LLM mastery workflows. Stop using AI like Google. Start
              treating it like a programmable partner that knows your exact project constraints.</p>
            <div class="product-footer">
              <span class="product-price">$19</span>
              <a href="mailto:fachrynuzuli@gmail.com?subject=Freebuilder%20waitlist%3A%20Context%20Management%20Pack" class="product-cta" data-link="links.contextPack">JOIN WAITLIST →</a>
            </div>
          </div>
          <div class="product-card reveal reveal-d2">
            <div class="product-icon">⚡</div>
            <span class="product-badge">// Builder Stack</span>
            <h3 class="product-name">Vibe Coding Starter</h3>
            <p class="product-desc">The exact prompt workflows I use to ship MVPs every weekend—including the logistics
              suite used by 400+ contractors. Build real apps from zero coding skill.</p>
            <div class="product-footer">
              <span class="product-price">$19</span>
              <a href="mailto:fachrynuzuli@gmail.com?subject=Freebuilder%20waitlist%3A%20Vibe%20Coding%20Starter" class="product-cta" data-link="links.vibeCoding">JOIN WAITLIST →</a>
            </div>
          </div>
          <div class="product-card reveal reveal-d3">
            <div class="product-icon">🔍</div>
            <span class="product-badge">// SEO & Systems</span>
            <h3 class="product-name">SEO & Automation Pack</h3>
            <p class="product-desc">AI-powered SEO and automation chain prompts. Build systems that run themselves, so
              you stop doing the same manual tasks every week.</p>
            <div class="product-footer">
              <span class="product-price">$19</span>
              <a href="mailto:fachrynuzuli@gmail.com?subject=Freebuilder%20waitlist%3A%20SEO%20and%20Automation%20Pack" class="product-cta" data-link="links.seoPack">JOIN WAITLIST →</a>
            </div>
          </div>
        </div>
      </div>

      <!-- BUNDLE -->
      <div class="bundle-wrap" style="padding-top: 2px; padding-bottom: 60px;">
        <div class="bundle-inner reveal">
          <div class="bundle-info">
            <h3>🎁 Complete Bundle</h3>
            <div class="bundle-tags">
              <span class="bundle-tag">Content Creation</span>
              <span class="bundle-tag">Context Management</span>
              <span class="bundle-tag">Vibe Coding</span>
              <span class="bundle-tag">SEO & Automation</span>
            </div>
          </div>
          <div class="bundle-right">
            <div class="bundle-price">$49</div>
            <div class="bundle-was">$76 if bought separately</div>
            <a href="mailto:fachrynuzuli@gmail.com?subject=Freebuilder%20waitlist%3A%20Complete%20Bundle" class="btn-primary" data-link="links.bundleCTA">JOIN WAITLIST →</a>
          </div>
        </div>
      </div>
    </section>

    <!-- FREE RUNBOOK -->
    <section id="runbook">
      <div class="section-head">
        <p class="section-tag">// Free · Start Here</p>
        <h2 class="section-title">FREE RUNBOOK</h2>
      </div>
      <div class="section-wrap" style="padding-bottom: 80px;">
        <div class="runbook-inner reveal">
          <div>
            <h3>📋 AI Builder Runbook</h3>
            <p>A live dashboard with all my builds. Demo links, source code, copy-paste prompts, and the full $0 tool
              stack. Updated weekly. If my free material is this detailed, the paid packs go significantly deeper.</p>
          </div>
          <div class="runbook-right">
            <p class="runbook-note">// Email only · Free forever</p>
            <a href="https://fachry.substack.com" class="btn-primary" data-link="links.runbookCTA">OPEN RUNBOOK →</a>
          </div>
        </div>
      </div>
    </section>
  </main>

  <!-- FOOTER -->
  <footer>
    <div class="footer-left">FREEBUILDER <span>CO</span> © <span data-meta="meta.year">2026</span> · <span
        data-meta="meta.location">Riau, Indonesia</span></div>
    <div class="footer-right">PROMPT IT TILL YOU MAKE IT.</div>
  </footer>

  <script src="assets/js/site-config.js"></script>
  <script>
    // Scroll reveal
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) entry.target.classList.add('visible');
      });
    }, { threshold: 0.08 });
    document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

    // Pull-to-reveal global nav mechanics
    const globalNav = document.querySelector('.site-nav');
    let pullStartY = 0;

    window.addEventListener('touchstart', (e) => {
      if (window.scrollY <= 0) pullStartY = e.touches[0].clientY;
    }, { passive: true });

    window.addEventListener('touchmove', (e) => {
      if (window.scrollY <= 0 && e.touches[0].clientY - pullStartY > 40) {
        globalNav.classList.add('force-show');
      }
    }, { passive: true });

    window.addEventListener('wheel', (e) => {
      if (window.scrollY <= 0 && e.deltaY < -20) {
        globalNav.classList.add('force-show');
      }
    }, { passive: true });

    window.addEventListener('scroll', () => {
      if (window.scrollY > 30) globalNav.classList.remove('force-show');
    }, { passive: true });
  </script>
</body>

</html>