mirror of
https://github.com/vernu/textbee.git
synced 2026-05-19 22:10:58 -04:00
feat(web): add quick start and use-cases pages
This commit is contained in:
isra el
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.',
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user