Skip to content

Commit 891be78

Browse files
Ericzhou-ezEriczhou-ez
authored
Merge pull request #8 from DaRichardX/chore/hero-page
feat/temp hero page
2 parents 45c61f2 + 60bdbfa commit 891be78

File tree

3 files changed

+83
-32
lines changed

3 files changed

+83
-32
lines changed

‎src/app/(marketing)/page.js‎

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,24 @@
1-
import * as React from 'react';
1+
import * as React from "react";
22

3-
import { config } from '@/config';
4-
import { Faqs } from '@/components/marketing/home/faqs';
5-
import { Features } from '@/components/marketing/home/features';
6-
import { Hero } from '@/components/marketing/home/hero';
7-
import { redirect } from 'next/navigation'
8-
import { Included } from '@/components/marketing/home/included';
9-
import { Productivity } from '@/components/marketing/home/productivity';
10-
import { StartBuilding } from '@/components/marketing/home/start-building';
11-
import { Testimonails } from '@/components/marketing/home/testimonials';
3+
import { config } from "@/config";
4+
import { Faqs } from "@/components/marketing/home/faqs";
5+
import { Hero } from "@/components/marketing/home/hero";
6+
import { Included } from "@/components/marketing/home/included";
127

13-
export const metadata = { title: config.site.name, description: config.site.description };
8+
import { StartBuilding } from "@/components/marketing/home/start-building";
9+
10+
export const metadata = {
11+
title: config.site.name,
12+
description: config.site.description,
13+
};
1414

1515
export default function Page() {
1616
//redirect("/auth/sign-in")
1717
//^^ page lock
1818
return (
1919
<div>
2020
<Hero />
21-
{/* Include productivity for schools later*/}
22-
{/*<Productivity />*/}
2321
<Included />
24-
{/*<Features />*/}
25-
{/*<Testimonails />*/}
2622
<Faqs />
2723
<StartBuilding />
2824
</div>

‎src/components/marketing/home/hero.js‎

Lines changed: 30 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,11 @@ export function Hero() {
2626
return (
2727
<Box
2828
sx={{
29-
bgcolor: "var(--mui-palette-neutral-950)",
30-
color: "var(--mui-palette-common-white)",
29+
color: "var(--mui-palette-common-black)",
3130
overflow: "hidden",
3231
position: "relative",
32+
background:
33+
"linear-gradient(120deg, #f6f3ff 0%, #f4f1ff 35%, #fff7ed 80%, #fff4e6 100%)",
3334
}}
3435
>
3536
<Box
@@ -74,28 +75,47 @@ export function Hero() {
7475
maxWidth="md"
7576
sx={{
7677
position: "relative",
77-
py: { xs: "80px", sm: "100px", md: "120px" },
78+
py: { xs: "60px", sm: "80px", md: "90px" },
79+
mt: "85px",
7880
zIndex: 3,
7981
}}
8082
>
8183
<Stack spacing={4}>
8284
<Stack spacing={2}>
83-
<Typography
85+
{/* <Typography
8486
sx={{
85-
fontSize: { xs: "2.2rem", sm: "3rem", md: "3.5rem" },
87+
fontSize: { xs: "2.2rem", sm: "3.3rem", md: "3.75rem" },
8688
fontWeight: 600,
87-
lineHeight: { xs: "2.9rem", sm: "3.5rem", md: "4.1rem" },
89+
lineHeight: { xs: "2.9rem", sm: "3.5rem", md: "4.5rem" },
8890
textAlign: "center",
8991
}}
9092
>
91-
EduCourse Simplifies your Administration Process <br />
93+
EduCourse Streamlines your Administration Process <br />
9294
<Typography
9395
color="primary.main"
9496
component="span"
9597
variant="inherit"
9698
>
9799
One Step at a Time
98100
</Typography>
101+
</Typography> */}
102+
103+
<Typography
104+
sx={{
105+
fontSize: { xs: "2.2rem", sm: "3.3rem", md: "3.75rem" },
106+
fontWeight: 600,
107+
lineHeight: { xs: "2.9rem", sm: "3.5rem", md: "4.5rem" },
108+
textAlign: "center",
109+
}}
110+
>
111+
EduCourse makes Capstone Scheduling{" "}
112+
<Typography
113+
color="primary.main"
114+
component="span"
115+
variant="inherit"
116+
>
117+
simple.
118+
</Typography>
99119
</Typography>
100120
</Stack>
101121

@@ -111,7 +131,7 @@ export function Hero() {
111131
component={RouterLink}
112132
href={paths.dashboard.overview}
113133
sx={{
114-
color: "var(--mui-palette-common-white)",
134+
color: "var(--mui-palette-common-black)",
115135
"&:hover": { bgcolor: "var(--mui-palette-action-hover)" },
116136
}}
117137
>
@@ -132,7 +152,7 @@ export function Hero() {
132152
}}
133153
>
134154
<Typography
135-
color="neutral.300"
155+
color="neutral.800"
136156
sx={{ whiteSpace: "nowrap" }}
137157
variant="caption"
138158
>
@@ -163,7 +183,6 @@ export function Hero() {
163183
>
164184
<Box
165185
sx={{
166-
bgcolor: "var(--mui-palette-neutral-950)",
167186
borderRadius: "28px",
168187
height: "100%",
169188
width: "100%",
@@ -181,6 +200,7 @@ export function Hero() {
181200
transform: "translateX(-50%)",
182201
width: "80%",
183202
zIndex: 1,
203+
mixBlendMode: "plus-lighter",
184204
}}
185205
/>
186206
<Box

‎src/components/marketing/layout/main-nav.js‎

Lines changed: 42 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20,21 +20,47 @@ import { DropdownTrigger } from "@/components/core/dropdown/dropdown-trigger";
2020
import { Logo } from "@/components/core/logo";
2121

2222
import { MobileNav } from "./mobile-nav";
23-
import { PagesPopover } from "./pages-popover";
23+
import { useEffect, useState } from "react";
2424

2525
export function MainNav() {
2626
const [openNav, setOpenNav] = React.useState(false);
2727
const pathname = usePathname();
28+
const [scrollPercentage, setScrollPercentage] = useState(0);
29+
const [scrolledPastHero, setScrolledPastHero] = useState(false);
30+
31+
useEffect(() => {
32+
const handleScroll = () => {
33+
const { scrollTop, scrollHeight, clientHeight } =
34+
document.documentElement;
35+
const percentage = (scrollTop / (scrollHeight - clientHeight)) * 100;
36+
setScrollPercentage(percentage);
37+
};
38+
39+
window.addEventListener("scroll", handleScroll);
40+
handleScroll();
41+
42+
return () => window.removeEventListener("scroll", handleScroll);
43+
}, []);
44+
45+
useEffect(() => {
46+
if (scrollPercentage > 1 && !scrolledPastHero) {
47+
setScrolledPastHero(true);
48+
} else if (scrollPercentage <= 1 && scrolledPastHero) {
49+
setScrolledPastHero(false);
50+
}
51+
}, [scrollPercentage, scrolledPastHero]);
2852

2953
return (
3054
<React.Fragment>
3155
<Box
3256
component="header"
3357
sx={{
34-
bgcolor: "var(--mui-palette-neutral-950)",
35-
color: "var(--mui-palette-common-white)",
58+
bgcolor: scrolledPastHero
59+
? "var(--mui-palette-neutral-950)"
60+
: "transparent",
61+
color: scrolledPastHero ? "var(--mui-palette-common-white)" : "black",
3662
left: 0,
37-
position: "sticky",
63+
position: "fixed",
3864
right: 0,
3965
top: 0,
4066
zIndex: "var(--MainNav-zIndex)",
@@ -58,7 +84,11 @@ export function MainNav() {
5884
href={paths.home}
5985
sx={{ display: "inline-flex" }}
6086
>
61-
<Logo color="light" height={32} width={122} />
87+
<Logo
88+
color={scrolledPastHero ? "light" : "dark"}
89+
height={32}
90+
width={122}
91+
/>
6292
</Box>
6393
<Box component="nav" sx={{ display: { xs: "none", md: "block" } }}>
6494
<Stack
@@ -68,11 +98,13 @@ export function MainNav() {
6898
sx={{ listStyle: "none", m: 0, p: 0 }}
6999
>
70100
<NavItem
101+
scrolledPastHero={scrolledPastHero}
71102
href={paths.components.index}
72103
pathname={pathname}
73104
title="Components"
74105
/>
75106
<NavItem
107+
scrolledPastHero={scrolledPastHero}
76108
href={paths.docs}
77109
pathname={pathname}
78110
title="Documentation"
@@ -100,7 +132,7 @@ export function MainNav() {
100132
component={RouterLink}
101133
href={paths.dashboard.overview}
102134
sx={{
103-
color: "var(--mui-palette-neutral-300)",
135+
color: "var(--mui-palette-neutral-500)",
104136
"&:hover": { bgcolor: "var(--mui-palette-action-hover)" },
105137
}}
106138
>
@@ -147,6 +179,7 @@ export function NavItem({
147179
matcher,
148180
pathname,
149181
title,
182+
scrolledPastHero,
150183
}) {
151184
const active = isNavItemActive({
152185
disabled,
@@ -180,7 +213,9 @@ export function NavItem({
180213
sx={{
181214
alignItems: "center",
182215
borderRadius: 1,
183-
color: "var(--mui-palette-neutral-300)",
216+
color: scrolledPastHero
217+
? "var(--mui-palette-neutral-300)"
218+
: "var(--mui-palette-neutral-900)",
184219
cursor: "pointer",
185220
display: "flex",
186221
flex: "0 0 auto",

0 commit comments

Comments
 (0)