Add src/app/bot/[botId]/page.tsx
This commit is contained in:
230
src/app/bot/[botId]/page.tsx
Normal file
230
src/app/bot/[botId]/page.tsx
Normal file
@@ -0,0 +1,230 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
||||
import { useParams } from "next/navigation";
|
||||
import { ExternalLink, MessageCircle, Star, Users } from "lucide-react";
|
||||
|
||||
export default function BotDetailPage() {
|
||||
const params = useParams();
|
||||
const botId = params.botId as string;
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Directory", id: "/directory" },
|
||||
{ name: "Categories", id: "categories" },
|
||||
{ name: "Submit Bot", id: "/submit" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "Directory", href: "/directory" },
|
||||
{ label: "Categories", href: "categories" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Submit Bot", href: "/submit" },
|
||||
{ label: "Contact", href: "contact" },
|
||||
{ label: "FAQ", href: "#faq" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Privacy Policy", href: "#privacy" },
|
||||
{ label: "Terms of Service", href: "#terms" },
|
||||
{ label: "Cookie Policy", href: "#cookies" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Twitter", href: "https://twitter.com" },
|
||||
{ label: "Discord", href: "https://discord.com" },
|
||||
{ label: "GitHub", href: "https://github.com" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
// Mock bot data - in a real app, this would come from a database
|
||||
const botData: Record<string, any> = {
|
||||
"ai-chat-master": {
|
||||
name: "AI Chat Master", username: "@aichatmaster", category: "AI", rating: 4.8,
|
||||
reviews: 1250,
|
||||
users: "50K+", description: "Advanced AI-powered chatbot with natural language processing. Get instant answers to your questions, have meaningful conversations, and explore endless possibilities with cutting-edge AI technology.", features: [
|
||||
"Natural language processing", "Multi-language support", "Instant responses", "Learning capabilities", "Context awareness", "24/7 availability"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/a-telegram-bot-interface-screenshot-show-1773243153207-c6149c84.png"},
|
||||
"music-playlist-manager": {
|
||||
name: "Music Playlist Manager", username: "@musicplaylistmanager", category: "Music", rating: 4.6,
|
||||
reviews: 980,
|
||||
users: "35K+", description: "Control your Spotify and music streaming with ease. Create, manage, and share playlists directly from Telegram. Discover new music and enjoy seamless integration with your favorite streaming services.", features: [
|
||||
"Spotify integration", "Playlist management", "Music discovery", "Queue management", "Sharing capabilities", "Real-time sync"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/a-music-telegram-bot-interface-showing-p-1773243148514-249cc2c5.png"},
|
||||
"file-download-pro": {
|
||||
name: "File Download Pro", username: "@filedownloadpro", category: "Download", rating: 4.5,
|
||||
reviews: 756,
|
||||
users: "28K+", description: "Download and manage files from various sources effortlessly. Support for multiple formats, batch downloads, and cloud storage integration. Keep your files organized and accessible.", features: [
|
||||
"Multi-source downloads", "Batch processing", "Cloud storage support", "File organization", "Speed optimization", "Resume capability"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/a-download-utility-telegram-bot-showing--1773243148459-d9376052.png"},
|
||||
};
|
||||
|
||||
const bot = botData[botId] || {
|
||||
name: "Bot Name", username: "@botusername", category: "Utility", rating: 4.5,
|
||||
reviews: 500,
|
||||
users: "10K+", description: "This is a sample bot. Check the bot directory for more details.", features: ["Feature 1", "Feature 2", "Feature 3"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/an-education-telegram-bot-showing-course-1773243147669-88bfb7ee.png"};
|
||||
|
||||
const handleOpenInTelegram = () => {
|
||||
// Open bot in Telegram - uses the Telegram deep link protocol
|
||||
window.open(`https://t.me/${bot.username.replace("@", "")}`, "_blank");
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="small"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="none"
|
||||
cardStyle="gradient-radial"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="Telegram Bot Hub"
|
||||
bottomLeftText="Bot Details"
|
||||
bottomRightText="support@telegrambothub.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="bot-detail" data-section="bot-detail" className="min-h-screen pt-32 pb-20">
|
||||
<div className="max-w-4xl mx-auto px-4 md:px-8">
|
||||
{/* Bot Header */}
|
||||
<div className="flex flex-col md:flex-row gap-8 mb-12">
|
||||
{/* Bot Image */}
|
||||
<div className="flex-shrink-0 w-full md:w-64">
|
||||
<img
|
||||
src={bot.imageSrc}
|
||||
alt={bot.name}
|
||||
className="w-full h-64 md:h-80 object-cover rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Bot Info */}
|
||||
<div className="flex-1">
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-2">{bot.name}</h1>
|
||||
<p className="text-xl text-foreground/70 mb-4">{bot.username}</p>
|
||||
<div className="flex flex-wrap gap-4 mb-6">
|
||||
<span className="inline-block px-4 py-2 rounded-full bg-primary-cta/10 text-primary-cta font-semibold">
|
||||
{bot.category}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-3 gap-4 mb-8 py-6 border-y border-foreground/10">
|
||||
<div>
|
||||
<div className="flex items-center gap-1 mb-1">
|
||||
<Star size={18} className="fill-yellow-400 text-yellow-400" />
|
||||
<span className="font-bold text-xl">{bot.rating}</span>
|
||||
</div>
|
||||
<p className="text-sm text-foreground/60">{bot.reviews} reviews</p>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-1 mb-1">
|
||||
<Users size={18} />
|
||||
<span className="font-bold text-xl">{bot.users}</span>
|
||||
</div>
|
||||
<p className="text-sm text-foreground/60">Active users</p>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
onClick={handleOpenInTelegram}
|
||||
className="w-full px-4 py-2 bg-primary-cta text-background rounded-lg font-semibold flex items-center justify-center gap-2 hover:opacity-90 transition-opacity"
|
||||
>
|
||||
<MessageCircle size={18} />
|
||||
Open Bot
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-lg text-foreground/80 mb-6">{bot.description}</p>
|
||||
|
||||
{/* Open in Telegram Button */}
|
||||
<button
|
||||
onClick={handleOpenInTelegram}
|
||||
className="w-full md:w-auto px-8 py-3 bg-primary-cta text-background rounded-lg font-semibold flex items-center justify-center gap-2 hover:opacity-90 transition-opacity mb-4"
|
||||
>
|
||||
<ExternalLink size={20} />
|
||||
Open in Telegram
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Features */}
|
||||
<div className="mb-12">
|
||||
<h2 className="text-3xl font-bold mb-6">Features</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{bot.features.map((feature: string, index: number) => (
|
||||
<div
|
||||
key={index}
|
||||
className="p-4 rounded-lg bg-card border border-foreground/10 flex items-start gap-3"
|
||||
>
|
||||
<div className="flex-shrink-0 w-6 h-6 rounded-full bg-primary-cta/20 flex items-center justify-center mt-0.5">
|
||||
<svg
|
||||
className="w-4 h-4 text-primary-cta"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-foreground/80">{feature}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* How to Use */}
|
||||
<div className="bg-card border border-foreground/10 rounded-lg p-8 mb-12">
|
||||
<h2 className="text-3xl font-bold mb-6">How to Use</h2>
|
||||
<ol className="space-y-4 text-lg text-foreground/80">
|
||||
<li>
|
||||
<span className="font-semibold text-foreground">1. Click "Open in Telegram"</span> - This will take you directly to the bot's chat
|
||||
</li>
|
||||
<li>
|
||||
<span className="font-semibold text-foreground">2. Start the Bot</span> - Click the START button or type /start
|
||||
</li>
|
||||
<li>
|
||||
<span className="font-semibold text-foreground">3. Follow Instructions</span> - The bot will guide you through setup and usage
|
||||
</li>
|
||||
<li>
|
||||
<span className="font-semibold text-foreground">4. Explore Features</span> - Type /help to see all available commands
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
logoText="Telegram Bot Hub"
|
||||
columns={footerColumns}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user