mirror of
https://github.com/vernu/textbee.git
synced 2026-02-20 07:34:00 -05:00
Merge pull request #72 from vernu/dev
add quick start and use-cases pages
This commit is contained in:
Israel Abebe
147
api/src/mail/templates/inactive-new-user-day-10.hbs
Normal file
147
api/src/mail/templates/inactive-new-user-day-10.hbs
Normal file
@@ -0,0 +1,147 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf-8' />
|
||||
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
|
||||
<title>How to Get the Most from textbee.dev</title>
|
||||
<style>
|
||||
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
line-height: 1.6; color: #333; margin: 0; padding: 0; background-color:
|
||||
#f7f9fc; } .container { max-width: 600px; margin: 0 auto; padding: 20px; }
|
||||
.header { text-align: center; padding: 20px 0; } .logo { max-width: 150px;
|
||||
} .content { background-color: #ffffff; padding: 35px; border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.05); } .button { display:
|
||||
inline-block; background-color: #4A90E2; color: white; text-decoration:
|
||||
none; padding: 12px 28px; border-radius: 4px; font-weight: 600; margin:
|
||||
25px 0; transition: background-color 0.3s ease; } .button:hover {
|
||||
background-color: #3A80D2; } .footer { text-align: center; font-size:
|
||||
12px; color: #777; margin-top: 30px; } .use-case-container { border: 1px
|
||||
solid #e0e6ed; border-radius: 8px; margin: 25px 0; overflow: hidden; }
|
||||
.use-case-header { background-color: #f0f7ff; padding: 15px 20px;
|
||||
border-bottom: 1px solid #e0e6ed; } .use-case-header h3 { margin: 0;
|
||||
color: #4A90E2; } .use-case-body { padding: 20px; } .code-block {
|
||||
background-color: #f5f7f9; padding: 12px; border-radius: 4px; font-family:
|
||||
monospace; font-size: 14px; margin: 10px 0; overflow-x: auto; }
|
||||
.help-offer { background-color: #f6fbff; border-left: 4px solid #4A90E2;
|
||||
padding: 20px; margin: 30px 0; } .social-links { margin-top: 20px; }
|
||||
.social-links a { display: inline-block; margin: 0 10px; color: #4A90E2;
|
||||
text-decoration: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class='container'>
|
||||
<div class='header'>
|
||||
<!-- Logo could be added here -->
|
||||
</div>
|
||||
|
||||
<div class='content'>
|
||||
<h2>Hello {{name}},</h2>
|
||||
|
||||
<p>We noticed you haven't started using textbee.dev yet. We'd love to
|
||||
help you get started!</p>
|
||||
|
||||
<p>Many of our users find these specific use cases particularly
|
||||
valuable:</p>
|
||||
|
||||
<div class='use-case-container'>
|
||||
<div class='use-case-header'>
|
||||
<h3>Example: Order Notification System</h3>
|
||||
</div>
|
||||
<div class='use-case-body'>
|
||||
<p>Let's say you run an e-commerce site and want to send order
|
||||
updates via SMS:</p>
|
||||
|
||||
<div class='code-block'>
|
||||
// Send notification when order status changes<br />
|
||||
const response = await
|
||||
axios.post('https://api.textbee.dev/api/v1/gateway/{DEVICE_ID}/send-sms',
|
||||
{<br />
|
||||
recipients: ['+1234567890'],<br />
|
||||
message: 'Your order #12345 has been shipped! Track at
|
||||
example.com/track/12345'<br />
|
||||
});
|
||||
</div>
|
||||
|
||||
<p>This simple integration can significantly improve customer
|
||||
satisfaction!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='use-case-container'>
|
||||
<div class='use-case-header'>
|
||||
<h3>Example: Two-Factor Authentication</h3>
|
||||
</div>
|
||||
<div class='use-case-body'>
|
||||
<p>Enhance your application security with SMS verification codes:</p>
|
||||
|
||||
<div class='code-block'>
|
||||
// Generate a random 6-digit code<br />
|
||||
const verificationCode = Math.floor(100000 + Math.random() *
|
||||
900000);<br /><br />
|
||||
// Send it via SMS<br />
|
||||
await
|
||||
axios.post('https://api.textbee.dev/api/v1/gateway/{DEVICE_ID}/send-sms',
|
||||
{<br />
|
||||
recipients: ['+1234567890'],<br />
|
||||
message: `Your verification code is:
|
||||
${verificationCode}`<br />
|
||||
});
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p style="text-align: center; margin-top: 20px;">
|
||||
<a href="https://textbee.dev/use-cases" style="color: #4A90E2; text-decoration: underline;">
|
||||
Explore more use cases →
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<div class='help-offer'>
|
||||
<h3>Have questions?</h3>
|
||||
<p>Feel free to reply to this email, I'll be happy to help you get
|
||||
started.</p>
|
||||
</div>
|
||||
|
||||
<p>If you prefer to explore on your own, here's how to get started:</p>
|
||||
|
||||
<ol>
|
||||
<li><strong>Download our Android app</strong>
|
||||
from
|
||||
<a href='https://dl.textbee.dev'>dl.textbee.dev</a></li>
|
||||
<li><strong>Log in to your dashboard</strong>
|
||||
at
|
||||
<a href='https://textbee.dev/dashboard'>textbee.dev/dashboard</a>
|
||||
and generate a QR code</li>
|
||||
<li><strong>Scan the QR code</strong>
|
||||
with the app to connect your device</li>
|
||||
</ol>
|
||||
|
||||
<p style="text-align: center; margin: 20px 0;">
|
||||
<a href="https://textbee.dev/docs/quick-start" style="color: #4A90E2; text-decoration: underline;">
|
||||
View our Quick Start Guide →
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<div style='text-align: center;'>
|
||||
<a href='https://textbee.dev/dashboard' class='button'>Access Your
|
||||
Dashboard</a>
|
||||
</div>
|
||||
|
||||
<p>If you have any questions or need help with setup, please don't
|
||||
hesitate to reach out. We're here to ensure you get the most out of
|
||||
textbee.dev.</p>
|
||||
|
||||
<p>Best regards,<br />The textbee.dev Team</p>
|
||||
|
||||
<div class='social-links'>
|
||||
<a href='https://discord.gg/d7vyfBpWbQ'>Join our Discord Community</a>
|
||||
|
|
||||
<a href='https://github.com/vernu/textbee'>Star us on GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='footer'>
|
||||
<p>© 2025 textbee.dev. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,85 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf-8' />
|
||||
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
|
||||
<title>Get Started with textbee.dev</title>
|
||||
<style>
|
||||
body { font-family: Arial, sans-serif; line-height: 1.6; color: #333;
|
||||
margin: 0; padding: 0; } .container { max-width: 600px; margin: 0 auto;
|
||||
padding: 20px; } .header { text-align: center; padding: 20px 0; } .logo {
|
||||
max-width: 150px; } .content { background-color: #f9f9f9; padding: 30px;
|
||||
border-radius: 5px; } .button { display: inline-block; background-color:
|
||||
#4A90E2; color: white; text-decoration: none; padding: 12px 24px;
|
||||
border-radius: 4px; font-weight: bold; margin: 20px 0; } .footer {
|
||||
text-align: center; font-size: 12px; color: #777; margin-top: 30px; }
|
||||
.steps { margin: 20px 0; } .step { margin-bottom: 15px; } .step-number {
|
||||
display: inline-block; width: 25px; height: 25px; background-color:
|
||||
#4A90E2; color: white; border-radius: 50%; text-align: center;
|
||||
line-height: 25px; margin-right: 10px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class='container'>
|
||||
<div class='header'>
|
||||
</div>
|
||||
|
||||
<div class='content'>
|
||||
<h2>Hello {{name}},</h2>
|
||||
|
||||
<p>We noticed it's been 3 days since you signed up for textbee.dev, but
|
||||
you haven't registered any devices yet.</p>
|
||||
|
||||
<p>We'd love to help you get the most out of our platform! With
|
||||
textbee.dev, you can:</p>
|
||||
<ul>
|
||||
<li>Send and receive SMS messages from your dashboard or API</li>
|
||||
<li>Receive SMS notifications with webhooks</li>
|
||||
<li>Integrate SMS functionality into your applications</li>
|
||||
<li>And much more!</li>
|
||||
</ul>
|
||||
|
||||
<p>Getting started is quick and easy:</p>
|
||||
|
||||
<div class='steps'>
|
||||
<div class='step'>
|
||||
<span class='step-number'>1</span>
|
||||
Install the textbee.dev android app on your device
|
||||
</div>
|
||||
<div class='step'>
|
||||
<span class='step-number'>2</span>
|
||||
Grant the necessary permissions
|
||||
</div>
|
||||
<div class='step'>
|
||||
<span class='step-number'>3</span>
|
||||
Login to your
|
||||
<a href='{{registerDeviceUrl}}'>dashboard</a>
|
||||
and generate a QR code
|
||||
</div>
|
||||
<div class='step'>
|
||||
<span class='step-number'>4</span>
|
||||
Scan the QR code with the app to register your device
|
||||
</div>
|
||||
<div class='step'>
|
||||
<span class='step-number'>5</span>
|
||||
Start sending and receiving SMS!
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style='text-align: center;'>
|
||||
<a href='{{registerDeviceUrl}}' class='button'>Register Your Device
|
||||
Now</a>
|
||||
</div>
|
||||
|
||||
<p>Is there anything we can help you with? If you're experiencing any
|
||||
issues or have questions, our support team is ready to assist at
|
||||
<a href='mailto:support@textbee.dev'>support@textbee.dev</a>.</p>
|
||||
|
||||
<p>Best regards,<br />The textbee.dev Team</p>
|
||||
</div>
|
||||
|
||||
<div class='footer'>
|
||||
<p>© 2025 textbee.dev. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -2,81 +2,166 @@
|
||||
<head>
|
||||
<meta charset='utf-8' />
|
||||
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
|
||||
<title>Get Started with textbee.dev</title>
|
||||
<title>Getting Started with textbee.dev</title>
|
||||
<style>
|
||||
body { font-family: Arial, sans-serif; line-height: 1.6; color: #333;
|
||||
margin: 0; padding: 0; } .container { max-width: 600px; margin: 0 auto;
|
||||
padding: 20px; } .header { text-align: center; padding: 20px 0; } .logo {
|
||||
max-width: 150px; } .content { background-color: #f9f9f9; padding: 30px;
|
||||
border-radius: 5px; } .button { display: inline-block; background-color:
|
||||
#4A90E2; color: white; text-decoration: none; padding: 12px 24px;
|
||||
border-radius: 4px; font-weight: bold; margin: 20px 0; } .footer {
|
||||
text-align: center; font-size: 12px; color: #777; margin-top: 30px; }
|
||||
.steps { margin: 20px 0; } .step { margin-bottom: 15px; } .step-number {
|
||||
display: inline-block; width: 25px; height: 25px; background-color:
|
||||
#4A90E2; color: white; border-radius: 50%; text-align: center;
|
||||
line-height: 25px; margin-right: 10px; }
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #f7f9fc;
|
||||
}
|
||||
.container {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
.header {
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
}
|
||||
.logo {
|
||||
max-width: 150px;
|
||||
}
|
||||
.content {
|
||||
background-color: #ffffff;
|
||||
padding: 35px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
|
||||
}
|
||||
.button {
|
||||
display: inline-block;
|
||||
background-color: #4A90E2;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
padding: 12px 28px;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
margin: 25px 0;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
.button:hover {
|
||||
background-color: #3A80D2;
|
||||
}
|
||||
.footer {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #777;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.value-prop {
|
||||
background-color: #f0f7ff;
|
||||
padding: 20px;
|
||||
border-radius: 6px;
|
||||
margin: 25px 0;
|
||||
}
|
||||
.value-prop h3 {
|
||||
color: #4A90E2;
|
||||
margin-top: 0;
|
||||
}
|
||||
.help-section {
|
||||
margin: 30px 0;
|
||||
padding: 20px;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.help-section h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
.use-case {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.use-case-icon {
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-color: #4A90E2;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
margin-right: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.social-links {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.social-links a {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
color: #4A90E2;
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class='container'>
|
||||
<div class='header'>
|
||||
<!-- Logo could be added here -->
|
||||
</div>
|
||||
|
||||
<div class='content'>
|
||||
<h2>Hello {{name}},</h2>
|
||||
|
||||
<p>Thank you for signing up for textbee.dev! We noticed you haven't
|
||||
registered any devices yet.</p>
|
||||
<p>Thank you for creating your textbee.dev account! We're excited to have you with us.</p>
|
||||
|
||||
<p>With textbee.dev, you can:</p>
|
||||
<ul>
|
||||
<li>Send and receive SMS messages from your dashboard or API</li>
|
||||
<li>Receive SMS notifications with webhooks</li>
|
||||
<li>Integrate SMS functionality into your applications</li>
|
||||
<li>And much more!</li>
|
||||
</ul>
|
||||
|
||||
<p>To get started, you'll need to register your first device:</p>
|
||||
|
||||
<div class='steps'>
|
||||
<div class='step'>
|
||||
<span class='step-number'>1</span>
|
||||
Install the textbee.dev android app on your device
|
||||
<div class="value-prop">
|
||||
<h3>What can you do with textbee.dev?</h3>
|
||||
<p>Our users are leveraging textbee.dev to:</p>
|
||||
|
||||
<div class="use-case">
|
||||
<div class="use-case-icon">1</div>
|
||||
<strong>Send notifications and alerts</strong> - Keep customers informed about orders, appointments, and more
|
||||
</div>
|
||||
<div class='step'>
|
||||
<span class='step-number'>2</span>
|
||||
Grant the necessary permissions
|
||||
|
||||
<div class="use-case">
|
||||
<div class="use-case-icon">2</div>
|
||||
<strong>Implement 2FA with SMS verification</strong> - Add an extra layer of security to your applications
|
||||
</div>
|
||||
<div class='step'>
|
||||
<span class='step-number'>3</span>
|
||||
Login to your <a href='{{registerDeviceUrl}}'>dashboard</a> and generate a QR code
|
||||
</div>
|
||||
<div class='step'>
|
||||
<span class='step-number'>4</span>
|
||||
Scan the QR code with the app to register your device
|
||||
</div>
|
||||
<div class='step'>
|
||||
<span class='step-number'>5</span>
|
||||
Start sending and receiving SMS!
|
||||
|
||||
<div class="use-case">
|
||||
<div class="use-case-icon">3</div>
|
||||
<strong>Build interactive SMS workflows</strong> - Create engaging experiences for your users
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>Getting started with textbee.dev is straightforward:</p>
|
||||
|
||||
<ol>
|
||||
<li><strong>Install the Android app</strong> - Our app connects securely to your phone's SMS capabilities</li>
|
||||
<li><strong>Register your device</strong> - A simple process using a QR code from your dashboard</li>
|
||||
<li><strong>Start sending and receiving messages</strong> - Through our intuitive dashboard or API</li>
|
||||
</ol>
|
||||
|
||||
<div style='text-align: center;'>
|
||||
<a href='{{registerDeviceUrl}}' class='button'>Register Your Device
|
||||
Now</a>
|
||||
<a href='https://textbee.dev/dashboard' class='button'>Visit Your Dashboard</a>
|
||||
</div>
|
||||
|
||||
<p>If you have any questions or need assistance, please don't hesitate
|
||||
to contact our support team at
|
||||
<a href='mailto:support@textbee.dev'>support@textbee.dev</a>.</p>
|
||||
<div class="help-section">
|
||||
<h3>Need help getting started?</h3>
|
||||
<p>We've prepared resources to make your setup experience smooth:</p>
|
||||
<ul>
|
||||
<li><a href="https://textbee.dev/quickstart">Quick Start Guide</a> - Step-by-step instructions</li>
|
||||
<li><a href="https://api.textbee.dev">API Documentation</a> - For developers</li>
|
||||
<li><a href="https://textbee.dev/use-cases">Use Cases & Examples</a> - See what's possible</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<p>If you have questions or run into any issues, I'm here to help. Just reply to this email or contact our support team at <a href='mailto:support@textbee.dev'>support@textbee.dev</a>.</p>
|
||||
|
||||
<p>Looking forward to seeing what you'll build with textbee.dev!</p>
|
||||
|
||||
<p>Best regards,<br />The textbee.dev Team</p>
|
||||
|
||||
<div class="social-links">
|
||||
<a href="https://discord.gg/d7vyfBpWbQ">Join our Discord Community</a> |
|
||||
<a href="https://github.com/vernu/textbee">Star us on GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='footer'>
|
||||
<p>© 2025 textbee.dev. All rights reserved.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@@ -2,128 +2,218 @@
|
||||
<head>
|
||||
<meta charset='utf-8' />
|
||||
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
|
||||
<title>Upgrade to Pro - textbee.dev</title>
|
||||
<title>Unlock More Capabilities with textbee.dev Pro</title>
|
||||
<style>
|
||||
body { font-family: Arial, sans-serif; line-height: 1.6; color: #333;
|
||||
margin: 0; padding: 0; } .container { max-width: 600px; margin: 0 auto;
|
||||
padding: 20px; } .header { text-align: center; padding: 20px 0; } .logo {
|
||||
max-width: 150px; } .content { background-color: #f9f9f9; padding: 30px;
|
||||
border-radius: 5px; } .button { display: inline-block; background-color:
|
||||
#4A90E2; color: white; text-decoration: none; padding: 12px 24px;
|
||||
border-radius: 4px; font-weight: bold; margin: 20px 0; } .footer {
|
||||
text-align: center; font-size: 12px; color: #777; margin-top: 30px; }
|
||||
.feature { margin-bottom: 15px; display: flex; align-items: center; }
|
||||
.feature-icon { display: inline-block; width: 20px; height: 20px;
|
||||
background-color: #4A90E2; color: white; border-radius: 50%; text-align:
|
||||
center; line-height: 20px; margin-right: 10px; font-weight: bold; }
|
||||
.comparison { width: 100%; border-collapse: collapse; margin: 20px 0; }
|
||||
.comparison th, .comparison td { padding: 10px; text-align: center;
|
||||
border-bottom: 1px solid #ddd; } .comparison th { background-color:
|
||||
#f2f2f2; } .highlight { background-color: #e6f2ff; }
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #f7f9fc;
|
||||
}
|
||||
.container {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
.header {
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
}
|
||||
.logo {
|
||||
max-width: 150px;
|
||||
}
|
||||
.content {
|
||||
background-color: #ffffff;
|
||||
padding: 35px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
|
||||
}
|
||||
.button {
|
||||
display: inline-block;
|
||||
background-color: #4A90E2;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
padding: 12px 28px;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
margin: 25px 0;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
.button:hover {
|
||||
background-color: #3A80D2;
|
||||
}
|
||||
.secondary-button {
|
||||
display: inline-block;
|
||||
background-color: #ffffff;
|
||||
color: #4A90E2;
|
||||
border: 1px solid #4A90E2;
|
||||
text-decoration: none;
|
||||
padding: 11px 24px;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
margin: 25px 10px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
.secondary-button:hover {
|
||||
background-color: #f0f7ff;
|
||||
}
|
||||
.footer {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #777;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.testimonial {
|
||||
border-left: 4px solid #4A90E2;
|
||||
padding: 15px 20px;
|
||||
margin: 25px 0;
|
||||
background-color: #f8fbff;
|
||||
font-style: italic;
|
||||
}
|
||||
.testimonial-author {
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.pro-feature {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin: 15px 0;
|
||||
}
|
||||
.feature-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-color: #4A90E2;
|
||||
border-radius: 50%;
|
||||
color: white;
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
margin-right: 15px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.feature-content {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.feature-content h4 {
|
||||
margin: 0 0 5px 0;
|
||||
}
|
||||
.feature-content p {
|
||||
margin: 0;
|
||||
color: #555;
|
||||
}
|
||||
.pricing-container {
|
||||
background-color: #f0f7ff;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin: 25px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.pricing-option {
|
||||
display: inline-block;
|
||||
background-color: white;
|
||||
border-radius: 6px;
|
||||
padding: 20px;
|
||||
margin: 10px;
|
||||
width: 150px;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
|
||||
}
|
||||
.pricing-discount {
|
||||
color: #e63946;
|
||||
font-weight: bold;
|
||||
}
|
||||
.social-links {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.social-links a {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
color: #4A90E2;
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class='container'>
|
||||
<div class='header'>
|
||||
<!-- Logo could be added here -->
|
||||
</div>
|
||||
|
||||
<div class='content'>
|
||||
<h2>Hello {{name}},</h2>
|
||||
|
||||
<p>Thank you for using textbee.dev! We hope you're enjoying our service
|
||||
so far.</p>
|
||||
<p>Thank you for using textbee.dev! We're excited to see that you've been using our platform with {{deviceCount}} connected device{{#if deviceCount > 1}}s{{/if}}.</p>
|
||||
|
||||
<p>We wanted to let you know that you're currently on our
|
||||
<strong>Free Plan</strong>, which provides basic functionality. To
|
||||
unlock the full potential of textbee.dev, consider upgrading to our
|
||||
<strong>Pro Plan</strong>.</p>
|
||||
<p>Many of our users have found that upgrading to Pro helps them scale their SMS capabilities more effectively as they grow. Here's what you can unlock:</p>
|
||||
|
||||
<p><strong>Special Offer Just For You:</strong>
|
||||
We're extending a
|
||||
<span style='color: #e63946; font-weight: bold;'>30% discount</span>
|
||||
on all Pro plans exclusively for our most active users like you! This
|
||||
offer is only available for a limited time.</p>
|
||||
<div class="pro-feature">
|
||||
<div class="feature-icon">✓</div>
|
||||
<div class="feature-content">
|
||||
<h4>Unlimited Daily Messages</h4>
|
||||
<p>Remove the 50-message daily limit and scale your SMS communications as needed</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pro-feature">
|
||||
<div class="feature-icon">✓</div>
|
||||
<div class="feature-content">
|
||||
<h4>Connect Multiple Devices</h4>
|
||||
<p>
|
||||
Connect multiple devices to your account to increase your SMS sending capacity.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pro-feature">
|
||||
<div class="feature-icon">✓</div>
|
||||
<div class="feature-content">
|
||||
<h4>Priority Support</h4>
|
||||
<p>Get faster responses and dedicated assistance for your integration questions</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="testimonial">
|
||||
"textbee.dev Pro has been game-changing for our delivery notifications. We've seen a 28% increase in customer satisfaction since implementing automated SMS updates."
|
||||
<div class="testimonial-author">- Sarah K., E-commerce Business Owner</div>
|
||||
</div>
|
||||
|
||||
<h3>Plan Comparison:</h3>
|
||||
<p>As a valued user, we're offering you a special <span class="pricing-discount">30% discount</span> if you upgrade in the next 7 days:</p>
|
||||
|
||||
<table class='comparison'>
|
||||
<tr>
|
||||
<th>Feature</th>
|
||||
<th>Free Plan</th>
|
||||
<th class='highlight'>Pro Plan</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Daily Message Limit</td>
|
||||
<td>50</td>
|
||||
<td class='highlight'>Unlimited</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Monthly Recipient Limit</td>
|
||||
<td>500</td>
|
||||
<td class='highlight'>5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Device Limit</td>
|
||||
<td>1</td>
|
||||
<td class='highlight'>Unlimited</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bulk SMS Recipients</td>
|
||||
<td>50</td>
|
||||
<td class='highlight'>Unlimited</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Support</td>
|
||||
<td>Basic</td>
|
||||
<td class='highlight'>Priority</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
|
||||
<div
|
||||
style='background-color: #e6f2ff; padding: 15px; border-radius: 5px; margin-bottom: 20px; text-align: center;'
|
||||
>
|
||||
<h3 style='margin-top: 0; margin-bottom: 10px; color: #4A90E2;'>Pro
|
||||
Plan Pricing</h3>
|
||||
<div style='display: flex; justify-content: center; gap: 15px;'>
|
||||
<div
|
||||
style='padding: 10px; background-color: white; border-radius: 5px; flex: 1; max-width: 130px;'
|
||||
>
|
||||
<h4 style='margin: 0 0 5px 0;'>Monthly</h4>
|
||||
<p style='font-size: 18px; font-weight: bold; margin: 5px 0;'><s
|
||||
>$9.99</s>
|
||||
<span style='color: #e63946;'>$6.99</span></p>
|
||||
<p style='font-size: 11px; color: #666; margin: 0;'>30% off -
|
||||
limited time</p>
|
||||
</div>
|
||||
<div
|
||||
style='padding: 10px; background-color: white; border-radius: 5px; flex: 1; max-width: 130px;'
|
||||
>
|
||||
<h4 style='margin: 0 0 5px 0;'>Annual</h4>
|
||||
<p style='font-size: 18px; font-weight: bold; margin: 5px 0;'><s
|
||||
>$99.99</s>
|
||||
<span style='color: #e63946;'>$69.99</span></p>
|
||||
<p style='font-size: 11px; color: #666; margin: 0;'>30% off -
|
||||
limited time</p>
|
||||
</div>
|
||||
<div class="pricing-container">
|
||||
<div class="pricing-option">
|
||||
<h4>Monthly</h4>
|
||||
<p style="text-decoration: line-through; color: #777; margin: 5px 0;">$9.99/mo</p>
|
||||
<p style="font-size: 18px; font-weight: bold; margin: 5px 0;">$6.99/mo</p>
|
||||
<p style="font-size: 12px; color: #666;">30% savings</p>
|
||||
</div>
|
||||
|
||||
<div class="pricing-option">
|
||||
<h4>Annual</h4>
|
||||
<p style="text-decoration: line-through; color: #777; margin: 5px 0;">$99.99/yr</p>
|
||||
<p style="font-size: 18px; font-weight: bold; margin: 5px 0;">$69.99/yr</p>
|
||||
<p style="font-size: 12px; color: #666;">Save 42% vs monthly</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style='text-align: center;'>
|
||||
<a href='{{upgradeUrl}}' class='button'>Upgrade to Pro Now</a>
|
||||
<p><small>Hurry! This 30% discount offer is only available for a
|
||||
limited time.</small></p>
|
||||
<a href='https://textbee.dev/checkout/pro' class='button'>Upgrade to Pro</a>
|
||||
<a href='https://textbee.dev/#pricing' class='secondary-button'>Learn More</a>
|
||||
</div>
|
||||
|
||||
<p>If you have any questions about our plans or need assistance, please
|
||||
feel free to contact us at
|
||||
<a href='mailto:support@textbee.dev'>support@textbee.dev</a>.</p>
|
||||
<p>Not ready to upgrade? That's completely fine! Your free plan will continue to work as usual. If you have any questions about the Pro features or need help with your current setup, I'm happy to assist.</p>
|
||||
|
||||
<p>Best regards,<br />The textbee.dev Team</p>
|
||||
|
||||
<div class="social-links">
|
||||
<a href="https://discord.gg/d7vyfBpWbQ">Join our Discord Community</a> |
|
||||
<a href="https://github.com/vernu/textbee">Star us on GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='footer'>
|
||||
<p>© 2025 textbee.dev.</p>
|
||||
<p>© 2025 textbee.dev. All rights reserved.</p>
|
||||
<p style="font-size: 10px; color: #999;">You're receiving this email because you have an active textbee.dev account. To update your preferences, visit your <a href="https://textbee.dev/account/notifications">account settings</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@@ -1,126 +1,207 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf-8' />
|
||||
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
|
||||
<title>Welcome to textbee.dev</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #333333;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
.container {
|
||||
background-color: #ffffff;
|
||||
border-radius: 8px;
|
||||
padding: 30px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.divider {
|
||||
border-top: 1px solid #e0e0e0;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.community-section {
|
||||
text-align: center;
|
||||
}
|
||||
.tips-section {
|
||||
margin: 20px 0;
|
||||
}
|
||||
.tips-section ol {
|
||||
padding-left: 20px;
|
||||
}
|
||||
.signature {
|
||||
margin-top: 20px;
|
||||
}
|
||||
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
line-height: 1.6; color: #333; margin: 0; padding: 0; background-color:
|
||||
#f7f9fc; } .container { max-width: 600px; margin: 0 auto; padding: 20px; }
|
||||
.header { text-align: center; padding: 20px 0; } .logo { max-width: 150px;
|
||||
} .content { background-color: #ffffff; padding: 35px; border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.05); } .button { display:
|
||||
inline-block; background-color: #4A90E2; color: white; text-decoration:
|
||||
none; padding: 12px 28px; border-radius: 4px; font-weight: 600; margin:
|
||||
25px 0; transition: background-color 0.3s ease; } .button:hover {
|
||||
background-color: #3A80D2; } .footer { text-align: center; font-size:
|
||||
12px; color: #777; margin-top: 30px; } .welcome-banner { background-color:
|
||||
#4A90E2; color: white; padding: 30px; text-align: center; border-radius:
|
||||
8px 8px 0 0; margin: -35px -35px 30px -35px; } .welcome-banner h1 {
|
||||
margin: 0; font-size: 28px; letter-spacing: 0.5px; } .welcome-banner p {
|
||||
margin: 10px 0 0 0; opacity: 0.9; } .divider { border-top: 1px solid
|
||||
#e0e0e0; margin: 25px 0; } .quick-links { display: flex; flex-wrap: wrap;
|
||||
justify-content: space-between; margin: 25px 0; } .quick-link {
|
||||
background-color: #f8f9fa; border: 1px solid #e6e8eb; border-radius: 6px;
|
||||
padding: 15px; margin-bottom: 15px; width: calc(50% - 45px);
|
||||
text-decoration: none; color: #333; transition: all 0.2s ease; }
|
||||
.quick-link:hover { background-color: #f0f7ff; border-color: #4A90E2;
|
||||
transform: translateY(-2px); } .quick-link h3 { margin: 0 0 5px 0; color:
|
||||
#4A90E2; font-size: 16px; } .quick-link p { margin: 0; font-size: 14px;
|
||||
color: #666; } .steps-container { background-color: #f8f9fa;
|
||||
border-radius: 8px; padding: 20px; margin: 25px 0; } .steps-container h2 {
|
||||
margin-top: 0; color: #333; font-size: 18px; } .step { display: flex;
|
||||
margin-bottom: 20px; } .step:last-child { margin-bottom: 0; } .step-number
|
||||
{ background-color: #4A90E2; color: white; width: 28px; height: 28px;
|
||||
border-radius: 50%; display: flex; align-items: center; justify-content:
|
||||
center; font-weight: bold; margin-right: 15px; flex-shrink: 0; }
|
||||
.step-content { flex-grow: 1; } .step-content h3 { margin: 0 0 5px 0;
|
||||
font-size: 16px; } .step-content p { margin: 0; color: #555; font-size:
|
||||
14px; } .personal-note { background-color: #f6fbff; border-left: 4px solid
|
||||
#4A90E2; padding: 20px; margin: 30px 0; } .signature { margin-top: 30px;
|
||||
display: flex; align-items: center; } .signature-text { margin-left: 15px;
|
||||
} .signature-text h3 { margin: 0 0 5px 0; } .signature-text p { margin: 0;
|
||||
color: #666; font-style: italic; } .signature-img { width: 60px; height:
|
||||
60px; border-radius: 50%; object-fit: cover; } .social-links { margin-top:
|
||||
20px; display: flex; justify-content: center; flex-wrap: wrap; }
|
||||
.social-links a { display: inline-flex; align-items: center; margin: 0
|
||||
10px 10px 10px; color: #4A90E2; text-decoration: none; padding: 8px 15px;
|
||||
border-radius: 4px; background-color: #f0f7ff; transition: all 0.2s ease;
|
||||
} .social-links a:hover { background-color: #e0ebfa; } .social-links img {
|
||||
width: 18px; height: 18px; margin-right: 8px; } .use-case { margin: 20px
|
||||
0; padding: 15px; background-color: #f9f9f9; border-radius: 6px; }
|
||||
.use-case h3 { margin-top: 0; color: #4A90E2; } @media (max-width: 550px)
|
||||
{ .quick-link { width: 100%; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class='container'>
|
||||
<div class='header'>
|
||||
<h1>Welcome to TextBee!</h1>
|
||||
<!-- Logo could be added here -->
|
||||
</div>
|
||||
|
||||
<p>Hi {{name}},</p>
|
||||
<div class='content'>
|
||||
<div class='welcome-banner'>
|
||||
<h1>Welcome to textbee.dev!</h1>
|
||||
<p>Your gateway to powerful SMS integration</p>
|
||||
</div>
|
||||
|
||||
<p>It's Vernu here, creator of textbee.dev. I built this platform to help you
|
||||
with all your messaging needs - whether it's sending OTPs,
|
||||
notifications, or creating automated messaging workflows for your
|
||||
business.</p>
|
||||
<h2>Hi {{name}},</h2>
|
||||
|
||||
<div class='tips-section'>
|
||||
<h3>Here are a few tips to get you started:</h3>
|
||||
<ol>
|
||||
<li><a href='https://github.com/vernu/textbee'>Explore our
|
||||
Documentation</a>
|
||||
- Learn how to integrate TextBee with your existing systems</li>
|
||||
<li><a href='https://dl.textbee.dev'>Download the Mobile App</a></li>
|
||||
<li><a href='https://textbee.dev/dashboard'>Access your Dashboard</a></li>
|
||||
<li><a href='https://discord.gg/d7vyfBpWbQ'>Join our Discord Community</a></li>
|
||||
<li><a href='https://www.patreon.com/vernu'>Support Our Work</a></li>
|
||||
<li><a href='https://github.com/vernu/textbee'>Star our GitHub
|
||||
Repository</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
<p>Welcome to textbee.dev! This platform is designed to provide simple
|
||||
yet powerful SMS integration for developers and businesses of all
|
||||
sizes.</p>
|
||||
|
||||
<div class='divider'></div>
|
||||
<div class='personal-note'>
|
||||
<p>Thank you for choosing textbee.dev. We're excited to support your
|
||||
projects, whether you're building authentication systems for your
|
||||
customers, notifications, or interactive workflows!</p>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<strong>P.S.</strong>
|
||||
I'd love to hear from you! Why did you choose TextBee? Do you have any
|
||||
feedback or questions?<br />
|
||||
Feel free to reach out to our support team at
|
||||
<a href='mailto:contact@textbee.dev'>contact@textbee.dev</a>.<br />
|
||||
We read and respond to all emails as quickly as possible.
|
||||
</p>
|
||||
<h2>What You Can Build with textbee.dev</h2>
|
||||
|
||||
<div class='signature'>
|
||||
<p>
|
||||
Cheers,<br />
|
||||
<strong>Vernu</strong><br />
|
||||
Creator, textbee.dev
|
||||
<div class='use-case'>
|
||||
<h3>User Authentication</h3>
|
||||
<p>Implement secure two-factor authentication with SMS verification
|
||||
codes to protect user accounts and sensitive data.</p>
|
||||
</div>
|
||||
|
||||
<div class='use-case'>
|
||||
<h3>Customer Notifications</h3>
|
||||
<p>Send automated order updates, appointment reminders, delivery
|
||||
status changes, and other important alerts directly to your
|
||||
customers' phones.</p>
|
||||
</div>
|
||||
|
||||
<div class='use-case'>
|
||||
<h3>Interactive Workflows</h3>
|
||||
<p>Create conversational experiences where users can reply to messages
|
||||
to complete tasks, answer surveys, or trigger automated responses.</p>
|
||||
</div>
|
||||
|
||||
<p style='text-align: center; margin-top: 15px;'>
|
||||
<a
|
||||
href='https://textbee.dev/use-cases'
|
||||
style='color: #4A90E2; text-decoration: underline;'
|
||||
>Explore more use cases →</a>
|
||||
</p>
|
||||
|
||||
<h2>Get Started in Minutes</h2>
|
||||
|
||||
<div class='steps-container'>
|
||||
<h2>Quick Setup Guide</h2>
|
||||
|
||||
<div class='step'>
|
||||
<div class='step-number'>1</div>
|
||||
<div class='step-content'>
|
||||
<h3>Download the App</h3>
|
||||
<p>Install our Android app from
|
||||
<a href='https://dl.textbee.dev'>dl.textbee.dev</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='step'>
|
||||
<div class='step-number'>2</div>
|
||||
<div class='step-content'>
|
||||
<h3>Connect Your Device</h3>
|
||||
<p>Visit your dashboard, generate a QR code, and scan it with the
|
||||
app</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='step'>
|
||||
<div class='step-number'>3</div>
|
||||
<div class='step-content'>
|
||||
<h3>Start Sending</h3>
|
||||
<p>Send SMS messages via our dashboard or integrate with our API</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style='text-align: center;'>
|
||||
<a href='https://textbee.dev/dashboard' class='button'>Go to Your
|
||||
Dashboard</a>
|
||||
</div>
|
||||
|
||||
<div class='divider'></div>
|
||||
|
||||
<h2>Helpful Resources</h2>
|
||||
|
||||
<div class='quick-links'>
|
||||
<a href='https://textbee.dev/quickstart' class='quick-link'>
|
||||
<h3>Quick Start Guide</h3>
|
||||
<p>Step-by-step setup instructions</p>
|
||||
</a>
|
||||
|
||||
<a href='https://api.textbee.dev' class='quick-link'>
|
||||
<h3>API Documentation</h3>
|
||||
<p>Integrate SMS into your applications</p>
|
||||
</a>
|
||||
|
||||
<a href='https://github.com/vernu/textbee' class='quick-link'>
|
||||
<h3>GitHub Repository</h3>
|
||||
<p>Explore the code and contribute</p>
|
||||
</a>
|
||||
|
||||
<a href='https://discord.gg/d7vyfBpWbQ' class='quick-link'>
|
||||
<h3>Discord Community</h3>
|
||||
<p>Get help and share ideas</p>
|
||||
</a>
|
||||
|
||||
<a href='https://textbee.dev/use-cases' class='quick-link'>
|
||||
<h3>Code Examples</h3>
|
||||
<p>Ready-to-use integration samples</p>
|
||||
</a>
|
||||
|
||||
<a href='https://textbee.dev/#faqs' class='quick-link'>
|
||||
<h3>FAQ</h3>
|
||||
<p>Answers to common questions</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class='divider'></div>
|
||||
|
||||
<p>Have questions or feedback? I'd love to hear from you! Feel free to
|
||||
reply to this email or contact our support team at
|
||||
<a href='mailto:support@textbee.dev'>support@textbee.dev</a>.</p>
|
||||
|
||||
<div class='signature'>
|
||||
<img
|
||||
src='https://ui-avatars.com/api/?name=Vernu&background=4A90E2&color=fff'
|
||||
class='signature-img'
|
||||
alt='Vernu'
|
||||
/>
|
||||
<div class='signature-text'>
|
||||
<h3>Vernu</h3>
|
||||
<p>Founder, textbee.dev</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='divider'></div>
|
||||
|
||||
<div class='community-section'>
|
||||
<p style='font-size: 14px; margin-bottom: 15px;'>Join our community!</p>
|
||||
<a
|
||||
href='https://discord.gg/d7vyfBpWbQ'
|
||||
style='display: inline-block; margin: 0 10px; color: #7289DA; text-decoration: none;'
|
||||
>
|
||||
<img
|
||||
src='https://cdn.prod.website-files.com/6257adef93867e50d84d30e2/636e0a6918e57475a843f59f_icon_clyde_black_RGB.svg'
|
||||
alt='Discord'
|
||||
style='width: 20px; vertical-align: middle;'
|
||||
/>
|
||||
Join Discord
|
||||
</a>
|
||||
<a
|
||||
href='https://github.com/vernu/textbee'
|
||||
style='display: inline-block; margin: 0 10px; color: #333; text-decoration: none;'
|
||||
>
|
||||
<img
|
||||
src='https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png'
|
||||
alt='GitHub'
|
||||
style='width: 20px; vertical-align: middle;'
|
||||
/>
|
||||
Star on GitHub
|
||||
</a>
|
||||
<a
|
||||
href='https://patreon.com/vernu'
|
||||
style='display: inline-block; margin: 0 10px; color: #FF424D; text-decoration: none;'
|
||||
>
|
||||
<img
|
||||
src='https://c5.patreon.com/external/logo/downloads_logomark_color_on_white.png'
|
||||
alt='Patreon'
|
||||
style='width: 20px; vertical-align: middle;'
|
||||
/>
|
||||
Support on Patreon
|
||||
</a>
|
||||
<div class='footer'>
|
||||
<p>© 2025 textbee.dev. All rights reserved.</p>
|
||||
<p>If you don't want to receive these emails, you can
|
||||
<a href='https://textbee.dev/account/notifications'>update your
|
||||
preferences</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@@ -75,43 +75,42 @@ export class UsersService {
|
||||
@Cron('0 12 * * *') // Every day at 12 PM
|
||||
async sendEmailToInactiveNewUsers() {
|
||||
try {
|
||||
// Get users who signed up between 24-48 hours ago (1-2 days ago)
|
||||
const twoDaysAgo = new Date(Date.now() - 48 * 60 * 60 * 1000)
|
||||
const oneDayAgo = new Date(Date.now() - 24 * 60 * 60 * 1000)
|
||||
// Get users who signed up between 3-4 days ago (not 1-2 days)
|
||||
const fourDaysAgo = new Date(Date.now() - 4 * 24 * 60 * 60 * 1000)
|
||||
const threeDaysAgo = new Date(Date.now() - 3 * 24 * 60 * 60 * 1000)
|
||||
|
||||
const newUsers = await this.userModel.find({
|
||||
createdAt: {
|
||||
$gte: twoDaysAgo,
|
||||
$lt: oneDayAgo,
|
||||
$gte: fourDaysAgo,
|
||||
$lt: threeDaysAgo,
|
||||
},
|
||||
})
|
||||
|
||||
const emailPromises = newUsers.map(async (user) => {
|
||||
for (const user of newUsers) {
|
||||
try {
|
||||
// Check if user has any devices registered
|
||||
// Check if user has any devices registered or has sent/received any SMS
|
||||
const devices = await this.deviceModel.find({ user: user._id })
|
||||
|
||||
if (devices.length === 0) {
|
||||
if (devices.length === 0 || devices.map(device=>device.sentSMSCount + device.receivedSMSCount).reduce((a,b)=>a+b,0) == 0) {
|
||||
// User hasn't registered any device, send email
|
||||
await this.mailService.sendEmailFromTemplate({
|
||||
to: user.email,
|
||||
subject:
|
||||
'Get Started with textbee.dev - Register Your First Device',
|
||||
'Getting Started with textbee.dev - How Can We Help?',
|
||||
template: 'inactive-new-user',
|
||||
context: {
|
||||
name: user.name,
|
||||
registerDeviceUrl: `${process.env.FRONTEND_URL}/dashboard`,
|
||||
},
|
||||
})
|
||||
|
||||
console.log(`Sent inactive new user email to ${user.email}`)
|
||||
}
|
||||
// Wait 200ms before processing the next user
|
||||
await new Promise((resolve) => setTimeout(resolve, 200))
|
||||
} catch (error) {
|
||||
console.error(`Error processing email for user ${user.email}:`, error)
|
||||
}
|
||||
})
|
||||
|
||||
await Promise.allSettled(emailPromises)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error sending emails to inactive new users:', error)
|
||||
}
|
||||
@@ -120,18 +119,18 @@ export class UsersService {
|
||||
@Cron('0 13 * * *') // Every day at 1 PM
|
||||
async sendEmailToFreeUsers() {
|
||||
try {
|
||||
// Get users who signed up between 3-4 days ago
|
||||
const threeDaysAgo = new Date(Date.now() - 3 * 24 * 60 * 60 * 1000)
|
||||
const fourDaysAgo = new Date(Date.now() - 4 * 24 * 60 * 60 * 1000)
|
||||
// Get users who signed up between 13-14 days ago
|
||||
const fourteenDaysAgo = new Date(Date.now() - 14 * 24 * 60 * 60 * 1000)
|
||||
const thirteenDaysAgo = new Date(Date.now() - 13 * 24 * 60 * 60 * 1000)
|
||||
|
||||
const usersToEmail = await this.userModel.find({
|
||||
createdAt: {
|
||||
$gte: fourDaysAgo,
|
||||
$lt: threeDaysAgo,
|
||||
$gte: fourteenDaysAgo,
|
||||
$lt: thirteenDaysAgo,
|
||||
},
|
||||
})
|
||||
|
||||
const emailPromises = usersToEmail.map(async (user) => {
|
||||
for (const user of usersToEmail) {
|
||||
try {
|
||||
const subscription = await this.billingService.getActiveSubscription(
|
||||
user._id.toString(),
|
||||
@@ -140,11 +139,12 @@ export class UsersService {
|
||||
if (subscription?.plan?.name === 'free') {
|
||||
const devices = await this.deviceModel.find({ user: user._id })
|
||||
|
||||
if (devices.length === 0) {
|
||||
if (devices.length === 0 || devices.map(device=>device.sentSMSCount + device.receivedSMSCount).reduce((a,b)=>a+b,0) == 0) {
|
||||
// Only send this if they haven't set up any devices after 10-14 days
|
||||
await this.mailService.sendEmailFromTemplate({
|
||||
to: user.email,
|
||||
subject: `${user.name?.split(' ')[0]}, Your textbee.dev account is waiting for you!`,
|
||||
template: 'inactive-new-user-day-3',
|
||||
subject: `${user.name?.split(' ')[0]}, we'd love to help you get started with textbee.dev`,
|
||||
template: 'inactive-new-user-day-10',
|
||||
context: {
|
||||
name: user.name,
|
||||
registerDeviceUrl: `${process.env.FRONTEND_URL}/dashboard`,
|
||||
@@ -153,24 +153,27 @@ export class UsersService {
|
||||
|
||||
console.log(`Sent inactive new user email to ${user.email}`)
|
||||
} else {
|
||||
// Only send upgrade email to active users who have at least one device
|
||||
await this.mailService.sendEmailFromTemplate({
|
||||
to: user.email,
|
||||
subject: `${user.name?.split(' ')[0]}, Upgrade to Pro with a 30% Discount - textbee.dev`,
|
||||
subject: `${user.name?.split(' ')[0]}, unlock more capabilities with textbee.dev Pro`,
|
||||
template: 'upgrade-to-pro',
|
||||
context: {
|
||||
name: user.name,
|
||||
upgradeUrl: `${process.env.FRONTEND_URL}/checkout/pro`,
|
||||
deviceCount: devices.length,
|
||||
},
|
||||
})
|
||||
console.log(`Sent upgrade to pro email to ${user.email}`)
|
||||
}
|
||||
}
|
||||
|
||||
// Wait 200ms before processing the next user
|
||||
await new Promise((resolve) => setTimeout(resolve, 200))
|
||||
} catch (error) {
|
||||
console.error(`Error processing email for user ${user.email}:`, error)
|
||||
}
|
||||
})
|
||||
|
||||
await Promise.allSettled(emailPromises)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error sending emails to free plan users:', error)
|
||||
}
|
||||
|
||||
@@ -74,7 +74,7 @@ export default function LoginForm() {
|
||||
<Input
|
||||
placeholder='m@example.com'
|
||||
{...field}
|
||||
className='bg-white'
|
||||
className='dark:text-white dark:bg-gray-800'
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
@@ -88,7 +88,11 @@ export default function LoginForm() {
|
||||
<FormItem>
|
||||
<FormLabel>Password</FormLabel>
|
||||
<FormControl>
|
||||
<Input type='password' {...field} className='bg-white' />
|
||||
<Input
|
||||
type='password'
|
||||
{...field}
|
||||
className='dark:text-white dark:bg-gray-800'
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
|
||||
@@ -88,7 +88,7 @@ export default function RegisterForm() {
|
||||
<FormItem>
|
||||
<FormLabel>Full Name</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder='John Doe' {...field} />
|
||||
<Input placeholder='John Doe' {...field} className='dark:text-white dark:bg-gray-800' />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
@@ -101,7 +101,7 @@ export default function RegisterForm() {
|
||||
<FormItem>
|
||||
<FormLabel>Email</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder='m@example.com' {...field} />
|
||||
<Input placeholder='m@example.com' {...field} className='dark:text-white dark:bg-gray-800' />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
@@ -114,7 +114,7 @@ export default function RegisterForm() {
|
||||
<FormItem>
|
||||
<FormLabel>Password</FormLabel>
|
||||
<FormControl>
|
||||
<Input type='password' {...field} />
|
||||
<Input type='password' {...field} className='dark:text-white dark:bg-gray-800' />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
@@ -127,7 +127,7 @@ export default function RegisterForm() {
|
||||
<FormItem>
|
||||
<FormLabel>Phone (optional)</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder='+1 (555) 000-0000' {...field} />
|
||||
<Input placeholder='+1 (555) 000-0000' {...field} className='dark:text-white dark:bg-gray-800' />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
|
||||
581
web/app/(landing-page)/quickstart/page.tsx
Normal file
581
web/app/(landing-page)/quickstart/page.tsx
Normal file
@@ -0,0 +1,581 @@
|
||||
import { Metadata } from 'next'
|
||||
import Link from 'next/link'
|
||||
import {
|
||||
CheckCircle2,
|
||||
Smartphone,
|
||||
MessageSquare,
|
||||
Settings,
|
||||
ArrowRightCircle,
|
||||
Zap,
|
||||
ExternalLink,
|
||||
BookOpen,
|
||||
Star,
|
||||
SparkleIcon,
|
||||
} from 'lucide-react'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'TextBee Quickstart - Send SMS from Your Android Phone | SMS Gateway',
|
||||
description:
|
||||
'Get started with TextBee SMS Gateway in minutes. Learn how to send and receive SMS messages using your Android phone as an SMS gateway for your applications.',
|
||||
keywords:
|
||||
'SMS gateway, Android SMS, API SMS, TextBee quickstart, SMS integration, two-way SMS',
|
||||
}
|
||||
|
||||
export default function QuickstartPage() {
|
||||
return (
|
||||
<div className='container max-w-5xl mx-auto py-12 px-4 md:px-8'>
|
||||
<div className='mb-12 bg-gradient-to-r from-primary/10 to-transparent rounded-lg p-6 md:p-8 border border-primary/20 text-center mx-auto'>
|
||||
<div className='inline-flex items-center gap-2 px-3 py-1 bg-primary/10 rounded-full text-primary text-sm font-medium mb-4'>
|
||||
<Zap className='h-3.5 w-3.5' />
|
||||
<span>5-minute setup</span>
|
||||
</div>
|
||||
|
||||
<h1 className='text-3xl md:text-4xl font-bold mb-4 tracking-tight text-center'>
|
||||
TextBee SMS Gateway Quickstart
|
||||
</h1>
|
||||
|
||||
<p className='text-lg text-muted-foreground mb-4 mx-auto max-w-2xl text-center'>
|
||||
Transform your Android phone into a powerful SMS gateway in just 5
|
||||
minutes. Send and receive text messages programmatically through your
|
||||
applications with TextBee.
|
||||
</p>
|
||||
|
||||
<p className='text-sm text-muted-foreground mb-6 mx-auto max-w-2xl text-center'>
|
||||
Our platform enables businesses and developers to implement SMS
|
||||
functionality without expensive telecom infrastructure. Perfect for
|
||||
notifications, authentication, alerts, and customer engagement.
|
||||
</p>
|
||||
|
||||
<div className='flex flex-wrap gap-4 justify-center'>
|
||||
<a
|
||||
href='https://dl.textbee.dev'
|
||||
className='inline-flex items-center gap-2 px-5 py-2.5 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors'
|
||||
>
|
||||
<Smartphone className='h-4 w-4' />
|
||||
<span>Download App</span>
|
||||
</a>
|
||||
<a
|
||||
href='#pro-plan'
|
||||
className='inline-flex items-center gap-2 px-5 py-2.5 border border-primary/30 text-primary rounded-md hover:bg-primary/10 transition-colors'
|
||||
>
|
||||
<Star className='h-4 w-4' />
|
||||
<span>View Pro Plan</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='hidden md:block relative z-0 mb-12 mx-auto'>
|
||||
<div className='absolute top-4 left-4 right-4 h-0.5 bg-muted'></div>
|
||||
|
||||
<div className='flex justify-between items-start px-4 relative z-10'>
|
||||
{[1, 2, 3, 4, 5].map((step) => (
|
||||
<div key={step} className='flex flex-col items-center'>
|
||||
<a
|
||||
href={`#step-${step}`}
|
||||
className='w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-medium hover:bg-primary/20 transition-colors mb-2'
|
||||
>
|
||||
{step}
|
||||
</a>
|
||||
<span className='text-xs text-muted-foreground hidden sm:block'>
|
||||
Step {step}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mb-10 text-center mx-auto'>
|
||||
<h2 className='text-2xl font-semibold mb-3 text-center'>
|
||||
The Simplest Way to Add SMS to Your Applications
|
||||
</h2>
|
||||
<p className='text-muted-foreground mb-4 mx-auto max-w-3xl text-center'>
|
||||
TextBee turns any Android phone into a reliable SMS gateway, allowing
|
||||
you to send and receive text messages programmatically. Whether you're
|
||||
building a notification system, implementing two-factor
|
||||
authentication, or creating marketing campaigns, TextBee provides a
|
||||
cost-effective solution without the need for complex telecom
|
||||
integrations.
|
||||
</p>
|
||||
<p className='text-muted-foreground mx-auto max-w-3xl text-center'>
|
||||
Follow this step-by-step guide to set up TextBee and start sending
|
||||
your first SMS messages in minutes. Our straightforward process
|
||||
requires minimal technical knowledge and works with any application or
|
||||
service that can make HTTP requests.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className='space-y-12 mx-auto'>
|
||||
<div id='step-1' className='pb-8 group'>
|
||||
<div className='flex items-center gap-3 mb-6 justify-center'>
|
||||
<div className='w-9 h-9 rounded-full bg-primary/10 flex items-center justify-center text-primary font-medium shadow-sm'>
|
||||
1
|
||||
</div>
|
||||
<h2 className='text-2xl font-semibold'>Account Setup</h2>
|
||||
</div>
|
||||
|
||||
<div className='space-y-4'>
|
||||
<p className='text-muted-foreground mb-4 text-center mx-auto max-w-3xl'>
|
||||
Begin by creating your TextBee account and installing the Android
|
||||
app. This setup process takes less than 2 minutes and only
|
||||
requires basic permissions to send and receive SMS messages.
|
||||
</p>
|
||||
|
||||
<div className='grid grid-cols-1 md:grid-cols-3 gap-4 max-w-4xl mx-auto'>
|
||||
<div className='bg-card p-4 rounded-lg border hover:shadow-sm transition-shadow'>
|
||||
<div className='flex justify-between mb-3'>
|
||||
<span className='text-xl font-bold text-primary/80'>1</span>
|
||||
<CheckCircle2 className='h-5 w-5 text-muted-foreground/50' />
|
||||
</div>
|
||||
<h3 className='font-medium mb-2'>Create account</h3>
|
||||
<p className='text-sm text-muted-foreground'>
|
||||
Register at{' '}
|
||||
<a
|
||||
href='https://textbee.dev'
|
||||
className='text-primary hover:underline'
|
||||
>
|
||||
textbee.dev
|
||||
</a>{' '}
|
||||
with your email and password
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className='bg-card p-4 rounded-lg border hover:shadow-sm transition-shadow'>
|
||||
<div className='flex justify-between mb-3'>
|
||||
<span className='text-xl font-bold text-primary/80'>2</span>
|
||||
<Smartphone className='h-5 w-5 text-muted-foreground/50' />
|
||||
</div>
|
||||
<h3 className='font-medium mb-2'>Install app</h3>
|
||||
<p className='text-sm text-muted-foreground'>
|
||||
Download from{' '}
|
||||
<a
|
||||
href='https://dl.textbee.dev'
|
||||
className='text-primary hover:underline'
|
||||
>
|
||||
dl.textbee.dev
|
||||
</a>{' '}
|
||||
or Google Play Store
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className='bg-card p-4 rounded-lg border hover:shadow-sm transition-shadow'>
|
||||
<div className='flex justify-between mb-3'>
|
||||
<span className='text-xl font-bold text-primary/80'>3</span>
|
||||
<Settings className='h-5 w-5 text-muted-foreground/50' />
|
||||
</div>
|
||||
<h3 className='font-medium mb-2'>Grant permissions</h3>
|
||||
<p className='text-sm text-muted-foreground'>
|
||||
Allow SMS access in the app to enable message sending and
|
||||
receiving
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id='step-2' className='pb-8 border-t pt-4 group'>
|
||||
<div className='flex items-center gap-3 mb-6 justify-center'>
|
||||
<div className='w-9 h-9 rounded-full bg-primary/10 flex items-center justify-center text-primary font-medium shadow-sm'>
|
||||
2
|
||||
</div>
|
||||
<h2 className='text-2xl font-semibold'>Connect Your Device</h2>
|
||||
</div>
|
||||
|
||||
<div className='space-y-4'>
|
||||
<p className='text-muted-foreground mb-4 text-center mx-auto max-w-3xl'>
|
||||
Link your Android phone to your TextBee account to establish the
|
||||
SMS gateway connection. This secure connection allows your
|
||||
applications to send messages through your phone.
|
||||
</p>
|
||||
|
||||
<div className='grid md:grid-cols-2 gap-6 max-w-4xl mx-auto'>
|
||||
<div className='bg-card p-5 rounded-lg border hover:border-primary/30 transition-colors'>
|
||||
<div className='flex items-center justify-between mb-4'>
|
||||
<h3 className='font-medium'>QR Code Method</h3>
|
||||
<span className='px-2 py-0.5 bg-primary/10 rounded text-xs text-primary'>
|
||||
Recommended
|
||||
</span>
|
||||
</div>
|
||||
<ol className='list-decimal ml-5 text-sm space-y-2'>
|
||||
<li>Go to TextBee Dashboard</li>
|
||||
<li>Click "Register Device"</li>
|
||||
<li>Scan QR with app</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div className='bg-card p-5 rounded-lg border'>
|
||||
<h3 className='font-medium mb-4'>Manual Method</h3>
|
||||
<ol className='list-decimal ml-5 text-sm space-y-2'>
|
||||
<li>Generate API key from dashboard</li>
|
||||
<li>Open TextBee app</li>
|
||||
<li>Enter the API key</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id='step-3' className='pb-8 border-t pt-4 group'>
|
||||
<div className='flex items-center gap-3 mb-6 justify-center'>
|
||||
<div className='w-9 h-9 rounded-full bg-primary/10 flex items-center justify-center text-primary font-medium shadow-sm'>
|
||||
3
|
||||
</div>
|
||||
<h2 className='text-2xl font-semibold'>Send Your First SMS</h2>
|
||||
</div>
|
||||
|
||||
<div className='space-y-4'>
|
||||
<p className='text-muted-foreground mb-4 text-center mx-auto max-w-3xl'>
|
||||
Start sending SMS messages through TextBee using either our
|
||||
intuitive dashboard or direct API integration. Both methods
|
||||
provide reliable message delivery with delivery status tracking.
|
||||
</p>
|
||||
|
||||
<div className='grid md:grid-cols-2 gap-6 max-w-4xl mx-auto'>
|
||||
<div className='bg-card p-5 rounded-lg border'>
|
||||
<h3 className='font-medium mb-3 text-primary flex items-center gap-2'>
|
||||
Dashboard Method
|
||||
</h3>
|
||||
<div className='bg-muted/50 p-4 rounded-md'>
|
||||
<ol className='list-decimal ml-5 text-sm space-y-2'>
|
||||
<li>Go to "Send SMS" section</li>
|
||||
<li>Enter recipient(s)</li>
|
||||
<li>Type your message</li>
|
||||
<li>Click "Send"</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='bg-card p-5 rounded-lg border'>
|
||||
<h3 className='font-medium mb-3 text-primary flex items-center gap-2'>
|
||||
API Method
|
||||
</h3>
|
||||
<pre className='overflow-x-auto rounded-md bg-slate-950 p-3 text-xs'>
|
||||
<code className='font-mono text-white'>
|
||||
{`fetch("https://api.textbee.dev/api/v1/gateway/devices/{ID}/send-sms", {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'x-api-key': API_KEY,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
recipients: ['+1234567890'],
|
||||
message: 'Hello!'
|
||||
})
|
||||
})`}
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className='text-sm text-muted-foreground text-center mx-auto max-w-3xl'>
|
||||
With TextBee, your messages are sent directly through your Android
|
||||
device, using your existing mobile plan. This keeps costs low
|
||||
while maintaining high deliverability rates across all carriers.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id='step-4' className='pb-8 border-t pt-4 group'>
|
||||
<div className='flex items-center gap-3 mb-6 justify-center'>
|
||||
<div className='w-9 h-9 rounded-full bg-primary/10 flex items-center justify-center text-primary font-medium shadow-sm'>
|
||||
4
|
||||
</div>
|
||||
<h2 className='text-2xl font-semibold'>Receive SMS Messages</h2>
|
||||
</div>
|
||||
|
||||
<div className='space-y-4'>
|
||||
<p className='text-muted-foreground mb-4 text-center mx-auto max-w-3xl'>
|
||||
Enable two-way communication by configuring TextBee to forward
|
||||
incoming SMS messages to your application. This is essential for
|
||||
interactive workflows, verification codes, and customer
|
||||
engagement.
|
||||
</p>
|
||||
|
||||
<div className='grid md:grid-cols-2 gap-6 max-w-4xl mx-auto'>
|
||||
<div className='bg-card p-5 rounded-lg border'>
|
||||
<h3 className='font-medium mb-3 text-primary'>Enable in App</h3>
|
||||
<div className='bg-muted/50 p-4 rounded-md'>
|
||||
<ol className='list-decimal ml-5 text-sm space-y-2'>
|
||||
<li>Open the TextBee App</li>
|
||||
<li>Go to Settings</li>
|
||||
<li>Toggle "Receive SMS" on</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='bg-card p-5 rounded-lg border'>
|
||||
<h3 className='font-medium mb-3 text-primary'>
|
||||
Retrieve via API
|
||||
</h3>
|
||||
<pre className='overflow-x-auto rounded-md bg-slate-950 p-3 text-xs'>
|
||||
<code className='font-mono text-white'>
|
||||
{`fetch("https://api.textbee.dev/api/v1/gateway/devices/{ID}/get-received-sms", {
|
||||
headers: { 'x-api-key': API_KEY }
|
||||
})`}
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className='text-sm text-muted-foreground text-center mx-auto max-w-3xl'>
|
||||
Received messages are securely forwarded to TextBee's servers and
|
||||
can be accessed via the dashboard, API, or automatically sent to
|
||||
your webhook endpoints for real-time processing.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id='step-5' className='pb-6 border-t pt-4 group'>
|
||||
<div className='flex items-center gap-3 mb-6 justify-center'>
|
||||
<div className='w-9 h-9 rounded-full bg-primary/10 flex items-center justify-center text-primary font-medium shadow-sm'>
|
||||
5
|
||||
</div>
|
||||
<h2 className='text-2xl font-semibold'>Advanced Features</h2>
|
||||
</div>
|
||||
|
||||
<div className='space-y-4'>
|
||||
<p className='text-muted-foreground mb-4 text-center mx-auto max-w-3xl'>
|
||||
Once you've mastered the basics, explore TextBee's advanced
|
||||
capabilities to enhance your SMS integration. These features help
|
||||
scale your messaging operations and automate complex workflows.
|
||||
</p>
|
||||
|
||||
<div className='grid sm:grid-cols-2 gap-3 mb-6 max-w-4xl mx-auto'>
|
||||
<div className='flex items-start gap-2 p-3 bg-card rounded-md border'>
|
||||
<div className='h-5 w-5 rounded-full bg-primary/10 flex items-center justify-center text-primary text-xs mt-0.5'>
|
||||
•
|
||||
</div>
|
||||
<div>
|
||||
<p className='font-medium'>Bulk SMS</p>
|
||||
<p className='text-xs text-muted-foreground'>
|
||||
Send to multiple recipients with a single API call for
|
||||
efficient message broadcasting
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex items-start gap-2 p-3 bg-card rounded-md border'>
|
||||
<div className='h-5 w-5 rounded-full bg-primary/10 flex items-center justify-center text-primary text-xs mt-0.5'>
|
||||
•
|
||||
</div>
|
||||
<div>
|
||||
<p className='font-medium'>Webhooks</p>
|
||||
<p className='text-xs text-muted-foreground'>
|
||||
Configure event-driven notifications for real-time updates
|
||||
on message status
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex items-start gap-2 p-3 bg-card rounded-md border'>
|
||||
<div className='h-5 w-5 rounded-full bg-primary/10 flex items-center justify-center text-primary text-xs mt-0.5'>
|
||||
•
|
||||
</div>
|
||||
<div>
|
||||
<p className='font-medium'>Multiple Devices</p>
|
||||
<p className='text-xs text-muted-foreground'>
|
||||
Connect several phones to increase throughput and add
|
||||
redundancy
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex items-start gap-2 p-3 bg-card rounded-md border'>
|
||||
<div className='h-5 w-5 rounded-full bg-primary/10 flex items-center justify-center text-primary text-xs mt-0.5'>
|
||||
•
|
||||
</div>
|
||||
<div>
|
||||
<p className='font-medium'>Self-hosting</p>
|
||||
<p className='text-xs text-muted-foreground'>
|
||||
Deploy TextBee on your own infrastructure for complete
|
||||
control
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='bg-gradient-to-r from-primary/10 to-transparent p-4 rounded-md border border-primary/20 max-w-4xl mx-auto'>
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='flex items-center gap-2'>
|
||||
<BookOpen className='h-4 w-4 text-primary' />
|
||||
<span className='font-medium'>Ready to explore more?</span>
|
||||
</div>
|
||||
<Link
|
||||
href='/use-cases'
|
||||
className='inline-flex items-center gap-1 px-3 py-1.5 rounded-md bg-primary/10 text-primary hover:bg-primary/20 transition-colors'
|
||||
>
|
||||
<span>Use Cases</span>
|
||||
<ArrowRightCircle className='h-3 w-3' />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id='pro-plan'
|
||||
className='my-16 bg-gradient-to-r from-primary/15 via-primary/10 to-transparent rounded-xl overflow-hidden border border-primary/20 shadow-sm max-w-4xl mx-auto'
|
||||
>
|
||||
<div className='p-1 bg-primary/20'></div>
|
||||
<div className='px-6 py-8 md:px-8 text-center'>
|
||||
<div className='flex items-center gap-2 mb-4 justify-center'>
|
||||
<SparkleIcon className='h-5 w-5 text-primary' />
|
||||
<h2 className='text-2xl font-bold'>TextBee Pro</h2>
|
||||
</div>
|
||||
|
||||
<p className='text-lg mb-4 mx-auto max-w-2xl'>
|
||||
Upgrade to TextBee Pro for enhanced features and priority support.
|
||||
</p>
|
||||
|
||||
<div className='grid md:grid-cols-2 gap-6 mb-8 max-w-3xl mx-auto text-left'>
|
||||
<div className='space-y-3'>
|
||||
<div className='flex items-start gap-2'>
|
||||
<CheckCircle2 className='h-5 w-5 text-primary shrink-0 mt-0.5' />
|
||||
<span>Unlimited devices and higher sending limits</span>
|
||||
</div>
|
||||
<div className='flex items-start gap-2'>
|
||||
<CheckCircle2 className='h-5 w-5 text-primary shrink-0 mt-0.5' />
|
||||
<span>Advanced analytics and delivery reporting</span>
|
||||
</div>
|
||||
<div className='flex items-start gap-2'>
|
||||
<CheckCircle2 className='h-5 w-5 text-primary shrink-0 mt-0.5' />
|
||||
<span>Message scheduling and template management</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='space-y-3'>
|
||||
<div className='flex items-start gap-2'>
|
||||
<CheckCircle2 className='h-5 w-5 text-primary shrink-0 mt-0.5' />
|
||||
<span>Priority support with faster response times</span>
|
||||
</div>
|
||||
<div className='flex items-start gap-2'>
|
||||
<CheckCircle2 className='h-5 w-5 text-primary shrink-0 mt-0.5' />
|
||||
<span>Custom webhooks for advanced integrations</span>
|
||||
</div>
|
||||
<div className='flex items-start gap-2'>
|
||||
<CheckCircle2 className='h-5 w-5 text-primary shrink-0 mt-0.5' />
|
||||
<span>White-labeled SMS for business applications</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex flex-col sm:flex-row sm:items-center gap-4 justify-center max-w-xl mx-auto'>
|
||||
<div className='sm:flex-1 text-center sm:text-left'>
|
||||
<div className='flex items-baseline gap-1 mb-1 justify-center sm:justify-start'>
|
||||
<span className='text-3xl font-bold'>$29</span>
|
||||
<span className='text-muted-foreground'>/month</span>
|
||||
</div>
|
||||
<p className='text-sm text-muted-foreground'>
|
||||
Cancel anytime. No long-term contracts.
|
||||
</p>
|
||||
</div>
|
||||
<a
|
||||
href='https://textbee.dev/pricing'
|
||||
className='px-6 py-3 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors font-medium text-center'
|
||||
>
|
||||
Upgrade to Pro
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mb-16 border-t pt-8 max-w-4xl mx-auto'>
|
||||
<h2 className='text-2xl font-semibold mb-4 text-center'>
|
||||
Why Choose TextBee SMS Gateway?
|
||||
</h2>
|
||||
<div className='grid md:grid-cols-2 gap-8'>
|
||||
<div>
|
||||
<h3 className='text-lg font-medium mb-2 text-center'>
|
||||
Cost-Effective SMS Solution
|
||||
</h3>
|
||||
<p className='text-muted-foreground text-sm mb-4 text-center'>
|
||||
TextBee eliminates the need for expensive SMS API services or
|
||||
telecom contracts. By using your existing phone and mobile plan,
|
||||
you can send SMS messages at standard rates without additional
|
||||
per-message fees from third-party providers.
|
||||
</p>
|
||||
|
||||
<h3 className='text-lg font-medium mb-2 text-center'>
|
||||
Easy Integration
|
||||
</h3>
|
||||
<p className='text-muted-foreground text-sm text-center'>
|
||||
Our RESTful API makes integration simple for developers using any
|
||||
programming language. TextBee works seamlessly with web
|
||||
applications, mobile apps, and backend services through standard
|
||||
HTTP requests.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className='text-lg font-medium mb-2 text-center'>
|
||||
Perfect For
|
||||
</h3>
|
||||
<ul className='space-y-2 text-sm text-muted-foreground'>
|
||||
<li className='flex items-start gap-2'>
|
||||
<CheckCircle2 className='h-4 w-4 text-primary shrink-0 mt-0.5' />
|
||||
<span>
|
||||
<span className='font-medium'>
|
||||
Two-factor authentication (2FA)
|
||||
</span>{' '}
|
||||
- Secure user accounts with SMS verification codes
|
||||
</span>
|
||||
</li>
|
||||
<li className='flex items-start gap-2'>
|
||||
<CheckCircle2 className='h-4 w-4 text-primary shrink-0 mt-0.5' />
|
||||
<span>
|
||||
<span className='font-medium'>Appointment reminders</span> -
|
||||
Reduce no-shows with automated SMS notifications
|
||||
</span>
|
||||
</li>
|
||||
<li className='flex items-start gap-2'>
|
||||
<CheckCircle2 className='h-4 w-4 text-primary shrink-0 mt-0.5' />
|
||||
<span>
|
||||
<span className='font-medium'>Order updates</span> - Keep
|
||||
customers informed about their purchases
|
||||
</span>
|
||||
</li>
|
||||
<li className='flex items-start gap-2'>
|
||||
<CheckCircle2 className='h-4 w-4 text-primary shrink-0 mt-0.5' />
|
||||
<span>
|
||||
<span className='font-medium'>Marketing campaigns</span> -
|
||||
Engage customers with promotional messages
|
||||
</span>
|
||||
</li>
|
||||
<li className='flex items-start gap-2'>
|
||||
<CheckCircle2 className='h-4 w-4 text-primary shrink-0 mt-0.5' />
|
||||
<span>
|
||||
<span className='font-medium'>Alerts and notifications</span>{' '}
|
||||
- Send time-sensitive information instantly
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-12 pt-6 border-t'>
|
||||
<div className='max-w-lg mx-auto bg-card rounded-lg border p-4 flex flex-col sm:flex-row sm:items-center justify-between gap-4 text-center sm:text-left'>
|
||||
<div className='flex flex-col items-center sm:items-start'>
|
||||
<p className='font-medium mb-1'>Need help?</p>
|
||||
<p className='text-xs text-muted-foreground'>
|
||||
Our support team is ready to assist you
|
||||
</p>
|
||||
</div>
|
||||
<div className='flex gap-3 justify-center'>
|
||||
<a
|
||||
href='mailto:contact@textbee.dev'
|
||||
className='inline-flex items-center gap-1 px-3 py-1.5 rounded-md border hover:bg-muted transition-colors text-sm'
|
||||
>
|
||||
<ExternalLink className='h-3.5 w-3.5' />
|
||||
<span>Email</span>
|
||||
</a>
|
||||
<a
|
||||
href='https://docs.textbee.dev'
|
||||
className='inline-flex items-center gap-1 px-3 py-1.5 rounded-md border hover:bg-muted transition-colors text-sm'
|
||||
>
|
||||
<BookOpen className='h-3.5 w-3.5' />
|
||||
<span>Docs</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
630
web/app/(landing-page)/use-cases/page.tsx
Normal file
630
web/app/(landing-page)/use-cases/page.tsx
Normal file
@@ -0,0 +1,630 @@
|
||||
import { Metadata } from 'next'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
import Link from 'next/link'
|
||||
import {
|
||||
ShieldCheck,
|
||||
ShoppingBag,
|
||||
Calendar,
|
||||
AlertTriangle,
|
||||
Megaphone,
|
||||
HeadsetIcon,
|
||||
ExternalLink,
|
||||
ArrowRight,
|
||||
} from 'lucide-react'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Use Cases | TextBee',
|
||||
description:
|
||||
'Explore various use cases and applications for TextBee SMS Gateway Platform',
|
||||
}
|
||||
|
||||
export default function UseCasesPage() {
|
||||
return (
|
||||
<>
|
||||
<div className='container max-w-7xl mx-auto py-10 px-4 md:px-12'>
|
||||
<div className='rounded-lg bg-gradient-to-r from-primary/20 via-primary/10 to-background p-8 mb-12 mx-auto'>
|
||||
<h1 className='scroll-m-20 text-4xl font-bold tracking-tight lg:text-5xl mb-4 text-center'>
|
||||
TextBee Use Cases
|
||||
</h1>
|
||||
<p className='text-xl leading-relaxed max-w-3xl mx-auto text-center'>
|
||||
Discover how businesses and developers leverage TextBee SMS Gateway
|
||||
for a wide variety of applications. Get inspired by these common use
|
||||
cases and implementations.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Card className='border-none shadow-none mx-auto'>
|
||||
<CardContent className='space-y-10 px-0'>
|
||||
<div className='grid gap-8 md:grid-cols-2 mx-auto'>
|
||||
<div className='rounded-xl border bg-card p-6 shadow-sm hover:shadow-md transition-shadow relative overflow-hidden'>
|
||||
<div className='absolute top-0 right-0 w-24 h-24 bg-primary/5 rounded-full -mt-8 -mr-8'></div>
|
||||
|
||||
<div className='flex items-center gap-4 mb-5'>
|
||||
<div className='w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center'>
|
||||
<ShieldCheck className='h-6 w-6 text-primary' />
|
||||
</div>
|
||||
<h2 className='scroll-m-20 text-2xl font-semibold tracking-tight'>
|
||||
Two-factor Authentication (2FA)
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<p className='leading-7 mb-5 text-muted-foreground'>
|
||||
Enhance your application's security by implementing SMS-based
|
||||
two-factor authentication. Add an extra layer of verification
|
||||
to protect user accounts.
|
||||
</p>
|
||||
|
||||
<div className='bg-muted p-4 rounded-lg mb-5'>
|
||||
<h3 className='font-medium text-base mb-2'>
|
||||
Implementation Steps:
|
||||
</h3>
|
||||
<ol className='ml-6 list-decimal space-y-1'>
|
||||
<li>Generate a random verification code for the user</li>
|
||||
<li>Send the code via SMS using TextBee API</li>
|
||||
<li>Verify the code entered by the user</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div className='relative'>
|
||||
<div className='flex items-center gap-1 text-xs text-muted-foreground mb-2'>
|
||||
<span className='px-2 py-0.5 bg-primary/10 rounded text-primary font-medium'>
|
||||
JavaScript
|
||||
</span>
|
||||
<span className='text-muted-foreground'>Example:</span>
|
||||
</div>
|
||||
<pre className='overflow-x-auto rounded-lg bg-slate-950 p-4 text-xs'>
|
||||
<code className='font-mono text-white'>
|
||||
{`// Send 2FA code
|
||||
const verificationCode = generateRandomCode();
|
||||
await axios.post(\`https://api.textbee.dev/api/v1/gateway/devices/\${DEVICE_ID}/send-sms\`, {
|
||||
recipients: [ user.phoneNumber ],
|
||||
message: \`Your verification code is: \${verificationCode}\`
|
||||
}, {
|
||||
headers: { 'x-api-key': API_KEY }
|
||||
});`}
|
||||
</code>
|
||||
</pre>
|
||||
<button className='absolute top-3 right-3 p-1.5 rounded-md bg-slate-800 hover:bg-slate-700 transition-colors'>
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width='14'
|
||||
height='14'
|
||||
viewBox='0 0 24 24'
|
||||
fill='none'
|
||||
stroke='currentColor'
|
||||
strokeWidth='2'
|
||||
strokeLinecap='round'
|
||||
strokeLinejoin='round'
|
||||
className='text-slate-300'
|
||||
>
|
||||
<rect width='14' height='14' x='8' y='8' rx='2' ry='2' />
|
||||
<path d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2' />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className='rounded-xl border bg-card p-6 shadow-sm hover:shadow-md transition-shadow relative overflow-hidden'>
|
||||
<div className='absolute top-0 right-0 w-24 h-24 bg-primary/5 rounded-full -mt-8 -mr-8'></div>
|
||||
|
||||
<div className='flex items-center gap-4 mb-5'>
|
||||
<div className='w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center'>
|
||||
<ShoppingBag className='h-6 w-6 text-primary' />
|
||||
</div>
|
||||
<h2 className='scroll-m-20 text-2xl font-semibold tracking-tight'>
|
||||
Order Notifications
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<p className='leading-7 mb-5 text-muted-foreground'>
|
||||
Keep customers informed about their orders with real-time SMS
|
||||
updates. Improve customer experience with timely notifications
|
||||
throughout the order lifecycle.
|
||||
</p>
|
||||
|
||||
<div className='grid grid-cols-2 gap-2 mb-5'>
|
||||
<div className='border rounded-lg p-3 bg-background'>
|
||||
<h3 className='text-sm font-medium mb-1'>
|
||||
Order Confirmation
|
||||
</h3>
|
||||
<p className='text-xs text-muted-foreground'>
|
||||
Send details after purchase
|
||||
</p>
|
||||
</div>
|
||||
<div className='border rounded-lg p-3 bg-background'>
|
||||
<h3 className='text-sm font-medium mb-1'>
|
||||
Shipping Updates
|
||||
</h3>
|
||||
<p className='text-xs text-muted-foreground'>
|
||||
Notify when order ships
|
||||
</p>
|
||||
</div>
|
||||
<div className='border rounded-lg p-3 bg-background'>
|
||||
<h3 className='text-sm font-medium mb-1'>
|
||||
Delivery Status
|
||||
</h3>
|
||||
<p className='text-xs text-muted-foreground'>
|
||||
Alert when delivered
|
||||
</p>
|
||||
</div>
|
||||
<div className='border rounded-lg p-3 bg-background'>
|
||||
<h3 className='text-sm font-medium mb-1'>Order Changes</h3>
|
||||
<p className='text-xs text-muted-foreground'>
|
||||
Inform of modifications
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='relative'>
|
||||
<div className='flex items-center gap-1 text-xs text-muted-foreground mb-2'>
|
||||
<span className='px-2 py-0.5 bg-primary/10 rounded text-primary font-medium'>
|
||||
JavaScript
|
||||
</span>
|
||||
<span className='text-muted-foreground'>Example:</span>
|
||||
</div>
|
||||
<pre className='overflow-x-auto rounded-lg bg-slate-950 p-4 text-xs'>
|
||||
<code className='font-mono text-white'>
|
||||
{`// Send order confirmation
|
||||
await axios.post(\`https://api.textbee.dev/api/v1/gateway/devices/\${DEVICE_ID}/send-sms\`, {
|
||||
recipients: [ customer.phoneNumber ],
|
||||
message: \`Order #\${orderNumber} confirmed! Expected delivery: \${deliveryDate}. Track at: \${trackingUrl}\`
|
||||
}, {
|
||||
headers: { 'x-api-key': API_KEY }
|
||||
});`}
|
||||
</code>
|
||||
</pre>
|
||||
<button className='absolute top-3 right-3 p-1.5 rounded-md bg-slate-800 hover:bg-slate-700 transition-colors'>
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width='14'
|
||||
height='14'
|
||||
viewBox='0 0 24 24'
|
||||
fill='none'
|
||||
stroke='currentColor'
|
||||
strokeWidth='2'
|
||||
strokeLinecap='round'
|
||||
strokeLinejoin='round'
|
||||
className='text-slate-300'
|
||||
>
|
||||
<rect width='14' height='14' x='8' y='8' rx='2' ry='2' />
|
||||
<path d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2' />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='rounded-xl border bg-card p-6 shadow-sm hover:shadow-md transition-shadow relative overflow-hidden'>
|
||||
<div className='absolute top-0 right-0 w-24 h-24 bg-primary/5 rounded-full -mt-8 -mr-8'></div>
|
||||
|
||||
<div className='flex items-center gap-4 mb-5'>
|
||||
<div className='w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center'>
|
||||
<Calendar className='h-6 w-6 text-primary' />
|
||||
</div>
|
||||
<h2 className='scroll-m-20 text-2xl font-semibold tracking-tight'>
|
||||
Appointment Reminders
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<p className='leading-7 mb-5 text-muted-foreground'>
|
||||
Reduce no-shows by sending automated appointment reminders to
|
||||
clients. Perfect for medical practices, salons, consultants,
|
||||
and service businesses.
|
||||
</p>
|
||||
|
||||
<div className='bg-gradient-to-r from-primary/10 to-background p-4 rounded-lg mb-5'>
|
||||
<h3 className='font-medium text-base mb-2'>Key Features:</h3>
|
||||
<ul className='ml-6 list-disc space-y-1'>
|
||||
<li>Scheduled reminders (24h, 1h before appointments)</li>
|
||||
<li>Interactive responses (reply to reschedule/cancel)</li>
|
||||
<li>Calendar integration</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className='relative'>
|
||||
<div className='flex items-center gap-1 text-xs text-muted-foreground mb-2'>
|
||||
<span className='px-2 py-0.5 bg-primary/10 rounded text-primary font-medium'>
|
||||
JavaScript
|
||||
</span>
|
||||
<span className='text-muted-foreground'>Example:</span>
|
||||
</div>
|
||||
<pre className='overflow-x-auto rounded-lg bg-slate-950 p-4 text-xs'>
|
||||
<code className='font-mono text-white'>
|
||||
{`// Schedule reminder job
|
||||
scheduler.scheduleJob(reminderTime, async () => {
|
||||
await axios.post(\`https://api.textbee.dev/api/v1/gateway/devices/\${DEVICE_ID}/send-sms\`, {
|
||||
recipients: [ appointment.phoneNumber ],
|
||||
message: \`Reminder: Your appointment is tomorrow at \${appointment.time}. Reply CONFIRM to confirm or RESCHEDULE to change.\`
|
||||
}, {
|
||||
headers: { 'x-api-key': API_KEY }
|
||||
});
|
||||
});`}
|
||||
</code>
|
||||
</pre>
|
||||
<button className='absolute top-3 right-3 p-1.5 rounded-md bg-slate-800 hover:bg-slate-700 transition-colors'>
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width='14'
|
||||
height='14'
|
||||
viewBox='0 0 24 24'
|
||||
fill='none'
|
||||
stroke='currentColor'
|
||||
strokeWidth='2'
|
||||
strokeLinecap='round'
|
||||
strokeLinejoin='round'
|
||||
className='text-slate-300'
|
||||
>
|
||||
<rect width='14' height='14' x='8' y='8' rx='2' ry='2' />
|
||||
<path d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2' />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='rounded-xl border bg-card p-6 shadow-sm hover:shadow-md transition-shadow relative overflow-hidden'>
|
||||
<div className='absolute top-0 right-0 w-24 h-24 bg-primary/5 rounded-full -mt-8 -mr-8'></div>
|
||||
|
||||
<div className='flex items-center gap-4 mb-5'>
|
||||
<div className='w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center'>
|
||||
<AlertTriangle className='h-6 w-6 text-primary' />
|
||||
</div>
|
||||
<h2 className='scroll-m-20 text-2xl font-semibold tracking-tight'>
|
||||
Emergency Alerts
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<p className='leading-7 mb-5 text-muted-foreground'>
|
||||
Send critical notifications and emergency alerts to large
|
||||
groups of people quickly. Perfect for natural disasters,
|
||||
emergencies, and critical business communications.
|
||||
</p>
|
||||
|
||||
<div className='bg-gradient-to-r from-primary/10 to-background p-4 rounded-lg mb-5'>
|
||||
<h3 className='font-medium text-base mb-2'>Applications:</h3>
|
||||
<ul className='ml-6 list-disc space-y-1'>
|
||||
<li>Weather emergencies</li>
|
||||
<li>Campus/school alerts</li>
|
||||
<li>IT system outages</li>
|
||||
<li>Critical business communications</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className='relative'>
|
||||
<div className='flex items-center gap-1 text-xs text-muted-foreground mb-2'>
|
||||
<span className='px-2 py-0.5 bg-primary/10 rounded text-primary font-medium'>
|
||||
JavaScript
|
||||
</span>
|
||||
<span className='text-muted-foreground'>Example:</span>
|
||||
</div>
|
||||
<pre className='overflow-x-auto rounded-lg bg-slate-950 p-4 text-xs'>
|
||||
<code className='font-mono text-white'>
|
||||
{`// Send bulk emergency alert
|
||||
const recipients = await getUserPhoneNumbers(affectedRegion);
|
||||
await axios.post(\`https://api.textbee.dev/api/v1/gateway/devices/\${DEVICE_ID}/send-bulk-sms\`, {
|
||||
messageTemplate: \`ALERT: \${emergencyMessage}. Stay safe.\`,
|
||||
messages: [{
|
||||
recipients: recipients,
|
||||
}]
|
||||
}, {
|
||||
headers: { 'x-api-key': API_KEY }
|
||||
});`}
|
||||
</code>
|
||||
</pre>
|
||||
<button className='absolute top-3 right-3 p-1.5 rounded-md bg-slate-800 hover:bg-slate-700 transition-colors'>
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width='14'
|
||||
height='14'
|
||||
viewBox='0 0 24 24'
|
||||
fill='none'
|
||||
stroke='currentColor'
|
||||
strokeWidth='2'
|
||||
strokeLinecap='round'
|
||||
strokeLinejoin='round'
|
||||
className='text-slate-300'
|
||||
>
|
||||
<rect width='14' height='14' x='8' y='8' rx='2' ry='2' />
|
||||
<path d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2' />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='rounded-xl border bg-card p-6 shadow-sm hover:shadow-md transition-shadow relative overflow-hidden'>
|
||||
<div className='absolute top-0 right-0 w-24 h-24 bg-primary/5 rounded-full -mt-8 -mr-8'></div>
|
||||
|
||||
<div className='flex items-center gap-4 mb-5'>
|
||||
<div className='w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center'>
|
||||
<Megaphone className='h-6 w-6 text-primary' />
|
||||
</div>
|
||||
<h2 className='scroll-m-20 text-2xl font-semibold tracking-tight'>
|
||||
Marketing Campaigns
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<p className='leading-7 mb-5 text-muted-foreground'>
|
||||
Run targeted SMS marketing campaigns to engage customers and
|
||||
drive sales. Perfect for promotions, event announcements, and
|
||||
customer surveys.
|
||||
</p>
|
||||
|
||||
<div className='bg-gradient-to-r from-primary/10 to-background p-4 rounded-lg mb-5'>
|
||||
<h3 className='font-medium text-base mb-2'>
|
||||
Campaign Types:
|
||||
</h3>
|
||||
<ul className='ml-6 list-disc space-y-1'>
|
||||
<li>Promotional offers and discounts</li>
|
||||
<li>New product announcements</li>
|
||||
<li>Event invitations</li>
|
||||
<li>Customer surveys</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className='bg-amber-50 dark:bg-amber-950 p-4 rounded-lg my-4'>
|
||||
<p className='text-amber-800 dark:text-amber-200 text-sm'>
|
||||
<strong>Note:</strong> Always ensure you have proper consent
|
||||
and comply with SMS marketing regulations in your region.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='rounded-xl border bg-card p-6 shadow-sm hover:shadow-md transition-shadow relative overflow-hidden'>
|
||||
<div className='absolute top-0 right-0 w-24 h-24 bg-primary/5 rounded-full -mt-8 -mr-8'></div>
|
||||
|
||||
<div className='flex items-center gap-4 mb-5'>
|
||||
<div className='w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center'>
|
||||
<HeadsetIcon className='h-6 w-6 text-primary' />
|
||||
</div>
|
||||
<h2 className='scroll-m-20 text-2xl font-semibold tracking-tight'>
|
||||
Customer Support
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<p className='leading-7 mb-5 text-muted-foreground'>
|
||||
Provide customer support through two-way SMS communication.
|
||||
Perfect for handling customer inquiries and feedback.
|
||||
</p>
|
||||
|
||||
<div className='bg-gradient-to-r from-primary/10 to-background p-4 rounded-lg mb-5'>
|
||||
<h3 className='font-medium text-base mb-2'>
|
||||
Implementation Steps:
|
||||
</h3>
|
||||
<ol className='ml-6 list-decimal space-y-1'>
|
||||
<li>Configure webhook for incoming SMS</li>
|
||||
<li>Process and route messages to support agents</li>
|
||||
<li>Send automated responses for common queries</li>
|
||||
<li>Track conversation history</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div className='relative'>
|
||||
<div className='flex items-center gap-1 text-xs text-muted-foreground mb-2'>
|
||||
<span className='px-2 py-0.5 bg-primary/10 rounded text-primary font-medium'>
|
||||
JavaScript
|
||||
</span>
|
||||
<span className='text-muted-foreground'>Example:</span>
|
||||
</div>
|
||||
<pre className='overflow-x-auto rounded-lg bg-slate-950 p-4 text-xs'>
|
||||
<code className='font-mono text-white'>
|
||||
{`// Check for new messages
|
||||
const messages = await axios.get(
|
||||
\`https://api.textbee.dev/api/v1/gateway/devices/\${DEVICE_ID}/get-received-sms\`,
|
||||
{ headers: { 'x-api-key': API_KEY } }
|
||||
);
|
||||
|
||||
// Process and respond to messages
|
||||
for (const msg of messages.data) {
|
||||
const response = await generateSupportResponse(msg.message);
|
||||
await sendReply(msg.sender, response);
|
||||
}`}
|
||||
</code>
|
||||
</pre>
|
||||
<button className='absolute top-3 right-3 p-1.5 rounded-md bg-slate-800 hover:bg-slate-700 transition-colors'>
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width='14'
|
||||
height='14'
|
||||
viewBox='0 0 24 24'
|
||||
fill='none'
|
||||
stroke='currentColor'
|
||||
strokeWidth='2'
|
||||
strokeLinecap='round'
|
||||
strokeLinejoin='round'
|
||||
className='text-slate-300'
|
||||
>
|
||||
<rect width='14' height='14' x='8' y='8' rx='2' ry='2' />
|
||||
<path d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2' />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-16 space-y-6 mx-auto'>
|
||||
<div className='flex items-center gap-3 mb-6 justify-center'>
|
||||
<div className='w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center'>
|
||||
<ExternalLink className='h-4 w-4 text-primary' />
|
||||
</div>
|
||||
<h2 className='scroll-m-20 text-3xl font-semibold tracking-tight'>
|
||||
Custom Integrations
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<p className='leading-7 text-muted-foreground max-w-3xl mx-auto text-center'>
|
||||
TextBee can be integrated with various platforms and services.
|
||||
Our REST API allows you to create custom integrations for almost
|
||||
any application, automating SMS sending and receiving based on
|
||||
triggers in your existing systems.
|
||||
</p>
|
||||
|
||||
<div className='grid grid-cols-2 md:grid-cols-4 gap-4 my-8 mx-auto'>
|
||||
<div className='p-6 border rounded-xl text-center hover:border-primary/50 hover:shadow-md transition-all bg-card'>
|
||||
<div className='w-12 h-12 mx-auto mb-3 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center'>
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
className='h-6 w-6 text-blue-700 dark:text-blue-300'
|
||||
viewBox='0 0 24 24'
|
||||
fill='none'
|
||||
stroke='currentColor'
|
||||
strokeWidth='2'
|
||||
strokeLinecap='round'
|
||||
strokeLinejoin='round'
|
||||
>
|
||||
<path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2' />
|
||||
<circle cx='9' cy='7' r='4' />
|
||||
<path d='M22 21v-2a4 4 0 0 0-3-3.87' />
|
||||
<path d='M16 3.13a4 4 0 0 1 0 7.75' />
|
||||
</svg>
|
||||
</div>
|
||||
<p className='font-medium text-lg'>CRM Systems</p>
|
||||
<p className='text-sm text-muted-foreground mt-2'>
|
||||
Connect SMS messaging with customer records
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className='p-6 border rounded-xl text-center hover:border-primary/50 hover:shadow-md transition-all bg-card'>
|
||||
<div className='w-12 h-12 mx-auto mb-3 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center'>
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
className='h-6 w-6 text-purple-700 dark:text-purple-300'
|
||||
viewBox='0 0 24 24'
|
||||
fill='none'
|
||||
stroke='currentColor'
|
||||
strokeWidth='2'
|
||||
strokeLinecap='round'
|
||||
strokeLinejoin='round'
|
||||
>
|
||||
<rect width='18' height='18' x='3' y='4' rx='2' ry='2' />
|
||||
<line x1='16' x2='16' y1='2' y2='6' />
|
||||
<line x1='8' x2='8' y1='2' y2='6' />
|
||||
<line x1='3' x2='21' y1='10' y2='10' />
|
||||
<path d='M8 14h.01' />
|
||||
<path d='M12 14h.01' />
|
||||
<path d='M16 14h.01' />
|
||||
<path d='M8 18h.01' />
|
||||
<path d='M12 18h.01' />
|
||||
<path d='M16 18h.01' />
|
||||
</svg>
|
||||
</div>
|
||||
<p className='font-medium text-lg'>Booking Software</p>
|
||||
<p className='text-sm text-muted-foreground mt-2'>
|
||||
Automate appointment confirmations
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className='p-6 border rounded-xl text-center hover:border-primary/50 hover:shadow-md transition-all bg-card'>
|
||||
<div className='w-12 h-12 mx-auto mb-3 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center'>
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
className='h-6 w-6 text-green-700 dark:text-green-300'
|
||||
viewBox='0 0 24 24'
|
||||
fill='none'
|
||||
stroke='currentColor'
|
||||
strokeWidth='2'
|
||||
strokeLinecap='round'
|
||||
strokeLinejoin='round'
|
||||
>
|
||||
<circle cx='8' cy='21' r='1' />
|
||||
<circle cx='19' cy='21' r='1' />
|
||||
<path d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12' />
|
||||
</svg>
|
||||
</div>
|
||||
<p className='font-medium text-lg'>E-commerce</p>
|
||||
<p className='text-sm text-muted-foreground mt-2'>
|
||||
Send order & shipping updates
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className='p-6 border rounded-xl text-center hover:border-primary/50 hover:shadow-md transition-all bg-card'>
|
||||
<div className='w-12 h-12 mx-auto mb-3 rounded-full bg-amber-100 dark:bg-amber-900 flex items-center justify-center'>
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
className='h-6 w-6 text-amber-700 dark:text-amber-300'
|
||||
viewBox='0 0 24 24'
|
||||
fill='none'
|
||||
stroke='currentColor'
|
||||
strokeWidth='2'
|
||||
strokeLinecap='round'
|
||||
strokeLinejoin='round'
|
||||
>
|
||||
<rect width='18' height='18' x='3' y='3' rx='2' />
|
||||
<path d='M12 8v8' />
|
||||
<path d='m8.5 14 7-4' />
|
||||
<path d='m8.5 10 7 4' />
|
||||
</svg>
|
||||
</div>
|
||||
<p className='font-medium text-lg'>Automation Tools</p>
|
||||
<p className='text-sm text-muted-foreground mt-2'>
|
||||
Integrate with Zapier, IFTTT, etc.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-6 grid md:grid-cols-2 gap-8 mx-auto'>
|
||||
<div className='bg-muted p-6 rounded-xl'>
|
||||
<h3 className='text-xl font-medium mb-3'>Webhooks Support</h3>
|
||||
<p className='text-muted-foreground mb-4'>
|
||||
Configure webhooks to receive notifications when SMS events
|
||||
occur. Perfect for event-driven architectures and real-time
|
||||
applications.
|
||||
</p>
|
||||
<div className='text-xs p-2 bg-slate-200 dark:bg-slate-800 rounded-lg font-mono overflow-x-auto'>
|
||||
POST
|
||||
https://your-server.com/webhook?event=sms_received&sender=+1234567890
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='bg-muted p-6 rounded-xl'>
|
||||
<h3 className='text-xl font-medium mb-3'>
|
||||
API Documentation
|
||||
</h3>
|
||||
<p className='text-muted-foreground mb-4'>
|
||||
Our comprehensive API documentation provides all the details
|
||||
you need to integrate TextBee with your applications and
|
||||
services.
|
||||
</p>
|
||||
<a
|
||||
href='https://docs.textbee.dev'
|
||||
className='inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors text-sm'
|
||||
>
|
||||
<span>View API Documentation</span>
|
||||
<ArrowRight className='h-3.5 w-3.5' />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='p-8 bg-gradient-to-r from-primary/20 via-primary/10 to-primary/5 rounded-xl mt-12 mx-auto'>
|
||||
<div className='flex flex-col md:flex-row md:items-center justify-between gap-6'>
|
||||
<div>
|
||||
<h2 className='scroll-m-20 text-2xl font-semibold tracking-tight mb-2'>
|
||||
Ready to implement these use cases?
|
||||
</h2>
|
||||
<p className='leading-7 text-muted-foreground max-w-2xl'>
|
||||
Follow our step-by-step quickstart guide to set up TextBee
|
||||
and start sending SMS messages in minutes. Whether you're
|
||||
implementing 2FA, appointment reminders, or complex
|
||||
integrations, we've got you covered.
|
||||
</p>
|
||||
</div>
|
||||
<div className='flex flex-col sm:flex-row gap-4'>
|
||||
<Link
|
||||
href='/quickstart'
|
||||
className='inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors'
|
||||
>
|
||||
<span>Quickstart Guide</span>
|
||||
<ArrowRight className='h-4 w-4' />
|
||||
</Link>
|
||||
<a
|
||||
href='mailto:contact@textbee.dev'
|
||||
className='inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg bg-background border hover:bg-muted transition-colors'
|
||||
>
|
||||
<span>Contact Support</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -13,7 +13,7 @@ import prismaClient from '@/lib/prismaClient'
|
||||
import { userAgent } from 'next/server'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'textbee.dev - Free and Open-Source SMS Gateway',
|
||||
title: 'textbee.dev - sms gateway',
|
||||
description:
|
||||
'TextBee is an open-source solution that turns your Android device into a powerful SMS gateway. Send SMS effortlessly through your applications.',
|
||||
authors: [
|
||||
@@ -51,7 +51,7 @@ export const metadata: Metadata = {
|
||||
canonical: 'https://textbee.dev',
|
||||
},
|
||||
openGraph: {
|
||||
title: 'textbee.dev - Free and Open-Source SMS Gateway',
|
||||
title: 'textbee.dev - sms gateway',
|
||||
description:
|
||||
'TextBee is an open-source solution that turns your Android device into a powerful SMS gateway. Send SMS effortlessly through your applications.',
|
||||
},
|
||||
|
||||
@@ -28,6 +28,19 @@ export default function sitemap(): MetadataRoute.Sitemap {
|
||||
changeFrequency: 'monthly' as const,
|
||||
priority: 0.8,
|
||||
},
|
||||
{
|
||||
url: `${baseUrl}${Routes.useCases}`,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: 'monthly' as const,
|
||||
priority: 0.8,
|
||||
},
|
||||
{
|
||||
url: `${baseUrl}${Routes.quickstart}`,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: 'monthly' as const,
|
||||
priority: 0.8,
|
||||
},
|
||||
|
||||
{
|
||||
url: `${baseUrl}${Routes.login}`,
|
||||
lastModified: new Date(),
|
||||
@@ -70,7 +83,7 @@ export default function sitemap(): MetadataRoute.Sitemap {
|
||||
changeFrequency: 'yearly' as const,
|
||||
priority: 0.5,
|
||||
},
|
||||
|
||||
|
||||
// {
|
||||
// url: `${baseUrl}/docs`,
|
||||
// lastModified: new Date(),
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
export const Routes = {
|
||||
landingPage: '/',
|
||||
contribute: '/contribute',
|
||||
useCases: '/use-cases',
|
||||
quickstart: '/quickstart',
|
||||
login: '/login',
|
||||
register: '/register',
|
||||
logout: '/logout',
|
||||
|
||||
Reference in New Issue
Block a user