Merge pull request #4 from jane-does-coding/janesbranch

Added Read More, and Sound to Clicking

Author: techpixel

README.md

@@ -1 +1,3 @@
 # midnight
+
+checking if branch is set up right

lark-ui/src/routes/+page.svelte

@@ -2,6 +2,7 @@
   import { goto } from '$app/navigation';
   import MidnightHeader from '$lib/MidnightHeader.svelte';
   import { env } from '$env/dynamic/public';
+  import { onMount } from 'svelte';
   
   let email = '';
   let errorMessage = '';
@@ -12,8 +13,34 @@
     return emailRegex.test(email);
   }
 
+
+/* Added the clicking sound to buttons */
+let clickSound: HTMLAudioElement | undefined;
+
+onMount(() => {
+  clickSound = new Audio('/sounds/click.mp3');
+  clickSound.preload = 'auto';
+});
+
+function playClick() {
+  if (!clickSound) return;
+  try {
+    clickSound.currentTime = 0;
+    clickSound.play().catch(() => {});
+  } catch (e) {
+    clickSound.play().catch(() => {});
+  }
+}
+
+  /* Created a helper to add sound to faq button */
+  function navigateToFaq() {
+    playClick();
+    goto('/faq');
+  }
+
   async function handleNavigateToRsvp(event: Event) {
     event.preventDefault();
+    playClick();
     errorMessage = '';
     
     if (!email.trim()) {
@@ -363,7 +390,7 @@
             </div>
 
             <button 
-              on:click={openModal}
+              on:click={() => { playClick(); openModal(); }}
               type="button"
               class="pushable-blue"
             >
@@ -389,6 +416,67 @@
     </div>
   </section>
 
+ <!-- Read More Section Start -->
+  <section
+    class="relative flex flex-col md:flex-row justify-center items-center bg-[#443B61]  text-white py-16 px-4 sm:px-8"
+  >
+    <div class="flex flex-col gap-y-[1vw]">
+
+      <div class="flex flex-col md:flex-row items-center justify-center w-[95vw] md:w-[80vw] gap-x-[1vw]">
+
+        <div class="flex flex-col w-full gap-y-[1vw] pb-[2vh]">
+          <div class="bg-[#fee1c0]/0 rounded-xl w-full px-[2vw] py-[1vh]">
+            <p class="font-['Moga',_serif] font-bold text-[#fee1c0] text-center text-[8vh] tracking-[3.84px]">How it works</p>
+          </div>
+          <div class="bg-[#fee1c0] rounded-xl w-full px-[2vw] py-[1.5vh]">
+            <p class="font-['PT_Serif',_serif] font-bold text-[#443B61] text-[3.5vh]">1. Work on projects</p>
+          </div>
+          <div class="bg-[#fee1c0] rounded-xl w-full px-[2vw] py-[1.5vh]">
+            <p class="font-['PT_Serif',_serif] font-bold text-[#443B61] text-[3.5vh]">2. Collect your hours</p>
+          </div>
+          <div class="bg-[#fee1c0] rounded-xl w-full px-[2vw] py-[1.5vh]">
+            <p class="font-['PT_Serif',_serif] font-bold text-[#443B61] text-[3.5vh]">3. Fly to Vienna, Austria</p>
+          </div>
+           <button 
+              on:click={() => { playClick(); openModal(); }}
+              type="button"
+              class="pushable-blue"
+            >
+              <span class="front-blue font-['Moga',_sans-serif] text-[#fee1c0] text-[6vh] text-center text-nowrap tracking-[3.84px] whitespace-pre">
+                Read More
+              </span>
+            </button>
+         
+        </div>
+        
+        <img
+        alt="The Hack Club Midnight Team"
+        src="https://hc-cdn.hel1.your-objectstorage.com/s/v3/7ada8a0621f0f84c5059b856cdea1bc1ab3e4bf0_group_photo.png"
+        class="rounded-xl mt-[1vh] md:mt-6 w-[90vw] md:w-[37.5vw] object-cover"
+        />
+
+      </div>
+
+      <div class="bg-[#fee1c0] rounded-xl w-full px-[2vw] py-[1.5vh]">
+        <p class="font-['PT_Serif',_serif] font-bold text-[#443B61] text-[3.5vh] text-center">Build new projects, and learn with other highschoolers</p>
+      </div>
+
+      <div class="w-[95vw] md:w-[80vw] flex gap-[1vw]">
+        <div class="w-2/10 bg-[#fee1c0] rounded-xl items-center justify-center p-[2vw] hidden md:flex">
+          <img alt="The Crow" class="w-full h-auto block" style="object-fit: contain; background-repeat: no-repeat; background-size: contain;" src="/sad.png" />
+        </div>
+
+        <div class="bg-[#f24b4b] w-full md:w-8/10 rounded-xl px-[2vw] py-[2.5vh] flex items-center justify-center text-left">
+          <p class="text-[#fee1c0] font-['PT_Serif',_serif] font-bold text-[2.75vh]"> Hack Club Midnight is a two-month online-to-in-person hackathon in Vienna, bringing hackers together to build creative projects, connect through events, and experience a unique murder-mystery themed adventure.
+          </p>
+        </div>
+      </div>
+    
+  
+    </div>
+  </section>
+    <!-- Read More Section End -->
+
   <section class="w-full flex flex-col items-center overflow-x-hidden pt-12 md:pt-16">
   <div class="bg-[#2A2746] aspect-video w-[110%] sm:w-[95%] md:w-[85%] lg:w-4/5 p-4 flex items-center justify-center mb-8 relative z-10">
     <iframe width="560" height="315" src="https://www.youtube.com/embed/oKHU66Ar6Gk?si=9kKLARVPPCcyygt-" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" class="w-full h-full" allowfullscreen></iframe>
@@ -399,7 +487,7 @@
 
     <div class="absolute top-[10%] left-1/2 transform -translate-x-1/2 flex flex-col md:flex-row items-center justify-center gap-4 md:gap-6 rotate-[-4.25deg]">
       <button 
-        on:click={() => goto('/faq')}
+        on:click={navigateToFaq}
         class="pushable-blue"
       >
         <span class="front-blue font-['Moga',_sans-serif] text-[#fee1c0] text-3xl md:text-4xl lg:text-5xl xl:text-[64px] 2xl:text-[64px] text-center text-nowrap tracking-[3.84px] whitespace-pre">