+
ABOUT: ADOPT-A-GREEN INFRASTRUCTURE AND FEATURE VIEWER
+
Setting the Scene and Brief History:
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+ exercitation ullamco laboris nisi ut aliquip ex
+
+
+
+
Purpose of Interactive Map:
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+
+
+
+ How to use Map:
+
+
+ - Lorem ipsum dolor sit amet
+ - consectetur adipiscing elit
+ - sed do eiusmod tempor incididunt ut labore
+ - et dolore magna aliqua
+
+
+
+
+
Importance:
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+ ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+ laboris nisi ut aliquip ex
+
+
+
+ );
+
+};
\ No newline at end of file
diff --git a/apps/frontend/src/pages/mapPage/FlippableTIle.scss b/apps/frontend/src/pages/mapPage/FlippableTIle.scss
new file mode 100644
index 00000000..cfb745c7
--- /dev/null
+++ b/apps/frontend/src/pages/mapPage/FlippableTIle.scss
@@ -0,0 +1,78 @@
+@import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');
+
+.container {
+ font-family: Lora;
+ font-size: 40px;
+ font-weight: 500;
+ line-height: 51px;
+ letter-spacing: 0em;
+}
+
+.icon-placeholder {
+ width: 300px;
+ height: 110px;
+ border-radius: 50%;
+ display: flex;
+ padding-left: 30px;
+ padding-top: 40px;
+
+}
+
+.card-text {
+ display: flex;
+ align-items: flex-start;
+ text-align: left;
+ padding: 12px;
+ font-size: 16px;
+}
+
+
+.flip-card-outer {
+ width: 320px;
+ height: 320px;
+ margin: 25px 0;
+
+ &.focus-trigger:focus {
+ outline: 5px solid greenyellow;
+ outline-offset: 5px;
+ }
+
+ .flip-card-inner {
+ transform-style: preserve-3d;
+ transition: .5s linear .1s;
+ position: relative;
+ width: inherit;
+ height: inherit;
+
+ &.hover-trigger:hover {
+ transform: rotateY(180deg);
+ }
+
+ &.showBack {
+ transform: rotateY(180deg);
+ }
+
+ .card {
+ backface-visibility: hidden;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+
+ &.front {
+ transform: rotateY(0);
+ background-color: #288BE4;
+ color: #FFFDFD;
+ }
+
+ &.back {
+ transform: rotateY(180deg);
+ background-color: #f2f2f2;
+ color: #288BE4;
+ }
+
+ border-radius: 0;
+ }
+ }
+}
diff --git a/apps/frontend/src/pages/mapPage/FlippableTile.tsx b/apps/frontend/src/pages/mapPage/FlippableTile.tsx
new file mode 100644
index 00000000..4c5ae862
--- /dev/null
+++ b/apps/frontend/src/pages/mapPage/FlippableTile.tsx
@@ -0,0 +1,52 @@
+import { useState } from 'react';
+import './FlippableTIle.scss';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import generateRedline from '../../assets/images/featuredResourceIcons/RedLine';
+
+export default function FlipCard({ ...props }) {
+ const card = props.card;
+
+ const [showBack, setShowBack] = useState(false);
+ const [isHovered, setIsHovered] = useState(false);
+
+ function handleClick() {
+ setShowBack(!showBack);
+ }
+
+ function handleMouseEnter() {
+ setIsHovered(true);
+ }
+
+ function handleMouseLeave() {
+ setIsHovered(false);
+ }
+
+ return (
+