use new translation key

Co-authored-by: Petter Sæterøy <potetmos1@users.noreply.github.com>

astro.config.mjs

@@ -1,13 +1,11 @@
 // @ts-check
-import { defineConfig } from 'astro/config';
+import { defineConfig } from "astro/config";
 import tailwindcss from "@tailwindcss/vite";
 
-
 import react from "@astrojs/react";
 
-
 // https://astro.build/config
 export default defineConfig({
-  vite: {    plugins: [tailwindcss()],  },
+  vite: { plugins: [tailwindcss()] },
   integrations: [react()],
-});
+});

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "solar-star",
+  "name": "studio-2025",
   "type": "module",
   "version": "0.0.1",
   "scripts": {

public/favicon.svg

@@ -1,9 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
-    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
-    <style>
-        path { fill: #000; }
-        @media (prefers-color-scheme: dark) {
-            path { fill: #FFF; }
-        }
-    </style>
-</svg>

src/components/About.astro

@@ -1,15 +1,19 @@
 ---
-import { translations } from '../data/i18n.js';
+import { translations, type Lang } from '@data/i18n';
-const { lang = 'no' } = Astro.props;
+import { Image } from 'astro:assets';
+import benker from '@assets/studioBenker.png';
+const { lang = 'no' } = Astro.props as { lang?: Lang };
 const t = translations[lang].about;
 ---
 
-<main class="flex gap-8 flex-col">
+<main class="flex gap-8 flex-col max-w-prose">
   <h1 class="text-4xl font-bold">{t.title}</h1>
-  <div class="flex gap-2 text-lg max-w-prose flex-col">
+  <div class="flex gap-2 text-lg flex-col">
     <p>{t.p1}</p>
     <p>{t.p2}</p>
     <p>{t.p3}</p>
     <p>{t.p4}</p>
+    <Image src={benker} alt="Studio Benker" class="place-self-center w-full" width={600} height={400} loading="eager" /> 
+    <p set:html={t.p5}></p>
   </div>
 </main>

src/components/FAQ.astro

@@ -1,14 +1,14 @@
 ---
-import { translations } from '../data/i18n.js';
+import { translations, type Lang } from '@data/i18n';
-const { lang = 'no' } = Astro.props;
+const { lang = 'no' } = Astro.props as { lang?: Lang };
 const t = translations[lang].faq;
 ---
 
-<section class="flex flex-col gap-4">
+<section class="flex flex-col gap-6 max-w-prose">
-    <h2 class="text-xl font-bold">{t.title}</h2>
+    <h2 class="text-2xl font-bold">{t.title}</h2>
-    <ul class="flex flex-col gap-2">
+    <ul class="flex flex-col gap-4">
         <li>
-            <strong>{t.q1} </strong>
+            <strong>{t.q1}</strong>
             <p set:html={t.a1}></p>
         </li>
         <li>

src/components/Footer.astro

@@ -2,32 +2,20 @@
 import { Image } from 'astro:assets';
 import logo from '@assets/logo.png';
 import DNS  from '@assets/DNS-logo-hvit.png';
-import { FaFacebook, FaInstagram, FaTiktok } from 'react-icons/fa';
+import { translations, type Lang } from '@data/i18n';
-import { translations } from '../data/i18n.js';
+import Links from '@components/Links.astro';
-const { lang = 'no' } = Astro.props;
+const { lang = 'no' } = Astro.props as { lang?: Lang };
 const t = translations[lang].footer;
 ---
-<footer class="flex items-center justify-between bg-red-900 text-white py-16 px-8 mt-20">
+
-    <div class="flex gap-2 items-center justify-center">
+<footer class="flex items-center lg:justify-between justify-center bg-accent text-white py-16 px-18 mt-20">
-        <Image src={logo} alt={t.org} class="hero-logo" width={48} height={48}/>
+    <div class="gap-4 items-center justify-center hidden lg:flex">
-        <p>{t.org}</p>
+        <Image src={logo} alt={t.org} class="hero-logo" width={64} height={64} loading="lazy" />
+        <p class="text-white text-2xl">{t.org}</p>
     </div>
-    <div class="flex gap-2 items-center justify-center">
+    <div class="flex gap-6 items-center justify-center flex-col text-center">
-        <Image src={DNS} alt={t.dnsAlt} class="hero-logo" width={169} height={169}/>
+        <Image src={DNS} alt={t.dnsAlt} class="hero-logo" width={200} height={200} loading="lazy" />
-    <div class="flex flex-col items-center justify-center gap-2">
         <address>{t.address}</address>
-        <div>
+        <Links lang={lang} class="text-3xl" />
-            <div class="flex gap-4">
-                <a href="https://www.facebook.com/events/692300293586085" target="_blank" rel="noopener noreferrer" aria-label="Facebook">
-                    <FaFacebook class="text-white text-2xl hover:text-gray-300" />
-                </a>
-                <a href="https://www.instagram.com/studentfestivalenioslo/" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
-                    <FaInstagram class="text-white text-2xl hover:text-gray-300" />
-                </a>
-                <a href="https://www.tiktok.com/@studentersamfund" target="_blank" rel="noopener noreferrer" aria-label="TikTok">
-                    <FaTiktok class="text-white text-2xl hover:text-gray-300" />
-                </a>
-            </div>
-        </div>
     </div>
 </footer>

src/components/Hero.astro

@@ -1,12 +1,12 @@
 ---
 import logo from '@assets/logo.png';
 import { Image } from 'astro:assets';
-import { translations } from '../data/i18n.js';
+import { translations, type Lang } from '@data/i18n';
-const { lang = 'no' } = Astro.props;
+const { lang = 'no' } = Astro.props as { lang?: Lang };
 const t = translations[lang].hero;
 ---
 
-<section class="flex flex-col items-center justify-center h-[75vh] gap-4">
+<section class="flex flex-col items-center justify-center h-[50vh] gap-4">
-    <h1 class="text-4xl">{t.title}</h1>
+    <h1 class="text-4xl font-extrabold text-center">{t.title}</h1>
-    <Image src={logo} alt={t.alt} width={250} height={250}/>
+    <Image src={logo} alt={t.alt} width={250} height={250} loading="eager" />
 </section>

src/components/Links.astro

@@ -1,11 +1,17 @@
 ---
-import { translations } from '../data/i18n.js';
+import { FaFacebook, FaInstagram, FaTiktok } from 'react-icons/fa';
-const { lang = 'no' } = Astro.props;
+const { href, class: className, ...props } = Astro.props;
-const links = translations[lang].links;
+
 ---
 
-<div class="flex gap-4 justify-center items-center">
+<div class:list={["flex gap-6 justify-center items-center", className]} {...props}>
-    {links.map(link => (
+    <a href="https://www.facebook.com/events/692300293586085" target="_blank" rel="noopener noreferrer" aria-label="Facebook">
-        <a href={link.href} target="_blank" rel="noopener noreferrer">{link.text}</a>
+        <FaFacebook className=`${className} hover:text-slottsblaa` />
-    ))}
+    </a>
+    <a href="https://www.instagram.com/studentfestivalenioslo/" target="_blank" rel="noopener noreferrer" aria-label="Instagram" class="hover:text-griserosa">
+        <FaInstagram className=`${className} hover:text-slottsblaa` />
+    </a>
+    <a href="https://www.tiktok.com/@studentersamfund" target="_blank" rel="noopener noreferrer" aria-label="TikTok" class="hover:text-dyp-tegl">
+        <FaTiktok className=`${className} hover:text-slottsblaa` />
+    </a>
 </div>

src/components/Nav.astro

@@ -1,10 +1,11 @@
 ---
-import { translations } from '../data/i18n.js';
+import NavLink from '@components/NavLink.astro';
-const { lang = 'no' } = Astro.props;
+import { translations, type Lang } from '@data/i18n';
+const { lang = 'no' } = Astro.props as { lang?: Lang };
 const t = translations[lang].nav;
 const { pathname } = Astro.url;
 
-function getLangSwitchPath(path, lang) {
+function getLangSwitchPath(path: string, lang: string) {
   if (lang === 'no') {
     if (path === '/') return '/en/';
     if (path.startsWith('/en/')) return path.replace('/en/', '/');
@@ -18,32 +19,15 @@ function getLangSwitchPath(path, lang) {
 
 const langSwitchPath = getLangSwitchPath(pathname, lang);
 ---
-<nav class="flex justify-between items-center px-10 py-4 bg-accent mb-4">
+<nav class="flex justify-center lg:justify-between items-center px-10 py-6 bg-accent mb-4 whitespace-nowrap">
-    <h1 class="text-xl font-bold text-white">
+    <h1 class="text-xl font-bold text-white hover:no-underline hidden lg:block">
-        <a href={lang === 'en' ? '/en/' : '/'}>{t.title}</a>
+        <a href={lang === 'en' ? '/en/' : '/'} class="hover:no-underline">{t.title}</a>
     </h1>
-    <ul class="flex space-x-4 text-white">
+    <ul class="flex space-x-6 text-betongraa">
-        <li><a href={lang === 'en' ? '/en/' : '/'}>{t.home}</a></li>
+        <NavLink href={lang === 'en' ? '/en/' : '/'}>{t.home}</NavLink>
-        <li><a href={lang === 'en' ? '/en/program' : '/program'}>{t.program}</a></li>
+        <NavLink href={lang === 'en' ? '/en/program' : '/program'}>{t.program}</NavLink>
-        <li><a href="https://forms.gle/PvEh37nvRyicLFXn6" target="_blank">{t.volunteer}</a></li>
+        <NavLink href="https://forms.gle/PvEh37nvRyicLFXn6" target="_blank">{t.volunteer}</NavLink>
-        <li><a href={lang === 'en' ? '/en/about' : '/about'}>{t.about}</a></li>
+        <NavLink href={lang === 'en' ? '/en/about' : '/about'}>{t.about}</NavLink>
-        <li>
+        <NavLink href={langSwitchPath} noActive class="bg-gyllen-beige text-svart px-3 py-1 rounded hover:bg-slottsblaa font-bold">{t.langSwitch}</NavLink>
-            <a href={langSwitchPath} class="ml-4 bg-blue-500 text-white px-3 py-1 rounded">
-                {t.langSwitch}
-            </a>
-        </li>
     </ul>
-</nav>
+</nav>
-
-<style>
-  nav a {
-    padding: 0.5em 0.5em;
-    color: var(--text);
-    border-bottom: 4px solid transparent;
-    text-decoration: none;
-  }
-  nav a.active {
-    text-decoration: none;
-    border-bottom-color: var(--accent);
-  }
-</style>

src/components/NavLink.astro

@@ -0,0 +1,18 @@
+---
+const { href, class: className, noActive = false, ...props } = Astro.props;
+const pathname = Astro.url.pathname.replace(import.meta.env.BASE_URL, "");
+const subpath = pathname.match(/[^\/]+/g);
+
+const normalize = (str: string) => str.replace(/^\/+/, "");
+const isActive = !noActive && (
+  normalize(href) === normalize(pathname) ||
+  normalize(href) === `en/${normalize(pathname)}` ||
+  normalize(href) === (subpath?.[0] || "") ||
+  (normalize(href) === "en" && normalize(pathname) === "en") ||
+  (normalize(href) === "" && normalize(pathname) === "")
+);
+---
+
+<a href={href} class:list={["hover:text-white border-b-4 border-b-transparent hover:border-b-slottsblaa no-underline p-2 flex items-center text-center", className, { active: isActive }]} {...props}>
+  <slot />
+</a>

src/components/Program.astro

@@ -1,30 +1,48 @@
 ---
-import { translations } from '../data/i18n.js';
+import { translations, type Lang } from '@data/i18n';
-const { lang = 'no', data } = Astro.props;
+const { lang = 'no', data } = Astro.props as { lang?: Lang, data: any };
 const t = translations[lang].program;
-const currentDate = new Date().toLocaleDateString(lang === 'en' ? 'en-GB' : 'nb-NO', {
+
-  weekday: 'long',
+type ProgramItem = {
-  year: 'numeric',
+  time: string;
-  month: 'long',
+  event: string;
-  day: 'numeric'
+  price?: string | null;
-});
+  cost?: string | null;
+  url?: string;
+};
+
+const convertDate = (date: string | Date) => {
+  let d = date;
+  if (!(d instanceof Date)) {
+    d = new Date(d);
+  }
+  return d.toLocaleDateString(lang === 'en' ? 'en-GB' : 'nb-NO', {
+    weekday: 'long',
+    month: 'long',
+    day: 'numeric'
+  });
+};
 ---
+
 {data ? (
-  <div class="flex gap-4 flex-col">
+  <div class="flex items-center justify-between flex-col gap-8">
-    <div class="flex items-center justify-between">
+    <h1 class="font-bold text-3xl text-center w-full">{t.today}</h1>
-      <h2 class="font-bold text-xl">{t.today}</h2>
+    <p class="font-bold text-2xl text-center w-full">{convertDate(new Date())}</p>
-      <p>{currentDate}</p>
+  </div>
-    </div>
+  <div class="flex gap-12 flex-wrap justify-center items-stretch">
-    {Object.entries(data).map(([dayName, items]) => (
+    {Object.entries(data).map(([date, items]) => (
-      <div class="day">
+      <div id="program-list" class="w-125 p-6 border-1 border-white rounded-2xl even:bg-slottsblaa even:text-white bg-gyllen-beige flex flex-col gap-2">
-        <h2>{dayName}</h2>
+        <h2 class="font-bold text-xl">{convertDate(date)}</h2>
         <ul>
-          {items.map((item) => {
+          {(items as ProgramItem[]).map((item) => {
             const price = item.price || item.cost;
             return (
-              <li class="item">
+              <li class="flex justify-between">
-                {item.time} - {item.event} - {item.url ? (
+                <p>
-                  <a href={item.url} target="_blank" rel="noopener noreferrer">{price}</a>
+                {item.time} - {item.event}
+                </p>
+                {item.url ? (
+                  <a href={item.url} target="_blank" rel="noopener noreferrer" class="text-right">{price}</a>
                 ) : (
                   price
                 )}
@@ -35,25 +53,15 @@ const currentDate = new Date().toLocaleDateString(lang === 'en' ? 'en-GB' : 'nb-
       </div>
     ))}
   </div>
+  <div class="flex justify-center">
+    <p class="font-bold text-xl text-center w-full">
+      <a href="https://neuf.no/arrangementer" class="text-gyllen-oransje hover:text-slottsblaa hover:underline" target="_blank" rel="noopener noreferrer">{t.programMore}</a>
+    </p>
+  </div>
 ) : (
   <div>No program data available.</div>
 )}
 
 <style>
-.day {
+
-  margin-bottom: 20px;
-  padding: 10px;
-  border: 1px solid #ccc;
-  border-radius: 5px;
-}
-.day:nth-child(odd) {
-  background-color: #F8BC90;
-}
-.day:nth-child(even) {
-  background-color: #0A0F6D;
-  color: #fff;
-}
-.item {
-  margin: 5px 0;
-}
 </style>

src/components/Today.astro

@@ -1,6 +0,0 @@
----
-const currentDate = new Date().toLocaleDateString();
----
-<div>
-    <p> {currentDate}</p>
-</div>

src/components/Vors.astro

@@ -1,17 +1,20 @@
 ---
-const videoUrl = "https://www.youtube.com/watch?v=t7T4RPBpTVY";
+import { translations, type Lang } from '@data/i18n';
-import { translations } from '../data/i18n.js';
+const { lang = 'no' } = Astro.props as { lang?: Lang };
-const { lang = 'no' } = Astro.props;
 const t = translations[lang].vors;
+
+const videoUrl = "https://www.youtube.com/watch?v=t7T4RPBpTVY";
 ---
 
-<div style="width: 560px; height: 315px;">
+<div class="self-center flex flex-col items-center p-4 gap-4">
-    <div class="mt-4 text-xl mb-2">
+    <p>
         {t.text}
-    </div>
+    </p>
     <iframe 
-        width="560" 
+        loading="lazy"
-        height="315" 
+        class="max-w-full"
+        width="640"
+        height="480" 
         src={videoUrl.replace("watch?v=", "embed/")} 
         title="YouTube video player" 
         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 

src/data/en-program.json

@@ -1,16 +1,16 @@
 {
-  "Monday 11th": [
+  "2025-08-11": [
     { "time": "18:00", "event": "Opening party with DJ", "cost": "free" },
     { "time": "21:00", "event": "Sing-a-long karaoke", "cost": "free" },
     { "time": "22:00", "event": "Silent Disco", "cost": "free" }
   ],
-  "Tuesday 12th": [
+  "2025-08-12": [
     { "time": "18:00", "event": "Barbecue", "cost": "free" },
     { "time": "19:00", "event": "Qualified Guessing Quiz", "cost": "free" },
     { "time": "21:00", "event": "Live Karaoke", "cost": "free" },
     { "time": "22:00", "event": "Silent Disco", "cost": "free" }
   ],
-  "Wednesday 13th": [
+  "2025-08-13": [
     {
       "time": "18:00",
       "event": "KKK: Comic Comedian Evening",
@@ -21,7 +21,7 @@
     { "time": "21:00", "event": "Karaoke", "cost": "free" },
     { "time": "22:00", "event": "Silent Disco", "cost": "free" }
   ],
-  "Thursday 14th": [
+  "2025-08-14": [
     {
       "time": "18:00",
       "event": "Drunk Impro 4K, VRØVL",
@@ -32,7 +32,7 @@
     { "time": "20:00", "event": "Live Karaoke", "cost": "free" },
     { "time": "22:00", "event": "Silent Disco", "cost": "free" }
   ],
-  "Friday 15th": [
+  "2025-08-15": [
     { "time": "21:00", "event": "Sing-a-long karaoke", "cost": "free" },
     { "time": "22:00", "event": "Afterparty", "cost": "free" },
     { "time": "22:00", "event": "Silent Disco", "cost": "free" }

src/data/i18n.ts

@@ -5,7 +5,7 @@ export const translations = {
       program: "Program",
       volunteer: "Bli frivillig",
       about: "Om",
-      langSwitch: "Norsk / English",
+      langSwitch: "English",
       title: "STUDiO 2025",
     },
     hero: {
@@ -31,22 +31,14 @@ export const translations = {
       p2: "Det blir sosiale og spennende arrangementer hver dag! Festivalen er for alle nye og gamle studenter i Oslo. Opplev høydepunktet i semesteret - ta med fadderbarna eller vennegjengen, eller kom alene og møt nye venner.",
       p3: "Ikke gå glipp av den største studiekickoffen i Oslo!",
       p4: "Flere av arrangementene våre er gratis, og alt er ID 18+.",
+      p5: 'Dersom du ønsker å lære mer om historien til Studio, samt Det Norske Studentersamfund kan du leser mer på <a href="https://viteboka.studentersamfundet.no/Studentfestivalen_i_Oslo">Viteboka</a>',
     },
-    links: [
-      { href: "https://www.neuf.no", text: "Chateau Neuf" },
-      { href: "https://forms.gle/PvEh37nvRyicLFXn6", text: "Bli frivillig!" },
-      {
-        href: "https://www.instagram.com/studentfestivalenioslo/",
-        text: "Instagram",
-      },
-      { href: "https://www.facebook.com/studentfestivalen", text: "Facebook" },
-      { href: "https://www.tiktok.com/@studentersamfund", text: "TikTok" },
-    ],
     program: {
       today: "Hva skjer i dag?",
+      programMore: "For arrangementer etter Studio trykk her",
     },
     vors: {
-      text: "Sett på låta for litt stemning før dere kommer🔥",
+      text: "Sett på låta for litt stemning før dere kommer 🔥",
     },
     footer: {
       address: "Slemdalsveien 15, 0369 Oslo",
@@ -58,22 +50,22 @@ export const translations = {
     nav: {
       home: "Home",
       program: "Program",
-      volunteer: "Become a volunteer",
+      volunteer: "Volunteer",
       about: "About",
-      langSwitch: "Norsk / English",
+      langSwitch: "Norsk",
       title: "STUDiO 2025",
     },
     hero: {
-      title: "Student Festival in Oslo 2025",
+      title: "The Student Festival in Oslo 2025",
-      alt: "Student Festival in Oslo Logo",
+      alt: "The Student Festival in Oslo Logo",
     },
     faq: {
       title: "Frequently Asked Questions",
-      q1: "Where is the festival held?",
+      q1: "Where is the festival being held?",
       a1: 'At <a href="https://neuf.no/praktisk#adkomst">Chateau Neuf</a>, Majorstuen, Oslo',
       q2: "Who is the festival for?",
       a2: "All new and returning students, but the events are open to everyone who wants to join.",
-      q3: "Does it cost money to participate?",
+      q3: "Does it cost money?",
       a3: "Free entry every day and almost all events are free. Only 2 events require a ticket.",
       q4: "Do I need a student ID to enter?",
       a4: "No, but general identification is required.",
@@ -86,25 +78,14 @@ export const translations = {
       p2: "There will be social and exciting events every day! The festival is for all new and returning students in Oslo. Experience the highlight of the semester - bring your buddy group or friends, or come alone and meet new people.",
       p3: "Don't miss the biggest student kickoff in Oslo!",
       p4: "Many of our events are free, and everything is 18+.",
+      p5: 'If you want to learn more about the history of Studio, as well as The Norwegian Student Society, you can read more on <a href="https://viteboka.studentersamfundet.no/Studentfestivalen_i_Oslo">Viteboka</a>',
     },
-    links: [
-      { href: "https://www.neuf.no", text: "Chateau Neuf" },
-      {
-        href: "https://forms.gle/PvEh37nvRyicLFXn6",
-        text: "Become a volunteer!",
-      },
-      {
-        href: "https://www.instagram.com/studentfestivalenioslo/",
-        text: "Instagram",
-      },
-      { href: "https://www.facebook.com/studentfestivalen", text: "Facebook" },
-      { href: "https://www.tiktok.com/@studentersamfund", text: "TikTok" },
-    ],
     program: {
       today: "What's happening today?",
+      programMore: "For events after Studio click here",
     },
     vors: {
-      text: "Play the song to get in the mood before you arrive🔥",
+      text: "Play the song to get in the mood before you arrive 🔥",
     },
     footer: {
       address: "Slemdalsveien 15, 0369 Oslo",
@@ -112,4 +93,6 @@ export const translations = {
       dnsAlt: "Logo for the Norwegian Student Society",
     },
   },
-};
+} as const;
+
+export type Lang = keyof typeof translations;

src/data/program.json

@@ -1,10 +1,10 @@
 {
-  "Mandag 11. august": [
+  "2025-08-11": [
-    { "time": "18:00", "event": "Aapningsfest med DJ", "price": "gratis" },
+    { "time": "18:00", "event": "Åpningsfest med DJ", "price": "gratis" },
     { "time": "21:00", "event": "Allsangkaraoke", "price": "gratis" },
     { "time": "22:00", "event": "Silent Disco", "price": "gratis" }
   ],
-  "Tirsdag 12. august": [
+  "2025-08-12": [
     { "time": "18:00", "event": "Grillfest", "price": "gratis" },
     {
       "time": "19:00",
@@ -14,7 +14,7 @@
     { "time": "21:00", "event": "Live karaoke", "price": "gratis" },
     { "time": "22:00", "event": "Silent Disco", "price": "gratis" }
   ],
-  "Onsdag 13. august": [
+  "2025-08-13": [
     {
       "time": "18:00",
       "event": "KKK: Komisk Komedie-Kveld",
@@ -25,10 +25,10 @@
     { "time": "21:00", "event": "Karaoke", "price": null },
     { "time": "22:00", "event": "Silent Disco", "price": null }
   ],
-  "Torsdag 14. august": [
+  "2025-08-14": [
     {
       "time": "18:00",
-      "event": "Drunk Impro 4K, VROVL",
+      "event": "Drunk Impro 4K, VRØVL",
       "price": "billetter ute!",
       "url": "https://www.ticketmaster.no/event/studio-drunk-impro-i-storsalen-med-4k-billetter/912660512"
     },
@@ -36,7 +36,7 @@
     { "time": "20:00", "event": "Live karaoke", "price": "gratis" },
     { "time": "22:00", "event": "Silent Disco", "price": "gratis" }
   ],
-  "Fredag 15. august": [
+  "2025-08-15": [
     { "time": "21:00", "event": "Allsangkaraoke", "price": "gratis" },
     { "time": "22:00", "event": "Afterparty", "price": "gratis" },
     { "time": "22:00", "event": "Silent Disco", "price": "gratis" }

src/layouts/Layout.astro

@@ -10,13 +10,13 @@ const { lang = 'no' } = Astro.props;
 	<head>
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<link rel="icon" type="image/svg+xml" href="/logo.png" />
 		<meta name="generator" content={Astro.generator} />
 		<title>STUDiO 2025 - Studentfestivalen i Oslo</title>
 	</head>
-	<body class="grid grid-rows-[auto_1fr_auto] jusify-center">
+	<body class="grid grid-rows-[auto_1fr_auto] jusify-center gap-12">
 		<Nav lang={lang} />
-		<div class="max-w-7xl grid place-self-center gap-8">
+		<div id="content" class="max-w-7xl grid place-self-center gap-8 px-4">
 			<slot />
 		</div>
 		<Footer lang={lang} />

src/pages/about.astro

@@ -1,8 +1,8 @@
 ---
 import Layout from '@layouts/Layout.astro';
-import About from '@components/About.astro';
+import AboutComponent from '@components/About.astro';
 ---
 
 <Layout lang="no">
-    <About lang="no" />
+    <AboutComponent lang="no" />
 </Layout>

src/pages/en-program.astro

@@ -1,28 +0,0 @@
----
-import Layout from '@layouts/Layout.astro';
-import Program from '@components/Program.astro';
-import data from '../data/en-program.json';
----
-
-<Layout lang="en">
-  <Program lang="en" data={data} />
-</Layout>
-
-<style>
-            .day {
-                margin-bottom: 20px;
-                padding: 10px;
-                border: 1px solid #ccc;
-                border-radius: 5px;
-            }
-            .day:nth-child(odd) {
-                background-color: #F8BC90;
-            }
-            .day:nth-child(even) {
-                background-color: #0A0F6D;
-                color: #fff; /* Optional: Adjust text color for better readability */
-            }
-            .item {
-                margin: 5px 0;
-            }
-        </style>

src/pages/en/about.astro

@@ -1,8 +1,8 @@
 ---
 import Layout from '@layouts/Layout.astro';
-import About from '@components/About.astro';
+import AboutComponent from '@components/About.astro';
 ---
 
 <Layout lang="en">
-    <About lang="en" />
+    <AboutComponent lang="en" />
 </Layout> 

src/pages/en/index.astro

@@ -9,7 +9,7 @@ import Vors from '@components/Vors.astro';
 
 <Layout lang="en">
 	<Hero lang="en" />
-	<Links lang="en" />
+	<Links lang="en" class="text-5xl text-black" />
 	<Program lang="en" />
 	<FAQ lang="en" />
 	<Vors lang="en" />

src/pages/en/program.astro

@@ -1,9 +1,9 @@
 ---
 import Layout from '@layouts/Layout.astro';
-import Program from '@components/Program.astro';
+import ProgramComponent from '@components/Program.astro';
-import data from '../../data/en-program.json';
+import data from '@data/en-program.json';
 ---
 
 <Layout lang="en">
-  <Program lang="en" data={data} />
+  <ProgramComponent lang="en" data={data} />
 </Layout> 

src/pages/index.astro

@@ -9,7 +9,7 @@ import Vors from '@components/Vors.astro';
 
 <Layout lang="no">
 	<Hero lang="no" />
-	<Links lang="no" />
+	<Links lang="no" class="text-5xl text-black" />
 	<Program lang="no" />
 	<FAQ lang="no" />
 	<Vors lang="no" />

src/pages/program.astro

@@ -1,28 +1,9 @@
 ---
 import Layout from '@layouts/Layout.astro';
-import Program from '@components/Program.astro';
+import ProgramComponent from '@components/Program.astro';
-import data from '../data/program.json';
+import data from '@data/program.json';
 ---
 
 <Layout lang="no">
-  <Program lang="no" data={data} />
+  <ProgramComponent lang="no" data={data} />
 </Layout>
-
-<style>
-            .day {
-                margin-bottom: 20px;
-                padding: 10px;
-                border: 1px solid #ccc;
-                border-radius: 5px;
-            }
-            .day:nth-child(odd) {
-                background-color: #F8BC90;
-            }
-            .day:nth-child(even) {
-                background-color: #0A0F6D;
-                color: #fff; /* Optional: Adjust text color for better readability */
-            }
-            .item {
-                margin: 5px 0;
-            }
-        </style>

src/styles/global.css

@@ -1,10 +1,19 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
+@import url("https://fonts.google.com/specimen/Montserrat?query=montserrat");
+
 @import "tailwindcss";
 
 :root {
-  --font-avenir: "Avenir Next", sans-serif;
+  --font-avenir: "montserrat", sans-serif;
-  --background: #E5E2D7;
+  --accent: #c13131;
-  --text: #333333;
+
-  --accent: #C13131;
+  --dyp-tegl: #720328;
+  --griserosa: #cd96ab;
+  --betongraa: #e5e2d7;
+  --gyllen-oransje: #ff6915;
+  --gyllen-beige: #f8bc90;
+  --slottsblaa: #0a0f6d;
+  --svart: #161516;
 }
 
 @theme {
@@ -12,32 +21,52 @@
   --color-background: var(--background);
   --color-text: var(--text);
   --color-accent: var(--accent);
+
+  --color-dyp-tegl: var(--dyp-tegl);
+  --color-griserosa: var(--griserosa);
+  --color-betongraa: var(--betongraa);
+  --color-gyllen-oransje: var(--gyllen-oransje);
+  --color-gyllen-beige: var(--gyllen-beige);
+  --color-slottsblaa: var(--slottsblaa);
+  --color-svart: var(--svart);
 }
 
 html,
 body {
-		margin: 0;
+  @apply m-0;
-		width: 100%;
+  @apply w-full;
-		height: 100%;
+  @apply h-full;
 }
 
 body {
-    @apply text-lg;
+  @apply bg-betongraa;
-    font-family: var(--font-avenir);
+  font-family: var(--font-avenir);
-    color: var(--color-text);
+  @apply text-svart;
-    background-color: var(--color-background);
+  @apply text-lg;
+  @apply leading-relaxed;
 }
 
-a {
+a.active {
-    color: var(--color-accent);
+  font-weight: bolder;
-    text-decoration: none;
 }
 
-nav a {
+#content a {
-    display: inline-block;
+  @apply text-gyllen-oransje;
-    text-decoration: none;
+}
-  }
+#content a:hover {
- nav a.active {
+  @apply text-slottsblaa;
-    font-weight: bolder;
+  @apply underline;
-    text-decoration: underline;
+}
-  }
+
+#program-list:nth-child(odd) a {
+  @apply text-accent;
+}
+#program-list:nth-child(odd) a:hover {
+  @apply text-dyp-tegl;
+  @apply underline;
+}
+
+#program-list:nth-child(even) a:hover {
+  @apply text-accent;
+  @apply underline;
+}

tsconfig.json

@@ -1,12 +1,7 @@
 {
   "extends": "astro/tsconfigs/strict",
-  "include": [
+  "include": [".astro/types.d.ts", "**/*"],
-    ".astro/types.d.ts",
+  "exclude": ["dist"],
-    "**/*"
-  ],
-  "exclude": [
-    "dist"
-  ],
   "compilerOptions": {
     "jsx": "react-jsx",
     "jsxImportSource": "react",
@@ -14,10 +9,11 @@
     "paths": {
       "@assets/*": ["src/assets/*"],
       "@components/*": ["src/components/*"],
+      "@data/*": ["src/data/*"],
       "@elements/*": ["src/components/elements/*"],
       "@layouts/*": ["src/layouts/*"],
       "@sections/*": ["src/components/sections/*"],
       "@styles/*": ["src/styles/*"]
     }
   }
-}
+}