diff --git a/static/css/styles.css b/static/css/styles.css index 3acddf0..87a2430 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -558,35 +558,126 @@ video { --tw-contain-style: ; } +.container{ + width: 100%; +} + +@media (min-width: 640px){ + .container{ + max-width: 640px; + } +} + +@media (min-width: 768px){ + .container{ + max-width: 768px; + } +} + +@media (min-width: 1024px){ + .container{ + max-width: 1024px; + } +} + +@media (min-width: 1280px){ + .container{ + max-width: 1280px; + } +} + +@media (min-width: 1536px){ + .container{ + max-width: 1536px; + } +} + +.mx-auto{ + margin-left: auto; + margin-right: auto; +} + +.mb-12{ + margin-bottom: 3rem; +} + +.mb-4{ + margin-bottom: 1rem; +} + +.mb-6{ + margin-bottom: 1.5rem; +} + .flex{ display: flex; } -.w-\[50\%\]{ - width: 50%; +.inline-flex{ + display: inline-flex; +} + +.hidden{ + display: none; +} + +.h-6{ + height: 1.5rem; +} + +.w-6{ + width: 1.5rem; +} + +.max-w-3xl{ + max-width: 48rem; } .flex-col{ flex-direction: column; } +.items-center{ + align-items: center; +} + +.justify-center{ + justify-content: center; +} + +.gap-3{ + gap: 0.75rem; +} + +.gap-4{ + gap: 1rem; +} + .rounded-lg{ border-radius: 0.5rem; } +.border-2{ + border-width: 2px; +} + +.border-\[\#49E06C\]{ + --tw-border-opacity: 1; + border-color: rgb(73 224 108 / var(--tw-border-opacity)); +} + .bg-\[\#0F1322\]{ --tw-bg-opacity: 1; background-color: rgb(15 19 34 / var(--tw-bg-opacity)); } -.bg-\[\#49E06C\]{ +.bg-\[\#90D3DF\]{ --tw-bg-opacity: 1; - background-color: rgb(73 224 108 / var(--tw-bg-opacity)); + background-color: rgb(144 211 223 / var(--tw-bg-opacity)); } -.px-12{ - padding-left: 3rem; - padding-right: 3rem; +.bg-transparent{ + background-color: transparent; } .px-32{ @@ -594,6 +685,21 @@ video { padding-right: 8rem; } +.px-4{ + padding-left: 1rem; + padding-right: 1rem; +} + +.px-6{ + padding-left: 1.5rem; + padding-right: 1.5rem; +} + +.px-8{ + padding-left: 2rem; + padding-right: 2rem; +} + .py-24{ padding-top: 6rem; padding-bottom: 6rem; @@ -609,11 +715,20 @@ video { padding-bottom: 0.875rem; } +.py-4{ + padding-top: 1rem; + padding-bottom: 1rem; +} + .py-8{ padding-top: 2rem; padding-bottom: 2rem; } +.text-center{ + text-align: center; +} + .font-maven{ font-family: "Maven Pro", sans-serif; } @@ -622,13 +737,13 @@ video { font-family: "Rubik, sans-serif; } -.text-2xl{ - font-size: 1.5rem; - line-height: 2rem; +.text-3xl{ + font-size: 1.875rem; + line-height: 2.25rem; } -.text-7xl{ - font-size: 4.5rem; +.text-5xl{ + font-size: 3rem; line-height: 1; } @@ -637,6 +752,15 @@ video { line-height: 1.75rem; } +.text-xl{ + font-size: 1.25rem; + line-height: 1.75rem; +} + +.font-black{ + font-weight: 900; +} + .font-bold{ font-weight: 700; } @@ -645,12 +769,80 @@ video { font-weight: 600; } +.text-\[\#49E06C\]{ + --tw-text-opacity: 1; + color: rgb(73 224 108 / var(--tw-text-opacity)); +} + +.text-\[\#63DC76\]{ + --tw-text-opacity: 1; + color: rgb(99 220 118 / var(--tw-text-opacity)); +} + .text-\[\#B026FF\]{ --tw-text-opacity: 1; color: rgb(176 38 255 / var(--tw-text-opacity)); } +.text-black{ + --tw-text-opacity: 1; + color: rgb(0 0 0 / var(--tw-text-opacity)); +} + .text-white{ --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } + +.transition-colors{ + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.transition-transform{ + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.duration-300{ + transition-duration: 300ms; +} + +.hover\:bg-\[\#90D3DF\]:hover{ + --tw-bg-opacity: 1; + background-color: rgb(144 211 223 / var(--tw-bg-opacity)); +} + +.hover\:bg-white\/10:hover{ + background-color: rgb(255 255 255 / 0.1); +} + +.group:hover .group-hover\:scale-110{ + --tw-scale-x: 1.1; + --tw-scale-y: 1.1; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +@media (min-width: 640px){ + .sm\:flex-row{ + flex-direction: row; + } +} + +@media (min-width: 768px){ + .md\:inline{ + display: inline; + } + + .md\:text-2xl{ + font-size: 1.5rem; + line-height: 2rem; + } + + .md\:text-7xl{ + font-size: 4.5rem; + line-height: 1; + } +} diff --git a/static/images/github_icon.svg b/static/images/github_icon.svg new file mode 100644 index 0000000..c0ad268 --- /dev/null +++ b/static/images/github_icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/templates/homePage.templ b/templates/homePage.templ index b1f8e9a..1364a09 100644 --- a/templates/homePage.templ +++ b/templates/homePage.templ @@ -2,21 +2,40 @@ package templates templ HomePage(authorizationURL string) { @Layout("Repo Guard") { -
-
-
GitHub Repository's Intelligent Gatekeeper
-
+
+
+

+ GitHub Repository's + + Intelligent Gatekeeper +

+

Tired of sorting through duplicate issues? +

+

+ Meet Repo Guard, the smart solution that keeps your GitHub repositories clean, organized, and + efficient. +

+
+ + GitHub Icon + Install GitHub App + + + Learn More +
-
Keep your repository clutter-free around the clock.
-
-
- - Authorize Repo Guard -
} diff --git a/templates/homePage_templ.go b/templates/homePage_templ.go index 1a3c25a..3e57a0b 100644 --- a/templates/homePage_templ.go +++ b/templates/homePage_templ.go @@ -38,7 +38,7 @@ func HomePage(authorizationURL string) templ.Component { }() } ctx = templ.InitializeContext(ctx) - _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("
GitHub Repository's Intelligent Gatekeeper
Tired of sorting through duplicate issues?
Keep your repository clutter-free around the clock.

GitHub Repository's
Intelligent Gatekeeper

Tired of sorting through duplicate issues?

Meet Repo Guard, the smart solution that keeps your GitHub repositories clean, organized, and efficient.

Authorize Repo Guard
") + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"inline-flex items-center justify-center gap-3 bg-[#90D3DF] hover:bg-[#90D3DF] transition-colors duration-300 text-black font-rubik px-6 py-4 rounded-lg font-bold text-lg group\">\"GitHub Install GitHub App Learn More
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } diff --git a/templates/layout.templ b/templates/layout.templ index 734a37b..19c4724 100644 --- a/templates/layout.templ +++ b/templates/layout.templ @@ -9,7 +9,7 @@ templ Layout(title string) { { title } - + @Navbar() { children... } diff --git a/templates/layout_templ.go b/templates/layout_templ.go index dfe8de1..1997375 100644 --- a/templates/layout_templ.go +++ b/templates/layout_templ.go @@ -39,7 +39,7 @@ func Layout(title string) templ.Component { if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("") + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } diff --git a/templates/navbar.templ b/templates/navbar.templ index d31ebb7..daa7619 100644 --- a/templates/navbar.templ +++ b/templates/navbar.templ @@ -1,7 +1,7 @@ package templates templ Navbar() { -