From b159fc762cdba3d80f3851b281bec5936c9c103d Mon Sep 17 00:00:00 2001 From: Yaoyao Date: Tue, 30 Dec 2025 23:47:25 +0100 Subject: [PATCH 1/2] how to participate - mobile --- public/brick-wall-mobile.svg | 242 ++++++++++++ src/app/components/HowToParticipate.tsx | 480 ++++++++++-------------- src/app/genericComponents/fonts.ts | 3 +- 3 files changed, 437 insertions(+), 288 deletions(-) create mode 100644 public/brick-wall-mobile.svg diff --git a/public/brick-wall-mobile.svg b/public/brick-wall-mobile.svg new file mode 100644 index 00000000..12d9f128 --- /dev/null +++ b/public/brick-wall-mobile.svg @@ -0,0 +1,242 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/components/HowToParticipate.tsx b/src/app/components/HowToParticipate.tsx index f0a61e39..b5083b89 100644 --- a/src/app/components/HowToParticipate.tsx +++ b/src/app/components/HowToParticipate.tsx @@ -1,351 +1,257 @@ import React from "react"; -import Image from "next/image"; import styled from "styled-components"; import { - BlockTitle, 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 { silkscreen } 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}; - text-align: center; - background-color: black; +const SpecialSection = styled.div` + margin: 0; + width: 100vw; + background-image: url('/brick-wall-mobile.svg'); + 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 ImageIcon = styled(Image)` - margin-bottom: ${SpacingS}; - transition: transform 0.3s ease-in-out; - - &:hover { - transform: scale(1.5); - } +const GridContainer = styled.div` + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: ${SpacingM}; + max-width: 1100px; + margin: 0 auto; + padding: 0 ${SpacingM}; - @keyframes wiggle { - 0% { - transform: translateX(-15px); - } - 50% { - transform: translateX(15px); - } - 100% { - transform: translateX(-15px); - } + @media (max-width: ${MobileBreakpoint}) { + display: flex; + flex-direction: column; + gap: ${SpacingM}; + max-width: 100%; + padding: 0 ${SpacingS}; + align-items: center; } - - animation: wiggle 2s infinite ease-in-out; `; -const RoleBlock = styled.div` - display: flex; - flex-direction: column; - align-items: center; - padding: ${SpacingM}; - min-height: 300px; - justify-content: space-between; +const PennantWrapper = styled.div` 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; - } - - &:nth-child(1) ${ImageIcon} { - animation-delay: 0s; - } - - &:nth-child(2) ${ImageIcon} { - animation-delay: 0.3s; - } - - &:nth-child(3) ${ImageIcon} { - animation-delay: 0.6s; - } - - &:nth-child(4) ${ImageIcon} { - animation-delay: 0.9s; - } - + width: 100%; + @media (max-width: ${MobileBreakpoint}) { - margin-top: ${SpacingM}; - &:nth-child(1) { - margin-top: 0; - } + max-width: 320px; } `; -const SpecialSection = styled.div` - margin: 0; - gap: ${SpacingM}; - width: 100vw; - background-color: black; - position: relative; - z-index: 0; -`; - -const BlockImageTitle = styled.a` +const PennantSvg = styled.svg` position: absolute; - top: -25%; - background-color: black; - 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; - - &::before, - &::after { - content: ""; - position: absolute; - width: 20%; - height: 50%; - border: 3px dashed; + z-index: 1; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + padding: 30px 25px 100px; + + @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 = ({ color }) => ( + + + + + + + + + + + + + + + + + +); export default function HowToParticipate() { return (
- - - How to -
- Participate - - + + How to +
+ Participate + - - - - + + + + Mentor - - - - - 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! - - - Apply Now - - - - - - - + + 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! + + + Apply Now + + + + + + + + Volunteer - - - - 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! - - - Apply now - - - - - - - + + 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! + + + Apply Now + + + + + + + + Partner - - - - 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! - - - Contact us - - - - - - - + + Gain visibility for your brand, introduce your products to future + talents. Join us and be remembered as part of this + hackathon by our participants! + + + Contact us + + + + + + + + Sponsor - - - - 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. - - - Contact us - - + + + 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. + + + Contact us + + +
diff --git a/src/app/genericComponents/fonts.ts b/src/app/genericComponents/fonts.ts index eb96b8db..770514dc 100644 --- a/src/app/genericComponents/fonts.ts +++ b/src/app/genericComponents/fonts.ts @@ -1,7 +1,8 @@ -import { Montserrat, Silkscreen } from "next/font/google"; +import { Montserrat, Silkscreen, Lora } from "next/font/google"; export const montserrat = Montserrat({ subsets: ["latin"] }); export const silkscreen = Silkscreen({ subsets: ["latin"], weight: "400", }); +export const lora = Lora({ subsets: ["latin"] }); From 1f7d854e617a9565b5e6c510120bfb75da27856c Mon Sep 17 00:00:00 2001 From: Yaoyao Date: Wed, 31 Dec 2025 18:21:57 +0100 Subject: [PATCH 2/2] fix: format HowToParticipate.tsx with prettier --- src/app/components/HowToParticipate.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/app/components/HowToParticipate.tsx b/src/app/components/HowToParticipate.tsx index 9583e90f..7e394a4f 100644 --- a/src/app/components/HowToParticipate.tsx +++ b/src/app/components/HowToParticipate.tsx @@ -1,9 +1,6 @@ import React from "react"; import styled from "styled-components"; -import { - Body, - SectionTitle, -} from "@/app/genericComponents/Typography"; +import { Body, SectionTitle } from "@/app/genericComponents/Typography"; import { MobileBreakpoint, SpacingL,