Skip to content

Commit c9a7edb

Browse files
JexsieJexsie
authored
Merge pull request #333 from OpenElements/fix
fix image heights and font size, weight
2 parents 66c8553 + f05c730 commit c9a7edb

1 file changed

Lines changed: 71 additions & 51 deletions

File tree

  • src/app/[locale]/support-care-maven

‎src/app/[locale]/support-care-maven/page.tsx‎

Lines changed: 71 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -24,49 +24,49 @@ export default function SupportCareMavenPage() {
2424
</div>
2525
<div className="text-center mb-6">
2626
<p
27-
className="text-xl font-normal max-w-3xl mx-auto mb-4 leading-relaxed"
28-
style={{ color: '#5CBA9E' }}>
27+
className="text-[1.2rem] max-w-[900px] mx-auto mb-4 leading-relaxed"
28+
style={{ color: '#5CBA9E', fontWeight: 400 }}>
2929
{t('heroParagraph')}
3030
</p>
3131
{/* Component logos row */}
3232
<div className="flex flex-wrap justify-center items-center gap-5 mx-auto mb-5">
3333
<Image
3434
src="/support-care-maven/component-logos/eclipse-temurin.svg"
3535
alt="Eclipse Temurin"
36-
width={100}
37-
height={28}
36+
width={225}
37+
height={48}
3838
className="h-7 w-auto opacity-70 my-0"
3939
/>
4040
<Image
4141
src="/support-care-maven/component-logos/apache-maven.svg"
4242
alt="Apache Maven"
43-
width={100}
44-
height={28}
43+
width={190}
44+
height={48}
4545
className="h-7 w-auto opacity-70 my-0"
4646
/>
4747
<Image
4848
src="/support-care-maven/component-logos/junit.svg"
4949
alt="JUnit"
50-
width={60}
51-
height={28}
50+
width={169}
51+
height={48}
5252
className="h-7 w-auto opacity-70 my-0"
5353
/>
5454
<Image
5555
src="/support-care-maven/component-logos/apache-log4j.png"
5656
alt="Apache Log4j"
57-
width={100}
58-
height={28}
57+
width={116}
58+
height={48}
5959
className="h-7 w-auto opacity-70 my-0"
6060
/>
6161
<Image
6262
src="/support-care-maven/component-logos/apache-commons.svg"
6363
alt="Apache Commons"
64-
width={100}
65-
height={28}
64+
width={110}
65+
height={48}
6666
className="h-7 w-auto opacity-70 my-0"
6767
/>
6868
</div>
69-
<p className="text-base mx-auto mb-6 leading-relaxed max-w-3xl">
69+
<p className="text-base mx-auto mb-6 leading-relaxed">
7070
{t('heroBody')}
7171
</p>
7272
<div className="flex flex-wrap justify-center gap-4 mb-6">
@@ -93,11 +93,12 @@ export default function SupportCareMavenPage() {
9393
</h2>
9494
<p>{t('problemP1')}</p>
9595
<div
96-
className="bg-blue-50 border-l-4 border-sky-300 rounded-lg px-6 py-5 my-6 text-lg font-semibold"
96+
className="bg-blue-50 border-l-4 border-sky-300 rounded-lg px-6 py-5 my-6 text-[1.1rem]"
9797
style={{
9898
backgroundColor: '#DFF1FD',
9999
borderColor: '#5DB9F5',
100100
color: '#020144',
101+
fontWeight: 600,
101102
}}>
102103
{t('problemHighlight')}
103104
</div>
@@ -134,57 +135,65 @@ export default function SupportCareMavenPage() {
134135
name: t('temurin.name'),
135136
desc: t('temurin.desc'),
136137
alt: 'Eclipse Temurin',
138+
width: 225,
137139
},
138140
{
139141
img: '/support-care-maven/component-logos/apache-maven.svg',
140142
name: t('maven.name'),
141143
desc: t('maven.desc'),
142144
alt: 'Apache Maven',
145+
width: 190,
143146
},
144147
{
145148
img: '/support-care-maven/component-logos/junit.svg',
146149
name: t('junit.name'),
147150
desc: t('junit.desc'),
148151
alt: 'JUnit',
152+
width: 169,
149153
},
150154
{
151155
img: '/support-care-maven/component-logos/apache-log4j.png',
152156
name: t('log4j.name'),
153157
desc: t('log4j.desc'),
154158
alt: 'Apache Log4j',
159+
width: 116,
155160
},
156161
{
157162
img: '/support-care-maven/component-logos/apache-commons.svg',
158163
name: t('commons.name'),
159164
desc: t('commons.desc'),
160165
alt: 'Apache Commons',
166+
width: 110,
161167
},
162168
].map(comp => (
163169
<div
164170
key={comp.alt}
165-
className="text-center p-6 border border-gray-200 rounded-2xl w-72 flex-shrink-0">
171+
className="text-center p-6 border border-gray-200 rounded-2xl w-80 flex-shrink-0">
166172
<Image
167173
src={comp.img}
168174
alt={comp.alt}
169-
width={100}
175+
width={comp.width}
170176
height={48}
171-
className="h-12 mx-auto mb-4 object-contain"
177+
className="h-12 w-auto mx-auto mb-4 object-contain"
172178
/>
173-
<strong className="block text-blue">{comp.name}</strong>
179+
<strong className="block text-[0.95rem] text-blue">
180+
{comp.name}
181+
</strong>
174182
<p
175-
className="mt-3 text-sm leading-relaxed text-blue"
183+
className="mt-3 text-[0.9rem] leading-relaxed text-blue"
176184
dangerouslySetInnerHTML={{ __html: comp.desc }}
177185
/>
178186
</div>
179187
))}
180188
</div>
181189

182190
<div
183-
className="bg-blue-50 border-l-4 border-sky-300 rounded-lg px-6 py-5 my-6 text-lg font-semibold"
191+
className="bg-blue-50 border-l-4 border-sky-300 rounded-lg px-6 py-5 my-6 text-[1.1rem]"
184192
style={{
185193
backgroundColor: '#DFF1FD',
186194
borderColor: '#5DB9F5',
187195
color: '#020144',
196+
fontWeight: 600,
188197
}}>
189198
{t('componentsHighlight')}
190199
</div>
@@ -200,8 +209,8 @@ export default function SupportCareMavenPage() {
200209
src="/support-care-maven/pyramid.png"
201210
alt={t('pyramidAlt')}
202211
className="w-3/5"
203-
width={600}
204-
height={400}
212+
width={1902}
213+
height={1496}
205214
/>
206215
</div>
207216

@@ -224,11 +233,12 @@ export default function SupportCareMavenPage() {
224233
</ol>
225234

226235
<div
227-
className="bg-blue-50 border-l-4 border-sky-300 rounded-lg px-6 py-5 my-6 text-lg font-semibold"
236+
className="bg-blue-50 border-l-4 border-sky-300 rounded-lg px-6 py-5 my-6 text-[1.1rem]"
228237
style={{
229238
backgroundColor: '#DFF1FD',
230239
borderColor: '#5DB9F5',
231240
color: '#020144',
241+
fontWeight: 600,
232242
}}>
233243
{t('layersHighlight').split('Log4Shell')[0]}
234244
<a
@@ -282,16 +292,18 @@ export default function SupportCareMavenPage() {
282292
].map(svc => (
283293
<div
284294
key={svc.name}
285-
className="text-center p-6 border border-gray-200 rounded-2xl w-72 flex-shrink-0">
295+
className="text-center p-6 border border-gray-200 rounded-2xl w-80 flex-shrink-0">
286296
<Image
287297
src={svc.img}
288298
alt={svc.name}
289299
width={96}
290300
height={96}
291301
className="h-24 mx-auto mb-4 object-contain"
292302
/>
293-
<strong className="block text-blue">{svc.name}</strong>
294-
<p className="mt-3 text-sm leading-relaxed text-blue">
303+
<strong className="block text-[0.95rem] text-blue">
304+
{svc.name}
305+
</strong>
306+
<p className="mt-3 text-[0.9rem] leading-relaxed text-blue">
295307
{svc.desc}
296308
</p>
297309
</div>
@@ -315,11 +327,12 @@ export default function SupportCareMavenPage() {
315327
<li>{t('craBullet6')}</li>
316328
</ul>
317329
<div
318-
className="bg-blue-50 border-l-4 border-sky-300 rounded-lg px-6 py-5 my-6 text-lg font-semibold"
330+
className="bg-blue-50 border-l-4 border-sky-300 rounded-lg px-6 py-5 my-6 text-[1.1rem]"
319331
style={{
320332
backgroundColor: '#DFF1FD',
321333
borderColor: '#5DB9F5',
322334
color: '#020144',
335+
fontWeight: 600,
323336
}}>
324337
{t('craHighlight')}
325338
</div>
@@ -346,8 +359,8 @@ export default function SupportCareMavenPage() {
346359
src="/support-care-maven/oe-delivers-container.png"
347360
alt={t('containersImgAlt')}
348361
className="w-3/5"
349-
width={600}
350-
height={400}
362+
width={3330}
363+
height={1218}
351364
/>
352365
</div>
353366
<p className="text-center text-sm text-gray-500 -mt-4">
@@ -379,11 +392,12 @@ export default function SupportCareMavenPage() {
379392
</ul>
380393

381394
<div
382-
className="bg-blue-50 border-l-4 border-sky-300 rounded-lg px-6 py-5 my-6 text-lg font-semibold"
395+
className="bg-blue-50 border-l-4 border-sky-300 rounded-lg px-6 py-5 my-6 text-[1.1rem]"
383396
style={{
384397
backgroundColor: '#DFF1FD',
385398
borderColor: '#5DB9F5',
386399
color: '#020144',
400+
fontWeight: 600,
387401
}}>
388402
{t('modelHighlight')}
389403
</div>
@@ -402,8 +416,8 @@ export default function SupportCareMavenPage() {
402416
src="/illustrations/support-care-subscription/basic.svg"
403417
className="size-48 object-contain mt-2 mb-0"
404418
alt=""
405-
width={768}
406-
height={300}
419+
width={800}
420+
height={800}
407421
/>
408422
<ul className="mt-2 text-sm list-none pl-0 flex flex-col gap-1">
409423
{[
@@ -449,8 +463,8 @@ export default function SupportCareMavenPage() {
449463
src="/illustrations/support-care-subscription/standard.svg"
450464
className="size-48 object-contain mt-2 mb-0"
451465
alt=""
452-
width={768}
453-
height={300}
466+
width={800}
467+
height={800}
454468
/>
455469
<ul className="mt-2 text-sm list-none pl-0 flex flex-col gap-1">
456470
{[
@@ -498,8 +512,8 @@ export default function SupportCareMavenPage() {
498512
src="/illustrations/support-care-subscription/premium.svg"
499513
className="size-48 object-contain mt-2 mb-0"
500514
alt=""
501-
width={768}
502-
height={300}
515+
width={800}
516+
height={800}
503517
/>
504518
<ul className="mt-2 text-sm list-none pl-0 flex flex-col gap-1">
505519
{[
@@ -555,12 +569,12 @@ export default function SupportCareMavenPage() {
555569
alt="Hendrik Ebbers"
556570
width={120}
557571
height={120}
558-
className="w-28 h-28 rounded-full object-cover mx-auto mb-3 border-4 border-sky-300"
572+
className="w-[120px] h-[120px] rounded-full object-cover mx-auto mb-3 border-[3px] border-[#5DB9F5]"
559573
/>
560-
<strong className="block text-sm text-blue">
574+
<strong className="block text-[0.95rem] text-blue">
561575
Hendrik Ebbers
562576
</strong>
563-
<span className="text-xs" style={{ color: '#5CBA9E' }}>
577+
<span className="text-[0.8rem]" style={{ color: '#5CBA9E' }}>
564578
{t('hendrikRole')}
565579
</span>
566580
</Link>
@@ -573,12 +587,12 @@ export default function SupportCareMavenPage() {
573587
alt="Sandra Parsick"
574588
width={120}
575589
height={120}
576-
className="w-28 h-28 rounded-full object-cover mx-auto mb-3 border-4 border-sky-300"
590+
className="w-[120px] h-[120px] rounded-full object-cover mx-auto mb-3 border-[3px] border-[#5DB9F5]"
577591
/>
578-
<strong className="block text-sm text-blue">
592+
<strong className="block text-[0.95rem] text-blue">
579593
Sandra Parsick
580594
</strong>
581-
<span className="text-xs" style={{ color: '#5CBA9E' }}>
595+
<span className="text-[0.8rem]" style={{ color: '#5CBA9E' }}>
582596
{t('sandraRole')}
583597
</span>
584598
</Link>
@@ -591,12 +605,12 @@ export default function SupportCareMavenPage() {
591605
alt="Sebastian Tiemann"
592606
width={120}
593607
height={120}
594-
className="w-28 h-28 rounded-full object-cover mx-auto mb-3 border-4 border-sky-300"
608+
className="w-[120px] h-[120px] rounded-full object-cover mx-auto mb-3 border-[3px] border-[#5DB9F5]"
595609
/>
596-
<strong className="block text-sm text-blue">
610+
<strong className="block text-[0.95rem] text-blue">
597611
Sebastian Tiemann
598612
</strong>
599-
<span className="text-xs" style={{ color: '#5CBA9E' }}>
613+
<span className="text-[0.8rem]" style={{ color: '#5CBA9E' }}>
600614
{t('sebastianRole')}
601615
</span>
602616
</Link>
@@ -630,28 +644,31 @@ export default function SupportCareMavenPage() {
630644
].map(f => (
631645
<div
632646
key={f.name}
633-
className="text-center p-6 border border-gray-200 rounded-2xl w-72 flex-shrink-0">
647+
className="text-center p-6 border border-gray-200 rounded-2xl w-80 flex-shrink-0">
634648
<Image
635649
src={f.img}
636650
alt={f.name}
637651
width={f.imgWidth}
638652
height={f.imgHeight}
639653
className="h-16 mx-auto mb-4 object-contain"
640654
/>
641-
<strong className="block text-blue">{f.name}</strong>
642-
<p className="mt-3 text-sm leading-relaxed text-blue">
655+
<strong className="block text-[0.95rem] text-blue">
656+
{f.name}
657+
</strong>
658+
<p className="mt-3 text-[0.9rem] leading-relaxed text-blue">
643659
{f.desc}
644660
</p>
645661
</div>
646662
))}
647663
</div>
648664

649665
<div
650-
className="bg-blue-50 border-l-4 border-sky-300 rounded-lg px-6 py-5 my-6 text-lg font-semibold"
666+
className="bg-blue-50 border-l-4 border-sky-300 rounded-lg px-6 py-5 my-6 text-[1.1rem]"
651667
style={{
652668
backgroundColor: '#DFF1FD',
653669
borderColor: '#5DB9F5',
654670
color: '#020144',
671+
fontWeight: 600,
655672
}}>
656673
{t('whyHighlight')}
657674
</div>
@@ -675,8 +692,11 @@ export default function SupportCareMavenPage() {
675692
key={i}
676693
className="border border-gray-200 rounded-xl px-6 py-5 cursor-pointer">
677694
<summary
678-
className="font-bold text-lg"
679-
style={{ color: '#020144' }}>
695+
style={{
696+
color: '#020144',
697+
fontSize: '1.05rem',
698+
fontWeight: 700,
699+
}}>
680700
{faq.q}
681701
</summary>
682702
<p className="mt-3 leading-relaxed text-blue">{faq.a}</p>

0 commit comments

Comments
 (0)