Update src/app/submit/page.tsx

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>