659 create lyche about us page

frontend/src/AppRoutes.tsx

@@ -12,7 +12,8 @@ import {
   InformationListPage,
   InformationPage,
   LoginPage,
-  LychePage,
+  LycheAboutPage,
+  LycheHomePage,
   NotFoundPage,
   RecruitmentAdmissionFormPage,
   RecruitmentPage,
@@ -217,7 +218,8 @@ export function AppRoutes() {
             SULTEN ROUTES
       */}
       <Route element={<SultenOutlet />}>
-        <Route path={ROUTES.frontend.sulten} element={<LychePage />} />
+        <Route path={ROUTES.frontend.sulten} element={<LycheHomePage />} />
+        <Route path={ROUTES.frontend.sulten_about} element={<LycheAboutPage />} />
       </Route>
       {/* 
             404 NOT FOUND

frontend/src/Components/Page/Page.module.scss

@@ -22,4 +22,3 @@ $side-padding: 1em;
     width: calc(100% - $side-padding * 2);
   }
 }
-

frontend/src/Components/SultenCard/SultenCard.module.scss

@@ -3,42 +3,70 @@
 @import 'src/mixins';
 
 .container {
-  display: flex;
+  @include flex-row;
   background-color: $black;
+  border-radius: 0.5em;
+  gap: 1em;
+  padding: 1.5em;
   @include for-mobile-down {
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: 1em;
+    @include flex-column;
     padding-bottom: 2em;
   }
 }
 
+.smallcard_container {
+  @include flex-row-center;
+  background-color: $black;
+  border-radius: 0.5em;
+  gap: 1em;
+  padding: 1.5em;
+  @include for-mobile-down {
+    @include flex-column;
+  }
+}
+
 .card_image {
   height: 30em;
   object-position: top;
+  object-fit: cover;
   width: 50%;
+  flex: 1;
   display: inline-block;
   border-radius: 0.5em;
+
+  @include for-mobile-down {
+    width: 100%;
+    display: block;
+    max-height: 15em;
+  }
+}
+
+.smallcard_image {
+  height: 15em;
+  width: 25%;
+  max-width: 15em;
+  display: inline-block;
+  flex: 1;
+  border-radius: 0.5em;
+  object-position: top;
   object-fit: cover;
+
   @include for-mobile-down {
     width: 100%;
+    max-height: 5em;
     display: block;
+    object-position: center;
   }
 }
 
 .text_container {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
+  @include flex-column-center;
+  flex: 1;
   text-align: center;
-  gap: 1em;
-  width: 50%;
-  padding: 0 4rem;
+  max-width: 30vw;
+
   @include for-mobile-down {
-    width: 100%;
-    padding: 0 1rem;
+    max-width: 80vw;
   }
 }
 
@@ -54,4 +82,5 @@
 
 .card_button {
   width: fit-content;
+  margin: 1.5em;
 }

frontend/src/Components/SultenCard/SultenCard.stories.tsx

@@ -16,4 +16,10 @@ const Template: ComponentStory<typeof SultenCard> = function (args) {
 };
 
 export const Basic = Template.bind({});
-Basic.args = { image: front_lyche, header: 'Sulten', text: 'Sulten er en god ting', buttonText: 'Trykk her' };
+Basic.args = {
+  image: front_lyche,
+  header: 'Sulten',
+  text: 'Sulten er en god ting',
+  buttonText: 'Trykk her',
+  smallCard: false,
+};

frontend/src/Components/SultenCard/SultenCard.tsx

@@ -9,8 +9,12 @@ type SultenCardProps = {
   text?: string;
   buttonText?: string;
   imageAlignment?: 'left' | 'right';
+
+  leftAlignImg?: boolean;
+
   onButtonClick?: () => void;
   link?: string;
+  smallCard?: boolean;
 };
 
 export function SultenCard({
@@ -22,18 +26,19 @@ export function SultenCard({
   onButtonClick,
   link,
   imageAlignment = 'left',
+  smallCard = false,
 }: SultenCardProps) {
   const alignImageLeft = imageAlignment === 'left';
   const isMobile = useMobile();
 
   // position image to the left, or top if mobile
   const leftAlignedImage = (alignImageLeft || isMobile) && (
-    <img src={image} alt={imageAlt} className={styles.card_image}></img>
+    <img src={image} alt={imageAlt} className={smallCard ? styles.smallcard_image : styles.card_image}></img>
   );
 
   // position image to the right, not at the bottom if mobile
   const rightAlignedImage = !alignImageLeft && !isMobile && (
-    <img src={image} alt={imageAlt} className={styles.card_image}></img>
+    <img src={image} alt={imageAlt} className={smallCard ? styles.smallcard_image : styles.card_image}></img>
   );
 
   const cardButton = buttonText && (
@@ -43,7 +48,7 @@ export function SultenCard({
   );
 
   return (
-    <div className={styles.container}>
+    <div className={smallCard ? styles.smallcard_container : styles.container}>
       {leftAlignedImage}
       <div className={styles.text_container}>
         <h2 className={styles.card_header}>{header}</h2>

frontend/src/Components/SultenNavbar/SultenNavbar.module.scss

@@ -3,7 +3,6 @@
 @import 'src/constants';
 
 $navbar-bg: #000000;
-$navbar-height: 100px;
 
 .parent_container {
   display: flex;
@@ -66,7 +65,7 @@ $navbar-height: 100px;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
-  height: $navbar-height;
+  height: $sulten-navbar-height;
   margin-top: 0.6em;
   transition: 0.5s;
   cursor: pointer;

frontend/src/Pages/LycheAboutPage/LycheAboutPage.module.scss

@@ -0,0 +1,18 @@
+@import 'src/mixins';
+
+@import 'src/constants';
+
+.container {
+  width: 100%;
+  height: 100%;
+  margin: $sulten-navbar-height/4 0 $sulten-navbar-height/4 0; //this looked the best
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 10;
+  @include flex-column-center;
+  @include for-mobile-down {
+    margin-top: $sulten-navbar-height;
+  }
+}

frontend/src/Pages/LycheAboutPage/LycheAboutPage.tsx

@@ -0,0 +1,55 @@
+import { useTranslation } from 'react-i18next';
+import { SultenPage } from '~/Components/SultenPage';
+import { useTextItem } from '~/hooks';
+import { KEY } from '~/i18n/constants';
+import styles from './LycheAboutPage.module.scss';
+import { TextItem } from '~/constants';
+import { SultenCard } from '~/Components';
+import { burger, soup, dessert } from '~/assets';
+
+export function LycheAboutPage() {
+  const { t } = useTranslation();
+
+  const aboutCardWhatIsLyche = (
+    <SultenCard
+      image={soup}
+      imageAlt={'Chef'}
+      header={t(KEY.sulten_what_is_lyche)}
+      text={useTextItem(TextItem.sulten_what_is_lyche_text)}
+      imageAlignment="right"
+      smallCard={true}
+    />
+  );
+  const aboutCardLycheGoal = (
+    <SultenCard
+      image={burger}
+      imageAlt={'Chef'}
+      header={t(KEY.sulten_lyche_goal)}
+      text={useTextItem(TextItem.sulten_lyche_goal_text)}
+      imageAlignment="left"
+      smallCard={true}
+    />
+  );
+  const aboutCardLycheAboutMenu = (
+    <SultenCard
+      image={dessert}
+      imageAlt={'Chef'}
+      header={t(KEY.sulten_lyche_about_menu)}
+      text={useTextItem(TextItem.sulten_lyche_about_menu_text)}
+      imageAlignment="right"
+      smallCard={true}
+    />
+  );
+
+  return (
+    <>
+      <SultenPage>
+        <div className={styles.container}>
+          {aboutCardWhatIsLyche}
+          {aboutCardLycheGoal}
+          {aboutCardLycheAboutMenu}
+        </div>
+      </SultenPage>
+    </>
+  );
+}

frontend/src/Pages/LycheAboutPage/index.ts

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

frontend/src/Pages/LychePage/LychePage.tsx → frontend/src/Pages/LycheHomePage/LycheHomePage.tsx

@@ -10,10 +10,10 @@ import { VenueDto } from '~/dto';
 import { useTextItem } from '~/hooks';
 import { KEY } from '~/i18n/constants';
 import { ROUTES } from '~/routes';
-import styles from './LychePage.module.scss';
+import styles from './LycheHomePage.module.scss';
 import { getIsConsistentWeekdayOpeningHours, getIsConsistentWeekendHours } from './utils';
 
-export function LychePage() {
+export function LycheHomePage() {
   const [lycheVenue, setLycheVenue] = useState<VenueDto>();
   const { t } = useTranslation();
   const [isConsistentWeekdayHours, setIsConsistentWeekdayHours] = useState(false);

frontend/src/Pages/LycheHomePage/index.ts

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

frontend/src/Pages/index.ts

@@ -10,7 +10,8 @@ export { HomePage } from './HomePage';
 export { InformationListPage } from './InformationListPage';
 export { InformationPage } from './InformationPage';
 export { LoginPage } from './LoginPage';
-export { LychePage } from './LychePage';
+export { LycheAboutPage } from './LycheAboutPage';
+export { LycheHomePage } from './LycheHomePage';
 export { NotFoundPage } from './NotFoundPage';
 export { RecruitmentAdmissionFormPage } from './RecruitmentAdmissionFormPage';
 export { RecruitmentPage } from './RecruitmentPage';

frontend/src/_constants.scss

@@ -64,6 +64,7 @@ $content-padding: calc((100vw - 1200px) / 2);
 
 // Navbar size
 $navbar-height: 60px;
+$sulten-navbar-height: 100px;
 
 // Content size
 $primary-content-wide-padding: 2.5rem;

frontend/src/_mixins.scss

@@ -172,3 +172,15 @@ Usage:
 @mixin shadow-light {
   box-shadow: 0 0 0.5em 0.1em rgba(0, 0, 0, 0.05);
 }
+
+@mixin flex-column {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+@mixin flex-column-center {
+  @include flex-column;
+  justify-content: center;
+}

frontend/src/assets/index.ts

@@ -14,6 +14,9 @@ export { default as sulten_chef } from './sulten_chef.jpg';
 export { default as sulten_crowded } from './sulten_crowded.jpg';
 export { default as sulten_delivery } from './sulten_delivery.jpg';
 export { default as sulten_inside } from './sulten_inside.jpg';
+export { default as soup } from './diggf5675.jpg';
+export { default as burger } from './diggf4353.jpg';
+export { default as dessert } from './diggf5743.jpg';
 export { default as profileIcon } from './user.png';
 
 // Medias

frontend/src/constants/TextItems.ts

@@ -13,4 +13,8 @@ export const TextItem = {
   sulten_menu_text: 'sulten_menu_text',
   sulten_about_us_text: 'sulten_about_us_text',
   sulten_contact_text: 'sulten_contact_text',
+  sulten_about_page_text: 'sulten_about_page_text',
+  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',
 } as const;

frontend/src/i18n/constants.ts

@@ -142,9 +142,12 @@ export const KEY = {
   navbar_nybygg: 'navbar_nybygg',
 
   // Sulten / Lyche:
+  sulten_lyche_goal: 'sulten_lyche_goal',
+  sulten_what_is_lyche: 'sulten_what_is_lyche',
   sulten_page_see_menu: 'sulten_page_see_menu',
   sulten_page_about_us: 'sulten_page_about_us',
   sulten_page_book_table: 'sulten_page_book_table',
+  sulten_lyche_about_menu: 'sulten_lyche_about_menu',
   sulten_page_more_about_us: 'sulten_page_more_about_us',
 
   // Recruitment:

frontend/src/i18n/translations.ts

@@ -208,12 +208,15 @@ export const nb: Record<KeyValues, string> = {
   [KEY.form_confirm]: 'Er du sikker på at du vil',
   [KEY.we_use_cookies]: 'Vi bruker cookies for å gi deg en best mulig opplevelse på Samfundet.no. Les mer om cookies',
   [KEY.control_panel_faq]: 'Hjelp/spørsmål',
+  [KEY.sulten_lyche_goal]: 'Lyches mål',
   [KEY.control_panel_title]: 'Kontrollpanel',
+  [KEY.sulten_what_is_lyche]: 'Hva er Lyche?',
   [KEY.sulten_page_see_menu]: 'Se meny',
   [KEY.sulten_page_about_us]: 'Om Lyche',
   [KEY.information_page_short]: 'Side',
   [KEY.sulten_page_book_table]: 'Bestill bord',
   [KEY.inputfile_choose_a_file]: 'Velg en fil...',
+  [KEY.sulten_lyche_about_menu]: 'Om menyen',
   [KEY.sulten_page_more_about_us]: 'Mer om oss',
   [KEY.inputfile_no_file_selected]: 'Ingen fil er valgt',
   [KEY.notfoundpage_contact_prompt]: 'Hvis du tror dette er en feil, vennligst',
@@ -421,9 +424,12 @@ export const en: Record<KeyValues, string> = {
   [KEY.command_menu_shortcut_about_samfundet]: 'About Samfundet',
 
   // Sulten / Lyche:
+  [KEY.sulten_lyche_goal]: 'Lyches goal',
+  [KEY.sulten_what_is_lyche]: 'What is Lyche?',
   [KEY.sulten_page_see_menu]: 'See our menu',
   [KEY.sulten_page_about_us]: 'About Lyche',
   [KEY.sulten_page_book_table]: 'Book table',
+  [KEY.sulten_lyche_about_menu]: 'About the menu',
   [KEY.sulten_page_more_about_us]: 'More about us',
 
   // No category: