html(lang="en")
	head
		include import/_meta.jade
		title Sketch Guides
		link(rel="stylesheet", href="./css/index.css")
		script(src='./js/js.js')
	body
		//- .animsition-loading

		//- noscript
			iframe(src="https://www.googletagmanager.com/ns.html?id=GTM-NPW7QR2", height="0", width="0", style="display:none;visibility:hidden")

		include include/_nav.jade

		main#main.page-intro(data-animsition-in-class="fade-in",data-animsition-out-class='fade-out',data-animsition-in-duration='1000')
			header
				.imgBox
					img(src="lib/image/sketch.svg", alt="Sketch app icon")
				.contentBox
					h1.brand-title Sketch Guides
					p.brand-describe A Plugin now with a beautifully easy-to-use interface, simply add accurate guides to edges and midpoints at once, it has never been quicker and easier.
				.headerDownload
					a(href='https://github.com/luvmex/Sketch-Guides/archive/master.zip', download='SketchGuides', onclick="ga('send', 'event', 'pluginDownloadHeader', 'click', event.target.href );", id='pluginDownload') Download Plugin
					h6 Available for Sketch 41.^

			section.s1.showupline
				.shadowBox
					.tutorial
						video(src='/lib/video/box.mp4', autoplay='true', loop='true', muted='true', poster='/lib/video/box.jpg')
					//- .tutorial(data-vide-bg="mp4: /lib/video/box.mp4", data-vide-options="position: 0% 0%")
						//- .videoimage(href="/lib/video/box.jpeg")
							p Sorry, The video can't work.
			section.s2
				h2 Intuition User Interface
				p When you launch guides interface control tools, it’s free to keep or close the window on your Sketch app, It will makes complex work as easy as click, be enjoy in once new way.
				img(src="lib/image/Describe.png", alt="Tool Describe")
			section.s3.darkBg
				.left-content
					.box
						h2 Precisely defined
						p It can use perfectly in Artboard, Shape layer,  Text or Bitmap and more, you can even use for Group with in mutiple object.
				.right-img
					img.screen(src="lib/image/screen.png", alt="Screen Shot")
					img.controltool(src="lib/image/ControlTool_UI.png", alt="Control Tool UI", data-parallax='{"y": 30}')
			section.s4.lightBg
				.content
					h2 Design in faster and more smoothly
					p.
						Help you to saved a lot of time in setup the guides without manually. That me show you this remarkable sketch plugin. Just download it and enjoy for design work.
				.download
					a(href="https://github.com/luvmex/Sketch-Guides/archive/master.zip", download='SketchGuides', onclick="ga('send', 'event', 'pluginDownloadContent', 'click', event.target.href );", id='pluginDownload2') Download for Free
				.donate
					h6 If you like it, Just buy me a drink.
					form(action='https://www.paypal.com/cgi-bin/webscr', method='post', target='_top')
						input(type='hidden', name='cmd', value='_s-xclick')
						input(type='hidden', name='hosted_button_id', value='3MEZ5H8DU7DUW')
						input(type='image', src='https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif', border='0', name='submit', title='PayPal - The safer, easier way to pay online!', alt='Donate', style='outline:none;')
						img(alt='', border='0', src='https://www.paypal.com/en_US/i/scr/pixel.gif', width='1', height='1')

			#scrolltop
				.scrolllineup
		include include/_footer.jade

		script(src="https://www.gstatic.com/firebasejs/3.5.0/firebase.js")
		script.
			// Initialize Firebase
			var config = {
				apiKey: "AIzaSyCujkVIS1paLrgvUqOn5pP6gMSj3ZzNZcw",
				authDomain: "sketch-guides.firebaseapp.com",
				databaseURL: "https://sketch-guides.firebaseio.com",
				storageBucket: "",
				messagingSenderId: "913207304785"
			};
			firebase.initializeApp(config);
