add studio shortcut to front page

web/src/components/home/HomePageView.tsx

@@ -13,6 +13,7 @@ import { Pig } from "@/components/general/Pig";
 import { SectionFooter } from "@/components/general/SectionFooter";
 import { SectionHeader } from "@/components/general/SectionHeader";
 import { NewsList } from "@/components/news/NewsList";
+import { StudioShortcut } from "../studio/StudioShortcut";
 
 const HomeFragmentDefinition = graphql(`
   fragment Home on HomePage {
@@ -79,6 +80,7 @@ export function HomePageView({ home, events, news }: HomePageViewProps) {
   return (
     <>
       <main className="site-main index" id="main">
+        <StudioShortcut />
         <FeaturedEvents events={featuredEvents} />
         <UpcomingEvents events={events} />
         <div className="infoBlock">

web/src/components/studio/StudioShortcut.tsx

@@ -0,0 +1,24 @@
+import Link from "next/link";
+import { Icon } from "../general/Icon";
+import styles from "./studioShortcut.module.scss";
+
+export const StudioShortcut = () => {
+  return (
+    <div className={styles.studioShortcut}>
+      <Link href="/studio" className={styles.button}>
+        <img
+          className={styles.logo}
+          src="/assets/graphics/studio-2026/studio-logo-shortcut.svg"
+          alt="STUDiO"
+        />
+        <div className={styles.text}>
+          <span className={styles.heading}>Alt om studentfestivalen i Oslo</span><br />
+          <span>Gratis arrangementer hele uka!</span>
+        </div>
+        <div className={styles.icon}>
+          <Icon type="arrowRight" />
+        </div>
+      </Link>
+    </div>
+  );
+};

web/src/components/studio/studioShortcut.module.scss

@@ -0,0 +1,66 @@
+.studioShortcut {
+  display: flex;
+}
+
+.button {
+  margin: calc(var(--spacing-sitepadding-block) * -1.8) 0 calc(var(--spacing-sitepadding-block) * .8) auto;
+  max-width: 100%;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-m);
+  padding: 0 1.5rem 0 0;
+  border-radius: 10rem;
+  background: #EEA971;
+  color: var(--color-deepBrick);
+  overflow: hidden;
+  text-decoration: none;
+}
+
+.logo {
+  width: 6rem;
+}
+
+.text {
+  line-height: 1.4;
+}
+
+.heading {
+  font-weight: 600;
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  font-size: 1.6rem;
+}
+
+@media (max-width: 800px) {
+  .button {
+    margin: calc(var(--spacing-sitepadding-block) * -1) 0 var(--spacing-sitepadding-block) auto;
+    justify-content: space-between;
+    gap: var(--spacing-s);
+    padding: 0 1rem 0 0;
+  }
+  .logo {
+    width: 4rem;
+  }
+  .text {
+    font-size: var(--font-size-xs);
+  }
+  .icon {
+    font-size: 1rem;
+  }
+}
+
+@media (max-width: 400px) {
+  .button {
+    margin: calc(var(--spacing-sitepadding-block) * -.5) 0 var(--spacing-sitepadding-block) auto;
+    width: 100%;
+  }
+}
+
+@media (min-width: 1800px) {
+  .button {
+    margin: calc(var(--spacing-sitepadding-block) * -1.6) 0 calc(var(--spacing-sitepadding-block) * .5) auto;
+  }
+}