A stunning, modern landing page for JUBAH, an emerging Afrobeat artist. Built with Next.js 15, TypeScript, Tailwind CSS, and Framer Motion.

• 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

Visit: https://jubah.live

• 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)

• Auto-preview: 10-second preview on page load
• Interactive Player: Play/pause with progress bar
• Volume Control: Mute/unmute functionality
• Track: "Comando" by JUBAH

• Spotify
• Apple Music
• YouTube
• YouTube Music
• Audiomack

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

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

# 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 for production npm run build # Start production server npm start

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 

The color scheme uses CSS variables defined in app/global.css:

• Orchid: #e59dde (main accent)
• Cranberry: #d85f89 (primary actions)
• Cocoa Brown: #3a252b (backgrounds)

Multiple font families for different purposes:

• Orbitron: Futuristic, strong lines
• Anton: Bold, impactful headings
• Poppins: Clean, readable body text

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

• Artist: JUBAH (Juba Daniel Ifeoluwa)
• Email: jubadanielifeoluwa@gmail.com
• Instagram: @jubah_001
• Facebook: Jubah

• Track: Comando
• Genre: Afrobeat
• Release: 2025
• Label: 9939903 Records DK

MGMT: VickyJay

This project is private and proprietary to JUBAH.

1. Connect your GitHub repository
2. Set environment variables if needed
3. Deploy automatically on push

• Netlify: Works with Next.js static export
• Railway: Full-stack deployment
• AWS/GCP: Custom server deployment

Create a .env.local file for local development:

NEXT_PUBLIC_SITE_URL=https://jubah.live

• Installable on mobile devices
• Offline capability (with service worker)
• App-like experience
• Custom splash screen

• 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 for JUBAH

Making waves in the Afrobeat world 🌊🎵