Events

app/(site)/alle-arrangementer/andre-arrangementer/page.tsx

@@ -0,0 +1,7 @@
+import EventPage from '@/components/events/eventPage';
+
+const Event8Page = () => {
+    return <EventPage eventId='8' />;
+};
+
+export default Event8Page;

app/(site)/alle-arrangementer/baerekraftsforedrag/page.tsx

@@ -0,0 +1,7 @@
+import EventPage from '@/components/events/eventPage';
+
+const Event3Page = () => {
+    return <EventPage eventId='3' />;
+};
+
+export default Event3Page;

app/(site)/alle-arrangementer/bcm/page.tsx

@@ -0,0 +1,7 @@
+import EventPage from '@/components/events/eventPage';
+
+const Event1Page = () => {
+    return <EventPage eventId='1' />;
+};
+
+export default Event1Page;

app/(site)/alle-arrangementer/blender/page.tsx

@@ -0,0 +1,7 @@
+import EventPage from '@/components/events/eventPage';
+
+const Event2Page = () => {
+    return <EventPage eventId='2' />;
+};
+
+export default Event2Page;

app/(site)/alle-arrangementer/casebreaker/page.tsx

@@ -0,0 +1,7 @@
+import EventPage from '@/components/events/eventPage';
+
+const Event4Page = () => {
+    return <EventPage eventId='4' />;
+};
+
+export default Event4Page;

app/(site)/alle-arrangementer/hvordan-starte-bedrift-fra-a-til-aa/page.tsx

@@ -0,0 +1,7 @@
+import EventPage from '@/components/events/eventPage';
+
+const Event5Page = () => {
+    return <EventPage eventId='5' />;
+};
+
+export default Event5Page;

app/(site)/alle-arrangementer/idekonkurranse/page.tsx

@@ -0,0 +1,7 @@
+import EventPage from '@/components/events/eventPage';
+
+const Event6Page = () => {
+    return <EventPage eventId='6' />;
+};
+
+export default Event6Page;

app/(site)/alle-arrangementer/mot-en-grunder/page.tsx

@@ -0,0 +1,7 @@
+import EventPage from '@/components/events/eventPage';
+
+const Event7Page = () => {
+    return <EventPage eventId='7' />;
+};
+
+export default Event7Page;

app/(site)/alle-arrangementer/page.tsx

@@ -8,7 +8,7 @@ export default function AllEventsPage() {
     return (
         <main className='bg-gray-900 min-h-screen flex flex-col items-center justify-start'>
             <header>
-                <SectionTitle title='🏆 Våre arrangementer' />
+                <SectionTitle title='Våre arrangementer' />
             </header>
 
             <section className='grid md:grid-cols-3 gap-8 my-8 w-full max-w-5xl'>
@@ -18,7 +18,7 @@ export default function AllEventsPage() {
             </section>
 
             <section>
-                <SectionTitle title='⌛️ Tidligere arrangementer' />
+                <SectionTitle title='Tidligere arrangementer' />
                 <h2 className='text-2xl text-center md:text-4xl mt-4'>Kommer snart....</h2>
                 <p className='mt-2 text-center'> Her vil det stå mer om tidligere arrangementer</p>
             </section>

app/(site)/page.tsx

@@ -58,11 +58,14 @@ export default function Home() {
                 {/** Button to navigate to the events we offer. */}
                 <Button label='Se hvilke arrangementer vi tilbyr' onClick={() => router.push('/alle-arrangementer')} />
 
-              {/** Listing all events if there are any  */}
-              <div className={`flex flex-col md:grid  xl:grid-cols-[repeat(auto-fill,minmax(500px,1fr))] ${events && events.length > 1 ? 'xl:max-w-full' : 'xl:max-w-min'} mx-auto justify-center items-center w-full gap-4 px-5 sm:px-24 md:px-32 mt-10 md:mt-15 transition-all ease-out duration-300 `}>
-                  {events && events.length > 0 ? <EventCardList events={events} /> : <NoEvents />}
-              </div>
-          </main>
+                {/** Listing all events if there are any  */}
+                <div
+                    className={`flex flex-col md:grid  xl:grid-cols-[repeat(auto-fill,minmax(500px,1fr))] ${
+                        events && events.length > 1 ? 'xl:max-w-full' : 'xl:max-w-min'
+                    } mx-auto justify-center items-center w-full gap-4 px-5 sm:px-24 md:px-32 mt-10 md:mt-15 transition-all ease-out duration-300 `}>
+                    {events && events.length > 0 ? <EventCardList events={events} /> : <NoEvents />}
+                </div>
+            </main>
 
             <Footer />
         </div>

components/UI/goToButton.tsx

@@ -0,0 +1,28 @@
+import Link from 'next/link';
+import { FC } from 'react';
+
+interface GoToButtonProps {
+    label: string;
+    href: string;
+    className?: string;
+}
+
+const GoToButton: FC<GoToButtonProps> = ({ label, href, className = '' }) => {
+    return (
+        <Link
+            href={href}
+            passHref
+            className={`inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-900' ${className}`}>
+            {label}
+            <svg xmlns='http://www.w3.org/2000/svg' className='h-6 w-6 inline-block ml-2' fill='currentColor' viewBox='0 0 20 20'>
+                <path
+                    fillRule='evenodd'
+                    d='M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z'
+                    clipRule='evenodd'
+                />
+            </svg>
+        </Link>
+    );
+};
+
+export default GoToButton;

components/events/eventBox.tsx

@@ -1,6 +1,7 @@
 import Image from 'next/image';
 import Link from 'next/link';
 
+// Typescript interface for props passed to the EventBox component
 type EventBoxProps = {
     id: string;
     imageUrl: string;
@@ -9,29 +10,32 @@ type EventBoxProps = {
     link: string;
 };
 
+// This component displays a brief overview of an event (like a card)
 const EventBox: React.FC<EventBoxProps> = ({ imageUrl, title, alt, link }) => {
     return (
-        <div className='flex flex-col items-center py-4 px-2 md:px-10 bg-gray-800 rounded-md shadow-lg max-w-xs mx-16 md:mx-0'>
-            <Image src={imageUrl} alt={alt} width={150} height={150} className='rounded-md mt-6 md:mt-10 mb-4 md:mb-8' />
-
-            <h3 className='mt-2 text-lg md:text-xl text-gray-200 hover:text-gray-400 transition duration-300 text-center w-full'>{title}</h3>
-
-            <Link href={link} passHref>
-                <button className='mt-2 md:mt-4 mb-3 md:mb-5 px-3 md:px-4 py-1 md:py-2 bg-blue-700 text-gray-200 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-900 transition duration-300 flex items-center'>
-                    Les mer
-                    <svg
-                        aria-hidden='true'
-                        className='ml-1 md:ml-2 -mr-0.5 md:-mr-1 w-4 md:w-5 h-4 md:h-5'
-                        fill='currentColor'
-                        viewBox='0 0 20 20'
-                        xmlns='http://www.w3.org/2000/svg'>
-                        <title>Arrow</title>
-                        <path
-                            fillRule='evenodd'
-                            d='M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z'
-                            clipRule='evenodd'></path>
-                    </svg>
-                </button>
+        <div className='group flex flex-col items-center py-4 px-4 md:px-6 bg-gradient-to-br from-blue-400 via-purple-500 to-green-400 rounded-lg shadow-xl transition duration-500 hover:shadow-2xl mx-4 my-4'>
+            <div className='w-32 h-32 md:w-40 md:h-40 bg-white rounded-full p-2 group-hover:rotate-6 transition-transform duration-300'>
+                <Image src={imageUrl} alt={alt} width={150} height={150} className='rounded-full shadow-sm' />
+            </div>
+            <h3 className='text-xl md:text-2xl font-bold text-white mt-4 mb-2 text-center group-hover:text-yellow-300 transition-colors duration-300'>
+                {title}
+            </h3>
+            <Link
+                href={link}
+                passHref
+                className='mt-4 mb-3 px-4 py-2 bg-white text-gray-800 rounded-full font-medium transition duration-300 transform hover:-translate-y-1 hover:bg-opacity-90 flex items-center justify-center w-full shadow-md group-hover:scale-110 group-hover:bg-blue-500 group-hover:text-white'>
+                Les mer
+                <svg
+                    aria-hidden='true'
+                    className='ml-2 -mr-1 w-5 h-5 text-blue-500 group-hover:text-white transition-transform duration-500 hover:rotate-180'
+                    fill='currentColor'
+                    viewBox='0 0 20 20'
+                    xmlns='http://www.w3.org/2000/svg'>
+                    <path
+                        fillRule='evenodd'
+                        d='M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z'
+                        clipRule='evenodd'></path>
+                </svg>
             </Link>
         </div>
     );