"A Digital Stained Glass Window" — Creating a welcoming, modern, and spiritual digital front door for our community.
This project is not just a website; it is an extension of the church's ministry. Our goal is to create a digital experience that reflects the warmth, excellence, and life-changing message of the Gospel.
Inspired by Elevation Church, we prioritized:
- Visual Impact: High-quality imagery and clean typography.
- Intuitive Navigation: A simplified, visitor-centric menu structure (Left Drawer + Right Actions).
- Engagement: Removing barriers to "Watch", "Give", and "Plan a Visit".
We implemented a custom navigation system that mimics the best-in-class church experience:
- Dynamic Header: Transparent on hero, white on scroll.
- Action-Oriented: "New Here", "Watch", and "Give" are always one click away.
- Full-Screen Menu: A smooth, slide-out drawer for deep navigation ("Get Involved", "Discover").
A Netflix-style experience for the Word:
- Searchable: Filter by Series, Speaker, or Topic.
- Metadata Rich: Date, scripture reference, and duration visibility.
Keeping the body connected:
- Month-Grouped View: Easy scanning of upcoming activities.
- Digital Integration: "Add to Calendar" functionality for Google/Apple users.
Helping members find their tribe:
- Categorized: Kids, Youth, Men, Women, Outreach.
- Visual Cards: Engaging previews of each group.
Making generosity simple and trustworthy:
- Clear Options: Recurring, One-Time, and Mission-specific giving.
- Privacy Focused: Bank-grade security assurance UI.
Built on the bleeding edge of React and Web standards:
| Layer | Technology |
|---|---|
| Framework | Next.js 15 (App Router) |
| Language | TypeScript |
| Styling | Tailwind CSS v4 + clsx |
| Components | shadcn/ui (Radix UI Primitives) |
| Icons | Lucide React |
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm devOpen http://localhost:3000 with your browser to see the result.
We are actively developing Phase 4 (Advanced Features) and Phase 5 (Polish).
See github_issues_plan.md for detailed issue tracking.
- Phase 1: Foundation & Component Architecture
- Phase 2: Core Pages (Sermons, Giving)
- Phase 3: Content (Ministries, Leadership, Events)
- Phase 4: Member Portal & Advanced Search
- Phase 5: Professional Photography & SEO
We welcome code contributions from the ministry team!
- Fork the repo.
- Create a feature branch (
git checkout -b feature/amazing-feature). - Commit your changes (
git commit -m 'Add some amazing feature'). - Push to the branch (
git push origin feature/amazing-feature). - Open a Pull Request.
Built with ❤️ for Antioch Independent Baptist Churches.