<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mopik Automation</title>
<meta name="description" content="Mopik Automation helps streamers and e-commerce brands automate promotional workflows and marketing tasks across NYC, NJ, and remote." />
<meta name="keywords" content="social media automation NJ, streamer automation services, e-commerce automation NYC, NJIT automation consultant, creator promotion automation" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<header class="nav">
<div class="nav-inner">
<a class="brand" href="#top">Mopik Automation</a>
<nav class="links">
<a href="#services">Services</a>
<a href="#case-studies">Case Studies</a>
<a href="#about">About</a>
<a class="nav-cta" href="#contact">Get a Free Audit</a>
</nav>
</div>
</header>
<main id="top">
<!-- HERO -->
<section class="hero">
<div class="container">
<div class="pill">NYC • NJ • Remote</div>
<h1>Automation systems for streamers and e-commerce brands.</h1>
<p class="lead">
Mopik Automation eliminates manual promotion—so you can publish more, convert more, and spend less time doing repetitive marketing tasks.
</p>
<div class="cta-row">
<a class="btn primary" href="#contact">Claim Your AI Readiness Score</a>
<a class="btn secondary" href="#contact">Get a Free Automation Audit</a>
</div>
<div class="trust">
<div class="trust-item">
<div class="trust-title">Fast setup</div>
<div class="trust-text">Lightweight systems you can use immediately.</div>
</div>
<div class="trust-item">
<div class="trust-title">Practical automation</div>
<div class="trust-text">Less busywork, more output.</div>
</div>
<div class="trust-item">
<div class="trust-title">Creator + store focused</div>
<div class="trust-text">Promo workflows tailored to your niche.</div>
</div>
</div>
</div>
</section>
<!-- SERVICES -->
<section id="services" class="section">
<div class="container">
<h2>Services</h2>
<p class="section-sub">
Choose a starting point. Each service can be packaged as a “quick win” or a full automation system.
</p>
<div class="grid">
<article class="card">
<h3>Social Media Promotion Automation</h3>
<p>Turn clips, posts, and announcements into a repeatable workflow—so you stay consistent without manual effort.</p>
<ul>
<li>Posting checklists + templates</li>
<li>Scheduling + content pipeline</li>
<li>Cross-platform workflow planning</li>
</ul>
</article>
<article class="card">
<h3>Streamer Systems & Overlays</h3>
<p>Professional on-stream presentation and assets that make your channel look legitimate and easier to manage.</p>
<ul>
<li>OBS overlay packages</li>
<li>Scene organization & safety setup</li>
<li>Goal banners + alerts layout</li>
</ul>
</article>
<article class="card">
<h3>E-commerce Promo Workflows</h3>
<p>Automate promotion tasks around new drops, sales, and product launches with repeatable systems.</p>
<ul>
<li>Launch checklists</li>
<li>Promo calendar structure</li>
<li>Content prompts for products</li>
</ul>
</article>
<article class="card">
<h3>AI Content & Posting Systems</h3>
<p>Generate ideas, captions, hooks, and reuse content efficiently—with a simple pipeline you control.</p>
<ul>
<li>Content idea generator workflows</li>
<li>Caption + hook templates</li>
<li>Reuse/repurpose systems</li>
</ul>
</article>
</div>
</div>
</section>
<!-- CASE STUDIES -->
<section id="case-studies" class="section">
<div class="container">
<h2>Case Studies</h2>
<p class="section-sub">Proof projects that demonstrate shipping, structure, and automation thinking.</p>
<div class="stack">
<article class="case">
<div class="case-head">
<h3>Class Websites (Responsive Front-End)</h3>
<div class="badge">HTML • CSS • GitHub Pages</div>
</div>
<div class="case-body">
<div class="case-col">
<h4>Problem</h4>
<p>Needed a clean, deployable site that communicates value quickly and works on mobile.</p>
</div>
<div class="case-col">
<h4>Approach</h4>
<p>Built structured layouts with semantic HTML, responsive CSS, and GitHub Pages deployment.</p>
</div>
<div class="case-col">
<h4>Outcome</h4>
<p>A fast-loading site foundation that can be extended into consulting landing pages and funnels.</p>
</div>
</div>
</article>
<article class="case">
<div class="case-head">
<h3>Stream Overlay Systems (Creator Branding)</h3>
<div class="badge">OBS • Layout Systems • Workflow</div>
</div>
<div class="case-body">
<div class="case-col">
<h4>Problem</h4>
<p>Creators struggle with messy scenes, inconsistent branding, and manual on-stream setup.</p>
</div>
<div class="case-col">
<h4>Approach</h4>
<p>Designed clean overlay layouts and organized scene structures that reduce setup friction.</p>
</div>
<div class="case-col">
<h4>Outcome</h4>
<p>A repeatable system for professional presentation and faster stream management.</p>
</div>
</div>
</article>
</div>
<p class="note">
Want a custom case study PDF? Use the audit form below and I’ll generate a tailored automation plan.
</p>
</div>
</section>
<!-- ABOUT -->
<section id="about" class="section">
<div class="container">
<h2>About Mopik Automation</h2>
<p class="section-sub">
Built by an NJIT student focused on practical automation for creators and online brands.
</p>
<div class="about">
<div class="about-card">
<h3>Core Skills</h3>
<ul>
<li>Workflow design & automation thinking</li>
<li>Front-end deployment (HTML/CSS/JS)</li>
<li>Python scripting foundations</li>
<li>OBS systems and streaming layouts</li>
</ul>
</div>
<div class="about-card">
<h3>Tools</h3>
<ul>
<li>Git / GitHub / GitHub Pages</li>
<li>OBS</li>
<li>HTML / CSS / JavaScript</li>
<li>Python</li>
</ul>
</div>
</div>
</div>
</section>
<!-- CONTACT / LEAD GEN -->
<section id="contact" class="section">
<div class="container">
<h2>Claim Your AI Readiness Score</h2>
<p class="section-sub">
Send 3 details and I’ll reply with a short score + automation plan. No backend needed—this opens your email draft.
</p>
<div class="contact-card">
<form id="leadForm">
<label>
Business/Channel Name
<input name="name" type="text" placeholder="Ex: My Shopify Store / Twitch Channel" required />
</label>
<label>
Current Promo Workflow
<input name="workflow" type="text" placeholder="Ex: I post manually on TikTok + IG when I remember" required />
</label>
<label>
What You Want Automated
<input name="goal" type="text" placeholder="Ex: clip-to-post pipeline, scheduling, captions, promo calendar" required />
</label>
<button class="btn primary" type="submit">Generate Email Request</button>
<p class="small">
Or email directly: <a class="inline" href="mailto:mm2887@njit.edu">mm2887@njit.edu</a>
</p>
</form>
</div>
</div>
</section>
<footer class="footer">
<div class="container footer-inner">
<div>© <span id="year"></span> Mopik Automation</div>
<div class="footer-links">
<a href="#top">Back to top</a>
</div>
</div>
</footer>
</main>
<script src="js/main.js"></script>
</body>
</html>