Skip to content

Commit 3c0f892

Browse files
marle3003marle3003
committed
improve home page styling
1 parent fb19d80 commit 3c0f892

2 files changed

Lines changed: 43 additions & 38 deletions

File tree

‎webui/src/assets/home.css‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,7 @@
107107
.card-inner {
108108
position: relative;
109109
z-index: 1;
110+
height: 100%;
110111
}
111112
/* Scale only the background "shell" */
112113
.card.accented::before {
@@ -134,13 +135,13 @@
134135
position: relative;
135136
bottom:2px;
136137
}
137-
.home .card.accented .cta i.hover {
138+
.home .card.accented .cta span.hover {
138139
display: none;
139140
}
140-
.home .card:hover.accented .cta i.hover {
141+
.home .card:hover.accented .cta span.hover {
141142
display: inline;
142143
}
143-
.home .card:hover.accented .cta i:not(.hover) {
144+
.home .card:hover.accented .cta span:not(.hover) {
144145
display: none;
145146
}
146147

‎webui/src/views/Home.vue‎

Lines changed: 39 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -197,14 +197,14 @@ function showImage(evt: MouseEvent) {
197197
<div class="col-sm-3">
198198
<div class="card h-100 shadow-sm border-0 accented">
199199
<div class="card-inner">
200-
<router-link :to="{path: '/http'}">
201-
<div class="card-body">
200+
<router-link :to="{path: '/http'}" class="d-flex flex-column h-100">
201+
<div class="card-body d-flex flex-column">
202202
<h5 class="card-title fw-bold mb-3">Mock REST APIs</h5>
203203
<p class="card-text">
204204
Simulate REST endpoints to develop and test clients
205205
without waiting for real backend services.
206206
</p>
207-
<div class="icon-link cta">Learn more
207+
<div class="icon-link cta mt-auto align-self-start">Learn more
208208
<span class="bi bi-chevron-right"></span>
209209
<span class="bi bi-arrow-right hover"></span>
210210
</div>
@@ -217,14 +217,14 @@ function showImage(evt: MouseEvent) {
217217
<div class="col-sm-3">
218218
<div class="card h-100 shadow-sm border-0 accented">
219219
<div class="card-inner">
220-
<router-link :to="{path: '/kafka'}">
221-
<div class="card-body">
220+
<router-link :to="{path: '/kafka'}" class="d-flex flex-column h-100">
221+
<div class="card-body d-flex flex-column">
222222
<h5 class="card-title fw-bold mb-3">Simulate Kafka Events</h5>
223223
<p class="card-text">
224224
Mock Kafka topics and message streams to test
225225
event-driven systems and service interactions.
226226
</p>
227-
<div class="icon-link cta">Learn more
227+
<div class="icon-link cta mt-auto align-self-start">Learn more
228228
<span class="bi bi-chevron-right"></span>
229229
<span class="bi bi-arrow-right hover"></span>
230230
</div>
@@ -236,14 +236,14 @@ function showImage(evt: MouseEvent) {
236236
<div class="col-sm-3">
237237
<div class="card h-100 shadow-sm border-0 accented">
238238
<div class="card-inner">
239-
<router-link :to="{path: '/ldap'}">
240-
<div class="card-body">
239+
<router-link :to="{path: '/ldap'}" class="d-flex flex-column h-100">
240+
<div class="card-body d-flex flex-column">
241241
<h5 class="card-title fw-bold mb-3">Mock LDAP Services</h5>
242242
<p class="card-text">
243243
Simulate directory and authentication services
244244
to test user access, roles, and permissions safely.
245245
</p>
246-
<div class="icon-link cta">Learn more
246+
<div class="icon-link cta mt-auto align-self-start">Learn more
247247
<span class="bi bi-chevron-right"></span>
248248
<span class="bi bi-arrow-right hover"></span>
249249
</div>
@@ -255,14 +255,14 @@ function showImage(evt: MouseEvent) {
255255
<div class="col-sm-3">
256256
<div class="card h-100 shadow-sm border-0 accented">
257257
<div class="card-inner">
258-
<router-link :to="{path: '/mail'}">
259-
<div class="card-body">
258+
<router-link :to="{path: '/mail'}" class="d-flex flex-column h-100">
259+
<div class="card-body d-flex flex-column">
260260
<h5 class="card-title fw-bold mb-3">SMTP Email Testing</h5>
261261
<p class="card-text">
262262
Test email workflows by simulating SMTP and IMAP servers
263263
without sending real messages.
264264
</p>
265-
<div class="icon-link cta">Learn more
265+
<div class="icon-link cta mt-auto align-self-start">Learn more
266266
<span class="bi bi-chevron-right"></span>
267267
<span class="bi bi-arrow-right hover"></span>
268268
</div>
@@ -312,8 +312,8 @@ function showImage(evt: MouseEvent) {
312312
Simulate edge cases, conditional logic, errors, and real-world workflows
313313
without changing your API specifications.
314314
</p>
315-
<router-link :to="{ path: '/docs/javascript-api' }">
316-
<button type="button" class="btn btn-outline-primary btn-sm">Explore JavaScript Mocking</button>
315+
<router-link :to="{ path: '/docs/javascript-api' }" class="btn btn-outline-primary btn-sm mt-3 mb-3">
316+
Explore JavaScript Mocking
317317
</router-link>
318318
</div>
319319
<div class="col-12 col-lg-6 order-lg-1 d-flex justify-content-center">
@@ -331,8 +331,8 @@ function showImage(evt: MouseEvent) {
331331
<p class="fst-italic">
332332
Ensure consistent testing across local development, CI pipelines, and cloud environments.
333333
</p>
334-
<router-link :to="{ path: '/docs/guides/get-started/running' }">
335-
<button type="button" class="btn btn-outline-primary btn-sm">Learn How to Run Mokapi</button>
334+
<router-link :to="{ path: '/docs/guides/get-started/running' }" class="btn btn-outline-primary btn-sm">
335+
Learn How to Run Mokapi
336336
</router-link>
337337
</div>
338338
<div class="col-12 col-lg-6 order-lg-2 d-flex justify-content-center">
@@ -351,8 +351,8 @@ function showImage(evt: MouseEvent) {
351351
<p class="fst-italic">
352352
Version-controlled mocks reduce errors, simplify audits, and make collaboration easier.
353353
</p>
354-
<router-link :to="{ path: '/docs/configuration' }">
355-
<button type="button" class="btn btn-outline-primary btn-sm">Learn More</button>
354+
<router-link :to="{ path: '/docs/configuration' }" class="btn btn-outline-primary btn-sm mt-3 mb-3">
355+
Learn More
356356
</router-link>
357357
</div>
358358
<div class="col-12 col-lg-6 order-lg-1 d-flex justify-content-center">
@@ -371,8 +371,8 @@ function showImage(evt: MouseEvent) {
371371
<p class="fst-italic">
372372
Produce lifelike data to catch bugs early and test edge cases that rarely occur in production.
373373
</p>
374-
<router-link :to="{ path: '/docs/guides/get-started/test-data' }">
375-
<button type="button" class="btn btn-outline-primary btn-sm">Explore Fake Data Features</button>
374+
<router-link :to="{ path: '/docs/guides/get-started/test-data' }" class="btn btn-outline-primary btn-sm mt-3 mb-3">
375+
Explore Fake Data Features
376376
</router-link>
377377
</div>
378378
<div class="col-12 col-lg-6 order-lg-2 d-flex justify-content-center">
@@ -391,8 +391,8 @@ function showImage(evt: MouseEvent) {
391391
<p class="fst-italic">
392392
Easily adapt mocks for specific environments or experiments without breaking the main API spec.
393393
</p>
394-
<router-link :to="{ path: '/docs/configuration/patching' }">
395-
<button type="button" class="btn btn-outline-primary btn-sm">Learn About Patching</button>
394+
<router-link :to="{ path: '/docs/configuration/patching' }" class="btn btn-outline-primary btn-sm mt-3 mb-3">
395+
Learn About Patching
396396
</router-link>
397397
</div>
398398
<div class="col-12 col-lg-6 order-lg-1 d-flex justify-content-center">
@@ -411,7 +411,7 @@ function showImage(evt: MouseEvent) {
411411
<p class="fst-italic">
412412
Gain real-time insight into requests, responses, and logs, making debugging and validation faster.
413413
</p>
414-
<div class="d-flex gap-2 justify-content-lg-start justify-content-center flex-wrap">
414+
<div class="d-flex gap-2 justify-content-lg-start justify-content-center flex-wrap mt-3 mb-3">
415415
<a href="https://mokapi.io/dashboard-demo" class="btn btn-outline-primary btn-sm">
416416
Live Dashboard Demo
417417
</a>
@@ -441,68 +441,72 @@ function showImage(evt: MouseEvent) {
441441
<!-- REST API Tutorial -->
442442
<div class="col">
443443
<div class="card h-100 shadow-sm border-0">
444-
<div class="card-body">
444+
<div class="card-body d-flex flex-column">
445445
<h3 class="card-title">
446446
<span class="icon me-2 bi-globe"></span>Mock REST APIs with OpenAPI
447447
</h3>
448448
<p>Learn how to mock an OpenAPI spec, configure Mokapi, and run it in Docker. Test REST endpoints without waiting for live APIs.</p>
449-
<a href="docs/resources/tutorials/get-started-with-rest-api" class="btn btn-outline-primary btn-sm">Start Tutorial</a>
449+
<a href="docs/resources/tutorials/get-started-with-rest-api" class="btn btn-outline-primary btn-sm mt-auto align-self-start">Start Tutorial</a>
450450
</div>
451451
</div>
452452
</div>
453453

454454
<!-- Kafka Tutorial -->
455455
<div class="col">
456456
<div class="card h-100 shadow-sm border-0">
457-
<div class="card-body">
457+
<div class="card-body d-flex flex-column">
458458
<h3 class="card-title">
459459
<span class="icon me-2 bi-lightning"></span>Simulate Kafka Topics with AsyncAPI
460460
</h3>
461461
<p>Test Kafka producers and consumers by mocking topics according to your AsyncAPI spec. Ensure reliable message generation and integration without a live Kafka cluster.</p>
462-
<a href="docs/resources/tutorials/get-started-with-kafka" class="btn btn-outline-primary btn-sm">Start Tutorial</a>
462+
<a href="docs/resources/tutorials/get-started-with-kafka" class="btn btn-outline-primary btn-sm mt-auto align-self-start">Start Tutorial</a>
463463
</div>
464464
</div>
465465
</div>
466466

467467
<!-- LDAP Tutorial -->
468468
<div class="col">
469469
<div class="card h-100 shadow-sm border-0">
470-
<div class="card-body">
470+
<div class="card-body d-flex flex-column">
471471
<h3 class="card-title">
472472
<span class="icon me-2 bi-person-check"></span>Mock LDAP Authentication
473473
</h3>
474474
<p>Step-by-step guide to mock LDAP login using Mokapi and Node.js. Test authentication flows without a real server.</p>
475-
<a href="docs/resources/tutorials/mock-ldap-authentication-in-node" class="btn btn-outline-primary btn-sm">Start Tutorial</a>
475+
<a href="docs/resources/tutorials/mock-ldap-authentication-in-node" class="btn btn-outline-primary btn-sm mt-auto align-self-start">Start Tutorial</a>
476476
</div>
477477
</div>
478478
</div>
479479

480480
<!-- SMTP Tutorial -->
481481
<div class="col">
482482
<div class="card h-100 shadow-sm border-0">
483-
<div class="card-body">
483+
<div class="card-body d-flex flex-column">
484484
<h3 class="card-title">
485485
<span class="icon me-2 bi-envelope-at-fill"></span>Mock SMTP Email Sending
486486
</h3>
487487
<p>Simulate an SMTP server and send test emails using Node.js. Perfect for validating email workflows without real mail servers.</p>
488-
<a href="/docs/resources/tutorials/mock-smtp-server-send-mail-using-node" class="btn btn-outline-primary btn-sm">Start Tutorial</a>
488+
<a href="/docs/resources/tutorials/mock-smtp-server-send-mail-using-node" class="btn btn-outline-primary btn-sm mt-auto align-self-start">Start Tutorial</a>
489489
</div>
490490
</div>
491491
</div>
492492

493-
<div class="col">
493+
</div>
494+
495+
<!-- Enforce API Contracts -->
496+
<div class="row justify-content-center g-4 mt-1">
497+
<div class="col-md-6 col-lg-6">
494498
<div class="card h-100 shadow-sm border-0">
495-
<div class="card-body">
499+
<div class="card-body d-flex flex-column">
496500
<h3 class="card-title">
497501
<span class="icon me-2 bi-shield-check"></span>Enforce API Contracts
498502
</h3>
499503
<p>Validate HTTP requests and responses against OpenAPI specs to catch API issues early in development or testing.</p>
500-
<a href="/docs/resources/blogs/ensuring-api-contract-compliance-with-mokapi" class="btn btn-outline-primary btn-sm">Read Blog</a>
504+
<a href="/docs/resources/blogs/ensuring-api-contract-compliance-with-mokapi" class="btn btn-outline-primary btn-sm mt-auto align-self-start">Read Blog</a>
501505
</div>
502506
</div>
503507
</div>
508+
</div>
504509

505-
</div>
506510
</div>
507511
</section>
508512

0 commit comments

Comments
 (0)