Skip to content

Commit

Permalink
Styles refactor (#21)
Browse files Browse the repository at this point in the history 
* how to participate is refactor

* about refactored

* added more tokens

* corrected styles with new tokens

* removed all magic numbers
  • Loading branch information
@carlotacb
carlotacb authored Feb 7, 2024
1 parent 89b578c commit 9f42436
Show file tree
Hide file tree
Showing 6 changed files with 267 additions and 124 deletions.
127 changes: 60 additions & 67 deletions src/app/components/About.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,89 +1,82 @@
import styled from "styled-components";
import Image from "next/image";
import { Body, SectionTitle, BlockTitle } from "@/app/genericComponents/Fonts";
import {
MobileBreakpoint,
Primary500,
SpacingM,
SpacingS,
} from "@/app/genericComponents/tokens";
import { Section } from "@/app/genericComponents/General";

const Card = styled.div`
padding: 20px;
flex-basis: 50%;
`;

const Section = styled.div`
background-color: #eaf7ff;
color: #240059;
const SectionStyled = styled(Section)`
background-color: rgba(234, 247, 255, 0.9);
color: ${Primary500};
`;

const Container = styled.div`
display: flex;
flex-wrap: wrap;
flex-direction: row;
gap: ${SpacingM};
@media (max-width: ${MobileBreakpoint}) {
flex-direction: column;
}
`;

const ImgSection = styled.div`
align-content: center;
display: flex;
justify-content: center;
margin-bottom: 10px;
`;
const Title = styled.h1`
font-weight: bold;
text-align: center;
margin-bottom: ${SpacingS};
`;

const Subtitle = styled.h2`
font-weight: bold;
`;

const Description = styled.div``;

export default function About() {
return (
<div>
<Section>
<SectionStyled>
<SectionTitle>HackUPC beyond the stars</SectionTitle>
<Container>
<div>
<ImgSection>
<Image
src="/saturnPlanet.svg"
width={110}
height={110}
alt="Saturn Planet"
/>
</ImgSection>
<BlockTitle color={Primary500}>What is a hackathon?</BlockTitle>
<Body>
The word hackathon is a combination of the words "<b>HACK</b>
", standing for creative problem-solving, and "<b>MARATHON</b>
". These are awesome events full of creativity, technology, and
passionate tech-related students of different skill levels
collaborating and creating. During a certain period of time,
attendees work in <b>TEAMS</b> to develop apps, games, robots…
literally anything you want to <b>BUILD & LEARN</b> about!
</Body>
</div>
<div>
<Title>HackUPC beyond the stars</Title>
<ImgSection>
<Image
src="/hackupcLogo.svg"
width={90}
height={90}
alt="HackUPC Logo"
/>
</ImgSection>
<BlockTitle color={Primary500}>About HackUPC?</BlockTitle>
<Body>
HackUPC is the first student hackathon in Spain. Once a year, we aim
to provide a space for students of all experience levels from all
around the world where they can improve and learn new skills, meet
awesome people, and overall have a great experience! This year's
edition will be the first since the pandemic to have a{" "}
<b>FULLY IN-PERSON</b> format, meaning that you can only participate
by physically attending the event.
</Body>
</div>
<Container>
<Card>
<ImgSection>
<Image
src="/saturnPlanet.svg"
width={110}
height={110}
alt="Saturn Planet"
/>
</ImgSection>
<Subtitle>What is a hackathon?</Subtitle>
<Description>
The word hackathon is a combination of the words "<b>HACK</b>
", standing for creative problem-solving, and "<b>MARATHON</b>
". These are awesome events full of creativity, technology, and
passionate tech-related students of different skill levels
collaborating and creating. During a certain period of time,
attendees work in <b>TEAMS</b> to develop apps, games, robots…
literally anything you want to <b>BUILD & LEARN</b> about!
</Description>
</Card>
<Card>
<ImgSection>
<Image
src="/hackupcLogo.svg"
width={90}
height={90}
alt="HackUPC Logo"
/>
</ImgSection>
<Subtitle>About HackUPC?</Subtitle>
<Description>
HackUPC is the first student hackathon in Spain. Once a year, we
aim to provide a space for students of all experience levels from
all around the world where they can improve and learn new skills,
meet awesome people, and overall have a great experience! This
year's edition will be the first since the pandemic to have a{" "}
<b>FULLY IN-PERSON</b> format, meaning that you can only
participate by physically attending the event.
</Description>
</Card>
</Container>
</Section>
</div>
</Container>
</SectionStyled>
);
}
105 changes: 48 additions & 57 deletions src/app/components/HowToParticipate.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,17 @@
import React from "react";
import Image from "next/image";
import styled, { keyframes } from "styled-components";
import { Body, SectionTitle, BlockTitle } from "@/app/genericComponents/Fonts";
import {
MobileBreakpoint,
Primary100,
Secondary500,
SpacingL,
SpacingM,
SpacingS,
} from "@/app/genericComponents/tokens";
import { GenericButton } from "@/app/genericComponents/Buttons";
import { Section } from "@/app/genericComponents/General";

const rotate = keyframes`
0% {
Expand All @@ -14,25 +25,22 @@ const rotate = keyframes`
}
`;

const SectionTitle = styled.p`
text-align: center;
font-weight: bold;
font-size: 2rem;
margin-bottom: 4rem;
`;

const Section = styled.div`
const RoleBlock = styled.div<{ imageLeft?: boolean }>`
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
margin-bottom: 4rem;
margin-bottom: ${SpacingL};
gap: ${SpacingM};
flex-direction: ${(props) => (props.imageLeft ? "row-reverse" : "row")};
@media (max-width: ${MobileBreakpoint}) {
flex-direction: column;
}
`;

const ImageButton = styled.a`
display: inline-block;
width: 15%;
margin-right: 20px; /* Adjust the margin as needed */
width: 20%;
animation: ${rotate} 3s infinite linear;
transition: transform 0.3s ease-in-out;
Expand All @@ -44,50 +52,33 @@ const ImageButton = styled.a`
width: 100%;
height: auto;
}
@media (max-width: ${MobileBreakpoint}) {
width: 30%;
}
`;

const TextContainer = styled.div`
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
align-items: flex-start;
width: 80%;
max-width: 1000px;
`;

const Title = styled.p`
font-weight: bold;
font-size: 1.5rem;
color: ${(props) => props.color || "#000"};
margin-bottom: 1rem;
`;
const Button = styled.button`
padding: 1rem;
background-color: ${(props) => props.color};
color: ${(props) => (props.color === "#D9AFFF" ? "#240059" : "#fff")};
font-weight: bold;
border: none;
border-radius: 1rem;
cursor: pointer;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
&:hover {
background-color: ${(props) =>
props.color === "#D9AFFF" ? "#ac4dff" : "#9c1916"};
color: #fff;
@media (max-width: ${MobileBreakpoint}) {
width: 100%;
}
`;

const Text = styled.p`
width: 50%;
margin-bottom: 1rem;
const Text = styled(Body)`
margin-bottom: ${SpacingS};
`;

export default function HowToParticipate() {
return (
<div>
<Section>
<SectionTitle>How to participate</SectionTitle>
<Section>
<RoleBlock>
<ImageButton
href="https://my.hackupc.com/user/signup/mentor/"
target="_blank"
Expand All @@ -96,7 +87,7 @@ export default function HowToParticipate() {
<Image src="/planetMentor.svg" alt="altText" width="15" height="15" />
</ImageButton>
<TextContainer>
<Title color="#E23532">Mentor</Title>
<BlockTitle color={Secondary500}>Mentor</BlockTitle>
<Text>
Help and motivate hackers with your knowledge. Either because you
are passionate about it, or if you've graduated more than a year ago
Expand All @@ -107,12 +98,12 @@ export default function HowToParticipate() {
target="_blank"
rel="noopener noreferrer"
>
<Button color="#E23532">Apply as Mentor</Button>
<GenericButton color={Secondary500}>Apply as Mentor</GenericButton>
</a>
</TextContainer>
</Section>
</RoleBlock>

<Section style={{ flexDirection: "row-reverse" }}>
<RoleBlock imageLeft>
<ImageButton
href="https://my.hackupc.com/user/signup/volunteer/"
target="_blank"
Expand All @@ -126,7 +117,7 @@ export default function HowToParticipate() {
/>
</ImageButton>
<TextContainer>
<Title color="#D9AFFF">Volunteer</Title>
<BlockTitle color={Primary100}>Volunteer</BlockTitle>
<Text>
Volunteers make HackUPC possible by assisting the hackers and
preparing the event. By joining our team of volunteers, you will get
Expand All @@ -138,12 +129,12 @@ export default function HowToParticipate() {
target="_blank"
rel="noopener noreferrer"
>
<Button color="#D9AFFF">Apply as Volunteer</Button>
<GenericButton color={Primary100}>Apply as Volunteer</GenericButton>
</a>
</TextContainer>
</Section>
</RoleBlock>

<Section>
<RoleBlock>
<ImageButton
href="mailto:[email protected]"
target="_blank"
Expand All @@ -157,7 +148,7 @@ export default function HowToParticipate() {
/>
</ImageButton>
<TextContainer>
<Title color="#E23532">Partner</Title>
<BlockTitle color={Secondary500}>Partner</BlockTitle>
<Text>
Gain visibility for your brand, introduce your products to future
talents. Join us and be remembered as part of this hackathon by our
Expand All @@ -168,12 +159,12 @@ export default function HowToParticipate() {
target="_blank"
rel="noopener noreferrer"
>
<Button color="#E23532">Contact us</Button>
<GenericButton color={Secondary500}>Contact us</GenericButton>
</a>
</TextContainer>
</Section>
</RoleBlock>

<Section style={{ flexDirection: "row-reverse" }}>
<RoleBlock imageLeft>
<ImageButton
href="mailto:[email protected]"
target="_blank"
Expand All @@ -187,7 +178,7 @@ export default function HowToParticipate() {
/>
</ImageButton>
<TextContainer>
<Title color="#D9AFFF">Sponsor</Title>
<BlockTitle color={Primary100}>Sponsor</BlockTitle>
<Text>
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
Expand All @@ -198,10 +189,10 @@ export default function HowToParticipate() {
target="_blank"
rel="noopener noreferrer"
>
<Button color="#D9AFFF">Contact us</Button>
<GenericButton color={Primary100}>Contact us</GenericButton>
</a>
</TextContainer>
</Section>
</div>
</RoleBlock>
</Section>
);
}
22 changes: 22 additions & 0 deletions src/app/genericComponents/Buttons.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import styled from "styled-components";

interface ButtonProps {
color: string;
}

export const GenericButton = styled.button<ButtonProps>`
padding: 1rem;
background-color: ${(props) => props.color};
color: ${(props) => (props.color === "#D9AFFF" ? "#240059" : "#fff")};
font-weight: bold;
border: none;
border-radius: 1rem;
cursor: pointer;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
&:hover {
background-color: ${(props) =>
props.color === "#D9AFFF" ? "#ac4dff" : "#9c1916"};
color: #fff;
}
`;
Loading

0 comments on commit 9f42436

Please sign in to comment.