56 implement felvételi tájékoztató page

src/app/(app)/[lang]/kollegium/felveteli-tajekoztato/components/DormitoryAdmissionInformationContent.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import {PostBlock} from "@/components/common/PageBlock";
+import  DormitoryCardsComtainer  from "./DormitoryCardsComtainer";
+import  StudentUnionCardsComtainer  from "./StudentUnionCardsComtainer";
+
+export interface DormitoryAdmissionInformationContent {
+    admission_information: {
+        title: string,
+        capacity: string,
+        capacity_p1: string,
+        capacity_p2: string,
+        application: string,
+        application_p1: string,
+        application_p2: string,
+        application_p3: string,
+        contacts: string,
+        contacts_p1: string,
+        contacts_p2: string,
+        contacts_p3: string,
+        dormitory: string
+    },
+    faculties: {
+        ÉMK: string,
+        GPK: string,
+        ÉPK: string,
+        VBK: string,
+        VIK: string,
+        GTK: string,
+        TTK: string,
+        KJK: string
+    }
+
+}
+
+
+export default function DormitoryAdmissionInformationContent({ content }: Readonly<{ content: DormitoryAdmissionInformationContent }>) {
+    const admission_information = content.admission_information;
+  return (
+    <div className="flex flex-col gap-4 md:gap-6 lg:px-4 px-2 py-8">
+        <PostBlock>                
+            <h3 className="font-bold text-xl leading-tight text-gray-900">
+                {admission_information.capacity}
+            </h3>
+            <p className="text-gray-700 text-lg richtext text-justify">
+                {admission_information.capacity_p1}
+            </p>
+            <div>
+                <DormitoryCardsComtainer dormitory={admission_information.dormitory}/>
+            </div>
+            <p className="text-gray-700 text-lg richtext text-justify">
+                {admission_information.capacity_p2}
+            </p>
+        </PostBlock>
+        <PostBlock>
+            <h3 className="font-bold text-xl leading-tight text-gray-900">
+                {admission_information.application}
+            </h3>
+            <p className="text-gray-700 text-lg richtext text-justify">
+                {admission_information.application_p1}
+            </p>
+            <p className="text-gray-700 text-lg richtext text-justify">
+                {admission_information.application_p2}                
+                <a href="http://kefir.bme.hu" target="_blank"  rel="noopener noreferrer" className="font-bold text-lg leading-tight text-gray-900 hover:text-[#862633] transition-colors inline">
+                    KEFIR
+                </a>
+                {admission_information.application_p3}
+            </p>
+
+        </PostBlock>
+        <PostBlock>    
+            <h3 className="font-bold text-xl leading-tight text-gray-900">
+                {admission_information.contacts}
+            </h3>
+            <p className="text-gray-700 text-lg richtext text-justify">
+                {admission_information.contacts_p1}
+            </p>
+            <div>
+
+                <StudentUnionCardsComtainer content={content}/>
+            </div>
+            <p className="text-gray-700 text-lg richtext text-justify">
+                {admission_information.contacts_p2}
+                {<a href="mailto:info@bmeehk.hu" target="_blank"  rel="noopener noreferrer" className="font-bold text-lg leading-tight text-gray-900 hover:text-[#862633] transition-colors inline">
+                    info@bmeehk.hu
+                </a>}
+                {admission_information.contacts_p3}
+            </p>            
+      </PostBlock>
+    </div>
+
+  )}
+

src/app/(app)/[lang]/kollegium/felveteli-tajekoztato/components/DormitoryCardsComtainer.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { ImageCard } from "@/components/common/ImageCard";
+
+
+export default function DormitoryCardsComtainer({ dormitory} : Readonly<{ dormitory: string}>) {
+    const dimensions = {
+        width: 60,
+        height: 60
+    }
+    const imageFolder = "/kolik/"
+    const baross = {
+        imageSrc: imageFolder+"baross.jpg",
+        title: "Baross Gábor "+dormitory,
+        dimensions: dimensions,
+        href: "https://epiteszhk.bme.hu/kollegium/kollegiumaink/baross-gabor-kollegium/"
+    }
+    const bercsenyi = {
+        imageSrc: imageFolder+"bercsenyi.jpg",
+        title: "Bercsényi 28-30 "+dormitory,
+        dimensions: dimensions,
+        href: "https://bercsenyi.bme.hu/"
+    }
+    const karman = {
+        imageSrc: imageFolder+"karman.jpg",
+        title: "Kármán Tódor "+dormitory,
+        dimensions: dimensions,
+        href: "https://ttkhk.bme.hu/koli/karman-2/"
+    }
+    const martos = {
+        imageSrc: imageFolder+"martos.jpg",
+        title: "Martos "+dormitory,
+        dimensions: dimensions,
+        href: "https://martos.bme.hu/"
+    }
+    const schonherz = {
+        imageSrc: imageFolder+"schonherz.jpg",
+        title: "Schönherz "+dormitory,
+        dimensions: dimensions,
+        href: "https://sch.bme.hu/"
+    }
+    const vasarhelyi = {
+        imageSrc: imageFolder+"vasarhelyi.jpg",
+        title: "Vásárhelyi Pál "+dormitory,
+        dimensions: dimensions,
+        href: "https://vpk.bme.hu/"
+    }
+    const wigner = {
+        imageSrc: imageFolder+"wigner.jpg",
+        title: "Wigner Jenő "+dormitory,
+        dimensions: dimensions,
+        href: "https://wigner.bme.hu/"
+    }
+    return (
+        <div className="block sm:flex sm:flex-row flex-wrap items-center justify-center gap-4 md:gap-0 flex-1">
+            <ImageCard content={baross}/>
+            <ImageCard content={bercsenyi}/>
+            <ImageCard content={karman}/>
+            <ImageCard content={martos}/>
+            <ImageCard content={schonherz}/>
+            <ImageCard content={vasarhelyi}/>
+            <ImageCard content={wigner}/>
+        </div>
+    );
+}

src/app/(app)/[lang]/kollegium/felveteli-tajekoztato/components/StudentUnionCardsComtainer.tsx

@@ -0,0 +1,74 @@
+"use client";
+import { DormitoryAdmissionInformationContent} from "./DormitoryAdmissionInformationContent";
+import { ImageCard } from "@/components/common/ImageCard";
+
+
+export default function StudentUnionCardsComtainer({ content }: Readonly<{ content: DormitoryAdmissionInformationContent; }>) {
+    const faculties = content.faculties;
+    const dimensions = {
+        width: 62,
+        height: 72
+    }
+    const imageFolder = "/karihk/"
+    const emk = {
+        imageSrc: imageFolder+"emk.jpg",
+        title: faculties.ÉMK,
+        dimensions: dimensions,
+        href: "https://emkhk.bme.hu/"
+    }
+    const epk = {
+        imageSrc: imageFolder+"epk.jpg",
+        title: faculties.ÉPK,
+        dimensions: dimensions,
+        href: "https://epiteszhk.bme.hu"
+    }
+    const gtk = {
+        imageSrc: imageFolder+"gtk.png",
+        title: faculties.GTK,
+        dimensions: dimensions,
+        href: "http://gtkhk.hu/"
+    }
+    const gpk = {
+        imageSrc: imageFolder+"gpk.jpg",
+        title: faculties.GPK,
+        dimensions: dimensions,
+        href: "https://ghk.bme.hu/"
+    }
+    const kjk = {
+        imageSrc: imageFolder+"kjk.png",
+        title: faculties.KJK,
+        dimensions: dimensions,
+        href: "http://kozlekhk.hu/"
+    }
+    const ttk = {
+        imageSrc: imageFolder+"ttk.jpg",
+        title: faculties.TTK,
+        dimensions: dimensions,
+        href: "https://ttkhk.bme.hu"
+    }
+    const vbk = {
+        imageSrc: imageFolder+"vbk.png",
+        title: faculties.VBK,
+        dimensions: dimensions,
+        href: "http://www.vegyeszhk.hu/"
+    }
+    const vik = {
+        imageSrc: imageFolder+"vik.png",
+        title: faculties.VIK,
+        dimensions: dimensions,
+        href: "https://vik.hk/"
+    }
+
+    return (
+        <div className="block sm:flex sm:flex-row flex-wrap items-center justify-center gap-4 md:gap-0 flex-1">
+            <ImageCard content={emk}/>
+            <ImageCard content={epk}/>
+            <ImageCard content={gtk}/>
+            <ImageCard content={gpk}/>
+            <ImageCard content={kjk}/>
+            <ImageCard content={ttk}/>
+            <ImageCard content={vbk}/>
+            <ImageCard content={vik}/>
+         </div>
+    );
+}

src/app/(app)/[lang]/kollegium/felveteli-tajekoztato/page.tsx

@@ -0,0 +1,26 @@
+import DormitoryAdmissionInformationContent from "@/app/(app)/[lang]/kollegium/felveteli-tajekoztato/components/DormitoryAdmissionInformationContent"
+import { PageHeader } from "@/components/common/PageHeader";
+import { getDictionary } from "@/get-dictionary";
+import { Locale } from "@/i18n-config";
+
+export default async function AdmissionInformationPage({
+  params }: Readonly<{ params: Promise<{ lang: Locale }> }>){
+  const { lang } = await params;
+  const dictionary = await getDictionary(lang);
+
+  const admission_information = dictionary.dormitories.admission_information;
+  const faculties = dictionary.faculties;
+  const content = {
+    admission_information,
+    faculties
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <div className="container mx-auto px-4 py-8">
+        <PageHeader title={dictionary.dormitories.admission_information.title} />
+        <DormitoryAdmissionInformationContent content={content}/>
+      </div>
+    </div>
+  )
+}

src/app/(app)/components/navigation-items.ts

@@ -127,6 +127,9 @@ export function getNavigationItems(lang: string): NavigationItem[] {
       targetBlank: false,
       items: [
         { label: t("Bemutató", "Overview"), href: "#", targetBlank: false },
+        { label: t("Felvételi tájékoztató", "Admission Information"),
+          href: "/kollegium/felveteli-tajekoztato",
+          targetBlank: false },
         {
           label: t("Szabályzatok", "Regulations"),
           href: link("/kollegium-szabalyzatok"),

src/app/(app)/globals.css

@@ -169,6 +169,15 @@
     .hover\:bg-ehk-light-red:hover { background-color: var(--ehk-light-red); }
     .hover\:text-ehk-light-red:hover { color: var(--ehk-light-red); }
     .hover\:border-ehk-light-red:hover { border-color: var(--ehk-light-red); }
+
+    /*Global word break and hyphenation*/
+    /*Can be locally overridden by 'hypens-none' tailwind class for specific elements if needed*/
+    /*This code is placed here, in the utilites layer, because of CSS displaying priorities*/
+
+    p, h1, h2, h3, h4, h5, h6, li, a, span, div, button, input, textarea{
+      word-break: break-word;
+      hyphens: auto;
+}
 }
 
     @layer base {

src/components/common/ImageCard.tsx

@@ -0,0 +1,48 @@
+"use client";
+import Image from "next/image";
+import { Card, CardContent } from "@/components/ui/card";
+
+interface ImageCardProps {
+    href: string;
+    dimensions: {
+        width: number;
+        height: number;
+    };
+    imageSrc: string;
+    title: string;
+    description?: string;
+}
+
+export function ImageCard({ content }: Readonly<{content: ImageCardProps }> ) {
+    const { href, imageSrc, title, description} = content;
+    const { width, height } = content.dimensions;
+    return (
+        <a href={href} target="_blank" rel="noopener noreferrer">
+            <Card className={`group hover:shadow-lg transition-all duration-300 hover:-translate-y-1 cursor-pointer w-full m-2 mx-auto sm:m-2 sm:w-${width} sm:h-${height}`}>
+                <CardContent className="h-full flex flex-col">
+                    <div className="flex flex-col items-center md:items-center text-center gap-4 md:gap-0 flex-1">
+                        <div className="relative mb-0 md:mb-4 shrink-0">
+                            <div className="w-20 h-20 min-[13.5rem]:w-32 min-[13.5rem]:h-32 rounded-full overflow-hidden bg-gradient-to-br from-blue-100 to-purple-100 flex items-center justify-center">
+                                <Image
+                                    src={imageSrc}
+                                    alt={title}
+                                    width={128}
+                                    height={128}
+                                    className="w-full h-full object-cover"
+                                />
+                            </div>
+                        </div>
+
+                        <div>
+                            <h3 className="font-semibold text-base md:text-lg text-gray-900 mb-1.5 md:mb-2 group-hover:text-ehk-dark-red transition-colors min-[20rem]:hyphens-none">
+                                {title}
+                            </h3>
+                            <p className="text-sm md:text-m text-gray-600 mb-2 md:mb-3">{description}</p>
+                        </div>
+                    </div>
+                </CardContent>
+            </Card>
+          </a>
+    )
+
+}

src/components/common/PageBlock.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+import { Card, CardContent } from "@/components/ui/card";
+
+function PostBlock({ className, ...props }: React.ComponentProps<"div">) {
+    return (
+        <div className="container mx-auto">
+            <Card className="hover:shadow-md transition-all duration-300">
+                <CardContent className="p-3 md:p-6">
+                    <div className={cn("flex flex-col gap-2 md:gap-3", className)}
+                        {...props}>
+
+                    </div>
+                </CardContent>
+            </Card>
+        </div>
+    )
+}
+
+export { PostBlock }
+

src/dictionaries/en.json

@@ -160,6 +160,23 @@
   "knowledge_base": {
     "title": "Cheat Sheets"
   },
+  "dormitories":{
+    "admission_information": {
+      "title": "Dormitory Admission Information",
+      "capacity": "Capacity",
+      "capacity_p1": "Students of the Budapest University of Technology and Economics can get accommodation in a total of 7 dormitories:",
+      "capacity_p2": "Students of each faculty can move into the dormitories assigned to their faculty (you can find more information about this on the websites of the Faculty Student Unions).",
+      "application": "Application Process",
+      "application_p1": "You can apply for dormitory accommodation through the dormitory admission process. The USU has created the Unified Dormitory Admission System, which provides a framework for the faculties to carry out the applications, but you can find the exact regulations applicable to you on the website of the relevant Faculty Student Union.",
+      "application_p2": "The application submission interface for the admission process is ",
+      "application_p3": " the Unified Dormitory Admission and Information System (Egységes Kollégiumi Felvételi Rendszer), where you can log in with the Neptun-code (i.e., the BME Directory generated from it) received in the admission information package from the university.",
+      "contacts": "Contacts",
+      "contacts_p1": "Should you have any questions regarding dormitory accommodation, please contact the relevant Faculty Student Union, which can be reached at the following addresses:",
+      "contacts_p2": "For general inquiries, feel free to contact us at ",
+      "contacts_p3": ".",
+      "dormitory": "Dormitory"
+    }
+  },
   "faculties": {
     "ÉMK": "Faculty of Civil Engineering",
     "GPK": "Faculty of Mechanical Engineering",