Add LA CTF Mini section to the website

components/LACTFMiniStrip.js

@@ -0,0 +1,43 @@
+import Image from "next/image";
+
+import foodSvg from "../public/images/lactfmini-food.svg";
+import tshirtSvg from "../public/images/lactfmini-tshirt.svg";
+import hangoutSvg from "../public/images/lactfmini-hangout.svg";
+
+import styles from "../styles/LACTFMini.module.css";
+import styles_about from "../styles/AboutStrip.module.css";
+
+const AboutStrip = () => {
+  return (
+    <div className={styles.lactfminiFlexContainer}>
+      <AboutCard icon={foodSvg} big={true} title="Food" />
+      <AboutCard icon={tshirtSvg} big={true} title="Swag" />
+      <AboutCard
+        icon={hangoutSvg}
+        big={true}
+        title="Hang out with other CTF-ers!"
+      />
+    </div>
+  );
+};
+
+const AboutCard = ({ icon, big, title, desc }) => {
+  return (
+    <div className={styles_about.aboutBlock}>
+      <div className={styles_about.aboutImageContainer}>
+        <Image
+          className={
+            big ? styles_about.aboutImageBig : styles_about.aboutImageSmall
+          }
+          src={icon}
+          layout="fill"
+          alt="About icon showing details about LA CTF."
+        ></Image>
+      </div>
+      <h2>{title}</h2>
+      <p>{desc}</p>
+    </div>
+  );
+};
+
+export default AboutStrip;

components/Navbar.js

@@ -23,11 +23,14 @@ function Navbar() {
           </button>
         </li>
         <li>
-          <Link href="/#contact">Contact</Link>
+          <Link href="/#contact">Contacts</Link>
         </li>
         <li>
           <Link href="/#archive">Archive</Link>
         </li>
+        <li>
+          <Link href="/#lactfmini">LA CTF Mini</Link>
+        </li>
         <li>
           <Link href="/#sponsors">Sponsors</Link>
         </li>

next.config.js

@@ -13,6 +13,15 @@ const nextConfig = {
     // your project has ESLint errors.
     ignoreDuringBuilds: true,
   },
+  webpack: (config, { dev }) => {
+    if (dev) {
+      config.watchOptions = {
+        poll: 1000,
+        aggregateTimeout: 300,
+      };
+    }
+    return config;
+  },
   async redirects() {
     return [
       {

pages/index.js

@@ -22,6 +22,7 @@ import AboutStrip from "../components/AboutStrip";
 import TropicalImage from "../components/TropicalImage";
 import PrizesStrip from "../components/PrizesStrip";
 import SponsorsStrip from "../components/Sponsors";
+import LACTFMiniStrip from "../components/LACTFMiniStrip";
 import Archive from "../components/Archive.js";
 
 export default function Home() {
@@ -113,17 +114,17 @@ export default function Home() {
                   CTFtime
                 </button>
               </a>
-              {/* <a href="https://zoom.lac.tf">
+              <a href="https://zoom.lac.tf">
                 <button
                   className={
                     styles.bigFatPinkButtonThatSaysRegisterUnderTheTimersOrSmth
                   }
                 >
                   Zoom
                 </button>
-              </a> */}
+              </a>
             </div>
-            {/* <div className={styles.heroButtonContainer}>
+            <div className={styles.heroButtonContainer}>
               <a href="https://static.lac.tf/schedule.pdf">
                 <button
                   className={
@@ -133,7 +134,7 @@ export default function Home() {
                   Schedule
                 </button>
               </a>
-            </div> */}
+            </div>
           </div>
         </section>
 
@@ -167,16 +168,6 @@ export default function Home() {
           <PrizesStrip />
         </section>
 
-        {/* <section className={`${styles.sponsors} ${styles.wavySection}`}>
-          <h2 id="lactf-mini">
-            <span className={styles.headerText}>LA CTF Mini</span>
-          </h2>
-          <p className={styles.headerDesc}>
-            We are delighted to announce that a new CTF category - LA CTF Mini!
-            (ADDITIONAL DESCRIPTION)
-          </p>
-        </section> */}
-
         <section className={`${styles.sponsors} ${styles.wavySection}`}>
           <h2 id="sponsors">
             <span className={styles.headerText}>Sponsors</span>
@@ -196,6 +187,42 @@ export default function Home() {
           <SponsorsStrip />
         </section>
 
+        <section className={`${styles.lactfmini}`}>
+          <div className={styles.lactfminiFlexContainer}>
+            <h2 id="lactfmini">
+              <span className={styles.headerText}>LA CTF Mini</span>
+            </h2>
+            <img
+              src={"/images/flag.png"}
+              alt="Flag"
+              className={styles.lactfminiFlagIcon}
+            />
+          </div>
+
+          <p className={styles.headerDesc}>
+            This year, we're excited to launch LA CTF Mini, a special program
+            inviting high school students from the LA area to participate in LA
+            CTF 2025! You'll enjoy all the perks of LA CTF, including:
+          </p>
+          <br></br>
+
+          <LACTFMiniStrip />
+
+          <br></br>
+          <p className={`${styles.headerDesc} ${styles.lactfminiWaiver}`}>
+            IMPORTANT: High school students, please sign the following{" "}
+            <u>
+              <Link
+                href="https://request.finance.ucla.edu/?frm_id=EventWaiver&event_id=a1qHp000004gaj9"
+                className={styles.mailto}
+              >
+                waiver
+              </Link>
+            </u>{" "}
+            by <b>Friday, 31st Jan 2025</b>!
+          </p>
+        </section>
+
         <section className={`${styles.archive}`}>
           <h2 id="archive">
             <span className={styles.headerText}>Archive</span>

styles/Home.module.css

@@ -323,6 +323,48 @@ a.mailto:hover {
   overflow-y: visible;
 }
 
+/* === LA CTF Mini === */
+
+.lactfminiFlexContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.lactfminiFlagIcon {
+  margin: 0.5rem 0 1.5rem 0;
+  height: 3.5rem;
+  width: auto;
+  display: inline;
+  vertical-align: middle;
+}
+
+.lactfminiWaiver {
+  font-size: 1.2rem;
+}
+
+.lactfmini {
+  position: relative;
+  z-index: 10;
+  /* min-height: calc(var(--car-offset) + 120vh); */
+  margin: 0px;
+  padding: 10vh 0px 30vh 0px;
+  min-height: 100vh;
+  background: linear-gradient(
+    180deg,
+    #39251f 0%,
+    #612e1f 34.33%,
+    #e49651 65.17%,
+    #ffbeb2 93.68%
+  );
+  /* 50% 80%/100% 60% no-repeat var(--sunrise-gradient),
+    50% 0%/100% 50% no-repeat linear-gradient(#39251f 0%, #39251f 100%),
+    50% 100%/100% 50% no-repeat linear-gradient(#f2d219 0%, #f2d219 100%); */
+  clip-path: url(#sponsorsClipPath);
+  overflow-y: visible;
+}
+
 /* === Archive === */
 
 .archive {

styles/LACTFMini.module.css

@@ -0,0 +1,9 @@
+.lactfminiFlexContainer {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin: 0px;
+  padding: 0px 2vw;
+  height: fit-content;
+  background-color: rgba(0, 0, 0, 60%);
+}