Add better stars, add page aboue venue, add city photos

src/components/AnimatedStars.astro

@@ -0,0 +1,175 @@
+---
+// Animated starfield background component
+// Creates a twinkling star effect with two layers of stars
+// that move, scale, rotate, and change opacity
+---
+
+<div class="animated-stars">
+  <slot />
+</div>
+
+<style>
+  .animated-stars {
+    position: relative;
+    width: 100%;
+    min-height: 100vh;
+  }
+
+  .animated-stars::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image:
+      radial-gradient(1px 1px at 10% 20%, white, transparent),
+      radial-gradient(1px 1px at 30% 40%, white, transparent),
+      radial-gradient(1px 1px at 50% 60%, white, transparent),
+      radial-gradient(1px 1px at 70% 30%, white, transparent),
+      radial-gradient(1px 1px at 90% 80%, white, transparent),
+      radial-gradient(1px 1px at 15% 70%, white, transparent),
+      radial-gradient(1px 1px at 40% 15%, white, transparent),
+      radial-gradient(1px 1px at 60% 85%, white, transparent),
+      radial-gradient(1px 1px at 85% 50%, white, transparent),
+      radial-gradient(1px 1px at 25% 90%, white, transparent);
+    background-size:
+      200px 200px,
+      250px 250px,
+      300px 300px,
+      180px 180px,
+      220px 220px,
+      280px 280px,
+      240px 240px,
+      260px 260px,
+      290px 290px,
+      210px 210px;
+    background-position:
+      0 0,
+      40px 60px,
+      130px 270px,
+      70px 100px,
+      220px 180px,
+      300px 320px,
+      150px 80px,
+      280px 380px,
+      100px 200px,
+      350px 250px;
+    background-repeat: repeat;
+    animation: twinkle1 45s ease-in-out infinite;
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  .animated-stars::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image:
+      radial-gradient(2px 2px at 20% 15%, rgba(255,255,255,0.8), transparent),
+      radial-gradient(1px 1px at 45% 35%, white, transparent),
+      radial-gradient(1px 1px at 65% 55%, rgba(255,255,255,0.7), transparent),
+      radial-gradient(2px 2px at 80% 25%, white, transparent),
+      radial-gradient(1px 1px at 35% 75%, rgba(255,255,255,0.9), transparent),
+      radial-gradient(1px 1px at 55% 45%, white, transparent);
+    background-size:
+      300px 300px,
+      200px 200px,
+      250px 250px,
+      280px 280px,
+      220px 220px,
+      240px 240px;
+    background-position:
+      0 0,
+      50px 80px,
+      100px 150px,
+      200px 50px,
+      150px 200px,
+      250px 100px;
+    background-repeat: repeat;
+    animation: twinkle2 60s ease-in-out infinite;
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  .animated-stars > :global(*) {
+    position: relative;
+    z-index: 1;
+  }
+
+  @keyframes twinkle1 {
+    0% {
+      opacity: 1;
+      transform: translate(0, 0) scale(1);
+    }
+    15% {
+      opacity: 0.4;
+      transform: translate(25px, -15px) scale(1.1);
+    }
+    30% {
+      opacity: 0.8;
+      transform: translate(-20px, 30px) scale(0.9);
+    }
+    45% {
+      opacity: 0.3;
+      transform: translate(30px, 20px) scale(1.05);
+    }
+    60% {
+      opacity: 0.9;
+      transform: translate(-25px, -25px) scale(0.95);
+    }
+    75% {
+      opacity: 0.5;
+      transform: translate(15px, 35px) scale(1.08);
+    }
+    90% {
+      opacity: 0.7;
+      transform: translate(-30px, -10px) scale(0.92);
+    }
+    100% {
+      opacity: 1;
+      transform: translate(0, 0) scale(1);
+    }
+  }
+
+  @keyframes twinkle2 {
+    0% {
+      opacity: 0.8;
+      transform: translate(0, 0) rotate(0deg);
+    }
+    20% {
+      opacity: 0.3;
+      transform: translate(-30px, 20px) rotate(5deg);
+    }
+    35% {
+      opacity: 0.9;
+      transform: translate(25px, -25px) rotate(-3deg);
+    }
+    50% {
+      opacity: 0.4;
+      transform: translate(-15px, -30px) rotate(7deg);
+    }
+    65% {
+      opacity: 0.7;
+      transform: translate(35px, 15px) rotate(-5deg);
+    }
+    80% {
+      opacity: 0.5;
+      transform: translate(-20px, 28px) rotate(4deg);
+    }
+    100% {
+      opacity: 0.8;
+      transform: translate(0, 0) rotate(0deg);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .animated-stars::before,
+    .animated-stars::after {
+      animation: none;
+    }
+  }
+</style>

src/components/Header.astro

@@ -12,7 +12,7 @@ import links from "@data/links.json";
   id="navbar"
 >
   <div
-    class="container max-w-[1150px] mx-auto px-6 py-2 mt-12 lg:p-2 lg:mt-14 flex items-center justify-between relative z-40 bg-white/80 rounded-full backdrop-blur-md shadow-lg"
+    class="container max-w-[1150px] mx-auto px-6 py-2 mt-4 lg:p-2 lg:mt-6 flex items-center justify-between relative z-40 bg-white/80 rounded-full backdrop-blur-md shadow-lg"
   >
     <input
       type="checkbox"

src/components/header/header-logo.astro

@@ -5,5 +5,5 @@ interface Props {
 ---
 
 <a href="/" class="home-link block min-w-[44px] min-h-[44px]" aria-label="Go to homepage by clicking the logo">
-  <img class="md:block block w-[44px] h-[44px]" src="/EuroPython2025_logo.png" alt="EuroPython logo" />
+  <img class="md:block block w-[44px] h-[44px]" src="/eps-logo.svg" alt="EuroPython Society logo" />
 </a>

src/components/sections/hero/hero.astro

@@ -16,7 +16,7 @@ const action2 = "https://www.youtube.com/watch?v=laSzm-raS5A";
     style=""
   >
     <div class="prose-xl relative z-10 text-center">
-      <div class="grid md:flex items-center space-x-3 p-10 md:mt-0 justify-center">
+      <div class="grid md:flex items-center space-x-3 p-10 pt-32 md:pt-36 justify-center">
         <div class="flex items-center justify-center">
           <img
             class="h-full block md:w-full lg:w-[250px] pr-3"
@@ -40,22 +40,21 @@ const action2 = "https://www.youtube.com/watch?v=laSzm-raS5A";
     </div>
     <!-- First 2x1 Grid -->
     <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mx-6 my-10">
-        <IconWithLabel icon="map-pin" label="Kraków, Poland" />
+        <IconWithLabel icon="map-pin" label="ICE, Kraków, Poland" />
         <IconWithLabel icon="calendar-days" label="13-19 July, 2026" />
     </div>
 
     <!-- Second 2x1 Grid with Action Buttons -->
     <div class="text-center grid grid-cols-1 md:grid-cols-2 gap-4 m-6">
-      <div>
-        <Button secondary url={action1}> Submit your talk! </Button>
+      <div class="btn-outline">
+        <Button outline url={action1} class="!text-white !border-white hover:!bg-white hover:!text-primary"> Submit your talk! </Button>
       </div>
       <div class="btn-outline">
         <Button outline url={action2} class="!text-white !border-white hover:!bg-white hover:!text-primary"> Watch the video (no Rickrolls) </Button>
       </div>
     </div>
   </div>
 
-
   <style>
     .bg-icons {
       min-height: 400px;
@@ -69,7 +68,7 @@ const action2 = "https://www.youtube.com/watch?v=laSzm-raS5A";
       opacity: 0.7;
     }
     .bluebox {
-      background-color: #d4d5e5;
+      background-color: #E8F4F8;
       z-index: -2;
     }
     .bluebox-shift {

src/components/sections/hero/icon-label.astro

@@ -6,7 +6,7 @@ import Icon from "@ui/Icon.astro";
 
 <div class="flex flex-wrap justify-start items-center py-2">
   <div
-    class="w-20 h-20 flex items-center justify-center rounded-full bg-[#D4D5E4] p-2 text-primary"
+    class="w-20 h-20 flex items-center justify-center rounded-full bg-[#E8F4F8] p-2 text-primary"
   >
     <Icon name={icon} size="fa-2x" />
   </div>