build with db

app/partials/onboard-modal.html

@@ -0,0 +1,53 @@
+<div class="tac">
+	<svg width="130px" height="50px">
+		<use xlink:href="#logo" />
+	</svg>
+	<h1 style="margin-top:20px">Welcome to Web Maker</h1>
+</div>
+
+<div class="flex" style="margin-top;: 100px;">
+	<div class="onboard-step">
+		<div class="tac">
+			<svg class="onboard-step__icon" viewBox="0 0 24 24">
+				<path d="M13.64,21.97C13.14,22.21 12.54,22 12.31,21.5L10.13,16.76L7.62,18.78C7.45,18.92 7.24,19 7,19A1,1 0 0,1 6,18V3A1,1 0 0,1 7,2C7.24,2 7.47,2.09 7.64,2.23L7.65,2.22L19.14,11.86C19.57,12.22 19.62,12.85 19.27,13.27C19.12,13.45 18.91,13.57 18.7,13.61L15.54,14.23L17.74,18.96C18,19.46 17.76,20.05 17.26,20.28L13.64,21.97Z"
+				/>
+			</svg>
+		</div>
+		<p>
+			Open Web Maker anytime by clicking the
+			<svg class="relative" style="top:5px;" width="40" height="30">
+				<use xlink:href="#logo" />
+			</svg> button in top-right side of your browser.
+		</p>
+	</div>
+	<div class="onboard-step">
+		<div class="tac">
+			<svg class="onboard-step__icon" viewBox="0 0 24 24">
+				<use xlink:href="#settings-icon"></use>
+			</svg>
+		</div>
+		<p>
+			Configure and customize settings by clicking the gear icon (
+			<svg style="width:18px;height:18px;position:relative;top:3px;fill:#888"
+			viewBox="0 0 24 24">
+				<use xlink:href="#settings-icon"></use>
+			</svg>) in bottom right of the app.
+		</p>
+	</div>
+	<div class="onboard-step">
+		<div class="tac">
+			<svg class="onboard-step__icon" style="stroke-width:0.2px;">
+				<use xlink:href="#twitter-icon"></use>
+			</svg>
+		</div>
+		<p>
+			Follow <a href="https://twitter.com/intent/follow?screen_name=webmakerApp">@webmakerApp</a> to know about the new upcoming
+			features!
+		</p>
+	</div>
+</div>
+
+
+<p class="tac">
+	<button class="btn" d-click="closeAllOverlays">Lets start!</button>
+</p>