🌐 Website Prompt for RxDevelopement I want to build a modern, clean, and professional website for my Minecraft development team called RxDevelopement. The site should reflect a premium and creative tech brand. It will showcase our team, plugins, services, and provide a way to contact or join us. 🔧 Key Details: Website Name: RxDevelopement Theme: Dark mode default with Rx-style branding (futuristic tech + clean UI) Color Scheme: Dark background (#0e0e0e) Accent: Electric Cyan (#00ffff) and Rx Purple (#8b5cf6) Text: Light gray and white Logo: Top-left RxDevelopement logo (optional animated) Font: Sleek Google Font like "Poppins" or "Inter" 📄 Pages and Sections: 1. Homepage (/) Bold headline: “⚡ Welcome to RxDevelopement” Subtext: “We craft powerful Minecraft plugins that push the limits of creativity.” CTA Button: "View Plugins" | "Join Us" | "Contact" Animated background or subtle glow effect Hero image or rotating plugin showcase carousel 2. Plugins (/plugins) Display all Rx-branded plugins in cards (name, icon, brief description) Tags (PvP, Economy, Cosmetics, Utility, etc.) Buttons: “View Details” or “Buy Now” Sort or filter support 3. Team (/team) Show team members with: Avatar Name, role (e.g., Developer, Designer) Socials: Discord, GitHub, Twitter 4. About Us (/about) Story behind RxDevelopement Mission, values, and what makes your plugins unique Tech stack used (Java, Maven, Fabric/Spigot/Paper) 5. Join Us (/join) Info on how to apply as a dev, tester, or designer Embedded form or redirect to Discord 6. Contact (/contact) Discord contact: notritik.exe Email field Optional contact form Social media icons (Discord, GitHub, SpigotMC, etc.) 7. Footer © 2025 RxDevelopement Quick links: [Plugins] [Team] [Contact] [Terms] Light pulse animation on hover buttons 🧠 Bonus Features (Optional) Animated "Live Plugin Stats" section (downloads, users, servers) “Plugin of the Month” highlight Newsletter or update feed (latest patch notes) Dark/light mode toggle Fully responsive for mobile & tablet 🚀 Tools You Can Use: Frontend: React.js / Next.js / HTML + Tailwind CSS Hosting: Vercel, Netlify, or GitHub Pages Forms: Formspree or Discord Webhooks Icons: Lucide, Heroicons, or FontAwesome - Initial Deployment
1844079 verified | <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>RxDevelopement | Premium Minecraft Plugins</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --rx-cyan: #00ffff; | |
| --rx-purple: #8b5cf6; | |
| --rx-dark: #0e0e0e; | |
| } | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: var(--rx-dark); | |
| color: #e5e7eb; | |
| scroll-behavior: smooth; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, var(--rx-cyan), var(--rx-purple)); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .glow { | |
| text-shadow: 0 0 10px rgba(0, 255, 255, 0.5); | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| box-shadow: 0 0 0 0 rgba(0, 255, 255, 0.7); | |
| } | |
| 70% { | |
| box-shadow: 0 0 0 10px rgba(0, 255, 255, 0); | |
| } | |
| 100% { | |
| box-shadow: 0 0 0 0 rgba(0, 255, 255, 0); | |
| } | |
| } | |
| .plugin-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0, 255, 255, 0.2); | |
| } | |
| .team-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(139, 92, 246, 0.2); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen flex flex-col"> | |
| <!-- Navbar --> | |
| <nav class="bg-gray-900/80 backdrop-blur-md border-b border-gray-800 fixed w-full z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <a href="#" class="text-2xl font-bold gradient-text">RxDevelopement</a> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-4"> | |
| <a href="#home" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-all hover:bg-gray-800">Home</a> | |
| <a href="#plugins" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-all hover:bg-gray-800">Plugins</a> | |
| <a href="#team" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-all hover:bg-gray-800">Team</a> | |
| <a href="#about" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-all hover:bg-gray-800">About</a> | |
| <a href="#join" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-all hover:bg-gray-800">Join Us</a> | |
| <a href="#contact" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-all hover:bg-gray-800">Contact</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-4 flex items-center md:ml-6"> | |
| <button class="p-1 rounded-full text-gray-400 hover:text-white focus:outline-none"> | |
| <span class="sr-only">View notifications</span> | |
| <i class="fas fa-moon text-lg"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="-mr-2 flex md:hidden"> | |
| <button id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none"> | |
| <span class="sr-only">Open main menu</span> | |
| <i class="fas fa-bars text-lg"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#home" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Home</a> | |
| <a href="#plugins" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Plugins</a> | |
| <a href="#team" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Team</a> | |
| <a href="#about" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">About</a> | |
| <a href="#join" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Join Us</a> | |
| <a href="#contact" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Contact</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="relative pt-32 pb-20 md:pt-40 md:pb-28 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-gray-900 to-gray-800"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6"> | |
| <span class="gradient-text glow">⚡ Welcome to RxDevelopement</span> | |
| </h1> | |
| <p class="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto mb-10"> | |
| We craft powerful Minecraft plugins that push the limits of creativity. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="#plugins" class="px-8 py-3 bg-gradient-to-r from-cyan-500 to-purple-600 rounded-full font-medium text-white hover:shadow-lg hover:shadow-cyan-500/30 transition-all transform hover:scale-105"> | |
| View Plugins | |
| </a> | |
| <a href="#join" class="px-8 py-3 border border-cyan-400 rounded-full font-medium text-cyan-400 hover:bg-cyan-400/10 transition-all transform hover:scale-105"> | |
| Join Our Team | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Plugin Stats --> | |
| <div class="mt-20 grid grid-cols-2 md:grid-cols-4 gap-6 max-w-4xl mx-auto"> | |
| <div class="bg-gray-800/50 backdrop-blur-sm p-6 rounded-xl border border-gray-700 text-center"> | |
| <div class="text-3xl font-bold text-cyan-400 mb-2">50+</div> | |
| <div class="text-gray-300">Plugins</div> | |
| </div> | |
| <div class="bg-gray-800/50 backdrop-blur-sm p-6 rounded-xl border border-gray-700 text-center"> | |
| <div class="text-3xl font-bold text-purple-400 mb-2">10K+</div> | |
| <div class="text-gray-300">Downloads</div> | |
| </div> | |
| <div class="bg-gray-800/50 backdrop-blur-sm p-6 rounded-xl border border-gray-700 text-center"> | |
| <div class="text-3xl font-bold text-cyan-400 mb-2">5K+</div> | |
| <div class="text-gray-300">Servers</div> | |
| </div> | |
| <div class="bg-gray-800/50 backdrop-blur-sm p-6 rounded-xl border border-gray-700 text-center"> | |
| <div class="text-3xl font-bold text-purple-400 mb-2">24/7</div> | |
| <div class="text-gray-300">Support</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Animated background elements --> | |
| <div class="absolute inset-0 overflow-hidden -z-10"> | |
| <div class="absolute top-0 left-0 w-64 h-64 bg-purple-600 rounded-full filter blur-3xl opacity-10"></div> | |
| <div class="absolute bottom-0 right-0 w-64 h-64 bg-cyan-500 rounded-full filter blur-3xl opacity-10"></div> | |
| </div> | |
| </section> | |
| <!-- Plugins Section --> | |
| <section id="plugins" class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4"> | |
| <span class="gradient-text">Our Premium Plugins</span> | |
| </h2> | |
| <p class="text-gray-400 max-w-2xl mx-auto"> | |
| High-quality plugins designed to enhance your Minecraft experience with unique features. | |
| </p> | |
| </div> | |
| <!-- Plugin Filter --> | |
| <div class="flex flex-wrap justify-center gap-3 mb-12"> | |
| <button class="px-4 py-2 rounded-full bg-cyan-500/10 border border-cyan-400 text-cyan-400 font-medium">All</button> | |
| <button class="px-4 py-2 rounded-full bg-gray-800 hover:bg-gray-700 text-gray-300 font-medium">PvP</button> | |
| <button class="px-4 py-2 rounded-full bg-gray-800 hover:bg-gray-700 text-gray-300 font-medium">Economy</button> | |
| <button class="px-4 py-2 rounded-full bg-gray-800 hover:bg-gray-700 text-gray-300 font-medium">Cosmetics</button> | |
| <button class="px-4 py-2 rounded-full bg-gray-800 hover:bg-gray-700 text-gray-300 font-medium">Utility</button> | |
| </div> | |
| <!-- Plugin Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Plugin 1 --> | |
| <div class="plugin-card bg-gray-800 rounded-xl overflow-hidden border border-gray-700 transition-all duration-300 hover:border-cyan-400"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-lg bg-gradient-to-r from-cyan-500 to-purple-600 flex items-center justify-center text-white text-xl"> | |
| <i class="fas fa-shield-alt"></i> | |
| </div> | |
| <h3 class="text-xl font-bold ml-4">RxCombat</h3> | |
| </div> | |
| <p class="text-gray-400 mb-6"> | |
| Advanced PvP plugin with custom combat mechanics, kill effects, and leaderboards. | |
| </p> | |
| <div class="flex flex-wrap gap-2 mb-6"> | |
| <span class="px-3 py-1 bg-gray-700 rounded-full text-xs text-cyan-400">PvP</span> | |
| <span class="px-3 py-1 bg-gray-700 rounded-full text-xs text-purple-400">1.8-1.20</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-cyan-400 font-bold">$14.99</span> | |
| <button class="px-4 py-2 bg-gradient-to-r from-cyan-500 to-purple-600 rounded-lg text-white font-medium hover:opacity-90 transition-all"> | |
| View Details | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Plugin 2 --> | |
| <div class="plugin-card bg-gray-800 rounded-xl overflow-hidden border border-gray-700 transition-all duration-300 hover:border-cyan-400"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-lg bg-gradient-to-r from-purple-500 to-cyan-600 flex items-center justify-center text-white text-xl"> | |
| <i class="fas fa-coins"></i> | |
| </div> | |
| <h3 class="text-xl font-bold ml-4">RxEconomy</h3> | |
| </div> | |
| <p class="text-gray-400 mb-6"> | |
| Complete economy solution with shops, banks, auctions, and custom currencies. | |
| </p> | |
| <div class="flex flex-wrap gap-2 mb-6"> | |
| <span class="px-3 py-1 bg-gray-700 rounded-full text-xs text-cyan-400">Economy</span> | |
| <span class="px-3 py-1 bg-gray-700 rounded-full text-xs text-purple-400">1.16+</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-cyan-400 font-bold">$19.99</span> | |
| <button class="px-4 py-2 bg-gradient-to-r from-cyan-500 to-purple-600 rounded-lg text-white font-medium hover:opacity-90 transition-all"> | |
| View Details | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Plugin 3 --> | |
| <div class="plugin-card bg-gray-800 rounded-xl overflow-hidden border border-gray-700 transition-all duration-300 hover:border-cyan-400"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-lg bg-gradient-to-r from-cyan-500 to-purple-600 flex items-center justify-center text-white text-xl"> | |
| <i class="fas fa-hat-wizard"></i> | |
| </div> | |
| <h3 class="text-xl font-bold ml-4">RxCosmetics</h3> | |
| </div> | |
| <p class="text-gray-400 mb-6"> | |
| Extensive cosmetic system with particles, pets, gadgets, and custom animations. | |
| </p> | |
| <div class="flex flex-wrap gap-2 mb-6"> | |
| <span class="px-3 py-1 bg-gray-700 rounded-full text-xs text-cyan-400">Cosmetics</span> | |
| <span class="px-3 py-1 bg-gray-700 rounded-full text-xs text-purple-400">1.8+</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-cyan-400 font-bold">$24.99</span> | |
| <button class="px-4 py-2 bg-gradient-to-r from-cyan-500 to-purple-600 rounded-lg text-white font-medium hover:opacity-90 transition-all"> | |
| View Details | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Plugin of the Month --> | |
| <div class="mt-16 bg-gradient-to-r from-gray-800 to-gray-900 rounded-xl border border-gray-700 overflow-hidden"> | |
| <div class="p-8 md:p-10"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/3 mb-6 md:mb-0"> | |
| <div class="w-24 h-24 rounded-lg bg-gradient-to-r from-purple-600 to-cyan-500 flex items-center justify-center text-white text-4xl mx-auto md:mx-0"> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <div class="md:w-2/3 md:pl-8"> | |
| <div class="inline-block px-3 py-1 bg-cyan-500/10 text-cyan-400 rounded-full text-sm font-medium mb-3"> | |
| Plugin of the Month | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3">RxSkyblock</h3> | |
| <p class="text-gray-400 mb-6"> | |
| The ultimate skyblock experience with custom islands, challenges, and progression systems. Now with 1.20 support and new island themes! | |
| </p> | |
| <div class="flex flex-wrap gap-3"> | |
| <button class="px-6 py-2 bg-gradient-to-r from-cyan-500 to-purple-600 rounded-lg text-white font-medium hover:opacity-90 transition-all"> | |
| Get It Now | |
| </button> | |
| <button class="px-6 py-2 border border-cyan-400 rounded-lg text-cyan-400 font-medium hover:bg-cyan-400/10 transition-all"> | |
| Learn More | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Team Section --> | |
| <section id="team" class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-800"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4"> | |
| <span class="gradient-text">Meet Our Team</span> | |
| </h2> | |
| <p class="text-gray-400 max-w-2xl mx-auto"> | |
| The talented developers and designers behind RxDevelopement. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Team Member 1 --> | |
| <div class="team-card bg-gray-900 rounded-xl overflow-hidden border border-gray-700 transition-all duration-300 hover:border-purple-500"> | |
| <div class="p-6"> | |
| <div class="flex flex-col items-center text-center"> | |
| <div class="w-24 h-24 rounded-full bg-gradient-to-r from-cyan-500 to-purple-600 p-1 mb-4"> | |
| <img src="https://via.placeholder.com/150" alt="Team Member" class="w-full h-full rounded-full object-cover"> | |
| </div> | |
| <h3 class="text-xl font-bold">Ritik</h3> | |
| <p class="text-cyan-400 mb-4">Lead Developer</p> | |
| <p class="text-gray-400 mb-6"> | |
| Java expert with 5+ years of Minecraft plugin development experience. | |
| </p> | |
| <div class="flex gap-4"> | |
| <a href="#" class="text-gray-400 hover:text-cyan-400 transition-all"> | |
| <i class="fab fa-discord text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-purple-400 transition-all"> | |
| <i class="fab fa-github text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-blue-400 transition-all"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Team Member 2 --> | |
| <div class="team-card bg-gray-900 rounded-xl overflow-hidden border border-gray-700 transition-all duration-300 hover:border-purple-500"> | |
| <div class="p-6"> | |
| <div class="flex flex-col items-center text-center"> | |
| <div class="w-24 h-24 rounded-full bg-gradient-to-r from-purple-500 to-cyan-600 p-1 mb-4"> | |
| <img src="https://via.placeholder.com/150" alt="Team Member" class="w-full h-full rounded-full object-cover"> | |
| </div> | |
| <h3 class="text-xl font-bold">Alex</h3> | |
| <p class="text-purple-400 mb-4">UI/UX Designer</p> | |
| <p class="text-gray-400 mb-6"> | |
| Creates stunning interfaces and user experiences for our plugins. | |
| </p> | |
| <div class="flex gap-4"> | |
| <a href="#" class="text-gray-400 hover:text-cyan-400 transition-all"> | |
| <i class="fab fa-discord text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-purple-400 transition-all"> | |
| <i class="fab fa-github text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-blue-400 transition-all"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Team Member 3 --> | |
| <div class="team-card bg-gray-900 rounded-xl overflow-hidden border border-gray-700 transition-all duration-300 hover:border-purple-500"> | |
| <div class="p-6"> | |
| <div class="flex flex-col items-center text-center"> | |
| <div class="w-24 h-24 rounded-full bg-gradient-to-r from-cyan-500 to-purple-600 p-1 mb-4"> | |
| <img src="https://via.placeholder.com/150" alt="Team Member" class="w-full h-full rounded-full object-cover"> | |
| </div> | |
| <h3 class="text-xl font-bold">Sam</h3> | |
| <p class="text-cyan-400 mb-4">Plugin Developer</p> | |
| <p class="text-gray-400 mb-6"> | |
| Specializes in performance optimization and backend systems. | |
| </p> | |
| <div class="flex gap-4"> | |
| <a href="#" class="text-gray-400 hover:text-cyan-400 transition-all"> | |
| <i class="fab fa-discord text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-purple-400 transition-all"> | |
| <i class="fab fa-github text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-blue-400 transition-all"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6"> | |
| <span class="gradient-text">About RxDevelopement</span> | |
| </h2> | |
| <p class="text-gray-400 mb-6"> | |
| Founded in 2020, RxDevelopement started as a small group of Minecraft enthusiasts with a passion for creating unique server experiences. | |
| </p> | |
| <p class="text-gray-400 mb-6"> | |
| Our mission is to push the boundaries of what's possible in Minecraft plugin development, delivering high-performance, feature-rich plugins with exceptional support. | |
| </p> | |
| <div class="mb-8"> | |
| <h3 class="text-xl font-bold text-cyan-400 mb-4">Our Values</h3> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-cyan-400 mt-1 mr-3"></i> | |
| <span class="text-gray-400">Innovation - We constantly explore new ideas</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-cyan-400 mt-1 mr-3"></i> | |
| <span class="text-gray-400">Quality - Only the best for our customers</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-cyan-400 mt-1 mr-3"></i> | |
| <span class="text-gray-400">Community - We listen and grow together</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="bg-gray-800 rounded-xl p-8 border border-gray-700"> | |
| <h3 class="text-xl font-bold text-purple-400 mb-6">Our Tech Stack</h3> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="flex items-center bg-gray-700/50 p-3 rounded-lg"> | |
| <div class="w-10 h-10 rounded-lg bg-blue-600 flex items-center justify-center text-white mr-3"> | |
| <i class="fab fa-java"></i> | |
| </div> | |
| <span class="font-medium">Java</span> | |
| </div> | |
| <div class="flex items-center bg-gray-700/50 p-3 rounded-lg"> | |
| <div class="w-10 h-10 rounded-lg bg-yellow-500 flex items-center justify-center text-white mr-3"> | |
| <i class="fas fa-cube"></i> | |
| </div> | |
| <span class="font-medium">Spigot</span> | |
| </div> | |
| <div class="flex items-center bg-gray-700/50 p-3 rounded-lg"> | |
| <div class="w-10 h-10 rounded-lg bg-green-600 flex items-center justify-center text-white mr-3"> | |
| <i class="fas fa-leaf"></i> | |
| </div> | |
| <span class="font-medium">Paper</span> | |
| </div> | |
| <div class="flex items-center bg-gray-700/50 p-3 rounded-lg"> | |
| <div class="w-10 h-10 rounded-lg bg-purple-600 flex items-center justify-center text-white mr-3"> | |
| <i class="fas fa-project-diagram"></i> | |
| </div> | |
| <span class="font-medium">Maven</span> | |
| </div> | |
| <div class="flex items-center bg-gray-700/50 p-3 rounded-lg"> | |
| <div class="w-10 h-10 rounded-lg bg-red-500 flex items-center justify-center text-white mr-3"> | |
| <i class="fab fa-git-alt"></i> | |
| </div> | |
| <span class="font-medium">Git</span> | |
| </div> | |
| <div class="flex items-center bg-gray-700/50 p-3 rounded-lg"> | |
| <div class="w-10 h-10 rounded-lg bg-blue-400 flex items-center justify-center text-white mr-3"> | |
| <i class="fab fa-github"></i> | |
| </div> | |
| <span class="font-medium">GitHub</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Join Us Section --> | |
| <section id="join" class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-800"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4"> | |
| <span class="gradient-text">Join Our Team</span> | |
| </h2> | |
| <p class="text-gray-400 max-w-2xl mx-auto"> | |
| We're always looking for talented individuals to join our growing team. | |
| </p> | |
| </div> | |
| <div class="bg-gray-900 rounded-xl border border-gray-700 overflow-hidden"> | |
| <div class="p-8 md:p-10"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold text-cyan-400 mb-6">Open Positions</h3> | |
| <div class="space-y-6"> | |
| <div class="bg-gray-800/50 p-4 rounded-lg border border-gray-700"> | |
| <h4 class="font-bold mb-2">Java Developer</h4> | |
| <p class="text-sm text-gray-400 mb-3"> | |
| Create and maintain high-quality Minecraft plugins with our team. | |
| </p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-2 py-1 bg-gray-700 rounded-full text-xs text-cyan-400">Java</span> | |
| <span class="px-2 py-1 bg-gray-700 rounded-full text-xs text-purple-400">Spigot</span> | |
| <span class="px-2 py-1 bg-gray-700 rounded-full text-xs text-cyan-400">Maven</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800/50 p-4 rounded-lg border border-gray-700"> | |
| <h4 class="font-bold mb-2">UI/UX Designer</h4> | |
| <p class="text-sm text-gray-400 mb-3"> | |
| Design intuitive interfaces for our plugins and web presence. | |
| </p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-2 py-1 bg-gray-700 rounded-full text-xs text-purple-400">Figma</span> | |
| <span class="px-2 py-1 bg-gray-700 rounded-full text-xs text-cyan-400">Photoshop</span> | |
| <span class="px-2 py-1 bg-gray-700 rounded-full text-xs text-purple-400">UI Design</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800/50 p-4 rounded-lg border border-gray-700"> | |
| <h4 class="font-bold mb-2">Plugin Tester</h4> | |
| <p class="text-sm text-gray-400 mb-3"> | |
| Help ensure our plugins are bug-free and user-friendly. | |
| </p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-2 py-1 bg-gray-700 rounded-full text-xs text-cyan-400">Testing</span> | |
| <span class="px-2 py-1 bg-gray-700 rounded-full text-xs text-purple-400">Feedback</span> | |
| <span class="px-2 py-1 bg-gray-700 rounded-full text-xs text-cyan-400">Minecraft</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold text-purple-400 mb-6">Apply Now</h3> | |
| <form class="space-y-4"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-gray-300 mb-1">Full Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-cyan-500 focus:border-transparent text-white placeholder-gray-500"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-300 mb-1">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-cyan-500 focus:border-transparent text-white placeholder-gray-500"> | |
| </div> | |
| <div> | |
| <label for="position" class="block text-sm font-medium text-gray-300 mb-1">Position</label> | |
| <select id="position" class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-cyan-500 focus:border-transparent text-white"> | |
| <option>Select a position</option> | |
| <option>Java Developer</option> | |
| <option>UI/UX Designer</option> | |
| <option>Plugin Tester</option> | |
| <option>Other</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-sm font-medium text-gray-300 mb-1">Why you?</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-cyan-500 focus:border-transparent text-white placeholder-gray-500"></textarea> | |
| </div> | |
| <button type="submit" class="w-full px-6 py-3 bg-gradient-to-r from-cyan-500 to-purple-600 rounded-lg text-white font-medium hover:opacity-90 transition-all"> | |
| Submit Application | |
| </button> | |
| </form> | |
| <p class="text-sm text-gray-500 mt-4"> | |
| Or contact us directly on Discord: <span class="text-cyan-400">notritik.exe</span> | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4"> | |
| <span class="gradient-text">Get In Touch</span> | |
| </h2> | |
| <p class="text-gray-400 max-w-2xl mx-auto"> | |
| Have questions or need support? Reach out to us through any of these channels. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div class="bg-gray-800 rounded-xl p-8 border border-gray-700"> | |
| <h3 class="text-xl font-bold text-cyan-400 mb-6">Contact Information</h3> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-lg bg-purple-600 flex items-center justify-center text-white mr-4 flex-shrink-0"> | |
| <i class="fab fa-discord"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Discord</h4> | |
| <p class="text-gray-400">Join our community for support and updates</p> | |
| <a href="#" class="text-cyan-400 hover:underline">discord.gg/rxdev</a> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-lg bg-blue-500 flex items-center justify-center text-white mr-4 flex-shrink-0"> | |
| <i class="fas fa-envelope"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Email</h4> | |
| <p class="text-gray-400">For business inquiries and support</p> | |
| <a href="mailto:contact@rxdev.com" class="text-cyan-400 hover:underline">contact@rxdev.com</a> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-lg bg-orange-500 flex items-center justify-center text-white mr-4 flex-shrink-0"> | |
| <i class="fas fa-store"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">SpigotMC</h4> | |
| <p class="text-gray-400">Check out our plugins on SpigotMC</p> | |
| <a href="#" class="text-cyan-400 hover:underline">spigotmc.org/rxdev</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-8 border border-gray-700"> | |
| <h3 class="text-xl font-bold text-purple-400 mb-6">Send Us a Message</h3> | |
| <form class="space-y-4"> | |
| <div> | |
| <label for="contact-name" class="block text-sm font-medium text-gray-300 mb-1">Name</label> | |
| <input type="text" id="contact-name" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent text-white placeholder-gray-400"> | |
| </div> | |
| <div> | |
| <label for="contact-email" class="block text-sm font-medium text-gray-300 mb-1">Email</label> | |
| <input type="email" id="contact-email" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent text-white placeholder-gray-400"> | |
| </div> | |
| <div> | |
| <label for="contact-subject" class="block text-sm font-medium text-gray-300 mb-1">Subject</label> | |
| <input type="text" id="contact-subject" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent text-white placeholder-gray-400"> | |
| </div> | |
| <div> | |
| <label for="contact-message" class="block text-sm font-medium text-gray-300 mb-1">Message</label> | |
| <textarea id="contact-message" rows="4" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent text-white placeholder-gray-400"></textarea> | |
| </div> | |
| <button type="submit" class="w-full px-6 py-3 bg-gradient-to-r from-purple-600 to-cyan-500 rounded-lg text-white font-medium hover:opacity-90 transition-all"> | |
| Send Message | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter --> | |
| <div class="bg-gradient-to-r from-gray-800 to-gray-900 py-12 px-4 sm:px-6 lg:px-8 border-t border-b border-gray-700"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="text-center"> | |
| <h3 class="text-2xl font-bold mb-4">Stay Updated</h3> | |
| <p class="text-gray-400 mb-8 max-w-2xl mx-auto"> | |
| Subscribe to our newsletter to receive updates on new plugins, features, and special offers. | |
| </p> | |
| <form class="flex flex-col sm:flex-row gap-3 max-w-md mx-auto"> | |
| <input type="email" placeholder="Your email" class="flex-grow px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-cyan-500 focus:border-transparent text-white placeholder-gray-400"> | |
| <button type="submit" class="px-6 py-3 bg-gradient-to-r from-cyan-500 to-purple-600 rounded-lg text-white font-medium hover:opacity-90 transition-all whitespace-nowrap"> | |
| Subscribe | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold gradient-text mb-4">RxDevelopement</h3> | |
| <p class="text-gray-400 mb-4"> | |
| Crafting premium Minecraft plugins that push the limits of creativity. | |
| </p> | |
| <div class="flex gap-4"> | |
| <a href="#" class="text-gray-400 hover:text-cyan-400 transition-all"> | |
| <i class="fab fa-discord text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-purple-400 transition-all"> | |
| <i class="fab fa-github text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-blue-400 transition-all"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-orange-400 transition-all"> | |
| <i class="fas fa-store text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold text-gray-300 mb-4">Quick Links</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#home" class="text-gray-400 hover:text-cyan-400 transition-all">Home</a></li> | |
| <li><a href="#plugins" class="text-gray-400 hover:text-cyan-400 transition-all">Plugins</a></li> | |
| <li><a href="#team" class="text-gray-400 hover:text-cyan-400 transition-all">Team</a></li> | |
| <li><a href="#about" class="text-gray-400 hover:text-cyan-400 transition-all">About</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold text-gray-300 mb-4">Resources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-purple-400 transition-all">Documentation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-purple-400 transition-all">Changelog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-purple-400 transition-all">Support</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-purple-400 transition-all">FAQ</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold text-gray-300 mb-4">Legal</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-cyan-400 transition-all">Terms of Service</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-cyan-400 transition-all">Privacy Policy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-cyan-400 transition-all">Refund Policy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-cyan-400 transition-all">Licensing</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-500 mb-4 md:mb-0"> | |
| © 2025 RxDevelopement. All rights reserved. | |
| </p> | |
| <div class="flex gap-4"> | |
| <a href="#" class="text-gray-500 hover:text-cyan-400 transition-all">Terms</a> | |
| <a href="#" class="text-gray-500 hover:text-cyan-400 transition-all">Privacy</a> | |
| <a href="#" class="text-gray-500 hover:text-cyan-400 transition-all">Cookies</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| // Close mobile menu if open | |
| document.getElementById('mobile-menu').classList.add('hidden'); | |
| // Scroll to target | |
| targetElement.scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Dark mode toggle (placeholder - would need actual implementation) | |
| document.querySelector('nav button').addEventListener('click', function() { | |
| document.documentElement.classList.toggle('dark'); | |
| const icon = this.querySelector('i'); | |
| if (document.documentElement.classList.contains('dark')) { | |
| icon.classList.remove('fa-moon'); | |
| icon.classList.add('fa-sun'); | |
| } else { | |
| icon.classList.remove('fa-sun'); | |
| icon.classList.add('fa-moon'); | |
| } | |
| }); | |
| // Plugin filter functionality (placeholder) | |
| document.querySelectorAll('#plugins .flex-wrap button').forEach(button => { | |
| button.addEventListener('click', function() { | |
| // Remove active class from all buttons | |
| document.querySelectorAll('#plugins .flex-wrap button').forEach(btn => { | |
| btn.classList.remove('bg-cyan-500/10', 'border-cyan-400', 'text-cyan-400'); | |
| btn.classList.add('bg-gray-800', 'hover:bg-gray-700', 'text-gray-300'); | |
| }); | |
| // Add active class to clicked button | |
| this.classList.add('bg-cyan-500/10', 'border-cyan-400', 'text-cyan-400'); | |
| this.classList.remove('bg-gray-800', 'hover:bg-gray-700', 'text-gray-300'); | |
| // Here you would filter plugins based on the button clicked | |
| // This is just a placeholder implementation | |
| console.log('Filtering plugins by: ' + this.textContent.trim()); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=notritik/rxdev1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |