Mars is a versatile Discord bot that understands natural language and brings a touch of magic to your server! With a dreamy pink and purple aesthetic, Mars offers economy commands, utilities, and moderation tools that make server management both fun and efficient.

🏛️ Economy System

• Dream dust currency system with daily rewards
• Item foraging and magical brewing
• Shop and inventory management
• Gift sharing between friends

🛠️ Utility Commands

• Weather lookups for any location
• Interactive polls and voting
• Server ping monitoring

🛡️ Moderation Tools

• Message purging and cleanup
• Channel management utilities
• Permission handling

• Animated starry background with floating particles and gradient orbs
• Responsive design optimized for all devices and screen sizes
• Dreamy Mars-themed color palette with pink/purple gradients
• Smooth scroll animations with intersection observer
• Feature cards with hover effects and fade-in animations

• Real-time search across command names, descriptions, arguments, and permissions
• Category filtering with dynamic count updates
• Keyboard shortcuts (Ctrl+K to search, Escape to clear)
• Mobile-optimized interface with touch-friendly controls
• Command copying with one-click slash command copying
• No results state with helpful suggestions

• Next.js 15 with App Router for optimal performance
• TypeScript for complete type safety
• CSS Modules for scoped component styling
• Mobile-first responsive design approach
• SEO optimized with proper meta tags and OpenGraph

• Node.js 18+
• npm, yarn, or pnpm

# Clone the repository
git clone https://github.com/HaruRee/mars-website.git
cd mars-website

# Install dependencies
npm install

# Start development server
npm run dev

Open http://localhost:3000 to view the website.

npm run dev      # Start development server with hot reload
npm run build    # Build optimized production bundle
npm run start    # Start production server
npm run lint     # Run ESLint for code quality

mars-website/
├── src/
│   ├── app/
│   │   ├── commands/              # Commands page with search
│   │   │   ├── page.tsx          # Commands page component
│   │   │   └── commands.module.css # Scoped CSS styles
│   │   ├── globals.css           # Global Mars theme styles
│   │   ├── layout.tsx            # Root layout with metadata
│   │   └── page.tsx              # Homepage component
│   └── components/               # Reusable React components
│       ├── AnimatedBackground.tsx # Starry background effect
│       ├── Header.tsx            # Navigation header
│       └── Footer.tsx            # Site footer
├── public/
│   └── star.png                  # Mars logo asset
├── package.json                  # Dependencies and scripts
└── README.md                     # This beautiful file!

--dreamy-primary: #fbbcff;     /* Dreamy Pink */
--dreamy-secondary: #c084fc;   /* Soft Purple */  
--dreamy-bg: #0f0f0f;         /* Deep Space */
--dreamy-surface: #1a1a1a;    /* Dark Surface */
--dreamy-accent: #2a2a2a;     /* Subtle Accent */
--dreamy-text: #ffffff;       /* Pure White */
--dreamy-muted: #a0a0a0;      /* Muted Gray */

• Clean sans-serif fonts for readability
• Consistent spacing using CSS custom properties
• Accessible contrast ratios (WCAG AA compliant)
• Responsive typography that scales beautifully

• Subtle and elegant motion design
• Performance-first with CSS transforms
• Intersection observer for scroll-triggered animations
• Reduced motion support for accessibility

• Next.js 15 - React framework with App Router
• TypeScript - Type safety and better DX
• Tailwind CSS - Utility-first CSS framework
• React - Component-based UI library

• Homepage (/) - Hero section, features, stats, and animated background
• Commands (/commands) - Interactive command browser with search and filtering

The website is automatically deployed to Vercel when changes are pushed to the main branch.

1. Connect your GitHub repository to Vercel
2. Push changes to the main branch
3. Vercel automatically builds and deploys
4. Live updates in seconds! ⚡

# Build the project
npm run build

# Deploy to Vercel (install Vercel CLI first)
npm i -g vercel
vercel --prod

• Hero section with animated background
• Feature showcase with hover effects
• Bot statistics and highlights
• Call-to-action sections

• Complete command browser
• Real-time search and filtering
• Category organization
• Mobile-optimized interface

We welcome contributions to make Mars even more magical! ✨

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

• Follow TypeScript best practices
• Use CSS Modules for styling
• Ensure mobile responsiveness
• Test across different browsers
• Maintain the dreamy aesthetic! 🌙

This project is licensed under the MIT License - see the LICENSE file for details.

• Built with ❤️ using Next.js and TypeScript
• Inspired by the beauty of Mars and dreamy space aesthetics
• Special thanks to the Discord.js and React communities
• Font and icon resources from various open-source projects