.split-media[data-astro-cid-jsqdk4zl]{display:flex;justify-content:center;align-items:center;padding:20px}.control-group[data-astro-cid-jsqdk4zl] label[data-astro-cid-jsqdk4zl],.auto-row[data-astro-cid-jsqdk4zl] label[data-astro-cid-jsqdk4zl]{display:block;font-size:12px;color:#4b5563;font-weight:600;margin-bottom:8px}.panel-body[data-astro-cid-jsqdk4zl]{padding:16px;background:#fcfcfc;display:flex;flex-direction:column;gap:16px}.trigger-tag[data-astro-cid-jsqdk4zl]{display:inline-flex;width:fit-content;min-height:32px;padding:4px 12px;background:#fff;font-weight:600;color:#374151}.dm-preview-box[data-astro-cid-jsqdk4zl]{background:#fff;border:1px solid #d1d5db;border-radius:8px;padding:10px 14px;display:flex;align-items:center;gap:12px;box-shadow:0 1px 2px #0000000d}.dm-text[data-astro-cid-jsqdk4zl]{font-size:14px;color:#374151}.dm-link-badge[data-astro-cid-jsqdk4zl]{display:flex;align-items:center;gap:4px;font-size:10px;background:#eff6ff;color:#2563eb;padding:2px 6px;border-radius:4px;border:1px solid #dbeafe;font-weight:500;white-space:nowrap}<div style="text-align: center; margin-bottom: 60px;"> <h2 style="font-size: 32px; color: var(--text-heading); margin-bottom: 16px;">Perfect For... </h2> <p style="color: var(--secondary-color);">Streamline your content strategy.</p> </div> <div style="display: flex; flex-direction: column; gap: 60px;"> <!-- Use Case 1: Product Launch --> <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; align-items: center; background: white; border: 1px solid var(--border-color); border-radius: 16px; padding: 32px;"> <div> <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 16px;"> <div style="background: #e0e7ff; padding: 10px; border-radius: 8px;"> <i data-lucide="rocket" size="24" style="color: var(--accent-color);"></i> </div> <h3 style="font-size: 24px; font-weight: 600;">Product Launches</h3> </div> <p style="color: var(--secondary-color); margin-bottom: 24px; line-height: 1.6;"> <strong>The Problem:</strong> You have to post manually at 9 AM and scramble to turn on the bot. </p> <p style="color: var(--text-heading); margin-bottom: 24px; line-height: 1.6;"> <strong>The Solution:</strong> Schedule the entire launch sequence (Teaser,Launch,Close) weeks in advance. </p> </div> <div style="background: #f9fafb; padding: 24px; border-radius: 12px; border: 1px solid var(--border-color);"> <div style="font-size: 12px; color: #9ca3af; margin-bottom: 12px; text-transform: uppercase; font-weight: 600;"> Scenario: New Collection</div> <div style="display: flex; flex-direction: column; gap: 12px;"> <div style="background: white; padding: 12px; border-radius: 8px; border: 1px solid var(--border-color); display: flex; align-items: center; gap: 12px;"> <div style="width: 40px; height: 40px; background: #eee; border-radius: 4px;"> </div> <div> <div style="font-size: 14px; font-weight: 600;">Summer Drop.jpg</div> <div style="font-size: 12px; color: gray;">Scheduled: July 1st,10:00 AM </div> </div> </div> <div style="display: flex; justify-content: center;"> <i data-lucide="link" size="16" style="color: var(--border-color);"></i> </div> <div style="background: white; padding: 12px; border-radius: 8px; border: 1px solid var(--border-color); display: flex; align-items: center; gap: 12px;"> <div style="background: #e0e7ff; color: var(--accent-color); padding: 8px; border-radius: 4px;"> <i data-lucide="zap" size="16"></i> </div> <div> <div style="font-size: 14px; font-weight: 600;">Trigger: "SUMMER"</div> <div style="font-size: 12px; color: gray;">Reply: Collection Link</div> </div> </div> </div> </div> </div> <!-- Use Case 2: Consistent Growth --> <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; align-items: center; background: white; border: 1px solid var(--border-color); border-radius: 16px; padding: 32px;"> <div style="order: 2;"> <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 16px;"> <div style="background: #fef3c7; padding: 10px; border-radius: 8px;"> <i data-lucide="repeat" size="24" style="color: #d97706;"></i> </div> <h3 style="font-size: 24px; font-weight: 600;">Weekly Content Batching</h3> </div> <p style="color: var(--secondary-color); margin-bottom: 24px; line-height: 1.6;"> <strong>The Problem:</strong> Posting every day is exhausting. Engagement drops when you take a break. </p> <p style="color: var(--text-heading); margin-bottom: 24px; line-height: 1.6;"> <strong>The Solution:</strong> Spend 1 hour on Monday scheduling a week's worth of value posts + DM magnets. </p> </div> <div style="order: 1; background: #f9fafb; padding: 24px; border-radius: 12px; border: 1px solid var(--border-color);"> <div style="font-size: 12px; color: #9ca3af; margin-bottom: 12px; text-transform: uppercase; font-weight: 600;"> Overview: Next Week</div> <div style="display: flex; flex-direction: column; gap: 8px;"> <div style="background: white; padding: 10px; border-radius: 6px; border: 1px solid var(--border-color); font-size: 13px; display: flex; justify-content: space-between;"> <span>Mon: Motivation Reel</span> <span style="color: #166534; background: #dcfce7; padding: 2px 6px; border-radius: 4px; font-size: 11px;">"GUIDE"</span> </div> <div style="background: white; padding: 10px; border-radius: 6px; border: 1px solid var(--border-color); font-size: 13px; display: flex; justify-content: space-between;"> <span>Wed: Carousel Tips</span> <span style="color: #166534; background: #dcfce7; padding: 2px 6px; border-radius: 4px; font-size: 11px;">"TIPS"</span> </div> <div style="background: white; padding: 10px; border-radius: 6px; border: 1px solid var(--border-color); font-size: 13px; display: flex; justify-content: space-between;"> <span>Fri: Case Study</span> <span style="color: #166534; background: #dcfce7; padding: 2px 6px; border-radius: 4px; font-size: 11px;">"STUDY"</span> </div> </div> </div> </div> <!-- Use Case 3: 5-Day Challenge --> <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; align-items: center; background: white; border: 1px solid var(--border-color); border-radius: 16px; padding: 32px;"> <div> <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 16px;"> <div style="background: #e0e7ff; padding: 10px; border-radius: 8px;"> <i data-lucide="trophy" size="24" style="color: var(--accent-color);"></i> </div> <h3 style="font-size: 24px; font-weight: 600;">Run a 5-Day Challenge</h3> </div> <p style="color: var(--secondary-color); margin-bottom: 24px; line-height: 1.6;"> <strong>The Problem:</strong> Managing a live challenge is chaotic. You forget to update the link for Day 3. </p> <p style="color: var(--text-heading); margin-bottom: 24px; line-height: 1.6;"> <strong>The Solution:</strong> Pre-load the entire week. Each daily post automatically sends that day's specific workbook/video. </p> <ul style="display: flex; flex-direction: column; gap: 12px; margin-bottom: 0;"> <li style="display: flex; gap: 10px; font-size: 14px; color: var(--secondary-color);"> <i data-lucide="check-circle-2" size="18" style="color: #166534;"></i> <span>Day 1: "Reply 'READY' for the intro"</span> </li> <li style="display: flex; gap: 10px; font-size: 14px; color: var(--secondary-color);"> <i data-lucide="check-circle-2" size="18" style="color: #166534;"></i> <span>Day 5: "Reply 'WIN' for the prize"</span> </li> </ul> </div> <div style="background: #f9fafb; padding: 24px; border-radius: 12px; border: 1px solid var(--border-color);"> <div style="font-size: 12px; color: #9ca3af; margin-bottom: 12px; text-transform: uppercase; font-weight: 600;"> Challenge Dashboard</div> <div style="display: flex; flex-direction: column; gap: 8px;"> <div style="background: white; padding: 10px; border-radius: 6px; border: 1px solid var(--border-color); display: flex; align-items: center; gap: 12px;"> <div style="width: 8px; height: 8px; background: #22c55e; border-radius: 50%;"> </div> <div style="flex: 1; font-size: 13px; font-weight: 500;">Day 1: Mindset</div> <div style="font-size: 11px; color: #64748b;">Trigger: READY</div> </div> <div style="background: white; padding: 10px; border-radius: 6px; border: 1px solid var(--border-color); display: flex; align-items: center; gap: 12px;"> <div style="width: 8px; height: 8px; background: #f59e0b; border-radius: 50%;"> </div> <div style="flex: 1; font-size: 13px; font-weight: 500;">Day 2: Strategy</div> <div style="font-size: 11px; color: #64748b;">Trigger: PLAN</div> </div> <div style="background: white; padding: 10px; border-radius: 6px; border: 1px solid var(--border-color); display: flex; align-items: center; gap: 12px;"> <div style="width: 8px; height: 8px; background: #cbd5e1; border-radius: 50%;"> </div> <div style="flex: 1; font-size: 13px; font-weight: 500;">Day 3: Action</div> <div style="font-size: 11px; color: #64748b;">Trigger: DO IT</div> </div> </div> </div> </div> <!-- Use Case 4: Replace Your Stack --> <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; align-items: center; background: white; border: 1px solid var(--border-color); border-radius: 16px; padding: 32px;"> <div style="order: 2;"> <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 16px;"> <div style="background: #fef3c7; padding: 10px; border-radius: 8px;"> <i data-lucide="layers" size="24" style="color: #d97706;"></i> </div> <h3 style="font-size: 24px; font-weight: 600;">Consolidate Your Tools</h3> </div> <p style="color: var(--secondary-color); margin-bottom: 24px; line-height: 1.6;"> <strong>The Problem:</strong> You're paying $15/mo for a scheduler (Buffer/Later) AND $15/mo for an automation tool (ManyChat). </p> <p style="color: var(--text-heading); margin-bottom: 24px; line-height: 1.6;"> <strong>The Solution:</strong> InstantDM does both in one dashboard. Stop switching tabs and start saving money. </p> <div style="display: inline-flex; align-items: center; gap: 16px; margin-top: 12px;"> <div style="text-align: center;"> <div style="font-size: 12px; color: #ef4444; text-decoration: line-through;"> $30+/mo</div> <div style="font-size: 11px; color: #64748b;">Others</div> </div> <i data-lucide="arrow-right" size="16" style="color: var(--secondary-color);"></i> <div style="text-align: center;"> <div style="font-size: 18px; color: #166534; font-weight: 700;">One Price</div> <div style="font-size: 11px; color: #64748b;">InstantDM</div> </div> </div> </div> <div style="order: 1; text-align: center; padding: 24px;"> <div style="position: relative; display: inline-block;"> <div style="width: 140px; height: 180px; background: white; border: 1px solid var(--border-color); border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(-5deg); z-index: 1;"> <i data-lucide="calendar" size="32" style="color: #94a3b8; margin-bottom: 8px;"></i> <div style="font-size: 14px; color: #64748b;">Scheduler</div> </div> <div style="width: 140px; height: 180px; background: var(--accent-color); border-radius: 12px; box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3); display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; top: 0; left: 40px; transform: rotate(5deg); z-index: 2;"> <i data-lucide="zap" size="32" style="color: white; margin-bottom: 8px;"></i> <div style="font-size: 14px; color: white; font-weight: 600;">Automation</div> <div style="font-size: 10px; color: rgba(255,255,255,0.8); margin-top: 4px;">(+ Scheduler!)</div> </div> </div> </div> </div> </div> </div> <!-- FAQ Section --> <div style="margin-bottom: 80px;"> <h2 style="text-align: center; font-size: 32px; margin-bottom: 40px; color: var(--text-heading);"> Common Questions</h2> <div style="max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px;"> <div style="border: 1px solid var(--border-color); border-radius: 12px; padding: 24px;"> <h3 style="font-size: 18px; margin-bottom: 12px; color: var(--text-heading);">Can I schedule Reels and Carousels?</h3> <p style="color: var(--secondary-color);">Yes! You can upload and schedule Instagram Reels,Posts,and Carousels directly from our dashboard.</p> </div> <div style="border: 1px solid var(--border-color); border-radius: 12px; padding: 24px;"> <h3 style="font-size: 18px; margin-bottom: 12px; color: var(--text-heading);">Do I need to set up the automation separately?</h3> <p style="color: var(--secondary-color);">No. You configure the trigger keyword and the DM reply on the same screen where you upload your content. It's a unified workflow.</p> </div> <div style="border: 1px solid var(--border-color); border-radius: 12px; padding: 24px;"> <h3 style="font-size: 18px; margin-bottom: 12px; color: var(--text-heading);">What happens if I edit the post later?</h3> <p style="color: var(--secondary-color);">The automation is linked to the post ID. Even if you edit the caption,the automation remains active.</p> </div> </div> </div> </section> </div> </main> </Layout> <style> .split-media{display:flex;justify-content:center;align-items:center;padding:20px}.scheduler-dashboard[data-astro-cid-jsqdk4zl]{width:100%;max-width:500px;background:#fff;border-radius:16px;box-shadow:0 24px 48px -12px #0000002e;border:1px solid #e5e7eb;overflow:hidden;position:relative}.dash-header[data-astro-cid-jsqdk4zl]{height:44px;background:#f9fafb;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;padding:0 20px;gap:8px}.win-dot[data-astro-cid-jsqdk4zl]{width:11px;height:11px;border-radius:50%}.red[data-astro-cid-jsqdk4zl]{background:#fee2e2;border:1px solid #fca5a5}.yellow[data-astro-cid-jsqdk4zl]{background:#fef3c7;border:1px solid #fcd34d}.green[data-astro-cid-jsqdk4zl]{background:#dcfce7;border:1px solid #86efac}.win-title[data-astro-cid-jsqdk4zl]{margin-left:auto;font-size:13px;color:#9ca3af;font-weight:500;margin-right:auto;transform:translate(-24px)}.dash-body[data-astro-cid-jsqdk4zl]{padding:28px;display:flex;gap:28px}.media-preview[data-astro-cid-jsqdk4zl]{width:130px;flex-shrink:0;display:flex;flex-direction:column;gap:12px}.media-placeholder[data-astro-cid-jsqdk4zl]{aspect-ratio:4/5;background:#f8fafc;border-radius:10px;display:flex;align-items:center;justify-content:center;border:1px dashed #cbd5e1;box-shadow:inset 0 2px 4px #00000005}.media-badge[data-astro-cid-jsqdk4zl]{display:flex;align-items:center;gap:6px;font-size:12px;color:#64748b;justify-content:center;font-weight:500;background:#f1f5f9;padding:4px 8px;border-radius:6px}.post-controls[data-astro-cid-jsqdk4zl]{flex:1;display:flex;flex-direction:column;gap:20px}.control-group[data-astro-cid-jsqdk4zl] label[data-astro-cid-jsqdk4zl],.field[data-astro-cid-jsqdk4zl] label[data-astro-cid-jsqdk4zl]{display:block;font-size:12px;color:#4b5563;font-weight:600;margin-bottom:8px}.input-sim[data-astro-cid-jsqdk4zl]{background:#fff;border:1px solid #d1d5db;border-radius:8px;padding:10px 14px;font-size:14px;color:#374151;min-height:42px;display:flex;align-items:center;box-shadow:0 1px 2px #0000000d}.caption-input[data-astro-cid-jsqdk4zl]{align-items:flex-start;height:80px;padding-top:10px;line-height:1.5;flex-wrap:wrap;align-content:flex-start;background:#f9fafb}.automation-panel[data-astro-cid-jsqdk4zl]{border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;animation:panelFlash 8s infinite;background:#fff;box-shadow:0 4px 6px -1px #0000000d}.panel-header[data-astro-cid-jsqdk4zl]{background:#fff;padding:12px 16px;border-bottom:1px solid #f3f4f6;display:flex;align-items:center;justify-content:space-between}.ph-left[data-astro-cid-jsqdk4zl]{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#111827}.zap-icon[data-astro-cid-jsqdk4zl]{color:#d97706;fill:#fef3c7;width:16px;height:16px}.toggle-switch[data-astro-cid-jsqdk4zl]{width:36px;height:20px;background:#e5e7eb;border-radius:100px;padding:2px;transition:.3s}.toggle-switch[data-astro-cid-jsqdk4zl].active{background:#16a34a}.toggle-knob[data-astro-cid-jsqdk4zl]{width:16px;height:16px;background:#fff;border-radius:50%;transform:translate(0);transition:.3s;box-shadow:0 1px 2px #0000001a}.toggle-switch[data-astro-cid-jsqdk4zl].active .toggle-knob[data-astro-cid-jsqdk4zl]{transform:translate(16px)}.panel-body[data-astro-cid-jsqdk4zl]{padding:16px;background:#fcfcfc}.field-row[data-astro-cid-jsqdk4zl]{display:flex;gap:16px}.field[data-astro-cid-jsqdk4zl]{flex:1}.short[data-astro-cid-jsqdk4zl]{height:38px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#fff}.dash-footer[data-astro-cid-jsqdk4zl]{padding:20px 28px;border-top:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between;background:#fff}.date-picker[data-astro-cid-jsqdk4zl]{display:flex;align-items:center;gap:8px;font-size:13px;color:#4b5563;background:#f3f4f6;padding:8px 12px;border-radius:8px;border:1px solid transparent;font-weight:500}.btn-schedule-sim[data-astro-cid-jsqdk4zl]{background:#111827;color:#fff;padding:10px 20px;border-radius:8px;font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px;border:none;box-shadow:0 4px 6px -1px #0000001a;animation:btnPulse 8s infinite;cursor:pointer}.success-pop[data-astro-cid-jsqdk4zl]{position:absolute;top:0;left:0;width:100%;height:100%;background:#ffffffe6;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;animation:successShow 8s infinite;backdrop-filter:blur(2px)}.pop-content[data-astro-cid-jsqdk4zl]{text-align:center;transform:scale(.8);animation:popScale 8s infinite}.check-circle[data-astro-cid-jsqdk4zl]{width:48px;height:48px;background:#16a34a;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;box-shadow:0 4px 6px #16a34a4d}.pop-text[data-astro-cid-jsqdk4zl] h4[data-astro-cid-jsqdk4zl]{font-size:18px;color:#111827;margin:0 0 4px}.pop-text[data-astro-cid-jsqdk4zl] p[data-astro-cid-jsqdk4zl]{font-size:13px;color:#6b7280;margin:0}.replay-indicator[data-astro-cid-jsqdk4zl]{position:absolute;bottom:0;left:0;width:100%;height:2px;background:#f3f4f6}.replay-bar[data-astro-cid-jsqdk4zl]{height:100%;background:#2563eb;width:0;animation:progressBar 8s linear infinite}.typing-1[data-astro-cid-jsqdk4zl]{opacity:0;animation:typeReveal .5s steps(10) forwards .5s}.typing-2[data-astro-cid-jsqdk4zl]{opacity:0;font-weight:700;color:#2563eb;animation:typeReveal .2s steps(4) forwards 1.2s}.typing-3[data-astro-cid-jsqdk4zl]{opacity:0;animation:typeReveal .3s steps(6) forwards 1.6s}@keyframes typeReveal{to{opacity:1}}.cursor[data-astro-cid-jsqdk4zl]{animation:blink 1s infinite;margin-left:2px;color:#2563eb}@keyframes blink{50%{opacity:0}}@keyframes panelFlash{0%,25%{border-color:#e5e7eb;box-shadow:none}30%,45%{border-color:#d97706;box-shadow:0 0 0 4px #d977061a}50%,to{border-color:#e5e7eb;box-shadow:none}}@keyframes btnPulse{0%,60%{transform:scale(1)}62%{transform:scale(.95)}65%{transform:scale(1)}to{transform:scale(1)}}@keyframes successShow{0%,65%{opacity:0}66%{opacity:1;pointer-events:auto}90%{opacity:1}95%{opacity:0}to{opacity:0}}@keyframes popScale{0%,65%{transform:scale(.8) translateY(10px)}68%,90%{transform:scale(1) translateY(0)}to{transform:scale(.8)}}@keyframes progressBar{0%{width:0}to{width:100%}}.feature-badge[data-astro-cid-jsqdk4zl]{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(90deg,#eff6ff,#eef2ff);border:1px solid #dbeafe;color:#2563eb;font-weight:600;font-size:12px;padding:6px 12px;border-radius:100px;margin-bottom:24px;box-shadow:0 1px 2px #2563eb0d;width:fit-content}.feature-badge[data-astro-cid-jsqdk4zl] i[data-astro-cid-jsqdk4zl]{color:#f59e0b;fill:#fef3c7}
