Skip to content
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

Landing Screen Redesign #35

Merged
merged 13 commits into from
Jan 23, 2025
Merged

Landing Screen Redesign #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
ef270c0
Implemented image carosel
TAS-scorchedshadow Jan 3, 2025
6e02411
Picture contrast and breakpoint adjustments
TAS-scorchedshadow Jan 16, 2025
d13bdb2
Unused styles comment
TAS-scorchedshadow Jan 16, 2025
04ec10c
Contrast changes
TAS-scorchedshadow Jan 16, 2025
4a095d9
Shrunk carosuel and swapped to transparency for image darkening
TAS-scorchedshadow Jan 18, 2025
173b1e4
Removed unused code
TAS-scorchedshadow Jan 18, 2025
0f37615
Downsized images
TAS-scorchedshadow Jan 18, 2025
b2dfd7e
Removed unused code
TAS-scorchedshadow Jan 22, 2025
9723a5f
Carousel delay reduced by 0.5s
TAS-scorchedshadow Jan 22, 2025
84cd037
Added position option for images
TAS-scorchedshadow Jan 23, 2025
78f3db4
Reordered carousel to match project order
TAS-scorchedshadow Jan 23, 2025
c4b0dd9
lower opacity
TAS-scorchedshadow Jan 23, 2025
212df5f
lower opacity
TAS-scorchedshadow Jan 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
248 changes: 80 additions & 168 deletions app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,20 @@
'use client'
import { AspectRatio, Card, Stack, Typography, useTheme } from '@mui/joy';
import React, { useEffect, useRef } from 'react';
"use client";
import { AspectRatio, Card, Stack, Typography, useTheme } from "@mui/joy";
import React, { useEffect, useRef } from "react";
import { Box, Button, Link } from "@mui/material";
import { projectData } from '../data';
import { projectData } from "../data";
import useEmblaCarousel from "embla-carousel-react";
import Autoplay from "embla-carousel-autoplay";
import { ProjectCardProps } from "../components/ProjectCard";
import Image from "next/image";
import { NextButton, PrevButton, usePrevNextButtons } from "../components/embla/EmblaCarouselArrowButtons";
import "./styles.css"
import {
NextButton,
PrevButton,
usePrevNextButtons,
} from "../components/embla/EmblaCarouselArrowButtons";
import "./styles.css";
import { useMediaQuery } from "@mui/system";
import { CustomCarousel } from "../components/carousel/CustomCarousel";

interface EventCardProp {
jadekam16 marked this conversation as resolved.
Show resolved Hide resolved
title: string;
Expand All @@ -19,199 +24,107 @@ interface EventCardProp {
button: string;
}

const eventContent: EventCardProp[] = [
{
title: "Clubs Takeover",
href: "https://www.facebook.com/events/1586760535262553/",
dateTime: "12-2PM October 22nd 2024",
thumbnail: "",
button: "View event"
},
{
title: "Techspire",
href: "https://techspire.devsoc.app/",
dateTime: "3PM November 5th 2024",
thumbnail: "",
button: "Find out more"
},
]

export default function Home() {
const scrollRef = useRef<HTMLDivElement | null>(null);
const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true, axis: 'y', duration: 45 }, [Autoplay({delay: 5000})]);
const [emblaRef, emblaApi] = useEmblaCarousel(
{ loop: true, axis: "y", duration: 45 },
[Autoplay({ delay: 5000 })]
);
const {
prevBtnDisabled,
nextBtnDisabled,
onPrevButtonClick,
onNextButtonClick
} = usePrevNextButtons(emblaApi)
const displayProjects = projectData.filter(x => x.name !== "Chaos" && x.name !== "Jobsboard")

useEffect(() => {
const handleScroll = (e: { deltaY: any; }) => {
if (scrollRef.current) {
// Adjust the scroll position of the div based on the window's scroll position
scrollRef.current.scrollLeft += e.deltaY; // or adjust based on scroll direction
}
};

window.addEventListener('wheel', handleScroll, { passive: false });

return () => {
window.removeEventListener('wheel', handleScroll);
};
}, []);
onNextButtonClick,
} = usePrevNextButtons(emblaApi);
const displayProjects = projectData.filter(
(x) => x.name !== "Chaos" && x.name !== "Jobsboard"
);

return (
<Box className="homeContent">
<Stack direction="column" pt={2} px={4} width="100%" maxWidth={1300} m="auto" overflow="hidden">
<Stack
direction="column"
pt={2}
px={4}
width="100%"
maxWidth={1300}
m="auto"
overflow="hidden"
>
<Stack direction="column">
<Box sx={{width: "100%"}}>
<Typography className={"heroText"} mt={3} fontSize={{xs: "2rem", sm: "2.3rem", md: "3.2rem"}}
fontWeight={500} component='div'>
UNSW&apos;s student developer society
<Box sx={{ width: "100%" }}>
<Typography
className={"heroText"}
mt={3}
fontSize={{ xs: "2rem", sm: "2.3rem", md: "3.2rem" }}
fontWeight={500}
component="div"
>
UNSW&apos;s Software Development Society
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

wait did you want to change it to UNSW instead of UNSW's? I think Ashley already said it somewhere

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

feel free to just do in next PR though if u wanna just merge this :D

</Typography>
<Typography className={"heroText"} mt={0} fontSize={{xs: "1.5rem", sm: "2rem", md: "2.5rem"}} fontWeight={200}
component='div'>
<Typography
className={"heroText"}
mt={0}
fontSize={{ xs: "1.5rem", sm: "2rem", md: "2.5rem" }}
fontWeight={200}
component="div"
>
Run by devs, for devs
</Typography>
</Box>
</Stack>
<Box sx={{display: "flex", flexDirection: "row", gap: "1rem", alignItems: "center"}} mt={{xs: 2, md: 0}}>
<Typography
paddingTop={{xs: 1, md: 3}}
paddingBottom={{xs: 1, md: 3}}
fontSize={{xs: 20, md: 30}}
fontWeight={600}
>
Highlights
</Typography>
<div className="embla__controls">
<div className="embla__buttons">
<PrevButton onClick={onPrevButtonClick} />
<NextButton onClick={onNextButtonClick} />
</div>
</div>
</Box>
<Card
ref={emblaRef}
className="embla"
sx={{padding: 0, height: {xs: '90px', md: '115px'}}}
>
<Stack className="embla__container">
{eventContent.map((props, idx) => <HighlightLinkCard key={`event ${props.title}`} {...props}/>)}
</Stack>
</Card>
<CustomCarousel />
<Box
ref={scrollRef}
marginBottom={{xs: "3rem", md: 0}}
marginTop={{xs: "2rem", md: "3rem"}}
marginBottom={{ xs: "3rem", md: 0 }}
marginTop={{ xs: "2rem", md: "2rem" }}
sx={{
display: 'flex',
overflowX: 'auto',
scrollbarWidth: 'none',
display: "flex",
overflowX: "auto",
}}
>
<Stack
spacing={{xs: 3, md: 5}}
direction={{xs: "column", md: "row"}}
sx={{display: "flex", width: '100%'}}
flexDirection={{xs: "column", md: "row"}}
spacing={{ xs: 3, lg: 5 }}
direction={{ xs: "column", lg: "row" }}
sx={{ display: "flex", width: "100%" }}
flexDirection={{ xs: "column", lg: "row" }}
>
{displayProjects.map((props, idx) => <LinkCard key={props.name} {...props} order={idx}/>)}
{displayProjects.map((props, idx) => (
<LinkCard key={props.name} {...props} order={idx} />
))}
</Stack>
</Box>
</Stack>
</Box>
)
);
}

const HighlightLinkCard: React.FC<EventCardProp> = ({
title,
href,
dateTime,
thumbnail,
button
}) => {
let color = "#111111";
const theme = useTheme();
const isMdUp = useMediaQuery(theme.breakpoints.up('md'));
return (
<Card
className="embla__slide"
sx={{
height: {xs: "90px", md: "100px"},
backgroundColor: color,
borderRadius: 0,
padding: thumbnail && isMdUp ? '2rem 1rem' : {xs: '1rem', md: '2rem'},
flexDirection: 'row',
gap: '4rem',
alignItems: 'center',
justifyContent: 'space-between',
border: 'none'
}}
>
<Box sx={{display: "flex", flexDirection: "row", gap: "2rem"}}>
{
thumbnail && isMdUp ? <Image width={170} height={90} src={thumbnail} alt={title}/> : null
}
<Box sx={{display: "flex", flexDirection: "column"}}>
<Typography
sx={{
color: "#EDEEF0",
fontSize: { xs: '1.5rem', sm: '1.75rem', md: '2rem' },
fontWeight: 500,
alignSelf: "flex-start",
justifySelf: "center"
}}
>
{title}
</Typography>
<Typography
sx={{
color: "#EDEEF0",
alignSelf: "flex-start",
justifySelf: "center"
}}
>
{dateTime}
</Typography>
</Box>
</Box>
{
button ?
<Link href={href} sx={{ textDecoration: 'none' }}>
<Button variant="soft">{button}</Button>
</Link> : null
}
</Card>
)
}

const LinkCard: React.FC<Omit<ProjectCardProps, "trainee"> & { order: number }> = ({
name,
desc,
logoUrl,
thumbnailUrl,
projectUrl,
status,
order
}) => {
const LinkCard: React.FC<
Omit<ProjectCardProps, "trainee"> & { order: number }
> = ({ name, desc, logoUrl, thumbnailUrl, projectUrl, status, order }) => {
// Class 3 colors sourced from https://www.radix-ui.com/colors
const colors = ["#182449", "#0D2847", "#202248", "#351A35", "#391714", "#291F43", "#222222"]
const colors = [
"#182449",
"#0D2847",
"#202248",
"#351A35",
"#391714",
"#291F43",
"#222222",
];
return (
<Link href={projectUrl}>
<Card
className="boxBackground"
sx={{
width: { xs: "100%", md: "250px" },
height: { xs: "5rem", md: "100px" },
width: { xs: "100%", lg: "215px" },
height: { xs: "5rem", lg: "86px" },
backgroundColor: colors[order],
boxShadow: 'sm',
padding: '1rem',
flexDirection: 'row',
gap: '2rem',
alignItems: 'center',
boxShadow: "sm",
padding: "1rem",
flexDirection: "row",
gap: "1.25rem",
alignItems: "center",
}}
>
<AspectRatio objectFit="contain" ratio={1} sx={{ width: "3rem" }}>
Expand All @@ -225,14 +138,13 @@ const LinkCard: React.FC<Omit<ProjectCardProps, "trainee"> & { order: number }>
<Typography
sx={{
color: "#EDEEF0",
fontSize: {xs: '1.5rem', sm: '1.75rem', md: '1.5rem'},
fontSize: { xs: "1.5rem", lg: "1.25rem" },
fontWeight: 500,
}}
>
{name}
</Typography>
</Card>
</Link>
)
}

);
};
9 changes: 5 additions & 4 deletions app/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@
font-family: 'IBM Plex Mono', monospace;
}

.boxBackground {
/* Unused styles for old event design */
/* .boxBackground {
position: relative;
}

Expand All @@ -17,9 +18,9 @@
right: 0;
width: 100%;
height: 100%;
}
} */

.embla {
/* .embla {
overflow: hidden;
}
.embla__container {
Expand Down Expand Up @@ -47,4 +48,4 @@
width: 25px;
align-items: center;
justify-content: center;
}
} */
Loading