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

@@ -8,5 +8,6 @@
     </content>
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />
+    <orderEntry type="library" name="font-awesome" level="application" />
   </component>
 </module>

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>

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>