Some Polishing

README.md

@@ -1,80 +1,26 @@
-<h1 align="center">
-  🐉🔥 Renderdragon 🔥🐉
-</h1>
+# Renderdragon
 
-<p align="center">
-  <img src="https://renderdragon.org/renderdragon.png" alt="Renderdragon Logo" width="200" />
-</p>
+Renderdragon is a web platform offering free, ad-free tools, assets, music, and shaders for Minecraft content creators to level up their YouTube videos and thumbnails.
 
-<p align="center">
-  <b>FREE Tools & Assets for Minecraft YouTube Creators</b><br>
-  No ads. No gimmicks. Just pure creative power.<br>
-  <a href="https://renderdragon.org">🌐 renderdragon.org</a> •
-  <a href="https://discord.com/invite/d9zxkkdBWV">💬 Join our Discord</a>
-</p>
+## Tools
 
----
+- **YouTube Tools** – Download thumbnails and see stats
+- **Copyright Checker** – Check if music is safe for content
+- **Background Generator** – Create custom backgrounds
+- **Text Generator** – Generate pixel-style text overlays
+- **Player Renderer** – Render Minecraft player skins
 
-## 🧱 What is Renderdragon?
+## Assets
 
-**Renderdragon** is your ultimate toolkit for creating **Minecraft YouTube content**. Whether you're crafting a cinematic masterpiece or just getting started with Let’s Plays, we’ve got you covered — **totally free** and **ad-free**.
+Browse hundreds of free resources including music, sound effects, animations, fonts, images, and icons — all curated for Minecraft YouTube creators.
 
-### 🔧 Included Tools:
-- 🎵 Royalty-Free **Music & SFX Library**
-- 🎬 **Animations** & visual overlays
-- 🤖 **AI-Powered Title Generator**
-- 📥 **YouTube Video Downloader**
-- ⚠️ **Copyright Checker**
+## Links
 
-> All with a **pixel art** feel and built just for creators.
+- Website: https://renderdragon.org
+- Discord: https://discord.renderdragon.org
+- Twitter: https://x.com/_renderdragon
+- YouTube: https://www.youtube.com/channel/UCOheNYpPEHcS2ljttRmllxg
 
----
+## Tech
 
-## 🚀 Why Renderdragon?
-
-- 🟩 **No ads, no sketchy popups**
-- 🟦 Built **by creators, for creators**
-- 🟨 Everything tailored for **Minecraft content**
-- 🟪 Beautiful retro UI with **pixel art** aesthetic
-- 🟥 100% **free to use**, forever
-
----
-
-## 🐉 Our Mascot
-
-Meet the **Enderdragon with fire breath** — our fierce but friendly symbol of power, creativity, and Minecraft-y goodness. 🔥
-
----
-
-## 📡 Join the Community
-
-💬 Hop into the conversation and get sneak peeks of new assets:
-👉 [discord.renderdragon.org](https://discord.renderdragon.org)
-
----
-
-## 📎 Links
-
-- 🌐 Website: [renderdragon.org](https://renderdragon.org)
-- 📢 Twitter: https://x.com/_renderdragon
-- 🎥 YouTube: https://www.youtube.com/channel/UCOheNYpPEHcS2ljttRmllxg
-
----
-
-## 🛠️ Tech Stack (for the curious)
-
-> Built using **Vite**, **React**, **Tailwind css**, **Shadcn/ui**, and a dash of **voxel magic**.
-
----
-
-## ⭐ Support / Contribute
-
-Right now we're focused on helping creators — not donations. If you want to contribute, join our [Discord](https://discord.renderdragon.org), share your ideas, or help spread the word!
-
-> 💚 Built with passion for Minecraft creators everywhere.
-
----
-
-<p align="center">
-  <i>"Fuel your channel. Feed the dragon."</i> 🐉
-</p>
+Vite, React, Tailwind CSS, Shadcn/ui, Supabase, Cloudflare Workers.

index.html

@@ -38,6 +38,7 @@
   <link rel="preconnect" href="https://fonts.cdnfonts.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&family=Chakra+Petch:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
   <link href="https://fonts.cdnfonts.com/css/minecraftia" rel="stylesheet">
+  <link href="https://fonts.cdnfonts.com/css/minecraft-3" rel="stylesheet">
 </head>
 
 

src/components/resources/GreenVoidPopup.tsx

@@ -0,0 +1,98 @@
+import { useState, useEffect } from 'react';
+import {
+  Dialog,
+  DialogContent,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { IconX, IconPalette, IconBrightness, IconEye, IconCloud, IconSparkles } from '@tabler/icons-react';
+
+const GREEN_VOID_KEY = 'green-void-changelog-dismissed';
+const MC_PLAYLIST_KEY = 'mc-creator-playlist-changelog-dismissed';
+
+const GreenVoidPopup = () => {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    const greenVoidDismissed = localStorage.getItem(GREEN_VOID_KEY);
+    const mcPlaylistDismissed = localStorage.getItem(MC_PLAYLIST_KEY);
+    if (!greenVoidDismissed && mcPlaylistDismissed) {
+      setOpen(true);
+    }
+  }, []);
+
+  const dismiss = () => {
+    localStorage.setItem(GREEN_VOID_KEY, 'true');
+    setOpen(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(o) => { if (!o) dismiss(); }}>
+      <DialogContent className="sm:max-w-lg pixel-corners bg-gradient-to-b from-card/95 to-card/70 border-green-500/20 max-h-[90vh] overflow-y-auto">
+        <div className="space-y-5">
+          <h1 className="text-2xl font-minecraftia font-bold text-center leading-tight">
+            Green Void Shader Pack
+          </h1>
+
+          <img
+            src="/VERT_Screencast_20260705_160503.gif"
+            alt="Green Void Shader Pack"
+            className="w-full rounded-lg border border-border/40"
+          />
+
+          <div className="space-y-3 text-sm text-muted-foreground">
+            <p className="text-foreground/80 font-medium">
+              Green Void is a Minecraft shader pack designed for content creators. Change the chroma color of the sky, terrain, and entities to create stunning thumbnail visuals.
+            </p>
+
+            <div>
+              <h4 className="text-xs font-semibold text-foreground/90 uppercase tracking-wider mb-2 flex items-center gap-1.5 font-minecraftia">
+                <IconSparkles className="h-3.5 w-3.5 text-green-400" />
+                Features
+              </h4>
+              <ul className="space-y-1.5">
+                <li className="flex items-start gap-2">
+                  <IconCloud className="h-4 w-4 text-green-400 mt-0.5 flex-shrink-0" />
+                  <span><strong className="text-foreground/80">Chroma sky</strong> — recolor the sky with any chroma color</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <IconBrightness className="h-4 w-4 text-green-400 mt-0.5 flex-shrink-0" />
+                  <span><strong className="text-foreground/80">Chroma terrain</strong> — apply chroma effects to all terrain blocks</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <IconEye className="h-4 w-4 text-green-400 mt-0.5 flex-shrink-0" />
+                  <span><strong className="text-foreground/80">Chroma entities</strong> — change entity colors for seamless composites</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <IconPalette className="h-4 w-4 text-green-400 mt-0.5 flex-shrink-0" />
+                  <span><strong className="text-foreground/80">Full color control</strong> — pick any chroma key for perfect thumbnails</span>
+                </li>
+              </ul>
+            </div>
+
+            <div className="flex flex-col gap-2 pt-2">
+              <a
+                href="https://modrinth.com/shader/greenvoid"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-2 px-4 py-2.5 rounded-md bg-green-500/15 text-green-400 hover:bg-green-500/25 transition-colors text-sm font-medium"
+              >
+                <img src="/modrinth.svg" alt="Modrinth" className="h-5 w-5" />
+                Download on Modrinth
+                <IconX className="h-3 w-3 ml-auto rotate-45" />
+              </a>
+            </div>
+          </div>
+
+          <Button
+            onClick={dismiss}
+            className="w-full pixel-corners bg-green-600 hover:bg-green-700 font-minecraft font-bold text-white"
+          >
+            Got it!
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default GreenVoidPopup;

src/components/resources/ResourceCard.tsx

@@ -21,11 +21,6 @@ interface ResourceCardProps {
 
 const ResourceCard = ({ resource, onClick }: ResourceCardProps) => {
   const [isImageLoaded, setIsImageLoaded] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  const [hoverToPlay] = useState(() => {
-    const stored = localStorage.getItem('hoverToPlay');
-    return stored === null ? false : stored === 'true';
-  });
   const { user } = useAuth();
 
   // Reset image loaded state when resource changes
@@ -207,7 +202,7 @@ const ResourceCard = ({ resource, onClick }: ResourceCardProps) => {
           </div>
         );
       case "animations":
-        return isHovered && hoverToPlay ? (
+        return (
           <div
             onClick={handlePreviewClick}
             className="relative aspect-video bg-muted/20 rounded-md overflow-hidden mb-3 cursor-default"
@@ -227,13 +222,6 @@ const ResourceCard = ({ resource, onClick }: ResourceCardProps) => {
               </div>
             )}
           </div>
-        ) : (
-          <div className="relative aspect-video bg-muted/10 rounded-md overflow-hidden mb-3 cursor-default flex items-center justify-center text-muted-foreground text-xs">
-            <div className="flex items-center gap-2">
-              <IconVideo className="h-5 w-5" />
-              <span>Hover to play</span>
-            </div>
-          </div>
         );
       default:
         return null;
@@ -244,8 +232,6 @@ const ResourceCard = ({ resource, onClick }: ResourceCardProps) => {
     <motion.div
       ref={cardRef}
       onClick={() => onClick(resource)}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
       className={cn(
         "pixel-card group cursor-pointer hover:border-primary transition-all duration-300 h-full",
         isFavorite && "border-red-500/50",

src/pages/Account.tsx

@@ -8,11 +8,10 @@ import { Label } from '@/components/ui/label';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Separator } from '@/components/ui/separator';
-import { Switch } from '@/components/ui/switch';
 import Navbar from '@/components/Navbar';
 import Footer from '@/components/Footer';
 import { toast } from 'sonner';
-import { IconUser, IconMail, IconCalendar, IconLogout, IconVideo } from '@tabler/icons-react';
+import { IconUser, IconMail, IconCalendar, IconLogout } from '@tabler/icons-react';
 import { motion } from 'framer-motion';
 import { Helmet } from 'react-helmet-async';
 import AccountPageSkeleton from '@/components/skeletons/AccountPageSkeleton';
@@ -25,10 +24,7 @@ const Account = () => {
   const [firstName, setFirstName] = useState('');
   const [lastName, setLastName] = useState('');
   const [isUpdating, setIsUpdating] = useState(false);
-  const [hoverToPlay, setHoverToPlay] = useState(() => {
-    const stored = localStorage.getItem('hoverToPlay');
-    return stored === null ? false : stored === 'true';
-  });
+
   const avatarSrc: string | undefined =
     profile?.avatar_url ??
     ((user?.user_metadata as Record<string, unknown> | undefined)?.avatar_url as string | undefined) ??
@@ -234,23 +230,7 @@ const Account = () => {
                   <div className="space-y-4">
                     <h3 className="text-lg font-jetbrains-mono text-cow-purple">Preferences</h3>
 
-                    <div className="flex items-center justify-between">
-                      <div className="flex items-center gap-2">
-                        <IconVideo className="h-4 w-4 text-muted-foreground" />
-                        <div>
-                          <span className="text-sm font-medium">Hover to Play Videos</span>
-                          <p className="text-xs text-muted-foreground">Auto-play video previews when hovering over animation cards</p>
-                        </div>
-                      </div>
-                      <Switch
-                        checked={hoverToPlay}
-                        onCheckedChange={(checked) => {
-                          setHoverToPlay(checked);
-                          localStorage.setItem('hoverToPlay', String(checked));
-                          toast.success(checked ? 'Hover to play enabled' : 'Hover to play disabled');
-                        }}
-                      />
-                    </div>
+
                   </div>
 
                   <div className="flex flex-col sm:flex-row justify-between gap-4 pt-6">

src/pages/ResourcesHub.tsx

@@ -17,6 +17,7 @@ import MusicPacksTab from '@/components/resources/MusicPacksTab';
 import MusicMoodFilter from '@/components/resources/MusicMoodFilter';
 import MinecraftMusicFilter from '@/components/resources/MinecraftMusicFilter';
 import MinecraftChangelogPopup from '@/components/resources/MinecraftChangelogPopup';
+import GreenVoidPopup from '@/components/resources/GreenVoidPopup';
 import McSoundsBrowser from '@/components/resources/McSoundsBrowser';
 import McIconsBrowser from '@/components/resources/McIconsBrowser';
 import AuthDialog from '@/components/auth/AuthDialog';
@@ -572,9 +573,10 @@ const ResourcesHub = () => {
         open={authDialogOpen}
         onOpenChange={setAuthDialogOpen}
       />
-
       <MinecraftChangelogPopup />
 
+      <GreenVoidPopup />
+
 
 
 

tailwind.config.ts

@@ -22,8 +22,9 @@ export default {
 			fontFamily: {
 				geist: ['Geist Sans', 'sans-serif'],
 				'geist-mono': ['Geist Mono', 'monospace'],
-				minecraftia: ['Minecraftia', 'monospace'],
-				'jetbrains-mono': ['JetBrains Mono', 'monospace'],
+			minecraftia: ['Minecraftia', 'monospace'],
+			minecraft: ['Minecraft', 'sans-serif'],
+			'jetbrains-mono': ['JetBrains Mono', 'monospace'],
 			},
 			colors: {
 				border: 'hsl(var(--border))',