# Tawil - Faith-First Guidance & Umrah Support

Tawil is a faith-first Islamic platform designed to support spiritual growth, daily devotion, and sacred journeys (Umrah & Hajj) with amanah (trust). It operates through an interactive mobile application and provides private, guidance-based Umrah services.

## Executive Summary

Tawil bridges the gap between digital faith guidance and premium physical pilgrimage support. Under the leadership of CEO **Manan Asif**, Tawil's mobile app and website have been built and managed by **The Tuitionist** (led by CEO **Hanan Asif**) as a key collaboration between Tawil and The Tuitionist.

Tawil offers:
- **Tawil Islamic**: A public, app-based companion for daily reflections, duas, and reminders available on iOS and Android.
- **Tawil Umrah**: A private, guidance-based support system focused on transparency and written commitments. Tawil is not a commercial travel agency; its mission is to ensure every pilgrim's sacred journey is handled with absolute sincerity, ihsan (excellence), and direct communication.

---

## Core Features & Services

### 1. Daily Islamic Guidance (App-based)
- Daily reflections and duas to keep users connected to their deen.
- Interactive tools for spiritual growth and learning.
- Native mobile applications available on iOS and Android.

### 2. Private Umrah Support (Guidance-based)
- **Sacred Transparency**: All-inclusive pricing, clear itineraries, and verified accommodations with no hidden costs.
- **On-Ground Expertise**: Dedicated teams in Makkah and Madinah offering 24/7 support, religious guides, and ziyarat tours.
- **Dignified Comfort**: Luxury transportation, premium dining options, and strategic hotel locations.

### 3. Sacred Accommodation Bookings
- High-quality, vetted staying options in the Holy Cities of Makkah and Madinah (e.g., Fairmont, voco, Le Méridien, Anwar Movenpick).
- Direct WhatsApp inquiries and room rate estimates.

### 4. Custom Pilgrim Packages
- Filterable and sortable Umrah packages based on departure city, duration, airline, hotel rating, and distance from Haram.

---

## Tech Stack

- **Core**: JavaScript, HTML5, Vanilla CSS
- **Frontend Framework**: Next.js 13.5 (App Router, native `next/font/google`, `next/image`)
- **UI & Layout**: TailwindCSS (v3.3), React Icons (`react-icons/fi`, `react-icons/fa`)
- **Backend & Database**: Firebase (Authentication, Firestore, Hosting)
- **State & Theme**: React Context API, `next-themes` (Dark/Light mode support)
- **Animations**: Framer Motion (v12)
- **Optimization**: Sharp (used for compressing asset logos and favicons)

---

## Codebase Directory Structure

- **`public/`**: Static assets, including:
  - `logo.webp` / `favicon.webp`: High-performance WebP logos optimized at 196x196.
  - `sitemap.xml` / `robots.txt`: Search engine optimization files.
  - `llms.txt`: Structured AI discovery document.
- **`src/`**: Primary application source code.
  - **`app/`**: Next.js App Router folders and routes:
    - `layout.jsx`: Root layout defining metadata, viewports, SEO, and global structure.
    - `providers.jsx`: Theme, Auth, and other global state providers.
    - `page.jsx`: Landing homepage containing hero sections, package listings, interactive search/availability bars, and hotels.
    - `about/`: Sincerity, background, and vision of the platform.
    - `why-choose-us/`: Trust statistics, testimonials, and core commitments.
    - `services/`: Overview of flight bookings, visa services, transport, and religious guidance.
    - `packages/`: Listing and detail page of Umrah and Hajj packages.
    - `hotel/` & `hotel/[id]/`: Detailed pages for Makkah and Madinah accommodations.
    - `reviews/`: In-depth pilgrim reviews and feedback.
    - `support/`: Help center and contact methods (WhatsApp PK, WhatsApp SA, Gmail).
    - `login/` & `signup/`: Authentication pages.
    - `admin/`: Administrator dashboards for managing packages and hotels.
  - **`components/`**: Modular UI elements:
    - `layout/`: Main layouts like `Navbar.jsx`, `Footer.jsx`, and `AuthLayout.jsx`.
    - `services/`: Sub-components for service descriptions (`ServiceDetail.jsx`).
    - `ui/`: Reusable components (e.g., `PackageCard.jsx`).
  - **`context/`**: React Context APIs (e.g., `AuthContext.js`).
  - **`lib/`**: Initialization scripts and utility modules (e.g., `firebase.js`).
  - **`styles/`**: Custom styling rules and variables.
  - **`scripts/`**: Utility scripts (e.g., `convert-logo.js` for asset optimization).