675 create lyche contact us page

frontend/src/AppRoutes.tsx

@@ -13,6 +13,7 @@ import {
   InformationPage,
   LoginPage,
   LycheAboutPage,
+  LycheContactPage,
   LycheHomePage,
   NotFoundPage,
   RecruitmentAdmissionFormPage,
@@ -226,7 +227,9 @@ export function AppRoutes() {
       <Route element={<SultenOutlet />}>
         <Route path={ROUTES.frontend.sulten} element={<LycheHomePage />} />
         <Route path={ROUTES.frontend.sulten_about} element={<LycheAboutPage />} />
+        <Route path={ROUTES.frontend.sulten_contact} element={<LycheContactPage />} />
       </Route>
+
       {/* 
             404 NOT FOUND
       */}

frontend/src/Pages/LycheContactPage/LycheContactPage.module.scss

@@ -0,0 +1,71 @@
+@import 'src/mixins';
+
+@import 'src/constants';
+
+.container {
+  margin: calc($sulten-navbar-height / 2) 0 calc($sulten-navbar-height / 2) 0;
+  width: 100%;
+  height: 100%;
+  @include flex-column-center;
+}
+
+.contactContainer {
+  width: 75vw;
+  height: 75vh;
+  @include flex-row-center;
+  gap: 4rem;
+  overflow: hidden;
+  color: $white;
+
+  @include for-mobile-down {
+    @include flex-column-center;
+    margin: calc($sulten-navbar-height / 2) 0 calc($sulten-navbar-height / 2) 0;
+    height: 50%;
+    width: 100%;
+    gap: 1em;
+  }
+}
+
+.lycheContactText {
+  width: 100%;
+  text-align: center;
+}
+
+.textContainer {
+  width: 50%;
+  height: 100%;
+  @include flex-column-center;
+  gap: 1rem;
+  @include for-mobile-down {
+    width: 100%;
+  }
+}
+
+.lycheMapContainer {
+  width: 50%;
+  height: 75%;
+  overflow: hidden;
+  border-radius: 1.5em;
+  @include for-mobile-down {
+    width: 100%;
+    height: 60vh;
+  }
+}
+
+.lycheStreet {
+  height: 100%;
+  width: 100%;
+  border: none;
+}
+
+.contactAddress {
+  color: $sulten-orange;
+}
+
+.lycheSocialsContainer {
+  @include flex-row-center;
+}
+
+.icon {
+  margin: 0.5rem;
+}

frontend/src/Pages/LycheContactPage/LycheContactPage.tsx

@@ -0,0 +1,45 @@
+import { Icon } from '@iconify/react';
+import { Link } from '~/Components/Link/Link';
+import { SultenPage } from '~/Components/SultenPage';
+import { TextItem } from '~/constants/TextItems';
+import { useTextItem } from '~/hooks';
+import { ROUTES } from '~/routes';
+import styles from './LycheContactPage.module.scss';
+
+export function LycheContactPage() {
+  const contactCard = (
+    <div className={styles.contactContainer}>
+      <div className={styles.textContainer}>
+        <p className={styles.lycheContactText}>{useTextItem(TextItem.sulten_contact_page_text)}</p>
+        <p className={styles.contactAddress}>[email protected]</p>
+        <p className={styles.contactAddress}>Elgesetergate 1</p>
+        <div className={styles.lycheSocialsContainer}>
+          <Link target="external" url={ROUTES.other.lyche_facebook}>
+            <Icon className={styles.icon} color="white" icon="bi:facebook" width={40} />
+          </Link>
+          <Link target="external" url={ROUTES.other.sulten_instagram}>
+            <Icon className={styles.icon} color="white" icon="bi:instagram" width={40} />
+          </Link>
+          <Link target="external" url={ROUTES.other.maps_lyche}>
+            <Icon className={styles.icon} color="white" icon="carbon:map" width={40} />
+          </Link>
+        </div>
+      </div>
+      <div className={styles.lycheMapContainer}>
+        <iframe
+          className={styles.lycheStreet}
+          src={ROUTES.other.streetview_lyche}
+          loading="lazy"
+          referrerPolicy="no-referrer-when-downgrade"
+        ></iframe>
+      </div>
+    </div>
+  );
+  return (
+    <>
+      <SultenPage>
+        <div className={styles.container}>{contactCard}</div>
+      </SultenPage>
+    </>
+  );
+}

frontend/src/Pages/LycheContactPage/index.ts

@@ -0,0 +1 @@
+export { LycheContactPage } from './LycheContactPage';

frontend/src/Pages/index.ts

@@ -10,6 +10,7 @@ export { HomePage } from './HomePage';
 export { InformationListPage } from './InformationListPage';
 export { InformationPage } from './InformationPage';
 export { LoginPage } from './LoginPage';
+export { LycheContactPage } from './LycheContactPage';
 export { LycheAboutPage } from './LycheAboutPage';
 export { LycheHomePage } from './LycheHomePage';
 export { NotFoundPage } from './NotFoundPage';

frontend/src/_mixins.scss

@@ -184,3 +184,4 @@ Usage:
   @include flex-column;
   justify-content: center;
 }
+

frontend/src/constants/TextItems.ts

@@ -17,4 +17,5 @@ export const TextItem = {
   sulten_what_is_lyche_text: 'sulten_what_is_lyche_text',
   sulten_lyche_goal_text: 'sulten_lyche_goal_text',
   sulten_lyche_about_menu_text: 'sulten_lyche_about_menu_text',
+  sulten_contact_page_text: 'sulten_contact_page_text',
 } as const;

frontend/src/routes/other.ts

@@ -2,4 +2,9 @@ export const ROUTES_OTHER = {
   maps_elgsetergate_1: 'https://goo.gl/maps/av8ogQPgwWU5ahKr6',
   sulten_instagram: 'https://www.instagram.com/lychekjokkenogbar/',
   foto_samfundet_no: 'https://foto.samfundet.no/',
+  streetview_lyche:
+    'https://www.google.com/maps/embed?pb=!4v1696369072803!6m8!1m7!1s2XEhTJwM_No8aTTrqI72RQ!2m2!1d63\n' +
+    '          .42220330892942!2d10.3953201100997!3f352.98823313957973!4f2.236618333891684!5f0.7820865974627469',
+  maps_lyche: 'https://maps.app.goo.gl/z98jeRNVqQUPRWsv9',
+  lyche_facebook: 'https://www.facebook.com/samfundet.lyche',
 } as const;