Rawdatul Atfaal - Juz 'Amma Memorization Course

A modern, responsive landing page for Markazul Bayaan's Islamic education course built with Next.js, TypeScript, and Tailwind CSS.

🚀 Features

• Responsive Design: Fully responsive layout that works on all devices
• Modern UI: Beautiful gradient backgrounds, smooth animations, and interactive elements
• Performance Optimized: Built with Next.js 14 for optimal performance
• TypeScript: Full type safety throughout the application
• Tailwind CSS: Utility-first CSS framework for rapid development
• Accessibility: Semantic HTML and ARIA attributes for accessibility

📋 Course Overview

This landing page showcases:

• Juz 'Amma Memorization Course: 5-month comprehensive program
• One-on-One Sessions: Personalized Zoom sessions 3 times per week
• Tajweed & Pronunciation: Proper Quranic recitation techniques
• Bonus Learning: Basic Aqeedah and daily supplications
• Flexible Pricing: Full payment ($500) or monthly payment ($105/month) options

🛠️ Getting Started

Prerequisites

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

Installation

1. Clone the repository

   git clone <repository-url>
   cd rawdatul-atfaal-course

2. Install dependencies

   npm install
   # or
   yarn install
   # or
   pnpm install

3. Run the development server

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev

4. Open your browser Navigate to http://localhost:3000 to see the application.

📁 Project Structure

rawdatul-atfaal-course/
├── app/
│   ├── globals.css          # Global styles and Tailwind directives
│   ├── layout.tsx           # Root layout component
│   └── page.tsx             # Main page component
├── components/
│   ├── HeroSection.tsx      # Hero/landing section
│   ├── CourseOverview.tsx   # Course details and overview
│   ├── Testimonials.tsx     # Student testimonials
│   ├── TeachingMethod.tsx   # Teaching methodology
│   ├── Pricing.tsx          # Pricing plans
│   ├── AdditionalCourses.tsx # Other available courses
│   ├── Enrollment.tsx       # Enrollment process
│   └── Footer.tsx           # Footer with contact info
├── package.json
├── tailwind.config.js
├── tsconfig.json
└── README.md

🎨 Components

HeroSection

• Gradient background with Islamic pattern
• Course title and description
• Call-to-action buttons
• Floating animation elements

CourseOverview

• Course objectives and benefits
• Bonus learning topics
• Course statistics (duration, frequency, etc.)

Testimonials

• Student reviews and ratings
• International testimonials from Belgium, Ghana, and India

TeachingMethod

• One-on-one Zoom sessions
• Telegram support group
• Goal-oriented learning approach
• Course requirements

Pricing

• Two pricing options: Full payment and monthly payment
• Feature comparison
• Payment details

Enrollment

• 3-step enrollment process
• Registration form links
• Contact information

🚀 Build and Deployment

Build for Production

npm run build

Start Production Server

npm start

Linting

npm run lint

🎯 Key Features

• Smooth Scrolling: Automatic smooth scrolling for anchor links
• Intersection Observer: Fade-in animations for sections
• Interactive Cards: Hover effects and animations
• Mobile Responsive: Optimized for all screen sizes
• SEO Optimized: Proper meta tags and semantic HTML

📞 Contact Information

• Registration: Fill Registration Form
• Payment Proof: Submit Payment Proof
• Direct Contact: Contact Director

💰 Payment Details

• Account: 0431141470
• Name: AbdulRauf Lukman Olamide

📝 License

This project is for educational purposes and is part of Markazul Bayaan's Islamic education program.

🤝 Contributing

This is a commercial project for Markazul Bayaan. For any inquiries or modifications, please contact the director through the provided links.