Skip to content

Commit 7f4beed

Browse files
imitev-baeimitev-solved
imitev-bae
and
imitev-solved
authored
Requested homepage fixes (#261)
* removing dot from homepage title * removal of double arrow in the "Explore verified services" section * removing "resources" from header * "For Customers" section improvements * "For Providers" improvements * For providers page scrolling issue * Hero changes on homepage + adding logo's * CTA button and gap fixing --------- Co-authored-by: Ivan Mitev <imitev@solvedeu.com>
1 parent afd8ae6 commit 7f4beed

42 files changed

Lines changed: 1328 additions & 338 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎src/app/pages/dashboard/dashboard-customers/dashboard-customers.component.css‎

Lines changed: 189 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -66,96 +66,235 @@
6666

6767
.dc-feature-card {
6868
position: relative;
69-
min-height: 180px;
70-
border-radius: 12px;
69+
min-height: 240px;
70+
border-radius: 8px;
7171
overflow: hidden;
72-
background: rgba(255, 255, 255, 0.95);
73-
box-shadow: 0 10px 30px rgba(13, 33, 74, 0.1);
74-
border: 1px solid rgba(0, 0, 0, 0.05);
75-
transition: transform 220ms ease, box-shadow 220ms ease;
72+
background: #F7F9FD;
73+
isolation: isolate;
74+
transition: background-color 450ms ease, transform 450ms ease, box-shadow 450ms ease;
7675
}
7776

7877
.dc-feature-card:hover {
78+
background: #E2E9F5;
7979
transform: translateY(-2px);
80-
box-shadow: 0 16px 38px rgba(13, 33, 74, 0.14);
80+
box-shadow: 0 16px 38px rgba(13, 33, 74, 0.12);
8181
}
8282

8383
.dc-feature-card__base {
8484
position: relative;
8585
z-index: 1;
8686
height: 100%;
87-
min-height: 180px;
88-
transition: opacity 180ms ease, transform 220ms ease;
87+
min-height: 240px;
88+
transition: opacity 450ms ease;
8989
}
9090

9191
.dc-feature-card__content {
9292
height: 100%;
9393
display: flex;
94+
flex-direction: column;
95+
justify-content: flex-end;
96+
align-items: flex-start;
97+
padding: 24px;
98+
gap: 12px;
99+
position: relative;
100+
z-index: 1;
101+
}
102+
103+
.dc-feature-card__title {
104+
font-family: 'Blinker', sans-serif;
105+
font-size: 30px;
106+
font-weight: 700;
107+
line-height: 36px;
108+
color: #2D58A7;
109+
display: flex;
94110
align-items: flex-end;
95-
padding: 1.5rem;
96111
}
97112

98113
.dc-feature-card__icon {
99114
position: absolute;
100-
right: 0;
101-
bottom: 0;
102-
font-size: 72px;
103-
color: #1f4fbf;
104-
opacity: 0.1;
105-
transition: opacity 220ms ease, transform 220ms ease;
115+
right: -2.52px;
116+
bottom: -2.52px;
117+
width: 120px;
118+
height: 120px;
119+
font-size: 120px;
120+
line-height: 1;
121+
color: #DDE6F6;
122+
transform: rotate(-15deg);
123+
transform-origin: center;
124+
z-index: 0;
125+
transition: transform 500ms ease, color 450ms ease;
106126
}
107127

108128
.dc-feature-card__hover {
109129
position: absolute;
110130
inset: 0;
111131
z-index: 2;
112-
padding: 2rem 1.9rem 1.8rem;
113-
background: rgba(226, 233, 245, 0.9);
132+
padding: 24px;
133+
background: transparent;
114134
opacity: 0;
115-
transform: translateY(8px);
116-
transition: opacity 220ms ease, transform 220ms ease;
135+
transition: opacity 450ms ease 60ms;
117136
pointer-events: none;
118137
}
119138

120139
.dc-feature-card__hover-text {
121140
position: relative;
122141
z-index: 2;
123-
max-width: 250px;
124-
font-size: 16px;
125-
line-height: 1.55;
126-
font-weight: 500;
127-
color: #1f2937;
128-
}
129-
130-
.dc-feature-card__hover-icon {
131-
position: absolute;
132-
right: -6px;
133-
bottom: -10px;
134-
font-size: 122px;
135-
color: #1f4fbf;
136-
opacity: 0.1;
137-
z-index: 1;
138-
transition: transform 220ms ease, opacity 220ms ease;
142+
font-family: 'Blinker', sans-serif;
143+
font-size: 18px;
144+
line-height: 28px;
145+
font-weight: 400;
146+
color: #0B1528;
139147
}
140148

141149
.dc-feature-card:hover .dc-feature-card__base {
142150
opacity: 0;
143-
transform: scale(0.98);
144151
}
145152

146153
.dc-feature-card:hover .dc-feature-card__icon {
147-
opacity: 0;
148-
transform: scale(0.9);
154+
transform: rotate(-15deg) scale(1.5);
155+
color: #C4D3EC;
149156
}
150157

151158
.dc-feature-card:hover .dc-feature-card__hover {
152159
opacity: 1;
153-
transform: translateY(0);
154160
}
155161

156-
.dc-feature-card:hover .dc-feature-card__hover-icon {
157-
opacity: 0.12;
158-
transform: scale(1.03);
162+
/* "How DOME works" card */
163+
164+
.dc-howcard {
165+
border-radius: 8px;
166+
background: rgba(255, 255, 255, 0.7);
167+
border: 2px solid #FFFFFF;
168+
backdrop-filter: blur(50px);
169+
-webkit-backdrop-filter: blur(50px);
170+
min-height: 504px;
171+
}
172+
173+
.dc-howcard__inner {
174+
height: 100%;
175+
display: flex;
176+
flex-direction: column;
177+
align-items: flex-end;
178+
padding: 40px 40px 24px;
179+
gap: 32px;
180+
font-family: 'Blinker', sans-serif;
181+
}
182+
183+
.dc-howcard__title {
184+
align-self: stretch;
185+
font-family: 'Blinker', sans-serif;
186+
font-weight: 700;
187+
font-size: 36px;
188+
line-height: 43px;
189+
color: #111827;
190+
}
191+
192+
.dc-steps {
193+
align-self: stretch;
194+
flex: 1 1 auto;
195+
display: flex;
196+
flex-direction: column;
197+
gap: 24px;
198+
}
199+
200+
.dc-step {
201+
align-self: stretch;
202+
display: flex;
203+
flex-direction: row;
204+
align-items: flex-start;
205+
gap: 16px;
206+
}
207+
208+
.dc-step__num {
209+
font-family: 'Blinker', sans-serif;
210+
font-weight: 700;
211+
font-size: 18px;
212+
line-height: 22px;
213+
color: #2D58A7;
214+
flex: none;
215+
}
216+
217+
.dc-step__text {
218+
flex: 1 1 auto;
219+
display: flex;
220+
flex-direction: column;
221+
justify-content: center;
222+
gap: 4px;
223+
}
224+
225+
.dc-step__title {
226+
font-family: 'Blinker', sans-serif;
227+
font-weight: 600;
228+
font-size: 20px;
229+
line-height: 24px;
230+
color: #111827;
231+
}
232+
233+
.dc-step__desc {
234+
font-family: 'Blinker', sans-serif;
235+
font-weight: 400;
236+
font-size: 18px;
237+
line-height: 28px;
238+
color: #4C5A6B;
239+
}
240+
241+
.dc-howcard__cta {
242+
display: inline-flex;
243+
justify-content: center;
244+
align-items: center;
245+
padding: 12px 16px;
246+
gap: 8px;
247+
height: 40px;
248+
background: #2D58A7;
249+
border-radius: 6px;
250+
font-family: 'Blinker', sans-serif;
251+
font-weight: 600;
252+
font-size: 14px;
253+
line-height: 16px;
254+
letter-spacing: 0.5px;
255+
color: #FFFFFF;
256+
text-decoration: none;
257+
transition: filter 200ms ease;
258+
}
259+
260+
.dc-howcard__cta:hover {
261+
filter: brightness(1.08);
262+
}
263+
264+
@media (max-width: 1024px) {
265+
.dc-howcard {
266+
min-height: 0;
267+
}
268+
269+
.dc-howcard__inner {
270+
padding: 32px 32px 24px;
271+
gap: 24px;
272+
}
273+
274+
.dc-howcard__title {
275+
font-size: 30px;
276+
line-height: 1.2;
277+
}
278+
}
279+
280+
@media (max-width: 640px) {
281+
.dc-howcard__inner {
282+
padding: 24px;
283+
gap: 20px;
284+
}
285+
286+
.dc-howcard__title {
287+
font-size: 26px;
288+
}
289+
290+
.dc-step__title {
291+
font-size: 18px;
292+
}
293+
294+
.dc-step__desc {
295+
font-size: 16px;
296+
line-height: 1.55;
297+
}
159298
}
160299

161300
@media (max-width: 1024px) {
@@ -193,15 +332,19 @@
193332
}
194333

195334
.dc-feature-card {
196-
min-height: 160px;
335+
min-height: 200px;
197336
}
198337

199338
.dc-feature-card__base {
200-
min-height: 160px;
339+
min-height: 200px;
340+
}
341+
342+
.dc-feature-card__title {
343+
font-size: 26px;
201344
}
202345

203346
.dc-feature-card__hover {
204-
padding: 1.5rem;
347+
padding: 20px;
205348
}
206349

207350
.dc-feature-card__hover-text {

‎src/app/pages/dashboard/dashboard-customers/dashboard-customers.component.html‎

Lines changed: 18 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -7,58 +7,54 @@
77
<span class="dc-blur"></span>
88
</div>
99

10-
<div class="dc-content mx-auto w-full max-w-[1180px] px-5 sm:px-8 lg:px-10 py-[44px] sm:py-[56px] lg:py-[64px]">
10+
<div class="dc-content mx-auto w-full max-w-[1180px] px-5 sm:px-8 lg:px-6 py-[44px] sm:py-[56px] lg:py-[64px]">
1111
<h2 class="text-[clamp(34px,4.4vw,54px)] leading-[1.05] tracking-[-0.02em] font-extrabold text-[#0b1220]">
1212
{{ 'DASHBOARD.customers._sectitle' | translate }}
1313
</h2>
1414

15-
<div class="mt-8 sm:mt-10 grid grid-cols-1 lg:grid-cols-12 gap-5 sm:gap-6 items-stretch">
16-
<div class="lg:col-span-5 h-full">
15+
<div class="mt-8 sm:mt-10 grid grid-cols-1 lg:grid-cols-2 gap-5 sm:gap-6 items-stretch">
16+
<div class="h-full">
1717
@if (featureCards.length) {
1818
<div class="grid grid-cols-1 sm:grid-cols-2 gap-5 sm:gap-6 h-full auto-rows-fr">
1919
@for (card of featureCards; track $index) {
2020
<div class="dc-feature-card cursor-pointer">
21+
<fa-icon [icon]="card.icon" class="dc-feature-card__icon"></fa-icon>
22+
2123
<div class="dc-feature-card__base">
2224
<div class="dc-feature-card__content">
23-
<div class="text-[clamp(24px,2.2vw,30px)] leading-[1.15] font-extrabold text-[#1f4fbf]"
24-
[innerHTML]="card.html | translate">
25+
<div class="dc-feature-card__title" [innerHTML]="card.html | translate">
2526
</div>
2627
</div>
27-
28-
<fa-icon [icon]="card.icon" class="dc-feature-card__icon"></fa-icon>
2928
</div>
3029

3130
<div class="dc-feature-card__hover">
3231
<div class="dc-feature-card__hover-text">
3332
{{ card.hoverText | translate }}
3433
</div>
35-
36-
<fa-icon [icon]="card.icon" class="dc-feature-card__hover-icon"></fa-icon>
3734
</div>
3835
</div>
3936
}
4037
</div>
4138
}
4239
</div>
4340

44-
<div
45-
class="lg:col-span-7 h-full lg:min-h-[384px] rounded-[14px] bg-white/95 shadow-[0_12px_34px_rgba(13,33,74,0.12)] ring-1 ring-black/5">
46-
<div class="p-6 sm:p-8 lg:p-10 h-full flex flex-col">
47-
<h3 class="text-[clamp(28px,3vw,38px)] leading-[1.15] tracking-[-0.02em] font-extrabold text-[#0b1220]">
41+
<div class="dc-howcard h-full">
42+
<div class="dc-howcard__inner">
43+
<h3 class="dc-howcard__title">
4844
{{ 'DASHBOARD.customers._howItWorksTitle' | translate }}
4945
</h3>
5046

5147
@if (steps.length) {
52-
<div class="mt-6 sm:mt-7 space-y-5 sm:space-y-6">
48+
<div class="dc-steps">
5349
@for (step of steps; track $index) {
54-
<div class="grid grid-cols-[44px_1fr] sm:grid-cols-[52px_1fr] gap-4 sm:gap-5 items-start">
55-
<div class="pt-[2px] text-[18px] font-extrabold text-[#1f4fbf]">{{ step.num }}</div>
50+
<div class="dc-step">
51+
<div class="dc-step__num">{{ step.num }}</div>
5652

57-
<div>
58-
<div class="text-[18px] font-extrabold text-[#0b1220]">
53+
<div class="dc-step__text">
54+
<div class="dc-step__title">
5955
{{ step.title | translate }}
6056
</div>
61-
<div class="mt-1 text-[17px] sm:text-[18px] leading-[1.6] text-[#526179]">
57+
<div class="dc-step__desc">
6258
{{ step.desc | translate }}
6359
</div>
6460
</div>
@@ -67,12 +63,9 @@ <h3 class="text-[clamp(28px,3vw,38px)] leading-[1.15] tracking-[-0.02em] font-ex
6763
</div>
6864
}
6965

70-
<div class="mt-8 sm:mt-10 flex justify-center sm:justify-end mt-auto">
71-
<a [href]="customerLink()" target="_blank"
72-
class="inline-flex items-center justify-center h-[42px] w-full sm:w-auto px-6 rounded-[10px] bg-[#1f4fbf] text-white text-[14px] font-semibold shadow-[0_10px_18px_rgba(31,79,191,0.25)] hover:brightness-110 active:brightness-95 transition">
73-
{{ 'DASHBOARD.customers._cta' | translate }}
74-
</a>
75-
</div>
66+
<a [href]="customerLink()" target="_blank" class="dc-howcard__cta">
67+
{{ 'DASHBOARD.customers._cta' | translate }}
68+
</a>
7669
</div>
7770
</div>
7871
</div>

0 commit comments

Comments
 (0)