Develop (#3)

* feat/ui: add sign up page * update/ui: link navbar to sign up page * feat/ui: add sign up route * feat/ui: update sign up design * feat/ui: add sign in page * fix: change svg style to jsx * fix/ui: add navbar and footer to search page * fix/logic: update navbar sign up / sign in links * fix/ui: add navbar and footer to home page * fix/ui: update common style * update/ui: add icon interface * feat/ui: add property page * update/logic: update search items interface -add IProperty interface * feat/style: add separator global style * feat/dep: add api dependencies - add axios - add react-query * feat/api: add query client provider to app
mome13 · May 19, 2023 · 548d2a7 · 548d2a7
1 parent e5847da
commit 548d2a7
Show file tree

Hide file tree

Showing 19 changed files with 1,120 additions and 199 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,8 +10,10 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.0.17",
+    "axios": "^1.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-query": "^3.39.3",
     "react-router-dom": "^6.11.0"
   },
   "devDependencies": {

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,17 +1,23 @@
-import Navbar from "@/components/navbar";
-import Footer from "@/components/footer";
 import Home from "@/scenes/home";
 import AboutUs from "@/scenes/aboutUs";
 import Search from "@/scenes/search/search";
+import SignUp from "./scenes/signUp";
 import { Routes, Route } from "react-router-dom";
+import SignIn from "./scenes/signIn";
+import Property from "./scenes/property";
+import { QueryClientProvider, QueryClient } from "react-query";
 
+const queryClient = new QueryClient();
 type HTMLElementEvent<T extends HTMLElement> = Event & {
   target: T;
 };
 function App() {
   // Close the dropdown if the user clicks outside of it
   window.onclick = function (event: any) {
-    if (!event.target?.matches(".dropbtn") && !event.target?.closest(".dropdown-content")) {
+    if (
+      !event.target?.matches(".dropbtn") &&
+      !event.target?.closest(".dropdown-content")
+    ) {
       const dropdowns = document.getElementsByClassName("dropdown-content");
       for (let i = 0; i < dropdowns.length; i++) {
         let openDropdown = dropdowns[i];
@@ -23,13 +29,16 @@ function App() {
   };
   return (
     <div className="app">
-      <Navbar />
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="about" element={<AboutUs />} />
-        <Route path="search" element={<Search />} />
-      </Routes>
-      <Footer />
+      <QueryClientProvider client={queryClient}>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="about" element={<AboutUs />} />
+          <Route path="search" element={<Search />} />
+          <Route path="signup" element={<SignUp />} />
+          <Route path="signin" element={<SignIn />} />
+          <Route path="property" element={<Property />} />
+        </Routes>
+      </QueryClientProvider>
     </div>
   );
 }

diff --git a/src/assets/commonIcons.tsx b/src/assets/commonIcons.tsx
@@ -0,0 +1,161 @@
+interface IconInterface {
+  width?: number;
+}
+
+const MoneyIcon = ({ width = 16 }: IconInterface) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={2}
+      width={width}
+      className="aspect-square"
+      role="img"
+      stroke="currentColor"
+      style={{ pointerEvents: "none" }}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+      />
+    </svg>
+  );
+};
+
+const PriceTagIcon = ({ width = 16 }: IconInterface) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={3}
+      width={width}
+      role="img"
+      className="aspect-square"
+      stroke="currentColor"
+      style={{ pointerEvents: "none" }}
+    >
+      <svg
+        fill="currentColor"
+        width={width}
+        version="1.1"
+        id="Layer_1"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 474.9 474.9"
+      >
+        <g transform="translate(0 -540.36)">
+          <g>
+            <g>
+              <path
+                d="M269.354,704.56c-13.9-6.6-30.6-2.5-39.9,9.7c-9.6,12.7-8.6,29.9,2.5,41.1l0.4,0.4c5.3,6,5.6,15.3,0.9,22.6
+				c-5.1,6.5-14,8.4-21.7,4.5c-0.1,0-0.1-0.1-0.2-0.1c-7.3-3.5-10.9-11.6-8.6-19.3c1.2-4-1-8.2-5-9.4s-8.2,1-9.4,5
+				c-2.4,8-1.5,16.2,2,23.2l-15.1,13.4c-3.1,2.7-3.4,7.5-0.6,10.6c2.7,3.1,7.5,3.4,10.6,0.6l15-13.3c1.4,1,3,1.9,4.6,2.7
+				c14.3,7.2,30.9,3.5,40.4-9.1l0,0c0.1-0.1,0.2-0.3,0.3-0.4c8.7-13.1,7.8-30-2-41.1l-0.5-0.6c-0.1-0.1-0.2-0.2-0.3-0.3
+				c-5.9-5.9-6.4-14.8-1.3-21.6c5-6.6,14-8.7,21.5-5.2c7.4,3.5,11.4,12.3,9.1,19.9c-1.2,4,1,8.2,5,9.4s8.2-1,9.4-5
+				c2.4-7.8,1.4-16.1-2.1-23.1l15.2-13.4c3.1-2.7,3.4-7.5,0.6-10.6c-2.7-3.1-7.5-3.4-10.6-0.6l-14.9,13.2
+				C273.054,706.56,271.254,705.46,269.354,704.56z"
+              />
+              <path
+                d="M459.954,540.36h-186.4c-1.8,0-3.5,0.6-4.9,1.8l-258.6,222.6c-1.6,1.3-2.5,3.3-2.6,5.4s0.7,4.1,2.2,5.6l186.4,183.1
+				c1.5,1.4,3.4,2.1,5.3,2.1v0c1.7,0,3.5-0.6,4.9-1.7l258.6-221.9c1.6-1.4,2.6-3.5,2.6-5.7v-183.8
+				C467.454,543.76,464.054,540.36,459.954,540.36z M452.554,728.16l-250.8,215.1l-175.7-172.5v0l250.4-215.5h176.1V728.16z"
+              />
+              <path
+                d="M455.054,780.26l-253.3,217.3l-181.5-181.3c-2.9-2.9-7.7-2.9-10.6,0c-2.9,2.9-2.9,7.7,0,10.6l186.4,186.2
+				c1.5,1.5,3.4,2.2,5.3,2.2c1.7,0,3.5-0.6,4.9-1.7l258.6-221.9c3.1-2.7,3.5-7.5,0.8-10.6S458.154,777.56,455.054,780.26z"
+              />
+              <path
+                d="M382.254,669.26c24.3,0,44-19.7,44-44s-19.7-44-44-44c-23.8,0-43.2,19.8-43.2,44
+				C339.054,649.56,358.454,669.26,382.254,669.26z M382.254,596.36c16,0,29,13,29,29s-13,29-29,29c-15.5,0-28.2-13-28.2-29
+				S366.654,596.36,382.254,596.36z"
+              />
+            </g>
+          </g>
+        </g>
+      </svg>
+    </svg>
+  );
+};
+
+const ParkingIcon = ({ width = 16 }: IconInterface) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 50 50"
+      width={width}
+      role="img"
+      className="aspect-square"
+      fill="currentColor"
+      stroke="currentColor"
+      style={{ pointerEvents: "none" }}
+    >
+      <path d="M 25 8 C 21.453125 8 19.128906 8.238281 17.65625 8.5 C 16.269531 8.746094 15.667969 9.03125 15.59375 9.0625 C 15.589844 9.066406 15.46875 9.09375 15.46875 9.09375 C 13.988281 9.59375 11.734375 10.28125 10.6875 12.3125 C 10.433594 12.804688 10.054688 13.804688 9.5 15.21875 C 9.074219 16.304688 8.574219 17.675781 8.0625 19 L 5.09375 19 C 3.609375 19 2.507813 19.496094 1.84375 20.25 C 1.179688 21.003906 1 21.898438 1 22.59375 C 1 23.371094 1.40625 24.148438 2.03125 24.53125 C 2.65625 24.914063 3.355469 25 4.09375 25 L 5.75 25 C 5.59375 25.417969 5.0625 26.8125 5.0625 26.8125 L 5 27 L 5 39 C 5 40.644531 6.355469 42 8 42 L 12 42 C 13.644531 42 15 40.644531 15 39 L 15 38 L 35 38 L 35 39 C 35 40.644531 36.355469 42 38 42 L 42 42 C 43.644531 42 45 40.644531 45 39 L 45 27 L 44.9375 26.8125 C 44.9375 26.8125 44.414063 25.421875 44.25 25 L 45.90625 25 C 46.644531 25 47.34375 24.914063 47.96875 24.53125 C 48.59375 24.148438 49 23.371094 49 22.59375 C 49 21.898438 48.820313 21.003906 48.15625 20.25 C 47.492188 19.496094 46.390625 19 44.90625 19 L 41.9375 19 C 41.875 18.851563 41.8125 18.707031 41.78125 18.625 C 40.699219 15.828125 39.65625 13.164063 39.28125 12.3125 C 38.324219 10.136719 35.863281 9.46875 34.53125 9.09375 C 34.488281 9.082031 34.414063 9.042969 34.375 9.03125 L 34.375 9.0625 C 34.28125 9.023438 33.710938 8.746094 32.34375 8.5 C 30.871094 8.238281 28.546875 8 25 8 Z M 25 10 C 28.453125 10 30.671875 10.261719 32 10.5 C 33.328125 10.738281 33.65625 10.90625 33.65625 10.90625 L 33.75 10.9375 L 33.8125 10.96875 C 35.03125 11.316406 36.996094 12.117188 37.4375 13.125 C 37.726563 13.78125 38.863281 16.707031 39.90625 19.375 C 40.15625 20.011719 40.574219 21.050781 40.4375 21.6875 C 40.367188 22.007813 40.246094 22.238281 39.78125 22.5 C 39.316406 22.761719 38.441406 23 37 23 L 13 23 C 11.558594 23 10.683594 22.761719 10.21875 22.5 C 9.753906 22.238281 9.632813 22.007813 9.5625 21.6875 C 9.425781 21.050781 9.84375 20.011719 10.09375 19.375 L 10.03125 19.34375 C 10.488281 18.152344 10.957031 16.917969 11.34375 15.9375 C 11.894531 14.535156 12.386719 13.410156 12.46875 13.25 C 13.023438 12.171875 14.753906 11.4375 16.21875 10.9375 L 16.28125 10.9375 L 16.34375 10.90625 C 16.34375 10.90625 16.671875 10.738281 18 10.5 C 19.328125 10.261719 21.546875 10 25 10 Z M 5.09375 21 L 7.25 21 C 6.871094 21.996094 6.804688 22.191406 6.5 23 L 4.09375 23 C 3.535156 23 3.1875 22.902344 3.09375 22.84375 C 3 22.785156 3 22.875 3 22.59375 C 3 22.230469 3.101563 21.835938 3.34375 21.5625 C 3.585938 21.289063 4.007813 21 5.09375 21 Z M 42.6875 21 L 44.90625 21 C 45.992188 21 46.414063 21.289063 46.65625 21.5625 C 46.898438 21.835938 47 22.230469 47 22.59375 C 47 22.875 47 22.785156 46.90625 22.84375 C 46.8125 22.902344 46.464844 23 45.90625 23 L 43.46875 23 C 43.148438 22.179688 43.078125 22.011719 42.6875 21 Z M 8.4375 23.59375 C 8.667969 23.835938 8.933594 24.070313 9.25 24.25 C 10.152344 24.757813 11.347656 25 13 25 L 37 25 C 38.652344 25 39.847656 24.757813 40.75 24.25 C 41.066406 24.070313 41.332031 23.835938 41.5625 23.59375 C 42.148438 25.132813 42.964844 27.289063 43 27.375 L 43 35.15625 C 43 35.625 42.609375 36 42.09375 36 L 7.90625 36 C 7.390625 36 7 35.625 7 35.15625 L 7 27.375 C 7.03125 27.289063 7.867188 25.117188 8.4375 23.59375 Z M 11 26 C 9.355469 26 8 27.355469 8 29 C 8 29.886719 8.367188 30.675781 8.875 31.21875 C 9.382813 31.761719 9.996094 32.128906 10.59375 32.46875 C 11.441406 32.949219 12.019531 33.316406 12.6875 33.59375 C 13.355469 33.871094 14.074219 34 15 34 C 17.195313 34 19 32.199219 19 30 C 19 27.800781 17.195313 26 15 26 Z M 35 26 C 32.804688 26 31 27.800781 31 30 C 31 32.199219 32.804688 34 35 34 C 35.925781 34 36.644531 33.871094 37.3125 33.59375 C 37.980469 33.316406 38.558594 32.949219 39.40625 32.46875 C 40.003906 32.128906 40.617188 31.761719 41.125 31.21875 C 41.632813 30.675781 42 29.886719 42 29 C 42 27.355469 40.644531 26 39 26 Z M 11 28 L 15 28 C 16.117188 28 17 28.882813 17 30 C 17 31.117188 16.117188 32 15 32 C 14.25 32 13.878906 31.933594 13.4375 31.75 C 12.996094 31.566406 12.445313 31.21875 11.5625 30.71875 C 11 30.402344 10.585938 30.101563 10.34375 29.84375 C 10.101563 29.585938 10 29.417969 10 29 C 10 28.4375 10.4375 28 11 28 Z M 35 28 L 39 28 C 39.5625 28 40 28.4375 40 29 C 40 29.417969 39.898438 29.585938 39.65625 29.84375 C 39.414063 30.101563 39 30.402344 38.4375 30.71875 C 37.554688 31.21875 37.003906 31.566406 36.5625 31.75 C 36.121094 31.933594 35.75 32 35 32 C 33.882813 32 33 31.117188 33 30 C 33 28.882813 33.882813 28 35 28 Z M 7 37.84375 C 7.289063 37.9375 7.589844 38 7.90625 38 L 13 38 L 13 39 C 13 39.5625 12.5625 40 12 40 L 8 40 C 7.4375 40 7 39.5625 7 39 Z M 43 37.84375 L 43 39 C 43 39.5625 42.5625 40 42 40 L 38 40 C 37.4375 40 37 39.5625 37 39 L 37 38 L 42.09375 38 C 42.410156 38 42.710938 37.9375 43 37.84375 Z" />
+    </svg>
+  );
+};
+
+const AreaIcon = ({ width = 16 }: IconInterface) => {
+  return (
+    <svg
+      width={width}
+      role="img"
+      className="aspect-square"
+      stroke="currentColor"
+      fill="currentColor"
+      style={{ pointerEvents: "none" }}
+      id="_x32_"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512"
+    >
+      <g>
+        <path
+          className="st0"
+          stroke="currentColor"
+          d="M150.932,218.624c10.84,3.192,23.58,4.988,37.258,4.996c18.245-0.023,34.79-3.17,47.434-8.668
+		c6.318-2.771,11.72-6.126,15.866-10.39c4.108-4.204,7.071-9.718,7.064-15.939c0.007-6.222-2.956-11.742-7.064-15.94
+		c-6.237-6.362-15.216-10.825-26.048-14.062c-10.833-3.192-23.572-4.995-37.251-4.995c-18.244,0.014-34.79,3.162-47.441,8.668
+		c-6.318,2.771-11.72,6.125-15.865,10.389c-4.108,4.198-7.072,9.718-7.065,15.94c-0.007,6.221,2.956,11.734,7.065,15.939
+		C131.12,210.917,140.106,215.387,150.932,218.624z M135.754,183.213c3.303-3.495,10.249-7.404,19.464-10.079
+		c9.207-2.72,20.64-4.382,32.972-4.374c16.434-0.023,31.288,2.97,41.374,7.404c5.04,2.187,8.846,4.744,11.048,7.05
+		c2.246,2.357,2.8,4.05,2.808,5.41c-0.008,1.352-0.562,3.052-2.808,5.409c-3.296,3.488-10.242,7.404-19.457,10.079
+		c-9.207,2.72-20.632,4.375-32.965,4.375c-16.441,0.014-31.294-2.971-41.381-7.404c-5.04-2.188-8.846-4.744-11.054-7.05
+		c-2.246-2.357-2.794-4.057-2.801-5.409C132.96,187.263,133.508,185.57,135.754,183.213z"
+        />
+        <path
+          className="st0"
+          stroke="currentColor"
+          d="M288.2,109.155c0.044,0.015,0.096,0.029,0.14,0.044l0.584,0.17L288.2,109.155z"
+        />
+        <path
+          className="st0"
+          stroke="currentColor"
+          d="M88.172,402.845c-0.059-0.014-0.119-0.037-0.178-0.059l-0.732-0.214L88.172,402.845z"
+        />
+        <path
+          className="st0"
+          stroke="currentColor"
+          d="M376.372,243.659v-55.037c0.008-8.114-1.929-15.888-5.224-22.922c-3.304-7.05-7.929-13.397-13.42-19.043
+		c-16.412-16.766-40.488-28.812-69.388-37.458l-0.155-0.044c-29.041-8.564-63.262-13.397-99.996-13.405
+		c-48.993,0.044-93.448,8.528-127.262,23.24l-0.015,0.008c-16.885,7.404-31.316,16.405-42.276,27.666
+		C13.154,152.303,8.528,158.65,5.225,165.7C1.929,172.735-0.008,180.509,0,188.623v134.756c-0.008,8.113,1.929,15.88,5.225,22.915
+		c3.303,7.05,7.929,13.397,13.412,19.043c16.413,16.766,40.472,28.812,69.358,37.45l0.192,0.059
+		c29.049,8.565,63.262,13.39,100.003,13.405H512v-172.59H376.372z M37.658,165.101c11.38-11.838,31.82-22.856,58.03-30.548
+		c26.204-7.737,58.119-12.326,92.502-12.319c45.838-0.022,87.308,8.18,116.659,21.031c14.676,6.399,26.27,13.966,33.866,21.836
+		c7.634,7.929,11.166,15.739,11.174,23.521c-0.008,7.773-3.54,15.592-11.174,23.521c-11.38,11.83-31.819,22.848-58.03,30.541
+		c-26.204,7.744-58.112,12.326-92.496,12.326c-45.845,0.015-87.314-8.187-116.666-21.031c-14.676-6.399-26.27-13.966-33.866-21.836
+		c-7.634-7.929-11.166-15.748-11.174-23.521C26.492,180.841,30.024,173.03,37.658,165.101z M349.888,222.341v32.669h-58.23
+		c6.746-2.202,13.256-4.552,19.249-7.168c15.954-6.983,29.145-15.348,38.684-25.176L349.888,222.341z M485.516,389.766h-45.402
+		v-66.854h-15.134v66.854h-33.416v-36.209h-15.134v36.209h-33.423v-66.854h-15.134v66.854h-33.423v-36.209h-15.134v36.209h-33.415
+		v-66.854h-15.134v66.854h-33.415v-36.209h-15.134v36.076c-11.491-0.177-22.657-0.857-33.423-2.01v-64.711h-15.134v62.76
+		c-23.772-3.621-45.054-9.459-62.138-16.937c-14.676-6.399-26.27-13.966-33.866-21.836c-7.634-7.93-11.166-15.748-11.174-23.521
+		V222.341l0.296,0.325c14.314,14.706,36.8,26.277,64.621,34.532c27.83,8.217,61.053,12.939,96.788,12.946h297.326V389.766z"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export default IconInterface;
+export { MoneyIcon, PriceTagIcon, ParkingIcon, AreaIcon };
diff --git a/src/assets/downArrow.tsx b/src/assets/downArrow.tsx
@@ -1,8 +1,6 @@
-type Props = {
-  width?: number;
-};
+import IconInterface from "./commonIcons";
 
-const DownArrow = ({ width = 16 }: Props) => {
+const DownArrow = ({ width = 16 }: IconInterface) => {
   return (
     <svg
       viewBox="0 0 32 32"

diff --git a/src/assets/googleIcon.tsx b/src/assets/googleIcon.tsx
@@ -0,0 +1,36 @@
+import IconInterface from "./commonIcons";
+
+
+const GoogleIcon = ({ width = 16 }: IconInterface) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 48 48"
+      aria-hidden="true"
+      focusable="false"
+      role="img"
+      width={width}
+      fill="#808080"
+      style={{ pointerEvents: "none", aspectRatio: "1/1" }}
+    >
+      <path
+        fill="#FFC107"
+        d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z"
+      />
+      <path
+        fill="#FF3D00"
+        d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z"
+      />
+      <path
+        fill="#4CAF50"
+        d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z"
+      />
+      <path
+        fill="#1976D2"
+        d="M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z"
+      />
+    </svg>
+  );
+};
+
+export default GoogleIcon;
diff --git a/src/assets/happyFamily-1.png b/src/assets/happyFamily-1.png
diff --git a/src/assets/happyFamily-2.png b/src/assets/happyFamily-2.png
diff --git a/src/assets/happyFamily.png b/src/assets/happyFamily.png
diff --git a/src/assets/house.tsx b/src/assets/house.tsx
@@ -1,8 +1,6 @@
-type Props = {
-  width?: number;
-};
+import IconInterface from "./commonIcons";
 
-const HouseIcon = ({ width = 16 }: Props) => {
+const HouseIcon = ({ width = 16 }: IconInterface) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -24,7 +22,7 @@ const HouseIcon = ({ width = 16 }: Props) => {
   );
 };
 
-const BathIcon = ({ width = 16 }: Props) => {
+const BathIcon = ({ width = 16 }: IconInterface) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -40,7 +38,7 @@ const BathIcon = ({ width = 16 }: Props) => {
   );
 };
 
-const BedIcon = ({ width = 16 }: Props) => {
+const BedIcon = ({ width = 16 }: IconInterface) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"

diff --git a/src/assets/price-estimation.png b/src/assets/price-estimation.png
diff --git a/src/components/footer/index.tsx b/src/components/footer/index.tsx
@@ -2,8 +2,8 @@ type Props = {};
 
 const Footer = (props: Props) => {
   return (
-    <div className="flex min-h-screen sm:min-h-0 w-full items-end bg-white">
-      <footer className="body-font w-full bg-gray-100 text-gray-700">
+    <div className="flex min-h-screen w-full items-end sm:min-h-0">
+      <footer className="body-font w-full bg-gray-200 text-gray-700">
         <div className="md:flex-no-wrap container mx-auto flex flex-col flex-wrap px-5 py-24 lg:items-start md:flex-row md:items-center ">
           <div className="mx-auto w-64 flex-shrink-0 text-center md:mx-0 md:text-left">
             <a className="title-font flex items-center justify-center font-medium text-gray-900 md:justify-start">
@@ -20,9 +20,9 @@ const Footer = (props: Props) => {
                 <a className="cursor-pointer text-gray-500 hover:text-gray-700">
                   <svg
                     fill="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
                     className="h-5 w-5"
                     viewBox="0 0 24 24"
                   >
@@ -32,9 +32,9 @@ const Footer = (props: Props) => {
                 <a className="ml-3 cursor-pointer text-gray-500 hover:text-gray-700">
                   <svg
                     fill="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
                     className="h-5 w-5"
                     viewBox="0 0 24 24"
                   >
@@ -45,9 +45,9 @@ const Footer = (props: Props) => {
                   <svg
                     fill="none"
                     stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
                     className="h-5 w-5"
                     viewBox="0 0 24 24"
                   >
@@ -66,9 +66,9 @@ const Footer = (props: Props) => {
                   <svg
                     fill="currentColor"
                     stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="0"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="0"
                     className="h-5 w-5"
                     viewBox="0 0 24 24"
                   >