Skip to content

Commit a935ffa

Browse files
RijulTPRijulTP
committed
Merge branch 'main' of github.com:HexmosTech/FreeDevTools
2 parents 429b27f + aa04cbd commit a935ffa

1 file changed

Lines changed: 38 additions & 29 deletions

File tree

‎frontend/components/common/banner/ad_banner.templ‎

Lines changed: 38 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -3,58 +3,67 @@ package banner
33

44
templ AdBanner() {
55
<style type="text/css">
6-
/* Main text entrance - commented out
7-
@keyframes ad-banner-text-in {
8-
from { opacity: 0; transform: translateY(6px); }
9-
to { opacity: 1; transform: translateY(0); }
10-
}
11-
.ad-banner-text { animation: ad-banner-text-in 0.4s ease-out 0.1s forwards; opacity: 0; }
12-
*/
13-
/* One-time CTA attention on scroll - commented out
6+
/* All animations run only on card hover */
7+
/* CTA: attention pulse when hovering the banner (not the button) */
148
@keyframes ad-banner-cta-attention {
159
0% { transform: scale(1); box-shadow: 1px 2px 0 #836b0b; }
1610
45% { transform: scale(1.08); box-shadow: 0 0 0 4px rgba(250,204,21,0.4), 2px 4px 0 #836b0b; }
1711
100% { transform: scale(1.02); box-shadow: 0 0 0 2px rgba(250,204,21,0.25), 1px 3px 0 #836b0b; }
1812
}
19-
.dark .ad-banner .ad-banner-btn { box-shadow: 1px 2px 0 #6b5a00; }
2013
@keyframes ad-banner-cta-attention-dark {
2114
0% { transform: scale(1); box-shadow: 1px 2px 0 #6b5a00; }
2215
45% { transform: scale(1.08); box-shadow: 0 0 0 4px rgba(179,143,0,0.35), 2px 4px 0 #6b5a00; }
2316
100% { transform: scale(1.02); box-shadow: 0 0 0 2px rgba(179,143,0,0.2), 1px 3px 0 #6b5a00; }
2417
}
25-
.ad-banner-visible .ad-banner-btn { animation: ad-banner-cta-attention 0.55s ease-out forwards; }
26-
.dark .ad-banner-visible .ad-banner-btn { animation: ad-banner-cta-attention-dark 0.55s ease-out forwards; }
27-
*/
18+
.ad-banner:hover .ad-banner-btn { animation: ad-banner-cta-attention 0.55s ease-out forwards; }
19+
.dark .ad-banner:hover .ad-banner-btn { animation: ad-banner-cta-attention-dark 0.55s ease-out forwards; }
2820
.dark .ad-banner .ad-banner-btn { box-shadow: 1px 2px 0 #6b5a00; }
29-
/* Install Now button: hover only (kept) */
21+
/* Install Now: stronger hover when hovering the button itself */
3022
.ad-banner-btn { transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; }
3123
.ad-banner-btn:hover { transform: scale(1.05); box-shadow: 0 0 0 3px rgba(250,204,21,0.35), 2px 4px 0 #836b0b; filter: brightness(1.05); }
32-
/* .ad-banner-btn:active { transform: scale(0.98); box-shadow: 1px 1px 0 #836b0b; } */
3324
.ad-banner-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px #0ea5e9, 1px 2px 0 #836b0b; }
3425
.dark .ad-banner .ad-banner-btn:hover { box-shadow: 0 0 0 3px rgba(179,143,0,0.4), 2px 4px 0 #6b5a00; }
3526
.dark .ad-banner .ad-banner-btn:focus-visible { box-shadow: 0 0 0 3px #0ea5e9, 1px 2px 0 #6b5a00; }
36-
/* Banner hover - commented out
37-
.ad-banner { transition: border-color 0.25s ease, box-shadow 0.25s ease; }
38-
.ad-banner:hover { box-shadow: 0 0 0 1px rgba(250,204,21,0.5); }
39-
.dark .ad-banner:hover { box-shadow: 0 0 0 1px rgba(179,143,0,0.5); }
40-
*/
27+
.ad-banner { transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
28+
.ad-banner:hover { background: #000124 !important; transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.2); }
29+
.dark .ad-banner { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
30+
.dark .ad-banner:hover { box-shadow: 0 12px 28px rgba(255, 255, 255, 0.2), 0 4px 12px rgba(255, 255, 255, 0.1); }
4131
/* Dark mode colors */
42-
.dark .ad-banner { background: #ebebeb !important; border-color: #b38f00 !important; }
43-
.dark .ad-banner .ad-banner-accent { background: #b38f00 !important; }
32+
.dark .ad-banner { background: #ebebeb !important; border-color: #d7ad04 !important; }
33+
.dark .ad-banner:hover { background: #fff !important; }
34+
.dark .ad-banner .ad-banner-accent { background: #d7ad04 !important; }
4435
.dark .ad-banner .ad-banner-text { color: #121212 !important; }
45-
.dark .ad-banner .ad-banner-highlight { color: #b38f00 !important; }
46-
.dark .ad-banner .ad-banner-btn { background: #b38f00 !important; border-color: #6b5a00 !important; }
36+
.dark .ad-banner .ad-banner-highlight { color: #d7ad04 !important; }
37+
.dark .ad-banner .ad-banner-btn { background: #d7ad04 !important; border-color: #6b5a00 !important; }
4738
.ad-banner .git-lrc-dark-img { display: none; }
4839
.dark .ad-banner .git-lrc-img { display: none; }
4940
.dark .ad-banner .git-lrc-dark-img { display: block; }
5041
.ad-banner-close:hover { color: #e2e8f0 !important; background: rgba(255,255,255,0.1) !important; }
5142
.dark .ad-banner .ad-banner-close { color: #475569 !important; }
5243
.dark .ad-banner .ad-banner-close:hover { color: #0f172a !important; background: rgba(0,0,0,0.08) !important; }
44+
/* Silver shine on headline in dark mode (bg #ebebeb, text #121212) - hover only */
45+
.dark .ad-banner:hover .ad-banner-shine-text {
46+
background: linear-gradient(to right, #121212 0%, #121212 47%, #a8a8a8 49%, #e8e8e8 50%, #a8a8a8 51%, #121212 53%, #121212 100%);
47+
background-size: 200% 100%;
48+
-webkit-background-clip: text;
49+
background-clip: text;
50+
-webkit-text-fill-color: transparent;
51+
color: transparent;
52+
animation: ad-banner-shine 3s linear infinite;
53+
}
54+
@keyframes ad-banner-shine {
55+
0% { background-position: 200% center; }
56+
100% { background-position: 0% center; }
57+
}
58+
@keyframes ad-banner-shine {
59+
0% { background-position: 200% center; }
60+
100% { background-position: 0% center; }
61+
}
5362
</style>
5463
<div class="px-2 max-w-6xl mx-auto mb-2 mt-2 md:mb-8 md:mt-6 xl:mb-8 xl:mt-2" style="max-width: 70rem; width: 100%;">
5564

56-
<div id="ad-banner" class="ad-banner"
57-
style="position:relative;width:100%;max-width:1102px;min-height:140px;height:auto;background:#030712;border:0.5px solid #FACC15;border-radius:14px;padding:clamp(16px, 3vw, 24px) clamp(20px, 4vw, 40px);display:flex;align-items:center;overflow:hidden;font-family:Inter,Arial,sans-serif;box-sizing:border-box;">
65+
<a id="ad-banner" class="ad-banner" href="https://hexmos.com/livereview/git-lrc/?from=freedevtools" target="_blank" rel="noopener noreferrer"
66+
style="position:relative;width:100%;max-width:1102px;min-height:140px;height:auto;background:#030712;border:0.5px solid #FACC15;border-radius:14px;padding:clamp(16px, 3vw, 24px) clamp(20px, 4vw, 40px);display:flex;align-items:center;overflow:hidden;font-family:Inter,Arial,sans-serif;box-sizing:border-box;text-decoration:none;color:inherit;cursor:pointer;">
5867
<!-- Close Button -->
5968
<button
6069
id="close-banner"
@@ -80,7 +89,7 @@ templ AdBanner() {
8089
<div
8190
style="flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:clamp(8px, 1.5vw, 12px);">
8291
<div class="ad-banner-text" style="font-size:clamp(1.125rem, 2.5vw + 1rem, 2.25rem);font-weight:600;color:#eff3f8;line-height:1.2;">
83-
Free, unlimited AI code reviews that
92+
<span class="ad-banner-shine-text">Free, unlimited AI code reviews that</span>
8493
<span class="ad-banner-highlight" style="color:#FACC15;font-weight:600;"> run on commit</span>
8594
</div>
8695
<div style="display:flex;align-items:center;gap:clamp(8px, 1.5vw, 12px);flex-wrap:wrap;">
@@ -89,7 +98,7 @@ templ AdBanner() {
8998
<img class="git-lrc-dark-img" src="/freedevtools/public/git-lrc-dark.svg" alt="git-lrc" style="position:absolute;inset:0;width:100%;height:100%;object-fit:contain;">
9099
</span>
91100

92-
<a href="https://hexmos.com/livereview/git-lrc/?from=freedevtools" target="_blank" rel="noopener noreferrer" id="cta-btn" class="ad-banner-btn"
101+
<span id="cta-btn" class="ad-banner-btn"
93102
style="display:flex;align-items:center;justify-content:space-between;cursor:pointer;background:#FACC15;box-shadow:1px 2px 0 #836b0b;border:1px solid black;border-radius:6px;overflow:hidden;transition:all 0.25s;color:#020617;text-decoration:none;padding:clamp(6px, 1vw, 8px) clamp(8px, 1.2vw, 12px);font-weight:600;font-size:clamp(0.6875rem, 1.2vw + 0.5rem, 0.75rem);">
94103
<span style="display:flex;align-items:center;color:black;">Install <span style="margin-right:4px;color:black;"> </span>Now</span>
95104
<span id="cta-icon"
@@ -100,11 +109,11 @@ templ AdBanner() {
100109
fill="black"></path>
101110
</svg>
102111
</span>
103-
</a>
112+
</span>
104113
</div>
105114
</div>
106115

107-
</div>
116+
</a>
108117
</div>
109118
<!-- Scroll-into-view CTA attention script - commented out
110119
<script>

0 commit comments

Comments
 (0)