Skip to content

Commit

Permalink
add the upper description
Browse files Browse the repository at this point in the history
  • Loading branch information
@kailashchoudhary11
kailashchoudhary11 committed Jul 5, 2024
1 parent 9039138 commit 829e4d3
Show file tree
Hide file tree
Showing 8 changed files with 246 additions and 31 deletions.
216 changes: 204 additions & 12 deletions static/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -558,42 +558,148 @@ 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{
padding-left: 8rem;
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;
Expand All @@ -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;
}
Expand All @@ -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;
}

Expand All @@ -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;
}
Expand All @@ -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;
}
}
4 changes: 4 additions & 0 deletions static/images/github_icon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
45 changes: 32 additions & 13 deletions templates/homePage.templ
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,40 @@ package templates

templ HomePage(authorizationURL string) {
@Layout("Repo Guard") {
<div class="flex bg-[#0F1322]">
<div class="w-[50%] px-32 py-24 flex flex-col text-white">
<div class="font-maven font-semibold text-7xl">GitHub Repository's Intelligent Gatekeeper</div>
<div class="text-[#B026FF] font-maven text-2xl font-bold">
<div class="bg-[#0F1322] text-white py-24">
<div class="container mx-auto px-4 text-center">
<h1 class="font-maven font-bold text-5xl md:text-7xl mb-6">
<span class="text-[#63DC76]">GitHub</span> Repository's
<br class="hidden md:inline"/>
Intelligent Gatekeeper
</h1>
<p class="text-[#B026FF] font-maven text-xl md:text-2xl font-semibold mb-4">
Tired of sorting through duplicate issues?
</p>
<p class="font-maven text-xl md:text-2xl font-semibold mb-12 max-w-3xl mx-auto">
Meet Repo Guard, the smart solution that keeps your GitHub repositories clean, organized, and
efficient.
</p>
<div class="flex flex-col sm:flex-row justify-center items-center gap-4">
<a
href={ templ.SafeURL(authorizationURL) }
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"
>
<img
src="../static/images/github_icon.svg"
alt="GitHub Icon"
class="w-6 h-6 group-hover:scale-110 transition-transform duration-300"
/>
<span>Install GitHub App</span>
</a>
<a
class="bg-transparent hover:bg-white/10 transition-colors duration-300 border-2 border-[#49E06C]
text-[#49E06C] font-rubik px-8 py-3.5 rounded-lg font-bold text-lg"
href="#learn-more"
>
Learn More
</a>
</div>
<div class="font-maven text-2xl font-bold">Keep your repository clutter-free around the clock.</div>
</div>
<div>
<a
class="bg-[#49E06C] font-rubik px-12 py-3.5 rounded-lg font-bold"
href={ templ.SafeURL(authorizationURL) }
>
Authorize Repo Guard
</a>
</div>
</div>
}
Expand Down
4 changes: 2 additions & 2 deletions templates/homePage_templ.go
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion templates/layout.templ
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ templ Layout(title string) {
<title>{ title }</title>
<link href="/static/css/styles.css" rel="stylesheet"/>
</head>
<body>
<body class="bg-[#0F1322]">
@Navbar()
{ children... }
</body>
Expand Down
2 changes: 1 addition & 1 deletion templates/layout_templ.go
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion templates/navbar.templ
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
package templates

templ Navbar() {
<nav class="bg-[#0F1322] text-lg text-white py-8 px-32 font-maven font-bold">
<nav class="bg-[#0F1322] text-3xl font-black text-white py-8 px-32 font-maven">
Repo Guard
</nav>
}
Loading

0 comments on commit 829e4d3

Please sign in to comment.