├── .husky └── pre-commit ├── app ├── favicon.ico ├── api │ └── municipalities │ │ ├── near │ │ └── route.ts │ │ └── route.ts ├── [locale] │ ├── layout.tsx │ └── page.tsx └── globals.css ├── postcss.config.mjs ├── public ├── vercel.svg ├── window.svg ├── file.svg ├── logo.svg ├── globe.svg └── next.svg ├── .eslintrc.json ├── middleware.ts ├── next.config.ts ├── components.json ├── i18n ├── config.ts └── locales │ ├── ar.json │ └── en.json ├── components ├── Footer.tsx ├── ui │ ├── label.tsx │ ├── textarea.tsx │ ├── input.tsx │ ├── select.tsx │ ├── button.tsx │ └── card.tsx ├── StickyGitHubButton.tsx ├── FeaturesSection.tsx ├── ScrollToTop.tsx ├── HeroSection.tsx ├── StatsSection.tsx ├── ApiPlayground.tsx ├── DocumentationSection.tsx └── Navbar.tsx ├── .gitignore ├── tsconfig.json ├── lib └── utils.ts ├── package.json ├── SEARCH_ENHANCEMENT.md └── README.md /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | npx lint-staged -------------------------------------------------------------------------------- /app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/youssef-of-web/tn-municipality-api/HEAD/app/favicon.ico -------------------------------------------------------------------------------- /postcss.config.mjs: -------------------------------------------------------------------------------- 1 | const config = { 2 | plugins: ["@tailwindcss/postcss"], 3 | }; 4 | 5 | export default config; 6 | -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["next/core-web-vitals", "next/typescript"], 3 | "rules": { 4 | "@typescript-eslint/no-explicit-any": "off" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /middleware.ts: -------------------------------------------------------------------------------- 1 | import createMiddleware from "next-intl/middleware"; 2 | 3 | export default createMiddleware({ 4 | locales: ["en", "ar"], 5 | defaultLocale: "en", 6 | }); 7 | 8 | export const config = { 9 | matcher: ["/((?!api|_next|_vercel|.*\\..*).*)"], 10 | }; 11 | -------------------------------------------------------------------------------- /next.config.ts: -------------------------------------------------------------------------------- 1 | import type { NextConfig } from "next"; 2 | import createNextIntlPlugin from "next-intl/plugin"; 3 | const withNextIntl = createNextIntlPlugin("./i18n/config.ts"); 4 | const nextConfig: NextConfig = { 5 | /* config options here */ 6 | }; 7 | 8 | export default withNextIntl(nextConfig); 9 | -------------------------------------------------------------------------------- /public/window.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/file.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "new-york", 4 | "rsc": true, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "", 8 | "css": "app/globals.css", 9 | "baseColor": "slate", 10 | "cssVariables": true, 11 | "prefix": "" 12 | }, 13 | "aliases": { 14 | "components": "@/components", 15 | "utils": "@/lib/utils", 16 | "ui": "@/components/ui", 17 | "lib": "@/lib", 18 | "hooks": "@/hooks" 19 | }, 20 | "iconLibrary": "lucide" 21 | } 22 | -------------------------------------------------------------------------------- /i18n/config.ts: -------------------------------------------------------------------------------- 1 | import { getRequestConfig } from "next-intl/server"; 2 | 3 | const locales = ["en", "ar"] as const; 4 | 5 | export default getRequestConfig(async ({ locale }) => { 6 | // Validate that the incoming locale is valid 7 | if (!locales.includes(locale as (typeof locales)[number])) { 8 | // Return default locale instead of throwing notFound 9 | locale = "en"; 10 | } 11 | 12 | return { 13 | locale: locale as string, 14 | messages: (await import(`./locales/${locale}.json`)).default, 15 | }; 16 | }); 17 | -------------------------------------------------------------------------------- /components/Footer.tsx: -------------------------------------------------------------------------------- 1 | import { useTranslations } from "next-intl"; 2 | 3 | interface FooterProps { 4 | className?: string; 5 | } 6 | 7 | export function Footer({ className }: FooterProps) { 8 | const tFooter = useTranslations("footer"); 9 | return ( 10 |

20 |

{tFooter("text")}

21 |

22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.* 7 | .yarn/* 8 | !.yarn/patches 9 | !.yarn/plugins 10 | !.yarn/releases 11 | !.yarn/versions 12 | 13 | # testing 14 | /coverage 15 | 16 | # next.js 17 | /.next/ 18 | /out/ 19 | 20 | # production 21 | /build 22 | 23 | # misc 24 | .DS_Store 25 | *.pem 26 | 27 | # debug 28 | npm-debug.log* 29 | yarn-debug.log* 30 | yarn-error.log* 31 | .pnpm-debug.log* 32 | 33 | # env files (can opt-in for committing if needed) 34 | .env* 35 | 36 | # vercel 37 | .vercel 38 | 39 | # typescript 40 | *.tsbuildinfo 41 | next-env.d.ts 42 | -------------------------------------------------------------------------------- /public/logo.svg: -------------------------------------------------------------------------------- 1 | 19 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2017", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "noEmit": true, 9 | "esModuleInterop": true, 10 | "module": "esnext", 11 | "moduleResolution": "bundler", 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "jsx": "preserve", 15 | "incremental": true, 16 | "plugins": [ 17 | { 18 | "name": "next" 19 | } 20 | ], 21 | "paths": { 22 | "@/*": ["./*"] 23 | } 24 | }, 25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 26 | "exclude": ["node_modules"] 27 | } 28 | -------------------------------------------------------------------------------- /components/ui/label.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import * as React from "react"; 4 | import * as LabelPrimitive from "@radix-ui/react-label"; 5 | 6 | import { cn } from "@/lib/utils"; 7 | 8 | function Label({ 9 | className, 10 | ...props 11 | }: React.ComponentProps) { 12 | return ( 13 | 21 | ); 22 | } 23 | 24 | export { Label }; 25 | -------------------------------------------------------------------------------- /lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { clsx, type ClassValue } from "clsx"; 2 | import { twMerge } from "tailwind-merge"; 3 | 4 | export function cn(...inputs: ClassValue[]) { 5 | return twMerge(clsx(inputs)); 6 | } 7 | 8 | // Utility function to calculate distance between two geographical points 9 | export function haversineDistance( 10 | lat1: number, 11 | lon1: number, 12 | lat2: number, 13 | lon2: number, 14 | ): number { 15 | const R = 6371; 16 | const toRad = (deg: number): number => deg * (Math.PI / 180); 17 | const dLat = toRad(lat2 - lat1); 18 | const dLon = toRad(lon2 - lon1); 19 | 20 | const a = 21 | Math.sin(dLat / 2) ** 2 + 22 | Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLon / 2) ** 2; 23 | 24 | const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); 25 | return R * c; 26 | } 27 | -------------------------------------------------------------------------------- /components/ui/textarea.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | import { cn } from "@/lib/utils"; 4 | 5 | function Textarea({ className, ...props }: React.ComponentProps<"textarea">) { 6 | return ( 7 |

15 |   );
16 | }
17 | 
18 | export { Textarea };
19 |

--------------------------------------------------------------------------------
/public/globe.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

--------------------------------------------------------------------------------
/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | 
 3 | import { cn } from "@/lib/utils";
 4 | 
 5 | function Input({ className, type, ...props }: React.ComponentProps<"input">) {
 6 |   return (
 7 |     <input
 8 |       type={type}
 9 |       data-slot="input"
10 |       className={cn(
11 |         "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
12 |         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
13 |         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
14 |         className,
15 |       )}
16 |       {...props}
17 |     />
18 |   );
19 | }
20 | 
21 | export { Input };
22 |

--------------------------------------------------------------------------------
/app/api/municipalities/near/route.ts:
--------------------------------------------------------------------------------
 1 | import { data } from "@/data/data";
 2 | import { NextResponse } from "next/server";
 3 | import { haversineDistance } from "@/lib/utils";
 4 | 
 5 | export async function GET(request: Request) {
 6 |   const { searchParams } = new URL(request.url);
 7 |   let results = data;
 8 | 
 9 |   // Get municipalities within a certain radius from a location
10 |   const userLat = parseFloat(searchParams.get("lat") || "0");
11 |   const userLng = parseFloat(searchParams.get("lng") || "0");
12 |   const radius = parseFloat(searchParams.get("radius") || "0");
13 | 
14 |   if (userLat && userLng && radius) {
15 |     results = results
16 |       .map((item) => ({
17 |         ...item,
18 |         Delegations: item.Delegations.filter((delegation) => {
19 |           const distance = haversineDistance(
20 |             userLat,
21 |             userLng,
22 |             delegation.Latitude,
23 |             delegation.Longitude,
24 |           );
25 |           return distance <= radius;
26 |         }),
27 |       }))
28 |       .filter((item) => item.Delegations.length > 0);
29 |   }
30 |   return NextResponse.json(results);
31 | }
32 |

--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

--------------------------------------------------------------------------------
/app/[locale]/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from "next";
 2 | import { Geist, Geist_Mono } from "next/font/google";
 3 | import "./../globals.css";
 4 | import { NextIntlClientProvider } from "next-intl";
 5 | import { getMessages } from "next-intl/server";
 6 | 
 7 | const geistSans = Geist({
 8 |   variable: "--font-geist-sans",
 9 |   subsets: ["latin"],
10 | });
11 | 
12 | const geistMono = Geist_Mono({
13 |   variable: "--font-geist-mono",
14 |   subsets: ["latin"],
15 | });
16 | 
17 | export const metadata: Metadata = {
18 |   title: "Tunisian Municipality API",
19 |   description:
20 |     "Access comprehensive Tunisian municipality data with powerful filtering options. Built for developers.",
21 | };
22 | 
23 | export function generateStaticParams() {
24 |   return [{ locale: "en" }, { locale: "ar" }];
25 | }
26 | 
27 | export default async function RootLayout({
28 |   children,
29 |   params,
30 | }: Readonly<{
31 |   children: React.ReactNode;
32 |   params: Promise<{ locale: string }>;
33 | }>) {
34 |   const { locale } = await params;
35 |   const messages = await getMessages({ locale });
36 | 
37 |   const dir = locale === "ar" ? "rtl" : "ltr";
38 | 
39 |   return (
40 |     <html lang={locale} dir={dir}>
41 |       <body
42 |         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
43 |       >
44 |         <NextIntlClientProvider messages={messages}>
45 |           <div>{children}</div>
46 |         </NextIntlClientProvider>
47 |       </body>
48 |     </html>
49 |   );
50 | }
51 |

--------------------------------------------------------------------------------
/components/ui/select.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import { cn } from "@/lib/utils";
 3 | 
 4 | function Select({
 5 |   className,
 6 |   children,
 7 |   ...props
 8 | }: React.ComponentProps<"select">) {
 9 |   return (
10 |     <div className="relative w-full">
11 |       <select
12 |         data-slot="select"
13 |         className={cn(
14 |           "appearance-none bg-transparent border border-input rounded-md px-3 py-2 h-9 text-xs shadow-xs outline-none transition-[color,box-shadow] file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30",
15 |           "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
16 |           "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
17 |           "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
18 |           "pr-10",
19 |           className,
20 |         )}
21 |         {...props}
22 |       >
23 |         {children}
24 |       </select>
25 |       <span className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground">
26 |         <svg width="20" height="20" fill="none" viewBox="0 0 20 20">
27 |           <path
28 |             d="M6 8l4 4 4-4"
29 |             stroke="currentColor"
30 |             strokeWidth="1.5"
31 |             strokeLinecap="round"
32 |             strokeLinejoin="round"
33 |           />
34 |         </svg>
35 |       </span>
36 |     </div>
37 |   );
38 | }
39 | 
40 | export { Select };
41 |

--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tn-municipality",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "description": "A comprehensive API and documentation website for accessing Tunisian municipality data with powerful filtering capabilities",
 6 |   "homepage": "https://tn-municipality-api.vercel.app",
 7 |   "keywords": [
 8 |     "tunisia",
 9 |     "municipality",
10 |     "api",
11 |     "governorate",
12 |     "delegation",
13 |     "postal-code",
14 |     "nextjs",
15 |     "typescript",
16 |     "react"
17 |   ],
18 |   "scripts": {
19 |     "dev": "next dev --turbopack",
20 |     "build": "next build",
21 |     "start": "next start",
22 |     "lint": "next lint",
23 |     "prepare": "husky"
24 |   },
25 |   "lint-staged": {
26 |     "*.{js,jsx,ts,tsx}": [
27 |       "next lint --fix --file",
28 |       "prettier --write"
29 |     ],
30 |     "*.{json,css,scss,md}": [
31 |       "prettier --write"
32 |     ]
33 |   },
34 |   "dependencies": {
35 |     "@radix-ui/react-label": "^2.1.7",
36 |     "@radix-ui/react-slot": "^1.2.3",
37 |     "class-variance-authority": "^0.7.1",
38 |     "clsx": "^2.1.1",
39 |     "framer-motion": "^12.23.12",
40 |     "lucide-react": "^0.535.0",
41 |     "next": "15.4.5",
42 |     "next-intl": "^4.3.4",
43 |     "react": "19.1.0",
44 |     "react-dom": "19.1.0",
45 |     "react-toastify": "^11.0.5",
46 |     "tailwind-merge": "^3.3.1"
47 |   },
48 |   "devDependencies": {
49 |     "@tailwindcss/postcss": "^4",
50 |     "@types/node": "^20",
51 |     "@types/react": "^19",
52 |     "@types/react-dom": "^19",
53 |     "eslint": "^9",
54 |     "eslint-config-next": "15.4.6",
55 |     "husky": "^9.1.7",
56 |     "lint-staged": "^16.1.5",
57 |     "prettier": "^3.6.2",
58 |     "tailwindcss": "^4",
59 |     "tw-animate-css": "^1.3.6",
60 |     "typescript": "^5"
61 |   }
62 | }
63 |

--------------------------------------------------------------------------------
/components/StickyGitHubButton.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import { motion } from "framer-motion";
 3 | import { Github, Star } from "lucide-react";
 4 | 
 5 | interface StickyGitHubButtonProps {
 6 |   repoUrl?: string;
 7 |   className?: string;
 8 | }
 9 | 
10 | export function StickyGitHubButton({
11 |   repoUrl = "https://github.com/youssef-of-web/tn-municipality-api",
12 |   className,
13 | }: StickyGitHubButtonProps) {
14 |   return (
15 |     <motion.div
16 |       className={className}
17 |       style={{
18 |         position: "fixed",
19 |         bottom: 20,
20 |         right: 20,
21 |         zIndex: 1000,
22 |       }}
23 |       initial={{ opacity: 0, scale: 0.8, y: 20 }}
24 |       animate={{ opacity: 1, scale: 1, y: 0 }}
25 |       transition={{ delay: 1, duration: 0.5 }}
26 |     >
27 |       <motion.button
28 |         onClick={() => window.open(repoUrl, "_blank")}
29 |         style={{
30 |           background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
31 |           border: "none",
32 |           borderRadius: 50,
33 |           padding: "16px 20px",
34 |           cursor: "pointer",
35 |           display: "flex",
36 |           alignItems: "center",
37 |           gap: 8,
38 |           color: "white",
39 |           fontWeight: 600,
40 |           fontSize: 16,
41 |           boxShadow: "0 8px 32px rgba(102, 126, 234, 0.3)",
42 |           transition: "all 0.3s ease",
43 |         }}
44 |         whileHover={{
45 |           scale: 1.1,
46 |           boxShadow: "0 12px 40px rgba(102, 126, 234, 0.4)",
47 |           y: -5,
48 |         }}
49 |         whileTap={{ scale: 0.95 }}
50 |         whileInView={{
51 |           rotate: [0, -10, 10, 0],
52 |           transition: { duration: 0.5, repeat: Infinity, repeatDelay: 3 },
53 |         }}
54 |       >
55 |         <Github size={20} />
56 |         <span style={{ display: "flex", alignItems: "center", gap: 4 }}>
57 |           Star
58 |           <Star size={16} style={{ fill: "white" }} />
59 |         </span>
60 |       </motion.button>
61 |     </motion.div>
62 |   );
63 | }
64 |

--------------------------------------------------------------------------------
/components/FeaturesSection.tsx:
--------------------------------------------------------------------------------
 1 | import { Card } from "./ui/card";
 2 | import { Rocket, Search, BarChart } from "lucide-react";
 3 | import { ReactNode } from "react";
 4 | 
 5 | interface Feature {
 6 |   icon: ReactNode;
 7 |   title: string;
 8 |   description: string;
 9 | }
10 | 
11 | interface FeaturesSectionProps {
12 |   features?: Feature[];
13 |   className?: string;
14 | }
15 | 
16 | const defaultFeatures: Feature[] = [
17 |   {
18 |     icon: <Rocket size={32} strokeWidth={1.5} />,
19 |     title: "Fast & Reliable",
20 |     description: "Lightning-fast responses with 99.9% uptime guarantee",
21 |   },
22 |   {
23 |     icon: <Search size={32} strokeWidth={1.5} />,
24 |     title: "Powerful Filtering",
25 |     description: "Filter by governorate, delegation, postal code, and more",
26 |   },
27 |   {
28 |     icon: <BarChart size={32} strokeWidth={1.5} />,
29 |     title: "Rich Data",
30 |     description: "Complete municipality data with coordinates and Arabic names",
31 |   },
32 | ];
33 | 
34 | export function FeaturesSection({
35 |   features = defaultFeatures,
36 |   className,
37 | }: FeaturesSectionProps) {
38 |   return (
39 |     <div
40 |       dir="rtl"
41 |       style={{
42 |         display: "grid",
43 |         gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))",
44 |         gap: 20,
45 |         marginBottom: 48,
46 |         padding: "0 8px",
47 |       }}
48 |       className={className}
49 |     >
50 |       {features.map((feature) => (
51 |         <Card key={feature.title} style={{ padding: 20, textAlign: "center" }}>
52 |           <div
53 |             style={{
54 |               marginBottom: 12,
55 |               display: "flex",
56 |               justifyContent: "center",
57 |             }}
58 |           >
59 |             {feature.icon}
60 |           </div>
61 |           <h3 style={{ fontSize: 18, fontWeight: 600, marginBottom: 6 }}>
62 |             {feature.title}
63 |           </h3>
64 |           <p style={{ color: "#666", fontSize: 15 }}>{feature.description}</p>
65 |         </Card>
66 |       ))}
67 |     </div>
68 |   );
69 | }
70 |

--------------------------------------------------------------------------------
/components/ScrollToTop.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import { useState, useEffect } from "react";
 3 | import { motion, AnimatePresence } from "framer-motion";
 4 | import { ArrowUp } from "lucide-react";
 5 | 
 6 | interface ScrollToTopProps {
 7 |   className?: string;
 8 | }
 9 | 
10 | export function ScrollToTop({ className }: ScrollToTopProps) {
11 |   const [isVisible, setIsVisible] = useState(false);
12 | 
13 |   useEffect(() => {
14 |     const toggleVisibility = () => {
15 |       if (window.pageYOffset > 300) {
16 |         setIsVisible(true);
17 |       } else {
18 |         setIsVisible(false);
19 |       }
20 |     };
21 | 
22 |     window.addEventListener("scroll", toggleVisibility);
23 |     return () => window.removeEventListener("scroll", toggleVisibility);
24 |   }, []);
25 | 
26 |   const scrollToTop = () => {
27 |     window.scrollTo({
28 |       top: 0,
29 |       behavior: "smooth",
30 |     });
31 |   };
32 | 
33 |   return (
34 |     <AnimatePresence>
35 |       {isVisible && (
36 |         <motion.button
37 |           className={className}
38 |           onClick={scrollToTop}
39 |           style={{
40 |             position: "fixed",
41 |             bottom: 20,
42 |             left: 20,
43 |             zIndex: 1000,
44 |             background: "rgba(0, 0, 0, 0.8)",
45 |             border: "none",
46 |             borderRadius: 50,
47 |             width: 50,
48 |             height: 50,
49 |             cursor: "pointer",
50 |             display: "flex",
51 |             alignItems: "center",
52 |             justifyContent: "center",
53 |             color: "white",
54 |             backdropFilter: "blur(10px)",
55 |           }}
56 |           initial={{ opacity: 0, scale: 0.8, y: 20 }}
57 |           animate={{ opacity: 1, scale: 1, y: 0 }}
58 |           exit={{ opacity: 0, scale: 0.8, y: 20 }}
59 |           whileHover={{
60 |             scale: 1.1,
61 |             backgroundColor: "rgba(0, 0, 0, 0.9)",
62 |             y: -5,
63 |           }}
64 |           whileTap={{ scale: 0.9 }}
65 |         >
66 |           <ArrowUp size={20} />
67 |         </motion.button>
68 |       )}
69 |     </AnimatePresence>
70 |   );
71 | }
72 |

--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import { Slot } from "@radix-ui/react-slot";
 3 | import { cva, type VariantProps } from "class-variance-authority";
 4 | 
 5 | import { cn } from "@/lib/utils";
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default:
13 |           "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
14 |         destructive:
15 |           "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
16 |         outline:
17 |           "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
18 |         secondary:
19 |           "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
20 |         ghost:
21 |           "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
22 |         link: "text-primary underline-offset-4 hover:underline",
23 |       },
24 |       size: {
25 |         default: "h-9 px-4 py-2 has-[>svg]:px-3",
26 |         sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
27 |         lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
28 |         icon: "size-9",
29 |       },
30 |     },
31 |     defaultVariants: {
32 |       variant: "default",
33 |       size: "default",
34 |     },
35 |   },
36 | );
37 | 
38 | function Button({
39 |   className,
40 |   variant,
41 |   size,
42 |   asChild = false,
43 |   ...props
44 | }: React.ComponentProps<"button"> &
45 |   VariantProps<typeof buttonVariants> & {
46 |     asChild?: boolean;
47 |   }) {
48 |   const Comp = asChild ? Slot : "button";
49 | 
50 |   return (
51 |     <Comp
52 |       data-slot="button"
53 |       className={cn(buttonVariants({ variant, size, className }))}
54 |       {...props}
55 |     />
56 |   );
57 | }
58 | 
59 | export { Button, buttonVariants };
60 |

--------------------------------------------------------------------------------
/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | 
 3 | import { cn } from "@/lib/utils";
 4 | 
 5 | function Card({ className, ...props }: React.ComponentProps<"div">) {
 6 |   return (
 7 |     <div
 8 |       data-slot="card"
 9 |       className={cn(
10 |         "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
11 |         className,
12 |       )}
13 |       {...props}
14 |     />
15 |   );
16 | }
17 | 
18 | function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
19 |   return (
20 |     <div
21 |       data-slot="card-header"
22 |       className={cn(
23 |         "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
24 |         className,
25 |       )}
26 |       {...props}
27 |     />
28 |   );
29 | }
30 | 
31 | function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
32 |   return (
33 |     <div
34 |       data-slot="card-title"
35 |       className={cn("leading-none font-semibold", className)}
36 |       {...props}
37 |     />
38 |   );
39 | }
40 | 
41 | function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
42 |   return (
43 |     <div
44 |       data-slot="card-description"
45 |       className={cn("text-muted-foreground text-sm", className)}
46 |       {...props}
47 |     />
48 |   );
49 | }
50 | 
51 | function CardAction({ className, ...props }: React.ComponentProps<"div">) {
52 |   return (
53 |     <div
54 |       data-slot="card-action"
55 |       className={cn(
56 |         "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
57 |         className,
58 |       )}
59 |       {...props}
60 |     />
61 |   );
62 | }
63 | 
64 | function CardContent({ className, ...props }: React.ComponentProps<"div">) {
65 |   return (
66 |     <div
67 |       data-slot="card-content"
68 |       className={cn("px-6", className)}
69 |       {...props}
70 |     />
71 |   );
72 | }
73 | 
74 | function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
75 |   return (
76 |     <div
77 |       data-slot="card-footer"
78 |       className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
79 |       {...props}
80 |     />
81 |   );
82 | }
83 | 
84 | export {
85 |   Card,
86 |   CardHeader,
87 |   CardFooter,
88 |   CardTitle,
89 |   CardAction,
90 |   CardDescription,
91 |   CardContent,
92 | };
93 |

--------------------------------------------------------------------------------
/components/HeroSection.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import { useState, useEffect } from "react";
 3 | import { usePathname } from "next/navigation";
 4 | import { Button } from "./ui/button";
 5 | 
 6 | interface HeroSectionProps {
 7 |   title: string;
 8 |   description: string;
 9 |   primaryButtonText?: string;
10 |   secondaryButtonText?: string;
11 |   onPrimaryClick?: () => void;
12 |   onSecondaryClick?: () => void;
13 |   className?: string;
14 | }
15 | 
16 | export function HeroSection({
17 |   title,
18 |   description,
19 |   primaryButtonText = "Try the API",
20 |   secondaryButtonText = "View Documentation",
21 |   onPrimaryClick,
22 |   onSecondaryClick,
23 |   className,
24 | }: HeroSectionProps) {
25 |   const [currentLanguage, setCurrentLanguage] = useState("en");
26 |   const pathname = usePathname();
27 | 
28 |   const isRTL = currentLanguage === "ar";
29 | 
30 |   useEffect(() => {
31 |     const pathLang = pathname.startsWith("/ar") ? "ar" : "en";
32 |     setCurrentLanguage(pathLang);
33 |   }, [pathname]);
34 |   return (
35 |     <div
36 |       style={{
37 |         textAlign: "center",
38 |         marginBottom: 48,
39 |         padding: "0 8px",
40 |         direction: isRTL ? "rtl" : "ltr",
41 |       }}
42 |       className={className}
43 |     >
44 |       <h1
45 |         style={{
46 |           fontSize: 40,
47 |           fontWeight: 800,
48 |           marginBottom: 16,
49 |           background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
50 |           WebkitBackgroundClip: "text",
51 |           WebkitTextFillColor: "transparent",
52 |         }}
53 |       >
54 |         {title}
55 |       </h1>
56 |       <p
57 |         style={{
58 |           fontSize: 18,
59 |           color: "#666",
60 |           marginBottom: 32,
61 |           maxWidth: 600,
62 |           margin: "0 auto 32px",
63 |           textAlign: "center",
64 |           direction: isRTL ? "rtl" : "ltr",
65 |         }}
66 |       >
67 |         {description}
68 |       </p>
69 |       <div
70 |         style={{
71 |           display: "flex",
72 |           gap: 16,
73 |           justifyContent: "center",
74 |           flexWrap: "wrap",
75 |           flexDirection: isRTL ? "row-reverse" : "row",
76 |         }}
77 |       >
78 |         <Button size="lg" onClick={onPrimaryClick}>
79 |           {primaryButtonText}
80 |         </Button>
81 |         <Button size="lg" variant="outline" onClick={onSecondaryClick}>
82 |           {secondaryButtonText}
83 |         </Button>
84 |       </div>
85 |     </div>
86 |   );
87 | }
88 |

--------------------------------------------------------------------------------
/i18n/locales/ar.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "nav": {
  3 |     "home": "الرئيسية",
  4 |     "api": "واجهة البرمجة",
  5 |     "docs": "التوثيق",
  6 |     "github": "GitHub",
  7 |     "logo": "واجهة برمجة البلديات"
  8 |   },
  9 |   "hero": {
 10 |     "title": "واجهة برمجة البلديات التونسية",
 11 |     "description": "احصل على بيانات شاملة للبلديات التونسية مع خيارات فلترة قوية. مصممة للمطورين، من قبل المطورين.",
 12 |     "primaryButton": "جرب الواجهة",
 13 |     "secondaryButton": "عرض التوثيق"
 14 |   },
 15 |   "features": {
 16 |     "fastReliable": {
 17 |       "title": "سريع وموثوق",
 18 |       "description": "استجابات سريعة للغاية مع ضمان وقت تشغيل بنسبة 99.9٪"
 19 |     },
 20 |     "powerfulFiltering": {
 21 |       "title": "فلترة قوية",
 22 |       "description": "فلترة حسب الولاية، المعتمدية، الرمز البريدي، والمزيد"
 23 |     },
 24 |     "richData": {
 25 |       "title": "بيانات غنية",
 26 |       "description": "بيانات كاملة عن البلديات مع الإحداثيات والأسماء العربية"
 27 |     }
 28 |   },
 29 |   "stats": {
 30 |     "title": "نظرة عامة على البيانات",
 31 |     "governorates": "الولايات",
 32 |     "delegations": "المعتمديات"
 33 |   },
 34 |   "playground": {
 35 |     "title": "ساحة تجريب الواجهة",
 36 |     "description": "اختبر الواجهة بالبيانات الحقيقية.",
 37 |     "governorateName": "اسم الولاية",
 38 |     "governorateNamePlaceholder": "مثال: أريانة",
 39 |     "delegation": "المعتمدية",
 40 |     "delegationPlaceholder": "مثال: المدينة",
 41 |     "postalCode": "الرمز البريدي",
 42 |     "postalCodePlaceholder": "مثال: 2058",
 43 |     "sortBy": "ترتيب حسب",
 44 |     "sortByName": "الاسم",
 45 |     "sortByNameAr": "الاسم بالعربية",
 46 |     "testApi": "اختبر الواجهة",
 47 |     "loading": "جاري التحميل...",
 48 |     "radius": "نصف القطر (كم)",
 49 |     "getNearbyMunicipalities": "احصل على البلديات القريبة",
 50 |     "apiResponse": "استجابة الواجهة",
 51 |     "apiResponsePlaceholder": "// ستظهر استجابة الواجهة هنا",
 52 |     "copyUrl": "نسخ الرابط",
 53 |     "urlCopied": "تم نسخ الرابط إلى الحافظة!",
 54 |     "geolocationError": "فشل في الحصول على موقعك. يرجى السماح بالوصول للموقع أو التحقق من اتصال الإنترنت.",
 55 |     "geolocationNotSupported": "تحديد الموقع الجغرافي غير مدعوم في هذا المتصفح."
 56 |   },
 57 |   "documentation": {
 58 |     "title": "توثيق واجهة البرمجة",
 59 |     "endpoints": {
 60 |       "title": "🔗 نقاط النهاية للواجهة",
 61 |       "baseUrl": "الرابط الأساسي:"
 62 |     },
 63 |     "parameters": {
 64 |       "title": "🔍 معاملات الاستعلام",
 65 |       "description": "استخدم هذه المعاملات لفلترة بيانات البلديات. جميع المعاملات اختيارية ويمكن دمجها.",
 66 |       "name": {
 67 |         "description": "فلترة حسب اسم الولاية (مثال: أريانة، تونس، صفاقس)",
 68 |         "example": "?name=ariana"
 69 |       },
 70 |       "delegation": {
 71 |         "description": "فلترة حسب اسم المعتمدية داخل الولاية",
 72 |         "example": "?delegation=ville"
 73 |       },
 74 |       "postalCode": {
 75 |         "description": "فلترة حسب الرمز البريدي (تنسيق 5 أرقام)",
 76 |         "example": "?postalCode=2058"
 77 |       },
 78 |       "location": {
 79 |         "description": "احصل على البلديات القريبة من موقع محدد ضمن نصف قطر (بالكيلومتر)",
 80 |         "example": "?lat=36.8065&lng=10.1815&radius=5000"
 81 |       }
 82 |     },
 83 |     "examples": {
 84 |       "title": "💡 أمثلة على الاستخدام",
 85 |       "getAllMunicipalities": "احصل على جميع البلديات",
 86 |       "filterByGovernorate": "فلترة حسب الولاية",
 87 |       "filterByDelegation": "فلترة حسب المعتمدية",
 88 |       "filterByPostalCode": "فلترة حسب الرمز البريدي",
 89 |       "combineFilters": "دمج عدة فلاتر",
 90 |       "exampleLabel": "مثال"
 91 |     },
 92 |     "response": {
 93 |       "title": "📄مثال على الرد"
 94 |     }
 95 |   },
 96 |   "footer": {
 97 |     "text": "مصنوع بـ ❤️ لمجتمع المطورين التونسيين"
 98 |   }
 99 | }
100 |

--------------------------------------------------------------------------------
/i18n/locales/en.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "nav": {
  3 |     "home": "Home",
  4 |     "api": "API",
  5 |     "docs": "Docs",
  6 |     "github": "GitHub",
  7 |     "logo": "Municipality API"
  8 |   },
  9 |   "hero": {
 10 |     "title": "Tunisian Municipality API",
 11 |     "description": "Access comprehensive Tunisian municipality data with powerful filtering options. Built for developers, by developers.",
 12 |     "primaryButton": "Try the API",
 13 |     "secondaryButton": "View Documentation"
 14 |   },
 15 |   "features": {
 16 |     "fastReliable": {
 17 |       "title": "Fast & Reliable",
 18 |       "description": "Lightning-fast responses with 99.9% uptime guarantee"
 19 |     },
 20 |     "powerfulFiltering": {
 21 |       "title": "Powerful Filtering",
 22 |       "description": "Filter by governorate, delegation, postal code, and more"
 23 |     },
 24 |     "richData": {
 25 |       "title": "Rich Data",
 26 |       "description": "Complete municipality data with coordinates and Arabic names"
 27 |     }
 28 |   },
 29 |   "stats": {
 30 |     "title": "Data Overview",
 31 |     "governorates": "Governorates",
 32 |     "delegations": "Delegations"
 33 |   },
 34 |   "playground": {
 35 |     "title": "API Playground",
 36 |     "description": "Test the API with real data.",
 37 |     "governorateName": "Governorate Name",
 38 |     "governorateNamePlaceholder": "e.g. Ariana",
 39 |     "delegation": "Delegation",
 40 |     "delegationPlaceholder": "e.g. Ville",
 41 |     "postalCode": "Postal Code",
 42 |     "postalCodePlaceholder": "e.g. 2058",
 43 |     "sortBy": "SortBy",
 44 |     "sortByName": "Name",
 45 |     "sortByNameAr": "NameAr (Arabic)",
 46 |     "testApi": "Test API",
 47 |     "loading": "Loading...",
 48 |     "radius": "Radius (km)",
 49 |     "getNearbyMunicipalities": "Get Nearby Municipalities",
 50 |     "apiResponse": "API Response",
 51 |     "apiResponsePlaceholder": "// Your API response will appear here",
 52 |     "copyUrl": "Copy URL",
 53 |     "urlCopied": "URL copied to clipboard!",
 54 |     "geolocationError": "Failed to get your location. Please allow location access or check your internet connection.",
 55 |     "geolocationNotSupported": "Geolocation is not supported by this browser."
 56 |   },
 57 |   "documentation": {
 58 |     "title": "API Documentation",
 59 |     "endpoints": {
 60 |       "title": "🔗 API Endpoints",
 61 |       "baseUrl": "Base URL:"
 62 |     },
 63 |     "parameters": {
 64 |       "title": "🔍 Query Parameters",
 65 |       "description": "Use these parameters to filter the municipality data. All parameters are optional and can be combined.",
 66 |       "name": {
 67 |         "description": "Filter by governorate name (e.g., Ariana, Tunis, Sfax)",
 68 |         "example": "?name=ariana"
 69 |       },
 70 |       "delegation": {
 71 |         "description": "Filter by delegation name within a governorate",
 72 |         "example": "?delegation=ville"
 73 |       },
 74 |       "postalCode": {
 75 |         "description": "Filter by postal code (5-digit format)",
 76 |         "example": "?postalCode=2058"
 77 |       },
 78 |       "location": {
 79 |         "description": "Get municipalities near a specific location within a radius (in km)",
 80 |         "example": "?lat=36.8065&lng=10.1815&radius=5000"
 81 |       }
 82 |     },
 83 |     "examples": {
 84 |       "title": "💡 Usage Examples",
 85 |       "getAllMunicipalities": "Get all municipalities",
 86 |       "filterByGovernorate": "Filter by governorate",
 87 |       "filterByDelegation": "Filter by delegation",
 88 |       "filterByPostalCode": "Filter by postal code",
 89 |       "combineFilters": "Combine multiple filters",
 90 |       "exampleLabel": "Example"
 91 |     },
 92 |     "response": {
 93 |       "title": "📄 Example Response"
 94 |     }
 95 |   },
 96 |   "footer": {
 97 |     "text": "Built with ❤️ for the Tunisian developer community"
 98 |   }
 99 | }
100 |

--------------------------------------------------------------------------------
/app/[locale]/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useTranslations } from "next-intl";
  4 | import { HeroSection } from "../../components/HeroSection";
  5 | import { FeaturesSection } from "../../components/FeaturesSection";
  6 | import { ApiPlayground } from "../../components/ApiPlayground";
  7 | import { DocumentationSection } from "../../components/DocumentationSection";
  8 | import { Footer } from "../../components/Footer";
  9 | import { Navbar } from "../../components/Navbar";
 10 | import { StickyGitHubButton } from "../../components/StickyGitHubButton";
 11 | import { ScrollToTop } from "../../components/ScrollToTop";
 12 | import { StatsSection } from "../../components/StatsSection";
 13 | 
 14 | export default function HomePage() {
 15 |   const tHero = useTranslations("hero");
 16 |   const tFeatures = useTranslations("features");
 17 |   const tPlayground = useTranslations("playground");
 18 | 
 19 |   const features = [
 20 |     {
 21 |       icon: "📊",
 22 |       title: tFeatures("richData.title"),
 23 |       description: tFeatures("richData.description"),
 24 |     },
 25 |     {
 26 |       icon: "🔍",
 27 |       title: tFeatures("powerfulFiltering.title"),
 28 |       description: tFeatures("powerfulFiltering.description"),
 29 |     },
 30 |     {
 31 |       icon: "🚀",
 32 |       title: tFeatures("fastReliable.title"),
 33 |       description: tFeatures("fastReliable.description"),
 34 |     },
 35 |   ];
 36 | 
 37 |   const exampleRequest = `fetch('/api/municipalities?name=ariana')
 38 |   .then(response => response.json())
 39 |   .then(data => console.log(data));`;
 40 | 
 41 |   const exampleResponse = `[
 42 |   {
 43 |     "Name": "ARIANA",
 44 |     "NameAr": "أريانة",
 45 |     "Value": "ARIANA",
 46 |     "Delegations": [
 47 |       {
 48 |         "Name": "ARIANA VILLE (Residence Kortoba)",
 49 |         "NameAr": "أريانة المدينة (إقامة قرطبة)",
 50 |         "Value": "ARIANA VILLE",
 51 |         "PostalCode": "2058",
 52 |         "Latitude": 36.866011,
 53 |         "Longitude": 10.193923
 54 |       }
 55 |     ]
 56 |   }
 57 | ]`;
 58 | 
 59 |   const dataStructure = `{
 60 |   Name: string,        // Governorate name in English
 61 |   NameAr: string,      // Governorate name in Arabic
 62 |   Value: string,       // Governorate code
 63 |   Delegations: [
 64 |     {
 65 |       Name: string,        // Delegation name in English
 66 |       NameAr: string,      // Delegation name in Arabic
 67 |       Value: string,       // Delegation code
 68 |       PostalCode: string,  // Postal code
 69 |       Latitude: number,    // GPS latitude
 70 |       Longitude: number    // GPS longitude
 71 |     }
 72 |   ]
 73 | }`;
 74 | 
 75 |   return (
 76 |     <>
 77 |       <Navbar />
 78 |       <main
 79 |         style={{
 80 |           maxWidth: 1200,
 81 |           margin: "0 auto",
 82 |           padding: 16,
 83 |           paddingTop: 86,
 84 |         }}
 85 |       >
 86 |         <div id="home">
 87 |           <HeroSection
 88 |             title={tHero("title")}
 89 |             description={tHero("description")}
 90 |             primaryButtonText={tHero("primaryButton")}
 91 |             secondaryButtonText={tHero("secondaryButton")}
 92 |             onPrimaryClick={() =>
 93 |               document
 94 |                 .getElementById("playground")
 95 |                 ?.scrollIntoView({ behavior: "smooth" })
 96 |             }
 97 |             onSecondaryClick={() =>
 98 |               document
 99 |                 .getElementById("docs")
100 |                 ?.scrollIntoView({ behavior: "smooth" })
101 |             }
102 |           />
103 |         </div>
104 | 
105 |         <FeaturesSection features={features} />
106 | 
107 |         <StatsSection />
108 | 
109 |         <div id="playground" style={{ marginBottom: 48 }}>
110 |           <ApiPlayground
111 |             heading={tPlayground("title")}
112 |             description={tPlayground("description")}
113 |           />
114 |         </div>
115 | 
116 |         <div id="docs">
117 |           <DocumentationSection
118 |             exampleRequest={exampleRequest}
119 |             exampleResponse={exampleResponse}
120 |           />
121 |         </div>
122 | 
123 |         <Footer />
124 |       </main>
125 | 
126 |       <StickyGitHubButton repoUrl="https://github.com/youssef-of-web/tn-municipality-api" />
127 |       <ScrollToTop />
128 |     </>
129 |   );
130 | }
131 |

--------------------------------------------------------------------------------
/SEARCH_ENHANCEMENT.md:
--------------------------------------------------------------------------------
  1 | # Enhanced Municipality Search with Fallback
  2 | 
  3 | This document describes the enhanced search functionality implemented in the Tunisia Municipality API.
  4 | 
  5 | ## Overview
  6 | 
  7 | The enhanced search system provides intelligent fallback between governorate and delegation searches to ensure users get relevant results even when their initial search doesn't match the expected category.
  8 | 
  9 | ## Features
 10 | 
 11 | ### 1. **Fallback Search Mechanism**
 12 | 
 13 | - **Governorate to Delegation Fallback**: When searching by governorate name fails, automatically tries delegation search
 14 | - **Delegation to Governorate Fallback**: When searching by delegation name fails, automatically tries governorate search
 15 | - **Seamless Experience**: Users don't need to know whether they're searching for a governorate or delegation
 16 | 
 17 | ### 2. **Multi-language Support**
 18 | 
 19 | - Supports both English and Arabic search terms
 20 | - Case-insensitive matching
 21 |   n
 22 | 
 23 | ### 3. **Enhanced API Parameters**
 24 | 
 25 | #### New Parameter
 26 | 
 27 | - `search`: Unified search parameter that tries governorate first, then delegation as fallback
 28 | 
 29 | #### Legacy Parameters (maintained for backward compatibility)
 30 | 
 31 | - `name`: Search by governorate name (with delegation fallback)
 32 | - `delegation`: Search by delegation name (with governorate fallback)
 33 | 
 34 | #### Other Parameters
 35 | 
 36 | - `postalCode`: Filter by exact postal code match
 37 | - `sort`: Sort field ('name' or 'nameAr')
 38 | - `order`: Sort order ('asc' or 'desc', defaults to 'asc')
 39 | 
 40 | ## API Usage Examples
 41 | 
 42 | ### Basic Search with Fallback
 43 | 
 44 | ```
 45 | GET /api/municipalities?search=tunis
 46 | ```
 47 | 
 48 | This will:
 49 | 
 50 | 1. First try to find governorates containing "tunis"
 51 | 2. If no governorates found, search delegations containing "tunis"
 52 | 3. Return results from whichever search succeeded
 53 | 
 54 | ### Legacy Governorate Search with Delegation Fallback
 55 | 
 56 | ```
 57 | GET /api/municipalities?name=sfax
 58 | ```
 59 | 
 60 | ### Legacy Delegation Search with Governorate Fallback
 61 | 
 62 | ```
 63 | GET /api/municipalities?delegation=medina
 64 | ```
 65 | 
 66 | ### Combined with Other Filters
 67 | 
 68 | ```
 69 | GET /api/municipalities?search=ariana&sort=name&order=asc
 70 | ```
 71 | 
 72 | ## Implementation Details
 73 | 
 74 | ### Core Functions
 75 | 
 76 | 1. **`searchByGovernorate()`**: Searches municipality names (both English and Arabic)
 77 | 2. **`searchByDelegation()`**: Searches delegation names within municipalities
 78 | 3. **`enhancedSearch()`**: Orchestrates the fallback mechanism
 79 | 4. **`filterByPostalCode()`**: Filters by exact postal code match
 80 | 5. **`sortMunicipalities()`**: Handles sorting with locale-aware comparison
 81 | 
 82 | ### Search Logic Flow
 83 | 
 84 | ```typescript
 85 | function enhancedSearch(searchTerm, searchType, municipalities) {
 86 |   if (searchType === "governorate") {
 87 |     // Try governorate search first
 88 |     results = searchByGovernorate(searchTerm, municipalities);
 89 | 
 90 |     // Fallback to delegation search if no results
 91 |     if (results.length === 0) {
 92 |       results = searchByDelegation(searchTerm, municipalities);
 93 |       fallbackApplied = true;
 94 |     }
 95 |   } else {
 96 |     // Try delegation search first
 97 |     results = searchByDelegation(searchTerm, municipalities);
 98 | 
 99 |     // Fallback to governorate search if no results
100 |     if (results.length === 0) {
101 |       results = searchByGovernorate(searchTerm, municipalities);
102 |       fallbackApplied = true;
103 |     }
104 |   }
105 | 
106 |   return { results, searchUsed, fallbackApplied };
107 | }
108 | ```
109 | 
110 | ## Benefits
111 | 
112 | 1. **Improved User Experience**: Users don't need to know the exact category they're searching for
113 | 2. **Higher Success Rate**: More searches return relevant results
114 | 3. **Backward Compatibility**: Existing API consumers continue to work
115 | 4. **Better Search Coverage**: Covers both governorate and delegation levels
116 | 5. **Debugging Support**: Logs provide insight into which search method was used
117 | 
118 | ## Error Handling
119 | 
120 | - Comprehensive try-catch blocks prevent API crashes
121 | - Meaningful error responses with HTTP status codes
122 | - Console logging for debugging and analytics
123 | 
124 | ## Performance Considerations
125 | 
126 | - Immutable data handling (creates copies to avoid mutations)
127 | - Efficient filtering using native array methods
128 | - Locale-aware sorting for Arabic text
129 | - Early termination when primary search succeeds (no unnecessary fallback)
130 | 
131 | This enhanced search system significantly improves the usability of the Tunisia Municipality API while maintaining full backward compatibility with existing implementations.
132 |

--------------------------------------------------------------------------------
/components/StatsSection.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | import { motion } from "framer-motion";
  3 | import { Card } from "./ui/card";
  4 | import { Database, Users } from "lucide-react";
  5 | import { useTranslations } from "next-intl";
  6 | 
  7 | interface Stat {
  8 |   icon: React.ReactNode;
  9 |   label: string;
 10 |   value: number;
 11 |   suffix?: string;
 12 |   translationKey: string;
 13 | }
 14 | 
 15 | interface StatsSectionProps {
 16 |   stats?: Stat[];
 17 |   className?: string;
 18 | }
 19 | 
 20 | const defaultStats: Stat[] = [
 21 |   {
 22 |     icon: <Database size={28} strokeWidth={1.5} />,
 23 |     label: "Governorates",
 24 |     value: 24,
 25 |     suffix: "",
 26 |     translationKey: "governorates",
 27 |   },
 28 |   {
 29 |     icon: <Users size={28} strokeWidth={1.5} />,
 30 |     label: "Delegations",
 31 |     value: 264,
 32 |     suffix: "",
 33 |     translationKey: "delegations",
 34 |   },
 35 | ];
 36 | 
 37 | export function StatsSection({
 38 |   stats = defaultStats,
 39 |   className,
 40 | }: StatsSectionProps) {
 41 |   const tStats = useTranslations("stats");
 42 |   return (
 43 |     <section className={className} style={{ padding: "40px 0" }}>
 44 |       <motion.h2
 45 |         style={{
 46 |           fontSize: "clamp(20px, 4vw, 24px)",
 47 |           fontWeight: 600,
 48 |           textAlign: "center",
 49 |           marginBottom: 32,
 50 |           color: "#333",
 51 |         }}
 52 |         initial={{ opacity: 0, y: 20 }}
 53 |         whileInView={{ opacity: 1, y: 0 }}
 54 |         transition={{ duration: 0.5 }}
 55 |         viewport={{ once: true }}
 56 |       >
 57 |         {tStats("title")}
 58 |       </motion.h2>
 59 | 
 60 |       <div
 61 |         style={{
 62 |           display: "grid",
 63 |           gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))",
 64 |           gap: "clamp(16px, 3vw, 24px)",
 65 |           maxWidth: 800,
 66 |           margin: "0 auto",
 67 |           padding: "0 clamp(16px, 4vw, 24px)",
 68 |         }}
 69 |       >
 70 |         {stats.map((stat, index) => (
 71 |           <motion.div
 72 |             key={stat.label}
 73 |             initial={{ opacity: 0, y: 20 }}
 74 |             whileInView={{ opacity: 1, y: 0 }}
 75 |             transition={{ delay: index * 0.1, duration: 0.5 }}
 76 |             viewport={{ once: true }}
 77 |           >
 78 |             <Card
 79 |               style={{
 80 |                 padding: "clamp(20px, 4vw, 28px)",
 81 |                 textAlign: "center",
 82 |                 border: "1px solid #e9ecef",
 83 |                 background: "white",
 84 |                 borderRadius: 12,
 85 |                 boxShadow: "0 2px 8px rgba(0, 0, 0, 0.05)",
 86 |                 transition: "transform 0.2s ease, box-shadow 0.2s ease",
 87 |               }}
 88 |               onMouseEnter={(e) => {
 89 |                 e.currentTarget.style.transform = "translateY(-4px)";
 90 |                 e.currentTarget.style.boxShadow =
 91 |                   "0 8px 24px rgba(0, 0, 0, 0.1)";
 92 |               }}
 93 |               onMouseLeave={(e) => {
 94 |                 e.currentTarget.style.transform = "translateY(0)";
 95 |                 e.currentTarget.style.boxShadow =
 96 |                   "0 2px 8px rgba(0, 0, 0, 0.05)";
 97 |               }}
 98 |             >
 99 |               <div
100 |                 style={{
101 |                   display: "flex",
102 |                   justifyContent: "center",
103 |                   marginBottom: "clamp(12px, 2vw, 16px)",
104 |                   color: "#0070f3",
105 |                 }}
106 |               >
107 |                 {stat.icon}
108 |               </div>
109 |               <motion.div
110 |                 style={{
111 |                   fontSize: "clamp(24px, 5vw, 32px)",
112 |                   fontWeight: 700,
113 |                   color: "#333",
114 |                   marginBottom: "clamp(4px, 1vw, 8px)",
115 |                   lineHeight: 1.2,
116 |                 }}
117 |                 initial={{ scale: 0 }}
118 |                 whileInView={{ scale: 1 }}
119 |                 transition={{
120 |                   delay: index * 0.1 + 0.3,
121 |                   duration: 0.5,
122 |                   type: "spring",
123 |                 }}
124 |                 viewport={{ once: true }}
125 |               >
126 |                 {stat.value.toLocaleString()}
127 |                 {stat.suffix}
128 |               </motion.div>
129 |               <div
130 |                 style={{
131 |                   fontSize: "clamp(14px, 3vw, 16px)",
132 |                   color: "#666",
133 |                   fontWeight: 500,
134 |                   lineHeight: 1.4,
135 |                 }}
136 |               >
137 |                 {tStats(stat.translationKey)}
138 |               </div>
139 |             </Card>
140 |           </motion.div>
141 |         ))}
142 |       </div>
143 |     </section>
144 |   );
145 | }
146 |

--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
  1 | @import "tailwindcss";
  2 | @import "tw-animate-css";
  3 | 
  4 | @custom-variant dark (&:is(.dark *));
  5 | 
  6 | @theme inline {
  7 |   --color-background: var(--background);
  8 |   --color-foreground: var(--foreground);
  9 |   --font-sans: var(--font-geist-sans);
 10 |   --font-mono: var(--font-geist-mono);
 11 |   --color-sidebar-ring: var(--sidebar-ring);
 12 |   --color-sidebar-border: var(--sidebar-border);
 13 |   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
 14 |   --color-sidebar-accent: var(--sidebar-accent);
 15 |   --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
 16 |   --color-sidebar-primary: var(--sidebar-primary);
 17 |   --color-sidebar-foreground: var(--sidebar-foreground);
 18 |   --color-sidebar: var(--sidebar);
 19 |   --color-chart-5: var(--chart-5);
 20 |   --color-chart-4: var(--chart-4);
 21 |   --color-chart-3: var(--chart-3);
 22 |   --color-chart-2: var(--chart-2);
 23 |   --color-chart-1: var(--chart-1);
 24 |   --color-ring: var(--ring);
 25 |   --color-input: var(--input);
 26 |   --color-border: var(--border);
 27 |   --color-destructive: var(--destructive);
 28 |   --color-accent-foreground: var(--accent-foreground);
 29 |   --color-accent: var(--accent);
 30 |   --color-muted-foreground: var(--muted-foreground);
 31 |   --color-muted: var(--muted);
 32 |   --color-secondary-foreground: var(--secondary-foreground);
 33 |   --color-secondary: var(--secondary);
 34 |   --color-primary-foreground: var(--primary-foreground);
 35 |   --color-primary: var(--primary);
 36 |   --color-popover-foreground: var(--popover-foreground);
 37 |   --color-popover: var(--popover);
 38 |   --color-card-foreground: var(--card-foreground);
 39 |   --color-card: var(--card);
 40 |   --radius-sm: calc(var(--radius) - 4px);
 41 |   --radius-md: calc(var(--radius) - 2px);
 42 |   --radius-lg: var(--radius);
 43 |   --radius-xl: calc(var(--radius) + 4px);
 44 | }
 45 | 
 46 | :root {
 47 |   --radius: 0.625rem;
 48 |   --background: oklch(1 0 0);
 49 |   --foreground: oklch(0.129 0.042 264.695);
 50 |   --card: oklch(1 0 0);
 51 |   --card-foreground: oklch(0.129 0.042 264.695);
 52 |   --popover: oklch(1 0 0);
 53 |   --popover-foreground: oklch(0.129 0.042 264.695);
 54 |   --primary: oklch(0.208 0.042 265.755);
 55 |   --primary-foreground: oklch(0.984 0.003 247.858);
 56 |   --secondary: oklch(0.968 0.007 247.896);
 57 |   --secondary-foreground: oklch(0.208 0.042 265.755);
 58 |   --muted: oklch(0.968 0.007 247.896);
 59 |   --muted-foreground: oklch(0.554 0.046 257.417);
 60 |   --accent: oklch(0.968 0.007 247.896);
 61 |   --accent-foreground: oklch(0.208 0.042 265.755);
 62 |   --destructive: oklch(0.577 0.245 27.325);
 63 |   --border: oklch(0.929 0.013 255.508);
 64 |   --input: oklch(0.929 0.013 255.508);
 65 |   --ring: oklch(0.704 0.04 256.788);
 66 |   --chart-1: oklch(0.646 0.222 41.116);
 67 |   --chart-2: oklch(0.6 0.118 184.704);
 68 |   --chart-3: oklch(0.398 0.07 227.392);
 69 |   --chart-4: oklch(0.828 0.189 84.429);
 70 |   --chart-5: oklch(0.769 0.188 70.08);
 71 |   --sidebar: oklch(0.984 0.003 247.858);
 72 |   --sidebar-foreground: oklch(0.129 0.042 264.695);
 73 |   --sidebar-primary: oklch(0.208 0.042 265.755);
 74 |   --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
 75 |   --sidebar-accent: oklch(0.968 0.007 247.896);
 76 |   --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
 77 |   --sidebar-border: oklch(0.929 0.013 255.508);
 78 |   --sidebar-ring: oklch(0.704 0.04 256.788);
 79 | }
 80 | 
 81 | .dark {
 82 |   --background: oklch(0.129 0.042 264.695);
 83 |   --foreground: oklch(0.984 0.003 247.858);
 84 |   --card: oklch(0.208 0.042 265.755);
 85 |   --card-foreground: oklch(0.984 0.003 247.858);
 86 |   --popover: oklch(0.208 0.042 265.755);
 87 |   --popover-foreground: oklch(0.984 0.003 247.858);
 88 |   --primary: oklch(0.929 0.013 255.508);
 89 |   --primary-foreground: oklch(0.208 0.042 265.755);
 90 |   --secondary: oklch(0.279 0.041 260.031);
 91 |   --secondary-foreground: oklch(0.984 0.003 247.858);
 92 |   --muted: oklch(0.279 0.041 260.031);
 93 |   --muted-foreground: oklch(0.704 0.04 256.788);
 94 |   --accent: oklch(0.279 0.041 260.031);
 95 |   --accent-foreground: oklch(0.984 0.003 247.858);
 96 |   --destructive: oklch(0.704 0.191 22.216);
 97 |   --border: oklch(1 0 0 / 10%);
 98 |   --input: oklch(1 0 0 / 15%);
 99 |   --ring: oklch(0.551 0.027 264.364);
100 |   --chart-1: oklch(0.488 0.243 264.376);
101 |   --chart-2: oklch(0.696 0.17 162.48);
102 |   --chart-3: oklch(0.769 0.188 70.08);
103 |   --chart-4: oklch(0.627 0.265 303.9);
104 |   --chart-5: oklch(0.645 0.246 16.439);
105 |   --sidebar: oklch(0.208 0.042 265.755);
106 |   --sidebar-foreground: oklch(0.984 0.003 247.858);
107 |   --sidebar-primary: oklch(0.488 0.243 264.376);
108 |   --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
109 |   --sidebar-accent: oklch(0.279 0.041 260.031);
110 |   --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
111 |   --sidebar-border: oklch(1 0 0 / 10%);
112 |   --sidebar-ring: oklch(0.551 0.027 264.364);
113 | }
114 | 
115 | @layer base {
116 |   * {
117 |     @apply border-border outline-ring/50;
118 |   }
119 |   body {
120 |     @apply bg-background text-foreground;
121 |   }
122 | }
123 |

--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Tunisian Municipality API
  2 | 
  3 | A comprehensive API and documentation website for accessing Tunisian municipality data with powerful filtering capabilities. Built for developers who need reliable access to Tunisian administrative data.
  4 | 
  5 | 🌐 **Live Website**: [https://tn-municipality-api.vercel.app](https://tn-municipality-api.vercel.app)
  6 | 
  7 | ## 🌟 Features
  8 | 
  9 | - **📊 Rich Data**: Complete municipality data with 24 governorates and 264+ delegations
 10 | - **🔍 Powerful Filtering**: Filter by governorate name, delegation, and postal code
 11 | - **🚀 Fast & Reliable**: Lightning-fast responses with modern API design
 12 | - **📱 Fully Responsive**: Beautiful documentation that works on all devices
 13 | - **🎨 Modern UI**: Clean, developer-friendly interface with smooth animations
 14 | - **📖 Comprehensive Docs**: Detailed API documentation with practical examples
 15 | 
 16 | ## 🏗️ Built With
 17 | 
 18 | - **Next.js 14** - React framework with App Router
 19 | - **TypeScript** - Type-safe development
 20 | - **Framer Motion** - Smooth animations and interactions
 21 | - **Lucide React** - Beautiful, consistent icons
 22 | - **shadcn/ui** - Modern, accessible components
 23 | 
 24 | ## 🚀 Quick Start
 25 | 
 26 | 1. **Clone the repository**
 27 | 
 28 |    ```bash
 29 |    git clone https://github.com/youssef-of-web/tn-municipality-api.git
 30 |    cd tn-municipality-api
 31 |    ```
 32 | 
 33 | 2. **Install dependencies**
 34 | 
 35 |    ```bash
 36 |    npm install
 37 |    ```
 38 | 
 39 | 3. **Run the development server**
 40 | 
 41 |    ```bash
 42 |    npm run dev
 43 |    ```
 44 | 
 45 | 4. **Open your browser**
 46 |    Navigate to [http://localhost:3000](http://localhost:3000)
 47 | 
 48 | ## 📚 API Usage
 49 | 
 50 | ### Base URL
 51 | 
 52 | ```
 53 | GET /api/municipalities
 54 | ```
 55 | 
 56 | ### Query Parameters
 57 | 
 58 | | Parameter    | Type   | Description                | Example             |
 59 | | ------------ | ------ | -------------------------- | ------------------- |
 60 | | `name`       | string | Filter by governorate name | `?name=ariana`      |
 61 | | `delegation` | string | Filter by delegation name  | `?delegation=ville` |
 62 | | `postalCode` | string | Filter by postal code      | `?postalCode=2058`  |
 63 | 
 64 | ### Example Requests
 65 | 
 66 | ```javascript
 67 | // Get all municipalities
 68 | fetch("/api/municipalities");
 69 | 
 70 | // Filter by governorate
 71 | fetch("/api/municipalities?name=ariana");
 72 | 
 73 | // Filter by delegation
 74 | fetch("/api/municipalities?delegation=ville");
 75 | 
 76 | // Filter by postal code
 77 | fetch("/api/municipalities?postalCode=2058");
 78 | 
 79 | // Combine multiple filters
 80 | fetch("/api/municipalities?name=ariana&delegation=ville");
 81 | ```
 82 | 
 83 | ### Response Format
 84 | 
 85 | ```json
 86 | [
 87 |   {
 88 |     "Name": "ARIANA",
 89 |     "NameAr": "أريانة",
 90 |     "Value": "ARIANA",
 91 |     "Delegations": [
 92 |       {
 93 |         "Name": "ARIANA VILLE (Residence Kortoba)",
 94 |         "NameAr": "أريانة المدينة (إقامة قرطبة)",
 95 |         "Value": "ARIANA VILLE",
 96 |         "PostalCode": "2058",
 97 |         "Latitude": 36.866011,
 98 |         "Longitude": 10.193923
 99 |       }
100 |     ]
101 |   }
102 | ]
103 | ```
104 | 
105 | ## 🎯 Data Coverage
106 | 
107 | - **24 Governorates** - Complete coverage of all Tunisian administrative regions
108 | - **264+ Delegations** - Detailed district-level data
109 | - **GPS Coordinates** - Latitude and longitude for mapping applications
110 | - **Bilingual Support** - Names in both English and Arabic
111 | - **Postal Codes** - Complete postal code database
112 | 
113 | ## 🤝 Contributing
114 | 
115 | We welcome contributions from the community! Whether you're a developer, designer, or just someone who wants to help improve this project, we'd love to have you on board.
116 | 
117 | ### 🎉 Welcome Contributors!
118 | 
119 | This project is open to everyone who wants to contribute. No matter your experience level, there's always something you can help with:
120 | 
121 | - **🐛 Bug Reports** - Found an issue? Let us know!
122 | - **💡 Feature Requests** - Have an idea? Share it!
123 | - **📝 Documentation** - Help improve our docs
124 | - **🎨 UI/UX Improvements** - Make it look better
125 | - **🚀 Performance** - Help make it faster
126 | - **🌍 Localization** - Add more languages
127 | - **📊 Data** - Help improve our data quality
128 | 
129 | ### How to Contribute
130 | 
131 | 1. **Fork the repository**
132 | 
133 |    ```bash
134 |    git clone https://github.com/youssef-of-web/tn-municipality-api.git
135 |    ```
136 | 
137 | 2. **Create a feature branch**
138 | 
139 |    ```bash
140 |    git checkout -b feature/your-amazing-feature
141 |    ```
142 | 
143 | 3. **Make your changes**
144 |    - Write clean, well-documented code
145 |    - Follow the existing code style
146 |    - Add tests if applicable
147 | 
148 | 4. **Commit your changes**
149 | 
150 |    ```bash
151 |    git commit -m "feat: add your amazing feature"
152 |    ```
153 | 
154 | 5. **Push to your branch**
155 | 
156 |    ```bash
157 |    git push origin feature/your-amazing-feature
158 |    ```
159 | 
160 | 6. **Open a Pull Request**
161 |    - Provide a clear description of your changes
162 |    - Include screenshots if it's a UI change
163 |    - Link any related issues
164 | 
165 | ### 🎯 Areas We'd Love Help With
166 | 
167 | - **🌐 Additional Languages** - Arabic documentation
168 | - **📱 Mobile Optimization** - Better mobile experience
169 | - **🔍 Advanced Filtering** - More search options
170 | - **📊 Data Visualization** - Charts and graphs
171 | - **🗺️ Mapping Features** - Interactive maps
172 | - **📈 Analytics** - Usage statistics
173 | - **🔒 Security** - Security improvements
174 | - **⚡ Performance** - Speed optimizations
175 | 
176 | ### 📋 Code of Conduct
177 | 
178 | We're committed to providing a welcoming and inspiring community for all. Please be respectful and inclusive in all interactions.
179 | 
180 | ### 🏷️ Issue Labels
181 | 
182 | - `good first issue` - Perfect for newcomers
183 | - `bug` - Something isn't working
184 | - `enhancement` - New feature or request
185 | - `documentation` - Improvements to docs
186 | - `help wanted` - Extra attention needed
187 | 
188 | ### 🎁 Recognition
189 | 
190 | Contributors will be recognized in our README and project documentation. We appreciate every contribution, no matter how small!
191 | 
192 | ---
193 | 
194 | **Built with ❤️ for the Tunisian developer community**
195 |

--------------------------------------------------------------------------------
/app/api/municipalities/route.ts:
--------------------------------------------------------------------------------
  1 | import { data } from "@/data/data";
  2 | import { NextResponse } from "next/server";
  3 | 
  4 | /**
  5 |  * Interface for municipality data structure
  6 |  */
  7 | interface Municipality {
  8 |   Name: string;
  9 |   NameAr: string;
 10 |   Value: string;
 11 |   Delegations: Delegation[];
 12 | }
 13 | 
 14 | interface Delegation {
 15 |   Name: string;
 16 |   NameAr: string;
 17 |   Value: string;
 18 |   PostalCode: string;
 19 |   Latitude: number;
 20 |   Longitude: number;
 21 | }
 22 | 
 23 | /**
 24 |  * Searches for municipalities by governorate name
 25 |  * @param searchTerm - The search term to match against governorate names
 26 |  * @param municipalities - Array of municipality data
 27 |  * @returns Filtered array of municipalities
 28 |  */
 29 | function searchByGovernorate(
 30 |   searchTerm: string,
 31 |   municipalities: Municipality[],
 32 | ): Municipality[] {
 33 |   return municipalities.filter(
 34 |     (item) =>
 35 |       item.Name.toLowerCase().includes(searchTerm.toLowerCase()) ||
 36 |       item.NameAr.toLowerCase().includes(searchTerm.toLowerCase()),
 37 |   );
 38 | }
 39 | 
 40 | /**
 41 |  * Searches for municipalities by delegation name
 42 |  * @param searchTerm - The search term to match against delegation names
 43 |  * @param municipalities - Array of municipality data
 44 |  * @returns Filtered array of municipalities with matching delegations
 45 |  */
 46 | function searchByDelegation(
 47 |   searchTerm: string,
 48 |   municipalities: Municipality[],
 49 | ): Municipality[] {
 50 |   return municipalities
 51 |     .map((item) => ({
 52 |       ...item,
 53 |       Delegations: item.Delegations.filter(
 54 |         (d) =>
 55 |           d.Name.toLowerCase().includes(searchTerm.toLowerCase()) ||
 56 |           d.NameAr.toLowerCase().includes(searchTerm.toLowerCase()),
 57 |       ),
 58 |     }))
 59 |     .filter((item) => item.Delegations.length > 0);
 60 | }
 61 | 
 62 | /**
 63 |  * Enhanced search with fallback mechanism
 64 |  * First tries to search by governorate name, if no results found,
 65 |  * falls back to searching by delegation name and vice versa
 66 |  * @param searchTerm - The search term
 67 |  * @param searchType - Primary search type ('governorate' or 'delegation')
 68 |  * @param municipalities - Array of municipality data
 69 |  * @returns Search results with fallback applied if needed
 70 |  */
 71 | function enhancedSearch(
 72 |   searchTerm: string,
 73 |   searchType: "governorate" | "delegation",
 74 |   municipalities: Municipality[],
 75 | ): { results: Municipality[]; searchUsed: string; fallbackApplied: boolean } {
 76 |   let results: Municipality[] = [];
 77 |   let fallbackApplied = false;
 78 |   let searchUsed: string = searchType;
 79 | 
 80 |   if (searchType === "governorate") {
 81 |     // Primary search: by governorate
 82 |     results = searchByGovernorate(searchTerm, municipalities);
 83 | 
 84 |     // Fallback: if no results, try delegation search
 85 |     if (results.length === 0) {
 86 |       results = searchByDelegation(searchTerm, municipalities);
 87 |       fallbackApplied = true;
 88 |       searchUsed = "delegation (fallback)";
 89 |     }
 90 |   } else {
 91 |     // Primary search: by delegation
 92 |     results = searchByDelegation(searchTerm, municipalities);
 93 | 
 94 |     // Fallback: if no results, try governorate search
 95 |     if (results.length === 0) {
 96 |       results = searchByGovernorate(searchTerm, municipalities);
 97 |       fallbackApplied = true;
 98 |       searchUsed = "governorate (fallback)";
 99 |     }
100 |   }
101 | 
102 |   return { results, searchUsed, fallbackApplied };
103 | }
104 | 
105 | /**
106 |  * Filters municipalities by postal code
107 |  * @param postalCode - The postal code to search for
108 |  * @param municipalities - Array of municipality data
109 |  * @returns Filtered array of municipalities with matching postal codes
110 |  */
111 | function filterByPostalCode(
112 |   postalCode: string,
113 |   municipalities: Municipality[],
114 | ): Municipality[] {
115 |   return municipalities
116 |     .map((item) => ({
117 |       ...item,
118 |       Delegations: item.Delegations.filter((d) => d.PostalCode === postalCode),
119 |     }))
120 |     .filter((item) => item.Delegations.length > 0);
121 | }
122 | 
123 | /**
124 |  * Sorts municipalities by specified field and order
125 |  * @param municipalities - Array of municipality data to sort
126 |  * @param sortField - Field to sort by ('name' or 'nameAr')
127 |  * @param sortOrder - Sort order ('asc' or 'desc')
128 |  * @returns Sorted array of municipalities
129 |  */
130 | function sortMunicipalities(
131 |   municipalities: Municipality[],
132 |   sortField: string,
133 |   sortOrder: string = "asc",
134 | ): Municipality[] {
135 |   return municipalities.sort((a, b) => {
136 |     let fieldA: string;
137 |     let fieldB: string;
138 | 
139 |     if (sortField === "name") {
140 |       fieldA = a.Name.toLowerCase();
141 |       fieldB = b.Name.toLowerCase();
142 |       return sortOrder === "asc"
143 |         ? fieldA.localeCompare(fieldB)
144 |         : fieldB.localeCompare(fieldA);
145 |     } else if (sortField === "nameAr") {
146 |       fieldA = a.NameAr.toLowerCase();
147 |       fieldB = b.NameAr.toLowerCase();
148 |       return sortOrder === "asc"
149 |         ? fieldA.localeCompare(fieldB, "ar")
150 |         : fieldB.localeCompare(fieldA, "ar");
151 |     }
152 | 
153 |     return 0;
154 |   });
155 | }
156 | 
157 | /**
158 |  * GET endpoint for municipalities API
159 |  *
160 |  * Supports the following query parameters:
161 |  * - search: Unified search that tries governorate first, then delegation as fallback
162 |  * - name: Search by governorate name (with delegation fallback) - legacy support
163 |  * - delegation: Search by delegation name (with governorate fallback) - legacy support
164 |  * - postalCode: Filter by exact postal code match
165 |  * - sort: Sort field ('name' or 'nameAr')
166 |  * - order: Sort order ('asc' or 'desc', defaults to 'asc')
167 |  *
168 |  * Search behavior:
169 |  * - Searches are case-insensitive
170 |  * - Supports both English and Arabic names
171 |  * - Automatic fallback between governorate and delegation searches
172 |  * - If searching by governorate fails, automatically tries delegation search
173 |  * - If searching by delegation fails, automatically tries governorate search
174 |  *
175 |  * @param request - The incoming HTTP request
176 |  * @returns JSON response with filtered and sorted municipality data
177 |  */
178 | export async function GET(request: Request) {
179 |   try {
180 |     const { searchParams } = new URL(request.url);
181 |     let results: Municipality[] = [...data]; // Create a copy to avoid mutations
182 | 
183 |     // Enhanced search with fallback mechanism
184 |     const name = searchParams.get("name");
185 |     const delegation = searchParams.get("delegation");
186 |     const search = searchParams.get("search"); // New unified search parameter
187 | 
188 |     // Unified search parameter with automatic fallback
189 |     if (search) {
190 |       const searchResult = enhancedSearch(search, "governorate", results);
191 |       results = searchResult.results;
192 | 
193 |       // Log search information for debugging (could be useful for analytics)
194 |       console.log(
195 |         `Search: "${search}" - Used: ${searchResult.searchUsed}, Fallback: ${searchResult.fallbackApplied}, Results: ${results.length}`,
196 |       );
197 |     }
198 |     // Legacy support: individual name parameter (governorate search with delegation fallback)
199 |     else if (name) {
200 |       const searchResult = enhancedSearch(name, "governorate", results);
201 |       results = searchResult.results;
202 | 
203 |       console.log(
204 |         `Name search: "${name}" - Used: ${searchResult.searchUsed}, Fallback: ${searchResult.fallbackApplied}, Results: ${results.length}`,
205 |       );
206 |     }
207 |     // Legacy support: individual delegation parameter (delegation search with governorate fallback)
208 |     else if (delegation) {
209 |       const searchResult = enhancedSearch(delegation, "delegation", results);
210 |       results = searchResult.results;
211 | 
212 |       console.log(
213 |         `Delegation search: "${delegation}" - Used: ${searchResult.searchUsed}, Fallback: ${searchResult.fallbackApplied}, Results: ${results.length}`,
214 |       );
215 |     }
216 | 
217 |     // Filtering by PostalCode (delegation postal code)
218 |     const postalCode = searchParams.get("postalCode");
219 |     if (postalCode) {
220 |       results = filterByPostalCode(postalCode, results);
221 |     }
222 | 
223 |     // Sorting by Name (governorate) alphabetically or by NameAr (Arabic name)
224 |     const sortingField = searchParams.get("sort");
225 |     const sortOrder = searchParams.get("order") || "asc";
226 |     if (
227 |       sortingField &&
228 |       (sortingField === "name" || sortingField === "nameAr")
229 |     ) {
230 |       results = sortMunicipalities(results, sortingField, sortOrder);
231 |     }
232 | 
233 |     return NextResponse.json(results);
234 |   } catch (error) {
235 |     console.error("Error in municipalities API:", error);
236 |     return NextResponse.json(
237 |       { error: "Internal server error", message: "Failed to process request" },
238 |       { status: 500 },
239 |     );
240 |   }
241 | }
242 |

--------------------------------------------------------------------------------
/components/ApiPlayground.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | import { Card } from "./ui/card";
  3 | import { Button } from "./ui/button";
  4 | import { Input } from "./ui/input";
  5 | import { Label } from "./ui/label";
  6 | import { useState, useEffect } from "react";
  7 | import { motion } from "framer-motion";
  8 | import { Send } from "lucide-react";
  9 | import { Select } from "./ui/select";
 10 | import { usePathname } from "next/navigation";
 11 | import { useTranslations } from "next-intl";
 12 | import { ToastContainer, toast } from "react-toastify";
 13 | 
 14 | interface ApiPlaygroundProps {
 15 |   heading?: string;
 16 |   description?: string;
 17 |   className?: string;
 18 | }
 19 | 
 20 | export function ApiPlayground({
 21 |   heading = "API Playground",
 22 |   description = "Test the API with real data.",
 23 |   className,
 24 | }: ApiPlaygroundProps) {
 25 |   const tPlayground = useTranslations("playground");
 26 |   const pathname = usePathname();
 27 |   const [name, setName] = useState("");
 28 |   const [delegation, setDelegation] = useState("");
 29 |   const [postalCode, setPostalCode] = useState("");
 30 |   const [result, setResult] = useState<any>(null);
 31 |   const [loading, setLoading] = useState(false);
 32 |   const [loading_, setLoading_] = useState(false);
 33 |   const [radius, setRadius] = useState(10);
 34 |   const [sortBy, setSortBy] = useState("Name");
 35 |   const [lastUrl, setLastUrl] = useState("");
 36 |   const [currentLanguage, setCurrentLanguage] = useState("en");
 37 | 
 38 |   const isRTL = currentLanguage === "ar";
 39 |   useEffect(() => {
 40 |     const pathLang = pathname.startsWith("/ar") ? "ar" : "en";
 41 |     setCurrentLanguage(pathLang);
 42 |   }, [pathname]);
 43 |   async function routeAPI(e: any) {
 44 |     e.preventDefault();
 45 |     const clickedButton = e.nativeEvent?.submitter;
 46 |     if (clickedButton) {
 47 |       const value = clickedButton.value;
 48 |       if (value === "filter") {
 49 |         await handleFetch();
 50 |       } else if (value === "getNearby") {
 51 |         await getMunicipalitiesNearby(radius);
 52 |       }
 53 |     }
 54 |   }
 55 |   async function handleFetch() {
 56 |     setLoading(true);
 57 |     let url = "/api/municipalities?";
 58 |     if (name) url += `name=${encodeURIComponent(name)}&`;
 59 |     if (delegation) url += `delegation=${encodeURIComponent(delegation)}&`;
 60 |     if (postalCode) url += `postalCode=${encodeURIComponent(postalCode)}&`;
 61 |     const res = await fetch(url);
 62 |     const data = await res.json();
 63 |     setResult(data);
 64 |     const current_url = `http://${window.location.host}${url}`;
 65 |     setLastUrl(current_url);
 66 |     setLoading(false);
 67 |   }
 68 |   async function getMunicipalitiesNearby(radius = 10) {
 69 |     setLoading_(true);
 70 |     if (navigator.geolocation) {
 71 |       navigator.geolocation.getCurrentPosition(
 72 |         async (position) => {
 73 |           const lat = position.coords.latitude;
 74 |           const lng = position.coords.longitude;
 75 |           const url = `/api/municipalities/near?lat=${lat}&lng=${lng}&radius=${radius}`;
 76 |           const res = await fetch(url);
 77 |           const data = await res.json();
 78 |           setResult(data);
 79 |           const current_url = `http://${window.location.host}${url}`;
 80 |           setLastUrl(current_url);
 81 |           setLoading_(false);
 82 |         },
 83 |         (error) => {
 84 |           console.error("Geolocation error:", error);
 85 |           setLoading_(false);
 86 |           toast.error(tPlayground("geolocationError"));
 87 |         },
 88 |       );
 89 |     } else {
 90 |       setLoading_(false);
 91 |       toast.error(tPlayground("geolocationNotSupported"));
 92 |     }
 93 |   }
 94 |   return (
 95 |     <section
 96 |       className={className}
 97 |       style={{
 98 |         direction: isRTL ? "rtl" : "ltr",
 99 |       }}
100 |     >
101 |       <motion.h2
102 |         style={{
103 |           fontSize: 28,
104 |           fontWeight: 700,
105 |           marginBottom: 8,
106 |           textAlign: "center",
107 |         }}
108 |         initial={{ opacity: 0, y: 20 }}
109 |         animate={{ opacity: 1, y: 0 }}
110 |         transition={{ duration: 0.5 }}
111 |       >
112 |         {heading}
113 |       </motion.h2>
114 |       <motion.p
115 |         style={{
116 |           color: "#666",
117 |           marginBottom: 24,
118 |           textAlign: "center",
119 |         }}
120 |         initial={{ opacity: 0, y: 10 }}
121 |         animate={{ opacity: 1, y: 0 }}
122 |         transition={{ delay: 0.2, duration: 0.5 }}
123 |       >
124 |         {description}
125 |       </motion.p>
126 |       <Card style={{ padding: 24 }}>
127 |         <form
128 |           onSubmit={routeAPI}
129 |           className="flex flex-wrap gap-4 justify-center mb-6"
130 |           style={{
131 |             direction: isRTL ? "rtl" : "ltr",
132 |           }}
133 |         >
134 |           <div className="min-w-[180px] max-w-[240px] flex-1">
135 |             <Label
136 |               htmlFor="name"
137 |               className="mb-2 block"
138 |               style={{
139 |                 textAlign: isRTL ? "right" : "left",
140 |                 display: "block",
141 |               }}
142 |             >
143 |               {tPlayground("governorateName")}
144 |             </Label>
145 |             <Input
146 |               id="name"
147 |               value={name}
148 |               onChange={(e) => setName(e.target.value)}
149 |               placeholder={tPlayground("governorateNamePlaceholder")}
150 |               className="rounded-xl shadow-sm border border-gray-200 transition duration-200 outline-none h-12 text-lg w-full"
151 |               style={{
152 |                 textAlign: isRTL ? "right" : "left",
153 |                 direction: isRTL ? "rtl" : "ltr",
154 |               }}
155 |             />
156 |           </div>
157 |           <div className="min-w-[180px] max-w-[240px] flex-1">
158 |             <Label
159 |               htmlFor="delegation"
160 |               className="mb-2 block"
161 |               style={{ textAlign: isRTL ? "right" : "left", display: "block" }}
162 |             >
163 |               {tPlayground("delegation")}
164 |             </Label>
165 |             <Input
166 |               id="delegation"
167 |               value={delegation}
168 |               onChange={(e) => setDelegation(e.target.value)}
169 |               placeholder={tPlayground("delegationPlaceholder")}
170 |               className="rounded-xl shadow-sm border border-gray-200 transition duration-200 outline-none h-12 text-lg w-full"
171 |               style={{
172 |                 textAlign: isRTL ? "right" : "left",
173 |                 direction: isRTL ? "rtl" : "ltr",
174 |               }}
175 |             />
176 |           </div>
177 |           <div className="min-w-[140px] max-w-[180px] flex-1">
178 |             <Label
179 |               htmlFor="postalCode"
180 |               className="mb-2 block"
181 |               style={{ textAlign: isRTL ? "right" : "left", display: "block" }}
182 |             >
183 |               {tPlayground("postalCode")}
184 |             </Label>
185 |             <Input
186 |               id="postalCode"
187 |               value={postalCode}
188 |               onChange={(e) => setPostalCode(e.target.value)}
189 |               placeholder={tPlayground("postalCodePlaceholder")}
190 |               className="rounded-xl shadow-sm border border-gray-200 transition duration-200 outline-none h-12 text-lg w-full"
191 |               style={{
192 |                 textAlign: isRTL ? "right" : "left",
193 |                 direction: isRTL ? "rtl" : "ltr",
194 |               }}
195 |             />
196 |           </div>
197 |           <div className="min-w-[140px] max-w-[180px] flex-1">
198 |             <Label
199 |               htmlFor="sortBy"
200 |               className="mb-2 block"
201 |               style={{ textAlign: isRTL ? "right" : "left", display: "block" }}
202 |             >
203 |               {tPlayground("sortBy")}
204 |             </Label>
205 |             <Select
206 |               id="sortBy"
207 |               value={sortBy}
208 |               onChange={(e) => setSortBy(e.target.value)}
209 |               className="rounded-xl shadow-sm border border-gray-200 transition duration-200 outline-none h-12 text-lg w-full"
210 |               style={{
211 |                 textAlign: isRTL ? "right" : "left",
212 |                 direction: isRTL ? "rtl" : "ltr",
213 |               }}
214 |             >
215 |               <option value="name">{tPlayground("sortByName")}</option>
216 |               <option value="nameAr">{tPlayground("sortByNameAr")}</option>
217 |             </Select>
218 |           </div>
219 |           <div className="flex items-end">
220 |             <Button
221 |               type="submit"
222 |               value="filter"
223 |               disabled={loading}
224 |               size="lg"
225 |               className="flex items-center gap-2 h-12 text-base font-medium w-full md:w-auto justify-center"
226 |               style={{
227 |                 flexDirection: isRTL ? "row-reverse" : "row",
228 |               }}
229 |             >
230 |               {loading ? tPlayground("loading") : tPlayground("testApi")}
231 |               <Send size={18} />
232 |             </Button>
233 |           </div>
234 |           <div className="flex flex-col md:flex-row gap-4 justify-center mb-4 mt-4 w-full">
235 |             <div className="flex flex-col w-full md:w-auto">
236 |               <Label
237 |                 htmlFor="radius"
238 |                 className="mb-2 block"
239 |                 style={{
240 |                   textAlign: isRTL ? "right" : "left",
241 |                   display: "block",
242 |                 }}
243 |               >
244 |                 {tPlayground("radius")}
245 |               </Label>
246 |               <Input
247 |                 id="radius"
248 |                 className="rounded-xl shadow-sm border border-gray-200 transition duration-200 outline-none h-12 text-lg mb-4 w-full md:w-auto"
249 |                 value={radius}
250 |                 onChange={(e) => setRadius(Number(e.target.value))}
251 |                 type="number"
252 |                 min={0}
253 |                 style={{
254 |                   textAlign: isRTL ? "right" : "left",
255 |                   direction: isRTL ? "rtl" : "ltr",
256 |                 }}
257 |               />
258 |             </div>
259 |             <Button
260 |               type="submit"
261 |               value="getNearby"
262 |               size="lg"
263 |               className="flex items-center gap-2 h-12 text-base font-medium mt-2 md:mt-5 w-full md:w-auto justify-center"
264 |               style={{
265 |                 flexDirection: isRTL ? "row-reverse" : "row",
266 |               }}
267 |             >
268 |               {loading_
269 |                 ? tPlayground("loading")
270 |                 : tPlayground("getNearbyMunicipalities")}{" "}
271 |               <Send size={18} />
272 |             </Button>
273 |           </div>
274 |         </form>
275 |         <motion.div
276 |           style={{ width: "100%" }}
277 |           initial={{ opacity: 0, y: 20 }}
278 |           animate={{ opacity: 1, y: 0 }}
279 |           transition={{ delay: 0.3, duration: 0.5 }}
280 |         >
281 |           <Label
282 |             style={{
283 |               textAlign: isRTL ? "right" : "left",
284 |               display: "block",
285 |             }}
286 |           >
287 |             {tPlayground("apiResponse")}
288 |           </Label>
289 |           <motion.pre
290 |             style={{
291 |               background: "#f8f9fa",
292 |               padding: 16,
293 |               borderRadius: 8,
294 |               maxHeight: 400,
295 |               overflow: "auto",
296 |               border: "1px solid #e9ecef",
297 |               fontSize: 14,
298 |               marginTop: 8,
299 |               width: "100%",
300 |               textAlign: "left",
301 |               direction: "ltr",
302 |             }}
303 |             initial={{ opacity: 0 }}
304 |             animate={{ opacity: 1 }}
305 |             transition={{ delay: 0.5, duration: 0.5 }}
306 |           >
307 |             {result
308 |               ? JSON.stringify(result, null, 2)
309 |               : tPlayground("apiResponsePlaceholder")}
310 |           </motion.pre>
311 |           {result && lastUrl && (
312 |             <Button
313 |               type="button"
314 |               onClick={() => {
315 |                 navigator.clipboard.writeText(lastUrl);
316 |                 toast.info(tPlayground("urlCopied"));
317 |               }}
318 |               variant="outline"
319 |               size="lg"
320 |               style={{
321 |                 display: "flex",
322 |                 alignItems: "center",
323 |                 gap: 8,
324 |                 height: 48,
325 |                 fontSize: 16,
326 |                 fontWeight: 500,
327 |                 marginTop: 16,
328 |                 cursor: "pointer",
329 |                 flexDirection: isRTL ? "row-reverse" : "row",
330 |               }}
331 |             >
332 |               {tPlayground("copyUrl")} <Send size={18} />
333 |             </Button>
334 |           )}
335 |         </motion.div>
336 |       </Card>
337 |       <ToastContainer
338 |         position={isRTL ? "top-left" : "top-right"}
339 |         autoClose={5000}
340 |         hideProgressBar={false}
341 |         newestOnTop={false}
342 |         closeOnClick
343 |         rtl={isRTL}
344 |         pauseOnFocusLoss
345 |         draggable
346 |         pauseOnHover
347 |       />
348 |     </section>
349 |   );
350 | }
351 |

--------------------------------------------------------------------------------
/components/DocumentationSection.tsx:
--------------------------------------------------------------------------------
  1 | import { useTranslations } from "next-intl";
  2 | import { Card } from "./ui/card";
  3 | import { usePathname } from "next/navigation";
  4 | import { useEffect, useState } from "react";
  5 | 
  6 | interface DocumentationSectionProps {
  7 |   title?: string;
  8 |   endpoints?: string[];
  9 |   parameters?: Array<{
 10 |     name: string;
 11 |     translationKey: string;
 12 |     example: string;
 13 |     endpoint: number;
 14 |     type: string;
 15 |   }>;
 16 |   exampleRequest?: string;
 17 |   exampleResponse?: string;
 18 |   className?: string;
 19 | }
 20 | 
 21 | export function DocumentationSection({
 22 |   title = "API Documentation",
 23 |   endpoints = ["GET /api/municipalities", "GET /api/municipalities/near"],
 24 |   parameters = [
 25 |     {
 26 |       name: "name",
 27 |       type: "string",
 28 |       translationKey: "name",
 29 |       example: "?name=ariana",
 30 |       endpoint: 0,
 31 |     },
 32 |     {
 33 |       name: "delegation",
 34 |       type: "string",
 35 |       translationKey: "delegation",
 36 |       example: "?delegation=ville",
 37 |       endpoint: 0,
 38 |     },
 39 |     {
 40 |       name: "postalCode",
 41 |       type: "string",
 42 |       translationKey: "postalCode",
 43 |       example: "?postalCode=2058",
 44 |       endpoint: 0,
 45 |     },
 46 |     {
 47 |       name: "lat, lng, radius",
 48 |       type: "[number, number, number]",
 49 |       translationKey: "location",
 50 |       example: "?lat=36.8065&lng=10.1815&radius=5000",
 51 |       endpoint: 1,
 52 |     },
 53 |   ],
 54 |   exampleResponse,
 55 |   className,
 56 | }: DocumentationSectionProps) {
 57 |   const tDoc = useTranslations("documentation");
 58 |   const pathname = usePathname();
 59 |   const [currentLanguage, setCurrentLanguage] = useState("en");
 60 | 
 61 |   const isRTL = currentLanguage === "ar";
 62 | 
 63 |   useEffect(() => {
 64 |     const pathLang = pathname.startsWith("/ar") ? "ar" : "en";
 65 |     setCurrentLanguage(pathLang);
 66 |   }, [pathname]);
 67 | 
 68 |   return (
 69 |     <div
 70 |       className={className}
 71 |       style={{
 72 |         padding: "0 8px",
 73 |         direction: isRTL ? "rtl" : "ltr",
 74 |       }}
 75 |     >
 76 |       <h2
 77 |         style={{
 78 |           fontSize: 28,
 79 |           fontWeight: 700,
 80 |           marginBottom: 24,
 81 |           textAlign: "center",
 82 |         }}
 83 |       >
 84 |         {tDoc("title")}
 85 |       </h2>
 86 | 
 87 |       <Card style={{ padding: 24, marginBottom: 24 }}>
 88 |         <h3
 89 |           style={{
 90 |             fontSize: 20,
 91 |             fontWeight: 600,
 92 |             marginBottom: 16,
 93 |             textAlign: isRTL ? "right" : "left",
 94 |           }}
 95 |         >
 96 |           {tDoc("endpoints.title")}
 97 |         </h3>
 98 |         {endpoints.map((endpoint: string) => (
 99 |           <code
100 |             key={endpoint}
101 |             style={{
102 |               background: "#f4f4f4",
103 |               padding: 12,
104 |               borderRadius: 8,
105 |               display: "block",
106 |               fontSize: 16,
107 |               fontWeight: 500,
108 |               fontFamily: "monospace",
109 |               textAlign: isRTL ? "right" : "left",
110 |               direction: "ltr",
111 |             }}
112 |           >
113 |             {endpoint}
114 |           </code>
115 |         ))}
116 |         <p
117 |           style={{
118 |             marginTop: 12,
119 |             color: "#666",
120 |             fontSize: 14,
121 |             textAlign: isRTL ? "right" : "left",
122 |           }}
123 |         >
124 |           {tDoc("endpoints.baseUrl")}{" "}
125 |           <code
126 |             style={{
127 |               background: "#f0f0f0",
128 |               padding: "2px 6px",
129 |               borderRadius: 4,
130 |               direction: "ltr",
131 |               display: "inline-block",
132 |             }}
133 |           >
134 |             https://tn-municipality-api.vercel.app
135 |           </code>
136 |         </p>
137 |       </Card>
138 | 
139 |       <Card style={{ padding: 24, marginBottom: 24 }}>
140 |         <h3
141 |           style={{
142 |             fontSize: 20,
143 |             fontWeight: 600,
144 |             marginBottom: 16,
145 |             textAlign: isRTL ? "right" : "left",
146 |           }}
147 |         >
148 |           {tDoc("parameters.title")}
149 |         </h3>
150 |         <p
151 |           style={{
152 |             color: "#666",
153 |             marginBottom: 16,
154 |             fontSize: 14,
155 |             textAlign: isRTL ? "right" : "left",
156 |           }}
157 |         >
158 |           {tDoc("parameters.description")}
159 |         </p>
160 |         <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
161 |           {parameters.map((param, index) => (
162 |             <div
163 |               key={index}
164 |               style={{
165 |                 border: "1px solid #e9ecef",
166 |                 borderRadius: 8,
167 |                 padding: 16,
168 |                 background: "#fafafa",
169 |               }}
170 |             >
171 |               <div
172 |                 style={{
173 |                   display: "flex",
174 |                   alignItems: "center",
175 |                   gap: 8,
176 |                   marginBottom: 8,
177 |                   flexDirection: isRTL ? "row-reverse" : "row",
178 |                   justifyContent: isRTL ? "flex-end" : "flex-start",
179 |                 }}
180 |               >
181 |                 <code
182 |                   style={{
183 |                     background: "#0070f3",
184 |                     color: "white",
185 |                     padding: "4px 8px",
186 |                     borderRadius: 4,
187 |                     fontSize: 14,
188 |                     fontWeight: 600,
189 |                     direction: "ltr",
190 |                   }}
191 |                 >
192 |                   {param.name}
193 |                 </code>
194 |                 <span
195 |                   style={{
196 |                     fontSize: 12,
197 |                     color: "#666",
198 |                     direction: "ltr",
199 |                   }}
200 |                 >
201 |                   {param.type}
202 |                 </span>
203 |               </div>
204 |               <p
205 |                 style={{
206 |                   marginBottom: 8,
207 |                   fontSize: 14,
208 |                   lineHeight: 1.5,
209 |                   textAlign: isRTL ? "right" : "left",
210 |                 }}
211 |               >
212 |                 {tDoc(`parameters.${param.translationKey}.description`)}
213 |               </p>
214 |               <div
215 |                 style={{
216 |                   fontSize: 13,
217 |                   color: "#666",
218 |                   textAlign: isRTL ? "right" : "left",
219 |                 }}
220 |               >
221 |                 <strong>{tDoc("examples.exampleLabel")}:</strong>{" "}
222 |                 <code
223 |                   style={{
224 |                     background: "#f0f0f0",
225 |                     padding: "2px 6px",
226 |                     borderRadius: 4,
227 |                     direction: "ltr",
228 |                     display: "inline-block",
229 |                   }}
230 |                 >
231 |                   {endpoints[param.endpoint]}
232 |                   {param.example}
233 |                 </code>
234 |               </div>
235 |             </div>
236 |           ))}
237 |         </div>
238 |       </Card>
239 | 
240 |       <Card style={{ padding: 24, marginBottom: 24 }}>
241 |         <h3
242 |           style={{
243 |             fontSize: 20,
244 |             fontWeight: 600,
245 |             marginBottom: 16,
246 |             textAlign: isRTL ? "right" : "left",
247 |           }}
248 |         >
249 |           {tDoc("examples.title")}
250 |         </h3>
251 |         <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
252 |           <div>
253 |             <h4
254 |               style={{
255 |                 fontSize: 16,
256 |                 fontWeight: 600,
257 |                 marginBottom: 8,
258 |                 textAlign: isRTL ? "right" : "left",
259 |               }}
260 |             >
261 |               {tDoc("examples.getAllMunicipalities")}
262 |             </h4>
263 |             <pre
264 |               style={{
265 |                 background: "#222",
266 |                 color: "#fff",
267 |                 padding: 12,
268 |                 borderRadius: 8,
269 |                 fontSize: 14,
270 |                 overflow: "auto",
271 |                 direction: "ltr",
272 |                 textAlign: "left",
273 |               }}
274 |             >
275 |               {`fetch('/api/municipalities')
276 |   .then(response => response.json())
277 |   .then(data => console.log(data));`}
278 |             </pre>
279 |           </div>
280 | 
281 |           <div>
282 |             <h4
283 |               style={{
284 |                 fontSize: 16,
285 |                 fontWeight: 600,
286 |                 marginBottom: 8,
287 |                 textAlign: isRTL ? "right" : "left",
288 |               }}
289 |             >
290 |               {tDoc("examples.filterByGovernorate")}
291 |             </h4>
292 |             <pre
293 |               style={{
294 |                 background: "#222",
295 |                 color: "#fff",
296 |                 padding: 12,
297 |                 borderRadius: 8,
298 |                 fontSize: 14,
299 |                 overflow: "auto",
300 |                 direction: "ltr",
301 |                 textAlign: "left",
302 |               }}
303 |             >
304 |               {`fetch('/api/municipalities?name=ariana')
305 |   .then(response => response.json())
306 |   .then(data => console.log(data));`}
307 |             </pre>
308 |           </div>
309 | 
310 |           <div>
311 |             <h4
312 |               style={{
313 |                 fontSize: 16,
314 |                 fontWeight: 600,
315 |                 marginBottom: 8,
316 |                 textAlign: isRTL ? "right" : "left",
317 |               }}
318 |             >
319 |               {tDoc("examples.filterByDelegation")}
320 |             </h4>
321 |             <pre
322 |               style={{
323 |                 background: "#222",
324 |                 color: "#fff",
325 |                 padding: 12,
326 |                 borderRadius: 8,
327 |                 fontSize: 14,
328 |                 overflow: "auto",
329 |                 direction: "ltr",
330 |                 textAlign: "left",
331 |               }}
332 |             >
333 |               {`fetch('/api/municipalities?delegation=ville')
334 |   .then(response => response.json())
335 |   .then(data => console.log(data));`}
336 |             </pre>
337 |           </div>
338 | 
339 |           <div>
340 |             <h4
341 |               style={{
342 |                 fontSize: 16,
343 |                 fontWeight: 600,
344 |                 marginBottom: 8,
345 |                 textAlign: isRTL ? "right" : "left",
346 |               }}
347 |             >
348 |               {tDoc("examples.filterByPostalCode")}
349 |             </h4>
350 |             <pre
351 |               style={{
352 |                 background: "#222",
353 |                 color: "#fff",
354 |                 padding: 12,
355 |                 borderRadius: 8,
356 |                 fontSize: 14,
357 |                 overflow: "auto",
358 |                 direction: "ltr",
359 |                 textAlign: "left",
360 |               }}
361 |             >
362 |               {`fetch('/api/municipalities?postalCode=2058')
363 |   .then(response => response.json())
364 |   .then(data => console.log(data));`}
365 |             </pre>
366 |           </div>
367 | 
368 |           <div>
369 |             <h4
370 |               style={{
371 |                 fontSize: 16,
372 |                 fontWeight: 600,
373 |                 marginBottom: 8,
374 |                 textAlign: isRTL ? "right" : "left",
375 |               }}
376 |             >
377 |               {tDoc("examples.combineFilters")}
378 |             </h4>
379 |             <pre
380 |               style={{
381 |                 background: "#222",
382 |                 color: "#fff",
383 |                 padding: 12,
384 |                 borderRadius: 8,
385 |                 fontSize: 14,
386 |                 overflow: "auto",
387 |                 direction: "ltr",
388 |                 textAlign: "left",
389 |               }}
390 |             >
391 |               {`fetch('/api/municipalities?name=ariana&delegation=ville')
392 |   .then(response => response.json())
393 |   .then(data => console.log(data));`}
394 |             </pre>
395 |           </div>
396 |         </div>
397 |       </Card>
398 | 
399 |       {exampleResponse && (
400 |         <Card style={{ padding: 24, marginBottom: 24 }}>
401 |           <h3
402 |             style={{
403 |               fontSize: 20,
404 |               fontWeight: 600,
405 |               marginBottom: 16,
406 |               textAlign: isRTL ? "right" : "left",
407 |             }}
408 |           >
409 |             {tDoc("response.title")}
410 |           </h3>
411 |           <pre
412 |             style={{
413 |               background: "#f8f9fa",
414 |               padding: 16,
415 |               borderRadius: 8,
416 |               maxHeight: 300,
417 |               overflow: "auto",
418 |               fontSize: 14,
419 |               border: "1px solid #e9ecef",
420 |               direction: "ltr",
421 |               textAlign: "left",
422 |             }}
423 |           >
424 |             {exampleResponse}
425 |           </pre>
426 |         </Card>
427 |       )}
428 |     </div>
429 |   );
430 | }
431 |

--------------------------------------------------------------------------------
/components/Navbar.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | import { useState, useEffect } from "react";
  3 | import { motion } from "framer-motion";
  4 | import {
  5 |   Github,
  6 |   Home,
  7 |   BookOpen,
  8 |   Code2,
  9 |   Globe,
 10 |   ChevronDown,
 11 | } from "lucide-react";
 12 | import { useRouter, usePathname } from "next/navigation";
 13 | import { useTranslations } from "next-intl";
 14 | 
 15 | interface NavbarProps {
 16 |   className?: string;
 17 | }
 18 | 
 19 | function scrollToHash(hash: string) {
 20 |   const el = document.getElementById(hash.replace("#", ""));
 21 |   if (el) {
 22 |     el.scrollIntoView({ behavior: "smooth", block: "start" });
 23 |   } else {
 24 |     window.location.hash = hash;
 25 |   }
 26 | }
 27 | const languages = [
 28 |   { code: "en", name: "English", flag: "🇬🇧" },
 29 |   { code: "ar", name: "العربية", flag: "🇹🇳" },
 30 | ];
 31 | 
 32 | export function Navbar({ className }: NavbarProps) {
 33 |   const [isScrolled, setIsScrolled] = useState(false);
 34 |   const [isMobile, setIsMobile] = useState(false);
 35 |   const [activeSection, setActiveSection] = useState<string>("home");
 36 |   const [isLanguageDropdownOpen, setIsLanguageDropdownOpen] = useState(false);
 37 |   const [currentLanguage, setCurrentLanguage] = useState("en");
 38 |   const t = useTranslations("nav");
 39 |   const isRTL = currentLanguage === "ar";
 40 |   const router = useRouter();
 41 |   const pathname = usePathname();
 42 |   const navItems = [
 43 |     { name: t("home"), href: "#home", icon: <Home size={22} /> },
 44 |     { name: t("api"), href: "#playground", icon: <Code2 size={22} /> },
 45 |     { name: t("docs"), href: "#docs", icon: <BookOpen size={22} /> },
 46 |   ];
 47 |   const switchLanguage = (langCode: string) => {
 48 |     setCurrentLanguage(langCode);
 49 |     setIsLanguageDropdownOpen(false);
 50 | 
 51 |     const pathWithoutLocale =
 52 |       pathname.startsWith("/en") || pathname.startsWith("/ar")
 53 |         ? pathname.slice(3)
 54 |         : pathname;
 55 | 
 56 |     router.push(`/${langCode}${pathWithoutLocale}`);
 57 |   };
 58 | 
 59 |   useEffect(() => {
 60 |     const pathLang = pathname.startsWith("/ar") ? "ar" : "en";
 61 |     setCurrentLanguage(pathLang);
 62 |   }, [pathname]);
 63 | 
 64 |   useEffect(() => {
 65 |     const handleClickOutside = (event: MouseEvent) => {
 66 |       const target = event.target as Element;
 67 |       if (!target.closest("[data-language-dropdown]")) {
 68 |         setIsLanguageDropdownOpen(false);
 69 |       }
 70 |     };
 71 | 
 72 |     if (isLanguageDropdownOpen) {
 73 |       document.addEventListener("mousedown", handleClickOutside);
 74 |       return () =>
 75 |         document.removeEventListener("mousedown", handleClickOutside);
 76 |     }
 77 |   }, [isLanguageDropdownOpen]);
 78 | 
 79 |   // Responsive check
 80 |   useEffect(() => {
 81 |     const checkMobile = () => setIsMobile(window.innerWidth < 768);
 82 |     checkMobile();
 83 |     window.addEventListener("resize", checkMobile);
 84 |     return () => window.removeEventListener("resize", checkMobile);
 85 |   }, []);
 86 | 
 87 |   // Scroll state
 88 |   useEffect(() => {
 89 |     const handleScroll = () => {
 90 |       setIsScrolled(window.scrollY > 10);
 91 | 
 92 |       // Active section highlight
 93 |       let found = false;
 94 |       for (const item of navItems) {
 95 |         const id = item.href.replace("#", "");
 96 |         const el = document.getElementById(id);
 97 |         if (el) {
 98 |           const rect = el.getBoundingClientRect();
 99 |           if (rect.top <= 80 && rect.bottom > 80) {
100 |             setActiveSection(id);
101 |             found = true;
102 |             break;
103 |           }
104 |         }
105 |       }
106 |       if (!found) setActiveSection("home");
107 |     };
108 |     handleScroll();
109 |     window.addEventListener("scroll", handleScroll, { passive: true });
110 |     return () => window.removeEventListener("scroll", handleScroll);
111 |   }, []);
112 | 
113 |   return (
114 |     <motion.nav
115 |       className={className}
116 |       style={{
117 |         position: "fixed",
118 |         top: 0,
119 |         left: 0,
120 |         right: 0,
121 |         zIndex: 1000,
122 |         background: isScrolled ? "rgba(255, 255, 255, 0.97)" : "transparent",
123 |         backdropFilter: isScrolled ? "blur(10px)" : "none",
124 |         borderBottom: isScrolled ? "1px solid rgba(0, 0, 0, 0.08)" : "none",
125 |         transition: "all 0.3s cubic-bezier(.4,0,.2,1)",
126 |         boxShadow: isScrolled ? "0 2px 12px rgba(0,0,0,0.04)" : "none",
127 |         direction: isRTL ? "rtl" : "ltr",
128 |       }}
129 |       initial={{ y: -100 }}
130 |       animate={{ y: 0 }}
131 |       transition={{ duration: 0.5 }}
132 |       aria-label="Main navigation"
133 |     >
134 |       <div
135 |         style={{
136 |           maxWidth: 1200,
137 |           margin: "0 auto",
138 |           padding: "0 16px",
139 |           display: "flex",
140 |           alignItems: "center",
141 |           justifyContent: "space-between",
142 |           height: 70,
143 |           flexDirection: isRTL ? "row-reverse" : "row",
144 |         }}
145 |       >
146 |         {/* Logo */}
147 |         <motion.button
148 |           type="button"
149 |           aria-label="Go to home"
150 |           style={{
151 |             fontSize: 20,
152 |             fontWeight: 700,
153 |             color: "#0070f3",
154 |             cursor: "pointer",
155 |             userSelect: "none",
156 |             letterSpacing: "0.5px",
157 |             display: "flex",
158 |             alignItems: "center",
159 |             background: "none",
160 |             border: "none",
161 |             outline: "none",
162 |             padding: 0,
163 |             order: isRTL ? 2 : 1,
164 |           }}
165 |           whileHover={{ scale: 1.05 }}
166 |           whileTap={{ scale: 0.95 }}
167 |           onClick={() => {
168 |             scrollToHash("#home");
169 |           }}
170 |         >
171 |           <span
172 |             style={{
173 |               display: "inline-block",
174 |               background: "linear-gradient(90deg, #0070f3 60%, #00c6fb 100%)",
175 |               WebkitBackgroundClip: "text",
176 |               WebkitTextFillColor: "transparent",
177 |               fontWeight: 800,
178 |               fontSize: 24,
179 |               marginRight: isRTL ? 0 : 2,
180 |               marginLeft: isRTL ? 2 : 0,
181 |               letterSpacing: "1px",
182 |             }}
183 |           >
184 |             {t("logo")}
185 |           </span>
186 |         </motion.button>
187 | 
188 |         {/* Desktop Navigation */}
189 |         {!isMobile && (
190 |           <nav
191 |             aria-label="Primary"
192 |             style={{
193 |               display: "flex",
194 |               alignItems: "center",
195 |               gap: 24,
196 |               order: isRTL ? 1 : 2,
197 |             }}
198 |           >
199 |             <div
200 |               style={{
201 |                 display: "flex",
202 |                 gap: 32,
203 |                 flexDirection: isRTL ? "row-reverse" : "row",
204 |               }}
205 |             >
206 |               {(isRTL ? [...navItems].reverse() : navItems).map(
207 |                 (item, index) => (
208 |                   <motion.button
209 |                     key={item.name}
210 |                     type="button"
211 |                     aria-current={
212 |                       activeSection === item.href.replace("#", "")
213 |                         ? "page"
214 |                         : undefined
215 |                     }
216 |                     aria-label={item.name}
217 |                     onClick={() => scrollToHash(item.href)}
218 |                     style={{
219 |                       textDecoration: "none",
220 |                       color:
221 |                         activeSection === item.href.replace("#", "")
222 |                           ? "#0070f3"
223 |                           : "#333",
224 |                       fontWeight:
225 |                         activeSection === item.href.replace("#", "")
226 |                           ? 700
227 |                           : 500,
228 |                       fontSize: 16,
229 |                       cursor: "pointer",
230 |                       display: "flex",
231 |                       alignItems: "center",
232 |                       gap: 8,
233 |                       padding: "4px 10px",
234 |                       borderRadius: 6,
235 |                       background:
236 |                         activeSection === item.href.replace("#", "")
237 |                           ? "#f0f4ff"
238 |                           : "none",
239 |                       border: "none",
240 |                       transition:
241 |                         "background 0.15s, color 0.15s, font-weight 0.15s",
242 |                       outline: "none",
243 |                       flexDirection: isRTL ? "row-reverse" : "row",
244 |                     }}
245 |                     whileHover={{
246 |                       y: -2,
247 |                       backgroundColor: "#f0f4ff",
248 |                       color: "#0070f3",
249 |                     }}
250 |                     whileTap={{ scale: 0.95 }}
251 |                     initial={{ opacity: 0, y: -10 }}
252 |                     animate={{ opacity: 1, y: 0 }}
253 |                     transition={{ delay: index * 0.1 }}
254 |                     tabIndex={0}
255 |                   >
256 |                     {item.icon}
257 |                     {item.name}
258 |                   </motion.button>
259 |                 ),
260 |               )}
261 |             </div>
262 |             <div
263 |               style={{
264 |                 display: "flex",
265 |                 alignItems: "center",
266 |                 gap: 12,
267 |                 flexDirection: "row", // Always maintain the same order
268 |               }}
269 |             >
270 |               {/* GitHub Button */}
271 |               <motion.button
272 |                 onClick={() =>
273 |                   window.open(
274 |                     "https://github.com/youssef-of-web/tn-municipality-api",
275 |                     "_blank",
276 |                     "noopener noreferrer",
277 |                   )
278 |                 }
279 |                 style={{
280 |                   background: "none",
281 |                   border: "2px solid #0070f3",
282 |                   borderRadius: 8,
283 |                   padding: "8px 16px",
284 |                   cursor: "pointer",
285 |                   display: "flex",
286 |                   alignItems: "center",
287 |                   gap: 8,
288 |                   color: "#0070f3",
289 |                   fontWeight: 500,
290 |                   transition: "all 0.2s ease",
291 |                   outline: "none",
292 |                 }}
293 |                 whileHover={{
294 |                   scale: 1.05,
295 |                   backgroundColor: "#0070f3",
296 |                   color: "white",
297 |                   boxShadow: "0 4px 12px rgba(0, 112, 243, 0.3)",
298 |                 }}
299 |                 whileTap={{ scale: 0.95 }}
300 |                 tabIndex={0}
301 |                 aria-label="Open GitHub repository"
302 |               >
303 |                 <Github size={18} />
304 |                 {t("github")}
305 |               </motion.button>
306 |               {/* Language Dropdown */}
307 |               <div style={{ position: "relative" }} data-language-dropdown>
308 |                 <motion.button
309 |                   onClick={() =>
310 |                     setIsLanguageDropdownOpen(!isLanguageDropdownOpen)
311 |                   }
312 |                   style={{
313 |                     background: "none",
314 |                     border: "1px solid #e0e0e0",
315 |                     borderRadius: 8,
316 |                     padding: "8px 12px",
317 |                     cursor: "pointer",
318 |                     display: "flex",
319 |                     alignItems: "center",
320 |                     gap: 8,
321 |                     color: "#333",
322 |                     fontWeight: 500,
323 |                     transition: "all 0.2s ease",
324 |                     outline: "none",
325 |                     fontSize: 14,
326 |                     flexDirection: isRTL ? "row-reverse" : "row",
327 |                   }}
328 |                   whileHover={{
329 |                     backgroundColor: "#f5f5f5",
330 |                     borderColor: "#0070f3",
331 |                   }}
332 |                   whileTap={{ scale: 0.95 }}
333 |                   tabIndex={0}
334 |                   aria-label="Select language"
335 |                 >
336 |                   {
337 |                     languages.find((lang) => lang.code === currentLanguage)
338 |                       ?.flag
339 |                   }
340 |                   <ChevronDown size={14} />
341 |                 </motion.button>
342 | 
343 |                 {/* Dropdown Menu */}
344 |                 {isLanguageDropdownOpen && (
345 |                   <motion.div
346 |                     initial={{ opacity: 0, y: -10 }}
347 |                     animate={{ opacity: 1, y: 0 }}
348 |                     exit={{ opacity: 0, y: -10 }}
349 |                     style={{
350 |                       position: "absolute",
351 |                       top: "100%",
352 |                       [isRTL ? "left" : "right"]: 0,
353 |                       marginTop: 8,
354 |                       background: "white",
355 |                       border: "1px solid #e0e0e0",
356 |                       borderRadius: 8,
357 |                       boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
358 |                       zIndex: 1000,
359 |                       minWidth: 140,
360 |                       direction: isRTL ? "rtl" : "ltr",
361 |                     }}
362 |                   >
363 |                     {languages.map((lang) => (
364 |                       <button
365 |                         key={lang.code}
366 |                         onClick={() => switchLanguage(lang.code)}
367 |                         style={{
368 |                           width: "100%",
369 |                           padding: "12px 16px",
370 |                           border: "none",
371 |                           background:
372 |                             currentLanguage === lang.code
373 |                               ? "#f0f4ff"
374 |                               : "transparent",
375 |                           color:
376 |                             currentLanguage === lang.code ? "#0070f3" : "#333",
377 |                           cursor: "pointer",
378 |                           display: "flex",
379 |                           alignItems: "center",
380 |                           gap: 8,
381 |                           fontSize: 14,
382 |                           fontWeight: currentLanguage === lang.code ? 600 : 400,
383 |                           transition: "all 0.2s ease",
384 |                           borderRadius: currentLanguage === lang.code ? 6 : 0,
385 |                           flexDirection: isRTL ? "row-reverse" : "row",
386 |                           textAlign: isRTL ? "right" : "left",
387 |                         }}
388 |                         onMouseEnter={(e) => {
389 |                           if (currentLanguage !== lang.code) {
390 |                             e.currentTarget.style.backgroundColor = "#f5f5f5";
391 |                           }
392 |                         }}
393 |                         onMouseLeave={(e) => {
394 |                           if (currentLanguage !== lang.code) {
395 |                             e.currentTarget.style.backgroundColor =
396 |                               "transparent";
397 |                           }
398 |                         }}
399 |                       >
400 |                         <span>{lang.flag}</span>
401 |                         <span>{lang.name}</span>
402 |                       </button>
403 |                     ))}
404 |                   </motion.div>
405 |                 )}
406 |               </div>
407 |             </div>
408 |           </nav>
409 |         )}
410 | 
411 |         {/* Mobile Navigation: Icons Only */}
412 |         {isMobile && (
413 |           <nav
414 |             aria-label="Primary mobile"
415 |             style={{
416 |               display: "flex",
417 |               alignItems: "center",
418 |               gap: 18,
419 |               order: isRTL ? 1 : 2,
420 |               flexDirection: "row",
421 |             }}
422 |           >
423 |             {navItems.map((item) => (
424 |               <button
425 |                 key={item.name}
426 |                 aria-label={item.name}
427 |                 onClick={() => scrollToHash(item.href)}
428 |                 style={{
429 |                   background: "none",
430 |                   border: "none",
431 |                   padding: 6,
432 |                   borderRadius: 8,
433 |                   color:
434 |                     activeSection === item.href.replace("#", "")
435 |                       ? "#0070f3"
436 |                       : "#333",
437 |                   display: "flex",
438 |                   alignItems: "center",
439 |                   justifyContent: "center",
440 |                   fontSize: 0,
441 |                   transition: "background 0.15s, color 0.15s",
442 |                   outline: "none",
443 |                   boxShadow:
444 |                     activeSection === item.href.replace("#", "")
445 |                       ? "0 2px 8px rgba(0,112,243,0.08)"
446 |                       : "none",
447 |                 }}
448 |                 tabIndex={0}
449 |               >
450 |                 {item.icon}
451 |               </button>
452 |             ))}
453 | 
454 |             <button
455 |               aria-label="Open GitHub repository"
456 |               onClick={() =>
457 |                 window.open(
458 |                   "https://github.com/youssef-of-web/tn-municipality-api",
459 |                   "_blank",
460 |                   "noopener noreferrer",
461 |                 )
462 |               }
463 |               style={{
464 |                 background: "none",
465 |                 border: "none",
466 |                 padding: 6,
467 |                 borderRadius: 8,
468 |                 color: "#0070f3",
469 |                 display: "flex",
470 |                 alignItems: "center",
471 |                 justifyContent: "center",
472 |                 fontSize: 0,
473 |                 transition: "background 0.15s, color 0.15s",
474 |                 outline: "none",
475 |               }}
476 |               tabIndex={0}
477 |             >
478 |               <Github size={22} />
479 |             </button>
480 | 
481 |             <div style={{ position: "relative" }} data-language-dropdown>
482 |               <button
483 |                 onClick={() =>
484 |                   setIsLanguageDropdownOpen(!isLanguageDropdownOpen)
485 |                 }
486 |                 style={{
487 |                   background: "none",
488 |                   border: "none",
489 |                   padding: 6,
490 |                   borderRadius: 8,
491 |                   color: "#333",
492 |                   display: "flex",
493 |                   alignItems: "center",
494 |                   justifyContent: "center",
495 |                   fontSize: 0,
496 |                   transition: "background 0.15s, color 0.15s",
497 |                   outline: "none",
498 |                 }}
499 |                 tabIndex={0}
500 |                 aria-label="Select language"
501 |               >
502 |                 <Globe size={22} />
503 |               </button>
504 | 
505 |               {isLanguageDropdownOpen && (
506 |                 <motion.div
507 |                   initial={{ opacity: 0, y: -10 }}
508 |                   animate={{ opacity: 1, y: 0 }}
509 |                   exit={{ opacity: 0, y: -10 }}
510 |                   style={{
511 |                     position: "absolute",
512 |                     top: "100%",
513 |                     [isRTL ? "left" : "right"]: 0,
514 |                     marginTop: 8,
515 |                     background: "white",
516 |                     border: "1px solid #e0e0e0",
517 |                     borderRadius: 8,
518 |                     boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
519 |                     zIndex: 1000,
520 |                     minWidth: 120,
521 |                     direction: isRTL ? "rtl" : "ltr",
522 |                   }}
523 |                 >
524 |                   {languages.map((lang) => (
525 |                     <button
526 |                       key={lang.code}
527 |                       onClick={() => switchLanguage(lang.code)}
528 |                       style={{
529 |                         width: "100%",
530 |                         padding: "10px 12px",
531 |                         border: "none",
532 |                         background:
533 |                           currentLanguage === lang.code
534 |                             ? "#f0f4ff"
535 |                             : "transparent",
536 |                         color:
537 |                           currentLanguage === lang.code ? "#0070f3" : "#333",
538 |                         cursor: "pointer",
539 |                         display: "flex",
540 |                         alignItems: "center",
541 |                         gap: 6,
542 |                         fontSize: 13,
543 |                         fontWeight: currentLanguage === lang.code ? 600 : 400,
544 |                         transition: "all 0.2s ease",
545 |                         borderRadius: currentLanguage === lang.code ? 6 : 0,
546 |                         flexDirection: isRTL ? "row-reverse" : "row",
547 |                         textAlign: isRTL ? "right" : "left",
548 |                       }}
549 |                       onMouseEnter={(e) => {
550 |                         if (currentLanguage !== lang.code) {
551 |                           e.currentTarget.style.backgroundColor = "#f5f5f5";
552 |                         }
553 |                       }}
554 |                       onMouseLeave={(e) => {
555 |                         if (currentLanguage !== lang.code) {
556 |                           e.currentTarget.style.backgroundColor = "transparent";
557 |                         }
558 |                       }}
559 |                     >
560 |                       <span>{lang.flag}</span>
561 |                       <span>{lang.name}</span>
562 |                     </button>
563 |                   ))}
564 |                 </motion.div>
565 |               )}
566 |             </div>
567 |           </nav>
568 |         )}
569 |       </div>
570 |     </motion.nav>
571 |   );
572 | }
573 |

--------------------------------------------------------------------------------