Fix mobile layout for events page

src/app/pages/claim-id/page.tsx

@@ -40,7 +40,7 @@ export default function ClaimIdPage() {
             Get your Web3 identity
           </h1>
 
-          <p className="text-base sm:text-lg md:text-2xl text-hero-text font-sans font-medium">
+          <p className="text-xl md:text-xl text-black text-hero-text font-medium">
             Ditch the long standard wallet addresses <br />
             Claim your personalised, readable Web3 identity <br />
             exclusive to University of Auckland Web3 Club members.

src/components/about.tsx

@@ -37,7 +37,7 @@ export function About() {
             Decentralised Future
           </h2>
 
-          <p className="text-base sm:text-lg leading-relaxed text-hero-text font-sans">
+          <p className="text-base sm:text-lg leading-relaxed text-hero-text font-sans font-medium">
             We are Auckland's premier student-led organisation dedicated <br/>
             to blockchain education and innovation. We bridge the gap between <br/>
             university theory and industry-grade Web3 development.

src/components/events.tsx

@@ -48,7 +48,7 @@ export function Events() {
           <h2 className="text-5xl md:text-6xl font-black leading-tight mb-4 text-hero-text">
             Moments That Matter
           </h2>
-
+          
           <p className="text-xl font-medium text-black text-hero-text">
             From launch nights to industry meetups, see what
             <br />
@@ -61,27 +61,45 @@ export function Events() {
           {displayEvents.map((section) => (
             <div
               key={section.label}
-              className={`${section.bg} rounded-[28px] p-6 md:p-6`}
+              className={`${section.bg} rounded-[28px] p-6`}
             >
               {/* Title */}
               <h3 className="text-2xl font-semibold mb-4 font-sans">
                 {section.label}
               </h3>
 
-              {/* Layout */}
-              {/*// grid-cols-[2fr_1fr] frist 2 column, 1 seocnd column*/}
-              <div className="grid grid-cols-[2fr_1fr] gap-4"> 
+              {/* Mobile: 3 stacked full-width images */}
+              <div className="flex flex-col gap-4 md:hidden">
+                {section.events.slice(0, 3).map((event, index) => (
+                  <div
+                    key={`mobile-${event}-${index}`}
+                    className="relative overflow-hidden rounded-2xl aspect-[16/10] w-full"
+                  >
+                    <Image
+                      src={event}
+                      alt={section.label}
+                      fill
+                      sizes="100vw"
+                      className="object-cover"
+                    />
+                  </div>
+                ))}
+              </div>
+
+              {/* Desktop: original 2fr_1fr layout with all 5 images */}
+              <div className="hidden md:grid grid-cols-[2fr_1fr] gap-4">
                 {/* Left Grid */}
                 <div className="grid grid-cols-2 gap-4">
-                  {section.events.slice(0, 4).map((event, index) => ( // index is added to make sure all keys(images) are unique remove index when we have different images
+                  {section.events.slice(0, 4).map((event, index) => (
                     <div
-                      key={`${event}-${index}`} // making sure all keys(images) are unique change it back to key={event} when we have different images
-                      className="relative overflow-hidden rounded-2xl aspect-[16/10]" // aspect-[16/10] is Width : Height = 16 : 10
+                      key={`desktop-${event}-${index}`}
+                      className="relative overflow-hidden rounded-2xl aspect-[16/10]"
                     >
                       <Image
                         src={event}
                         alt={section.label}
                         fill
+                        sizes="(max-width: 768px) 100vw, 33vw"
                         className="object-cover"
                       />
                     </div>
@@ -94,6 +112,7 @@ export function Events() {
                     src={section.events[4]}
                     alt={section.label}
                     fill
+                    sizes="(max-width: 768px) 100vw, 25vw"
                     className="object-cover"
                   />
                 </div>

src/components/hero.tsx

@@ -8,7 +8,7 @@ export function Hero() {
         <div className="flex flex-col lg:flex-row items-center justify-between gap-16">
           {/* Hero text (left side) */}
           <div className="flex-1 space-y-8 text-center lg:text-left">
-            <h1 className="text-6xl sm:text-7xl md:text-8xl lg:text-[7rem] font-black tracking-tight[-0.05em] leading-[0.9] whitespace-nowrap">
+            <h1 className="text-6xl sm:text-7xl md:text-8xl lg:text-[7rem] font-black tracking-tight leading-[1.05]">
               <span className="text-web3 font-russo">WEB3 </span>
               <span className="text-uoa font-russo">UOA</span>
             </h1>
@@ -74,8 +74,7 @@ export function Hero() {
                 <Linkedin className="w-6 h-6" />
               </a>
             </div>
-          </div> 
-
+          </div>
 
           {/* Logo element (right side) */}
           <div className="flex-1 flex justify-center lg:justify-end items-center relative">
@@ -91,7 +90,7 @@ export function Hero() {
               <img
                 src="/logo/web3uoa_logo.png"
                 alt="WEB3UOA Logo Cube"
-                className="w-full h-full object-contain drop-shadow-2xl animate-[float_4s_ease-in-out_infinite] transition-transform duration-500 ease-out group-hover:scale-110 group-hover:rotate-[10deg]"
+                className="w-full h-full object-contain drop-shadow-2xl translate-x-30 animate-[float_4s_ease-in-out_infinite] transition-transform duration-500 ease-out group-hover:scale-110 group-hover:rotate-[10deg]"
                 style={{
                   filter: "drop-shadow(0 25px 25px rgb(0 0 0 / 0.15))",
                 }}

src/components/navbar.tsx

@@ -19,7 +19,8 @@ const navLinks = [
   // { label: "Partners", href: "#partners" },
   { label: "Search", href: "#search" }, // TODO: add search page
   { label: "Join Us", href: "/pages/join-us" },
-  { label: "Connect Wallet", href: "/pages/claim-id" }, // TODO: add wallet connection
+  { label: "Claim ID", href: "/pages/claim-id" },
+  //{ label: "Connect Wallet", href: "/pages/claim-id" }, // TODO: add wallet connection
   //{ label: "Claim your Web3 ID!", href: "#identity", isCTA: true }  // not sure if need 
 ];
 

src/components/sponsors.tsx

@@ -57,7 +57,7 @@ export function Sponsors() {
             <h2 className="text-5xl md:text-6xl font-black leading-tight mb-4 text-hero-text font-sans">
               Our Sponsors
             </h2>
-            <p className="text-base sm:text-lg md:text-2xl text-hero-text font-sans font-medium">
+            <p className="text-base sm:text-lg md:text-xl text-hero-text font-sans font-medium">
               Collaborating with industry leaders to drive<br />
               the future of Web3 in New Zealand.
             </p>