Feature/strafing timeline

src/app/(app)/Components/Carousel.tsx

@@ -52,7 +52,7 @@ export function MyCarousel({data}: { data: { docs: { url: string; alt: string }[
         <div className="slider-container">
             <Slider {...settings}>
                 {data.docs.map((doc, index) => (
-                    <div key={index} className="p-4 flex h-48 sm:h-64 md:h-96 w-auto outline-none">
+                    <div key={index} className="p-2 flex h-48 sm:h-64 md:h-96 w-auto outline-none">
                         <img src={doc.url} alt={doc.alt} className="object-cover h-full w-auto"/>
                     </div>
                 ))}

src/app/(app)/Components/EventCard.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import Image from 'next/image';
+
+interface EventCardProps {
+    title: string;
+    imageUrl: string;
+    date: string;
+    description: string;
+}
+
+const EventCard: React.FC<EventCardProps> = ({ title, imageUrl, date, description }) => {
+    const formattedDate = new Date(date).toLocaleDateString('hu-HU', {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric'
+    });
+
+    return (
+        <div className="bg-gray-800 rounded-lg overflow-hidden shadow-lg hover:shadow-2xl transition-shadow duration-300 max-w-sm">
+            <div className="relative h-48">
+                <Image
+                    src={imageUrl}
+                    alt={title}
+                    layout="fill"
+                    objectFit="cover"
+                    className="transition-transform duration-300 hover:scale-105"
+                />
+                <div className="absolute top-0 left-0 bg-gray-900 text-gray-100 px-3 py-1 m-2 rounded">
+                    {formattedDate}
+                </div>
+            </div>
+            <div className="p-6 max-h-64">
+                <h2 className="text-xl font-bold text-gray-100 mb-3">{title}</h2>
+                <p className="text-gray-300 text-sm leading-relaxed line-clamp-3">{description}</p>
+            </div>
+        </div>
+    );
+};
+
+export default EventCard;
+

src/app/(app)/Components/Footer.tsx

@@ -20,7 +20,7 @@ const Footer: React.FC = () => {
         <footer className="w-full py-6 bg-gradient-to-r from-black via-white to-black text-black">
             <div className="w-full container mx-auto px-4 flex flex-col items-center text-center space-y-6">
                 <div className="flex items-center mb-4">
-                    <Mail className="h-5 w-5 mr-2 text-gray-800"/>
+                    <Mail className="h-5 w-5 mr-2 text-gray-800" />
                     <button
                         onClick={copyToClipboard}
                         className="text-gray-800 hover:text-gray-600 flex items-center"
@@ -30,34 +30,34 @@ const Footer: React.FC = () => {
                             {copied && (
                                 <LuCopyCheck
                                     className="h-5 w-5 ml-1"
-                                    style={{color: 'rgb(21 128 61)'}}
+                                    style={{ color: 'rgb(21 128 61)' }}
                                 />
                             )}
                         </span>
                     </button>
                 </div>
                 <div className="flex space-x-4 mb-4">
                     <Link href="https://www.instagram.com/epitesz_klub_szakkollegium/" target="_blank"
-                          rel="noopener noreferrer" className="text-gray-800 hover:text-gray-600">
-                        <Instagram className="h-6 w-6"/>
+                        rel="noopener noreferrer" className="text-gray-800 hover:text-gray-600">
+                        <Instagram className="h-6 w-6" />
                         <span className="sr-only">Instagram</span>
                     </Link>
                     <Link href="https://www.facebook.com/EpiteszKlubBME" target="_blank" rel="noopener noreferrer"
-                          className="text-gray-800 hover:text-gray-600">
-                        <Facebook className="h-6 w-6"/>
+                        className="text-gray-800 hover:text-gray-600">
+                        <Facebook className="h-6 w-6" />
                         <span className="sr-only">Facebook</span>
                     </Link>
                     <Link href="https://hu.linkedin.com/company/%C3%A9p%C3%ADt%C3%A9sz-klub" target="_blank"
-                          rel="noopener noreferrer" className="text-gray-800 hover:text-gray-600">
-                        <Linkedin className="h-6 w-6"/>
+                        rel="noopener noreferrer" className="text-gray-800 hover:text-gray-600">
+                        <Linkedin className="h-6 w-6" />
                         <span className="sr-only">LinkedIn</span>
                     </Link>
                 </div>
                 <div className="flex items-center text-gray-800">
-                    Készítette <TbHeartFilled style={{color: 'rgb(239 68 68)'}}/>
+                    Készítette <TbHeartFilled style={{ color: 'rgb(239 68 68)' }} />
                     -ből a{' '}
                     <a target='_blank' href='https://kir-dev.hu' rel='noreferrer'>
-                        <Image className='inline' src='/Kir-Dev-vertical.svg' alt='Kir-Dev' width={100} height={20}/>
+                        <Image className='inline' src='/Kir-Dev-vertical.svg' alt='Kir-Dev' width={100} height={20} />
                     </a>
                 </div>
             </div>

src/app/(app)/Components/PageTitle.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+export default function PageTitle({ title }: { title: string }) {
+    return (
+        <>
+            <div className="absolute top-0 right-0 w-1/3 h-1/3 my-12 bg-gradient-radial from-zinc-800 to-transparent opacity-20 blur-3xl"></div>
+            <div className="max-w-7xl mx-auto">
+                <div className="mb-12">
+                    <div className="flex items-center gap-4 mb-4">
+                        <h1 className="text-4xl font-bold tracking-tight text-zinc-100">
+                            {title}
+                        </h1>
+                        <div className="flex-grow h-1 bg-gradient-to-r from-zinc-700 to-zinc-900"></div>
+                    </div>
+                    <div className="w-20 h-1 bg-zinc-600"></div>
+                </div>
+            </div>
+        </>
+    );
+}

src/app/(app)/Components/StrafingLine.tsx

@@ -0,0 +1,71 @@
+'use client'
+import {useEffect, useState} from 'react';
+import {Event, Media} from "@/payload-types";
+import EventCard from "@/app/(app)/Components/EventCard";
+
+interface timelineProps {
+    events: Event[];
+}
+
+const isMedia = (picture: number | Media): picture is Media => {
+    return (picture as Media).url !== undefined;
+};
+
+export default function StrafingLine(props: timelineProps) {
+    const [width, setWidth] = useState(0);
+
+    useEffect(() => {
+        const handleResize = () => setWidth(window?.innerWidth ?? 0);
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+
+    const totalHeight = props.events.length * 350 + 150;
+
+    return (
+        <div className="min-h-screen p-8 w-full relative" style={{ height: `${totalHeight}px` }}>
+            {/* Timeline path */}
+            <div className="absolute left-0 top-0 w-full">
+                <svg
+                    className="w-full stroke-white stroke-[4px]" style={{ height: `${totalHeight}px` }}
+                >
+                    <path d={Array.isArray(props.events) ? props.events.map((event, index) => {
+                        const y = index * 350 + 150;
+                        let x1 = 0;
+                        let x2 = 0;
+                        if (index === props.events.length - 1) {
+                            x1 = index % 2 ? width * 0.85 : width * 0.15;
+                            x2 = index % 2 ? width * 0.75 : width * 0.25;
+                        } else {
+                            x1 = index % 2 ? width * 0.85 : width * 0.15;
+                            x2 = index % 2 ? width * 0.15 : width * 0.85;
+                        }
+                        return `${index === 0 ? 'M' : 'L'} ${x1} ${y + 50} H ${x2} ${index < props.events.length - 1 ? `V ${y + 250}` : ''}`;
+                    }).join(' ') : ''} />
+                </svg>
+            </div>
+
+            {/* Event boxes */}
+            <div className="relative">
+                {Array.isArray(props.events) && props.events.map((event, index) => {
+                    const isLeft = index % 2 === 0;
+                    return (
+                        <div
+                            key={event.id}
+                            className={`absolute ${isLeft ? 'left-10' : 'right-0'} w-1/3`}
+                            style={{ top: `${index * 350}px` }}
+                        >
+                            <EventCard
+                                title={event.title}
+                                imageUrl={isMedia(event.picture) ? event.picture.url ?? '' : ''}
+                                date={event.date}
+                                description={event.description}
+                            />
+                        </div>
+                    );
+                })}
+            </div>
+        </div>
+    )
+}

src/app/(app)/Components/navBar/navBar.tsx

@@ -67,11 +67,9 @@ export default function NavBar(props: NavBarProps) {
     return (
         <header className="relative w-full z-[1000]">
             <div
-                className="absolute inset-0 bg-black"
+                className="absolute inset-0 bg-black lg:bg-contain bg-cover h-19"
                 style={{
                     backgroundImage: 'url(/NavBarBg.png)',
-                    backgroundSize: 'cover',
-                    backgroundPosition: 'bottom',
                 }}
             />
 

src/app/(app)/Components/projects/category.tsx

@@ -1,50 +1,53 @@
 'use client';
 
-import { Event } from "@/payload-types";
-import Image from "next/image"
+import {Event, Media} from "@/payload-types";
+import Image from "next/image";
 
 interface CategoryEventProps {
-    events: Event[];
+  events: Event[];
 }
 
+const isMedia = (picture: number | Media): picture is Media => {
+  return (picture as Media).url !== undefined;
+};
 
-export default function CategoryEvents( props: CategoryEventProps ) {
-    console.log("Ok");
-    console.log(props.events);
+export default function CategoryEvents(props: CategoryEventProps) {
+  console.log("Ok");
+  console.log(props.events);
 
-
-    return (
+  return (
     <div className="container mx-auto px-4 py-8">
-        {props.events.map((event, index) => (
-            <div key={index} className="max-w-4xl mx-auto">
-            <div className="space-y-2">
-              <div className="text-3xl font-bold">
-                {event.title}
-                <span className="text-muted-foreground ml-2">/ {new Date(event.date).toLocaleDateString('hu-HU', {
-                    year: 'numeric',
-                    month: 'long',
-                    day: 'numeric',
-                })}</span>
-              </div>
+      {props.events.map((event, index) => (
+        <div key={index} className="max-w-4xl mx-auto mb-14">
+          <div className="space-y-2">
+            <div className="text-3xl font-bold">
+              {event.title}
+              <span className="text-muted-foreground ml-2">
+                /{" "}
+                {new Date(event.date).toLocaleDateString("hu-HU", {
+                  year: "numeric",
+                  month: "long",
+                  day: "numeric",
+                })}
+              </span>
+            </div>
+          </div>
+          <div className="space-y-6 my-3">
+            <div className="relative w-full aspect-video overflow-hidden rounded-lg">
+              <Image
+                src={isMedia(event.picture) ? event.picture.url ?? '' : ''}
+                alt={isMedia(event.picture) ? event.picture.alt ?? '' : ''}
+                width={600}
+                height={500}
+                className="object-cover"
+              />
             </div>
-            <div className="space-y-6">
-              <div className="relative w-full aspect-video overflow-hidden rounded-lg">
-                <Image
-                  src={event.picture.url ?? ''}
-                  alt={event.picture.alt}
-                  width={600}
-                  height={500}
-                  className="object-cover"
-                />
-              </div>
-              <div className="prose dark:prose-invert max-w-none">
-                <p className="text-lg leading-relaxed">
-                  {event.description}
-                </p>
-              </div>
+            <div className="prose dark:prose-invert max-w-none">
+              <p className="text-lg leading-relaxed">{event.description}</p>
             </div>
           </div>
-        ))}
+        </div>
+      ))}
     </div>
-    );
+  );
 }

src/app/(app)/Components/projects/project-groups.tsx

@@ -1,13 +1,17 @@
 'use client';
 
-import { Category } from "@/payload-types";
+import {Category, Media} from "@/payload-types";
 import Image from 'next/image'
 import Link from 'next/link'
 
 interface ProjectGroupsProps {
     categories: Category[];
 }
 
+const isMedia = (image: number | Media): image is Media => {
+  return (image as Media).url !== undefined;
+};
+
 export default function ProjectGroups(props: ProjectGroupsProps) {
     console.log(props.categories);
     return (
@@ -16,8 +20,8 @@ export default function ProjectGroups(props: ProjectGroupsProps) {
                 {props.categories.map((category, index) => (
                     <Link key={index} href={`/projektek/${category.id}`} className="block relative overflow-hidden rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 ease-in-out group" >
                         <Image
-                        src={category.image.url ?? ''}
-                        alt={category.image.alt}
+                        src={isMedia(category.image) ? category.image.url ?? '' : ''}
+                        alt={isMedia(category.image) ? category.image.alt ?? '' : ''}
                         width={300}
                         height={200}
                         className="w-full h-auto object-cover"
@@ -32,4 +36,4 @@ export default function ProjectGroups(props: ProjectGroupsProps) {
             </div>
         </div>
     );
-}
+}

src/app/(app)/contact/page.tsx

@@ -6,28 +6,20 @@ import Link from "next/link";
 
 import dynamic from 'next/dynamic';
 import Form from "@/app/(app)/Components/Form";
+import PageTitle from "@/app/(app)/Components/PageTitle";
 
 // Dinamikus importálás: térkép csak a böngészőben jelenik meg
 const Map = dynamic(() => import('@/app/(app)/Components/Map'), { ssr: false });
 
-
 export default function Page() {
     return (
         <div className="min-h-screen text-zinc-100 py-12 px-4 sm:px-6 lg:px-8 relative overflow-hidden">
-            <div className="absolute top-0 right-0 w-1/3 h-1/3 bg-gradient-radial from-zinc-800 to-transparent opacity-20 blur-3xl"></div>
-            <div className="max-w-7xl mx-auto">
-                <div className="mb-12">
-                    <div className="flex items-center gap-4 mb-4">
-                        <h1 className="text-4xl font-bold tracking-tight text-zinc-100">
-                            Elérhetőség
-                        </h1>
-                        <div className="flex-grow h-1 bg-gradient-to-r from-zinc-700 to-zinc-900"></div>
-                    </div>
-                    <div className="w-20 h-1 bg-zinc-600"></div>
-                </div>
+            <PageTitle title={"Kapcsolat"} />
 
-                <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 relative z-10 h-full items-stretch">
-                    <ContactInfo />
+                <div className="grid grid-rows-[auto] lg:grid-cols-2 gap-12 relative z-10 h-full items-stretch">
+                    <div className="h-auto">
+                        <ContactInfo />
+                    </div>
                     <div className="order-3 lg:order-2">
                         <h2 className="text-2xl font-semibold mb-4 text-zinc-100">Műterem</h2>
                         <div className="space-y-2 text-zinc-300">
@@ -39,11 +31,12 @@ export default function Page() {
                     <div className="order-2 lg:order-2">
                         <Form />
                     </div>
-                    <Link className="space-y-8 h-full order-4 lg:order-4" href={"https://maps.app.goo.gl/bhmBaitSa5hAVXu69"} target="_blank">
-                        <Map />
-                    </Link>
+                    <div className="order-4 lg:order-4 w-full h-64 lg:h-auto">
+                        <Link href={"https://maps.app.goo.gl/bhmBaitSa5hAVXu69"} target="_blank">
+                            <Map />
+                        </Link>
+                    </div>
                 </div>
             </div>
-        </div>
     )
 }