From add53db69cf9d091a820fa31fa9d517fce43ff69 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 11 Mar 2026 15:42:27 +0000
Subject: [PATCH 1/4] Add src/app/bot/[botId]/page.tsx

---
 src/app/bot/[botId]/page.tsx | 230 +++++++++++++++++++++++++++++++++++
 1 file changed, 230 insertions(+)
 create mode 100644 src/app/bot/[botId]/page.tsx

diff --git a/src/app/bot/[botId]/page.tsx b/src/app/bot/[botId]/page.tsx
new file mode 100644
index 0000000..8ebcf27
--- /dev/null
+++ b/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>
+  );
+}
\ No newline at end of file

From 81920fd53fc90775180cf64dac843c422d8bd88e Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 11 Mar 2026 15:42:27 +0000
Subject: [PATCH 2/4] Add src/app/explore-bots/page.tsx

---
 src/app/explore-bots/page.tsx | 216 ++++++++++++++++++++++++++++++++++
 1 file changed, 216 insertions(+)
 create mode 100644 src/app/explore-bots/page.tsx

diff --git a/src/app/explore-bots/page.tsx b/src/app/explore-bots/page.tsx
new file mode 100644
index 0000000..983f4a3
--- /dev/null
+++ b/src/app/explore-bots/page.tsx
@@ -0,0 +1,216 @@
+"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}
+          gridVariant="uniform-all-items-equal"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoEmphasis
+          logoText="Telegram Bot Hub"
+          columns={footerColumns}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

From 27a37ae0a5891b832c647f556d1deb33731e18d4 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 11 Mar 2026 15:42:28 +0000
Subject: [PATCH 3/4] Update src/app/page.tsx

---
 src/app/page.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index bfc1317..334f668 100644
--- a/src/app/page.tsx
+++ b/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"
         />
@@ -102,13 +102,13 @@ export default function HomePage() {
           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,
-            },
+              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,
-            },
+              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,
-            },
+              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,
             },

From 794a2eb62a2cc844349fd76a27d5b4fe56797323 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 11 Mar 2026 15:42:28 +0000
Subject: [PATCH 4/4] Update src/app/submit/page.tsx

---
 src/app/submit/page.tsx | 81 +++++++++++++++++------------------------
 1 file changed, 33 insertions(+), 48 deletions(-)

diff --git a/src/app/submit/page.tsx b/src/app/submit/page.tsx
index 99c9b84..a975885 100644
--- a/src/app/submit/page.tsx
+++ b/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 ContactSplit from "@/components/sections/contact/ContactSplit";
+import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
 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={[
-            { name: "Home", id: "/" },
-            { name: "Directory", id: "/directory" },
-            { name: "Categories", id: "/categories" },
-            { name: "Submit Bot", id: "/submit" },
-            { name: "Contact", id: "/contact" },
-          ]}
+          navItems={navItems}
           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">
-        <MetricSplitMediaAbout
-          tag="How It Works"
-          tagIcon={Lightbulb}
+      <div id="submit-form" data-section="submit-form">
+        <ContactSplitForm
           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."
-          metrics={[
-            {
-              value: "Simple Process",              title: "Fill out a quick form with your bot details and link"},
-            {
-              value: "Free Listing",              title: "Get featured in our directory at no cost"},
+          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."
+          inputs={[
+            { name: "botName", type: "text", placeholder: "Bot Name", required: true },
+            { name: "botUsername", type: "text", placeholder: "Bot Username (e.g., @mybot)", required: true },
+            { name: "developerName", type: "text", placeholder: "Developer Name", required: true },
+            { 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"
-          imageAlt="Bot Submission Process"
-          mediaAnimation="slide-up"
-          metricsAnimation="slide-up"
+          textarea={{
+            name: "description",            placeholder: "Describe your bot's features and functionality (min 50 characters)",            rows: 6,
+            required: true,
+          }}
           useInvertedBackground={false}
-        />
-      </div>
-
-      <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"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/a-telegram-bot-interface-screenshot-show-1773243153207-c6149c84.png"
+          imageAlt="Submit Your Bot"
           mediaAnimation="slide-up"
           mediaPosition="right"
-          inputPlaceholder="Enter your email"
-          buttonText="Get Started"
-          termsText="We'll send you submission guidelines and next steps. Your bot will be reviewed by our team to ensure quality standards."
+          buttonText="Submit Bot"
+          onSubmit={handleSubmit}
         />
       </div>
 
       <div id="footer" data-section="footer">
         <FooterLogoEmphasis
-          columns={footerColumns}
           logoText="Telegram Bot Hub"
+          columns={footerColumns}
         />
       </div>
     </ThemeProvider>