Skip to content

Commit 5043c85

Browse files
BhumikagargggBhumikagarggg
committed
fix/header
Signed-off-by: Bhumika Garg <bhumikatech2024@gmail.com>
1 parent 450c87f commit 5043c85

5 files changed

Lines changed: 74 additions & 122 deletions

File tree

‎assets/scss/_header.scss‎

Lines changed: 63 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
left: 0;
55
width: 100%;
66
z-index: 1000;
7-
padding: 0.75rem 2rem 0;
7+
padding: 0.75rem 0 0;
88
backdrop-filter: none;
99
-webkit-backdrop-filter: none;
1010
transition: background 0.3s ease, backdrop-filter 0.3s ease;
@@ -14,88 +14,36 @@
1414
-webkit-backdrop-filter: blur(12px) saturate(180%);
1515
}
1616
.container {
17-
display: flex;
18-
justify-content: space-between;
17+
display: grid;
18+
grid-template-columns: 1fr auto 1fr;
1919
align-items: center;
20-
max-width: 1200px;
21-
margin: 0 auto;
20+
width: 100%;
21+
max-width: none;
22+
padding: 0 40px;
23+
box-sizing: border-box;
24+
}
25+
.action-button {
26+
display: flex;
27+
gap: 20px;
28+
justify-content: flex-start; // Keeps these on the far left
2229
}
2330

2431
.logo {
2532
display: flex;
26-
align-items: center;
33+
justify-content: center; // Forces logo to the exact center of its column
34+
grid-column: 2;
2735

2836
.logo-img {
2937
height: 40px;
3038
width: auto;
3139
}
3240
}
33-
34-
.main-nav ul {
35-
display: flex;
36-
list-style: none;
37-
gap: 2rem;
38-
margin: 0;
39-
padding: .875rem 1.5rem;
40-
border-radius: .75rem;
41-
height: 20px;
42-
align-items: center; // Ensures text is centered vertically
43-
box-shadow: inset 0 1px 1px #00b399, inset 0 -1px 1px #00b39f;
44-
background-color: #050505; // Dark background to make Keppel pop
45-
position: relative;
46-
overflow: hidden;
47-
48-
.nav-link {
49-
position: relative;
50-
display: flex;
51-
align-items: center;
52-
justify-content: center;
53-
height: 100%;
54-
55-
a {
56-
color: #ffffff;
57-
text-decoration: none;
58-
font-size: 0.95rem;
59-
transition: color 0.3s ease;
60-
position: relative;
61-
overflow: hidden;
62-
}
63-
64-
// The Keppel Bloom Effect
65-
&::after {
66-
content: "";
67-
position: absolute;
68-
bottom: -40px; // Start below the link
69-
left: 50%;
70-
transform: translateX(-50%);
71-
width: 110px; // Slightly wider than the text
72-
height: 40px;
73-
background: radial-gradient(
74-
ellipse at center,
75-
rgba(255, 255, 255, 0.8) 0%,
76-
rgba(58, 176, 158, 0.6) 40%,
77-
transparent 75%
78-
);
79-
filter: blur(6px);
80-
opacity: 0;
81-
transition: opacity 0.3s ease, bottom 0.3s ease;
82-
pointer-events: none;
83-
}
84-
85-
// Trigger effect on hover
86-
&:hover {
87-
a {
88-
color: #5CE6D1; // Brighter Keppel for the text
89-
}
90-
&::after {
91-
opacity: 1;
92-
bottom: -38px; // Move up into the frame
93-
}
94-
}
95-
}
9641
}
9742

98-
43+
.nav-button-wrapper {
44+
display: flex;
45+
justify-content: flex-end; // Keeps this on the far right
46+
grid-column: 3;
9947
}
10048

10149
.button {
@@ -146,3 +94,48 @@
14694
bottom: -28px; /* Moves the light up into view */
14795
}
14896

97+
.secondary-button {
98+
color: white;
99+
text-transform: capitalize;
100+
font-size: 0.8rem;
101+
border-radius: .75rem;
102+
flex-flow: row;
103+
flex: none;
104+
justify-content: center;
105+
align-items: center;
106+
height: 10px;
107+
margin-bottom: 0;
108+
padding: .75rem 0.75rem;
109+
text-decoration: none;
110+
display: flex;
111+
position: relative;
112+
overflow: hidden;
113+
box-shadow: inset 0 1px 1px #00b399, inset 0 -1px 1px #ffffff;
114+
transition: box-shadow 0.3s ease;
115+
}
116+
.secondary-button::after {
117+
content: "";
118+
position: absolute;
119+
bottom: -25px; /* Start below the secondary-button */
120+
left: 50%;
121+
transform: translateX(-50%);
122+
width: 120%; /* Wide flare */
123+
height: 40px;
124+
/* Keppel Gradient: White core to Keppel outer */
125+
background: radial-gradient(
126+
ellipse at center,
127+
#ffffff 0%,
128+
#3AB09E 35%,
129+
rgba(58, 176, 158, 0) 70%
130+
);
131+
filter: blur(8px);
132+
opacity: 0;
133+
transition: opacity 0.4s ease, bottom 0.4s ease;
134+
pointer-events: none;
135+
}
136+
137+
/* Trigger on Hover */
138+
.secondary-button:hover::after {
139+
opacity: 1;
140+
bottom: -28px; /* Moves the light up into view */
141+
}

‎assets/scss/_hero-glass.scss‎

Lines changed: 0 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -183,51 +183,3 @@
183183
display:flex;
184184
gap:2rem;
185185
}
186-
187-
.secondary-button {
188-
color: white;
189-
text-transform: capitalize;
190-
// background-color: #ffff;
191-
border-radius: .75rem;
192-
flex-flow: row;
193-
flex: none;
194-
justify-content: center;
195-
align-items: center;
196-
height: 20px;
197-
margin-bottom: 0;
198-
padding: .875rem 1.5rem;
199-
font-weight: 500;
200-
text-decoration: none;
201-
display: flex;
202-
position: relative;
203-
overflow: hidden;
204-
box-shadow: inset 0 1px 1px #00b399, inset 0 -1px 1px #ffffff;
205-
transition: box-shadow 0.3s ease;
206-
}
207-
.secondary-button::after {
208-
content: "";
209-
position: absolute;
210-
bottom: -25px; /* Start below the secondary-button */
211-
left: 50%;
212-
transform: translateX(-50%);
213-
width: 120%; /* Wide flare */
214-
height: 40px;
215-
/* Keppel Gradient: White core to Keppel outer */
216-
background: radial-gradient(
217-
ellipse at center,
218-
#ffffff 0%,
219-
#3AB09E 35%,
220-
rgba(58, 176, 158, 0) 70%
221-
);
222-
filter: blur(8px);
223-
opacity: 0;
224-
transition: opacity 0.4s ease, bottom 0.4s ease;
225-
pointer-events: none;
226-
}
227-
228-
/* Trigger on Hover */
229-
.secondary-button:hover::after {
230-
opacity: 1;
231-
bottom: -28px; /* Moves the light up into view */
232-
}
233-

‎layouts/index.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,5 @@
44
{{ partial "section/customers.html" . }}
55
{{ partial "section/browser.html" . }}
66
{{ partial "section/capabilities.html" . }}
7-
{{ partial "section/community.html" . }}
87
{{ partial "section/feature.html" .}}
98
{{ end }}

‎layouts/partials/header.html‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,28 @@
11
<header class="site-header">
22
<div class="container">
3+
<div class="action-button">
4+
<a href="https://docs.layer5.io/kanvas/" class="secondary-button w-inline-block">
5+
<div class="button-text">Read the Docs</div>
6+
</a>
7+
<a href="https://docs.layer5.io/videos/#category-0-subcategory-0" class="secondary-button w-inline-block">
8+
<div class="button-text">Watch Videos</div>
9+
</a>
10+
</div>
311
<div class="logo">
412
<a href="/">
513
<img src="/brand/kanvas/horizontal/kanvas-horizontal-partial-color.svg" alt="Kanvas Logo" class="logo-img">
614
</a>
715
</div>
816

9-
<nav class="main-nav">
17+
<!-- <nav class="main-nav">
1018
<ul class="nav-menu">
1119
<li class="nav-link"><a href="/features">Features</a></li>
1220
<li class="nav-link"><a href="/demo">Demo</a></li>
1321
<li class="nav-link"><a href="/work">How It Works</a></li>
1422
<li class="nav-link"><a href="/capabilities">Capabilities</a></li>
1523
<li class="nav-link"><a href="/docs">Docs</a></li>
1624
</ul>
17-
</nav>
25+
</nav> -->
1826

1927
<div class="nav-button-wrapper hide-tablet">
2028
<a href="https://kanvas.new" class="button w-inline-block">

‎static/scripts/hero-hand-animation.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ document.addEventListener("DOMContentLoaded", function () {
6767
// -------------------------
6868
// HERO CONTENT DISAPPEAR
6969
// -------------------------
70-
const fadeStart = 0;
70+
const fadeStart = 0.2;
7171
const fadeEnd = 0.4;
7272

7373
let p = (progress - fadeStart) / (fadeEnd - fadeStart);

0 commit comments

Comments
 (0)