https://github.com/victorola-coder/jubah
official website for Jubah
https://github.com/victorola-coder/jubah
Last synced: 11 months ago
JSON representation
official website for Jubah
- Host: GitHub
- URL: https://github.com/victorola-coder/jubah
- Owner: Victorola-coder
- Created: 2025-09-02T23:51:08.000Z (11 months ago)
- Default Branch: dev
- Last Pushed: 2025-09-12T10:26:45.000Z (11 months ago)
- Last Synced: 2025-09-12T12:27:31.238Z (11 months ago)
- Language: TypeScript
- Homepage: https://jubah.vercel.app
- Size: 58.6 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🎵 JUBAH - Afrobeat Artist Landing Page
A stunning, modern landing page for JUBAH, an emerging Afrobeat artist. Built with Next.js 15, TypeScript, Tailwind CSS, and Framer Motion.
## 🌟 Features
- **Responsive Design** - Mobile-first approach that works on all devices
- **Audio Preview** - Built-in audio player for "Comando" track preview
- **Smooth Animations** - Framer Motion animations and music wave effects
- **Professional Icons** - Lucide React icons throughout the interface
- **Streaming Links** - Direct links to all major music platforms
- **Newsletter Signup** - Fan engagement with email collection
- **SEO Optimized** - Meta tags, sitemap, and robots.txt
- **PWA Ready** - Web app manifest for mobile installation
## 🚀 Live Site
**Visit: [https://jubah.live](https://jubah.live)**
## 🎨 Tech Stack
- **Framework**: Next.js 15 (App Router)
- **Language**: TypeScript
- **Styling**: Tailwind CSS
- **Animations**: Framer Motion
- **Icons**: Lucide React
- **Fonts**: Google Fonts (Orbitron, Anton, Oswald, Poppins, etc.)
- **Deployment**: Vercel (recommended)
## 📱 Audio Features
- **Auto-preview**: 10-second preview on page load
- **Interactive Player**: Play/pause with progress bar
- **Volume Control**: Mute/unmute functionality
- **Track**: "Comando" by JUBAH
## 🎵 Streaming Platforms
- Spotify
- Apple Music
- YouTube
- YouTube Music
- Audiomack
## 🎯 Sections
1. **Hero** - Animated music waves + floating elements
2. **About** - Artist bio with album artwork
3. **Latest Release** - "Comando" track details
4. **Join Movement** - Newsletter signup + social links
5. **Footer** - Contact info + management details
## 🚀 Getting Started
### Prerequisites
- Node.js 18+
- npm, yarn, or bun
### Installation
```bash
# Clone the repository
git clone https://github.com/victorola-coder/jubah-landing-page.git
# Navigate to project directory
cd jubah-landing-page
# Install dependencies
npm install
# Start development server
npm run dev
```
### Build
```bash
# Build for production
npm run build
# Start production server
npm start
```
## 📁 Project Structure
```
jubah-landing-page/
├── app/
│ ├── components/ # UI components
│ ├── global.css # Global styles
│ ├── layout.tsx # Root layout
│ ├── page.tsx # Home page
│ └── manifest.ts # PWA manifest
├── public/
│ ├── images/ # Images and artwork
│ └── audio/ # Audio files
├── tailwind.config.ts # Tailwind configuration
└── package.json # Dependencies
```
## 🎨 Customization
### Colors
The color scheme uses CSS variables defined in `app/global.css`:
- **Orchid**: `#e59dde` (main accent)
- **Cranberry**: `#d85f89` (primary actions)
- **Cocoa Brown**: `#3a252b` (backgrounds)
### Fonts
Multiple font families for different purposes:
- **Orbitron**: Futuristic, strong lines
- **Anton**: Bold, impactful headings
- **Poppins**: Clean, readable body text
## 🌐 Domain Configuration
The project is configured for **jubah.live**:
- All metadata URLs point to `https://jubah.live`
- Sitemap and robots.txt configured
- PWA manifest includes domain scope
## 📧 Contact Information
- **Artist**: JUBAH (Juba Daniel Ifeoluwa)
- **Email**: jubadanielifeoluwa@gmail.com
- **Instagram**: @jubah_001
- **Facebook**: Jubah
## 🎵 Music
- **Track**: Comando
- **Genre**: Afrobeat
- **Release**: 2025
- **Label**: 9939903 Records DK
## 🤝 Management
**MGMT**: [VickyJay](https://victorola.dev)
## 📄 License
This project is private and proprietary to JUBAH.
## 🚀 Deployment
### Vercel (Recommended)
1. Connect your GitHub repository
2. Set environment variables if needed
3. Deploy automatically on push
### Other Platforms
- **Netlify**: Works with Next.js static export
- **Railway**: Full-stack deployment
- **AWS/GCP**: Custom server deployment
## 🔧 Environment Variables
Create a `.env.local` file for local development:
```env
NEXT_PUBLIC_SITE_URL=https://jubah.live
```
## 📱 PWA Features
- Installable on mobile devices
- Offline capability (with service worker)
- App-like experience
- Custom splash screen
## 🎯 Performance
- **Lighthouse Score**: 90+ (Performance, Accessibility, Best Practices, SEO)
- **Core Web Vitals**: Optimized for all metrics
- **Image Optimization**: Next.js Image component
- **Font Loading**: Optimized font loading strategy
---
**Built with ❤️ by [VickyJay](https://victorola.dev) for JUBAH**
*Making waves in the Afrobeat world* 🌊🎵