This is the official front-end repository for Daliah Banda's website - a modern, fully server-side rendered (SSR) site built with Next.js. The site showcases the music, performances, and creative journey of Colombia's metalcore and pop emo punk band from Bogotá.
Live Site: daliahbanda.com
We are a Colombian rock band based in Bogotá with over 8 years of history in the alternative music scene. Our sound is a dynamic fusion of:
- Metalcore - Modern and progressive metal elements
- Pop Emo Punk - Melodic and emotional vocal-driven rock
- Rock Alternativo - Contemporary alternative rock influences
We combine the melodic complexity of progressive metal with the raw energy of 90s and 2000s punk rock, resulting in energetic, emotionally-charged compositions. Lyrically, they explore emotional, social, and political themes that invite personal and collective reflection.
- Silvia Berrio - Lead Vocals
- Rafael Salcedo - Keyboards
- Michael Villaizan - Lead Guitar
- Jesús Ardiles - Rhythm Guitar & Vocals
- Christian Ramírez - Bass & Vocals
- Nicolás Araújo - Drums & Vocals
- Next.js - React framework with full SSR/SSG capabilities
- TypeScript - Type-safe development
- React - Component-based UI
- CSS Modules & Tailwind CSS - Styling solution
- ESLint - Code quality and linting
- PNPM - Fast, disk space-efficient package manager
- Node.js - JavaScript runtime
- ✅ Full Server-Side Rendering (SSR) - Optimized performance and SEO
- ✅ Dynamic Routes - Album pages, gallery filters, live streaming
- ✅ Image Optimization - Responsive images with Next.js Image component
- ✅ Mobile-Responsive Design - Mobile menu and adaptive layouts
- ✅ Live Streaming Integration - Links to Kick.com streaming
- ✅ Music Integration - Spotify, Apple Music, YouTube, and more
- ✅ Gallery & Media Management - Photo galleries filtered by events
- ✅ Social Media Integration - Instagram, Facebook, TikTok, YouTube, SoundCloud, Spotify
daliahbanda-next/
├── app/ # Next.js 13+ App Router
│ ├── layout.tsx # Root layout
│ ├── page.tsx # Homepage
│ ├── _components/ # Page-specific components
│ │ ├── Hero.jsx
│ │ ├── Integrantes.jsx # Band members showcase
│ │ ├── FlyersCarousel.jsx # Event flyers carousel
│ │ ├── LiveCard.jsx # Live streaming card
│ │ └── RecommendedSong.jsx # Music recommendations
│ ├── albums/ # Album listing & details
│ │ ├── page.tsx
│ │ ├── [album]/ # Dynamic album routes
│ │ └── _components/ # Album-specific components
│ ├── gallery/ # Photo gallery
│ │ ├── page.tsx
│ │ ├── [filter]/ # Gallery filtering
│ │ └── events/ # Event photo galleries
│ └── live/ # Live streaming page
│
├── src/
│ ├── components/ # Reusable components
│ │ ├── buttons/ # Button components
│ │ ├── DaliahClicker/ # Interactive clicker game
│ │ ├── Footer/ # Footer with email signup
│ │ ├── Header/ # Navigation header
│ │ └── util/ # Utility components
│ ├── hooks/ # Custom React hooks
│ │ └── useBlockScroll.js
│ ├── svg/ # SVG components
│ ├── utils/ # Utility functions
│ │ └── dates.js
│ └── styles/ # Global styles
│
├── public/ # Static assets
├── next.config.ts # Next.js configuration
├── tsconfig.json # TypeScript configuration
├── postcss.config.mjs # PostCSS configuration
└── eslint.config.mjs # ESLint configuration
/- Homepage with hero, band intro, and featured content/albums- Music albums catalog/albums/[album]- Individual album details/gallery- Photo gallery with event filtering/gallery/[filter]- Filtered gallery views/gallery/events/[filter]- Event-specific photo galleries/live- Live streaming information
- Node.js 18+
- PNPM 8+
-
Clone the repository
git clone <repository-url> cd daliahbanda-next
-
Install dependencies
pnpm install
-
Set up environment variables (if needed) Create a
.env.localfile with any necessary API keys or configuration -
Run the development server
pnpm dev
Open http://localhost:3000 in your browser
-
Build for production
pnpm build pnpm start
pnpm dev- Start development server with hot reloadpnpm build- Build for productionpnpm start- Start production serverpnpm lint- Run ESLint
- Responsive header with mobile menu support
- Navigation links to main sections
- Live banner for streaming notifications
- Multi-filter support (events, photos)
- Dynamic route-based filtering
- Image optimization
- Spotify integration
- Album showcases
- Song recommendations
- Kick.com streaming integration
- Live session cards
- Performance information
This is a Next.js SSR application and can be deployed on:
- Vercel (recommended, official Next.js hosting)
- Netlify
- AWS, Google Cloud, Azure
- Any Node.js-compatible hosting platform
Since this is a full SSR site, ensure your hosting supports:
- Node.js server runtime
- Environment variables configuration
- Static asset optimization
To contribute to this project:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
Please ensure code follows the ESLint configuration and maintains the project's styling standards.
This site leverages Next.js SSR capabilities for:
- ✅ Improved SEO with server-rendered pages
- ✅ Faster initial page loads
- ✅ Better social media sharing with meta tags
- ✅ Image optimization with Next.js Image component
- ✅ Automatic code splitting and lazy loading
- Website: daliahbanda.com
- Instagram: @daliah_banda
- Facebook: Daliah Banda
- TikTok: @daliah.banda
- Spotify: Daliah Banda
- YouTube: @daliahbanda
- SoundCloud: Daliah Banda
- Kick (Live Streaming): kick.com/daliahbanda
- Email: daliahbanda@gmail.com
This project is under the MIT license, allowing for open-source contributions and usage. See the LICENSE file for details.
For inquiries, contact: daliahbanda@gmail.com or visit daliahbanda.com/contact
Built with ❤️ by the Daliah Banda team - Metalcore, Pop Emo Punk & Rock Alternativo desde Bogotá 🇨🇴