Skip to content

Fix Front Page #279

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Prababameister wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Fix Front Page #279

Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e1ce977
Change layout of event page w tmp images
Prababameister Aug 4, 2025
36d8ef3
Fix icons on front page
Prababameister Sep 20, 2025
d424823
Minor front-page UI fixes
Prababameister Sep 20, 2025
f7151a6
Create workshops page template
Prababameister Sep 20, 2025
328645d
Create proper events page + small fixes for workshops
Prababameister Sep 21, 2025
026d0a8
Fix lorem ipsum + make events page more visually appealing
Prababameister Sep 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
117 changes: 97 additions & 20 deletions src/pages/home.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,33 +68,110 @@ const HomeContainer = () => {
programming contests, everything we do revolves around the central theme of critical algorithmic thinking.
</Text>
<Text textalign="center" fontSize={['sm', 'md']}>
Click below to find out more about us:
We have the following:
</Text>
<Flex wrap="wrap" justify="center" align="center">
<Link to="team">
<Button m={3} colorScheme="brand" variant="outline">Meet Our Team</Button>
</Link>
<Link to="icpc">
<Button m={3} colorScheme="brand" variant="outline">ICPC Regionals</Button>
</Link>
<Link to={{
pathname: 'events',
hash: '#all-events',
}}
>
<Button m={3} colorScheme="brand" variant="outline">Learn More About our Events</Button>
</Link>
</Flex>
</Stack>
</Container>

<Divider p={3} borderColor="brand.500" />

<Container>
<Stack p={3} spacing={3} align="center">
<Heading as="h1" fontSize={['2xl', '3xl']}>Upcoming Events</Heading>
<UpcomingEvents />
</Stack>
<Flex
direction={isMobile ? "column" : "row"}
justify="space-between"
align="stretch"
wrap="wrap"
px={3}
py={6}
gap={6}
>
{/* Workshops Column */}
<Box
as={Link}
to="/workshops" // Adjust this path to your actual route
flex="1"
minW={isMobile ? "100%" : "30%"}
mb={isMobile ? 6 : 0}
textAlign="center"
p={4}
borderRadius="md"
boxShadow="sm"
cursor="pointer"
_hover={{ boxShadow: "lg", bg: "pink.50" }}
transition="all 0.3s ease"
>
<Heading fontSize={['xl', '2xl']} mb={3}>Workshops</Heading>
<Image
mx="auto"
objectFit="contain"
src="https://www.pokemon.com/static-assets/content-assets/cms2/img/pokedex/full/007.png"
alt="Workshops"
maxHeight="200px"
mb={3}
/>
<Text fontSize={['sm', 'md']} px={2}>
Explore our regularly held workshops to practice for interviews, competitive projects, and more.
</Text>
</Box>

{/* Events Column */}
<Box
as={Link}
to="/events" // Adjust this path to your actual route
flex="1"
minW={isMobile ? "100%" : "30%"}
mb={isMobile ? 6 : 0}
textAlign="center"
p={4}
borderRadius="md"
boxShadow="sm"
cursor="pointer"
_hover={{ boxShadow: "lg", bg: "pink.50" }}
transition="all 0.3s ease"
>
<Heading fontSize={['xl', '2xl']} mb={3}>Events</Heading>
<Image
mx="auto"
objectFit="contain"
src="https://pokemonletsgo.pokemon.com/assets/img/common/char-pikachu.png"
alt="Events"
maxHeight="200px"
mb={3}
/>
<Text fontSize={['sm', 'md']} px={2}>
Checkout out the events we will be hosting throughout the year.
</Text>
</Box>

{/* Competitions Column */}
<Box
as={Link}
to="/icpc" // Adjust this path to your actual route
flex="1"
minW={isMobile ? "100%" : "30%"}
mb={isMobile ? 6 : 0}
textAlign="center"
p={4}
borderRadius="md"
boxShadow="sm"
cursor="pointer"
_hover={{ boxShadow: "lg", bg: "pink.50" }}
transition="all 0.3s ease"
>
<Heading fontSize={['xl', '2xl']} mb={3}>Competitions</Heading>
<Image
mx="auto"
objectFit="contain"
src="https://www.pokemon.com/static-assets/content-assets/cms2/img/pokedex/full/133.png"
alt="Competitions"
maxHeight="200px"
mb={3}
/>
<Text fontSize={['sm', 'md']} px={2}>
Try out for our competitiion team to participate in the International Collegiate Programming Contest.
</Text>
</Box>
</Flex>
</Container>

<Divider p={3} borderColor="brand.500" />
Expand Down