Skip to content

Commit 450c87f

Browse files
BhumikagargggBhumikagarggg
committed
add Comprehensive features section
Signed-off-by: Bhumika Garg <bhumikatech2024@gmail.com>
1 parent c40f935 commit 450c87f

5 files changed

Lines changed: 289 additions & 1 deletion

File tree

‎assets/scss/_feature.scss‎

Lines changed: 224 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,224 @@
1+
.all-feature-top-content-wrapper {
2+
text-align: center;
3+
max-width: 36.125rem;
4+
margin-left: auto;
5+
margin-right: auto;
6+
}
7+
8+
.heading-style-h2.linnear-color {
9+
font-size: 3rem;
10+
margin-bottom: 4rem;
11+
background-image: linear-gradient(261deg, #272736, #fff 50%, #272736);
12+
13+
/* 2. Clip the background to the text */
14+
-webkit-background-clip: text;
15+
background-clip: text;
16+
17+
/* 3. Make the actual text transparent so the background shows through */
18+
-webkit-text-fill-color: transparent;
19+
color: transparent;
20+
21+
/* Optional: Ensure the text looks crisp */
22+
display: inline-block;
23+
font-weight: bold;
24+
}
25+
26+
.feature-section {
27+
justify-content: center;
28+
padding: 80px 0;
29+
}
30+
31+
.all-feature-bottom-content-wrapper {
32+
max-width: 1100px;
33+
display: grid;
34+
grid-template-columns: repeat(3, 1fr);
35+
column-gap: 40px;
36+
row-gap: 40px;
37+
margin: 0 auto;
38+
padding: 0 20px;
39+
align-items: stretch;
40+
}
41+
42+
.all-feature-card-icon {
43+
width: 50px;
44+
height: 50px;
45+
object-fit: contain;
46+
47+
filter:
48+
brightness(0)
49+
saturate(100%)
50+
invert(53%)
51+
sepia(85%)
52+
saturate(748%)
53+
hue-rotate(122deg)
54+
brightness(95%)
55+
contrast(96%);
56+
57+
transition: all 0.4s ease;
58+
}
59+
60+
.all-feature-card {
61+
position: relative;
62+
padding-top: 120px;
63+
display: flex;
64+
flex-direction: column;
65+
height: 100%;
66+
transition: transform 0.4s ease;
67+
}
68+
69+
.all-feature-card-icon-wrapper {
70+
position: absolute;
71+
top: 0;
72+
left: 50%;
73+
transform: translateX(-50%);
74+
width: 90px;
75+
height: 80px;
76+
border-radius: 12px;
77+
background: linear-gradient(
78+
145deg,
79+
#0f1a20,
80+
#0c1117
81+
);
82+
display: flex;
83+
align-items: center;
84+
justify-content: center;
85+
border: 1px solid rgba(255,255,255,0.06);
86+
box-shadow: 0 20px 50px rgba(0,0,0,0.7);
87+
z-index: 2;
88+
}
89+
90+
.all-feature-card-icon {
91+
width: 50px;
92+
height: 50px;
93+
object-fit: contain;
94+
}
95+
96+
.heading-style-h6 {
97+
font-size: 22px;
98+
font-weight: 600;
99+
color: #ffffff;
100+
margin-bottom: 10px;
101+
margin-top: 0px;
102+
}
103+
104+
.text-size-small {
105+
font-size: 16px;
106+
line-height: 1.6;
107+
color: rgba(255,255,255,0.7);
108+
margin-bottom: 0;
109+
}
110+
111+
.all-feature-card-content-wrapper {
112+
background: linear-gradient(
113+
145deg,
114+
$card-dark-1,
115+
$card-dark-2
116+
);
117+
border-radius: 15px;
118+
padding: 30px 10px;
119+
text-align: center;
120+
box-shadow:
121+
inset 0 1px 2px rgba(0, 211, 169, 0.08),
122+
0 10px 40px rgba(0, 0, 0, 0.6);
123+
transition: all 0.4s ease;
124+
height: 40%;
125+
display: flex;
126+
flex-direction: column;
127+
justify-content: space-between;
128+
z-index:2;
129+
}
130+
131+
.all-feature-card-light-image {
132+
display: none;
133+
}
134+
135+
.more-feature-card-bg-image,
136+
.all-feature-card-light-image {
137+
display: none;
138+
}
139+
140+
.all-feature-card-light-image {
141+
position: absolute;
142+
bottom: -40px;
143+
left: 50%;
144+
transform: translateX(-50%) translateY(50px);
145+
opacity: 0;
146+
width: 150%;
147+
pointer-events: none;
148+
transition: all 0.6s ease;
149+
}
150+
151+
.all-feature-card::after {
152+
content: "";
153+
position: absolute;
154+
bottom: 20%;
155+
width: 350px;
156+
height: 350px;
157+
background: radial-gradient(
158+
circle at center,
159+
#3AB09E 0%,
160+
rgba(58, 176, 158, 0.8) 55%,
161+
rgba(58, 176, 158, 0.4) 45%,
162+
rgba(58, 176, 158, 0) 70%
163+
);
164+
opacity: 0;
165+
filter: blur(70px);
166+
transform: scale(0.7);
167+
transition: opacity 0.4s ease, transform 0.4s ease;
168+
pointer-events: none;
169+
z-index: 0;
170+
}
171+
172+
.all-feature-card:hover::after {
173+
opacity: 0.8;
174+
}
175+
176+
.all-feature-card:hover .all-feature-card-icon {
177+
transform: scale(1.1);
178+
}
179+
180+
181+
@media (max-width: 991px) {
182+
.all-feature-bottom-content-wrapper {
183+
grid-template-columns: repeat(2, 1fr);
184+
column-gap: 30px;
185+
row-gap: 80px;
186+
max-width: 700px;
187+
}
188+
189+
.feature-section {
190+
padding: 60px 0;
191+
}
192+
}
193+
194+
@media (max-width: 768px) {
195+
.all-feature-bottom-content-wrapper {
196+
column-gap: 20px;
197+
row-gap: 60px;
198+
padding: 0 15px;
199+
}
200+
201+
.heading-style-h6 {
202+
font-size: 20px;
203+
}
204+
205+
.text-size-small {
206+
font-size: 15px;
207+
}
208+
}
209+
210+
@media (max-width: 600px) {
211+
.all-feature-bottom-content-wrapper {
212+
grid-template-columns: 1fr;
213+
max-width: 400px;
214+
row-gap: 60px;
215+
}
216+
217+
.feature-section {
218+
padding: 40px 0;
219+
}
220+
221+
.all-feature-card-content-wrapper {
222+
padding: 25px 25px 35px;
223+
}
224+
}

‎assets/scss/_styles_project.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
@import "hero-glass";
1212
@import "floating-logo";
1313
@import "browser";
14+
@import "feature";
1415
@import "cursors";
1516

1617

‎assets/scss/_variables_project.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ $blonde: #fff3c5;
1818
$saffron: #ebc017;
1919
$lightslategray: #7a848e;
2020
$casper: #b1b6b8;
21+
$card-dark-1: #0c1117;
22+
$card-dark-2: #0f1a20;
2123

2224
// $bg-gradient:#1E2117;
2325
$code-color: shade-color($secondary, 40%) !default;

‎layouts/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,5 @@
55
{{ partial "section/browser.html" . }}
66
{{ partial "section/capabilities.html" . }}
77
{{ partial "section/community.html" . }}
8-
8+
{{ partial "section/feature.html" .}}
99
{{ end }}

‎layouts/partials/section/feature.html‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<section class="feature-section">
2+
<div class="all-feature-top-content-wrapper" style="transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d; opacity: 1;">
3+
<h2 class="heading-style-h2 linnear-color">Comprehensive features</h2>
4+
</div>
5+
<div class="all-feature-bottom-content-wrapper is-feature-v1">
6+
<div class="all-feature-card" >
7+
<div class="all-feature-card-icon-wrapper">
8+
<img loading="lazy" src="https://cdn.prod.website-files.com/6891f0681612b211720b762d/6891f0691612b211720b89c6_Feature%20Icon%206.png" alt="" class="all-feature-card-icon">
9+
</div>
10+
<div class="all-feature-card-content-wrapper">
11+
<h6 class="heading-style-h6">Integrations</h6>
12+
<p class="text-size-small">390+ Built-in Integrations support all your cloud native infrastructure and applications. Helm, Docker Compose, and more.</p>
13+
</div>
14+
</div>
15+
<div class="all-feature-card">
16+
<div class="all-feature-card-icon-wrapper">
17+
<img loading="lazy" src="https://cdn.prod.website-files.com/6891f0681612b211720b762d/6891f0691612b211720b8a92_Home3%20All%20Feature%20Icon%205.png" alt="" class="all-feature-card-icon">
18+
</div>
19+
<div class="all-feature-card-content-wrapper">
20+
<h6 class="heading-style-h6">Interactive Terminal</h6>
21+
<p class="text-size-small">Establish live terminal sessions with one or more pods at a time. Debug and troubleshoot directly from the canvas.</p>
22+
</div>
23+
</div>
24+
<div class="all-feature-card">
25+
<div class="all-feature-card-icon-wrapper">
26+
<img loading="lazy" src="https://cdn.prod.website-files.com/6891f0681612b211720b762d/6891f0691612b211720b89d2_Feature%20icon%204.png" alt="" class="all-feature-card-icon">
27+
</div>
28+
<div class="all-feature-card-content-wrapper">
29+
<h6 class="heading-style-h6">Performance Metrics</h6>
30+
<p class="text-size-small">Monitor your clusters in real-time. Set alerts and work with object-specific metrics for deep observability.</p>
31+
</div>
32+
</div>
33+
<div class="all-feature-card">
34+
<div class="all-feature-card-icon-wrapper">
35+
<img loading="lazy" src="https://cdn.prod.website-files.com/6891f0681612b211720b762d/6891f0691612b211720b89cf_Feature%20Icon%201.png" alt="" class="all-feature-card-icon">
36+
</div>
37+
<div class="all-feature-card-content-wrapper">
38+
<h6 class="heading-style-h6">Dry Run Deployments</h6>
39+
<p class="text-size-small">Test your configurations before deploying. Catch errors early with validation against live clusters.</p>
40+
</div>
41+
</div>
42+
<div class="all-feature-card">
43+
<div class="all-feature-card-icon-wrapper">
44+
<img loading="lazy" src="https://cdn.prod.website-files.com/6891f0681612b211720b762d/6891f0691612b211720b8a94_Home3%20All%20Feature%20Icon%202.png" alt="" class="all-feature-card-icon">
45+
</div>
46+
<div class="all-feature-card-content-wrapper">
47+
<h6 class="heading-style-h6">Component Catalog</h6>
48+
<p class="text-size-small">Access thousands of versioned Kubernetes components. Build and share reusable infrastructure pattern.</p>
49+
</div>
50+
</div>
51+
<div class="all-feature-card">
52+
<div class="all-feature-card-icon-wrapper">
53+
<img loading="lazy" src="https://cdn.prod.website-files.com/6891f0681612b211720b762d/6891f0691612b211720b8a90_Home3%20All%20Feature%20Icon%203.png" alt="" class="all-feature-card-icon">
54+
</div>
55+
<div class="all-feature-card-content-wrapper">
56+
<h6 class="heading-style-h6">Application Import</h6>
57+
<p class="text-size-small">Import existing Kubernetes manifests, Helm charts, or Docker Compose files. Visualize and manage existing infrastructure.</p>
58+
</div>
59+
</div>
60+
</div>
61+
</section>

0 commit comments

Comments
 (0)