+
+## ✨ Overview
+**Miqaat** is a web application designed to provide accurate prayer times specifically for users in Algeria.
+
+## 🌐 Live Demo
+[View App](https://miqaat-eight.vercel.app/)
+
+## 🚀 Key Features
+* 📍 **Dynamic Location Selection**: Easily choose your Wilaya using an interface or by using automatic GPS detection.
+* ⏳ **Live Countdown**: Real-time updates and countdowns to the next prayer time.
+* 📅 **Comprehensive Calendar**: View weekly and monthly prayer schedules with an elegant, printable layout.
+* 🌓 **Dark Mode Support**: Fully responsive design that adapts to your system preferences.
+* 🔔 **Smart Notifications**: Frontend-scheduled notifications firing 1 minute before each prayer.
+* 📲 **PWA-ready Architecture**: Designed for future offline support and mobile installability.
+
+## 📸 Screenshots
+
+### 🏠 Home Dashboard
+Comprehensive view of current and upcoming prayer times with a live clock.
+
+
+
+
+### 📍 Location Selection
+an interface for choosing your location via list or GPS.
+
+
+
+
+### 🗓️ Prayer Calendar
+weekly/monthly prayer time calendar.
+
+
+
+
+## 🛠️ Tech Stack
+* **Frontend**: React (React Router v7)
+* **Language**: TypeScript
+* **Styling**:
+ - **Tailwind CSS** (utility-first)
+ - **Custom CSS** (design tokens, shimmer animations, theming system)
+* **Icons**: Lucide React
+* **Persistence**: LocalStorage for user preferences
+* **Deployment**: Optimized production build via Vite
+
+## 💎 Design System
+Miqaat is built on a custom design system that ensures visual consistency and a premium user experience.
+
+| Token Category | Implementation |
+| :--- | :--- |
+| **Typography** | `Changa` (Arabic Brand), `DM Sans` (Body), `Cormorant Garamond` (Display) |
+| **Color Palette** | Deep Algerian Indigo (`#1A5276`) & Luxurious Gold (`#C9A84C`) |
+| **Visual Effects** | Glassmorphism, Shimmering Skeletons, and Custom Glow Shadows |
+
+
+## 🏗️ Project Architecture
+The project follows a modular and scalable architecture, separating UI concerns from business logic and data fetching.
+
+### 🧩 System Overview
+```mermaid
+graph TD
+ subgraph UI_Layer [UI Layer]
+ R[Routes / Pages] --> B[Blocks / Layout Sections]
+ B --> C[Atomic Components]
+ end
+
+ subgraph Logic_Layer [Logic & State]
+ B --> H[Custom Hooks]
+ H --> CTX[Global Context]
+ CTX --> LS[(LocalStorage)]
+ end
+
+ subgraph Data_Layer [Data Layer]
+ H --> S[API Services]
+ S --> API[External Adhan API]
+ S --> D[Static Data / Types]
+ end
+
+ style UI_Layer fill:#f0f7ff,stroke:#0369a1,stroke-width:2px
+ style Logic_Layer fill:#f0fdf4,stroke:#15803d,stroke-width:2px
+ style Data_Layer fill:#fff7ed,stroke:#c2410c,stroke-width:2px
+```
+
+### 📁 Directory Breakdown
+* **`app/routes/`**: Entry points for each page (Home, Settings, Calendar, Location).
+* **`app/blocks/`**: Complex, layout-specific sections (e.g., Prayer Grid, Search Header) that compose pages.
+* **`app/components/`**: Reusable atomic UI elements (Buttons, Inputs, Skeletons) following a consistent design system.
+* **`app/hooks/`**: Encapsulated business logic (GPS tracking, prayer time calculations, countdown timers).
+* **`app/context/`**: Global state management using React Context for user preferences and location data.
+* **`app/services/`**: Data fetching layer and API clients for external communication.
+* **`app/data/`**: Static configuration, types, and constants.
+* **`app/i18n/`**: Localization dictionary and logic for Arabic/English support.
+
+
+## 🔌 API Integration
+Miqaat leverages the [Adhan DZ API](https://adhan-dz.dexter21767.com) to provide accurate, real-time data specifically for Algeria.
+
+### Data Fetching
+* **Source**: [adhan-dz.dexter21767.com](https://adhan-dz.dexter21767.com)
+* **Endpoints**:
+ - `/cities`: Fetches a comprehensive list of Algerian Wilayas and Baladiyas.
+ - `/prayerTimes`: Retrieves daily or monthly prayer schedules based on the selected city ID and date range.
+* **Implementation**: Logic is centralized in [prayerApi.ts](file:///home/haroune-dev/Desktop/Miqaat/app/services/prayerApi.ts) (raw fetch layer) and [api.ts](file:///home/haroune-dev/Desktop/Miqaat/app/services/api.ts) (application mapping).
+
+### Key Features
+* **Dynamic Data**: Times are fetched dynamically based on the user's selected location.
+* **State Sync**: Custom hooks (`usePrayerTimes`) handle loading states, error reporting, and real-time synchronization with the application context.
+
+
+## 🏁 Getting Started
+
+### Prerequisites
+* Node.js (LTS version recommended)
+* npm or yarn
+
+### Installation
+1. Clone the repository:
+ ```bash
+ git clone https://github.com/Haroune-dev/miqaat.git
+ ```
+2. Install dependencies:
+ ```bash
+ npm install
+ ```
+3. Start the development server:
+ ```bash
+ npm run dev
+ ```
+
+## 🌟 Project Highlights
+* **Zero Layout Shift**: Optimized loading skeletons for a premium first-load experience.
+* **RTL/LTR Support**: Fully localized interface for Arabic and English users.
+* **Performance**: Lightweight bundle with optimized asset delivery.
+
+## 🔮 Future Improvements
+* [ ] Full Offline Data Persistence (Service Worker).
+* [ ] Support for Baladiyas (Sub-provinces).
+* [ ] Multi-language Expansion (French support).
+* [ ] Advanced Analytics & Insights.
+
+## 👤 Author
+**Haroune-dev**
+
+---
diff --git a/web/Miqaat/app/blocks/__global/footer-information.module.css b/web/Miqaat/app/blocks/__global/footer-information.module.css
new file mode 100644
index 0000000..ad934a9
--- /dev/null
+++ b/web/Miqaat/app/blocks/__global/footer-information.module.css
@@ -0,0 +1,174 @@
+.root {
+ background-color: #0b1120; /* very dark navy */
+ color: #f8fafc;
+}
+
+.brand {
+ text-decoration: none;
+ color: #f8fafc;
+}
+
+.brandText {
+ font-family: var(--family-display);
+ font-size: 1.75rem;
+ font-weight: 700;
+}
+
+:global([lang="ar"]) .brandText {
+ font-family: var(--family-brand-ar);
+ font-weight: 700;
+ font-size: 2rem;
+}
+
+.logoImg {
+ width: 2.25rem;
+ height: 2.25rem;
+ border-radius: var(--radius-sm);
+ object-fit: cover;
+ background: white;
+ padding: 2px;
+}
+
+.slogan {
+ font-size: var(--text-sm);
+ color: #94a3b8;
+ opacity: 0.8;
+ max-width: 500px;
+ text-align: center;
+ margin: 0;
+}
+
+.gridTitle {
+ font-size: 1.1rem;
+ font-weight: 700;
+ margin: 0;
+}
+
+.gridLink {
+ display: flex;
+ align-items: center;
+ padding: var(--space-3) var(--space-4);
+ border-radius: var(--radius-lg);
+ color: #94a3b8;
+ text-decoration: none;
+ transition: all 0.3s;
+}
+
+.gridLink:hover {
+ background: rgba(255, 255, 255, 0.05);
+ color: #f8fafc;
+}
+
+.gridLink svg {
+ color: #94a3b8;
+ transition: color 0.3s;
+}
+
+.gridLink:hover svg {
+ color: #f8fafc;
+}
+
+.linkText {
+ flex: 1;
+ margin: 0 var(--space-4);
+ font-weight: 500;
+ font-size: var(--text-lg);
+}
+
+.chevron {
+ opacity: 0.5;
+}
+
+.contactDesc {
+ color: #94a3b8;
+ font-size: var(--text-md);
+ margin: 0;
+ text-align: center;
+}
+
+.contactButton {
+ display: flex;
+ align-items: center;
+ gap: var(--space-2);
+ padding: var(--space-1) var(--space-4);
+ background: rgba(255, 255, 255, 0.05);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ border-radius: var(--radius-md);
+ color: #38bdf8;
+ text-decoration: none;
+ font-weight: 600;
+ font-size: var(--text-xs);
+ transition: all 0.3s;
+}
+
+.contactButton:hover {
+ background: rgba(56, 189, 248, 0.1);
+ border-color: #38bdf8;
+ transform: translateY(-2px);
+}
+
+.boxIcon {
+ width: 2rem;
+ height: 2rem;
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: var(--radius-sm);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all 0.3s;
+}
+
+.boxIcon svg {
+ color: #94a3b8;
+ transition: color 0.3s, transform 0.3s;
+}
+
+.boxIcon:hover {
+ background: rgba(255, 255, 255, 0.1);
+}
+
+.boxIcon:hover svg {
+ color: #f8fafc;
+ transform: scale(1.1);
+}
+
+.copyLine1 {
+ font-size: var(--text-base);
+ font-weight: 600;
+ margin: 0;
+ color: #f8fafc;
+ opacity: 0.8;
+ white-space: nowrap;
+}
+
+.copyLine2 {
+ font-size: var(--text-sm);
+ margin: var(--space-1) 0 0;
+ color: #64748b;
+ white-space: nowrap;
+}
+
+.scrollTop {
+ width: 2.25rem;
+ height: 2.25rem;
+ background: rgba(255, 255, 255, 0.05);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #38bdf8;
+ cursor: pointer;
+ transition: all 0.3s;
+}
+
+.scrollTop:hover {
+ background: rgba(56, 189, 248, 0.1);
+ transform: translateY(-4px);
+}
+
+@media (max-width: 850px) {
+ .brandText {
+ font-size: 2.5rem;
+ }
+}
diff --git a/web/Miqaat/app/blocks/__global/footer-information.tsx b/web/Miqaat/app/blocks/__global/footer-information.tsx
new file mode 100644
index 0000000..c014236
--- /dev/null
+++ b/web/Miqaat/app/blocks/__global/footer-information.tsx
@@ -0,0 +1,108 @@
+import { Mail, ChevronRight, ArrowUp } from "lucide-react";
+import { Link } from "react-router";
+import classnames from "classnames";
+import { useLanguage } from "~/i18n/language-context";
+import style from "./footer-information.module.css";
+
+export interface FooterInformationProps {
+ className?: string;
+}
+
+const GithubIcon = ({ size = 20 }: { size?: number }) => (
+
+);
+
+const LinkedinIcon = ({ size = 20 }: { size?: number }) => (
+
+);
+
+export function FooterInformation({ className }: FooterInformationProps) {
+ const { t } = useLanguage();
+
+ const scrollToTop = () => {
+ if (typeof window !== 'undefined') {
+ window.scrollTo({ top: 0, behavior: 'smooth' });
+ }
+ };
+
+ return (
+
+ {t("home.startsAt")}
+
+ {(() => {
+ const timeStr = formatTime(nextPrayer.time, timeFormat, locale);
+ const parts = timeStr.split(" ");
+ if (parts.length > 1) {
+ // In RTL, the first element goes to the right and the second goes to the left.
+ // So parts[0] (time) is right, parts[1] (AM/PM) is left.
+ return (
+ <>
+ {parts[0]}
+ {parts[1]}
+
+ );
+ }
+ return {timeStr};
+ })()}
+
+
+ {t("settings.notifications.blocked.guide") || "Your browser is blocking notifications. Please click the lock icon in your address bar to allow them for this site."}
+
+
+.png)
+.png)
+
+
+