659 create lyche about us page

frontend/src/AppRoutes.tsx

@@ -12,7 +12,7 @@ import {
   InformationListPage,
   InformationPage,
   LoginPage,
-  LychePage,
+  LycheHomePage,
   NotFoundPage,
   RecruitmentPage,
   RouteOverviewPage,
@@ -47,6 +47,7 @@ import { RecruitmentFormAdminPage } from './PagesAdmin/RecruitmentFormAdminPage'
 import { SaksdokumentAdminPage } from './PagesAdmin/SaksdokumentAdminPage';
 import { PERM } from './permissions';
 import { ROUTES } from './routes';
+import { LycheAboutPage } from './Pages/LycheAboutPage/LycheAboutPage';
 
 export function AppRoutes() {
   // Must be called within <BrowserRouter> because it uses hook useLocation().
@@ -205,7 +206,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

@@ -14,6 +14,19 @@
   }
 }
 
+.smallcard_container {
+  display: flex;
+  background-color: $black;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 1em;
+  padding-bottom: 1em;
+  @include for-mobile-down {
+    flex-direction: column;
+  }
+}
+
 .card_image {
   height: 30em;
   object-position: top;
@@ -27,6 +40,22 @@
   }
 }
 
+.smallcard_image {
+  height: 15em;
+  object-position: top;
+  width: 25%;
+  display: inline-block;
+  border-radius: 0.5em;
+  object-fit: cover;
+  padding: 0;
+  @include for-mobile-down {
+    width: 100%;
+    display: block;
+    height: 5em;
+    object-position: center;
+  }
+}
+
 .text_container {
   display: flex;
   flex-direction: column;
@@ -42,6 +71,21 @@
   }
 }
 
+.smallcard_text_container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  gap: 1em;
+  width: 50%;
+  padding: 0 4rem;
+  @include for-mobile-down {
+    width: 100%;
+    padding: 0 1rem;
+  }
+}
+
 .card_header {
   color: $white;
   font-size: 1.5rem;

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

@@ -11,6 +11,7 @@ type SultenCardProps = {
   imageAlignment?: 'left' | 'right';
   onButtonClick?: () => void;
   link?: string;
+  smallCard?: boolean;
 };
 
 export function SultenCard({
@@ -22,18 +23,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,9 +45,9 @@ export function SultenCard({
   );
 
   return (
-    <div className={styles.container}>
+    <div className={smallCard ? styles.smallcard_container : styles.container}>
       {leftAlignedImage}
-      <div className={styles.text_container}>
+      <div className={smallCard ? styles.smallcard_text_container : styles.text_container}>
         <h2 className={styles.card_header}>{header}</h2>
         <p className={styles.card_text}>{text}</p>
         {cardButton}

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,17 @@
+@import 'src/mixins';
+
+@import 'src/constants';
+
+.container {
+  width: 100%;
+  height: 100%;
+  margin: $sulten-navbar-height/2 0 $sulten-navbar-height/2 0; //this looked the best
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 10;
+  @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,7 @@ export { HomePage } from './HomePage';
 export { InformationListPage } from './InformationListPage';
 export { InformationPage } from './InformationPage';
 export { LoginPage } from './LoginPage';
-export { LychePage } from './LychePage';
+export { LycheHomePage } from './LycheHomePage';
 export { NotFoundPage } from './NotFoundPage';
 export { RecruitmentPage } from './RecruitmentPage';
 export { RouteOverviewPage } from './RouteOverviewPage';

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/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',
+  sulten_lyche_goal_text: 'sulten_lyche_goal_text',
+  sulten_lyche_about_menu_text: 'sulten_lyche_about_menu',
 } as const;

frontend/src/i18n/constants.ts

@@ -139,9 +139,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

@@ -198,12 +198,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',
@@ -401,9 +404,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: