Skip to content

Commit 6464bc5

Browse files
mathhulkmathhulk
committed
feat: Landing
1 parent dabc4da commit 6464bc5

26 files changed

+637
-828
lines changed

‎frontend/index.html‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,8 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1">
66
<link rel="shortcut icon" href="/favicon.png" />
77
<link rel="apple-touch-icon" sizes="76x76" href="/favicon.png" />
8-
<link rel="preconnect" href="https://fonts.googleapis.com">
9-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10-
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap" rel="stylesheet">
8+
<link rel="preconnect" href="https://rsms.me/">
9+
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
1110
<meta name="description" content="Berkeley's online course discovery platform. Berkeleytime is a platform built, maintained, and run by students, just like you. We work hard to simplify and improve the course discovery experience." />
1211
<title>Berkeleytime</title>
1312
</head>

‎frontend/src/app/Landing/Features/Features.module.scss‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
.root {
2+
padding: 96px 0;
3+
4+
.row {
5+
display: flex;
6+
justify-content: flex-end;
7+
align-items: center;
8+
9+
&:not(:last-child) {
10+
margin-bottom: 96px;
11+
}
12+
13+
.text {
14+
width: 512px;
15+
16+
.link {
17+
display: flex;
18+
align-items: center;
19+
gap: 8px;
20+
color: var(--blue-500);
21+
font-size: 16px;
22+
font-weight: 500;
23+
line-height: 1;
24+
transition: all 100ms ease-in-out;
25+
26+
&:hover {
27+
color: var(--blue-600);
28+
}
29+
}
30+
31+
.description {
32+
font-size: 16px;
33+
line-height: 1.5;
34+
margin-bottom: 32px;
35+
color: var(--slate-500);
36+
}
37+
38+
.heading {
39+
font-size: 32px;
40+
font-weight: 660;
41+
font-feature-settings: 'cv05' on, 'cv13' on, 'ss07' on, 'cv12' on, 'cv06' on;
42+
line-height: 1.25;
43+
letter-spacing: -1%;
44+
margin-bottom: 16px;
45+
color: var(--slate-900);
46+
}
47+
48+
.badge {
49+
height: 24px;
50+
border-radius: 4px;
51+
padding: 0 8px;
52+
display: flex;
53+
align-items: center;
54+
background-color: var(--orange-500);
55+
width: max-content;
56+
color: white;
57+
font-size: 14px;
58+
font-weight: 500;
59+
line-height: 1;
60+
margin-bottom: 16px;
61+
}
62+
}
63+
}
64+
}

‎frontend/src/app/Landing/Features/index.tsx‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import { ArrowRight } from "iconoir-react";
2+
import { Link } from "react-router-dom";
3+
4+
import Container from "@/components/Container";
5+
6+
import styles from "./Features.module.scss";
7+
8+
export default function Features() {
9+
return (
10+
<div className={styles.root}>
11+
<Container>
12+
<div className={styles.row}>
13+
<div className={styles.text}>
14+
<div className={styles.badge}>New</div>
15+
<h3 className={styles.heading}>Simple schedule planning</h3>
16+
<p className={styles.description}>
17+
Plan, save, and share schedules. An alternative to CalCentral,
18+
Berkeleytime makes scheduling your semester easy and
19+
user-friendly.
20+
</p>
21+
<Link to="/schedules" className={styles.link}>
22+
Start planning
23+
<ArrowRight />
24+
</Link>
25+
</div>
26+
</div>
27+
<div className={styles.row}>
28+
<div className={styles.text}>
29+
<h3 className={styles.heading}>Find the right classes for you</h3>
30+
<p className={styles.description}>
31+
Instead of spending hours sifting through courses on the Berkeley
32+
course catalog, instantly filter and sort courses by average
33+
grade, number of open seats, and more.
34+
</p>
35+
<Link to="/schedules" className={styles.link}>
36+
Browse courses
37+
<ArrowRight />
38+
</Link>
39+
</div>
40+
</div>
41+
<div className={styles.row}>
42+
<div className={styles.text}>
43+
<h3 className={styles.heading}>Get ahead of the curve</h3>
44+
<p className={styles.description}>
45+
View grade distributions for classes based on the semester and
46+
professor. Stop worrying about the A, and make informed decisions
47+
about your schedule.
48+
</p>
49+
<Link to="/schedules" className={styles.link}>
50+
Go to Grades
51+
<ArrowRight />
52+
</Link>
53+
</div>
54+
</div>
55+
<div className={styles.row}>
56+
<div className={styles.text}>
57+
<h3 className={styles.heading}>Secure your seat</h3>
58+
<p className={styles.description}>
59+
Track enrollment for courses and sections in real-time. View
60+
enrollment history over time and know when to enroll, and when you
61+
can wait.
62+
</p>
63+
<Link to="/schedules" className={styles.link}>
64+
Go to Enrollment
65+
<ArrowRight />
66+
</Link>
67+
</div>
68+
</div>
69+
</Container>
70+
</div>
71+
);
72+
}

‎frontend/src/app/Landing/Hero/Hero.module.scss‎

Lines changed: 36 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
.root {
2-
min-height: 100vh;
32
position: relative;
43
display: flex;
54
flex-direction: column;
@@ -16,6 +15,10 @@
1615
z-index: 2;
1716
filter: drop-shadow(0 -8px 0 rgba(white, 0.1));
1817
}
18+
19+
@media (width > 768px) {
20+
min-height: 100vh;
21+
}
1922

2023
.container {
2124
max-width: 1280px;
@@ -27,17 +30,33 @@
2730
z-index: 1;
2831

2932
.text {
30-
max-width: 592px;
31-
margin-top: 96px;
33+
margin: 96px 0 192px;
34+
position: relative;
35+
z-index: 2;
36+
37+
@media (width <= 992px) {
38+
margin-top: 64px;
39+
}
40+
41+
@media (width > 992px) {
42+
max-width: 592px;
43+
}
3244

3345
.heading {
3446
font-size: 48px;
3547
margin-bottom: 16px;
3648
color: white;
37-
font-weight: 700;
49+
font-weight: 660;
50+
font-feature-settings: 'cv05' on, 'cv13' on, 'ss07' on, 'cv12' on, 'cv06' on;
51+
letter-spacing: -1%;
3852
line-height: 1.25;
3953
letter-spacing: 0.5px;
4054
position: relative;
55+
56+
@media (width <= 768px) {
57+
font-size: 32px;
58+
line-height: 1.5;
59+
}
4160
}
4261

4362
.description {
@@ -60,7 +79,7 @@
6079

6180
.input {
6281
height: 56px;
63-
padding: 0 80px 0 16px;
82+
padding: 0 92px 0 16px;
6483
border-radius: 4px;
6584
box-shadow: 0 4px 8px rgba(0 0 0 / 10%);
6685
border: none;
@@ -82,6 +101,11 @@
82101
font-size: 16px;
83102
line-height: 1.5;
84103
color: rgb(255 255 255 / 65%);
104+
z-index: 1;
105+
106+
@media (width <= 992px) {
107+
display: none;
108+
}
85109

86110
p.heading {
87111
font-weight: 500;
@@ -96,9 +120,15 @@
96120

97121
img.campanile {
98122
position: absolute;
99-
123+
z-index: 1;
100124
right: 24px;
101125
top: 0;
126+
127+
@media (width <= 992px) {
128+
left: 50%;
129+
transform: translateX(-50%);
130+
opacity: 0.25;
131+
}
102132
}
103133
}
104134
}

‎frontend/src/app/Landing/Hero/index.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { FormEvent, useEffect, useMemo, useRef, useState } from "react";
22

33
import { ArrowRight, Clock } from "iconoir-react";
4-
import { Link } from "react-router-dom";
54

65
import Button from "@/components/Button";
76
import Header from "@/components/Header";
@@ -96,7 +95,7 @@ export default function Hero() {
9695

9796
return (
9897
<div className={styles.root} ref={root}>
99-
<Header transparent />
98+
<Header invert />
10099
<div className={styles.container}>
101100
<div className={styles.text}>
102101
<h1 className={styles.heading}>
@@ -111,7 +110,7 @@ export default function Hero() {
111110
className={styles.input}
112111
type="text"
113112
autoFocus
114-
placeholder="Search for classes for Spring 2024..."
113+
placeholder="Search for classes..."
115114
/>
116115
<Button className={styles.button}>
117116
Go

‎frontend/src/app/Landing/HomeFeature/Catalog.tsx‎

Lines changed: 0 additions & 32 deletions
This file was deleted.

‎frontend/src/app/Landing/HomeFeature/Grades.tsx‎

Lines changed: 0 additions & 32 deletions
This file was deleted.

0 commit comments

Comments
 (0)