Website changes urgent

.npmrc

@@ -0,0 +1,2 @@
+legacy-peer-deps=true
+package-lock=false

app/events/[slug]/page.tsx

@@ -4,6 +4,7 @@ import { Header } from "@/components/header";
 import { Footer } from "@/components/footer";
 import { EventHero } from "@/components/events/event-hero";
 import { EventKeyFacts } from "@/components/events/event-key-facts";
+import { EventGallery } from "@/components/events/event-gallery";
 import { EventAgenda } from "@/components/events/event-agenda";
 import { EventSponsors } from "@/components/events/event-sponsors";
 import { EventPartners } from "@/components/events/event-partners";
@@ -48,6 +49,7 @@ export default async function EventPage({
         <>
             <EventHero event={event} />
             <EventKeyFacts event={event} />
+            <EventGallery event={event} />
             <EventAgenda event={event} />
             <EventSponsors event={event} />
             <EventPartners event={event} />

components/about-section.tsx

@@ -50,8 +50,8 @@ export function AboutSection() {
                             <div className="absolute inset-0 flex items-center justify-center text-muted-foreground">
                                 <div className="text-center">
                                     <Image
-                                        src="/images/community_landing_page_image.jpg"
-                                        alt="Community group photo"
+                                        src="/images/main_about_us_ibm_zurich.JPG"
+                                        alt="PushQuantum members visiting IBM Research Zurich"
                                         fill
                                         className="object-cover rounded-sm"
                                         priority

components/about/team-section.tsx

@@ -61,11 +61,18 @@ const departmentHeads = [
     },
     {
         name: "Jannik Pflieger",
-        role: "Quanten(t)räume",
+        role: "Outreach",
         image: "/department_leads/Jannik.jpg",
         roleColor: "bg-pq-dark-purple",
         email: "jannik@pushquantum.tech",
     },
+    {
+        name: "Elena",
+        role: "Outreach",
+        image: "/department_leads/Elena.png",
+        roleColor: "bg-pq-dark-purple",
+        email: "elena@pushquantum.tech",
+    },
     {
         name: "Aaron Sander",
         role: "Quantum Entrepreneurship Laboratory",
@@ -116,13 +123,6 @@ const departmentHeads = [
         roleColor: "bg-pq-dark-purple",
         email: "naman@pushquantum.tech",
     },
-    {
-        name: "Etay Schneider",
-        role: "Offerings",
-        image: "/department_leads/Etay.jpg",
-        roleColor: "bg-pq-dark-purple",
-        email: "etay@pushquantum.tech",
-    },
 ];
 
 // Temporarily hidden while the club decides whether to keep this section; data kept for an easy return.
@@ -151,11 +151,17 @@ const strategicAdvisors = [
 
 // Alumni - Past PushQuantum members
 const alumni = [
+    {
+        name: "Etay Schneider",
+        role: "Offerings",
+        image: "/department_leads/Etay.jpg",
+        roleColor: "bg-gray-500",
+    },
     {
         name: "Leart Zuka",
         role: "IT Administration",
         image: "/alumnis/Leart_Zuka.jpg",
-        roleColor: "bg-yellow-500",
+        roleColor: "bg-gray-500",
     },
     {
         name: "Ioana Milea",
@@ -486,4 +492,3 @@ export function TeamSection() {
         </section>
     );
 }
-

components/contact/contact-info-section.tsx

@@ -1,6 +1,7 @@
 
 import { MessageSquare, Mail, Instagram, Linkedin } from "lucide-react";
 import Link from "next/link";
+import { INSTAGRAM_URL, LINKEDIN_URL } from "@/lib/site-links";
 
 const contactCards = [
     {
@@ -23,12 +24,12 @@ const socialCards = [
     {
         icon: Instagram,
         title: "Instagram",
-        href: "https://www.instagram.com/pushquantum_ev/",
+        href: INSTAGRAM_URL,
     },
     {
         icon: Linkedin,
         title: "LinkedIn",
-        href: "https://www.linkedin.com/company/push-quantum/",
+        href: LINKEDIN_URL,
     },
 ];
 

components/events-section.tsx

@@ -12,13 +12,14 @@ const events = [
         date: { month: "NOV", day: "02" },
         title: "Quantum Entrepreneurship Lab",
         description: "A project-based course uniting students from diverse backgrounds",
-        href: "#",
+        href: "/events/quantum-entrepreneurship-laboratory",
     },
     {
-        date: { month: "NOV", day: "12" },
-        title: "Leadership Series: Talk by Prof. Ignacio",
-        description: "Career talks of various leaders from different fields of quantum.",
-        href: "#",
+        date: { month: "THR", day: "22" },
+        title: "Journal Club / Seminar",
+        description:
+            "An interdisciplinary series of talks discussing experimental and theoretical physics and hosting speakers from both academia and industry.",
+        href: "/events/journal-club-seminar",
     },
 ];
 
@@ -36,7 +37,7 @@ export function EventsSection() {
                         </p>
                     </div>
                     <Link
-                        href="#"
+                        href="/events"
                         className="inline-flex items-center gap-2 text-primary hover:underline font-medium"
                     >
                         See all
@@ -53,7 +54,11 @@ export function EventsSection() {
                             <div className="flex items-start gap-4">
                                 <div className="flex flex-col items-center justify-center w-14 h-14 rounded-lg bg-primary/10 text-primary">
                                     <span className="text-xs font-medium uppercase text-pq-bright-pink">{event.date.month}</span>
-                                    <span className="text-xl font-bold text-pq-bright-pink">{event.date.day}</span>
+                                    {event.date.day && (
+                                        <span className="text-xl font-bold text-pq-bright-pink">
+                                            {event.date.day}
+                                        </span>
+                                    )}
                                 </div>
                                 <div className="flex-1">
                                     <h3 className="text-foreground font-semibold text-lg">

components/events/event-gallery.tsx

@@ -0,0 +1,32 @@
+import Image from "next/image";
+import type { EventData } from "@/lib/events-data";
+
+export function EventGallery({ event }: { event: EventData }) {
+    if (!event.gallery || event.gallery.length === 0) return null;
+
+    return (
+        <section className="bg-[#f9fafb] px-6 py-16">
+            <div className="mx-auto max-w-5xl">
+                <h2 className="mb-8 text-center text-2xl font-bold text-pq-dark-purple sm:text-3xl">
+                    Event impressions
+                </h2>
+                <div className="grid gap-6 md:grid-cols-2">
+                    {event.gallery.map((photo) => (
+                        <div
+                            key={photo.src}
+                            className="relative aspect-[4/3] overflow-hidden rounded-2xl bg-gray-100"
+                        >
+                            <Image
+                                src={photo.src}
+                                alt={photo.alt}
+                                fill
+                                className="object-cover"
+                                sizes="(max-width: 768px) 100vw, 50vw"
+                            />
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+}

components/events/event-key-facts.tsx

@@ -17,7 +17,22 @@ export function EventKeyFacts({ event }: { event: EventData }) {
           {facts.when && (
             <div>
               <h3 className="font-bold text-pq-dark-purple">When?</h3>
-              <p className="text-gray-600 mt-1">{facts.when}</p>
+              <p className="text-gray-600 mt-1">
+                {facts.when}
+                {facts.whenLink && (
+                  <>
+                    {" — "}
+                    <Link
+                      href={facts.whenLink.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="font-medium text-pq-dark-purple underline underline-offset-2 hover:text-pq-bright-pink"
+                    >
+                      {facts.whenLink.label}
+                    </Link>
+                  </>
+                )}
+              </p>
             </div>
           )}
 
@@ -38,7 +53,7 @@ export function EventKeyFacts({ event }: { event: EventData }) {
           {facts.whatToExpect && (
             <div>
               <h3 className="font-bold text-pq-dark-purple">What to expect?</h3>
-              <p className="text-gray-600 mt-1">{facts.whatToExpect}</p>
+              <p className="text-gray-600 mt-1 whitespace-pre-line">{facts.whatToExpect}</p>
             </div>
           )}
         </div>

components/footer.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link";
 import { Linkedin, Instagram } from "lucide-react";
 import Image from "next/image";
+import { INSTAGRAM_URL, LINKEDIN_URL } from "@/lib/site-links";
 
 const footerLinks = {
 
@@ -46,7 +47,7 @@ export function Footer() {
                             innovation
                         </p>
                         <Link
-                            href="https://linkedin.com"
+                            href={LINKEDIN_URL}
                             target="_blank"
                             rel="noopener noreferrer"
                             className="inline-flex items-center justify-center w-10 h-10 mt-6 rounded-full border border-border hover:border-primary hover:text-primary transition-colors"
@@ -55,7 +56,7 @@ export function Footer() {
                             <Linkedin className="size-5" />
                         </Link>
                         <Link
-                            href="https://instagram.com"
+                            href={INSTAGRAM_URL}
                             target="_blank"
                             rel="noopener noreferrer"
                             className="inline-flex items-center justify-center w-10 h-10 mt-6 rounded-full border border-border hover:border-primary hover:text-primary transition-colors"

components/hero-section.tsx

@@ -1,6 +1,11 @@
 import { Linkedin, Instagram } from "lucide-react";
 import Image from "next/image";
-import { MEMBERSHIP_FORM_URL } from "@/lib/site-links";
+import Link from "next/link";
+import {
+    INSTAGRAM_URL,
+    LINKEDIN_URL,
+    MEMBERSHIP_FORM_URL,
+} from "@/lib/site-links";
 
 export function HeroSection() {
     return (
@@ -31,22 +36,29 @@ export function HeroSection() {
                                 Join Us
                             </a>
 
-                            <button className="rounded-full border border-white/40 px-7 py-3 text-sm font-semibold text-white transition hover:bg-white/10">
+                            <Link
+                                href="/about"
+                                className="rounded-full border border-white/40 px-7 py-3 text-sm font-semibold text-white transition hover:bg-white/10"
+                            >
                                 Learn More
-                            </button>
+                            </Link>
                         </div>
 
                         {/* SOCIALS */}
                         <div className="mt-10 flex gap-5 text-white/80">
                             <a
-                                href="#"
+                                href={INSTAGRAM_URL}
+                                target="_blank"
+                                rel="noopener noreferrer"
                                 className="transition hover:text-white"
                                 aria-label="Instagram"
                             >
                                 <Instagram size={20} />
                             </a>
                             <a
-                                href="#"
+                                href={LINKEDIN_URL}
+                                target="_blank"
+                                rel="noopener noreferrer"
                                 className="transition hover:text-white"
                                 aria-label="LinkedIn"
                             >

components/membership/membership-cta-section.tsx

@@ -1,5 +1,5 @@
-import Link from "next/link";
 import { Button } from "@/components/ui/button";
+import { MEMBERSHIP_FORM_URL } from "@/lib/site-links";
 
 export function MembershipCTASection() {
     return (
@@ -12,12 +12,18 @@ export function MembershipCTASection() {
                     Join PushQuantum today and unlock your potential in the world of quantum technology.
                 </p>
                 <div className="mt-8">
-                    {/* TODO: ADD GOOGLE FORMS LINK HERE */}
-                    <Link href="#join">
-                        <Button className="rounded-full bg-pq-bright-pink hover:bg-pq-dark-pink text-white px-8 py-3 text-lg">
+                    <Button
+                        asChild
+                        className="rounded-full bg-pq-bright-pink hover:bg-pq-dark-pink text-white px-8 py-3 text-lg"
+                    >
+                        <a
+                            href={MEMBERSHIP_FORM_URL}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                        >
                             Become a Member
-                        </Button>
-                    </Link>
+                        </a>
+                    </Button>
                 </div>
             </div>
         </section>

components/membership/membership-hero.tsx

@@ -18,14 +18,12 @@ export function MembershipHero() {
           {/* Right - Image */}
           <div className="relative h-64 lg:h-80 rounded-2xl overflow-hidden">
             <Image
-              src="/images/membership-hero.jpg"
-              alt="PushQuantum team members"
+              src="/images/members_membership_hack_group.jpg"
+              alt="PushQuantum members at the quantum hackathon"
               fill
               className="object-cover"
               priority
             />
-            {/* Placeholder gradient if image missing */}
-            <div className="absolute inset-0 bg-gradient-to-br from-pq-bright-pink/20 to-[#4169e1]/20" />
           </div>
         </div>
       </div>