Skip to content

Commit d255ab5

Browse files
SamShinSamShin
authored
Merge pull request #29 from hcp-uw/landing-page-updates
Finish up landing page
2 parents b097516 + e55b89b commit d255ab5

File tree

11 files changed

+358
-186
lines changed

11 files changed

+358
-186
lines changed

‎package-lock.json‎

Lines changed: 67 additions & 53 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
"react-helmet-async": "^2.0.5",
3232
"react-icons": "^5.2.1",
3333
"react-router-dom": "^6.25.1",
34+
"react-router-hash-link": "^2.4.3",
3435
"react-slick": "^0.30.3",
3536
"react-social-media-embed": "^2.5.18",
3637
"slick-carousel": "^1.8.1",
@@ -40,6 +41,7 @@
4041
"@types/node": "^20.14.11",
4142
"@types/react": "^18.3.3",
4243
"@types/react-dom": "^18.3.0",
44+
"@types/react-router-hash-link": "^2.4.9",
4345
"@types/react-slick": "^0.23.13",
4446
"@typescript-eslint/eslint-plugin": "^7.15.0",
4547
"@typescript-eslint/parser": "^7.15.0",
@@ -54,4 +56,4 @@
5456
"vite": "^5.3.4",
5557
"vite-plugin-singlefile": "^2.0.2"
5658
}
57-
}
59+
}

‎src/App.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,5 @@
77

88
html {
99
scrollbar-gutter: stable;
10+
scroll-behavior: smooth;
1011
}

‎src/assets/HCP-gradient-bottom.png‎

39.8 KB
Loading

‎src/assets/HCP-gradient-top.png‎

58.9 KB
Loading

‎src/assets/HCP-husky-duck.png‎

285 KB
Loading

‎src/components/FeaturedProjectsCarousel.tsx‎

Lines changed: 35 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
1-
import React, { useMemo, useEffect, useState } from "react";
2-
import Slider from "react-slick";
3-
import { Box } from "@chakra-ui/react";
4-
import { InstagramEmbed } from "react-social-media-embed";
5-
import "slick-carousel/slick/slick.css";
6-
import "slick-carousel/slick/slick-theme.css";
1+
import React, { useMemo, useEffect, useState } from 'react';
2+
import Slider from 'react-slick';
3+
import { Box } from '@chakra-ui/react';
4+
import { InstagramEmbed } from 'react-social-media-embed';
5+
import 'slick-carousel/slick/slick.css';
6+
import 'slick-carousel/slick/slick-theme.css';
77

88
const instagramPosts = [
9-
"https://www.instagram.com/p/DGetPdiJqgx/?img_index=1",
10-
"https://www.instagram.com/p/DF7IDobx8Mz/?img_index=1",
11-
"https://www.instagram.com/p/C7NRaFXPMIu/?img_index=1",
12-
"https://www.instagram.com/p/C6o8KaYS5WS/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==",
13-
"https://www.instagram.com/p/C0fZpMEPXKj/?img_index=1",
14-
"https://www.instagram.com/p/DCkoN2LSqtw/?img_index=1",
9+
'https://www.instagram.com/p/DGetPdiJqgx/?img_index=1',
10+
'https://www.instagram.com/p/DF7IDobx8Mz/?img_index=1',
11+
'https://www.instagram.com/p/C7NRaFXPMIu/?img_index=1',
12+
'https://www.instagram.com/p/C6o8KaYS5WS/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==',
13+
'https://www.instagram.com/p/C0fZpMEPXKj/?img_index=1',
14+
'https://www.instagram.com/p/DCkoN2LSqtw/?img_index=1',
1515
];
1616

1717
const FeaturedProjectsCarousel: React.FC = () => {
1818
const [vw, setVw] = useState<number>(
19-
typeof window !== "undefined" ? window.innerWidth : 1200
19+
typeof window !== 'undefined' ? window.innerWidth : 1200
2020
);
2121

2222
useEffect(() => {
2323
const onResize = () => setVw(window.innerWidth);
24-
window.addEventListener("resize", onResize);
25-
return () => window.removeEventListener("resize", onResize);
24+
window.addEventListener('resize', onResize);
25+
return () => window.removeEventListener('resize', onResize);
2626
}, []);
2727

2828
const settings = useMemo(
@@ -38,15 +38,15 @@ const FeaturedProjectsCarousel: React.FC = () => {
3838
swipeToSlide: true,
3939
responsive: [
4040
{
41-
breakpoint: 1024,
41+
breakpoint: 992,
4242
settings: {
43-
slidesToShow: 2,
43+
slidesToShow: 1,
4444
},
4545
},
4646
{
47-
breakpoint: 640,
47+
breakpoint: 1120,
4848
settings: {
49-
slidesToShow: 1,
49+
slidesToShow: 2,
5050
},
5151
},
5252
],
@@ -63,28 +63,28 @@ const FeaturedProjectsCarousel: React.FC = () => {
6363
mx="auto"
6464
overflow="hidden"
6565
sx={{
66-
".slick-slider": {
67-
paddingLeft: { base: "1rem", md: "2rem", lg: "3rem" },
68-
paddingRight: { base: "1rem", md: "2rem", lg: "3rem" },
66+
'.slick-slider': {
67+
paddingLeft: { base: '1rem', md: '2rem', lg: '3rem' },
68+
paddingRight: { base: '1rem', md: '2rem', lg: '3rem' },
6969
},
70-
".slick-slide": {
71-
paddingLeft: "0.75rem",
72-
paddingRight: "0.75rem",
73-
display: "flex !important",
74-
justifyContent: "center",
70+
'.slick-slide': {
71+
paddingLeft: '0.75rem',
72+
paddingRight: '0.75rem',
73+
display: 'flex !important',
74+
justifyContent: 'center',
7575
},
76-
".slick-dots": {
77-
bottom: "-30px",
78-
"li button::before": {
79-
fontSize: "8px",
76+
'.slick-dots': {
77+
bottom: '-30px',
78+
'li button::before': {
79+
fontSize: '8px',
8080
},
8181
},
82-
".slick-prev": {
83-
left: { base: "15px", md: "30px" },
82+
'.slick-prev': {
83+
left: { base: '15px', md: '30px' },
8484
zIndex: 1,
8585
},
86-
".slick-next": {
87-
right: { base: "15px", md: "30px" },
86+
'.slick-next': {
87+
right: { base: '15px', md: '30px' },
8888
zIndex: 1,
8989
},
9090
}}

‎src/components/Layout.tsx‎

Lines changed: 60 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,9 @@ import {
1717
DrawerCloseButton,
1818
useDisclosure,
1919
Image,
20+
useColorMode,
2021
} from '@chakra-ui/react';
21-
import { Link as RouterLink } from 'react-router-dom';
22+
import { HashLink as RouterLink } from 'react-router-hash-link';
2223
import {
2324
FaGithub,
2425
FaEnvelope,
@@ -76,8 +77,6 @@ export const Layout: React.FC<{ children: React.ReactNode }> = ({
7677
const [showNavbar, setShowNavbar] = useState(true);
7778
const lastScrollY = useRef(0);
7879

79-
const footerBgColor = useColorModeValue('gray.50', 'gray.900');
80-
8180
const navLinks = [
8281
{ to: '/about', label: 'About' },
8382
{ to: '/teams/members', label: 'Projects' },
@@ -88,6 +87,12 @@ export const Layout: React.FC<{ children: React.ReactNode }> = ({
8887
{ to: '/sponsors', label: 'Sponsors' },
8988
];
9089

90+
// Force light mode
91+
const { setColorMode } = useColorMode();
92+
useEffect(() => {
93+
setColorMode('light');
94+
}, [setColorMode]);
95+
9196
// Shows/hides navbar on scroll
9297
useEffect(() => {
9398
const handleScroll = () => {
@@ -105,7 +110,13 @@ export const Layout: React.FC<{ children: React.ReactNode }> = ({
105110
}, []);
106111

107112
return (
108-
<Box minH="100vh" bg="white" display="flex" flexDirection="column">
113+
<Box
114+
minH="100vh"
115+
bg="white"
116+
display="flex"
117+
flexDirection="column"
118+
overflowX="hidden"
119+
>
109120
<Box
110121
bg="white"
111122
position="fixed"
@@ -142,8 +153,7 @@ export const Layout: React.FC<{ children: React.ReactNode }> = ({
142153

143154
{/* Mobile Menu Button */}
144155
<Flex gap="2">
145-
{/* TODO: Update link */}
146-
<RouterLink to="/">
156+
<RouterLink to="/#join">
147157
<Box display={{ base: 'none', lg: 'flex' }}>
148158
<PurpleButton text="Join Us" />
149159
</Box>
@@ -188,33 +198,56 @@ export const Layout: React.FC<{ children: React.ReactNode }> = ({
188198
{children}
189199
</Container>
190200

191-
<Box as="footer" bg={footerBgColor} py={6} mt={6}>
201+
<Box as="footer" py={6} mt={6}>
192202
<Container maxW="container.xl">
193203
<Flex
194-
direction={{ base: 'column', md: 'row' }}
195204
justifyContent="space-between"
196205
alignItems={{ base: 'flex-start', md: 'center' }}
197206
gap={4}
198207
>
199-
<HStack spacing={{ base: 4, md: 10 }} pl="4">
200-
<FooterLink
201-
href="mailto:huskycodingproject@gmail.com"
202-
icon={<FaEnvelope />}
203-
/>
204-
<FooterLink
205-
href="https://github.com/hcp-uw"
206-
icon={<FaGithub />}
207-
/>
208-
<FooterLink
209-
href="https://www.linkedin.com/company/hcp-uw"
210-
icon={<FaLinkedin />}
211-
/>
212-
<FooterLink
213-
href="https://www.instagram.com/hcp.uw/"
214-
icon={<FaInstagram />}
215-
/>
216-
</HStack>
217-
<Text pl="4" pr="4">
208+
<Flex
209+
gap={{ base: '32px', md: '56px' }}
210+
direction={{ base: 'column', md: 'row' }}
211+
w={{ base: '100%', md: 'auto' }}
212+
>
213+
<RouterLink to="/">
214+
<Image
215+
src={HcpLogo}
216+
alt="HCP Logo"
217+
w="70px"
218+
objectFit="contain"
219+
/>
220+
</RouterLink>
221+
<HStack
222+
spacing={{ base: 4, md: '27px' }}
223+
pl="4"
224+
alignSelf="flex-end"
225+
>
226+
<FooterLink
227+
href="mailto:huskycodingproject@gmail.com"
228+
icon={<FaEnvelope size="22px" color="#422f7e" />}
229+
/>
230+
<FooterLink
231+
href="https://www.instagram.com/hcp.uw/"
232+
icon={<FaInstagram size="22px" color="#422f7e" />}
233+
/>
234+
<FooterLink
235+
href="https://www.linkedin.com/company/hcp-uw"
236+
icon={<FaLinkedin size="22px" color="#422f7e" />}
237+
/>
238+
<FooterLink
239+
href="https://github.com/hcp-uw"
240+
icon={<FaGithub size="22px" color="#422f7e" />}
241+
/>
242+
</HStack>
243+
</Flex>
244+
<Text
245+
fontSize="12px"
246+
fontFamily="Space Mono, monospace"
247+
color="palette.darkPurple"
248+
casing="uppercase"
249+
display={{ base: 'none', md: 'block' }}
250+
>
218251
&copy; {new Date().getFullYear()} Husky Coding Project. All rights
219252
reserved.
220253
</Text>

‎src/components/PurpleButton.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@ import { Button } from '@chakra-ui/react';
22

33
interface PurpleButtonProps {
44
text: string;
5+
[key: string]: any;
56
}
67

7-
const PurpleButton: React.FC<PurpleButtonProps> = ({ text }) => {
8+
const PurpleButton: React.FC<PurpleButtonProps> = ({ text, ...props }) => {
89
return (
910
<Button
1011
bgColor="palette.lightPurple"
@@ -21,6 +22,7 @@ const PurpleButton: React.FC<PurpleButtonProps> = ({ text }) => {
2122
color: 'palette.lightPurple',
2223
transition: '0.3s',
2324
}}
25+
{...props}
2426
>
2527
{text}
2628
</Button>

‎src/components/Window.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
11
import { Box, Flex, Text } from '@chakra-ui/react';
22
import { ReactNode } from 'react';
33

4-
export default function Window({
5-
title,
6-
children,
7-
...props
8-
}: {
4+
interface WindowProps {
95
title?: string;
106
children?: ReactNode;
117
[key: string]: any;
12-
}) {
8+
}
9+
10+
const Window: React.FC<WindowProps> = ({ title, children, ...props }) => {
1311
return (
1412
<Box
1513
borderWidth="2px"
@@ -73,4 +71,6 @@ export default function Window({
7371
{children}
7472
</Box>
7573
);
76-
}
74+
};
75+
76+
export default Window;

0 commit comments

Comments
 (0)