From 22eb4eb7c7257089ba1122860cbd579e8cc0064a Mon Sep 17 00:00:00 2001
From: Kenzo <kenzo.signer@bookageek.ch>
Date: Wed, 16 Jul 2025 22:00:34 +0200
Subject: [PATCH] Add HoverCard component and integrate it into the homepage

This commit introduces a reusable HoverCard component, designed to display an image, title, and hover-revealed text. The component is styled to match the website theme. Additionally, it has been integrated into the index.astro page with placeholder content for demonstration purposes. Updated the project configuration to include the Font Awesome library.
---
 .idea/Gallus_Pub.iml                         |  1 +
 Gallus_Pub_v1/src/components/HoverCard.astro | 91 ++++++++++++++++++++
 Gallus_Pub_v1/src/pages/index.astro          |  7 ++
 3 files changed, 99 insertions(+)
 create mode 100644 Gallus_Pub_v1/src/components/HoverCard.astro

diff --git a/.idea/Gallus_Pub.iml b/.idea/Gallus_Pub.iml
index 24643cc..9f7ba11 100644
--- a/.idea/Gallus_Pub.iml
+++ b/.idea/Gallus_Pub.iml
@@ -8,5 +8,6 @@
     </content>
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />
+    <orderEntry type="library" name="font-awesome" level="application" />
   </component>
 </module>
\ No newline at end of file
diff --git a/Gallus_Pub_v1/src/components/HoverCard.astro b/Gallus_Pub_v1/src/components/HoverCard.astro
new file mode 100644
index 0000000..17ff057
--- /dev/null
+++ b/Gallus_Pub_v1/src/components/HoverCard.astro
@@ -0,0 +1,91 @@
+---
+// HoverCard.astro
+// Diese Komponente nimmt ein Bild, einen Titel und einen Text entgegen und zeigt sie als Hover-Karte an
+
+// Definieren der Props, die die Komponente akzeptiert
+interface Props {
+    imageSrc: string;  // Pfad zum Bild
+    title: string;     // Titel der Karte
+    text: string;      // Text, der beim Hover angezeigt wird
+    altText?: string;  // Alternative Textbeschreibung für das Bild (optional)
+}
+
+// Extrahieren der Props
+const {imageSrc, title, text, altText = ""} = Astro.props;
+---
+
+<div class="hover-card">
+    <h3 class="card-title">{title}</h3>
+    <div class="image-container">
+        <img src={imageSrc} alt={altText || title} class="card-image"/>
+    </div>
+    <div class="hover-text">
+        <p>{text}</p>
+    </div>
+</div>
+
+<style>
+  .hover-card {
+    position: relative;
+    width: 250px;
+    height: 300px;
+    overflow: hidden;
+    border-radius: 8px;
+    background-color: #213b28; /* Grüner Hintergrund, der gleiche wie in Ihrer Website */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    transition: transform 0.3s ease;
+  }
+
+  .hover-card:hover {
+    transform: translateY(-5px);
+  }
+
+  .image-container {
+    width: 100%;
+    padding-top: 100%; /* Macht das Bild quadratisch */
+    position: relative;
+    overflow: hidden;
+  }
+
+  .card-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover; /* Damit wird das Bild ohne Verzerrung angepasst */
+    transition: transform 0.3s ease;
+  }
+
+  .card-title {
+    padding: 15px;
+    margin: 0;
+    color: #ceb39b; /* Gleiche Textfarbe wie in Ihrer Website */
+    font-size: 1.2rem;
+    text-align: center;
+  }
+
+  .hover-text {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(33, 59, 40, 0.9); /* Leicht transparente Version des grünen Hintergrunds */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    color: #ceb39b;
+  }
+
+  .hover-card:hover .hover-text {
+    opacity: 1;
+  }
+
+  .hover-card:hover .card-image {
+    transform: scale(1.1);
+  }
+</style>
\ No newline at end of file
diff --git a/Gallus_Pub_v1/src/pages/index.astro b/Gallus_Pub_v1/src/pages/index.astro
index a89ec34..858053d 100644
--- a/Gallus_Pub_v1/src/pages/index.astro
+++ b/Gallus_Pub_v1/src/pages/index.astro
@@ -1,6 +1,7 @@
 ---
 import Header from '../components/Header.astro';
 import Footer from '../components/Footer.astro';
+import HoverCard from '../components/HoverCard.astro';
 import '../../styles/index.css'
 ---
 
@@ -27,6 +28,12 @@ import '../../styles/index.css'
 		<h2>Abschnitt 2</h2>
 		<p>Mehr Inhalt zum Scrollen...</p>
 	</div>
+	<HoverCard
+		imageSrc="images/Logo.png"
+		title="Whisky-Tasting"
+		text="Jeden ersten Mittwoch im Monat bieten wir ein exklusives Whisky-Tasting an. Erfahren Sie mehr über die verschiedenen Aromen und Geschmacksrichtungen."
+	/>
+
 </main>
 <Footer />
 </body>