style: mobile responsiveness, nav improvements, and content updates

frontend/app/aboutus/page.tsx

@@ -1,5 +1,5 @@
 import Navbar from '@/components/Navbar';
-import AboutSection from '@/components/AboutSection';
+import AboutSection from '@/app/home/AboutSection';
 import ExecutiveSection from '@/components/ExecutiveSection';
 import Footer from '@/components/Footer';
 

frontend/app/home/MainSection.tsx

@@ -5,7 +5,7 @@ import { useState } from "react";
 export default function MainSection() {
   const [active, setActive] = useState(0);
 
-  const photos = ["/photi1.png", "/photi2.png", "/photi3.png"];
+  const photos = ["/home-shuffle/1.JPG", "/home-shuffle/2.jpg", "/home-shuffle/3.jpeg"];
 
   return (
     <section
@@ -17,9 +17,15 @@ export default function MainSection() {
           md:flex-row
           items-center
           justify-center
-          md:justify-between
-          px-24
-          gap-3
+          px-6
+          sm:px-10
+          md:px-16
+          lg:px-24
+          pt-28
+          sm:pt-24
+          pb-16
+          gap-10
+          md:gap-24
           overflow-hidden
           bg-linear-to-br
           from-[#9B93E8]
@@ -37,24 +43,24 @@ export default function MainSection() {
 
       />
       {/* CONTENT */}
-      <div className="relative z-10 max-w-xl text-center md:text-left order-2 md:order-1">
+      <div className="relative z-30 max-w-xl text-center md:text-left order-2 md:order-1">
         <h1 className="text-[90px] md:text-9xl font-bold text-[#3A1B6B] drop-shadow-lg">
           WiCSM
         </h1>
 
-        <h2 className="text-4xl mt-2 text-[#3A1B6B]">UTSC</h2>
+        <h2 className="text-4xl mt-2 text-[#3A1B6B]">Women in Computer Science, Statistics & Mathematics</h2>
 
-        <p className="mt-6 text-[0.8rem] md:text-lg text-[#2D1B4E]">
-          Motto, saying Motto, saying Motto, saying Motto, saying
+        <p className="mt-6 text-base md:text-lg text-[#2D1B4E]">
+          University of Toronto Scarborough
         </p>
       </div>
 
       {/* PHOTO STACK */}
       <div
         onClick={() => setActive((prev) => (prev + 1) % photos.length)}
-        className="relative cursor-pointer group order-1 md:order-2 md:mr-15"
+        className="relative cursor-pointer group order-1 md:order-2"
       >
-        <div className="relative w-[320px] h-[320px]">
+        <div className="relative w-[260px] h-[260px] sm:w-[300px] sm:h-[300px] md:w-[320px] md:h-[320px] max-w-full max-h-full">
           {/* GLOW */}
           <div
             className="absolute inset-0 pointer-events-none"

frontend/app/home/NextEventSection.tsx

@@ -1,3 +1,4 @@
+import Image from "next/image";
 import SectionHeader from "@/components/SectionHeader";
 
 export default function NextEventSection() {
@@ -9,43 +10,44 @@ export default function NextEventSection() {
         bg-white
       "
     >
-      <div className="relative max-w-7xl mx-auto px-24">
+      <div className="relative max-w-7xl mx-auto px-6 sm:px-10 md:px-16 lg:px-24">
         {/* TITLE */}
         <div className="mb-24 text-center">
-          <SectionHeader>JOIN OUR NEXT EVENT</SectionHeader>
+          <SectionHeader>DATA BITES</SectionHeader>
         </div>
 
         {/* CONTENT */}
         <div className="grid grid-cols-1 md:grid-cols-2 items-center gap-12 md:gap-24">
-          <p className="text-lg text-[#2D1B4E] max-w-md leading-relaxed">
-            Short description or hook regarding joining our next event.Learn, 
-            connect, and grow with the WiCSM community.
-          </p>
+          <div className="space-y-4 text-center md:text-left">
+            <p className="text-lg text-[#2D1B4E] max-w-md leading-relaxed mx-auto md:mx-0">
+              Data Bites is WiCSM's flagship networking event, designed to connect students with industry professionals in a setting that feels approachable, honest, and genuinely useful.
+            </p>
+            <p className="text-lg text-[#2D1B4E] max-w-md leading-relaxed mx-auto md:mx-0">
+              Each year, we bring together students from across programs and universities with professionals working in roles like software engineering, data science, consulting, project management, academia, and more. The goal is simple: to make career exploration less intimidating and more human.
+            </p>
+            <p className="text-lg text-[#2D1B4E] max-w-md leading-relaxed mx-auto md:mx-0">
+              With ~100 attendees annually, Data Bites creates space for students to ask questions, build connections, and gain clarity on what comes next, whether that's their first internship or a long-term career direction.
+            </p>
+          </div>
 
           {/* RIGHT CARD */}
           <div
             className="
+              relative
               w-[280px] h-[280px]
               md:w-[420px] md:h-[420px]
               rounded-3xl
-              bg-white
+              overflow-hidden
               shadow-[0_0_40px_rgba(155,147,232,0.45)]
-              flex items-center justify-center
               mx-auto md:mx-0
             "
           >
-            {/* Placeholder — swap later */}
-            <div className="text-gray-400"> Event Image</div>
-
-            {/*
             <Image
-              src="/event-poster.png"
-              alt="Next Event"
-              width={380}
-              height={380}
-              className="rounded-2xl"
+              src="/data-bites.jpg"
+              alt="Data Bites"
+              fill
+              className="object-cover"
             />
-            */}
           </div>
         </div>
       </div>

frontend/app/home/OurValuesSection.tsx

@@ -1,6 +1,6 @@
 import SectionHeader from "@/components/SectionHeader";
 import ValueCard from "@/components/ValueCard";
-import { Lightbulb, Rocket, Users } from "lucide-react";
+import { Lightbulb, Heart, Users } from "lucide-react";
 
 export default function OurValuesSection() {
   return (
@@ -31,8 +31,8 @@ export default function OurValuesSection() {
           icon={
             <Users className="h-14 w-14 md:h-16 md:w-16" aria-hidden="true" />
           }
-          title="Subtitle"
-          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+          title="Inclusivity"
+          description="We are committed to creating a welcoming and supportive space for women and underrepresented groups in computer science, statistics, and mathematics."
         />
         <ValueCard
           icon={
@@ -41,15 +41,15 @@ export default function OurValuesSection() {
               aria-hidden="true"
             />
           }
-          title="Subtitle"
-          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+          title="Growth"
+          description="We empower our members to develop their technical, academic, and professional skills through workshops, mentorship, and hands-on experiences."
         />
         <ValueCard
           icon={
-            <Rocket className="h-14 w-14 md:h-16 md:w-16" aria-hidden="true" />
+            <Heart className="h-14 w-14 md:h-16 md:w-16" aria-hidden="true" />
           }
-          title="Subtitle"
-          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+          title="Community"
+          description="We foster meaningful connections by bringing students together through shared experiences, collaboration, and support."
         />
       </div>
 

frontend/app/home/SupportMissionSection.tsx

@@ -1,28 +1,40 @@
+import Image from "next/image";
+import Link from "next/link";
 import SectionHeader from "@/components/SectionHeader";
 
 export default function SupportMissionSection() {
   return (
-    <section className="relative py-32 px-24 bg-[#ece7fa]">
-      <div className="flex-col md:flex-row flex items-center justify-between gap-24">
+    <section className="relative py-32 px-6 sm:px-10 md:px-16 lg:px-24 bg-[#ece7fa]">
+      <div className="flex-col md:flex-row flex items-center justify-center gap-20 md:gap-40">
         {/* LEFT: Image / placeholder */}
         <div
-          className="w-[250px] h-[250px] md:w-[360px] md:h-[360px] rounded-3xl 
-                        bg-white shadow-[0_0_40px_rgba(155,147,232,0.6)] shrink-0"
-        />
+          className="relative w-[250px] h-[250px] md:w-[360px] md:h-[360px] rounded-3xl overflow-hidden 
+                        shadow-[0_0_40px_rgba(155,147,232,0.6)] shrink-0"
+        >
+          <Image
+            src="/sponsor.jpg"
+            alt="WiCSM Sponsor"
+            fill
+            className="object-cover"
+          />
+        </div>
 
         {/* RIGHT: Text + CTA */}
-        <div className="max-w-xl">
-          <SectionHeader className="align-middle">
-            SUPPORT OUR MISSION
-          </SectionHeader>
+        <div className="max-w-xl text-center md:text-left">
+          <SectionHeader>SUPPORT OUR MISSION</SectionHeader>
 
-          <p className="mt-4 text-[0.8rem] md:text-lg text-[#2D1B4E]">
-            1–2 liner catch/hook, then say join us etc blah blah.
+          <p className="mt-4 text-lg text-[#2D1B4E]">
+            Support WiCSM in creating spaces where students can explore careers, build connections, and grow with confidence.
+          </p>
+          <p className="mt-4 text-lg text-[#2D1B4E]">
+            Partner with us to engage with emerging talent and make a meaningful impact.
           </p>
 
-          <button
+          <Link
+            href="/contact"
             className="
               mt-8
+              inline-block
               px-10
               py-3
               rounded-full
@@ -35,7 +47,7 @@ export default function SupportMissionSection() {
             "
           >
             Contact us
-          </button>
+          </Link>
         </div>
       </div>
 

frontend/app/home/WhoSection.tsx

@@ -34,6 +34,9 @@ export default function WhoWeAreSection() {
     <section className="py-32 bg-white overflow-hidden">
       <div className="text-center mb-16">
         <SectionHeader>WHO WE ARE</SectionHeader>
+        <p className="mx-auto mt-6 max-w-5xl px-6 text-lg md:text-xl leading-relaxed text-[#2D1B4E]">
+          WiCSM (Women in Computer Science, Statistics & Mathematics) is a student-led community at the University of Toronto Scarborough dedicated to empowering women and underrepresented groups in STEM. We create opportunities for learning, mentorship, and connection through events, workshops, and collaborations.
+        </p>
       </div>
 
       {/* VIEWPORT */}

frontend/components/Footer.tsx

@@ -1,7 +1,31 @@
 import Image from "next/image";
 import Link from "next/link";
+import { FaDiscord, FaFacebook, FaInstagram, FaLinkedinIn } from "react-icons/fa";
 
 export default function Footer() {
+  const socials = [
+    {
+      name: "Instagram",
+      href: "https://www.instagram.com/wicsm.utsc/",
+      Icon: FaInstagram,
+    },
+    {
+      name: "Facebook",
+      href: "https://www.facebook.com/WiCSM.UTSC/",
+      Icon: FaFacebook,
+    },
+    {
+      name: "Discord",
+      href: "https://discord.com/invite/QgfWQqh6Fa",
+      Icon: FaDiscord,
+    },
+    {
+      name: "LinkedIn",
+      href: "https://www.linkedin.com/company/wicsm-utsc/",
+      Icon: FaLinkedinIn,
+    },
+  ];
+
   return (
     <footer className="w-full bg-[linear-gradient(to_bottom,_#F9F6FF33_0%,_#9BCEEE_45%,_#A9A7EB_100%)] px-6 sm:px-12 md:px-20 py-16">
 
@@ -21,15 +45,15 @@ export default function Footer() {
               WiCSM
             </p>
             <p className="text-[#54528F] text-sm">
-              Women in Computer Science, Statistics and Mathematics UTSC
+              Women in Computer Science, Statistics & Mathematics @ UTSC
             </p>
           </div>
         </div>
 
         {/* Quick Links */}
-        <div className="grid grid-cols-2 gap-x-8 gap-y-4 text-lg font-semibold text-white">
+        <div className="grid grid-cols-2 gap-x-8 gap-y-4 text-lg font-semibold text-white self-center md:self-auto">
           <Link href="/" className="hover:underline">Home</Link>
-          <Link href="/about" className="hover:underline">About</Link>
+          <Link href="/aboutus" className="hover:underline">About</Link>
           <Link href="/events" className="hover:underline">Events</Link>
           <Link href="/contact" className="hover:underline">Contact</Link>
         </div>
@@ -47,12 +71,17 @@ export default function Footer() {
         </p>
 
         <div className="flex gap-4">
-          {[1, 2, 3, 4].map((_, i) => (
+          {socials.map(({ name, href, Icon }) => (
             <a
-              key={i}
-              href="#"
-              className="w-10 h-10 bg-white rounded-full hover:bg-gray-200 transition"
-            />
+              key={name}
+              href={href}
+              target="_blank"
+              rel="noreferrer"
+              aria-label={name}
+              className="w-10 h-10 bg-white rounded-full hover:bg-gray-200 transition flex items-center justify-center text-[#54528F]"
+            >
+              <Icon className="text-lg" />
+            </a>
           ))}
         </div>
 

frontend/components/Navbar.tsx

@@ -6,7 +6,7 @@ import { useState } from "react";
 
 const navItems = [
   { href: "/", label: "HOME" },
-  { href: "/about", label: "ABOUT" },
+  { href: "/aboutus", label: "ABOUT" },
   { href: "/events", label: "EVENTS" },
   { href: "/contact", label: "CONTACT" },
 ];
@@ -15,7 +15,7 @@ export default function Navbar() {
   const [open, setOpen] = useState(false);
 
   return (
-    <nav className="relative border-3 border-[#54528F] rounded-3xl flex items-center justify-between py-2 px-7 max-w-5xl mx-auto bg-white">
+    <nav className="relative border-3 border-[#54528F] rounded-3xl flex items-center justify-between py-2 px-5 sm:px-7 w-[calc(100%-2rem)] mx-4 sm:w-[calc(100%-3rem)] sm:mx-6 md:w-full md:max-w-5xl md:mx-auto bg-white">
 
       {/* Logo */}
       <Image
@@ -25,18 +25,14 @@ export default function Navbar() {
         height={40}
       />
 
-      <div className="hidden md:flex gap-20 font-semibold text-[#54528F] text-xl">
+      <div className="hidden md:flex flex-1 justify-center gap-20 font-semibold text-[#54528F] text-xl">
         {navItems.map((item) => (
           <Link key={item.href} href={item.href} onClick={() => setOpen(false)}>
             {item.label}
           </Link>
         ))}
       </div>
 
-      <button className="hidden md:block px-10 py-2 bg-[#F7F3FB] rounded-2xl font-semibold text-[#54528F] text-xl">
-        login
-      </button>
-
       {/* Hamburger */}
       <button
         onClick={() => setOpen(!open)}
@@ -53,9 +49,6 @@ export default function Navbar() {
               {item.label}
             </Link>
           ))}
-          <button className="px-10 py-2 bg-[#F7F3FB] rounded-2xl">
-            login
-          </button>
         </div>
       )}
     </nav>