From c2e7ab8e3bfcf8ac77e1bc2d4837f6391972e6d3 Mon Sep 17 00:00:00 2001
From: Coder-soft <powernplant101@gmail.com>
Date: Thu, 1 Oct 2026 21:55:15 +0500
Subject: [PATCH 1/2] feat: redesign Renderbot page around the Discord
 requirement

---
 src/pages/Renderbot.tsx | 98 +++++++++++++++++++++++++++++++++++------
 1 file changed, 85 insertions(+), 13 deletions(-)

diff --git a/src/pages/Renderbot.tsx b/src/pages/Renderbot.tsx
index 6bcf15e4..e4588055 100644
--- a/src/pages/Renderbot.tsx
+++ b/src/pages/Renderbot.tsx
@@ -1,10 +1,12 @@
 import { motion } from 'framer-motion';
-import { IconRobot, IconCommand } from '@tabler/icons-react';
+import { IconRobot, IconCommand, IconBrandDiscord, IconArrowRight } from '@tabler/icons-react';
 import Navbar from '@/components/Navbar';
 import Footer from '@/components/Footer';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Helmet } from 'react-helmet-async';
 
+const DISCORD_URL = 'https://discord.renderdragon.org';
+
 interface BotCommand {
   name: string;
   description: string;
@@ -49,6 +51,21 @@ const commands: BotCommand[] = [
   }
 ];
 
+const steps = [
+  {
+    title: 'Join the Discord',
+    description: 'RenderBot only runs inside the official RenderDragon server. Joining is required before you can use any command.',
+  },
+  {
+    title: 'Open a bot channel',
+    description: 'Head to the bot channel in the server. There is nothing to download or install.',
+  },
+  {
+    title: 'Type a command',
+    description: 'Send a command like !check and RenderBot replies with the result in seconds.',
+  },
+];
+
 const Renderbot = () => {
   const containerVariants = {
     hidden: { opacity: 0 },
@@ -75,8 +92,9 @@ const Renderbot = () => {
     <div className="min-h-screen flex flex-col">
       <Helmet>
         <title>Renderbot - Discord Bot for Minecraft Content Creators</title>
-        <meta name="description" content="A powerful Discord bot designed for content creators. Check copyright status, fetch video information, and manage YouTube content with simple commands." />
+        <meta name="description" content="Renderbot is a Discord bot for content creators. Join the official RenderDragon Discord server to check copyright, fetch video info, and manage YouTube content with simple commands." />
         <meta property="og:title" content="Renderbot - Renderdragon" />
+        <meta property="og:description" content="Join the official RenderDragon Discord server to use Renderbot." />
         <meta property="og:image" content="https://renderdragon.org/ogimg/renderbot.png" />
       </Helmet>
       <Navbar />
@@ -89,7 +107,7 @@ const Renderbot = () => {
             initial="hidden"
             animate="visible"
           >
-            <motion.div 
+            <motion.div
               className="text-center mb-12"
               variants={itemVariants}
             >
@@ -112,22 +130,60 @@ const Renderbot = () => {
               <h1 className="text-4xl md:text-5xl font-minecraftia mb-4">
                 Meet <span className="text-cow-purple">Renderbot</span>
               </h1>
-              <p className="text-muted-foreground max-w-2xl mx-auto mb-8">
+              <p className="text-muted-foreground max-w-2xl mx-auto">
                 Your powerful Discord companion for content creation. Check copyright status, fetch video information, and manage YouTube content with simple commands.
               </p>
-              <a 
-                  href="https://discord.renderdragon.org" 
-                  target="_blank" 
+            </motion.div>
+
+            {/* Requirement */}
+            <motion.div variants={itemVariants} className="mb-14">
+              <div className="bg-card pixel-corners border-2 border-cow-purple/50 p-8 text-center">
+                <div className="inline-flex items-center gap-2 rounded-md border border-cow-purple/40 bg-cow-purple/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.18em] text-cow-purple mb-5">
+                  <IconBrandDiscord className="h-4 w-4" />
+                  Official RenderDragon Discord
+                </div>
+                <h2 className="text-2xl md:text-3xl font-minecraftia mb-4">
+                  Renderbot lives in our <span className="text-cow-purple">Discord</span>
+                </h2>
+                <p className="text-muted-foreground max-w-2xl mx-auto mb-7">
+                  You have to join the official RenderDragon Discord server to use Renderbot.
+                  It is not a website or an app you install &mdash; every command runs right in the
+                  server, and membership is required.
+                </p>
+                <a
+                  href={DISCORD_URL}
+                  target="_blank"
                   rel="noopener noreferrer"
-                  className="pixel-btn-primary inline-flex items-center space-x-2 pt-0 mt-0"
+                  className="pixel-btn-primary inline-flex items-center space-x-2"
                 >
-                  <span>join discord</span>
-                  <img className="w-4 h-4" src="/assets/discord_icon.png" alt="Discord" />
+                  <span>join the discord</span>
+                  <img className="w-4 h-4" src="/assets/discord_icon.png" alt="" aria-hidden="true" />
                 </a>
+              </div>
             </motion.div>
-            
 
-            {/* Commands Section */}
+            {/* How to use */}
+            <motion.div variants={itemVariants} className="mb-14">
+              <h2 className="text-2xl md:text-3xl font-minecraftia text-center mb-8">
+                How to <span className="text-cow-purple">use it</span>
+              </h2>
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                {steps.map((step, index) => (
+                  <div
+                    key={step.title}
+                    className="bg-card pixel-corners border border-border p-6 h-full"
+                  >
+                    <div className="mb-4 flex h-9 w-9 items-center justify-center rounded-md bg-cow-purple/15 font-jetbrains-mono text-sm font-bold text-cow-purple">
+                      {index + 1}
+                    </div>
+                    <h3 className="text-lg font-geist font-medium mb-2">{step.title}</h3>
+                    <p className="text-sm text-muted-foreground">{step.description}</p>
+                  </div>
+                ))}
+              </div>
+            </motion.div>
+
+            {/* Commands */}
             <motion.div variants={itemVariants}>
               <h2 className="text-2xl md:text-3xl font-minecraftia text-center mb-8">
                 Available <span className="text-cow-purple">Commands</span>
@@ -155,6 +211,22 @@ const Renderbot = () => {
                 ))}
               </div>
             </motion.div>
+
+            {/* CTA */}
+            <motion.div variants={itemVariants} className="mt-14 text-center">
+              <p className="text-muted-foreground mb-5">
+                Ready to try it? Everything happens inside the server.
+              </p>
+              <a
+                href={DISCORD_URL}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="pixel-btn-primary inline-flex items-center space-x-2"
+              >
+                <span>join the discord</span>
+                <IconArrowRight className="w-4 h-4" />
+              </a>
+            </motion.div>
           </motion.div>
         </div>
       </main>
@@ -164,4 +236,4 @@ const Renderbot = () => {
   );
 };
 
-export default Renderbot;
\ No newline at end of file
+export default Renderbot;

From 587f6d09f2262b4a1499a29c5cf13d79da8b38d2 Mon Sep 17 00:00:00 2001
From: Coder-soft <powernplant101@gmail.com>
Date: Thu, 1 Oct 2026 21:59:17 +0500
Subject: [PATCH 2/2] feat: strip the Renderbot page down to the Discord note

---
 src/pages/Renderbot.tsx | 278 +++++++---------------------------------
 1 file changed, 49 insertions(+), 229 deletions(-)

diff --git a/src/pages/Renderbot.tsx b/src/pages/Renderbot.tsx
index e4588055..2b63372e 100644
--- a/src/pages/Renderbot.tsx
+++ b/src/pages/Renderbot.tsx
@@ -1,239 +1,59 @@
 import { motion } from 'framer-motion';
-import { IconRobot, IconCommand, IconBrandDiscord, IconArrowRight } from '@tabler/icons-react';
+import { IconBrandDiscord } from '@tabler/icons-react';
 import Navbar from '@/components/Navbar';
 import Footer from '@/components/Footer';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Helmet } from 'react-helmet-async';
 
 const DISCORD_URL = 'https://discord.renderdragon.org';
 
-interface BotCommand {
-  name: string;
-  description: string;
-}
-
-const commands: BotCommand[] = [
-  {
-    name: '!check',
-    description: 'Check the copyright status of a song or YouTube video'
-  },
-  {
-    name: '!fetch',
-    description: 'Fetch detailed information about a YouTube video'
-  },
-  {
-    name: '!thumb',
-    description: 'Get the HD thumbnail of a YouTube video'
-  },
-  {
-    name: '!youtube',
-    description: 'Get detailed statistics for a YouTube channel'
-  },
-  {
-    name: '!getid',
-    description: 'Get the channel ID for a given YouTube handle and view channel stats'
-  },
-  {
-    name: '!extract',
-    description: 'Extract audio from a YouTube video and send it as an MP3 file'
-  },
-  {
-    name: '!submit',
-    description: 'Submit a file (font, SFX, music, animation) to be categorized'
-  },
-  {
-    name: '!help',
-    description: 'Show all available commands and their usage'
-  },
-  {
-    name: '!info',
-    description: 'Show information about the bot'
-  }
-];
-
-const steps = [
-  {
-    title: 'Join the Discord',
-    description: 'RenderBot only runs inside the official RenderDragon server. Joining is required before you can use any command.',
-  },
-  {
-    title: 'Open a bot channel',
-    description: 'Head to the bot channel in the server. There is nothing to download or install.',
-  },
-  {
-    title: 'Type a command',
-    description: 'Send a command like !check and RenderBot replies with the result in seconds.',
-  },
-];
-
-const Renderbot = () => {
-  const containerVariants = {
-    hidden: { opacity: 0 },
-    visible: {
-      opacity: 1,
-      transition: {
-        staggerChildren: 0.1
-      }
-    }
-  };
-
-  const itemVariants = {
-    hidden: { opacity: 0, y: 20 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: {
-        duration: 0.5
-      }
-    }
-  };
-
-  return (
-    <div className="min-h-screen flex flex-col">
-      <Helmet>
-        <title>Renderbot - Discord Bot for Minecraft Content Creators</title>
-        <meta name="description" content="Renderbot is a Discord bot for content creators. Join the official RenderDragon Discord server to check copyright, fetch video info, and manage YouTube content with simple commands." />
-        <meta property="og:title" content="Renderbot - Renderdragon" />
-        <meta property="og:description" content="Join the official RenderDragon Discord server to use Renderbot." />
-        <meta property="og:image" content="https://renderdragon.org/ogimg/renderbot.png" />
-      </Helmet>
-      <Navbar />
-
-      <main className="flex-grow pt-24 pb-16 cow-grid-bg">
-        <div className="container mx-auto px-4">
-          <motion.div
-            className="max-w-4xl mx-auto"
-            variants={containerVariants}
-            initial="hidden"
-            animate="visible"
-          >
-            <motion.div
-              className="text-center mb-12"
-              variants={itemVariants}
+const Renderbot = () => (
+  <div className="min-h-screen flex flex-col">
+    <Helmet>
+      <title>Renderbot - Discord Bot for Minecraft Content Creators</title>
+      <meta name="description" content="Renderbot is a Discord bot for content creators. Join the official RenderDragon Discord server to use it." />
+      <meta property="og:title" content="Renderbot - Renderdragon" />
+      <meta property="og:description" content="Join the official RenderDragon Discord server to use Renderbot." />
+      <meta property="og:image" content="https://renderdragon.org/ogimg/renderbot.png" />
+    </Helmet>
+    <Navbar />
+
+    <main className="flex-grow pt-24 pb-16 cow-grid-bg">
+      <div className="container mx-auto px-4">
+        <motion.div
+          className="max-w-2xl mx-auto"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+        >
+          <div className="bg-card pixel-corners border-2 border-cow-purple/50 p-8 text-center">
+            <div className="inline-flex items-center gap-2 rounded-md border border-cow-purple/40 bg-cow-purple/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.18em] text-cow-purple mb-5">
+              <IconBrandDiscord className="h-4 w-4" />
+              Official RenderDragon Discord
+            </div>
+            <h2 className="text-2xl md:text-3xl font-minecraftia mb-4">
+              Renderbot lives in our <span className="text-cow-purple">Discord</span>
+            </h2>
+            <p className="text-muted-foreground mb-7">
+              You have to join the official RenderDragon Discord server to use Renderbot.
+              It is not a website or an app you install &mdash; every command runs right in the
+              server, and membership is required.
+            </p>
+            <a
+              href={DISCORD_URL}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="pixel-btn-primary inline-flex items-center space-x-2"
             >
-              <div className="inline-block mb-4">
-                <motion.div
-                  className="p-4 bg-cow-purple/10 rounded-full"
-                  animate={{
-                    scale: [1, 1.1, 1],
-                    rotate: [0, -5, 5, 0],
-                  }}
-                  transition={{
-                    duration: 3,
-                    repeat: Infinity,
-                    ease: "easeInOut"
-                  }}
-                >
-                  <IconRobot className="w-12 h-12 text-cow-purple" />
-                </motion.div>
-              </div>
-              <h1 className="text-4xl md:text-5xl font-minecraftia mb-4">
-                Meet <span className="text-cow-purple">Renderbot</span>
-              </h1>
-              <p className="text-muted-foreground max-w-2xl mx-auto">
-                Your powerful Discord companion for content creation. Check copyright status, fetch video information, and manage YouTube content with simple commands.
-              </p>
-            </motion.div>
-
-            {/* Requirement */}
-            <motion.div variants={itemVariants} className="mb-14">
-              <div className="bg-card pixel-corners border-2 border-cow-purple/50 p-8 text-center">
-                <div className="inline-flex items-center gap-2 rounded-md border border-cow-purple/40 bg-cow-purple/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.18em] text-cow-purple mb-5">
-                  <IconBrandDiscord className="h-4 w-4" />
-                  Official RenderDragon Discord
-                </div>
-                <h2 className="text-2xl md:text-3xl font-minecraftia mb-4">
-                  Renderbot lives in our <span className="text-cow-purple">Discord</span>
-                </h2>
-                <p className="text-muted-foreground max-w-2xl mx-auto mb-7">
-                  You have to join the official RenderDragon Discord server to use Renderbot.
-                  It is not a website or an app you install &mdash; every command runs right in the
-                  server, and membership is required.
-                </p>
-                <a
-                  href={DISCORD_URL}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="pixel-btn-primary inline-flex items-center space-x-2"
-                >
-                  <span>join the discord</span>
-                  <img className="w-4 h-4" src="/assets/discord_icon.png" alt="" aria-hidden="true" />
-                </a>
-              </div>
-            </motion.div>
-
-            {/* How to use */}
-            <motion.div variants={itemVariants} className="mb-14">
-              <h2 className="text-2xl md:text-3xl font-minecraftia text-center mb-8">
-                How to <span className="text-cow-purple">use it</span>
-              </h2>
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-                {steps.map((step, index) => (
-                  <div
-                    key={step.title}
-                    className="bg-card pixel-corners border border-border p-6 h-full"
-                  >
-                    <div className="mb-4 flex h-9 w-9 items-center justify-center rounded-md bg-cow-purple/15 font-jetbrains-mono text-sm font-bold text-cow-purple">
-                      {index + 1}
-                    </div>
-                    <h3 className="text-lg font-geist font-medium mb-2">{step.title}</h3>
-                    <p className="text-sm text-muted-foreground">{step.description}</p>
-                  </div>
-                ))}
-              </div>
-            </motion.div>
-
-            {/* Commands */}
-            <motion.div variants={itemVariants}>
-              <h2 className="text-2xl md:text-3xl font-minecraftia text-center mb-8">
-                Available <span className="text-cow-purple">Commands</span>
-              </h2>
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                {commands.map((command) => (
-                  <motion.div
-                    key={command.name}
-                    variants={itemVariants}
-                    whileHover={{ scale: 1.02 }}
-                    transition={{ duration: 0.2 }}
-                  >
-                    <Card className="h-full border-2 border-cow-purple/20 hover:border-cow-purple/40 transition-colors pixel-corners">
-                      <CardHeader>
-                        <CardTitle className="flex items-center space-x-2">
-                          <IconCommand className="w-5 h-5 text-cow-purple" />
-                          <span className="font-mono">{command.name}</span>
-                        </CardTitle>
-                      </CardHeader>
-                      <CardContent>
-                        <p className="text-muted-foreground">{command.description}</p>
-                      </CardContent>
-                    </Card>
-                  </motion.div>
-                ))}
-              </div>
-            </motion.div>
-
-            {/* CTA */}
-            <motion.div variants={itemVariants} className="mt-14 text-center">
-              <p className="text-muted-foreground mb-5">
-                Ready to try it? Everything happens inside the server.
-              </p>
-              <a
-                href={DISCORD_URL}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="pixel-btn-primary inline-flex items-center space-x-2"
-              >
-                <span>join the discord</span>
-                <IconArrowRight className="w-4 h-4" />
-              </a>
-            </motion.div>
-          </motion.div>
-        </div>
-      </main>
-
-      <Footer />
-    </div>
-  );
-};
+              <span>join the discord</span>
+              <img className="w-4 h-4" src="/assets/discord_icon.png" alt="" aria-hidden="true" />
+            </a>
+          </div>
+        </motion.div>
+      </div>
+    </main>
+
+    <Footer />
+  </div>
+);
 
 export default Renderbot;