From 50c11c40875576a5a53549c955803106121b09c2 Mon Sep 17 00:00:00 2001
From: Yaoyao <guoyaoyaoguo@gmail.com>
Date: Thu, 1 Jan 2026 02:11:11 +0100
Subject: [PATCH 1/3] how to participate

---
 src/app/components/HowToParticipate.tsx | 413 +++++++++++-------------
 1 file changed, 187 insertions(+), 226 deletions(-)

diff --git a/src/app/components/HowToParticipate.tsx b/src/app/components/HowToParticipate.tsx
index 5bfdb06..d91e0fc 100644
--- a/src/app/components/HowToParticipate.tsx
+++ b/src/app/components/HowToParticipate.tsx
@@ -1,284 +1,245 @@
 import React from "react";
 import styled from "styled-components";
-import {
-  BlockTitle,
-  Body,
-  SectionTitle,
-} from "@/app/genericComponents/Typography";
+import { Body, SectionTitle } from "@/app/genericComponents/Typography";
 import {
   MobileBreakpoint,
-  Secondary100,
   SpacingL,
   SpacingM,
   SpacingS,
-  SpacingXL,
-  SpacingXXS,
 } from "@/app/genericComponents/tokens";
 import { Section } from "@/app/genericComponents/General";
 import { SecondaryButton } from "@/app/genericComponents/Buttons";
-import { lora } from "@/app/genericComponents/fonts";
+import { lora, montserrat } from "@/app/genericComponents/fonts";
 
-const GridContainer = styled.div`
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: ${SpacingXL};
+const SpecialSection = styled.div`
+  margin: 0;
+  width: 100vw;
+  background-size: cover;
+  background-position: center;
+  background-repeat: repeat;
+  position: relative;
+  z-index: 0;
+  padding: ${SpacingL} 0;
+`;
+
+const HowToTitle = styled(SectionTitle)`
   text-align: center;
+  color: #000000;
+  text-transform: uppercase;
+  margin-bottom: 40px;
+  line-height: 1.2;
+  font-size: 36px;
+  font-weight: 400;
 
   @media (max-width: ${MobileBreakpoint}) {
-    grid-template-columns: 1fr;
+    font-size: 30px;
   }
 `;
 
-const RoleBlock = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: ${SpacingM};
-  min-height: 300px;
-  justify-content: space-between;
-  position: relative;
-  border: ${SpacingXXS} dashed;
-
-  &:nth-child(1) {
-    border-color: #77c914;
-  }
-
-  &:nth-child(2) {
-    border-color: #5665ff;
-  }
-
-  &:nth-child(3) {
-    border-color: #fcaf01;
-  }
-
-  &:nth-child(4) {
-    border-color: #fb3e01;
-  }
+const GridContainer = styled.div`
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: ${SpacingM};
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 0 ${SpacingM};
 
   @media (max-width: ${MobileBreakpoint}) {
-    margin-top: ${SpacingM};
-    &:nth-child(1) {
-      margin-top: 0;
-    }
+    display: flex;
+    flex-direction: column;
+    gap: ${SpacingM};
+    max-width: 100%;
+    padding: 0 ${SpacingS};
+    align-items: center;
   }
 `;
 
-const SpecialSection = styled.div`
-  margin: 0;
-  gap: ${SpacingM};
-  width: 100vw;
+const PennantWrapper = styled.div`
   position: relative;
-  z-index: 0;
+  width: 100%;
+
+  @media (max-width: ${MobileBreakpoint}) {
+    max-width: 320px;
+  }
 `;
 
-const BlockImageTitle = styled.a`
+const PennantSvg = styled.svg`
   position: absolute;
-  top: -25%;
-  padding: ${SpacingS};
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
 `;
 
-const HowToTitle = styled(SectionTitle)`
-  padding: ${SpacingL};
-  width: fit-content;
-  margin: 0 auto ${SpacingL};
+const CardContent = styled.div`
   position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 30px 25px 100px;
 
-  &::before,
-  &::after {
-    content: "";
-    position: absolute;
-    width: 20%;
-    height: 50%;
-    border: 3px dashed;
+  @media (max-width: ${MobileBreakpoint}) {
+    padding: 20px 20px 90px;
   }
+`;
 
-  &::before {
-    top: -12px;
-    left: -9px;
-    border-right: none;
-    border-bottom: none;
-  }
+const RoleTitle = styled.h3`
+  font-size: 20px;
+  font-weight: bold;
+  color: #000000;
+  text-transform: uppercase;
+  margin: 0 0 8px 0;
+`;
 
-  &::after {
-    bottom: -10px;
-    right: -10px;
-    border-left: none;
-    border-top: none;
-  }
+const Text = styled(Body)`
+  color: #000000;
+  line-height: 1.25;
+  margin: 0 0 16px 0;
+  font-size: 17px;
 
   @media (max-width: ${MobileBreakpoint}) {
-    padding: ${SpacingM};
-
-    &::after {
-      bottom: -25px;
-    }
+    font-size: 15px;
   }
 `;
 
-const HowToTitleWrapper = styled.div`
-  position: relative;
-  width: fit-content;
-  margin: 0 auto ${SpacingL};
-  margin-top: ${SpacingS};
+const ApplyButton = styled(SecondaryButton)`
+  background-color: rgba(255, 255, 255, 0.4);
+  color: #000000;
+  font-weight: bold;
+  text-transform: uppercase;
+  padding: 10px 28px;
+  border-radius: 12px;
+  border: none;
+  font-size: 20px;
+  margin-top: auto;
 
-  &::before,
-  &::after {
-    content: "";
-    position: absolute;
-    width: 50%;
-    height: 20%;
-    border: 3px dashed;
-  }
-
-  &::before {
-    top: 1%;
-    left: 1%;
-    border-right: none;
-    border-bottom: none;
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.6);
   }
 
-  &::after {
-    bottom: 25%;
-    right: 1%;
-    border-left: none;
-    border-top: none;
+  @media (max-width: ${MobileBreakpoint}) {
+    font-size: 18px;
+    padding: 8px 24px;
   }
 `;
 
-const Text = styled(Body)`
-  position: relative;
-  margin-top: ${SpacingM};
-  margin-bottom: ${SpacingM};
-`;
-
-const ColoredButton = styled(SecondaryButton)`
-  background-color: ${(props) => props.color};
-  color: white;
+// Swallowtail pennant SVG component
+interface PennantProps {
+  color: string;
+}
 
-  &:hover {
-    background-color: ${(props) => props.color};
-    filter: brightness(0.75);
-  }
-`;
+const Pennant: React.FC<PennantProps> = ({ color }) => (
+  <PennantSvg
+    viewBox="0 0 341 382"
+    preserveAspectRatio="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <defs>
+      <filter id="shadow" x="0" y="0" width="100%" height="100%">
+        <feOffset dx="0" dy="4" in="SourceAlpha" result="offsetblur" />
+        <feComponentTransfer in="offsetblur" result="shadow">
+          <feFuncA type="linear" slope="1" />
+        </feComponentTransfer>
+        <feMerge>
+          <feMergeNode in="shadow" />
+          <feMergeNode in="SourceGraphic" />
+        </feMerge>
+      </filter>
+    </defs>
+    <g filter="url(#shadow)">
+      <path d="M4 0H333V293L333 370L168.5 293L4 370L4 293V0Z" fill={color} />
+    </g>
+  </PennantSvg>
+);
 
 export default function HowToParticipate() {
   return (
     <SpecialSection>
       <Section id="howtoparticipate">
-        <HowToTitleWrapper>
-          <HowToTitle className={lora.className}>
-            How to
-            <br />
-            Participate
-          </HowToTitle>
-        </HowToTitleWrapper>
+        <HowToTitle className={lora.className}>
+          How to
+          <br />
+          Participate
+        </HowToTitle>
         <GridContainer>
-          <RoleBlock>
-            <BlockImageTitle
-              href="https://my.hackupc.com/user/signup/mentor/"
-              target="_blank"
-            >
-              <BlockTitle
-                className={lora.className}
-                color={Secondary100}
-                haveMargin
+          <PennantWrapper>
+            <Pennant color="#A36FAE" />
+            <CardContent>
+              <RoleTitle className={montserrat.className}>Mentor</RoleTitle>
+              <Text className={montserrat.className}>
+                Help and motivate hackers with your knowledge! If you are
+                passionate about helping, and you can no longer apply as a
+                hacker, we invite you to live the hackathon experience from the
+                other side: Apply as a mentor!
+              </Text>
+              <ApplyButton
+                className={montserrat.className}
+                href="https://my.hackupc.com/user/signup/mentor/"
+                target="_blank"
               >
-                Mentor
-              </BlockTitle>
-            </BlockImageTitle>
-
-            <Text>
-              Help and motivate hackers with your knowledge! If you are
-              passionate about helping, and you can no longer apply as a hacker,
-              we invite you to live the hackathon experience from the other
-              side: Apply as a mentor!
-            </Text>
-            <ColoredButton
-              color="#77C914"
-              className={lora.className}
-              href="https://my.hackupc.com/user/signup/mentor/"
-              target="_blank"
-            >
-              Apply Now
-            </ColoredButton>
-          </RoleBlock>
-
-          <RoleBlock>
-            <BlockImageTitle
-              href="https://my.hackupc.com/user/signup/volunteer/"
-              target="_blank"
-            >
-              <BlockTitle
-                className={lora.className}
-                color={Secondary100}
-                haveMargin
+                Apply Now
+              </ApplyButton>
+            </CardContent>
+          </PennantWrapper>
+
+          <PennantWrapper>
+            <Pennant color="#B85353" />
+            <CardContent>
+              <RoleTitle className={montserrat.className}>Volunteer</RoleTitle>
+              <Text className={montserrat.className}>
+                Volunteers make HackUPC possible by assisting the hackers and
+                preparing the event. By joining our team of volunteers, you will
+                get to know how this incredible event works from the inside,
+                meet amazing people and live a great experience!
+              </Text>
+              <ApplyButton
+                className={montserrat.className}
+                href="https://my.hackupc.com/user/signup/volunteer/"
+                target="_blank"
               >
-                Volunteer
-              </BlockTitle>
-            </BlockImageTitle>
-            <Text>
-              Volunteers make HackUPC possible by assisting the hackers and
-              preparing the event. By joining our team of volunteers, you will
-              get to know how this incredible event works from the inside, meet
-              amazing people and live a great experience!
-            </Text>
-            <ColoredButton
-              color="#5665FF"
-              className={lora.className}
-              href="https://my.hackupc.com/user/signup/volunteer/"
-              target="_blank"
-            >
-              Apply now
-            </ColoredButton>
-          </RoleBlock>
-
-          <RoleBlock>
-            <BlockImageTitle href="mailto:logistics@hackupc.com">
-              <BlockTitle
-                className={lora.className}
-                color={Secondary100}
-                haveMargin
+                Apply now
+              </ApplyButton>
+            </CardContent>
+          </PennantWrapper>
+
+          <PennantWrapper>
+            <Pennant color="#3880B1" />
+            <CardContent>
+              <RoleTitle className={montserrat.className}>Partner</RoleTitle>
+              <Text className={montserrat.className}>
+                Gain visibility for your brand, introduce your products to
+                future talents. Join us and be remembered as part of this
+                hackathon by our participants!
+              </Text>
+              <ApplyButton
+                className={montserrat.className}
+                href="mailto:logistics@hackupc.com"
               >
-                Partner
-              </BlockTitle>
-            </BlockImageTitle>
-            <Text>
-              Boost your brand’s visibility and connect with future talent.
-              Showcase your products and leave a lasting impression on our
-              hackathon participants. Join us today!
-            </Text>
-            <ColoredButton
-              color="#FCAF01"
-              className={lora.className}
-              href="mailto:logistics@hackupc.com"
-            >
-              Contact us
-            </ColoredButton>
-          </RoleBlock>
-
-          <RoleBlock>
-            <BlockImageTitle href="mailto:sponsor@hackupc.com">
-              <BlockTitle
-                className={lora.className}
-                color={Secondary100}
-                haveMargin
+                Contact us
+              </ApplyButton>
+            </CardContent>
+          </PennantWrapper>
+
+          <PennantWrapper>
+            <Pennant color="#75AA7E" />
+            <CardContent>
+              <RoleTitle className={montserrat.className}>Sponsor</RoleTitle>
+              <Text className={montserrat.className}>
+                Don't just put your brand on another wall. Take the chance to
+                shape the tech scene of tomorrow by adding real value and making
+                it possible for hackers to build something they're proud of.
+              </Text>
+              <ApplyButton
+                className={montserrat.className}
+                href="mailto:sponsor@hackupc.com"
               >
-                Sponsor
-              </BlockTitle>
-            </BlockImageTitle>
-            <Text>
-              Don't just put your brand on another wall. Discover a unique
-              chance to shape the tech scene of tomorrow by adding real value
-              and connecting with the best engineers of the future.
-            </Text>
-            <ColoredButton
-              color="#FB3E01"
-              className={lora.className}
-              href="mailto:sponsor@hackupc.com"
-            >
-              Contact us
-            </ColoredButton>
-          </RoleBlock>
+                Contact us
+              </ApplyButton>
+            </CardContent>
+          </PennantWrapper>
         </GridContainer>
       </Section>
     </SpecialSection>

From ade4702e6561473167f57a1cb9cd09dcddc33e02 Mon Sep 17 00:00:00 2001
From: Yaoyao <guoyaoyaoguo@gmail.com>
Date: Thu, 1 Jan 2026 04:07:26 +0100
Subject: [PATCH 2/3] how to participate: treure salt de linia

---
 src/app/components/HowToParticipate.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/app/components/HowToParticipate.tsx b/src/app/components/HowToParticipate.tsx
index d91e0fc..53daf9a 100644
--- a/src/app/components/HowToParticipate.tsx
+++ b/src/app/components/HowToParticipate.tsx
@@ -160,9 +160,7 @@ export default function HowToParticipate() {
     <SpecialSection>
       <Section id="howtoparticipate">
         <HowToTitle className={lora.className}>
-          How to
-          <br />
-          Participate
+          How to Participate
         </HowToTitle>
         <GridContainer>
           <PennantWrapper>

From a2fbd8a8e54a7acfbf5d9843f5532a6b0b818366 Mon Sep 17 00:00:00 2001
From: Yaoyao <guoyaoyaoguo@gmail.com>
Date: Thu, 1 Jan 2026 04:11:31 +0100
Subject: [PATCH 3/3] how to participate: fix linter

---
 src/app/components/HowToParticipate.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/app/components/HowToParticipate.tsx b/src/app/components/HowToParticipate.tsx
index 53daf9a..f39fb40 100644
--- a/src/app/components/HowToParticipate.tsx
+++ b/src/app/components/HowToParticipate.tsx
@@ -159,9 +159,7 @@ export default function HowToParticipate() {
   return (
     <SpecialSection>
       <Section id="howtoparticipate">
-        <HowToTitle className={lora.className}>
-          How to Participate
-        </HowToTitle>
+        <HowToTitle className={lora.className}>How to Participate</HowToTitle>
         <GridContainer>
           <PennantWrapper>
             <Pennant color="#A36FAE" />