Preston_PLB
/
Capstone
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

landing page start

This commit is contained in:
Preston Baxter 2023-10-28 10:15:42 -05:00
parent ce2644a1ac
commit 43d111cb0e
5 changed files with 287 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/main.go
View File

@ -12,7 +12,7 @@ func main() {
r.GET("/", func(c *gin.Context) { r.GET("/", func(c *gin.Context) {
raw := []byte{} raw := []byte{}
buf := bytes.NewBuffer(raw) buf := bytes.NewBuffer(raw)
templates.Hello("str").Render(c.Request.Context(), buf) templates.LandingPage(false).Render(c.Request.Context(), buf)
c.Data(200, "text/html", []byte(buf.String())) c.Data(200, "text/html", []byte(buf.String()))

319
ui/templates/content.templ
View File

@ -3,8 +3,10 @@ package templates
templ Content() { templ Content() {
<main> <main>
<div class="relative pt-16 pb-32 flex content-center items-center justify-center" style="min-height: 75vh;"> <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" <div
style='background-image: url("https://images.unsplash.com/photo-1557804506-669a67965ba0?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1267&amp;q=80");'> class="absolute top-0 w-full h-full bg-center bg-cover"
style="background-image: url(&#34;https://images.unsplash.com/photo-1557804506-669a67965ba0?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> <span id="blackOverlay" class="w-full h-full absolute opacity-75 bg-black"></span>
</div> </div>
<div class="container relative mx-auto"> <div class="container relative mx-auto">
@ -23,10 +25,19 @@ templ Content() {
</div> </div>
</div> </div>
</div> </div>
<div class="top-auto bottom-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden" <div
style="height: 70px;"> class="top-auto bottom-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden"
<svg class="absolute bottom-0 overflow-hidden" xmlns="http://www.w3.org/2000/svg" style="height: 70px;"
preserveAspectRatio="none" version="1.1" viewBox="0 0 2560 100" x="0" y="0"> >
<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> <polygon class="text-gray-300 fill-current" points="2560 0 2560 100 0 100"></polygon>
</svg> </svg>
</div> </div>
@ -36,10 +47,12 @@ templ Content() {
<div class="flex flex-wrap"> <div class="flex flex-wrap">
<div class="lg:pt-12 pt-6 w-full md:w-4/12 px-4 text-center"> <div class="lg:pt-12 pt-6 w-full md:w-4/12 px-4 text-center">
<div <div
class="relative flex flex-col min-w-0 break-words bg-white w-full mb-8 shadow-lg rounded-lg"> 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="px-4 py-5 flex-auto">
<div <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"> 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="fas fa-award"></i> <i class="fas fa-award"></i>
</div> </div>
<h6 class="text-xl font-semibold">Awarded Agency</h6> <h6 class="text-xl font-semibold">Awarded Agency</h6>
@ -52,10 +65,12 @@ templ Content() {
</div> </div>
<div class="w-full md:w-4/12 px-4 text-center"> <div class="w-full md:w-4/12 px-4 text-center">
<div <div
class="relative flex flex-col min-w-0 break-words bg-white w-full mb-8 shadow-lg rounded-lg"> 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="px-4 py-5 flex-auto">
<div <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"> 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> <i class="fas fa-retweet"></i>
</div> </div>
<h6 class="text-xl font-semibold">Free Revisions</h6> <h6 class="text-xl font-semibold">Free Revisions</h6>
@ -68,10 +83,12 @@ templ Content() {
</div> </div>
<div class="pt-6 w-full md:w-4/12 px-4 text-center"> <div class="pt-6 w-full md:w-4/12 px-4 text-center">
<div <div
class="relative flex flex-col min-w-0 break-words bg-white w-full mb-8 shadow-lg rounded-lg"> 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="px-4 py-5 flex-auto">
<div <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-green-400"> class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-green-400"
>
<i class="fas fa-fingerprint"></i> <i class="fas fa-fingerprint"></i>
</div> </div>
<h6 class="text-xl font-semibold">Verified Company</h6> <h6 class="text-xl font-semibold">Verified Company</h6>
@ -86,7 +103,8 @@ templ Content() {
<div class="flex flex-wrap items-center mt-32"> <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="w-full md:w-5/12 px-4 mr-auto ml-auto">
<div <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"> 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-user-friends text-xl"></i> <i class="fas fa-user-friends text-xl"></i>
</div> </div>
<h3 class="text-3xl mb-2 font-semibold leading-normal"> <h3 class="text-3xl mb-2 font-semibold leading-normal">
@ -102,18 +120,28 @@ templ Content() {
faster. You can change the text and images and you're good to faster. You can change the text and images and you're good to
go. Just make sure you enable them first via JavaScript. go. Just make sure you enable them first via JavaScript.
</p> </p>
<a href="https://www.creative-tim.com/learning-lab/tailwind-starter-kit#/presentation" <a
class="font-bold text-gray-800 mt-8">Check Tailwind Starter Kit!</a> href="https://www.creative-tim.com/learning-lab/tailwind-starter-kit#/presentation"
class="font-bold text-gray-800 mt-8"
>Check Tailwind Starter Kit!</a>
</div> </div>
<div class="w-full md:w-4/12 px-4 mr-auto ml-auto"> <div class="w-full md:w-4/12 px-4 mr-auto ml-auto">
<div <div
class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg bg-pink-600"> class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg bg-pink-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" <img
class="w-full align-middle rounded-t-lg" /> 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"> <blockquote class="relative p-8 mb-4">
<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" <svg
class="absolute left-0 w-full block" style="height: 95px; top: -94px;"> 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-pink-600 fill-current"></polygon> <polygon points="-30,95 583,95 583,65" class="text-pink-600 fill-current"></polygon>
</svg> </svg>
<h4 class="text-xl font-bold text-white"> <h4 class="text-xl font-bold text-white">
@ -131,23 +159,36 @@ templ Content() {
</div> </div>
</section> </section>
<section class="relative py-20"> <section class="relative py-20">
<div class="bottom-auto top-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden -mt-20" <div
style="height: 80px;"> class="bottom-auto top-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden -mt-20"
<svg class="absolute bottom-0 overflow-hidden" xmlns="http://www.w3.org/2000/svg" style="height: 80px;"
preserveAspectRatio="none" version="1.1" viewBox="0 0 2560 100" x="0" y="0"> >
<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-white fill-current" points="2560 0 2560 100 0 100"></polygon> <polygon class="text-white fill-current" points="2560 0 2560 100 0 100"></polygon>
</svg> </svg>
</div> </div>
<div class="container mx-auto px-4"> <div class="container mx-auto px-4">
<div class="items-center flex flex-wrap"> <div class="items-center flex flex-wrap">
<div class="w-full md:w-4/12 ml-auto mr-auto px-4"> <div class="w-full md:w-4/12 ml-auto mr-auto px-4">
<img alt="..." class="max-w-full rounded-lg shadow-lg" <img
src="https://images.unsplash.com/photo-1555212697-194d092e3b8f?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=634&amp;q=80" /> alt="..."
class="max-w-full rounded-lg shadow-lg"
src="https://images.unsplash.com/photo-1555212697-194d092e3b8f?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=634&amp;q=80"
/>
</div> </div>
<div class="w-full md:w-5/12 ml-auto mr-auto px-4"> <div class="w-full md:w-5/12 ml-auto mr-auto px-4">
<div class="md:pr-12"> <div class="md:pr-12">
<div <div
class="text-pink-600 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-pink-300"> class="text-pink-600 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-pink-300"
>
<i class="fas fa-rocket text-xl"></i> <i class="fas fa-rocket text-xl"></i>
</div> </div>
<h3 class="text-3xl font-semibold">A growing company</h3> <h3 class="text-3xl font-semibold">A growing company</h3>
@ -161,8 +202,12 @@ templ Content() {
<div class="flex items-center"> <div class="flex items-center">
<div> <div>
<span <span
class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-pink-600 bg-pink-200 mr-3"><i class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-pink-600 bg-pink-200 mr-3"
class="fas fa-fingerprint"></i></span> >
<i
class="fas fa-fingerprint"
></i>
</span>
</div> </div>
<div> <div>
<h4 class="text-gray-600"> <h4 class="text-gray-600">
@ -175,8 +220,12 @@ templ Content() {
<div class="flex items-center"> <div class="flex items-center">
<div> <div>
<span <span
class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-pink-600 bg-pink-200 mr-3"><i class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-pink-600 bg-pink-200 mr-3"
class="fab fa-html5"></i></span> >
<i
class="fab fa-html5"
></i>
</span>
</div> </div>
<div> <div>
<h4 class="text-gray-600">Amazing page examples</h4> <h4 class="text-gray-600">Amazing page examples</h4>
@ -187,8 +236,12 @@ templ Content() {
<div class="flex items-center"> <div class="flex items-center">
<div> <div>
<span <span
class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-pink-600 bg-pink-200 mr-3"><i class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-pink-600 bg-pink-200 mr-3"
class="far fa-paper-plane"></i></span> >
<i
class="far fa-paper-plane"
></i>
</span>
</div> </div>
<div> <div>
<h4 class="text-gray-600">Dynamic components</h4> <h4 class="text-gray-600">Dynamic components</h4>
@ -216,8 +269,12 @@ templ Content() {
<div class="flex flex-wrap"> <div class="flex flex-wrap">
<div class="w-full md:w-6/12 lg:w-3/12 lg:mb-0 mb-12 px-4"> <div class="w-full md:w-6/12 lg:w-3/12 lg:mb-0 mb-12 px-4">
<div class="px-6"> <div class="px-6">
<img alt="..." src="./assets/img/team-1-800x800.jpg" <img
class="shadow-lg rounded-full max-w-full mx-auto" style="max-width: 120px;" /> alt="..."
src="./assets/img/team-1-800x800.jpg"
class="shadow-lg rounded-full max-w-full mx-auto"
style="max-width: 120px;"
/>
<div class="pt-6 text-center"> <div class="pt-6 text-center">
<h5 class="text-xl font-bold">Ryan Tompson</h5> <h5 class="text-xl font-bold">Ryan Tompson</h5>
<p class="mt-1 text-sm text-gray-500 uppercase font-semibold"> <p class="mt-1 text-sm text-gray-500 uppercase font-semibold">
@ -225,14 +282,21 @@ templ Content() {
</p> </p>
<div class="mt-6"> <div class="mt-6">
<button <button
class="bg-blue-400 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1" class="bg-blue-400 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
type="button"> type="button"
<i class="fab fa-twitter"></i></button><button >
class="bg-blue-600 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1" <i class="fab fa-twitter"></i>
type="button"> </button>
<i class="fab fa-facebook-f"></i></button><button <button
class="bg-pink-500 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1" class="bg-blue-600 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
type="button"> type="button"
>
<i class="fab fa-facebook-f"></i>
</button>
<button
class="bg-pink-500 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
type="button"
>
<i class="fab fa-dribbble"></i> <i class="fab fa-dribbble"></i>
</button> </button>
</div> </div>
@ -241,8 +305,12 @@ templ Content() {
</div> </div>
<div class="w-full md:w-6/12 lg:w-3/12 lg:mb-0 mb-12 px-4"> <div class="w-full md:w-6/12 lg:w-3/12 lg:mb-0 mb-12 px-4">
<div class="px-6"> <div class="px-6">
<img alt="..." src="./assets/img/team-2-800x800.jpg" <img
class="shadow-lg rounded-full max-w-full mx-auto" style="max-width: 120px;" /> alt="..."
src="./assets/img/team-2-800x800.jpg"
class="shadow-lg rounded-full max-w-full mx-auto"
style="max-width: 120px;"
/>
<div class="pt-6 text-center"> <div class="pt-6 text-center">
<h5 class="text-xl font-bold">Romina Hadid</h5> <h5 class="text-xl font-bold">Romina Hadid</h5>
<p class="mt-1 text-sm text-gray-500 uppercase font-semibold"> <p class="mt-1 text-sm text-gray-500 uppercase font-semibold">
@ -250,11 +318,15 @@ templ Content() {
</p> </p>
<div class="mt-6"> <div class="mt-6">
<button <button
class="bg-red-600 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1" class="bg-red-600 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
type="button"> type="button"
<i class="fab fa-google"></i></button><button >
class="bg-blue-600 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1" <i class="fab fa-google"></i>
type="button"> </button>
<button
class="bg-blue-600 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
type="button"
>
<i class="fab fa-facebook-f"></i> <i class="fab fa-facebook-f"></i>
</button> </button>
</div> </div>
@ -263,8 +335,12 @@ templ Content() {
</div> </div>
<div class="w-full md:w-6/12 lg:w-3/12 lg:mb-0 mb-12 px-4"> <div class="w-full md:w-6/12 lg:w-3/12 lg:mb-0 mb-12 px-4">
<div class="px-6"> <div class="px-6">
<img alt="..." src="./assets/img/team-3-800x800.jpg" <img
class="shadow-lg rounded-full max-w-full mx-auto" style="max-width: 120px;" /> alt="..."
src="./assets/img/team-3-800x800.jpg"
class="shadow-lg rounded-full max-w-full mx-auto"
style="max-width: 120px;"
/>
<div class="pt-6 text-center"> <div class="pt-6 text-center">
<h5 class="text-xl font-bold">Alexa Smith</h5> <h5 class="text-xl font-bold">Alexa Smith</h5>
<p class="mt-1 text-sm text-gray-500 uppercase font-semibold"> <p class="mt-1 text-sm text-gray-500 uppercase font-semibold">
@ -272,14 +348,21 @@ templ Content() {
</p> </p>
<div class="mt-6"> <div class="mt-6">
<button <button
class="bg-red-600 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1" class="bg-red-600 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
type="button"> type="button"
<i class="fab fa-google"></i></button><button >
class="bg-blue-400 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1" <i class="fab fa-google"></i>
type="button"> </button>
<i class="fab fa-twitter"></i></button><button <button
class="bg-gray-800 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1" class="bg-blue-400 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
type="button"> type="button"
>
<i class="fab fa-twitter"></i>
</button>
<button
class="bg-gray-800 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
type="button"
>
<i class="fab fa-instagram"></i> <i class="fab fa-instagram"></i>
</button> </button>
</div> </div>
@ -288,8 +371,12 @@ templ Content() {
</div> </div>
<div class="w-full md:w-6/12 lg:w-3/12 lg:mb-0 mb-12 px-4"> <div class="w-full md:w-6/12 lg:w-3/12 lg:mb-0 mb-12 px-4">
<div class="px-6"> <div class="px-6">
<img alt="..." src="./assets/img/team-4-470x470.png" <img
class="shadow-lg rounded-full max-w-full mx-auto" style="max-width: 120px;" /> alt="..."
src="./assets/img/team-4-470x470.png"
class="shadow-lg rounded-full max-w-full mx-auto"
style="max-width: 120px;"
/>
<div class="pt-6 text-center"> <div class="pt-6 text-center">
<h5 class="text-xl font-bold">Jenna Kardi</h5> <h5 class="text-xl font-bold">Jenna Kardi</h5>
<p class="mt-1 text-sm text-gray-500 uppercase font-semibold"> <p class="mt-1 text-sm text-gray-500 uppercase font-semibold">
@ -297,17 +384,27 @@ templ Content() {
</p> </p>
<div class="mt-6"> <div class="mt-6">
<button <button
class="bg-pink-500 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1" class="bg-pink-500 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
type="button"> type="button"
<i class="fab fa-dribbble"></i></button><button >
class="bg-red-600 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1" <i class="fab fa-dribbble"></i>
type="button"> </button>
<i class="fab fa-google"></i></button><button <button
class="bg-blue-400 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1" class="bg-red-600 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
type="button"> type="button"
<i class="fab fa-twitter"></i></button><button >
class="bg-gray-800 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1" <i class="fab fa-google"></i>
type="button"> </button>
<button
class="bg-blue-400 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
type="button"
>
<i class="fab fa-twitter"></i>
</button>
<button
class="bg-gray-800 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
type="button"
>
<i class="fab fa-instagram"></i> <i class="fab fa-instagram"></i>
</button> </button>
</div> </div>
@ -318,10 +415,19 @@ templ Content() {
</div> </div>
</section> </section>
<section class="pb-20 relative block bg-gray-900"> <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" <div
style="height: 80px;"> class="bottom-auto top-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden -mt-20"
<svg class="absolute bottom-0 overflow-hidden" xmlns="http://www.w3.org/2000/svg" style="height: 80px;"
preserveAspectRatio="none" version="1.1" viewBox="0 0 2560 100" x="0" y="0"> >
<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> <polygon class="text-gray-900 fill-current" points="2560 0 2560 100 0 100"></polygon>
</svg> </svg>
</div> </div>
@ -339,7 +445,8 @@ templ Content() {
<div class="flex flex-wrap mt-12 justify-center"> <div class="flex flex-wrap mt-12 justify-center">
<div class="w-full lg:w-3/12 px-4 text-center"> <div class="w-full lg:w-3/12 px-4 text-center">
<div <div
class="text-gray-900 p-3 w-12 h-12 shadow-lg rounded-full bg-white inline-flex items-center justify-center"> 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> <i class="fas fa-medal text-xl"></i>
</div> </div>
<h6 class="text-xl mt-5 font-semibold text-white"> <h6 class="text-xl mt-5 font-semibold text-white">
@ -352,7 +459,8 @@ templ Content() {
</div> </div>
<div class="w-full lg:w-3/12 px-4 text-center"> <div class="w-full lg:w-3/12 px-4 text-center">
<div <div
class="text-gray-900 p-3 w-12 h-12 shadow-lg rounded-full bg-white inline-flex items-center justify-center"> 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> <i class="fas fa-poll text-xl"></i>
</div> </div>
<h5 class="text-xl mt-5 font-semibold text-white"> <h5 class="text-xl mt-5 font-semibold text-white">
@ -365,7 +473,8 @@ templ Content() {
</div> </div>
<div class="w-full lg:w-3/12 px-4 text-center"> <div class="w-full lg:w-3/12 px-4 text-center">
<div <div
class="text-gray-900 p-3 w-12 h-12 shadow-lg rounded-full bg-white inline-flex items-center justify-center"> 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> <i class="fas fa-lightbulb text-xl"></i>
</div> </div>
<h5 class="text-xl mt-5 font-semibold text-white">Launch time</h5> <h5 class="text-xl mt-5 font-semibold text-white">Launch time</h5>
@ -382,34 +491,52 @@ templ Content() {
<div class="flex flex-wrap justify-center lg:-mt-64 -mt-48"> <div class="flex flex-wrap justify-center lg:-mt-64 -mt-48">
<div class="w-full lg:w-6/12 px-4"> <div class="w-full lg:w-6/12 px-4">
<div <div
class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-300"> 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"> <div class="flex-auto p-5 lg:p-10">
<h4 class="text-2xl font-semibold">Want to work with us?</h4> <h4 class="text-2xl font-semibold">Want to work with us?</h4>
<p class="leading-relaxed mt-1 mb-4 text-gray-600"> <p class="leading-relaxed mt-1 mb-4 text-gray-600">
Complete this form and we will get back to you in 24 hours. Complete this form and we will get back to you in 24 hours.
</p> </p>
<div class="relative w-full mb-3 mt-8"> <div class="relative w-full mb-3 mt-8">
<label class="block uppercase text-gray-700 text-xs font-bold mb-2" <label
for="full-name">Full Name</label><input type="text" class="block uppercase text-gray-700 text-xs font-bold mb-2"
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" for="full-name"
placeholder="Full Name" style="transition: all 0.15s ease 0s;" /> >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>
<div class="relative w-full mb-3"> <div class="relative w-full mb-3">
<label class="block uppercase text-gray-700 text-xs font-bold mb-2" <label
for="email">Email</label><input type="email" class="block uppercase text-gray-700 text-xs font-bold mb-2"
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" for="email"
placeholder="Email" style="transition: all 0.15s ease 0s;" /> >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>
<div class="relative w-full mb-3"> <div class="relative w-full mb-3">
<label class="block uppercase text-gray-700 text-xs font-bold mb-2" <label
for="message">Message</label><textarea rows="4" cols="80" class="block uppercase text-gray-700 text-xs font-bold mb-2"
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" for="message"
placeholder="Type a message..."></textarea> >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>
<div class="text-center mt-6"> <div class="text-center mt-6">
<button <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" 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;"> type="button"
style="transition: all 0.15s ease 0s;"
>
Send Message Send Message
</button> </button>
</div> </div>

5
ui/templates/home.templ → ui/templates/landing_page.templ
View File

@ -29,13 +29,14 @@ templ Head() {
</head> </head>
} }
templ Hello(name string) { templ LandingPage(auth bool) {
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
@Head() @Head()
<body class="text-gray-800 antialiased"> <body class="text-gray-800 antialiased">
@Nav() @Nav(auth)
@Content() @Content()
</body> </body>
@toggleNavBar()
</html> </html>
} }

127
ui/templates/nav.templ
View File

@ -1,86 +1,73 @@
package templates package templates
templ Nav() { templ navTitle(title string) {
<a
class="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-white"
href="/"
>
{ title }
</a>
<button
class="cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none"
type="button"
onclick="toggleNavbar(&#39;example-collapse-navbar&#39;)"
>
<i class="text-white fas fa-bars"></i>
</button>
}
templ navItem(name string, link string) {
<li class="flex items-center">
<a
class="lg:text-white lg:hover:text-gray-300 text-gray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
href="{ link }"
>
{ name }
</a>
</li>
}
templ navActionItem(auth bool) {
<li class="flex items-center">
if auth {
<a href="/dashboard"></a>
<button
class="bg-white text-gray-800 active:bg-gray-100 text-xs font-bold uppercase px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none lg:mr-1 lg:mb-0 ml-3 mb-3"
type="button"
style="transition: all 0.15s ease 0s;"
>
Dashboard
</button>
} else {
<a href="/login">
<button
class="bg-white text-gray-800 active:bg-gray-100 text-xs font-bold uppercase px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none lg:mr-1 lg:mb-0 ml-3 mb-3"
type="button"
style="transition: all 0.15s ease 0s;"
>
Log in
</button>
</a>
}
</li>
}
templ Nav(auth bool) {
<nav class="top-0 absolute z-50 w-full flex flex-wrap items-center justify-between px-2 py-3 "> <nav class="top-0 absolute z-50 w-full flex flex-wrap items-center justify-between px-2 py-3 ">
<div class="container px-4 mx-auto flex flex-wrap items-center justify-between"> <div class="container px-4 mx-auto flex flex-wrap items-center justify-between">
<div class="w-full relative flex justify-between lg:w-auto lg:static lg:block lg:justify-start"> <div class="w-full relative flex justify-between lg:w-auto lg:static lg:block lg:justify-start">
<a @navTitle("Capstone")
class="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-white"
href="/"
>
Capstone - Pbaxt10
</a>
<button
class="cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none"
type="button"
onclick="toggleNavbar(&#39;example-collapse-navbar&#39;)"
>
<i class="text-white fas fa-bars"></i>
</button>
</div> </div>
<div <div
class="lg:flex flex-grow items-center bg-white lg:bg-transparent lg:shadow-none hidden" class="lg:flex flex-grow items-center bg-white lg:bg-transparent lg:shadow-none hidden"
id="example-collapse-navbar" id="example-collapse-navbar"
> >
<ul class="flex flex-col lg:flex-row list-none mr-auto"> <ul class="flex flex-col lg:flex-row list-none mr-auto">
<li class="flex items-center"> @navItem("About Us", "/about-us")
<a @navItem("Pricing", "/pricing")
class="lg:text-white lg:hover:text-gray-300 text-gray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
href="https://www.creative-tim.com/learning-lab/tailwind-starter-kit#/landing"
>
<i
class="lg:text-gray-300 text-gray-500 far fa-file-alt text-lg leading-lg mr-2"
></i>
Docs
</a>
</li>
</ul> </ul>
<ul class="flex flex-col lg:flex-row list-none lg:ml-auto"> <ul class="flex flex-col lg:flex-row list-none lg:ml-auto">
<li class="flex items-center"> @navActionItem(auth)
<a
class="lg:text-white lg:hover:text-gray-300 text-gray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
href="#pablo"
>
<i
class="lg:text-gray-300 text-gray-500 fab fa-facebook text-lg leading-lg "
></i><span
class="lg:hidden inline-block ml-2"
>Share</span>
</a>
</li>
<li class="flex items-center">
<a
class="lg:text-white lg:hover:text-gray-300 text-gray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
href="#pablo"
>
<i
class="lg:text-gray-300 text-gray-500 fab fa-twitter text-lg leading-lg "
></i><span
class="lg:hidden inline-block ml-2"
>Tweet</span>
</a>
</li>
<li class="flex items-center">
<a
class="lg:text-white lg:hover:text-gray-300 text-gray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
href="#pablo"
>
<i
class="lg:text-gray-300 text-gray-500 fab fa-github text-lg leading-lg "
></i><span
class="lg:hidden inline-block ml-2"
>Star</span>
</a>
</li>
<li class="flex items-center">
<button
class="bg-white text-gray-800 active:bg-gray-100 text-xs font-bold uppercase px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none lg:mr-1 lg:mb-0 ml-3 mb-3"
type="button"
style="transition: all 0.15s ease 0s;"
>
<i class="fas fa-arrow-alt-circle-down"></i> Download
</button>
</li>
</ul> </ul>
</div> </div>
</div> </div>

4
ui/templates/script.templ
View File

@ -1,8 +1,10 @@
package templates package templates
script toggleNavBar() { templ toggleNavBar() {
<script>
function toggleNavbar(collapseID) { function toggleNavbar(collapseID) {
document.getElementById(collapseID).classList.toggle("hidden"); document.getElementById(collapseID).classList.toggle("hidden");
document.getElementById(collapseID).classList.toggle("block"); document.getElementById(collapseID).classList.toggle("block");
} }
</script>
} }