custom logo styling on index page + adjustments to venue styling and leads

web/src/components/general/Logo.tsx

@@ -1,8 +1,13 @@
+"use client";
 import styles from "./logo.module.scss";
+import { usePathname } from "next/navigation";
 
 export const Logo = () => {
+  // Check if the current page is the index page
+  const isIndexPage = usePathname() === "/";
+
   return (
-    <div className={styles.logo}>
+    <div className={`${styles.logo} ${isIndexPage && styles.index}`}>
       <svg viewBox="0 0 297 112" fill="none" xmlns="http://www.w3.org/2000/svg">
         <title>Chateau Neuf</title>
         <path

web/src/components/general/logo.module.scss

@@ -1,6 +1,10 @@
 .logo {
   color: currentColor;
-  width: 24rem;
+  width: 16rem;
+
+  &.index {
+    width: 24rem;
+  }
 
   svg {
     width: 100%;

web/src/components/venues/venueItem.module.scss

@@ -1,3 +1,32 @@
 .venueItem {
-    
+  position: relative;
+  list-style: none;
+}
+
+.image {
+  width: 100%;
+  padding-top: 60%;
+  background: var(--color-placeholder);
+  position: relative;
+
+  img {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.text {
+  padding: .8rem 0;
+}
+
+.title,
+.details {
+  font-size: 1.6rem;
+}
+
+.details {
+  font-family: var(--font-serif);
 }

web/src/components/venues/venueList.module.scss

@@ -1,3 +1,7 @@
 .venueList {
-    
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  column-gap: var(--spacing-gap-column);
+  row-gap: var(--spacing-gap-row);
+  padding-bottom: var(--spacing-section-bottom);
 }