Kenzo/Gallus_Pub
2
1
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Event Cards Update und alle links sind Orange, einheitlich auf der ganzen Seite

Browse Source
This commit is contained in:
Selina Erci
2025-07-23 14:56:34 +02:00
parent f356b37c9e
commit f0afa677a0
9 changed files with 171 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/EventsGrid.astro
View File

@ -3,26 +3,28 @@
import HoverCard from "./HoverCard.astro";
interface Event {
image: string;
title: string;
date: Date;
description: string;
image: string;
title: string;
date: string;
description: string;
}
const { events = [], id }: { events?: Event[], id?: string } = Astro.props as { events?: Event[], id?: string };
import '../../styles/components/EventsGrid.css';
const { events = [], id }: { events?: Event[]; id?: string } = Astro.props as {
events?: Event[];
id?: string;
};
import "../../styles/components/EventsGrid.css";
---
<h2 class="section-title">Events</h2>
<section id={id} class="events-gird container">
{events.map((event: Event) => (
<HoverCard
title={event.title}
date={event.date}
description={event.description}
image={event.image}
/>
))}
{
events.map((event: Event) => (
<HoverCard
title={event.title}
date={event.date}
description={event.description}
image={event.image}
/>
))
}
</section>

11
src/components/HoverCard.astro
View File

@ -1,7 +1,7 @@
---
// src/components/HoverCard.astro
import "../../styles/components/HoverCard.css"
const { title, description, image = "", date} = Astro.props;
import "../../styles/components/HoverCard.css";
const { title, description, image = "", date } = Astro.props;
---
<article class="hover-card">
@ -9,13 +9,10 @@ const { title, description, image = "", date} = Astro.props;
<img class="card-image" src={image} alt={title} />
</div>
<h3 class="card-title">{title}</h3>
<h3 class="card-title" set:html={title} />
<h4 class="card_date">{date}</h4>
<div class="hover-text">
<div>
<p>{description}</p>
</div>
<p set:html={description} />
</div>
</article>

59
src/pages/index.astro
View File

@ -3,34 +3,59 @@
import Layout from "../components/Layout.astro";
import Hero from "../components/Hero.astro";
import Welcome from "../components/Welcome.astro";
import EventsGrid from '../components/EventsGrid.astro';
import EventsGrid from "../components/EventsGrid.astro";
import Drinks from "../components/Drinks.astro";
import ImageCarousel from "../components/ImageCarousel.astro";
const events = [
{image: '/images/Logo.png', title: 'Karaoke Night', date: 'Mi, 23. Juli 2025', description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua' },
{image: '/images/Logo.png', title: 'Pub Quiz', date: 'Fr, 25. Juli 2025', description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptuaLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua' },
{image: '/images/Logo.png', title: 'Live-Musik', date: 'Sa, 26. Juli 2025', description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod' },
{image: '/images/Logo.png', title: 'Cocktail-Abend', date: 'So, 27. Juli 2025', description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua' }
{
image: "/images/karaoke.jpg",
title: "Karaoke",
date: "Mittwoch - Samstag",
description: `
Bei uns gibt es Karaoke Mi-Sa!! <br>
Seid ihr eine Gruppe und lieber unter euch? ..unseren 2.Stock kannst du auch mieten ;) <br>
Reserviere am besten gleich per Whatsapp <a href="tel:+41772322770">077 232 27 70</a>
`,
},
{
image: "/images/pub_quiz.jpg",
title: "Pub Quiz",
date: "Jeden Freitag",
description: `
Jeden Freitag findet unser <b>Pub Quiz</b> statt. Gespielt wird tischweise in 3-4 Runden. <br>
Jede Woche gibt es ein anderes Thema. Es geht um Ruhm und Ehre und zusätzlich werden die Sieger der Herzen durch das Publikum gekürt! <3 <br>
Auch Einzelpersonen sind herzlich willkommen! <br>
*zum mitmachen minimum 1 Getränk konsumieren oder 5CHF
`,
},
{
image: "/images/crepes_sucette.jpg",
title: "Crepes Sucette <br /> Live Music im Gallus Pub!",
date: "Do, 04. September 2025",
description: `
<b>20:00 Uhr</b> <br>
<a href="Metzgergasse 13, 9000 St. Gallen">Metzgergasse 13, 9000 St. Gallen</a> <br>
Erlebt einen musikalischen Abend mit der Band <b>Crepes Sucette</b> <br>
Jetzt reservieren: <a href="tel:+41772322770">077 232 27 70</a>`,
},
];
const images = [
{ src: '/images/Logo.png', alt: 'Erstes Bild' },
{ src: '/images/Logo.png', alt: 'Zweites Bild' },
{ src: '/images/Logo.png', alt: 'Drittes Bild' },
{ src: '/images/Logo.png', alt: 'Viertes Bild' },
{ src: '/images/Logo.png', alt: 'Fünftes Bild' },
{ src: '/images/Logo.png', alt: 'Sechstes Bild' },
{ src: '/images/Logo.png', alt: 'Siebtes Bild' },
{ src: '/images/Logo.png', alt: 'Achtes Bild' },
{ src: '/images/Logo.png', alt: 'Neuntes Bild' },
{ src: '/images/Logo.png', alt: 'Zehntes Bild' }
{ src: "/images/Logo.png", alt: "Erstes Bild" },
{ src: "/images/Logo.png", alt: "Zweites Bild" },
{ src: "/images/Logo.png", alt: "Drittes Bild" },
{ src: "/images/Logo.png", alt: "Viertes Bild" },
{ src: "/images/Logo.png", alt: "Fünftes Bild" },
{ src: "/images/Logo.png", alt: "Sechstes Bild" },
{ src: "/images/Logo.png", alt: "Siebtes Bild" },
{ src: "/images/Logo.png", alt: "Achtes Bild" },
{ src: "/images/Logo.png", alt: "Neuntes Bild" },
{ src: "/images/Logo.png", alt: "Zehntes Bild" },
];
---
<Layout>
<Hero id="hero" />
<Welcome id="welcome" />
<EventsGrid id="events" events={events} />