ElleHacks · Nanzi03 · Dec 31, 2023
diff --git a/.gitignore b/.gitignore
@@ -5,4 +5,4 @@
 .idea/vcs.xml
 .idea/workspace.xml
 
-.vscode/*
+.vscode/*
diff --git a/README.md b/README.md
@@ -0,0 +1,10 @@
+
+  # location
+
+  Note: Please ensure you have installed <code><a href="https://nodejs.org/en/download/">nodejs</a></code>
+
+  To preview and run the project on your device:
+  1) Open project folder in <a href="https://code.visualstudio.com/download">Visual Studio Code</a>
+  2) In the terminal, run `npm install`
+  3) Run `npm start` to view project in browser
+
diff --git a/package.json b/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "location",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^29.5.0",
+    "@types/node": "^16.11.14",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.4",
+    "typescript": "^4.5.4",
+    "react-router-dom": "^6.2.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "root": true
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/public/google-maps-image@2x.png b/public/google-maps-image@2x.png
diff --git a/public/group-151@2x.png b/public/group-151@2x.png
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta property="og:image" content="%PUBLIC_URL%/thumbnail.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000" />
+    <meta name="description" content="Web site created using Locofy" />
+    <title>location</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/public/rectangle-49@2x.png b/public/rectangle-49@2x.png
diff --git a/public/simplification@2x.png b/public/simplification@2x.png
diff --git a/public/social-media-buttons@2x.png b/public/social-media-buttons@2x.png
diff --git a/src/App.tsx b/src/App.tsx
@@ -0,0 +1,70 @@
+import { useEffect } from "react";
+import {
+  Routes,
+  Route,
+  useNavigationType,
+  useLocation,
+} from "react-router-dom";
+import Contact from "./pages/Contact";
+import Frame from "./pages/Frame";
+import Group from "./pages/Group";
+import Frame1 from "./pages/Frame1";
+
+function App() {
+  const action = useNavigationType();
+  const location = useLocation();
+  const pathname = location.pathname;
+
+  useEffect(() => {
+    if (action !== "POP") {
+      window.scrollTo(0, 0);
+    }
+  }, [action, pathname]);
+
+  useEffect(() => {
+    let title = "";
+    let metaDescription = "";
+
+    switch (pathname) {
+      case "/":
+        title = "";
+        metaDescription = "";
+        break;
+      case "/frame":
+        title = "";
+        metaDescription = "";
+        break;
+      case "/group-151":
+        title = "";
+        metaDescription = "";
+        break;
+      case "/frame1":
+        title = "";
+        metaDescription = "";
+        break;
+    }
+
+    if (title) {
+      document.title = title;
+    }
+
+    if (metaDescription) {
+      const metaDescriptionTag: HTMLMetaElement | null = document.querySelector(
+        'head > meta[name="description"]'
+      );
+      if (metaDescriptionTag) {
+        metaDescriptionTag.content = metaDescription;
+      }
+    }
+  }, [pathname]);
+
+  return (
+    <Routes>
+      <Route path="/" element={<Contact />} />
+      <Route path="/frame" element={<Frame />} />
+      <Route path="/group-151" element={<Group />} />
+      <Route path="/frame1" element={<Frame1 />} />
+    </Routes>
+  );
+}
+export default App;
diff --git a/src/components/LocationText.module.css b/src/components/LocationText.module.css
@@ -0,0 +1,9 @@
+.location {
+  font-size: 40px;
+  display: inline-block;
+  font-family: var(--font-space-grotesk);
+  color: var(--color-white);
+  text-align: center;
+  width: 310px;
+  height: 109px;
+}
diff --git a/src/components/LocationText.tsx b/src/components/LocationText.tsx
@@ -0,0 +1,8 @@
+import { FunctionComponent } from "react";
+import styles from "./LocationText.module.css";
+
+const LocationText: FunctionComponent = () => {
+  return <b className={styles.location}>Location</b>;
+};
+
+export default LocationText;
diff --git a/src/components/Rectangle.module.css b/src/components/Rectangle.module.css
@@ -0,0 +1,5 @@
+.rectangleDiv {
+  background-color: #843b3b;
+  width: 642px;
+  height: 481px;
+}
diff --git a/src/components/Rectangle.tsx b/src/components/Rectangle.tsx
@@ -0,0 +1,8 @@
+import { FunctionComponent } from "react";
+import styles from "./Rectangle.module.css";
+
+const Rectangle: FunctionComponent = () => {
+  return <div className={styles.rectangleDiv} />;
+};
+
+export default Rectangle;
diff --git a/src/components/RectangleVector.module.css b/src/components/RectangleVector.module.css
@@ -0,0 +1,5 @@
+.rectangleDiv {
+  background-color: #702122;
+  width: 642px;
+  height: 192px;
+}
diff --git a/src/components/RectangleVector.tsx b/src/components/RectangleVector.tsx
@@ -0,0 +1,8 @@
+import { FunctionComponent } from "react";
+import styles from "./RectangleVector.module.css";
+
+const RectangleVector: FunctionComponent = () => {
+  return <div className={styles.rectangleDiv} />;
+};
+
+export default RectangleVector;
diff --git a/src/components/TBDText.module.css b/src/components/TBDText.module.css
@@ -0,0 +1,9 @@
+.tbd {
+  font-size: 20px;
+  font-family: var(--font-space-grotesk);
+  color: var(--color-gray);
+  text-align: left;
+  display: inline-block;
+  width: 437.7px;
+  height: 61.5px;
+}
diff --git a/src/components/TBDText.tsx b/src/components/TBDText.tsx
@@ -0,0 +1,8 @@
+import { FunctionComponent } from "react";
+import styles from "./TBDText.module.css";
+
+const TBDText: FunctionComponent = () => {
+  return <div className={styles.tbd}>TBD</div>;
+};
+
+export default TBDText;
diff --git a/src/components/TBDText1.module.css b/src/components/TBDText1.module.css
@@ -0,0 +1,6 @@
+.tbd {
+  font-size: var(--font-size-16xl);
+  font-family: var(--font-space-grotesk);
+  color: var(--color-gray);
+  text-align: center;
+}
diff --git a/src/components/TBDText1.tsx b/src/components/TBDText1.tsx
@@ -0,0 +1,8 @@
+import { FunctionComponent } from "react";
+import styles from "./TBDText1.module.css";
+
+const TBDText1: FunctionComponent = () => {
+  return <b className={styles.tbd}>TBD</b>;
+};
+
+export default TBDText1;
diff --git a/src/components/TBDText2.module.css b/src/components/TBDText2.module.css
@@ -0,0 +1,6 @@
+.tbd {
+  font-size: var(--font-size-16xl);
+  font-family: var(--font-space-grotesk);
+  color: var(--color-gray);
+  text-align: center;
+}
diff --git a/src/components/TBDText2.tsx b/src/components/TBDText2.tsx
@@ -0,0 +1,8 @@
+import { FunctionComponent } from "react";
+import styles from "./TBDText2.module.css";
+
+const TBDText2: FunctionComponent = () => {
+  return <b className={styles.tbd}>TBD</b>;
+};
+
+export default TBDText2;
diff --git a/src/components/TBDText3.module.css b/src/components/TBDText3.module.css
@@ -0,0 +1,6 @@
+.tbd {
+  font-size: var(--font-size-16xl);
+  font-family: var(--font-space-grotesk);
+  color: var(--color-gray);
+  text-align: center;
+}
diff --git a/src/components/TBDText3.tsx b/src/components/TBDText3.tsx
@@ -0,0 +1,8 @@
+import { FunctionComponent } from "react";
+import styles from "./TBDText3.module.css";
+
+const TBDText3: FunctionComponent = () => {
+  return <b className={styles.tbd}>TBD</b>;
+};
+
+export default TBDText3;
diff --git a/src/global.css b/src/global.css
@@ -0,0 +1,20 @@
+@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap");
+body {
+  margin: 0;
+  line-height: normal;
+}
+:root {
+  /* fonts */
+  --font-space-grotesk: "Space Grotesk";
+
+  /* font sizes */
+  --font-size-16xl: 35px;
+  --font-size-3xl: 22px;
+
+  /* Colors */
+  --color-gray: #fffdfd;
+  --color-white: #fff;
+
+  /* Border radiuses */
+  --br-8xs: 5px;
+}
diff --git a/src/index.tsx b/src/index.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
+import { BrowserRouter } from "react-router-dom";
+import "./global.css";
+
+const container = document.getElementById("root");
+const root = createRoot(container!);
+
+root.render(
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();