Browse Source

feat(web): add quick start and use-cases pages

pull/72/head
isra el 11 months ago
parent
commit
56b0f8f582
  1. 581
      web/app/(landing-page)/quickstart/page.tsx
  2. 630
      web/app/(landing-page)/use-cases/page.tsx
  3. 4
      web/app/layout.tsx

581
web/app/(landing-page)/quickstart/page.tsx

@ -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

@ -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>
</>
)
}

4
web/app/layout.tsx

@ -13,7 +13,7 @@ import prismaClient from '@/lib/prismaClient'
import { userAgent } from 'next/server' import { userAgent } from 'next/server'
export const metadata: Metadata = { export const metadata: Metadata = {
title: 'textbee.dev - Free and Open-Source SMS Gateway',
title: 'textbee.dev - sms gateway',
description: description:
'TextBee is an open-source solution that turns your Android device into a powerful SMS gateway. Send SMS effortlessly through your applications.', 'TextBee is an open-source solution that turns your Android device into a powerful SMS gateway. Send SMS effortlessly through your applications.',
authors: [ authors: [
@ -51,7 +51,7 @@ export const metadata: Metadata = {
canonical: 'https://textbee.dev', canonical: 'https://textbee.dev',
}, },
openGraph: { openGraph: {
title: 'textbee.dev - Free and Open-Source SMS Gateway',
title: 'textbee.dev - sms gateway',
description: description:
'TextBee is an open-source solution that turns your Android device into a powerful SMS gateway. Send SMS effortlessly through your applications.', 'TextBee is an open-source solution that turns your Android device into a powerful SMS gateway. Send SMS effortlessly through your applications.',
}, },

Loading…
Cancel
Save