Update src/app/page.tsx

Merge version_2 into main

src/app/bot/[botId]/page.tsx

@@ -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>
+  );
+}

src/app/explore-bots/page.tsx

@@ -0,0 +1,215 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import HeroBillboardScroll from "@/components/sections/hero/HeroBillboardScroll";
+import MetricCardTen from "@/components/sections/metrics/MetricCardTen";
+import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
+import { Search, Filter, Sparkles, ArrowRight } from "lucide-react";
+import { useState, useMemo } from "react";
+
+interface Bot {
+  id: string;
+  title: string;
+  subtitle: string;
+  category: string;
+  value: string;
+  buttons?: Array<{ text: string; onClick?: () => void; href?: string }>;
+}
+
+const ALL_BOTS: Bot[] = [
+  {
+    id: "1",    title: "AI Chat Master",    subtitle: "Advanced AI-powered chatbot with natural language processing",    category: "AI",    value: "⭐ 4.8",    buttons: [{ text: "Explore", href: "#" }],
+  },
+  {
+    id: "2",    title: "Music Playlist Manager",    subtitle: "Control your Spotify and music streaming with ease",    category: "Music",    value: "⭐ 4.6",    buttons: [{ text: "Explore", href: "#" }],
+  },
+  {
+    id: "3",    title: "File Download Pro",    subtitle: "Download and manage files from various sources",    category: "Download",    value: "⭐ 4.7",    buttons: [{ text: "Explore", href: "#" }],
+  },
+  {
+    id: "4",    title: "Learn Anything",    subtitle: "Interactive educational courses and quizzes",    category: "Education",    value: "⭐ 4.9",    buttons: [{ text: "Explore", href: "#" }],
+  },
+  {
+    id: "5",    title: "Crypto Trading Bot",    subtitle: "Real-time crypto price alerts and trading signals",    category: "Crypto",    value: "⭐ 4.5",    buttons: [{ text: "Explore", href: "#" }],
+  },
+  {
+    id: "6",    title: "Productivity Timer",    subtitle: "Track time, manage tasks, and boost productivity",    category: "Utility",    value: "⭐ 4.7",    buttons: [{ text: "Explore", href: "#" }],
+  },
+  {
+    id: "7",    title: "Language Translator",    subtitle: "Instant translation between 100+ languages",    category: "Education",    value: "⭐ 4.6",    buttons: [{ text: "Explore", href: "#" }],
+  },
+  {
+    id: "8",    title: "Smart News Digest",    subtitle: "Get personalized news summaries delivered daily",    category: "Utility",    value: "⭐ 4.4",    buttons: [{ text: "Explore", href: "#" }],
+  },
+  {
+    id: "9",    title: "Video Downloader Plus",    subtitle: "Download videos from YouTube, TikTok, and more",    category: "Download",    value: "⭐ 4.8",    buttons: [{ text: "Explore", href: "#" }],
+  },
+  {
+    id: "10",    title: "DeFi Portfolio Tracker",    subtitle: "Monitor your crypto investments in real-time",    category: "Crypto",    value: "⭐ 4.7",    buttons: [{ text: "Explore", href: "#" }],
+  },
+  {
+    id: "11",    title: "Image Editor Pro",    subtitle: "Edit, crop, and enhance images with AI filters",    category: "Utility",    value: "⭐ 4.6",    buttons: [{ text: "Explore", href: "#" }],
+  },
+  {
+    id: "12",    title: "Spotify Playlist Helper",    subtitle: "Create and manage playlists with smart recommendations",    category: "Music",    value: "⭐ 4.7",    buttons: [{ text: "Explore", href: "#" }],
+  },
+];
+
+const CATEGORIES = [
+  "All",  "AI",  "Music",  "Download",  "Education",  "Crypto",  "Utility"];
+
+export default function ExploreBots() {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedCategory, setSelectedCategory] = useState("All");
+
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Explore Bots", id: "/explore-bots" },
+    { name: "Categories", id: "categories" },
+    { name: "Submit Bot", id: "submit" },
+    { name: "Contact", id: "contact" },
+  ];
+
+  const footerColumns = [
+    {
+      items: [
+        { label: "Home", href: "/" },
+        { label: "Explore Bots", href: "/explore-bots" },
+        { 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" },
+      ],
+    },
+  ];
+
+  const filteredBots = useMemo(() => {
+    return ALL_BOTS.filter((bot) => {
+      const matchesCategory =
+        selectedCategory === "All" || bot.category === selectedCategory;
+      const matchesSearch = bot.title
+        .toLowerCase()
+        .includes(searchQuery.toLowerCase());
+      return matchesCategory && matchesSearch;
+    });
+  }, [searchQuery, selectedCategory]);
+
+  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="Explore Bots"
+          bottomRightText="support@telegrambothub.com"
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroBillboardScroll
+          title="Explore All Telegram Bots"
+          description="Discover hundreds of powerful bots with advanced filtering and search capabilities. Find the perfect bot for your needs."
+          tag="Complete Bot Directory"
+          tagAnimation="slide-up"
+          background={{ variant: "rotated-rays-animated-grid" }}
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/a-modern-sleek-dashboard-interface-showc-1773243150075-688c9009.png"
+          imageAlt="Telegram Bot Explorer"
+          buttons={[
+            { text: "Submit Your Bot", href: "submit" },
+            { text: "Back to Home", href: "/" },
+          ]}
+          buttonAnimation="slide-up"
+        />
+      </div>
+
+      <div id="search-filters" data-section="search-filters" className="py-20 px-4">
+        <div className="w-full max-w-6xl mx-auto">
+          <div className="mb-8 space-y-4">
+            <div className="flex items-center gap-2">
+              <Search className="w-5 h-5 text-primary-cta" />
+              <input
+                type="text"
+                placeholder="Search bots by name..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="w-full px-4 py-3 bg-card border border-accent rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta"
+              />
+            </div>
+
+            <div className="flex flex-wrap gap-2">
+              <Filter className="w-5 h-5 text-primary-cta self-center" />
+              {CATEGORIES.map((category) => (
+                <button
+                  key={category}
+                  onClick={() => setSelectedCategory(category)}
+                  className={`px-4 py-2 rounded-lg transition-all ${
+                    selectedCategory === category
+                      ? "bg-primary-cta text-background font-semibold"
+                      : "bg-card border border-accent text-foreground hover:border-primary-cta"
+                  }`}
+                >
+                  {category}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <div className="text-sm text-foreground/70 mb-6">
+            Showing {filteredBots.length} bot{filteredBots.length !== 1 ? "s" : ""}
+          </div>
+        </div>
+      </div>
+
+      <div id="bots-grid" data-section="bots-grid">
+        <MetricCardTen
+          title="Bot Directory"
+          description="Browse and filter through our complete collection of Telegram bots"
+          tag="All Bots"
+          tagIcon={Sparkles}
+          tagAnimation="slide-up"
+          metrics={filteredBots}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoEmphasis
+          logoText="Telegram Bot Hub"
+          columns={footerColumns}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -18,7 +18,7 @@ export default function HomePage() {
     { name: "Home", id: "/" },
     { name: "Directory", id: "/directory" },
     { name: "Categories", id: "categories" },
-    { name: "Submit Bot", id: "submit" },
+    { name: "Submit Bot", id: "/submit" },
     { name: "Contact", id: "contact" },
   ];
 
@@ -32,7 +32,7 @@ export default function HomePage() {
     },
     {
       items: [
-        { label: "Submit Bot", href: "submit" },
+        { label: "Submit Bot", href: "/submit" },
         { label: "Contact", href: "contact" },
         { label: "FAQ", href: "#faq" },
       ],
@@ -86,7 +86,7 @@ export default function HomePage() {
           imageAlt="Telegram Bot Hub Dashboard"
           buttons={[
             { text: "Explore Bots", href: "/directory" },
-            { text: "Submit Your Bot", href: "submit" },
+            { text: "Submit Your Bot", href: "/submit" },
           ]}
           buttonAnimation="slide-up"
         />
@@ -101,16 +101,19 @@ export default function HomePage() {
           tagAnimation="slide-up"
           features={[
             {
-              title: "AI Chat Master",              description: "Advanced AI-powered chatbot with natural language processing",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/a-telegram-bot-interface-screenshot-show-1773243153207-c6149c84.png",              imageAlt: "AI Chat Master Bot",              buttonIcon: ArrowRight,
+              title: "AI Chat Master",              description: "Advanced AI-powered chatbot with natural language processing",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/a-telegram-bot-interface-screenshot-show-1773243153207-c6149c84.png?_wi=1",              imageAlt: "AI Chat Master Bot",              buttonIcon: ArrowRight,
+              buttonHref: "/bot/ai-chat-master"
             },
             {
-              title: "Music Playlist Manager",              description: "Control your Spotify and music streaming with ease",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/a-music-telegram-bot-interface-showing-p-1773243148514-249cc2c5.png",              imageAlt: "Music Playlist Manager Bot",              buttonIcon: ArrowRight,
+              title: "Music Playlist Manager",              description: "Control your Spotify and music streaming with ease",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/a-music-telegram-bot-interface-showing-p-1773243148514-249cc2c5.png?_wi=1",              imageAlt: "Music Playlist Manager Bot",              buttonIcon: ArrowRight,
+              buttonHref: "/bot/music-playlist-manager"
             },
             {
-              title: "File Download Pro",              description: "Download and manage files from various sources",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/a-download-utility-telegram-bot-showing--1773243148459-d9376052.png",              imageAlt: "File Download Pro Bot",              buttonIcon: ArrowRight,
+              title: "File Download Pro",              description: "Download and manage files from various sources",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/a-download-utility-telegram-bot-showing--1773243148459-d9376052.png?_wi=1",              imageAlt: "File Download Pro Bot",              buttonIcon: ArrowRight,
+              buttonHref: "/bot/file-download-pro"
             },
             {
-              title: "Learn Anything",              description: "Interactive educational courses and quizzes",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/an-education-telegram-bot-showing-course-1773243147669-88bfb7ee.png",              imageAlt: "Learn Anything Education Bot",              buttonIcon: ArrowRight,
+              title: "Learn Anything",              description: "Interactive educational courses and quizzes",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/an-education-telegram-bot-showing-course-1773243147669-88bfb7ee.png?_wi=1",              imageAlt: "Learn Anything Education Bot",              buttonIcon: ArrowRight,
             },
           ]}
           textboxLayout="default"
@@ -121,23 +124,29 @@ export default function HomePage() {
       <div id="categories" data-section="categories">
         <ProductCardFour
           title="Browse Categories"
-          description="Explore bots by category to find exactly what you need"
+          description="Find the right bot in seconds—filter by AI, music, downloads, utilities, crypto, and education"
           tag="Bot Categories"
           tagIcon={Grid3x3}
           tagAnimation="slide-up"
           products={[
             {
-              id: "ai-bots",              name: "AI Bots",              price: "50+ Bots",              variant: "Intelligent Assistants",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/icon-or-visual-representation-for-ai-bot-1773243147693-5dba5e36.png",              imageAlt: "AI Bots Category"},
+              id: "ai-bots",              name: "AI Bots",              price: "50+ Bots",              variant: "Intelligent Assistants",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/icon-or-visual-representation-for-ai-bot-1773243147693-5dba5e36.png",              imageAlt: "AI Bots Category"
+            },
             {
-              id: "download-bots",              name: "Download Bots",              price: "35+ Bots",              variant: "File Management",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/icon-for-download-bots-category-download-1773243147505-c1207d17.png",              imageAlt: "Download Bots Category"},
+              id: "download-bots",              name: "Download Bots",              price: "35+ Bots",              variant: "File Management",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/icon-for-download-bots-category-download-1773243147505-c1207d17.png",              imageAlt: "Download Bots Category"
+            },
             {
-              id: "music-bots",              name: "Music Bots",              price: "28+ Bots",              variant: "Audio Streaming",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/icon-for-music-bots-category-musical-not-1773243148719-94d3872a.png",              imageAlt: "Music Bots Category"},
+              id: "music-bots",              name: "Music Bots",              price: "28+ Bots",              variant: "Audio Streaming",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/icon-for-music-bots-category-musical-not-1773243148719-94d3872a.png",              imageAlt: "Music Bots Category"
+            },
             {
-              id: "utility-bots",              name: "Utility Bots",              price: "42+ Bots",              variant: "Tools & Helpers",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/icon-for-utility-bots-category-tools-gea-1773243147317-186d2e49.png",              imageAlt: "Utility Bots Category"},
+              id: "utility-bots",              name: "Utility Bots",              price: "42+ Bots",              variant: "Tools & Helpers",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/icon-for-utility-bots-category-tools-gea-1773243147317-186d2e49.png",              imageAlt: "Utility Bots Category"
+            },
             {
-              id: "crypto-bots",              name: "Crypto Bots",              price: "22+ Bots",              variant: "Trading & Finance",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/icon-for-crypto-bots-category-bitcoin-bl-1773243147630-ed1c2a0e.png",              imageAlt: "Crypto Bots Category"},
+              id: "crypto-bots",              name: "Crypto Bots",              price: "22+ Bots",              variant: "Trading & Finance",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/icon-for-crypto-bots-category-bitcoin-bl-1773243147630-ed1c2a0e.png",              imageAlt: "Crypto Bots Category"
+            },
             {
-              id: "education-bots",              name: "Education Bots",              price: "31+ Bots",              variant: "Learning Resources",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/icon-for-education-bots-category-books-g-1773243147982-e072d8bd.png",              imageAlt: "Education Bots Category"},
+              id: "education-bots",              name: "Education Bots",              price: "31+ Bots",              variant: "Learning Resources",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/icon-for-education-bots-category-books-g-1773243147982-e072d8bd.png",              imageAlt: "Education Bots Category"
+            },
           ]}
           gridVariant="uniform-all-items-equal"
           animationType="slide-up"
@@ -174,11 +183,13 @@ export default function HomePage() {
           description="Telegram Bot Hub makes it easy to find the perfect bots for your needs. Browse our curated directory, get detailed information about each bot, and join a community of developers and bot enthusiasts. Developers can submit their bots to reach thousands of potential users."
           metrics={[
             {
-              value: "Easy Discovery",              title: "Search and filter bots by category, rating, and features"},
+              value: "Easy Discovery",              title: "Search and filter bots by category, rating, and features"
+            },
             {
-              value: "Open Submission",              title: "Submit your bot for free and promote it to the community"},
+              value: "Open Submission",              title: "Submit your bot for free and promote it to the community"
+            },
           ]}
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/modern-illustration-of-a-person-working--1773243149449-f5529369.png"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/modern-illustration-of-a-person-working--1773243149449-f5529369.png?_wi=1"
           imageAlt="Bot Discovery Process"
           mediaAnimation="slide-up"
           metricsAnimation="slide-up"
@@ -194,17 +205,23 @@ export default function HomePage() {
           tagAnimation="slide-up"
           testimonials={[
             {
-              id: "1",              name: "Sarah Chen, Developer",              date: "Date: 15 January 2025",              title: "Found my favorite bot here!",              quote: "Telegram Bot Hub helped me discover amazing bots that saved me hours every week. The directory is incredibly well organized and easy to navigate. Highly recommend!",              tag: "Premium User",              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/professional-headshot-of-a-young-tech-en-1773243147243-92b4ecc7.png",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/a-telegram-bot-interface-screenshot-show-1773243153207-c6149c84.png",              imageAlt: "Testimonial - Bot Discovery"},
+              id: "1",              name: "Sarah Chen, Developer",              date: "Date: 15 January 2025",              title: "Found my favorite bot here!",              quote: "Telegram Bot Hub helped me discover amazing bots that saved me hours every week. The directory is incredibly well organized and easy to navigate. Highly recommend!",              tag: "Premium User",              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/professional-headshot-of-a-young-tech-en-1773243147243-92b4ecc7.png",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/a-telegram-bot-interface-screenshot-show-1773243153207-c6149c84.png?_wi=2",              imageAlt: "Testimonial - Bot Discovery"
+            },
             {
-              id: "2",              name: "Marcus Rodriguez, Product Manager",              date: "Date: 12 January 2025",              title: "Perfect platform for bot discovery",              quote: "We launched our bot on Telegram Bot Hub and saw incredible adoption. The community is engaged and the platform makes submission seamless. Best decision for our bot launch.",              tag: "Bot Creator",              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/professional-headshot-of-a-diverse-busin-1773243147065-b0583d56.png",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/a-music-telegram-bot-interface-showing-p-1773243148514-249cc2c5.png",              imageAlt: "Testimonial - Bot Launch"},
+              id: "2",              name: "Marcus Rodriguez, Product Manager",              date: "Date: 12 January 2025",              title: "Perfect platform for bot discovery",              quote: "We launched our bot on Telegram Bot Hub and saw incredible adoption. The community is engaged and the platform makes submission seamless. Best decision for our bot launch.",              tag: "Bot Creator",              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/professional-headshot-of-a-diverse-busin-1773243147065-b0583d56.png",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/a-music-telegram-bot-interface-showing-p-1773243148514-249cc2c5.png?_wi=2",              imageAlt: "Testimonial - Bot Launch"
+            },
             {
-              id: "3",              name: "Priya Patel, Tech Enthusiast",              date: "Date: 10 January 2025",              title: "The most comprehensive bot directory",              quote: "I've tried other bot directories, but Telegram Bot Hub is by far the most comprehensive and user-friendly. The ratings and reviews really help me choose the right bots.",              tag: "Active User",              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/professional-headshot-of-a-creative-prof-1773243147524-6819facd.png",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/a-download-utility-telegram-bot-showing--1773243148459-d9376052.png",              imageAlt: "Testimonial - User Experience"},
+              id: "3",              name: "Priya Patel, Tech Enthusiast",              date: "Date: 10 January 2025",              title: "The most comprehensive bot directory",              quote: "I've tried other bot directories, but Telegram Bot Hub is by far the most comprehensive and user-friendly. The ratings and reviews really help me choose the right bots.",              tag: "Active User",              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/professional-headshot-of-a-creative-prof-1773243147524-6819facd.png",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/a-download-utility-telegram-bot-showing--1773243148459-d9376052.png?_wi=2",              imageAlt: "Testimonial - User Experience"
+            },
             {
-              id: "4",              name: "James Wilson, Entrepreneur",              date: "Date: 8 January 2025",              title: "Growing platform with great potential",              quote: "Submitted my bot 3 months ago and have seen steady growth. The platform's features make bot discovery frictionless. Looking forward to more users joining the community.",              tag: "Business Owner",              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/professional-headshot-of-a-business-lead-1773243146811-e2414332.png",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/an-education-telegram-bot-showing-course-1773243147669-88bfb7ee.png",              imageAlt: "Testimonial - Bot Success"},
+              id: "4",              name: "James Wilson, Entrepreneur",              date: "Date: 8 January 2025",              title: "Growing platform with great potential",              quote: "Submitted my bot 3 months ago and have seen steady growth. The platform's features make bot discovery frictionless. Looking forward to more users joining the community.",              tag: "Business Owner",              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/professional-headshot-of-a-business-lead-1773243146811-e2414332.png",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/an-education-telegram-bot-showing-course-1773243147669-88bfb7ee.png?_wi=2",              imageAlt: "Testimonial - Bot Success"
+            },
             {
-              id: "5",              name: "Lisa Zhang, Data Analyst",              date: "Date: 5 January 2025",              title: "Exactly what I was looking for",              quote: "Found the perfect productivity bot that integrated seamlessly with my workflow. The platform's detailed information helped me make the right choice.",              tag: "Premium User",              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/professional-headshot-of-a-tech-innovato-1773243147483-23f9d55a.png",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/a-telegram-bot-interface-screenshot-show-1773243153207-c6149c84.png",              imageAlt: "Testimonial - Productivity"},
+              id: "5",              name: "Lisa Zhang, Data Analyst",              date: "Date: 5 January 2025",              title: "Exactly what I was looking for",              quote: "Found the perfect productivity bot that integrated seamlessly with my workflow. The platform's detailed information helped me make the right choice.",              tag: "Premium User",              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/professional-headshot-of-a-tech-innovato-1773243147483-23f9d55a.png",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/a-telegram-bot-interface-screenshot-show-1773243153207-c6149c84.png?_wi=3",              imageAlt: "Testimonial - Productivity"
+            },
             {
-              id: "6",              name: "David Kim, Software Engineer",              date: "Date: 2 January 2025",              title: "Community-driven and reliable",              quote: "I appreciate how Telegram Bot Hub curates and verifies bots. The ratings system is transparent and helpful. This is the go-to platform for finding quality bots.",              tag: "Tech Developer",              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/professional-headshot-of-a-diverse-busin-1773243147275-1f6a3f6c.png",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/a-music-telegram-bot-interface-showing-p-1773243148514-249cc2c5.png",              imageAlt: "Testimonial - Quality Assurance"},
+              id: "6",              name: "David Kim, Software Engineer",              date: "Date: 2 January 2025",              title: "Community-driven and reliable",              quote: "I appreciate how Telegram Bot Hub curates and verifies bots. The ratings system is transparent and helpful. This is the go-to platform for finding quality bots.",              tag: "Tech Developer",              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/professional-headshot-of-a-diverse-busin-1773243147275-1f6a3f6c.png",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/a-music-telegram-bot-interface-showing-p-1773243148514-249cc2c5.png?_wi=3",              imageAlt: "Testimonial - Quality Assurance"
+            },
           ]}
           textboxLayout="default"
           useInvertedBackground={false}
@@ -219,7 +236,7 @@ export default function HomePage() {
           description="Subscribe to our newsletter and be the first to discover new bots, featured releases, and community updates."
           background={{ variant: "sparkles-gradient" }}
           useInvertedBackground={true}
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/modern-illustration-of-a-person-working--1773243149449-f5529369.png"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/modern-illustration-of-a-person-working--1773243149449-f5529369.png?_wi=2"
           imageAlt="Newsletter Signup"
           mediaAnimation="slide-up"
           mediaPosition="right"
@@ -237,4 +254,4 @@ export default function HomePage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/submit/page.tsx

@@ -1,20 +1,18 @@
 "use client";
 
-import Link from "next/link";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
-import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
+import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
-import ContactSplit from "@/components/sections/contact/ContactSplit";
 import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
-import { Lightbulb, Bell } from "lucide-react";
+import { Upload, CheckCircle } from "lucide-react";
 
-export default function SubmitPage() {
+export default function SubmitBotPage() {
   const navItems = [
     { name: "Home", id: "/" },
     { name: "Directory", id: "/directory" },
-    { name: "Categories", id: "/categories" },
+    { name: "Categories", id: "categories" },
     { name: "Submit Bot", id: "/submit" },
-    { name: "Contact", id: "/contact" },
+    { name: "Contact", id: "contact" },
   ];
 
   const footerColumns = [
@@ -22,13 +20,13 @@ export default function SubmitPage() {
       items: [
         { label: "Home", href: "/" },
         { label: "Directory", href: "/directory" },
-        { label: "Categories", href: "/categories" },
+        { label: "Categories", href: "categories" },
       ],
     },
     {
       items: [
         { label: "Submit Bot", href: "/submit" },
-        { label: "Contact", href: "/contact" },
+        { label: "Contact", href: "contact" },
         { label: "FAQ", href: "#faq" },
       ],
     },
@@ -48,6 +46,11 @@ export default function SubmitPage() {
     },
   ];
 
+  const handleSubmit = (data: Record<string, string>) => {
+    console.log("Bot submission:", data);
+    // Handle form submission
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="directional-hover"
@@ -63,61 +66,43 @@ export default function SubmitPage() {
     >
       <div id="nav" data-section="nav">
         <NavbarStyleFullscreen
-          navItems={[
+          navItems={navItems}
-            { name: "Home", id: "/" },
-            { name: "Directory", id: "/directory" },
-            { name: "Categories", id: "/categories" },
-            { name: "Submit Bot", id: "/submit" },
-            { name: "Contact", id: "/contact" },
-          ]}
           brandName="Telegram Bot Hub"
-          bottomLeftText="Discover Amazing Bots"
+          bottomLeftText="Submit Your Bot"
           bottomRightText="support@telegrambothub.com"
         />
       </div>
 
-      <div id="submit-process" data-section="submit-process">
+      <div id="submit-form" data-section="submit-form">
-        <MetricSplitMediaAbout
+        <ContactSplitForm
-          tag="How It Works"
-          tagIcon={Lightbulb}
           title="Submit Your Telegram Bot"
-          description="Getting your bot listed on Telegram Bot Hub is simple and free. We verify each submission to ensure quality and authenticity. Share your bot with thousands of potential users in our growing community."
+          description="Share your bot with thousands of users. Fill out the form below with your bot details and our team will review it for listing on Telegram Bot Hub."
-          metrics={[
+          inputs={[
-            {
+            { name: "botName", type: "text", placeholder: "Bot Name", required: true },
-              value: "Simple Process",              title: "Fill out a quick form with your bot details and link"},
+            { name: "botUsername", type: "text", placeholder: "Bot Username (e.g., @mybot)", required: true },
-            {
+            { name: "developerName", type: "text", placeholder: "Developer Name", required: true },
-              value: "Free Listing",              title: "Get featured in our directory at no cost"},
+            { name: "developerEmail", type: "email", placeholder: "Developer Email", required: true },
+            { name: "category", type: "text", placeholder: "Category (e.g., AI, Music, Download, Utility, Crypto, Education)", required: true },
+            { name: "websiteUrl", type: "url", placeholder: "Website URL (optional)", required: false },
           ]}
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/modern-illustration-of-a-person-working--1773243149449-f5529369.png"
+          textarea={{
-          imageAlt="Bot Submission Process"
+            name: "description",            placeholder: "Describe your bot's features and functionality (min 50 characters)",            rows: 6,
-          mediaAnimation="slide-up"
+            required: true,
-          metricsAnimation="slide-up"
+          }}
           useInvertedBackground={false}
-        />
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/a-telegram-bot-interface-screenshot-show-1773243153207-c6149c84.png"
-      </div>
+          imageAlt="Submit Your Bot"
-
-      <div id="submit-contact" data-section="submit-contact">
-        <ContactSplit
-          tag="Ready to Submit?"
-          tagIcon={Bell}
-          title="Submit Your Bot Today"
-          description="Join hundreds of bot creators who have successfully launched their projects on Telegram Bot Hub. Our team reviews submissions within 24-48 hours."
-          background={{ variant: "sparkles-gradient" }}
-          useInvertedBackground={true}
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/modern-illustration-of-a-person-working--1773243149449-f5529369.png"
-          imageAlt="Submit Bot Contact"
           mediaAnimation="slide-up"
           mediaPosition="right"
-          inputPlaceholder="Enter your email"
+          buttonText="Submit Bot"
-          buttonText="Get Started"
+          onSubmit={handleSubmit}
-          termsText="We'll send you submission guidelines and next steps. Your bot will be reviewed by our team to ensure quality standards."
         />
       </div>
 
       <div id="footer" data-section="footer">
         <FooterLogoEmphasis
-          columns={footerColumns}
           logoText="Telegram Bot Hub"
+          columns={footerColumns}
         />
       </div>
     </ThemeProvider>