Skip to content

Commit

Permalink
make learn more button clickable
Browse files Browse the repository at this point in the history
  • Loading branch information
@kailashchoudhary11
kailashchoudhary11 committed Jul 7, 2024
1 parent c457a6c commit 685757d
Show file tree
Hide file tree
Showing 2 changed files with 121 additions and 154 deletions.
273 changes: 120 additions & 153 deletions templates/homePage.templ
View file
Original file line number Diff line number Diff line change
@@ -1,168 +1,135 @@
package templates

templ HomePage(authorizationURL string) {
@Layout("Repo Guard") {
<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?
@Layout("Repo Guard") {
<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-[#7BBAC5] text-black font-rubik px-6 py-4 rounded-lg font-bold text-lg group transition-all duration-300 transform hover:scale-105 hover:shadow-lg">
<img src="../static/images/github_icon.svg" alt="GitHub Icon"
class="w-6 h-6 transition-transform duration-300 group-hover:rotate-12" />
<span
class="relative after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-black after:scale-x-0 after:origin-bottom-right after:transition-transform after:duration-300 group-hover:after:scale-x-100 group-hover:after:origin-bottom-left">
Authorize Repo Guard
</span>
</a>
<a href="#learn-more"
class="inline-flex items-center justify-center gap-6 bg-transparent hover:bg-[#49E06C]/10 text-[#49E06C] hover:text-[#3AB057] font-rubik px-6 py-4 rounded-lg font-bold text-lg group transition-all duration-300 transform hover:scale-105 border-2 border-[#49E06C] hover:border-[#3AB057]">
<img src="../static/images/right_arrow.png" alt="Right Arrow"
class="w-6 h-6 transition-transform duration-300 group-hover:translate-x-1" />
<span>Learn More</span>
</a>
</div>
</div>
</div>
<div class="bg-[#1B2033] text-white py-16">
<div class="container mx-auto px-4">
<h2 class="font-maven font-bold text-5xl text-center mb-12">
Features:
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div
class="bg-white/30 rounded-lg p-6 flex flex-col items-center text-center transition-transform duration-300 hover:transform hover:scale-105">
<img src="../static/images/detection.svg" alt="Duplicate Detection"
class="w-16 h-16 mb-4" />
<p class="font-maven text-[#63DC76] font-bold text-2xl mb-2">Duplicate Detection</p>
<p class="font-maven text-lg">
AI-powered algorithm understands context, not just
keywords.
</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.
</div>
<div
class="bg-[#5F6370] rounded-lg p-6 flex flex-col items-center text-center transition-transform duration-300 hover:transform hover:scale-105">
<img src="../static/images/instant_action.svg" alt="Instant Action"
class="w-16 h-16 mb-4" />
<p class="font-maven text-[#90D3DF] font-bold text-2xl mb-2">Instant Action</p>
<p class="font-maven text-lg">
Duplicates are handled in real-time, keeping your workflow
smooth.
</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-[#7BBAC5] text-black font-rubik px-6 py-4 rounded-lg font-bold text-lg group transition-all duration-300 transform hover:scale-105 hover:shadow-lg"
>
<img
src="../static/images/github_icon.svg"
alt="GitHub Icon"
class="w-6 h-6 transition-transform duration-300 group-hover:rotate-12"
/>
<span
class="relative after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-black after:scale-x-0 after:origin-bottom-right after:transition-transform after:duration-300 group-hover:after:scale-x-100 group-hover:after:origin-bottom-left"
>
Authorize Repo Guard
</span>
</a>
<a
href="#learn-more"
class="inline-flex items-center justify-center gap-6 bg-transparent hover:bg-[#49E06C]/10 text-[#49E06C] hover:text-[#3AB057] font-rubik px-6 py-4 rounded-lg font-bold text-lg group transition-all duration-300 transform hover:scale-105 border-2 border-[#49E06C] hover:border-[#3AB057]"
>
<img
src="../static/images/right_arrow.png"
alt="Right Arrow"
class="w-6 h-6 transition-transform duration-300 group-hover:translate-x-1"
/>
<span>Learn More</span>
</a>
</div>
</div>
</div>
<div class="bg-[#1B2033] text-white py-16">
<div class="container mx-auto px-4">
<h2 class="font-maven font-bold text-5xl text-center mb-12">
Features:
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div
class="bg-white/30 rounded-lg p-6 flex flex-col items-center text-center transition-transform duration-300 hover:transform hover:scale-105"
>
<img
src="../static/images/detection.svg"
alt="Duplicate Detection"
class="w-16 h-16 mb-4"
/>
<p class="font-maven text-[#63DC76] font-bold text-2xl mb-2">Duplicate Detection</p>
<p class="font-maven text-lg">
AI-powered algorithm understands context, not just
keywords.
</p>
</div>
<div
class="bg-[#5F6370] rounded-lg p-6 flex flex-col items-center text-center transition-transform duration-300 hover:transform hover:scale-105"
>
<img
src="../static/images/instant_action.svg"
alt="Instant Action"
class="w-16 h-16 mb-4"
/>
<p class="font-maven text-[#90D3DF] font-bold text-2xl mb-2">Instant Action</p>
<p class="font-maven text-lg">
Duplicates are handled in real-time, keeping your workflow
smooth.
</p>
</div>
<div
class="bg-white/30 rounded-lg p-6 flex flex-col items-center text-center transition-transform duration-300 hover:transform hover:scale-105"
>
<img
src="../static/images/github_feature.svg"
alt="GitHub Integration"
class="w-16 h-16 mb-4"
/>
<p class="font-maven text-[#B026FF] font-bold text-2xl mb-2">GitHub Integration</p>
<p class="font-maven text-lg">
Seamlessly integrates with your existing GitHub workflow.
</p>
</div>
</div>
<div
class="bg-white/30 rounded-lg p-6 flex flex-col items-center text-center transition-transform duration-300 hover:transform hover:scale-105">
<img src="../static/images/github_feature.svg" alt="GitHub Integration"
class="w-16 h-16 mb-4" />
<p class="font-maven text-[#B026FF] font-bold text-2xl mb-2">GitHub Integration</p>
<p class="font-maven text-lg">
Seamlessly integrates with your existing GitHub workflow.
</p>
</div>
</div>
<div class="bg-[#0F1322] text-white font-maven py-16">
<div class="container mx-auto px-4">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-10">
How Repo Guard Works:
</h2>
<div class="space-y-8 max-w-2xl mx-auto">
<div
class="flex items-center space-x-4 bg-white/10 rounded-lg p-4 transition-transform duration-300 hover:transform hover:scale-105"
>
<img src="../static/images/one.png" alt="Step 1" class="w-12 h-12"/>
<div class="text-lg">A new issue appears in your repository.</div>
</div>
<div
class="flex items-center space-x-4 bg-white/10 rounded-lg p-4 transition-transform duration-300 hover:transform hover:scale-105"
>
<img src="../static/images/two.png" alt="Step 2" class="w-12 h-12"/>
<div class="text-lg">Repo Guard quickly checks for duplicates.</div>
</div>
<div
class="flex items-center space-x-4 bg-white/10 rounded-lg p-4 transition-transform duration-300 hover:transform hover:scale-105"
>
<img src="../static/images/three.png" alt="Step 3" class="w-12 h-12"/>
<div class="text-lg">
If it's a duplicate, Repo Guard closes it and links to the
original.
</div>
</div>
<div
class="flex items-center space-x-4 bg-white/10 rounded-lg p-4 transition-transform duration-300 hover:transform hover:scale-105"
>
<img src="../static/images/four.png" alt="Step 4" class="w-12 h-12"/>
<div class="text-lg">Your repository stays tidy and contributors stay informed.</div>
</div>
</div>
</div>
<div class="bg-[#0F1322] text-white font-maven py-16">
<div class="container mx-auto px-4">
<h2 id="learn-more" class="text-3xl md:text-4xl font-bold text-center mb-10">
How Repo Guard Works:
</h2>
<div class="space-y-8 max-w-2xl mx-auto">
<div
class="flex items-center space-x-4 bg-white/10 rounded-lg p-4 transition-transform duration-300 hover:transform hover:scale-105">
<img src="../static/images/one.png" alt="Step 1" class="w-12 h-12" />
<div class="text-lg">A new issue appears in your repository.</div>
</div>
<div
class="flex items-center space-x-4 bg-white/10 rounded-lg p-4 transition-transform duration-300 hover:transform hover:scale-105">
<img src="../static/images/two.png" alt="Step 2" class="w-12 h-12" />
<div class="text-lg">Repo Guard quickly checks for duplicates.</div>
</div>
<div
class="flex items-center space-x-4 bg-white/10 rounded-lg p-4 transition-transform duration-300 hover:transform hover:scale-105">
<img src="../static/images/three.png" alt="Step 3" class="w-12 h-12" />
<div class="text-lg">
If it's a duplicate, Repo Guard closes it and links to the
original.
</div>
</div>
<div
class="flex items-center space-x-4 bg-white/10 rounded-lg p-4 transition-transform duration-300 hover:transform hover:scale-105">
<img src="../static/images/four.png" alt="Step 4" class="w-12 h-12" />
<div class="text-lg">Your repository stays tidy and contributors stay informed.</div>
</div>
</div>
<div class="bg-[#27164361] text-white py-24">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row items-center justify-between">
<div class="md:w-1/2 mb-12 md:mb-0">
<h1 class="font-maven font-bold text-5xl md:text-7xl leading-tight">
Make your
<br/>
<span class="text-[#63DC76]">Github</span>
<br/>
Repositories
<br/>
<span class="text-[#B026FF]">Smarter</span> Today!
</h1>
</div>
<div class="md:w-1/2 flex flex-col items-center">
<img
src="../static/images/github_logo.png"
alt="Repo Guard Logo"
class="w-56 h-56 mb-12 filter drop-shadow-xl"
/>
<a
href={ templ.SafeURL(authorizationURL) }
class="inline-flex items-center justify-center gap-3 bg-[#B026FF] hover:bg-[#9020DC]
</div>
</div>
<div class="bg-[#27164361] text-white py-24">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row items-center justify-between">
<div class="md:w-1/2 mb-12 md:mb-0">
<h1 class="font-maven font-bold text-5xl md:text-7xl leading-tight">
Make your
<br />
<span class="text-[#63DC76]">Github</span>
<br />
Repositories
<br />
<span class="text-[#B026FF]">Smarter</span> Today!
</h1>
</div>
<div class="md:w-1/2 flex flex-col items-center">
<img src="../static/images/github_logo.png" alt="Repo Guard Logo"
class="w-56 h-56 mb-12 filter drop-shadow-xl" />
<a href={ templ.SafeURL(authorizationURL) } class="inline-flex items-center justify-center gap-3 bg-[#B026FF] hover:bg-[#9020DC]
text-white font-rubik px-8 py-4 rounded-lg font-bold text-xl group transition-all
duration-300 transform hover:scale-105 hover:shadow-lg"
>
<span>Authorize Repo Guard</span>
</a>
</div>
</div>
duration-300 transform hover:scale-105 hover:shadow-lg">
<span>Authorize Repo Guard</span>
</a>
</div>
</div>
}
</div>
</div>
}
}
Loading

0 comments on commit 685757d

Please sign in to comment.