Janat Quran Academy Landing Page
Project Overview
Client: Janat Quran Academy
Project Type: Landing Page / Business Presence Website
Objective: Create a professional, trustworthy online presence that showcases the academy's Quran teaching services, displays pricing clearly, and encourages visitors to enroll.
Live URL: [Insert your client's website URL here]
Year: 2023
The Challenge
Janat Quran Academy needed a digital storefront that would:
- Present their Quran teaching services in a clear, organized manner
- Display pricing packages transparently to build trust
- Provide an easy way for potential students to contact them or enroll
- Reflect the spiritual and professional nature of their academy
- Be fully responsive across all devices (mobile, tablet, desktop)
The client wanted a clean, modern design that would appeal to parents looking for Quran education for their children as well as adults seeking to learn or improve their Quran recitation.
My Role
- UI/UX Design – Wireframing and designing the layout
- Frontend Development – Building the responsive interface
- Content Structuring – Organizing services and pricing information logically
- Performance Optimization – Ensuring fast load times
- Cross-Browser Testing – Verified compatibility across all major browsers
Features Delivered
1. Hero Section
- Compelling headline and call‑to‑action button
- High‑quality imagery reflecting Islamic values
- Clear value proposition about the academy's teaching approach
2. Services Overview
- Detailed breakdown of courses offered:
- Quran Recitation (Tajweed)
- Hifz (Memorization)
- Arabic Language
- Islamic Studies for Kids and Adults
- Each service includes a brief description and key benefits
3. Pricing Section
- Transparent, easy‑to‑compare pricing packages
- Monthly and flexible payment options displayed
- No hidden fees – builds trust with potential students
4. About the Academy
- Information about qualified teachers (Qari/Hafiz certified)
- Teaching methodology (one‑on‑one sessions, flexible timings)
- Academy's mission and values
5. Footer
- Contact details (email, phone, WhatsApp)
- Social media links
- Quick navigation menu
| Aspect | Languages | Responsive Design | Performance | Icons | Form Handling | Deployment |
|---|---|---|---|---|---|---|
| Implementation | HTML5, CSS3, JavaScript (ES6) | Mobile‑first approach with Flexbox and CSS Grid | Optimized images, minimal external dependencies | Font Awesome / Custom SVG icons | Integrated with Formspree / custom backend API | Netlify / Vercel / [client's hosting platform] |
Layout
- Clean, uncluttered design that focuses on content hierarchy
- Card‑based layout for services and pricing to improve scannability
- Ample white space to reduce cognitive load
Mobile Experience
- Hamburger menu for navigation on smaller screens
- Touch‑friendly buttons and form inputs
- Vertical stacking of pricing cards for easy reading
Ready to Discuss Your Project?
If you're looking for a clean, professional landing page that converts visitors into customers, I'd love to help. [Contact me] to discuss your next project.
