diff --git a/public/map-uttarakhand.svg b/public/map-uttarakhand.svg
new file mode 100644
index 0000000..f5608c2
--- /dev/null
+++ b/public/map-uttarakhand.svg
@@ -0,0 +1,28060 @@
+
+
\ No newline at end of file
diff --git a/src/app/globals.css b/src/app/globals.css
index 6b9f117..aa34c79 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -9,7 +9,7 @@
--grey: #A0A5AC;
--cloud-grey: #E1E4E8;
--slate-black: #667085;
- --mist-grey: #F2F2F2
+ --mist-grey: #F2F2F2;
}
@@ -54,7 +54,7 @@ button, [role="button"] {
/* reset anchor style*/
p{
- font-family: --myCustomFont,"system-ui", "-apple-system", "BlinkMacSystemFont",sans-serif;
+ font-family: --myCustomFont, "-apple-system", "BlinkMacSystemFont",sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 300;
diff --git a/src/app/map/page.module.css b/src/app/map/page.module.css
index e69de29..3d38a5c 100644
--- a/src/app/map/page.module.css
+++ b/src/app/map/page.module.css
@@ -0,0 +1,43 @@
+.map-container{
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+}
+
+.map-image-container{
+ width: 1440px;
+ height: auto;
+ max-width: 100vw;
+ overflow: scroll;
+}
+.map-container > div > img{
+ width: 100%;
+ height: auto;
+}
+
+.map-button-container{
+ display: flex;
+ flex-direction: row;
+ gap: 4rem;
+}
+
+.map-button-container > button {
+ padding: 10px 15px 10px 15px;
+ color: #fff;
+ background-color: var(--black);
+}
+
+.map-button-container > button:hover {
+ color: var(--black);
+ background-color: var(--mist-grey);
+}
+
+
+.image {
+
+ width: 100%;
+ height:20rem;
+ background-image: radial-gradient(88% 100% at top, hsla(0, 0%, 100%, .5), hsla(0, 0%, 100%, 0));
+}
\ No newline at end of file
diff --git a/src/app/map/page.tsx b/src/app/map/page.tsx
index e69de29..490d223 100644
--- a/src/app/map/page.tsx
+++ b/src/app/map/page.tsx
@@ -0,0 +1,89 @@
+// 'use client'
+
+import Image from "next/image";
+import MapImage from "/public/map-uttarakhand.svg";
+import styles from "@/app/map/page.module.css";
+// import {useRef} from "react";
+
+
+
+export default function Map() {
+
+ // const zoomLevelRef = useRef(1);
+ // const marginLeftLevelRef = useRef(0);
+ // const marginTopLevelRef = useRef(0);
+ // const mapImageRef = useRef(null);
+ // const mapBoxHeightRef = useRef(null);
+ // const increaseMapBoxHeightRef = useRef(6930);
+ //
+ // const handleZoomIn = () => {
+ // if (mapImageRef.current && mapBoxHeightRef.current) {
+ // mapBoxHeightRef.current.style.aspectRatio = `10800/${increaseMapBoxHeightRef.current += 3000}`;
+ // }
+ // zoomLevelRef.current += 1;
+ // marginLeftLevelRef.current += 46.2;
+ // marginTopLevelRef.current += 29;
+ // updateMapStyle();
+ // };
+ //
+ // const handleZoomOut = () => {
+ // if (increaseMapBoxHeightRef.current > 6930) {
+ // if (mapBoxHeightRef.current) {
+ // mapBoxHeightRef.current.style.aspectRatio = `10800/${increaseMapBoxHeightRef.current -= 3000}`;
+ // }
+ // }
+ // if (zoomLevelRef.current > 1) {
+ // zoomLevelRef.current -= 1;
+ // marginLeftLevelRef.current -= 46.2;
+ // marginTopLevelRef.current -= 29;
+ // updateMapStyle();
+ // }
+ // };
+ //
+ // const updateMapStyle = () => {
+ // if (mapImageRef.current) {
+ // mapImageRef.current.style.transform = `scale(${zoomLevelRef.current})`;
+ // mapImageRef.current.style.marginTop = `${marginTopLevelRef.current}vw`;
+ // mapImageRef.current.style.marginLeft = `${marginLeftLevelRef.current}vw`;
+ // }
+ // };
+ return (
+ <>
+ {/**/}
+ {/* x*/}
+ {/*
*/}
+
+ {/**/}
+ {/*
+
*/}
+ {/*
-
*/}
+ {/*
+
+
+
+
+
+
+
+
+
+
+
+
ekjbibeif
+
+
+
+ {/**/}
+ {/* x*/}
+ {/*
*/}
+
+ {/**/}
+ {/*
+
*/}
+ {/*
-
*/}
+ {/*