Merge branch 'main' into parvagues-and-dunbar

next/components/ParVaguesFooter.js

 import React from 'react';
 import Link from 'next/link';
 import Image from 'next/image';
-import { FaEnvelope, FaInstagram, FaTwitter } from 'react-icons/fa';
+import { FaEnvelope, FaInstagram, FaTwitter, FaYoutube } from 'react-icons/fa';
 import { SiMastodon, SiBluesky } from 'react-icons/si';
 import styles from '@/styles/parvagues.module.css';
 
@@ -11,7 +11,8 @@ export default function ParVaguesFooter() {
     { icon: <SiMastodon />, label: 'mastodon', url: 'https://chaos.social/@PixelNoir' },
     { icon: <FaTwitter />, label: 'twitter', url: 'https://x.com/ParVagues' },
     { icon: <SiBluesky />, label: 'bluesky', url: '#' },
-    { icon: <FaInstagram />, label: 'instagram', url: 'https://instagram.com/parvagues.mp3' }
+    { icon: <FaInstagram />, label: 'instagram', url: 'https://instagram.com/parvagues.mp3' },
+    { icon: <FaYoutube />, label: 'youtube', url: 'https://www.youtube.com/@parvagues' }
   ];
 
   const year = new Date().getFullYear();

next/components/cosmicfest/Countdown.js

+import { useState, useEffect } from 'react';
+import styles from '../../styles/cosmicfest.module.css'; // Assuming you might want specific styles
+
+const Countdown = ({ targetDate }) => {
+  const calculateTimeLeft = () => {
+    const difference = +new Date(targetDate) - +new Date();
+    let timeLeft = {};
+
+    if (difference > 0) {
+      timeLeft = {
+        jours: Math.floor(difference / (1000 * 60 * 60 * 24)),
+        heures: Math.floor((difference / (1000 * 60 * 60)) % 24),
+        minutes: Math.floor((difference / 1000 / 60) % 60),
+        secondes: Math.floor((difference / 1000) % 60),
+      };
+    } else {
+      timeLeft = { jours: 0, heures: 0, minutes: 0, secondes: 0 };
+    }
+    return timeLeft;
+  };
+
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
+
+    return () => clearTimeout(timer);
+  });
+
+  const timerComponents = [];
+
+  Object.keys(timeLeft).forEach((interval) => {
+    if (!timeLeft[interval] && timeLeft[interval] !== 0) { // handles case where initial timeLeft is empty
+      return;
+    }
+
+    timerComponents.push(
+      <span key={interval} style={{ margin: '0 0.5rem', textAlign: 'center' }}>
+        <div style={{ fontSize: '2.5rem', fontWeight: 'bold' }}>{timeLeft[interval]}</div>
+        <div style={{ fontSize: '0.8rem', textTransform: 'uppercase' }}>{interval}</div>
+      </span>
+    );
+  });
+
+  return (
+    <div className={styles.countdown} style={{ display: 'flex', justifyContent: 'center', alignItems: 'baseline' }}>
+      {timerComponents.length ? timerComponents : <span>c'est l'heure!</span>}
+    </div>
+  );
+};
+
+export default Countdown;

next/public/images/cosmicfest/hero-placeholder.jpg

+// This is a placeholder image. Replace with actual hero image.