J/hc26 fixes

src/components/about/desktop-about.tsx

@@ -12,12 +12,12 @@ import { HackathonFaq } from "./hackathon-faq";
 export const DesktopAbout = () => (
   <div className="relative bg-linear-to-b from-[#0C1637] to-[#12204D]">
     {/* Welcome to HackCamp */}
-    <div className="relative z-30 h-150 mx-auto w-300 items-center grid grid-cols-2 text-white gap-20">
+    <div className="relative z-30 h-150 mx-auto w-300 mr-[10%] items-center grid grid-cols-2 text-white gap-20">
       <div />
       <div>
         <h2 className="font-title text-6xl">{WELCOME_TITLE}</h2>
         {WELCOME_PARAGRAPHS.map((paragraph, i) => (
-          <p key={i} className={i === 0 ? "text-lg" : "pt-6 text-lg"}>
+          <p key={i} className={i === 0 ? "text-[20px]" : "pt-6 text-[20px]"}>
             {paragraph}
           </p>
         ))}
@@ -38,7 +38,7 @@ export const DesktopAbout = () => (
       </Parallax>
 
       {/* Content */}
-      <div className="relative z-30 h-full top-0 left-0">
+      <div className="relative z-30 h-full top-0 left-0 text-[20px]">
         <div className="h-full mx-auto w-300 items-center grid grid-cols-2 text-white gap-20">
           <HackathonFaq className="flex flex-col justify-center h-full" />
           <div />

src/components/about/hackathon-faq.tsx

@@ -18,26 +18,26 @@ import { AccordionIcon } from "./accordion-icon";
 export const HackathonFaq = ({ className }: { className?: string }) => (
   <div className={className}>
     <h2 className="font-title text-6xl">{HACKATHON_TITLE}</h2>
-    <p className="text-lg">{HACKATHON_DESCRIPTION}</p>
+    <p className="text-[20px]">{HACKATHON_DESCRIPTION}</p>
     <Accordion type="single" collapsible>
       <AccordionItem value="benefits">
         <AccordionTrigger
           variant="hero"
           icon={<AccordionIcon />}
-          className="text-lg items-center"
+          className="text-base md:text-[20px] items-center"
         >
           {HACKATHON_BENEFITS_QUESTION}
         </AccordionTrigger>
         <AccordionContent>
-          <ul className="list-disc pl-6 space-y-1 text-lg">
+          <ul className="list-disc pl-6 space-y-1 text-[20px]">
             {HACKATHON_BENEFITS.map((benefit) => (
               <li key={benefit}>{benefit}</li>
             ))}
           </ul>
         </AccordionContent>
       </AccordionItem>
     </Accordion>
-    <p className="text-lg">
+    <p className="text-[20px]">
       To learn more about hackathons and what to expect, check out our article
       on{" "}
       <a

src/components/about/mobile-about.tsx

@@ -5,7 +5,7 @@ import Image from "next/image";
 import { HackathonFaq } from "./hackathon-faq";
 
 export const MobileAbout = () => (
-  <div className="relative overflow-x-clip bg-linear-to-b from-[#0C1637] to-[#12204D] text-white">
+  <div className="relative overflow-x-clip bg-linear-to-b from-[#0C1637] to-[#12204D] text-white pt-22">
     {/* Welcome to HackCamp */}
     <div className="relative z-10 px-6 pt-10 pb-15">
       <h2 className="font-title text-4xl">{WELCOME_TITLE}</h2>

src/components/events/desktop-events.tsx

@@ -34,7 +34,7 @@ export const DesktopEvents = () => (
           {/* Copy */}
           <div className="pt-45">
             <h2 className="font-title text-6xl">{EVENTS_TITLE}</h2>
-            <p className="text-lg">{EVENTS_DESCRIPTION}</p>
+            <p className="text-[20px]">{EVENTS_DESCRIPTION}</p>
           </div>
 
           {/* Sheep */}

src/components/hero/desktop-hero.tsx

@@ -118,7 +118,7 @@ export const DesktopHero = () => (
           <Parallax
             speed={-0.14}
             anchor="top"
-            className="absolute z-40 -left-[6.658%] top-[9.696%] w-[104.286%]"
+            className="absolute z-40 left-[-6.658%] top-[9.696%] w-[104.286%]"
           >
             <Image
               src="/assets/hero/desktop-bottom-cloud-stars.svg"
@@ -133,11 +133,11 @@ export const DesktopHero = () => (
 
       {/* Hero content */}
       <div className="relative z-20 min-h-screen pt-60 pb-[22vw]">
-        <div className="mx-auto w-[80vw] flex flex-col items-center">
-          <h1 className="font-title text-9xl uppercase text-white">
+        <div className="mx-auto w-[53vw] flex flex-col items-start">
+          <h1 className="font-title text-[170px] leading-42.5 uppercase text-white">
             {HERO_TITLE}
           </h1>
-          <h3 className="text-white text-2xl">{HERO_TAGLINE}</h3>
+          <h3 className="text-white text-2xl -mt-5">{HERO_TAGLINE}</h3>
           <div className="flex gap-4 items-center pt-8">
             {HERO_CTA_LINKS.map((link) => (
               <CtaLink key={link.label} href={link.href}>

src/components/prizing/desktop-prizing.tsx

@@ -25,7 +25,7 @@ export const DesktopPrizing = () => (
         <h2 className="font-title text-6xl leading-none pb-10">
           {PRIZING_TITLE}
         </h2>
-        <div className="w-1/2 text-lg flex flex-col gap-5 pb-40">
+        <div className="w-1/2 text-[20px] flex flex-col gap-5 pb-40">
           {PRIZING_PARAGRAPHS.map((paragraph, i) => (
             <p key={i}>{paragraph}</p>
           ))}

src/components/stats/mobile-stats.tsx

@@ -9,7 +9,7 @@ import { StarRight } from "./star-right";
 const [hackers, projects, mentors] = STATS;
 
 export const MobileStats = () => (
-  <div className="relative overflow-x-clip text-white">
+  <div className="relative overflow-x-clip text-white pt-20">
     <h2 className="relative z-10 px-6 pt-4 font-title text-4xl leading-none">
       {STATS_TITLE}
     </h2>
@@ -21,23 +21,16 @@ export const MobileStats = () => (
         alt=""
         width={1172}
         height={389}
-        className="pointer-events-none absolute top-[8%] left-0 z-0 w-full h-auto"
-      />
-      <Image
-        src="/assets/stats/desktop-small-stars.svg"
-        alt=""
-        width={1172}
-        height={389}
-        className="pointer-events-none absolute bottom-[4%] left-0 z-0 w-full h-auto -scale-x-100"
+        className="pointer-events-none absolute top-[20%] left-0 z-0 w-full h-auto scale-300 rotate-90"
       />
       <div className="relative z-10 flex flex-col">
-        <div className="w-[72%] -ml-[4%]">
+        <div className="w-[118%] -ml-[4%]">
           <StarLeft {...hackers} idPrefix="m-star-left" />
         </div>
-        <div className="w-[68%] self-end -mr-[4%] -mt-[40%]">
+        <div className="w-[120%] self-end -mr-[20%] -mt-[60%]">
           <StarCenter {...projects} idPrefix="m-star-center" />
         </div>
-        <div className="w-[72%] -ml-[6%] -mt-[40%]">
+        <div className="w-[130%] -ml-[30%] -mt-[60%]">
           <StarRight {...mentors} idPrefix="m-star-right" />
         </div>
       </div>

src/components/stats/star-left.tsx

@@ -264,6 +264,6 @@ export const StarLeft = ({
         </radialGradient>
       </defs>
     </svg>
-    <StarOverlay value={value} label={label} className="left-[40%] top-[52%]" />
+    <StarOverlay value={value} label={label} className="left-[37.5%] top-[52%]" />
   </div>
 );

src/components/stats/star-overlay.tsx

@@ -12,11 +12,11 @@ type StarOverlayProps = StarContent & {
 export const StarOverlay = ({ value, label, className }: StarOverlayProps) => (
   <div
     className={cn(
-      "absolute -translate-x-1/2 -translate-y-1/2 text-center text-[#0B1327] pointer-events-none select-none",
+      "absolute -translate-x-1/2 -translate-y-1/2 text-center text-[#0B1327] flex flex-col items-center pointer-events-none select-none",
       className
     )}
   >
-    <p className="font-title text-3xl md:text-5xl leading-none">{value}</p>
-    <p className="font-title text-sm md:text-xl leading-tight">{label}</p>
+    <p className="font-title text-6xl md:text-7xl leading-none">{value}</p>
+    <p className="font-title text-lg leading-4 md:text-2xl md:leading-[1.2rem] -mt-3 max-w-25">{label}</p>
   </div>
 );

src/sections/tall-clouds-section.tsx

@@ -9,11 +9,16 @@ export default function TallCloudsSection({
   return (
     <div className="relative bg-linear-to-b from-[#12204D] to-[#28418D]">
       <div className="pointer-events-none absolute inset-0 z-0 hidden overflow-hidden md:block">
-        <div className="absolute right-0 -bottom-40 w-full">
+        {/* The SVG's canvas is 1897 wide, but the artwork is laid out on the
+            site's 1531 design width: the clouds start 106.78 units in and the
+            canvas runs 259 units past the design's right edge. Scale the image
+            so 1531 canvas units span the section (1897/1531) and pull it left
+            by the 106.78-unit gutter (106.78/1531); the overflow clips the rest. */}
+        <div className="absolute -bottom-40 -left-[6.974%] w-[123.906%]">
           <Image
             src="/assets/tall-clouds-section/desktop-tall-clouds.svg"
             alt=""
-            width={1531}
+            width={1897}
             height={2651}
             className="block w-full h-auto"
           />