Skip to content

Commit 547a7d3

Browse files
PrashantUnityPrashantUnity
committed
Hero
1 parent e5e6bd4 commit 547a7d3

6 files changed

Lines changed: 278 additions & 58 deletions

File tree

‎assets/css/modern-dark-theme.css‎

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -271,18 +271,32 @@
271271
background-color: rgb(15 23 42) !important;
272272
}
273273

274-
[data-theme="dark"] body.home-page .home-hero > .bg-gradient-to-b {
275-
background-image: linear-gradient(
274+
[data-theme="dark"] body.home-page .home-hero__overlay {
275+
background: linear-gradient(
276276
to bottom,
277-
rgb(15 23 42 / 0.97),
278-
rgb(15 23 42 / 0.92),
279-
rgb(15 23 42 / 0.98)
277+
rgb(15 23 42 / 0.55),
278+
rgb(15 23 42 / 0.68),
279+
rgb(15 23 42 / 0.82)
280280
) !important;
281281
}
282282

283-
[data-theme="dark"] body.home-page .home-hero .mix-blend-multiply {
284-
mix-blend-mode: soft-light;
285-
opacity: 0.35;
283+
[data-theme="dark"] body.home-page .home-hero__nav-btn {
284+
background-color: rgb(30 41 59 / 0.9) !important;
285+
border-color: rgb(51 65 85 / 0.9) !important;
286+
color: rgb(226 232 240) !important;
287+
}
288+
289+
[data-theme="dark"] body.home-page .home-hero__nav-btn:hover {
290+
background-color: rgb(51 65 85) !important;
291+
color: rgb(248 250 252) !important;
292+
}
293+
294+
[data-theme="dark"] body.home-page .home-hero__dot {
295+
background-color: rgb(100 116 139) !important;
296+
}
297+
298+
[data-theme="dark"] body.home-page .home-hero__dot--active {
299+
background-color: rgb(226 232 240) !important;
286300
}
287301

288302
/* —— Marquee fades —— */

‎assets/css/tailwind-input.css‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,59 @@
6969
}
7070
}
7171

72+
@layer components {
73+
.home-hero__bg {
74+
@apply absolute inset-0 z-0 pointer-events-none;
75+
}
76+
77+
.home-hero__bg-layer {
78+
@apply absolute inset-0 bg-cover bg-center bg-no-repeat transition-opacity duration-1000 ease-in-out;
79+
}
80+
81+
.home-hero__overlay {
82+
@apply absolute inset-0 z-[1] pointer-events-none;
83+
background: linear-gradient(
84+
to bottom,
85+
rgba(224, 235, 245, 0.45),
86+
rgba(237, 242, 248, 0.62),
87+
rgba(255, 255, 255, 0.78)
88+
);
89+
}
90+
91+
.home-hero__indicators {
92+
@apply absolute bottom-8 left-1/2 z-10 flex -translate-x-1/2 items-center gap-2;
93+
}
94+
95+
.home-hero__nav-btn--side {
96+
@apply absolute top-1/2 z-10 -translate-y-1/2;
97+
}
98+
99+
.home-hero__nav-btn--prev {
100+
@apply left-3 sm:left-5 md:left-8;
101+
}
102+
103+
.home-hero__nav-btn--next {
104+
@apply right-3 sm:right-5 md:right-8;
105+
}
106+
107+
.home-hero__dot {
108+
@apply h-2 w-2 rounded-full bg-slate-300 transition-all duration-300 hover:bg-slate-400;
109+
}
110+
111+
.home-hero__dot--active {
112+
@apply w-6 bg-slate-800 hover:bg-slate-800;
113+
}
114+
115+
.home-hero__nav-btn {
116+
@apply flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-slate-200/90 bg-white/90 text-slate-600 shadow-sm transition-colors;
117+
@apply hover:border-slate-300 hover:bg-white hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-brand/20;
118+
}
119+
120+
.home-hero__nav-btn i {
121+
@apply text-base leading-none;
122+
}
123+
}
124+
72125
@layer components {
73126
/* Theme toggle (modern nav) */
74127
.theme-toggle-nav__icon {

‎layouts/partials/home/hero.html‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,17 @@
77
{{- $firstSlide := index $slides 0 -}}
88

99
<section id="hero" data-section-label="Home" class="home-hero snap-start relative text-center flex flex-col items-center justify-center px-4 py-8 overflow-hidden bg-[#edf2f8]">
10-
<div class="absolute inset-0 z-0 opacity-[0.22] mix-blend-multiply pointer-events-none" aria-hidden="true">
11-
<div id="bg-layer-1" class="absolute inset-0 bg-cover bg-center transition-opacity duration-1000 ease-in-out opacity-100" style="background-image: url('{{ $firstSlide.image }}');"></div>
12-
<div id="bg-layer-2" class="absolute inset-0 bg-cover bg-center transition-opacity duration-1000 ease-in-out opacity-0"></div>
10+
<div class="home-hero__bg" aria-hidden="true">
11+
<div id="bg-layer-1" class="home-hero__bg-layer opacity-100" style="background-image: url('{{ $firstSlide.image }}');"></div>
12+
<div id="bg-layer-2" class="home-hero__bg-layer opacity-0"></div>
1313
</div>
14-
<div class="absolute inset-0 z-[1] bg-gradient-to-b from-[#e0ebf5]/95 via-[#edf2f8]/90 to-white/95 pointer-events-none" aria-hidden="true"></div>
14+
<div class="home-hero__overlay" aria-hidden="true"></div>
1515

1616
<div class="relative z-10 inline-flex items-center gap-2 px-3 py-1 mb-6 text-xs font-semibold tracking-wide text-slate-600 uppercase bg-white border border-gray-200 rounded-full shadow-sm">
1717
{{ $badge }}
1818
</div>
1919

20-
<div id="hero-content" class="relative z-10 transition-opacity duration-500 ease-in-out opacity-100">
20+
<div id="hero-content" class="relative z-10 transition-opacity duration-500 ease-in-out opacity-100" aria-live="polite">
2121
<h1 id="ladybug-h1-bite-target" class="max-w-4xl mx-auto text-5xl md:text-6xl font-bold tracking-tight text-[#0B162C] mb-6 m-0">
2222
<span id="hero-title" class="hero-slide-title block">{{ $firstSlide.title }}</span>
2323
</h1>
@@ -28,7 +28,17 @@ <h1 id="ladybug-h1-bite-target" class="max-w-4xl mx-auto text-5xl md:text-6xl fo
2828

2929
{{ partial "home/search-trigger.html" (dict "placeholder" $placeholder "size" "lg") }}
3030

31-
<div class="absolute bottom-8 flex gap-2 z-10" id="carousel-indicators" role="tablist" aria-label="Hero slides"></div>
31+
{{- if gt (len $slides) 1 -}}
32+
<button type="button" id="hero-carousel-prev" class="home-hero__nav-btn home-hero__nav-btn--side home-hero__nav-btn--prev" aria-label="Previous slide">
33+
<i class="ph-bold ph-caret-left" aria-hidden="true"></i>
34+
</button>
35+
<button type="button" id="hero-carousel-next" class="home-hero__nav-btn home-hero__nav-btn--side home-hero__nav-btn--next" aria-label="Next slide">
36+
<i class="ph-bold ph-caret-right" aria-hidden="true"></i>
37+
</button>
38+
<div id="carousel-indicators" class="home-hero__indicators" role="tablist" aria-label="Hero slides"></div>
39+
{{- else -}}
40+
<div id="carousel-indicators" class="hidden" aria-hidden="true"></div>
41+
{{- end -}}
3242

3343
<p class="absolute bottom-24 left-1/2 -translate-x-1/2 flex flex-col items-center gap-1 text-slate-400 text-xs font-medium pointer-events-none m-0 home-scroll-hint" aria-hidden="true">
3444
<span>Scroll to explore</span>

‎static/css/home-tailwind.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎static/css/modern-dark-theme.css‎

Lines changed: 66 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -271,18 +271,72 @@
271271
background-color: rgb(15 23 42) !important;
272272
}
273273

274-
[data-theme="dark"] body.home-page .home-hero > .bg-gradient-to-b {
275-
background-image: linear-gradient(
276-
to bottom,
277-
rgb(15 23 42 / 0.97),
278-
rgb(15 23 42 / 0.92),
279-
rgb(15 23 42 / 0.98)
280-
) !important;
281-
}
282-
283-
[data-theme="dark"] body.home-page .home-hero .mix-blend-multiply {
284-
mix-blend-mode: soft-light;
285-
opacity: 0.35;
274+
[data-theme="dark"] body.home-page .home-hero__bg-layer {
275+
filter: saturate(1.05) contrast(1.05) brightness(0.85) !important;
276+
}
277+
278+
[data-theme="dark"] body.home-page .home-hero__overlay {
279+
background:
280+
linear-gradient(
281+
180deg,
282+
rgb(15 23 42 / 0.45) 0%,
283+
rgb(15 23 42 / 0.72) 40%,
284+
rgb(15 23 42 / 0.85) 65%,
285+
rgb(15 23 42 / 0.55) 100%
286+
),
287+
radial-gradient(ellipse 90% 70% at 50% 42%, rgb(15 23 42 / 0.5) 0%, transparent 70%) !important;
288+
}
289+
290+
[data-theme="dark"] body.home-page .home-hero__badge {
291+
background: rgb(30 41 59) !important;
292+
border-color: rgb(51 65 85) !important;
293+
color: rgb(226 232 240) !important;
294+
}
295+
296+
[data-theme="dark"] body.home-page .home-hero__title {
297+
color: rgb(248 250 252) !important;
298+
}
299+
300+
[data-theme="dark"] body.home-page .home-hero__desc {
301+
color: rgb(203 213 225) !important;
302+
}
303+
304+
[data-theme="dark"] body.home-page .home-hero__search.search-trigger {
305+
background: rgb(30 41 59) !important;
306+
border-color: rgb(51 65 85) !important;
307+
box-shadow: 0 4px 20px rgb(0 0 0 / 0.25) !important;
308+
}
309+
310+
[data-theme="dark"] body.home-page .home-hero__search .search-trigger__label {
311+
color: rgb(203 213 225) !important;
312+
}
313+
314+
[data-theme="dark"] body.home-page .home-hero__search .search-trigger__icon {
315+
color: rgb(148 163 184) !important;
316+
}
317+
318+
[data-theme="dark"] body.home-page .home-hero__scroll-hint {
319+
color: rgb(148 163 184) !important;
320+
}
321+
322+
[data-theme="dark"] body.home-page .home-hero__nav-btn {
323+
background-color: rgb(30 41 59 / 0.95) !important;
324+
border-color: rgb(71 85 105 / 0.9) !important;
325+
color: rgb(226 232 240) !important;
326+
box-shadow: 0 4px 16px rgb(0 0 0 / 0.35) !important;
327+
}
328+
329+
[data-theme="dark"] body.home-page .home-hero__nav-btn:hover {
330+
background-color: rgb(51 65 85) !important;
331+
color: rgb(248 250 252) !important;
332+
}
333+
334+
[data-theme="dark"] body.home-page .home-hero__dot {
335+
background-color: rgb(100 116 139) !important;
336+
}
337+
338+
[data-theme="dark"] body.home-page .home-hero__dot--active {
339+
background-color: rgb(226 232 240) !important;
286340
}
287341

288342
/* —— Marquee fades —— */

0 commit comments

Comments
 (0)