Skip to content

Commit 709ebc3

Browse files
marle3003marle3003
committed
update smtp page
1 parent b8bd1c6 commit 709ebc3

File tree

2 files changed

+64
-54
lines changed

2 files changed

+64
-54
lines changed

‎webui/src/views/Ldap.vue‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -102,36 +102,36 @@ useMeta(title, description, "https://mokapi.io/ldap")
102102
<section>
103103
<div class="container">
104104
<h2>Use Cases</h2>
105-
<div class="row row-cols-1 row-cols-md-3 g-3">
106-
<div class="col">
107-
<div class="card h-100 position-relative">
108-
<div class="card-body">
109-
<h3 class="card-title align-middle"><i class="bi bi-person-check me-2 align-middle d-inline-block icon" style="font-size:24px"></i><span class="align-middle d-inline-block" >LDAP Authentication Mocking</span></h3>
110-
<p class="card-text pb-4">Mock LDAP authentication to simulate login processes in your application, without needing access to a real LDAP server.</p>
111-
<a href="docs/examples/tutorials/mock-ldap-authentication-in-node" class="card-link position-absolute" style="bottom: 15px;">Learn More</a>
112-
</div>
105+
<div class="row row-cols-1 row-cols-md-3 g-3">
106+
<div class="col">
107+
<div class="card h-100 position-relative">
108+
<div class="card-body">
109+
<h3 class="card-title align-middle"><i class="bi bi-person-check me-2 align-middle d-inline-block icon" style="font-size:24px"></i><span class="align-middle d-inline-block" >LDAP Authentication Mocking</span></h3>
110+
<p class="card-text pb-4">Mock LDAP authentication to simulate login processes in your application, without needing access to a real LDAP server.</p>
111+
<a href="docs/examples/tutorials/mock-ldap-authentication-in-node" class="card-link position-absolute" style="bottom: 15px;">Learn More</a>
112+
</div>
113+
</div>
113114
</div>
114-
</div>
115-
<div class="col">
116-
<div class="card h-100">
117-
<div class="card-body">
118-
<h3 class="card-title align-middle"><i class="bi bi-check2-circle me-2 align-middle d-inline-block icon" style="font-size:24px"></i><span class="align-middle d-inline-block" >Use LDIF to build your directory</span></h3>
119-
<p class="card-text pb-4">Easily import LDIF files to create a set of users in your mock LDAP server, streamlining testing with preconfigured data.</p>
120-
<a href="docs/guides/ldap/quick-start" class="card-link position-absolute" style="bottom: 15px;">Try Now</a>
121-
</div>
115+
<div class="col">
116+
<div class="card h-100">
117+
<div class="card-body">
118+
<h3 class="card-title align-middle"><i class="bi bi-check2-circle me-2 align-middle d-inline-block icon" style="font-size:24px"></i><span class="align-middle d-inline-block" >Use LDIF to build your directory</span></h3>
119+
<p class="card-text pb-4">Easily import LDIF files to create a set of users in your mock LDAP server, streamlining testing with preconfigured data.</p>
120+
<a href="docs/guides/ldap/quick-start" class="card-link position-absolute" style="bottom: 15px;">Try Now</a>
121+
</div>
122+
</div>
122123
</div>
123-
</div>
124-
<div class="col">
125-
<div class="card h-100">
126-
<div class="card-body">
127-
<h3 class="card-title align-middle"><i class="bi bi-gear-wide-connected me-2 align-middle d-inline-block icon" style="font-size:24px"></i><span class="align-middle d-inline-block" >LDAP Mock for Development</span></h3>
128-
<p class="card-text pb-4">Set up an LDAP server mock to mimic real server behavior, ensuring seamless integration and testing without needing an actual LDAP server.</p>
129-
<a href="docs/examples/tutorials/running-mokapi-in-a-ci-cd-pipeline" class="card-link position-absolute" style="bottom: 15px;">Get Started</a>
130-
</div>
124+
<div class="col">
125+
<div class="card h-100">
126+
<div class="card-body">
127+
<h3 class="card-title align-middle"><i class="bi bi-gear-wide-connected me-2 align-middle d-inline-block icon" style="font-size:24px"></i><span class="align-middle d-inline-block" >LDAP Mock for Development</span></h3>
128+
<p class="card-text pb-4">Set up an LDAP server mock to mimic real server behavior, ensuring seamless integration and testing without needing an actual LDAP server.</p>
129+
<a href="docs/examples/tutorials/running-mokapi-in-a-ci-cd-pipeline" class="card-link position-absolute" style="bottom: 15px;">Get Started</a>
130+
</div>
131+
</div>
131132
</div>
132133
</div>
133134
</div>
134-
</div>
135135
</section>
136136

137137
<section>

‎webui/src/views/Smtp.vue‎

Lines changed: 39 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@ export default function() {
2626
})
2727
}
2828
`
29-
const description = `Test SMTP emails safely no risk of spamming mailboxes. Improve quality through visual testing using your favorite testing tool`
30-
useMeta('Fake SMTP server for testing | mokapi.io', description, "https://mokapi.io/smtp")
29+
const description = `Mock SMTP & IMAP servers with Mokapi. Safely test email sending & receiving without real delivery. Prevent accidental emails in testing environments.`
30+
useMeta('Mock SMTP & IMAP Server | mokapi.io', description, "https://mokapi.io/smtp")
3131
3232
onMounted(() => {
3333
dialog.value = new Modal('#imageDialog', {})
@@ -52,23 +52,23 @@ function hasTouchSupport() {
5252
<div class="container">
5353
<div class="row hero-title">
5454
<div class="col-12 col-lg-6">
55-
<h1>End-to-end email testing for a smooth email experience</h1>
55+
<h1>Mock SMTP & IMAP Servers Easily with Mokapi</h1>
5656
<div class="badge-list mb-3">
5757
<span class="badge">SMTP</span>
5858
</div>
59-
<p class="description">Test SMTP emails safely and no risk of spamming mailboxes</p>
59+
<p class="description">Easily send and receive mock emails without a real mail server. Perfect for testing email functionality in your application.</p>
6060
<p class="d-none d-md-block">
6161
<router-link :to="{ path: '/docs/guides' }">
62-
<button type="button" class="btn btn-outline-primary">Guides</button>
62+
<button type="button" class="btn btn-outline-primary">Get Started</button>
6363
</router-link>
6464
<router-link :to="{ path: '/docs/examples' }">
65-
<button type="button" class="btn btn-outline-primary">Examples</button>
65+
<button type="button" class="btn btn-outline-primary">Try Now</button>
6666
</router-link>
6767
</p>
6868
</div>
69-
<div class="col-12 col-lg-6 justify-content-center">
70-
<a href="#maildialog" data-bs-toggle="modal" data-bs-target="#maildialog">
71-
<img src="/mail.png" />
69+
<div class="col-12 col-lg-5 justify-content-center">
70+
<a href="#dialog" data-bs-toggle="modal" data-bs-target="#dialog">
71+
<img src="/logo.svg" alt="Mokapi API Mock Tool" class="mx-auto d-block" />
7272
</a>
7373
</div>
7474
<div class="col-12 d-block d-md-none">
@@ -84,38 +84,47 @@ function hasTouchSupport() {
8484
</div>
8585
</div>
8686
</section>
87+
8788
<section>
8889
<div class="container">
89-
<h2>Everything you need for your scenario</h2>
90-
<div class="card-group">
91-
<div class="card">
92-
<div class="card-body">
93-
<h3 class="card-title">Fake SMTP server</h3>
94-
Simulate sending emails for different scenarios
90+
<h2>Why Choose Mokapi for SMTP/IMAP?</h2>
91+
<div class="row row-cols-1 row-cols-md-2 g-4">
92+
<div class="col">
93+
<div class="card h-100 position-relative">
94+
<div class="card-body">
95+
<h3 class="card-title align-middle"><i class="bi bi-envelope me-2 align-middle d-inline-block icon" style="font-size:24px"></i><span class="align-middle d-inline-block">Simulate Email Sending & Receiving</span></h3>
96+
<p class="card-text pb-4">Easily send and receive mock emails without a real mail server. Perfect for testing email functionality in your application.</p>
97+
</div>
9598
</div>
9699
</div>
97-
<div class="card">
98-
<div class="card-body">
99-
<h3 class="card-title">Email Preview</h3>
100-
Preview your emails in Mokapi's Dasboard.
100+
<div class="col">
101+
<div class="card h-100">
102+
<div class="card-body">
103+
<h3 class="card-title align-middle"><i class="bi bi-hdd-network me-2 align-middle d-inline-block icon" style="font-size:24px"></i><span class="align-middle d-inline-block">IMAP & SMTP Protocol Support</span></h3>
104+
<p class="card-text pb-4">Fully supports SMTP (sending) and IMAP (retrieving), making it compatible with email clients and testing tools.</p>
105+
</div>
101106
</div>
102107
</div>
103-
<div class="card">
104-
<div class="card-body">
105-
<h3 class="card-title">QA Automation</h3>
106-
Use your favorite testing tool to validate sent emails using
107-
Mokapi's Dashboard or API
108+
<div class="col">
109+
<div class="card h-100">
110+
<div class="card-body">
111+
<h3 class="card-title align-middle"><i class="bi bi-shield-lock me-2 align-middle d-inline-block icon" style="font-size:24px"></i><span class="align-middle d-inline-block">Prevent Accidental Email Sending</span></h3>
112+
<p class="card-text pb-4">nsure that no real emails are sent during testing. Safely simulate email delivery without the risk of reaching real users.</p>
113+
</div>
108114
</div>
109115
</div>
110-
<div class="card">
111-
<div class="card-body">
112-
<h3 class="card-title">Rules & Mokapi Script</h3>
113-
Define rules to allow or deny emails, intercept or forward SMTP mails
116+
<div class="col">
117+
<div class="card h-100">
118+
<div class="card-body">
119+
<h3 class="card-title align-middle"><i class="bi bi-search me-2 align-middle d-inline-block icon" style="font-size:24px"></i><span class="align-middle d-inline-block">Debug & Inspect Emails in Real-Time</span></h3>
120+
<p class="card-text pb-4">View email logs, headers, and body content directly in Mokapi’s Dashboard. Ideal for debugging email templates and authentication flows.</p>
121+
</div>
114122
</div>
115123
</div>
116124
</div>
117125
</div>
118126
</section>
127+
119128
<section>
120129
<div class="container">
121130
<div class="row">
@@ -144,12 +153,13 @@ function hasTouchSupport() {
144153
</div>
145154
</div>
146155
</section>
156+
147157
<section>
148158
<div class="container">
149159
<div class="row">
150160
<div class="col-12">
151161
<h2>Powerful dashboard for your fake email server</h2>
152-
<img src="/smtp.png" style="width:100%" />
162+
<img src="/dashboard-smtp.png" style="width:100%" />
153163
</div>
154164
</div>
155165
</div>

0 commit comments

Comments
 (0)