diff --git a/src/app/contacts/[country]/page.tsx b/src/app/contacts/[country]/page.tsx
new file mode 100644
index 0000000..b7eb476
--- /dev/null
+++ b/src/app/contacts/[country]/page.tsx
@@ -0,0 +1,78 @@
+import Footer from "@/components/Footer";
+import Navbar from "@/components/Navbar";
+import Title from "@/components/Title";
+import contacts from "../../../contacts.json";
+
+interface Contact {
+ key: string;
+ label: string;
+ entries: {
+ name: string;
+ number: string;
+ email: string;
+ }[];
+}
+
+type Language = "en" | "ar";
+
+interface PageProps {
+ params: {
+ country: string;
+ };
+ searchParams: {
+ page: string;
+ language: Language;
+ };
+}
+
+export function generateStaticParams() {
+ // down the line, this is required to be loaded from a CMS
+ // for now, we'll just use a JSON file
+
+ // do not forget the actually render this as multiple languages
+ return contacts.map(({ key }) => ({
+ country: key.toLowerCase().replaceAll(" ", ""),
+ }));
+}
+
+export default function Page({
+ params: { country },
+ searchParams: { page = "/contacts", language = "en" },
+}: PageProps) {
+ // this approach will not be viable later on when we have multiple languages
+ // or use the data from the server
+ // replace this with a fetch to the CMS
+ const contact = contacts.find(({ key }) => key === country) as Contact;
+
+ return (
+
+
+
+
+