Browse Source
Merge pull request #72 from vernu/dev
Merge pull request #72 from vernu/dev
add quick start and use-cases pagespull/78/head
Israel Abebe
11 months ago
committed by
GitHub
GitHub
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 1923 additions and 372 deletions
-
147api/src/mail/templates/inactive-new-user-day-10.hbs
-
85api/src/mail/templates/inactive-new-user-day-3.hbs
-
181api/src/mail/templates/inactive-new-user.hbs
-
278api/src/mail/templates/upgrade-to-pro.hbs
-
295api/src/mail/templates/welcome-1.hbs
-
55api/src/users/users.service.ts
-
8web/app/(app)/(auth)/(components)/login-form.tsx
-
8web/app/(app)/(auth)/(components)/register-form.tsx
-
581web/app/(landing-page)/quickstart/page.tsx
-
630web/app/(landing-page)/use-cases/page.tsx
-
4web/app/layout.tsx
-
13web/app/sitemap.ts
-
2web/config/routes.ts
@ -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> |
|||
@ -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> |
|||
|
|||
<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> |
|||
|
|||
<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> |
|||
<div class='content'> |
|||
<div class='welcome-banner'> |
|||
<h1>Welcome to textbee.dev!</h1> |
|||
<p>Your gateway to powerful SMS integration</p> |
|||
</div> |
|||
|
|||
<h2>Hi {{name}},</h2> |
|||
|
|||
<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='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> |
|||
|
|||
<h2>What You Can Build with textbee.dev</h2> |
|||
|
|||
<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> |
|||
|
|||
<div class='divider'></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> |
|||
|
|||
<div class='signature'> |
|||
<p> |
|||
Cheers,<br /> |
|||
<strong>Vernu</strong><br /> |
|||
Creator, textbee.dev |
|||
<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> |
|||
</div> |
|||
|
|||
<div class='divider'></div> |
|||
<h2>Get Started in Minutes</h2> |
|||
|
|||
<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;' |
|||
> |
|||
<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://c5.patreon.com/external/logo/downloads_logomark_color_on_white.png' |
|||
alt='Patreon' |
|||
style='width: 20px; vertical-align: middle;' |
|||
src='https://ui-avatars.com/api/?name=Vernu&background=4A90E2&color=fff' |
|||
class='signature-img' |
|||
alt='Vernu' |
|||
/> |
|||
Support on Patreon |
|||
</a> |
|||
<div class='signature-text'> |
|||
<h3>Vernu</h3> |
|||
<p>Founder, textbee.dev</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<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> |
|||
@ -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> |
|||
) |
|||
} |
|||
@ -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> |
|||
</> |
|||
) |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue