Mobile

src/components/events/EventCarousel.tsx

@@ -18,6 +18,7 @@ export const EventCarousel = ({ events }: EventCarouselProps) => {
   const [isDragging, setIsDragging] = useState(false);
   const [speedMultiplier, setSpeedMultiplier] = useState(1);
   const [translateX, setTranslateX] = useState(0);
+  const [isMobile, setIsMobile] = useState(false);
 
   const speedMultiplierRef = useRef(1);
   const animationFrameRef = useRef<number | null>(null);
@@ -38,28 +39,41 @@ export const EventCarousel = ({ events }: EventCarouselProps) => {
     lastTimeVelocityRef.current = Date.now();
   }, []);
 
+  // Detect mobile screen size
+  useEffect(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth < 768);
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+    return () => window.removeEventListener('resize', checkMobile);
+  }, []);
+
   // Update ref when speedMultiplier changes
   useEffect(() => {
     speedMultiplierRef.current = speedMultiplier;
   }, [speedMultiplier]);
 
-  // Handle deceleration on hover and acceleration on unhover
+  // Handle deceleration on hover and acceleration on unhover (desktop only)
   useEffect(() => {
     const interval = setInterval(() => {
       setSpeedMultiplier((prev) => {
-        if (isHovered || isDragging) {
+        if ((isHovered || isDragging) && !isMobile) {
           return Math.max(0, prev - 0.2);
+        } else if (isMobile) {
+          return 1; // Keep full speed on mobile
         } else {
           return Math.min(1, prev + 0.2);
         }
       });
     }, 100);
 
     return () => clearInterval(interval);
-  }, [isHovered, isDragging]);
+  }, [isHovered, isDragging, isMobile]);
 
-  // Handle mouse down - start drag
+  // Handle mouse down - start drag (disabled on mobile)
   const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
+    // Disable dragging on mobile
+    if (isMobile) return;
+
     // Only allow dragging when carousel is stopped (speedMultiplier is 0)
     if (speedMultiplierRef.current > 0.05) return;
 
@@ -161,7 +175,7 @@ export const EventCarousel = ({ events }: EventCarouselProps) => {
   return (
     <div 
       ref={containerRef}
-      className="w-full overflow-hidden cursor-grab active:cursor-grabbing select-none"
+      className="w-full overflow-hidden md:cursor-grab md:active:cursor-grabbing select-none"
       style={{
         maskImage: 'linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%)',
         WebkitMaskImage: 'linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%)',
@@ -174,9 +188,9 @@ export const EventCarousel = ({ events }: EventCarouselProps) => {
           width: 'fit-content',
           userSelect: 'none',
         }}
-        onMouseEnter={() => !isDragging && setIsHovered(true)}
-        onMouseLeave={() => !isDragging && setIsHovered(false)}
-        onMouseDown={handleMouseDown}
+        onMouseEnter={() => !isDragging && !isMobile && setIsHovered(true)}
+        onMouseLeave={() => !isDragging && !isMobile && setIsHovered(false)}
+        onMouseDown={!isMobile ? handleMouseDown : undefined}
       >
         {duplicatedEvents.map((event, index) => (
           <div key={`${event.id}-${index}`}>

src/components/events/EventCarouselItem.tsx

@@ -13,7 +13,7 @@ export const EventCarouselItem = ({
 }: EventCarouselItemProps) => {
   return (
     <div
-      className="flex-shrink-0 w-80 h-96 rounded-lg overflow-hidden shadow-lg hover:shadow-2xl transition-shadow relative group"
+      className="flex-shrink-0 w-56 h-64 md:w-80 md:h-96 rounded-lg overflow-hidden shadow-lg hover:shadow-2xl transition-shadow relative group"
       style={{
         backgroundImage: `url(${image})`,
         backgroundSize: 'cover',
@@ -24,17 +24,17 @@ export const EventCarouselItem = ({
       <div className="absolute inset-0 bg-gradient-to-t from-black via-black/40 to-transparent"></div>
 
       {/* Text overlay content - positioned at bottom */}
-      <div className="absolute inset-0 flex flex-col justify-end p-6">
+      <div className="absolute inset-0 flex flex-col justify-end p-3 md:p-6">
         {/* Title and Date */}
-        <div className="mb-4">
-          <h3 className="text-2xl font-bold text-white mb-1 font-dosis">
+        <div className="mb-2 md:mb-4">
+          <h3 className="text-base md:text-2xl font-bold text-white mb-1 font-dosis">
             {title}
           </h3>
-          <p className="text-sm text-gray-200 italic font-montserrat">{date}</p>
+          <p className="text-xs md:text-sm text-gray-200 italic font-montserrat">{date}</p>
         </div>
 
         {/* Description */}
-        <p className="text-gray-100 text-sm leading-relaxed font-montserrat line-clamp-3">
+        <p className="text-gray-100 text-xs md:text-sm leading-relaxed font-montserrat line-clamp-3">
           {description}
         </p>
       </div>

src/components/hero/HTMLBox.tsx

@@ -5,7 +5,7 @@ const HTMLBox = () => {
   return (
     <div className="fadeSlideUpFromBottom relative w-full max-w-3xl max-h-max mx-auto px-2 sm:px-4">
       {/* Bracket SVG - Left */}
-      <div className="absolute left-0 top-0 bottom-0 -translate-x-26 w-27 opacity-75">
+      <div className="hidden md:block absolute left-0 top-0 bottom-0 -translate-x-26 w-27 opacity-75">
         <img src={Bracket} alt="bracket" className="w-full h-full" />
       </div>
 
@@ -72,7 +72,7 @@ const HTMLBox = () => {
       </div>
 
       {/* Bracket SVG - Right */}
-      <div className="absolute right-0 top-0 bottom-0 translate-x-26 w-27 opacity-75 rotate-180">
+      <div className="hidden md:block absolute right-0 top-0 bottom-0 translate-x-26 w-27 opacity-75 rotate-180">
         <img src={Bracket} alt="bracket" className="w-full h-full" />
       </div>
     </div>

src/components/hero/Stats.tsx

@@ -54,19 +54,19 @@ export const Stats = () => {
   }, []);
 
   return (
-    <div className="w-full max-w-6xl mx-auto px-4 py-16">
-      {/* Stats Grid - 1 column mobile, 3 columns desktop */}
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-12 md:gap-16">
+    <div className="w-full max-w-6xl mx-auto px-4 py-4 md:py-16">
+      {/* Stats Grid - flex row mobile, 3 columns desktop */}
+      <div className="flex flex-row md:grid md:grid-cols-3 gap-4 md:gap-12 lg:gap-16 items-center justify-center md:items-start">
         {statsData.map((stat, index) => (
           <div
             key={index}
-            className="flex flex-col items-center justify-center text-center"
+            className="flex flex-col items-center justify-center text-center flex-1"
           >
 
             {/* Number Container - Animated count-up */}
-            <div className="mb-2">
+            <div className="mb-1 md:mb-2">
               <span
-                className="text-6xl md:text-7xl font-bold tracking-tight"
+                className="text-2xl md:text-6xl lg:text-7xl font-bold tracking-tight"
                 style={{
                   fontFamily: 'var(--font-dosis)',
                   color: '#ffffff',
@@ -97,7 +97,7 @@ export const Stats = () => {
 
             {/* Label Text - Regular weight Dosis font */}
             <p
-              className="text-xl md:text-2xl text-gray-300 tracking-wide"
+              className="text-xs md:text-xl lg:text-2xl text-gray-300 tracking-wide"
               style={{
                 fontFamily: 'var(--font-dosis)',
               }}

src/components/hero/Welcome.tsx

@@ -23,14 +23,16 @@ export const Welcome: React.FC = () => {
 
         {/* Laurier Computing Society Text */}
         <h1
-          className="font-bold text-white text-center pl-5 fadeSlideUpFromBottom"
-          style={{ fontFamily: 'var(--font-dosis)', fontSize: '3.2rem', lineHeight: '1.2' }}
+          className="font-bold text-white text-center md:pl-5 fadeSlideUpFromBottom text-2xl sm:text-3xl md:text-5xl"
+          style={{ fontFamily: 'var(--font-dosis)', lineHeight: '1.2' }}
         >
           LAURIER COMPUTING SOCIETY
         </h1>
       </div>
       {/* Mascots Section */}
-      <Mascots mascotSize={180}/>
+      <div className="hidden md:flex">
+        <Mascots mascotSize={180}/>
+      </div>
     </div>
   );
 };

src/components/initiatives/MeetThePros.tsx

@@ -19,11 +19,11 @@ export default function MeetThePros() {
             <div className="w-full lg:flex-1 lg:max-w-2xl">
                 <ScrapbookText text="MEET THE" letterSize={112} mobileLetterSize={48} className="justify-start -ml-5" />
 
-                <h2 className="font-black text-white text-left leading-tight mt-1 fadeSlideUpFromBottom" style={{ fontFamily: 'Dosis, sans-serif', fontSize: '4.7rem' }}>
+                <h2 className="font-black text-white text-left leading-tight mt-0 md:mt-1 fadeSlideUpFromBottom text-3xl md:text-5xl" style={{ fontFamily: 'Dosis, sans-serif', fontSize: 'clamp(1.875rem, 5vw, 4.7rem)' }}>
                     PROFESSIONALS
                 </h2>
 
-                <div className="mt-6 text-left font-light text-white text-lg md:text-xl lg:text-2xl leading-relaxed" style={{ fontFamily: 'Dosis, sans-serif' }}>
+                <div className="mt-6 text-left font-light text-white text-sm md:text-lg lg:text-2xl leading-relaxed" style={{ fontFamily: 'Dosis, sans-serif' }}>
                     <p className="mb-4">
                         Our flagship event bringing together professionals from different fields to give students a first hand retelling of the field and provide them with advice.
                     </p>

src/components/initiatives/SpeakerSignUp.tsx

@@ -6,21 +6,21 @@ export default function SpeakerSignup() {
       <div className="relative bg-gray-950 rounded-3xl border border-yellow-400 p-4 sm:p-6 md:p-8" style={{ borderColor: 'var(--color-accent-yellow)' }}>
         <div className="flex flex-col md:flex-row items-center gap-4 md:gap-8">
           {/* Doug Mascot positioned to pop out of top and clip at bottom - trying */}
-          <div className="absolute bottom-3 -left-6 sm:-left-2 md:left-2 translate-y-8 pointer-events-none">
+          <div className="hidden md:block absolute bottom-3 -left-6 sm:-left-2 md:left-2 translate-y-8 pointer-events-none">
             <Mascots mascotSize={300} mobileMascotSize={240} mascotNames={['Doug']} className="" showOverlap={true} />
           </div>
 
           {/* Content */}
           <div className="flex-1 flex flex-col min-w-0 w-full md:ml-64 lg:ml-80">
-            <h2 className="text-white font-bold text-lg sm:text-xl md:text-2xl mb-3 md:mb-4 text-center md:text-left wrap-break-word" style={{ fontFamily: 'Dosis, sans-serif' }}>
+            <h2 className="text-white font-bold text-sm md:text-2xl mb-3 md:mb-4 text-center md:text-left wrap-break-word" style={{ fontFamily: 'Dosis, sans-serif' }}>
               WANT TO BE A SPEAKER AT OUR NEXT MTP SESSION?
             </h2>
-            <p className="text-gray-300 text-sm sm:text-base mb-4 md:mb-6 text-center md:text-left wrap-break-word" style={{ fontFamily: 'Dosis, sans-serif' }}>
+            <p className="text-gray-300 text-xs md:text-base mb-4 md:mb-6 text-center md:text-left wrap-break-word" style={{ fontFamily: 'Dosis, sans-serif' }}>
               We'd love to hear from anyone eager to inform the youth of today about the dangers of the outside world [employement]. Click the button below and sign up to attend our next session!
             </p>
             <div className="flex justify-center">
               <button 
-                className="font-semibold px-4 sm:px-6 py-2 rounded-md transition-all border hover:bg-yellow-400/10 text-sm sm:text-base"
+                className="font-semibold px-3 sm:px-6 py-2 rounded-md transition-all border hover:bg-yellow-400/10 text-xs md:text-base"
                 style={{ 
                   fontFamily: 'Dosis, sans-serif',
                   color: 'var(--color-accent-yellow)',

src/components/universal/PatternBackground.tsx

@@ -1,6 +1,8 @@
 import patternSvg from '../../assets/patterns/Icon_Pattern.svg';
 
 export const PatternBackground = () => {
+  const isMobile = window.innerWidth < 768;
+
   return (
     <div
       className="fixed inset-0 w-full h-full pointer-events-none"
@@ -15,10 +17,11 @@ export const PatternBackground = () => {
           inset: '-50%',
           backgroundImage: `url(${patternSvg})`,
           backgroundRepeat: 'repeat',
-          backgroundSize: '800px',
+          backgroundSize: isMobile ? '600px' : '800px',
           opacity: 0.02,
           transform: 'rotate(-15deg)',
           transformOrigin: 'center',
+          willChange: 'auto',
         }}
       />
     </div>

src/pages/Events.tsx

@@ -63,9 +63,9 @@ function Events() {
   ];
 
   return (
-    <div className="w-full flex flex-col px-4 py-28 sm:py-40">
+    <div className="w-full flex flex-col px-4 py-8 sm:py-20 md:py-28 lg:py-40">
       <h1
-        className="text-white text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold mb-16 w-full max-w-6xl mx-auto text-left"
+        className="text-white text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold mb-8 md:mb-16 w-full max-w-6xl mx-auto text-left"
         style={{ fontFamily: 'var(--font-dosis)' }}
       >
         Upcoming Events

src/pages/Hero.tsx

@@ -9,7 +9,7 @@ import HTMLBox from '../components/hero/HTMLBox';
 export const HeroPage = () => {
   return (
     <>
-      <section className="w-full flex flex-col items-center justify-center overflow-hidden px-4 py-12 sm:py-20">
+      <section className="w-full flex flex-col items-center justify-center overflow-hidden px-4 py-12 sm:py-20 mt-8 md:mt-0">
         <Welcome />
         <HTMLBox />
         <Stats />