Adjust Prague component on the homepage

Author: clytaemnestra

src/assets/prague2.jpg

@@ -2,62 +2,65 @@
 import Button from "@ui/Button.astro";
 import { Title } from "@components/typography/title";
 import { Image } from "astro:assets";
-import pragueImage from "@assets/prague.png";
+import pragueImage from "@assets/prague2.jpg";
 import Logo from "@assets/prague.svg";
+import Headline from "@ui/Headline.astro";
 ---
 
-<div class="mt-12 px-6 pb-32 overflow-visible">
-  <article class="lg:grid gap-12 grid-cols-2">
-    <div class="relative hidden lg:block">
-      <Image
-        src={pragueImage}
-        class="w-full h-auto border-4 border-white rounded-lg shadow-lg"
-        alt="Beautiful view of Prague"
-        width={1200}
-        height={900}
-      />
-    </div>
-    <div class="flex flex-col justify-center">
-      <Title level={2}>Prague</Title>
-      <div
-        class:list={[
-          "mb-4 prose prose-xl",
-          "prose-h1:text-text prose-headings:font-title",
-          "prose-headings:text-text",
-        ]}
-      >
-        While we are getting the conference ready for you,
-        why don't you take a look at the beautiful city of Prague?
-      </div>
-      <div class="space-x-4 mb-5">
-        <Button url="/where"> Where is EuroPython? </Button>
-      </div>
-      <div class="space-x-12">
-        <Button url="/explore"> Explore Prague </Button>
-      </div>
-    </div>
-  </article>
+<div class="mt-12">
+  <Headline id="keynoters" title="Prague & Venue" />
 </div>
 
+<article class="lg:grid gap-12 grid-cols-2 items-center">
+  <div class="relative hidden lg:block">
+    <Image
+      src={pragueImage}
+      class="w-full h-auto border-4 border-white rounded-lg shadow-lg"
+      alt="Beautiful view of Prague"
+      width={1200}
+      height={900}
+    />
+  </div>
+
+  <div>
+    <p class="mt-4 mb-8">
+      EuroPython 2025 returns to one of Europe’s most picturesque cities! 
+      Join us at the Prague Congress Centre, just steps away from the 
+      historic Vyšehrad Castle and its scenic views of the city. 
+    </p>
+
+  <div class="flex w-full justify-evenly items-center">
+    <Button url="/explore">About Prague</Button>
+    <Button url="/where">About Venue</Button>
+  </div>
+
+  </div>
+</article>
+
+
 <div class="city full-bleed" id="one">
   <Logo />
 </div>
 
 <style>
-  article {
-    position: relative;
-    top: 20vh;
-    margin-top: -20vh;
-  }
-  .city {
-    position: relative;
-    top:0;
-    width: 100vw;
-  }
-  .city svg {
-    width: 100vw;
-    position: relative;
-    bottom: -4px;
-    z-index: -1;
-  }
+article {
+  position: relative;
+  top: 20vh;
+  margin-top: -20vh;
+  z-index: 10; 
+}
+
+.city {
+  position: relative;
+  top: 0;
+  width: 100vw;
+}
+
+.city svg {
+  width: 100vw;
+  position: relative;
+  bottom: -4px;
+  z-index: -1; 
+}
+
 </style>

src/components/hero-section/prague3.jpg

@@ -4,9 +4,9 @@ subtitle: Everything you need to know about traveling to, getting around, and en
 ---
 
 import { Image } from "astro:assets";
-import venueImage from "./images/prague.jpg";
+import venueImage from "./images/prague3.jpg";
 
-# Prague Exploration Tips
+# Prague Tips
 
 <Image src={venueImage} width="1200" alt="" />
 

src/components/sections/prague.astro

@@ -38,15 +38,15 @@
       ]
     },
     {
-      "name": "Venue & Prague",
+      "name": "Prague & Venue",
       "items": [
         {
-          "name": "Venue",
-          "path": "/venue"
+          "name": "Prague",
+          "path": "/explore"
         },
         {
-          "name": "Prague",
-          "path": "/prague"
+          "name": "Venue",
+          "path": "/where"
         }
       ]
     },