Capstone/ui/templates/landing_content.templ

package templates

templ LandingContent() {
	<main>
		<div class="relative pt-16 pb-32 flex content-center items-center justify-center" style="min-height: 75vh;">
			<div
 				class="absolute top-0 w-full h-full bg-center bg-cover"
 				style="background-image: url(&#34;https://images.unsplash.com/photo-1522158637959-30385a09e0da?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1267&amp;q=80&#34;);"
			>
				<span id="blackOverlay" class="w-full h-full absolute opacity-75 bg-black"></span>
			</div>
			<div class="container relative mx-auto">
				<div class="items-center flex flex-wrap">
					<div class="w-full lg:w-6/12 px-4 ml-auto mr-auto text-center">
						<div class="pr-12">
							<h1 class="text-white font-semibold text-5xl">
								Automate the things that take time
							</h1>
							<p class="mt-4 text-lg text-gray-300">
								Ministry has enough activities that take time. Automate
								the things that take you away from the great commision.
								Have more time to do what you are called to
							</p>
						</div>
					</div>
				</div>
			</div>
			<div
 				class="top-auto bottom-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden"
 				style="height: 70px;"
			>
				<svg
 					class="absolute bottom-0 overflow-hidden"
 					xmlns="http://www.w3.org/2000/svg"
 					preserveAspectRatio="none"
 					version="1.1"
 					viewBox="0 0 2560 100"
 					x="0"
 					y="0"
				>
					<polygon class="text-gray-300 fill-current" points="2560 0 2560 100 0 100"></polygon>
				</svg>
			</div>
		</div>
		<section class="pb-20 bg-gray-300 -mt-24">
			<div class="container mx-auto px-4">
				<div class="flex flex-wrap">
					<div class="lg:pt-12 pt-6 w-full md:w-4/12 px-4 text-center">
						<div
 							class="relative flex flex-col min-w-0 break-words bg-white w-full mb-8 shadow-lg rounded-lg"
						>
							<div class="px-4 py-5 flex-auto">
								<div
 									class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-red-400"
								>
									<i class="fa-brands fa-youtube"></i>
								</div>
								<h6 class="text-xl font-semibold">Youtube Live streams</h6>
								<p class="mt-2 mb-4 text-gray-600">
									Automatically schedule youtube live streams. Never manage your broadcasts again
									with automated scheduling
								</p>
							</div>
						</div>
					</div>
					<div class="w-full md:w-4/12 px-4 text-center">
						<div
 							class="relative flex flex-col min-w-0 break-words bg-white w-full mb-8 shadow-lg rounded-lg"
						>
							<div class="px-4 py-5 flex-auto">
								<div
 									class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-blue-400"
								>
									<i class="fas fa-retweet"></i>
								</div>
								<h6 class="text-xl font-semibold">Connect it all</h6>
								<p class="mt-2 mb-4 text-gray-600">
									Connect the services that take time out of your day.
									Let us do the hard work of scheduling and managing them
								</p>
							</div>
						</div>
					</div>
					<div class="pt-6 w-full md:w-4/12 px-4 text-center">
						<div
 							class="relative flex flex-col min-w-0 break-words bg-white w-full mb-8 shadow-lg rounded-lg"
						>
							<div class="px-4 py-5 flex-auto">
								<div
 									class="text-white p-0 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-transparent"
								>
									<img class="" src="/static/app-icon-services-400.png"></img>
								</div>
								<h6 class="text-xl font-semibold">Planning Center</h6>
								<p class="mt-2 mb-4 text-gray-600">
									Link your planning center to automatically trigger events.
									Schedule live streams, and soon social media posts as well.
								</p>
							</div>
						</div>
					</div>
				</div>
				<div class="flex flex-wrap items-center mt-32">
					<div class="w-full md:w-5/12 px-4 mr-auto ml-auto">
						<div
 							class="text-gray-600 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-gray-100"
						>
							<i class="fas fa-church text-xl"></i>
						</div>
						<h3 class="text-3xl mb-2 font-semibold leading-normal">
							Built by church people for church people
						</h3>
						<p class="text-lg font-light leading-relaxed mt-4 mb-4 text-gray-700">
							With over half a decade of time spen as the technical director of
							my local church I know the things that take time away from the
							important things.
						</p>
						<p class="text-lg font-light leading-relaxed mt-0 mb-4 text-gray-700">
							I have built this to take the hassle out of last minute Planning center
							changes. No need to update your livestream, facebook posts, and instagram
							stories. We take care of that for you
						</p>
						<a
 							href="https://www.creative-tim.com/learning-lab/tailwind-starter-kit#/presentation"
 							class="font-bold text-gray-800 mt-8"
						>Check Ministry Auto Tools</a>
					</div>
					<div class="w-full md:w-4/12 px-4 mr-auto ml-auto">
						<div
 							class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg bg-blue-600"
						>
							<img
 								alt="..."
 								src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1051&amp;q=80"
 								class="w-full align-middle rounded-t-lg"
							/>
							<blockquote class="relative p-8 mb-4">
								<svg
 									preserveAspectRatio="none"
 									xmlns="http://www.w3.org/2000/svg"
 									viewBox="0 0 583 95"
 									class="absolute left-0 w-full block"
 									style="height: 95px; top: -94px;"
								>
									<polygon points="-30,95 583,95 583,65" class="text-blue-600 fill-current"></polygon>
								</svg>
								<h4 class="text-xl font-bold text-white">
									The best people for your people
								</h4>
								<p class="text-md font-light mt-2 text-white">
									We are here to make sure your people can do what they do best.
									Be with your people. Stop spending time working on the things
									that take you away from that.
								</p>
							</blockquote>
						</div>
					</div>
				</div>
			</div>
		</section>
		<section class="pb-20 relative block bg-gray-900">
			<div
 				class="bottom-auto top-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden -mt-20"
 				style="height: 80px;"
			>
				<svg
 					class="absolute bottom-0 overflow-hidden"
 					xmlns="http://www.w3.org/2000/svg"
 					preserveAspectRatio="none"
 					version="1.1"
 					viewBox="0 0 2560 100"
 					x="0"
 					y="0"
				>
					<polygon class="text-gray-900 fill-current" points="2560 0 2560 100 0 100"></polygon>
				</svg>
			</div>
			<div class="container mx-auto px-4 lg:pt-24 lg:pb-64">
				<div class="flex flex-wrap text-center justify-center">
					<div class="w-full lg:w-6/12 px-4">
						<h2 class="text-4xl font-semibold text-white">Take something off your plate</h2>
						<p class="text-lg leading-relaxed mt-4 mb-4 text-gray-500">
							There is so much room to take chores of ministry off the plate
							of volunteers and staff members alike. Let us do that for you.
							Together we can spend more time with people
						</p>
					</div>
				</div>
				<div class="flex flex-wrap mt-12 justify-center">
					<div class="w-full lg:w-3/12 px-4 text-center">
						<div
 							class="text-gray-900 p-3 w-12 h-12 shadow-lg rounded-full bg-white inline-flex items-center justify-center"
						>
							<i class="fas fa-medal text-xl"></i>
						</div>
						<h6 class="text-xl mt-5 font-semibold text-white">
							Excelent Services
						</h6>
						<p class="mt-2 mb-4 text-gray-500">
							With high quality integrations with the services you use every day,
							we will become your one stop shop
						</p>
					</div>
					<div class="w-full lg:w-3/12 px-4 text-center">
						<div
 							class="text-gray-900 p-3 w-12 h-12 shadow-lg rounded-full bg-white inline-flex items-center justify-center"
						>
							<i class="fas fa-poll text-xl"></i>
						</div>
						<h5 class="text-xl mt-5 font-semibold text-white">
							Track the action
						</h5>
						<p class="mt-2 mb-4 text-gray-500">
							With audit and reporting tools, track how an event moves through the system.
							Make sure what you want is what you get
						</p>
					</div>
					<div class="w-full lg:w-3/12 px-4 text-center">
						<div
 							class="text-gray-900 p-3 w-12 h-12 shadow-lg rounded-full bg-white inline-flex items-center justify-center"
						>
							<i class="fas fa-lightbulb text-xl"></i>
						</div>
						<h5 class="text-xl mt-5 font-semibold text-white">Get Creative</h5>
						<p class="mt-2 mb-4 text-gray-500">
							If you want simple we have it. If you want complicated we have it.
							Build what you wnat how you want
						</p>
					</div>
				</div>
			</div>
		</section>
		<section class="relative block py-24 lg:pt-0 bg-gray-900">
			<div class="container mx-auto px-4">
				<div class="flex flex-wrap justify-center lg:-mt-64 -mt-48">
					<div class="w-full lg:w-6/12 px-4">
						<div
 							class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-300"
						>
							<div class="flex-auto p-5 lg:p-10">
								<h4 class="text-2xl font-semibold">Want to try it out?</h4>
								<p class="leading-relaxed mt-1 mb-4 text-gray-600">
									Complete this form and we will get back to you in 24 hours.
								</p>
								<div class="relative w-full mb-3 mt-8">
									<label
 										class="block uppercase text-gray-700 text-xs font-bold mb-2"
 										for="full-name"
									>Full Name</label><input
 	type="text"
 	class="border-0 px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full"
 	placeholder="Full Name"
 	style="transition: all 0.15s ease 0s;"
/>
								</div>
								<div class="relative w-full mb-3">
									<label
 										class="block uppercase text-gray-700 text-xs font-bold mb-2"
 										for="email"
									>Email</label><input
 	type="email"
 	class="border-0 px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full"
 	placeholder="Email"
 	style="transition: all 0.15s ease 0s;"
/>
								</div>
								<div class="relative w-full mb-3">
									<label
 										class="block uppercase text-gray-700 text-xs font-bold mb-2"
 										for="message"
									>Message</label><textarea
 	rows="4"
 	cols="80"
 	class="border-0 px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full"
 	placeholder="Type a message..."
></textarea>
								</div>
								<div class="text-center mt-6">
									<button
 										class="bg-gray-900 text-white active:bg-gray-700 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1"
 										type="button"
 										style="transition: all 0.15s ease 0s;"
									>
										Send Message
									</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
	</main>
}