diff --git a/package-lock.json b/package-lock.json index c3c1faa..3112157 100644 --- a/package-lock.json +++ b/package-lock.json @@ -48,6 +48,7 @@ "embla-carousel-react": "8.2.0", "firebase": "^10.13.0", "framer-motion": "^12.4.2", + "gsap": "^3.13.0", "i18next": "23.14.0", "mapbox-gl": "3.6.0", "next": "14.2.5", @@ -11269,6 +11270,11 @@ "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA==", "license": "ISC" }, + "node_modules/gsap": { + "version": "3.13.0", + "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.13.0.tgz", + "integrity": "sha512-QL7MJ2WMjm1PHWsoFrAQH/J8wUeqZvMtHO58qdekHpCfhvhSL4gSiz6vJf5EeMP0LOn3ZCprL2ki/gjED8ghVw==" + }, "node_modules/has-bigints": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz", diff --git a/package.json b/package.json index e59e3d0..2f9dcf7 100644 --- a/package.json +++ b/package.json @@ -55,6 +55,7 @@ "embla-carousel-react": "8.2.0", "firebase": "^10.13.0", "framer-motion": "^12.4.2", + "gsap": "^3.13.0", "i18next": "23.14.0", "mapbox-gl": "3.6.0", "next": "14.2.5", diff --git a/public/assets/home-cosmic.svg b/public/assets/home-cosmic.svg index 15e998b..11efc43 100644 --- a/public/assets/home-cosmic.svg +++ b/public/assets/home-cosmic.svg @@ -4,8 +4,8 @@ - - + + diff --git a/public/assets/home-hero-demo-light-blurred.png b/public/assets/home-hero-demo-light-blurred.png new file mode 100644 index 0000000..1ebf1b9 Binary files /dev/null and b/public/assets/home-hero-demo-light-blurred.png differ diff --git a/public/assets/home-hero-light.png b/public/assets/home-hero-light.png index a4b54a2..2a9d3b5 100644 Binary files a/public/assets/home-hero-light.png and b/public/assets/home-hero-light.png differ diff --git a/public/favicon.ico b/public/favicon.ico index 7c82958..f356825 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/favicon.svg b/public/favicon.svg new file mode 100644 index 0000000..342f316 --- /dev/null +++ b/public/favicon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/(marketing)/page.js b/src/app/(marketing)/page.js index cc55adf..511700b 100644 --- a/src/app/(marketing)/page.js +++ b/src/app/(marketing)/page.js @@ -4,8 +4,8 @@ import { config } from "@/config"; import { Faqs } from "@/components/marketing/home/faqs"; import { Hero } from "@/components/marketing/home/hero"; import { Included } from "@/components/marketing/home/included"; - import { StartBuilding } from "@/components/marketing/home/start-building"; +import { Box } from "@mui/system"; export const metadata = { title: config.site.name, @@ -18,6 +18,15 @@ export default function Page() { return (
+ diff --git a/src/app/layout.js b/src/app/layout.js index 34e8e6b..d8f8445 100644 --- a/src/app/layout.js +++ b/src/app/layout.js @@ -1,26 +1,30 @@ -import * as React from 'react'; +import * as React from "react"; -import '@/styles/global.css'; +import "@/styles/global.css"; -import { config } from '@/config'; -import { applyDefaultSettings } from '@/lib/settings/apply-default-settings'; -import { getSettings as getPersistedSettings } from '@/lib/settings/get-settings'; -import { UserProvider } from '@/contexts/auth/user-context'; -import { SettingsProvider } from '@/contexts/settings'; -import { Analytics } from '@/components/core/analytics'; -import { I18nProvider } from '@/components/core/i18n-provider'; -import { LocalizationProvider } from '@/components/core/localization-provider'; -import { SettingsButton } from '@/components/core/settings/settings-button'; -import { ThemeProvider } from '@/components/core/theme-provider/theme-provider'; +import { config } from "@/config"; +import { applyDefaultSettings } from "@/lib/settings/apply-default-settings"; +import { getSettings as getPersistedSettings } from "@/lib/settings/get-settings"; +import { UserProvider } from "@/contexts/auth/user-context"; +import { SettingsProvider } from "@/contexts/settings"; +import { Analytics } from "@/components/core/analytics"; +import { I18nProvider } from "@/components/core/i18n-provider"; +import { LocalizationProvider } from "@/components/core/localization-provider"; +import { SettingsButton } from "@/components/core/settings/settings-button"; +import { ThemeProvider } from "@/components/core/theme-provider/theme-provider"; import { Query, QueryClient, QueryClientProvider } from "@tanstack/react-query"; -import { Toaster } from '@/components/core/toaster'; -import QueryProvider from './query-provider'; - -export const metadata = { title: config.site.name }; +import { Toaster } from "@/components/core/toaster"; +import QueryProvider from "./query-provider"; +export const metadata = { + title: config.site.name, + icons: { + icon: "/favicon.svg", + }, +}; export const viewport = { - width: 'device-width', + width: "device-width", initialScale: 1, themeColor: config.site.themeColor, }; @@ -35,15 +39,15 @@ export default async function Layout({ children }) { - - - - {children} - {/**/} - - - - + + + + {children} + {/* */} + + + + diff --git a/src/components/core/logo.js b/src/components/core/logo.js index 61eb05d..c85fcf3 100644 --- a/src/components/core/logo.js +++ b/src/components/core/logo.js @@ -1,32 +1,56 @@ -'use client'; +"use client"; -import * as React from 'react'; -import Box from '@mui/material/Box'; -import { useColorScheme } from '@mui/material/styles'; +import * as React from "react"; +import Box from "@mui/material/Box"; +import { useColorScheme } from "@mui/material/styles"; -import { NoSsr } from '@/components/core/no-ssr'; +import { NoSsr } from "@/components/core/no-ssr"; const HEIGHT = 60; const WIDTH = 60; -export function Logo({ color = 'dark', emblem, height = HEIGHT, width = WIDTH }) { +export function Logo({ + color = "dark", + emblem, + height = HEIGHT, + width = WIDTH, +}) { let url; if (emblem) { - url = color === 'light' ? '/assets/logo-emblem.svg' : '/assets/logo-emblem--dark.svg'; + url = + color === "light" + ? "/assets/logo-emblem.svg" + : "/assets/logo-emblem--dark.svg"; } else { - url = color === 'light' ? '/assets/logo.svg' : '/assets/logo--dark.svg'; + url = color === "light" ? "/assets/logo.svg" : "/assets/logo--dark.svg"; } - return ; + return ( + + ); } -export function DynamicLogo({ colorDark = 'light', colorLight = 'dark', height = HEIGHT, width = WIDTH, ...props }) { +export function DynamicLogo({ + colorDark = "light", + colorLight = "dark", + height = HEIGHT, + width = WIDTH, + ...props +}) { const { colorScheme } = useColorScheme(); - const color = colorScheme === 'dark' ? colorDark : colorLight; + const color = colorScheme === "dark" ? colorDark : colorLight; return ( - }> + } + > ); diff --git a/src/components/dashboard/layout/mobile-nav.js b/src/components/dashboard/layout/mobile-nav.js index 884d5ae..4c81231 100644 --- a/src/components/dashboard/layout/mobile-nav.js +++ b/src/components/dashboard/layout/mobile-nav.js @@ -1,23 +1,23 @@ -'use client'; +"use client"; -import * as React from 'react'; -import RouterLink from 'next/link'; -import { usePathname } from 'next/navigation'; -import Box from '@mui/material/Box'; -import Chip from '@mui/material/Chip'; -import Drawer from '@mui/material/Drawer'; -import Stack from '@mui/material/Stack'; -import Typography from '@mui/material/Typography'; -import { ArrowSquareOut as ArrowSquareOutIcon } from '@phosphor-icons/react/dist/ssr/ArrowSquareOut'; -import { CaretDown as CaretDownIcon } from '@phosphor-icons/react/dist/ssr/CaretDown'; -import { CaretRight as CaretRightIcon } from '@phosphor-icons/react/dist/ssr/CaretRight'; +import * as React from "react"; +import RouterLink from "next/link"; +import { usePathname } from "next/navigation"; +import Box from "@mui/material/Box"; +import Chip from "@mui/material/Chip"; +import Drawer from "@mui/material/Drawer"; +import Stack from "@mui/material/Stack"; +import Typography from "@mui/material/Typography"; +import { ArrowSquareOut as ArrowSquareOutIcon } from "@phosphor-icons/react/dist/ssr/ArrowSquareOut"; +import { CaretDown as CaretDownIcon } from "@phosphor-icons/react/dist/ssr/CaretDown"; +import { CaretRight as CaretRightIcon } from "@phosphor-icons/react/dist/ssr/CaretRight"; -import { paths } from '@/paths'; -import { isNavItemActive } from '@/lib/is-nav-item-active'; -import { Logo } from '@/components/core/logo'; +import { paths } from "@/paths"; +import { isNavItemActive } from "@/lib/is-nav-item-active"; +import { Logo } from "@/components/core/logo"; -import { icons } from './nav-icons'; -import { WorkspacesSwitch } from './workspaces-switch'; +import { icons } from "./nav-icons"; +import { WorkspacesSwitch } from "./workspaces-switch"; export function MobileNav({ items = [], open, onClose }) { const pathname = usePathname(); @@ -26,34 +26,35 @@ export function MobileNav({ items = [], open, onClose }) {
- - + +
- + {renderNavGroups({ items, onClose, pathname })} @@ -80,20 +85,28 @@ function renderNavGroups({ items, onClose, pathname }) { {curr.title ? (
- + {curr.title}
) : null} -
{renderNavItems({ depth: 0, items: curr.items, onClose, pathname })}
- +
+ {renderNavItems({ depth: 0, items: curr.items, onClose, pathname })} +
+ , ); return acc; }, []); return ( - + {children} ); @@ -104,20 +117,44 @@ function renderNavItems({ depth = 0, items = [], onClose, pathname }) { const { items: childItems, key, ...item } = curr; const forceOpen = childItems - ? Boolean(childItems.find((childItem) => childItem.href && pathname.startsWith(childItem.href))) + ? Boolean( + childItems.find( + (childItem) => + childItem.href && pathname.startsWith(childItem.href), + ), + ) : false; acc.push( - - {childItems ? renderNavItems({ depth: depth + 1, items: childItems, onClose, pathname }) : null} - + + {childItems + ? renderNavItems({ + depth: depth + 1, + items: childItems, + onClose, + pathname, + }) + : null} + , ); return acc; }, []); return ( - + {children} ); @@ -138,14 +175,20 @@ function NavItem({ title, }) { const [open, setOpen] = React.useState(forceOpen); - const active = isNavItemActive({ disabled, external, href, matcher, pathname }); + const active = isNavItemActive({ + disabled, + external, + href, + matcher, + pathname, + }); const Icon = icon ? icons[icon] : null; const ExpandIcon = open ? CaretDownIcon : CaretRightIcon; const isBranch = children && !href; const showChildren = Boolean(children && open); return ( - + { - if (event.key === 'Enter' || event.key === ' ') { + if (event.key === "Enter" || event.key === " ") { setOpen(!open); } }, - role: 'button', + role: "button", } : { ...(href ? { - component: external ? 'a' : RouterLink, + component: external ? "a" : RouterLink, href, - target: external ? '_blank' : undefined, - rel: external ? 'noreferrer' : undefined, + target: external ? "_blank" : undefined, + rel: external ? "noreferrer" : undefined, onClick: () => { onClose?.(); }, } - : { role: 'button' }), + : { role: "button" }), })} sx={{ - alignItems: 'center', + alignItems: "center", borderRadius: 1, - color: 'var(--NavItem-color)', - cursor: 'pointer', - display: 'flex', - flex: '0 0 auto', + color: "var(--NavItem-color)", + cursor: "pointer", + display: "flex", + flex: "0 0 auto", gap: 1, - p: '6px 16px', - position: 'relative', - textDecoration: 'none', - whiteSpace: 'nowrap', + p: "6px 16px", + position: "relative", + textDecoration: "none", + whiteSpace: "nowrap", ...(disabled && { - bgcolor: 'var(--NavItem-disabled-background)', - color: 'var(--NavItem-disabled-color)', - cursor: 'not-allowed', + bgcolor: "var(--NavItem-disabled-background)", + color: "var(--NavItem-disabled-color)", + cursor: "not-allowed", }), ...(active && { - bgcolor: 'var(--NavItem-active-background)', - color: 'var(--NavItem-active-color)', + bgcolor: "var(--NavItem-active-background)", + color: "var(--NavItem-active-color)", ...(depth > 0 && { - '&::before': { - bgcolor: 'var(--NavItem-children-indicator)', - borderRadius: '2px', + "&::before": { + bgcolor: "var(--NavItem-children-indicator)", + borderRadius: "2px", content: '" "', - height: '20px', - left: '-14px', - position: 'absolute', - width: '3px', + height: "20px", + left: "-14px", + position: "absolute", + width: "3px", }, }), }), - ...(open && { color: 'var(--NavItem-open-color)' }), - '&:hover': { + ...(open && { color: "var(--NavItem-open-color)" }), + "&:hover": { ...(!disabled && - !active && { bgcolor: 'var(--NavItem-hover-background)', color: 'var(--NavItem-hover-color)' }), + !active && { + bgcolor: "var(--NavItem-hover-background)", + color: "var(--NavItem-hover-color)", + }), }, }} tabIndex={0} > - + {Icon ? ( ) : null} - + {title} {label ? : null} {external ? ( - - + + ) : null} {isBranch ? ( - - + + ) : null} {showChildren ? ( - - {children} + + + {children} + ) : null} diff --git a/src/components/dashboard/layout/vertical/side-nav.js b/src/components/dashboard/layout/vertical/side-nav.js index be07082..7f9620a 100644 --- a/src/components/dashboard/layout/vertical/side-nav.js +++ b/src/components/dashboard/layout/vertical/side-nav.js @@ -1,33 +1,33 @@ -import * as React from 'react'; -import RouterLink from 'next/link'; -import { usePathname } from 'next/navigation'; -import Box from '@mui/material/Box'; -import Chip from '@mui/material/Chip'; -import Stack from '@mui/material/Stack'; -import Typography from '@mui/material/Typography'; -import { ArrowSquareOut as ArrowSquareOutIcon } from '@phosphor-icons/react/dist/ssr/ArrowSquareOut'; -import { CaretDown as CaretDownIcon } from '@phosphor-icons/react/dist/ssr/CaretDown'; -import { CaretRight as CaretRightIcon } from '@phosphor-icons/react/dist/ssr/CaretRight'; - -import { paths } from '@/paths'; -import { isNavItemActive } from '@/lib/is-nav-item-active'; -import { useSettings } from '@/hooks/use-settings'; -import { Logo } from '@/components/core/logo'; - -import { icons } from '../nav-icons'; -import { WorkspacesSwitch } from '../workspaces-switch'; -import { navColorStyles } from './styles'; +import * as React from "react"; +import RouterLink from "next/link"; +import { usePathname } from "next/navigation"; +import Box from "@mui/material/Box"; +import Chip from "@mui/material/Chip"; +import Stack from "@mui/material/Stack"; +import Typography from "@mui/material/Typography"; +import { ArrowSquareOut as ArrowSquareOutIcon } from "@phosphor-icons/react/dist/ssr/ArrowSquareOut"; +import { CaretDown as CaretDownIcon } from "@phosphor-icons/react/dist/ssr/CaretDown"; +import { CaretRight as CaretRightIcon } from "@phosphor-icons/react/dist/ssr/CaretRight"; + +import { paths } from "@/paths"; +import { isNavItemActive } from "@/lib/is-nav-item-active"; +import { useSettings } from "@/hooks/use-settings"; +import { Logo } from "@/components/core/logo"; + +import { icons } from "../nav-icons"; +import { WorkspacesSwitch } from "../workspaces-switch"; +import { navColorStyles } from "./styles"; const logoColors = { - dark: { blend_in: 'light', discrete: 'light', evident: 'light' }, - light: { blend_in: 'dark', discrete: 'dark', evident: 'light' }, + dark: { blend_in: "light", discrete: "light", evident: "light" }, + light: { blend_in: "dark", discrete: "dark", evident: "light" }, }; -export function SideNav({ color = 'evident', items = [] }) { +export function SideNav({ color = "evident", items = [] }) { const pathname = usePathname(); const { - settings: { colorScheme = 'light' }, + settings: { colorScheme = "light" }, } = useSettings(); const styles = navColorStyles[colorScheme][color]; @@ -37,23 +37,27 @@ export function SideNav({ color = 'evident', items = [] }) { - +
- - + +
@@ -61,11 +65,11 @@ export function SideNav({ color = 'evident', items = [] }) { {renderNavGroups({ items, pathname })} @@ -80,20 +84,26 @@ function renderNavGroups({ items, pathname }) { {curr.title ? (
- + {curr.title}
) : null}
{renderNavItems({ depth: 0, items: curr.items, pathname })}
- + , ); return acc; }, []); return ( - + {children} ); @@ -104,20 +114,38 @@ function renderNavItems({ depth = 0, items = [], pathname }) { const { items: childItems, key, ...item } = curr; const forceOpen = childItems - ? Boolean(childItems.find((childItem) => childItem.href && pathname.startsWith(childItem.href))) + ? Boolean( + childItems.find( + (childItem) => + childItem.href && pathname.startsWith(childItem.href), + ), + ) : false; acc.push( - - {childItems ? renderNavItems({ depth: depth + 1, pathname, items: childItems }) : null} - + + {childItems + ? renderNavItems({ depth: depth + 1, pathname, items: childItems }) + : null} + , ); return acc; }, []); return ( - + {children} ); @@ -137,14 +165,20 @@ function NavItem({ title, }) { const [open, setOpen] = React.useState(forceOpen); - const active = isNavItemActive({ disabled, external, href, matcher, pathname }); + const active = isNavItemActive({ + disabled, + external, + href, + matcher, + pathname, + }); const Icon = icon ? icons[icon] : null; const ExpandIcon = open ? CaretDownIcon : CaretRightIcon; const isBranch = children && !href; const showChildren = Boolean(children && open); return ( - + { - if (event.key === 'Enter' || event.key === ' ') { + if (event.key === "Enter" || event.key === " ") { setOpen(!open); } }, - role: 'button', + role: "button", } : { ...(href ? { - component: external ? 'a' : RouterLink, + component: external ? "a" : RouterLink, href, - target: external ? '_blank' : undefined, - rel: external ? 'noreferrer' : undefined, + target: external ? "_blank" : undefined, + rel: external ? "noreferrer" : undefined, } - : { role: 'button' }), + : { role: "button" }), })} sx={{ - alignItems: 'center', + alignItems: "center", borderRadius: 1, - color: 'var(--NavItem-color)', - cursor: 'pointer', - display: 'flex', - flex: '0 0 auto', + color: "var(--NavItem-color)", + cursor: "pointer", + display: "flex", + flex: "0 0 auto", gap: 1, - p: '6px 16px', - position: 'relative', - textDecoration: 'none', - whiteSpace: 'nowrap', + p: "6px 16px", + position: "relative", + textDecoration: "none", + whiteSpace: "nowrap", ...(disabled && { - bgcolor: 'var(--NavItem-disabled-background)', - color: 'var(--NavItem-disabled-color)', - cursor: 'not-allowed', + bgcolor: "var(--NavItem-disabled-background)", + color: "var(--NavItem-disabled-color)", + cursor: "not-allowed", }), ...(active && { - bgcolor: 'var(--NavItem-active-background)', - color: 'var(--NavItem-active-color)', + bgcolor: "var(--NavItem-active-background)", + color: "var(--NavItem-active-color)", ...(depth > 0 && { - '&::before': { - bgcolor: 'var(--NavItem-children-indicator)', - borderRadius: '2px', + "&::before": { + bgcolor: "var(--NavItem-children-indicator)", + borderRadius: "2px", content: '" "', - height: '20px', - left: '-14px', - position: 'absolute', - width: '3px', + height: "20px", + left: "-14px", + position: "absolute", + width: "3px", }, }), }), - ...(open && { color: 'var(--NavItem-open-color)' }), - '&:hover': { + ...(open && { color: "var(--NavItem-open-color)" }), + "&:hover": { ...(!disabled && - !active && { bgcolor: 'var(--NavItem-hover-background)', color: 'var(--NavItem-hover-color)' }), + !active && { + bgcolor: "var(--NavItem-hover-background)", + color: "var(--NavItem-hover-color)", + }), }, }} tabIndex={0} > - + {Icon ? ( ) : null} - + {title} {label ? : null} {external ? ( - - + + ) : null} {isBranch ? ( - - + + ) : null} {showChildren ? ( - - {children} + + + {children} + ) : null} diff --git a/src/components/marketing/home/hero.js b/src/components/marketing/home/hero.js index 141147f..ac08b62 100644 --- a/src/components/marketing/home/hero.js +++ b/src/components/marketing/home/hero.js @@ -6,214 +6,361 @@ import Box from "@mui/material/Box"; import Button from "@mui/material/Button"; import Container from "@mui/material/Container"; import Stack from "@mui/material/Stack"; -import { useColorScheme } from "@mui/material/styles"; import Typography from "@mui/material/Typography"; import { paths } from "@/paths"; +import { useRef } from "react"; +import gsap from "gsap"; +import { ScrollTrigger } from "gsap/ScrollTrigger"; export function Hero() { - const { colorScheme } = useColorScheme(); - - const [img, setImg] = React.useState("/assets/home-hero-light.png"); + const demoRef = useRef(null); + const ctaRef = useRef(null); + const titleRef = useRef(null); + const subtitleRef = useRef(null); + const buttonGroupRef = useRef(null); + const strikeRef = useRef(null); + const [loaded, setLoaded] = React.useState(false); + const blurredRef = useRef(null); + const fullResRef = useRef(null); React.useEffect(() => { - setImg( - colorScheme === "dark" - ? "/assets/home-hero-dark.png" - : "/assets/home-hero-light.png", + const imgEl = fullResRef.current; + if (!imgEl) return; + + if (imgEl.complete) { + setLoaded(true); + } + }, []); + + React.useLayoutEffect(() => { + if (!ctaRef.current || !demoRef.current) return; + + gsap.registerPlugin(ScrollTrigger); + + const tl = gsap.timeline({ + scrollTrigger: { + trigger: "#hero-section", + start: "top top", + end: "bottom +=40%", + scrub: true, + pin: ctaRef.current, + pinSpacing: false, + anticipatePin: 1, + invalidateOnRefresh: true, + }, + }); + + tl.to( + demoRef.current, + { + scale: 1.2, + ease: "none", + }, + 0, + ); + + tl.to( + ctaRef.current, + { + scale: 0.8, + autoAlpha: 0, + ease: "none", + }, + 0, + ); + + return () => ScrollTrigger.getAll().forEach((t) => t.kill()); + }, []); + + React.useLayoutEffect(() => { + if (!titleRef.current || !subtitleRef.current) return; + + const tl = gsap.timeline(); + + tl.to(titleRef.current, { + autoAlpha: 1, + filter: "blur(0px)", + duration: 1.5, + ease: "power3.out", + }); + + tl.to( + subtitleRef.current, + { + autoAlpha: 1, + filter: "blur(0px)", + duration: 1, + ease: "power3.out", + }, + "-=1", + ); + + tl.to( + buttonGroupRef.current, + { + autoAlpha: 1, + filter: "blur(0px)", + duration: 1, + ease: "power3.out", + }, + "-=0.8", + ); + + tl.to( + strikeRef.current, + { + "--strike-width": "100%", + duration: 0.5, + ease: "power2.out", + }, + "+=0.2", ); - }, [colorScheme]); + + return () => tl.kill(); + }, []); return ( - - - - - - - {/* - EduCourse Streamlines your Administration Process
+ Students, not
- One Step at a Time + paperwork - */} + + + - EduCourse makes Capstone Scheduling{" "} - - simple. - + EduCourse is your trusted, turbo-charged course and capstone + scheduling software. - + - - - - - Built for School Administrators - {" "} - | Free, secure and highly efficent softwares. - - - + + - + > + + + + setLoaded(true)} + sx={{ + width: "100%", + display: "block", + zIndex: 20, + opacity: loaded ? 1 : 0, + transition: "opacity 0.4s ease-in-out", + pointerEvents: "none", + }} + /> + + ); diff --git a/src/components/marketing/home/included.js b/src/components/marketing/home/included.js index 91387f0..28560cd 100644 --- a/src/components/marketing/home/included.js +++ b/src/components/marketing/home/included.js @@ -1,49 +1,58 @@ -import * as React from 'react'; -import RouterLink from 'next/link'; -import Box from '@mui/material/Box'; -import Button from '@mui/material/Button'; -import Chip from '@mui/material/Chip'; -import Container from '@mui/material/Container'; -import Stack from '@mui/material/Stack'; -import Typography from '@mui/material/Typography'; -import Grid from '@mui/material/Unstable_Grid2'; -import { Lightning as LightningIcon } from '@phosphor-icons/react/dist/ssr/Lightning'; +import * as React from "react"; +import RouterLink from "next/link"; +import Box from "@mui/material/Box"; +import Button from "@mui/material/Button"; +import Chip from "@mui/material/Chip"; +import Container from "@mui/material/Container"; +import Stack from "@mui/material/Stack"; +import Typography from "@mui/material/Typography"; +import Grid from "@mui/material/Unstable_Grid2"; +import { Lightning as LightningIcon } from "@phosphor-icons/react/dist/ssr/Lightning"; -import { paths } from '@/paths'; +import { paths } from "@/paths"; export function Included() { return ( - + - + - + What can you expect - + All the resources you need to build a better experience @@ -53,34 +62,52 @@ export function Included() {
- } label="Quality widgets" variant="soft" /> + } + label="Quality widgets" + variant="soft" + />
Dashboards - Our interactive dashboard provides an all-encompassing view of student sign-ups and allows printing in one click. + Our interactive dashboard provides an all-encompassing view of + student sign-ups and allows printing in one click.
-
- + @@ -88,7 +115,12 @@ export function Included() { alt="Widgets" component="img" src="/assets/home-widgets.png" - sx={{ height: 'auto', position: 'relative', width: '100%', zIndex: 1 }} + sx={{ + height: "auto", + position: "relative", + width: "100%", + zIndex: 1, + }} /> diff --git a/src/components/marketing/layout/main-nav.js b/src/components/marketing/layout/main-nav.js index 4e2408f..9f39028 100644 --- a/src/components/marketing/layout/main-nav.js +++ b/src/components/marketing/layout/main-nav.js @@ -27,12 +27,15 @@ export function MainNav() { const pathname = usePathname(); const [scrollPercentage, setScrollPercentage] = useState(0); const [scrolledPastHero, setScrolledPastHero] = useState(false); + const [scrollY, setScrollY] = useState(0); useEffect(() => { const handleScroll = () => { const { scrollTop, scrollHeight, clientHeight } = document.documentElement; + const percentage = (scrollTop / (scrollHeight - clientHeight)) * 100; + setScrollY(scrollTop); setScrollPercentage(percentage); }; @@ -43,35 +46,35 @@ export function MainNav() { }, []); useEffect(() => { - if (scrollPercentage > 1 && !scrolledPastHero) { - setScrolledPastHero(true); - } else if (scrollPercentage <= 1 && scrolledPastHero) { - setScrolledPastHero(false); - } - }, [scrollPercentage, scrolledPastHero]); + const heroHeight = + document.getElementById("hero-section")?.offsetHeight || 0; + const passed = scrollY >= heroHeight - 85; + + setScrolledPastHero((prev) => (prev !== passed ? passed : prev)); + }, [scrollY]); return ( - + @@ -128,25 +127,20 @@ export function MainNav() { */} - - + {scrolledPastHero && ( + + )} + { setOpenNav(true); @@ -213,9 +207,7 @@ export function NavItem({ sx={{ alignItems: "center", borderRadius: 1, - color: scrolledPastHero - ? "var(--mui-palette-neutral-300)" - : "var(--mui-palette-neutral-900)", + color: "var(--mui-palette-neutral-100)", cursor: "pointer", display: "flex", flex: "0 0 auto", @@ -233,8 +225,7 @@ export function NavItem({ "&:hover": { ...(!disabled && !active && { - bgcolor: "rgba(255, 255, 255, 0.04)", - color: "var(--mui-palette-common-white)", + bgcolor: "rgba(255, 255, 255, 0.1)", }), }, }} diff --git a/src/config.js b/src/config.js index 1752a68..c853775 100644 --- a/src/config.js +++ b/src/config.js @@ -1,17 +1,17 @@ -import { AuthStrategy } from '@/lib/auth/strategy'; -import { getSiteURL } from '@/lib/get-site-url'; -import { LogLevel } from '@/lib/logger'; +import { AuthStrategy } from "@/lib/auth/strategy"; +import { getSiteURL } from "@/lib/get-site-url"; +import { LogLevel } from "@/lib/logger"; export const config = { site: { - name: 'Educourse', - description: '', - language: 'en', - colorScheme: 'light', - themeColor: '#090a0b', - primaryColor: 'neonBlue', + name: "EduCourse", + description: "", + language: "en", + colorScheme: "light", + themeColor: "#090a0b", + primaryColor: "neonBlue", url: getSiteURL(), - version: process.env.NEXT_PUBLIC_SITE_VERSION || '0.0.0', + version: process.env.NEXT_PUBLIC_SITE_VERSION || "0.0.0", }, logLevel: process.env.NEXT_PUBLIC_LOG_LEVEL || LogLevel.ALL, auth: { strategy: AuthStrategy.FIREBASE }, @@ -23,7 +23,10 @@ export const config = { projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID, storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET, }, - supabase: { url: process.env.NEXT_PUBLIC_SUPABASE_URL, anonKey: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY }, + supabase: { + url: process.env.NEXT_PUBLIC_SUPABASE_URL, + anonKey: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY, + }, mapbox: { apiKey: process.env.NEXT_PUBLIC_MAPBOX_API_KEY }, gtm: { id: process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID }, }; diff --git a/src/styles/global.css b/src/styles/global.css index 8dbaae1..3540e43 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -1,20 +1,20 @@ /* Remove if fonts are not used */ -@import '~@fontsource/inter/100.css'; -@import '~@fontsource/inter/200.css'; -@import '~@fontsource/inter/300.css'; -@import '~@fontsource/inter/400.css'; -@import '~@fontsource/inter/500.css'; -@import '~@fontsource/inter/600.css'; -@import '~@fontsource/inter/700.css'; -@import '~@fontsource/inter/800.css'; -@import '~@fontsource/inter/900.css'; -@import '~@fontsource/roboto-mono/300.css'; -@import '~@fontsource/roboto-mono/400.css'; -@import '~@fontsource/plus-jakarta-sans/600.css'; -@import '~@fontsource/plus-jakarta-sans/700.css'; +@import "~@fontsource/inter/100.css"; +@import "~@fontsource/inter/200.css"; +@import "~@fontsource/inter/300.css"; +@import "~@fontsource/inter/400.css"; +@import "~@fontsource/inter/500.css"; +@import "~@fontsource/inter/600.css"; +@import "~@fontsource/inter/700.css"; +@import "~@fontsource/inter/800.css"; +@import "~@fontsource/inter/900.css"; +@import "~@fontsource/roboto-mono/300.css"; +@import "~@fontsource/roboto-mono/400.css"; +@import "~@fontsource/plus-jakarta-sans/600.css"; +@import "~@fontsource/plus-jakarta-sans/700.css"; /* Remove if mapbox is not used */ -@import '~mapbox-gl/dist/mapbox-gl.css'; +@import "~mapbox-gl/dist/mapbox-gl.css"; /* Remove is recharts is not used */ .recharts-cartesian-axis-tick-value { @@ -139,3 +139,35 @@ html { body { height: 100%; } + +.push-to-back { + z-index: -1 !important; +} + +img { + user-select: none !important; + -webkit-user-drag: none !important; + -khtml-user-drag: none !important; + -moz-user-drag: none !important; + -o-user-drag: none !important; + -ms-user-drag: none !important; +} + +.pin-spacer { + pointer-events: none !important; +} + +@keyframes pulseGlow { + 0% { + transform: translate(-50%, -50%) scale(1); + opacity: 0.6; + } + 50% { + transform: translate(-50%, -50%) scale(1.1); + opacity: 0.9; + } + 100% { + transform: translate(-50%, -50%) scale(1); + opacity: 0.6; + } +} diff --git a/src/styles/theme/color-schemes.js b/src/styles/theme/color-schemes.js index 15064c2..998ef92 100644 --- a/src/styles/theme/color-schemes.js +++ b/src/styles/theme/color-schemes.js @@ -1,4 +1,4 @@ -import { logger } from '@/lib/default-logger'; +import { logger } from "@/lib/default-logger"; import { california, @@ -11,7 +11,7 @@ import { shakespeare, stormGrey, tomatoOrange, -} from './colors'; +} from "./colors"; const primarySchemes = { chateauGreen: { @@ -20,20 +20,26 @@ const primarySchemes = { light: chateauGreen[300], main: chateauGreen[400], dark: chateauGreen[500], - contrastText: 'var(--mui-palette-common-black)', - activated: 'rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-activatedOpacity))', - hovered: 'rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-hoverOpacity))', - selected: 'rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-selectedOpacity))', + contrastText: "var(--mui-palette-common-black)", + activated: + "rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-activatedOpacity))", + hovered: + "rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-hoverOpacity))", + selected: + "rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-selectedOpacity))", }, light: { ...chateauGreen, light: chateauGreen[400], main: chateauGreen[500], dark: chateauGreen[600], - contrastText: 'var(--mui-palette-common-white)', - activated: 'rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-activatedOpacity))', - hovered: 'rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-hoverOpacity))', - selected: 'rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-selectedOpacity))', + contrastText: "var(--mui-palette-common-white)", + activated: + "rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-activatedOpacity))", + hovered: + "rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-hoverOpacity))", + selected: + "rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-selectedOpacity))", }, }, neonBlue: { @@ -42,20 +48,26 @@ const primarySchemes = { light: neonBlue[300], main: neonBlue[400], dark: neonBlue[500], - contrastText: 'var(--mui-palette-common-black)', - activated: 'rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-activatedOpacity))', - hovered: 'rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-hoverOpacity))', - selected: 'rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-selectedOpacity))', + contrastText: "var(--mui-palette-common-black)", + activated: + "rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-activatedOpacity))", + hovered: + "rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-hoverOpacity))", + selected: + "rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-selectedOpacity))", }, light: { ...neonBlue, light: neonBlue[400], main: neonBlue[500], dark: neonBlue[600], - contrastText: 'var(--mui-palette-common-white)', - activated: 'rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-activatedOpacity))', - hovered: 'rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-hoverOpacity))', - selected: 'rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-selectedOpacity))', + contrastText: "var(--mui-palette-common-white)", + activated: + "rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-activatedOpacity))", + hovered: + "rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-hoverOpacity))", + selected: + "rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-selectedOpacity))", }, }, royalBlue: { @@ -64,20 +76,26 @@ const primarySchemes = { light: royalBlue[300], main: royalBlue[400], dark: royalBlue[500], - contrastText: 'var(--mui-palette-common-black)', - activated: 'rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-activatedOpacity))', - hovered: 'rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-hoverOpacity))', - selected: 'rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-selectedOpacity))', + contrastText: "var(--mui-palette-common-black)", + activated: + "rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-activatedOpacity))", + hovered: + "rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-hoverOpacity))", + selected: + "rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-selectedOpacity))", }, light: { ...royalBlue, light: royalBlue[400], main: royalBlue[500], dark: royalBlue[600], - contrastText: 'var(--mui-palette-common-white)', - activated: 'rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-activatedOpacity))', - hovered: 'rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-hoverOpacity))', - selected: 'rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-selectedOpacity))', + contrastText: "var(--mui-palette-common-white)", + activated: + "rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-activatedOpacity))", + hovered: + "rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-hoverOpacity))", + selected: + "rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-selectedOpacity))", }, }, tomatoOrange: { @@ -86,20 +104,26 @@ const primarySchemes = { light: tomatoOrange[300], main: tomatoOrange[400], dark: tomatoOrange[500], - contrastText: 'var(--mui-palette-common-black)', - activated: 'rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-activatedOpacity))', - hovered: 'rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-hoverOpacity))', - selected: 'rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-selectedOpacity))', + contrastText: "var(--mui-palette-common-black)", + activated: + "rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-activatedOpacity))", + hovered: + "rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-hoverOpacity))", + selected: + "rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-selectedOpacity))", }, light: { ...tomatoOrange, light: tomatoOrange[400], main: tomatoOrange[500], dark: tomatoOrange[600], - contrastText: 'var(--mui-palette-common-white)', - activated: 'rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-activatedOpacity))', - hovered: 'rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-hoverOpacity))', - selected: 'rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-selectedOpacity))', + contrastText: "var(--mui-palette-common-white)", + activated: + "rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-activatedOpacity))", + hovered: + "rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-hoverOpacity))", + selected: + "rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-selectedOpacity))", }, }, }; @@ -108,45 +132,53 @@ export function colorSchemes(config) { let primary = primarySchemes[config.primaryColor]; if (!primary) { - logger.warn(`No primary color found for ${config.primaryColor}. Using neonBlue instead.`); + logger.warn( + `No primary color found for ${config.primaryColor}. Using neonBlue instead.`, + ); primary = primarySchemes.neonBlue; } return { dark: { palette: { - action: { disabledBackground: 'rgba(0, 0, 0, 0.12)' }, + action: { disabledBackground: "rgba(0, 0, 0, 0.12)" }, background: { - default: 'var(--mui-palette-neutral-950)', - defaultChannel: '9 10 11', - paper: 'var(--mui-palette-neutral-900)', - paperChannel: '18 21 23', - level1: 'var(--mui-palette-neutral-800)', - level2: 'var(--mui-palette-neutral-700)', - level3: 'var(--mui-palette-neutral-600)', + default: "var(--mui-palette-neutral-950)", + defaultChannel: "9 10 11", + paper: "var(--mui-palette-neutral-900)", + paperChannel: "18 21 23", + level1: "var(--mui-palette-neutral-800)", + level2: "var(--mui-palette-neutral-700)", + level3: "var(--mui-palette-neutral-600)", }, - common: { black: '#000000', white: '#ffffff' }, - divider: 'var(--mui-palette-neutral-700)', - dividerChannel: '50 56 62', + common: { black: "#000000", white: "#ffffff" }, + divider: "var(--mui-palette-neutral-700)", + dividerChannel: "50 56 62", error: { ...redOrange, light: redOrange[300], main: redOrange[400], dark: redOrange[500], - contrastText: 'var(--mui-palette-common-black)', - activated: 'rgba(var(--mui-palette-error-mainChannel) / var(--mui-palette-action-activatedOpacity))', - hovered: 'rgba(var(--mui-palette-error-mainChannel) / var(--mui-palette-action-hoverOpacity))', - selected: 'rgba(var(--mui-palette-error-mainChannel) / var(--mui-palette-action-selectedOpacity))', + contrastText: "var(--mui-palette-common-black)", + activated: + "rgba(var(--mui-palette-error-mainChannel) / var(--mui-palette-action-activatedOpacity))", + hovered: + "rgba(var(--mui-palette-error-mainChannel) / var(--mui-palette-action-hoverOpacity))", + selected: + "rgba(var(--mui-palette-error-mainChannel) / var(--mui-palette-action-selectedOpacity))", }, info: { ...shakespeare, light: shakespeare[300], main: shakespeare[400], dark: shakespeare[500], - contrastText: 'var(--mui-palette-common-black)', - activated: 'rgba(var(--mui-palette-info-mainChannel) / var(--mui-palette-action-activatedOpacity))', - hovered: 'rgba(var(--mui-palette-info-mainChannel) / var(--mui-palette-action-hoverOpacity))', - selected: 'rgba(var(--mui-palette-info-mainChannel) / var(--mui-palette-action-selectedOpacity))', + contrastText: "var(--mui-palette-common-black)", + activated: + "rgba(var(--mui-palette-info-mainChannel) / var(--mui-palette-action-activatedOpacity))", + hovered: + "rgba(var(--mui-palette-info-mainChannel) / var(--mui-palette-action-hoverOpacity))", + selected: + "rgba(var(--mui-palette-info-mainChannel) / var(--mui-palette-action-selectedOpacity))", }, neutral: { ...nevada }, primary: primary.dark, @@ -155,79 +187,94 @@ export function colorSchemes(config) { light: nevada[100], main: nevada[200], dark: nevada[300], - contrastText: 'var(--mui-palette-common-black)', - activated: 'rgba(var(--mui-palette-secondary-mainChannel) / var(--mui-palette-action-activatedOpacity))', - hovered: 'rgba(var(--mui-palette-secondary-mainChannel) / var(--mui-palette-action-hoverOpacity))', - selected: 'rgba(var(--mui-palette-secondary-mainChannel) / var(--mui-palette-action-selectedOpacity))', + contrastText: "var(--mui-palette-common-black)", + activated: + "rgba(var(--mui-palette-secondary-mainChannel) / var(--mui-palette-action-activatedOpacity))", + hovered: + "rgba(var(--mui-palette-secondary-mainChannel) / var(--mui-palette-action-hoverOpacity))", + selected: + "rgba(var(--mui-palette-secondary-mainChannel) / var(--mui-palette-action-selectedOpacity))", }, success: { ...kepple, light: kepple[300], main: kepple[400], dark: kepple[500], - contrastText: 'var(--mui-palette-common-black)', - activated: 'rgba(var(--mui-palette-success-mainChannel) / var(--mui-palette-action-activatedOpacity))', - hovered: 'rgba(var(--mui-palette-success-mainChannel) / var(--mui-palette-action-hoverOpacity))', - selected: 'rgba(var(--mui-palette-success-mainChannel) / var(--mui-palette-action-selectedOpacity))', + contrastText: "var(--mui-palette-common-black)", + activated: + "rgba(var(--mui-palette-success-mainChannel) / var(--mui-palette-action-activatedOpacity))", + hovered: + "rgba(var(--mui-palette-success-mainChannel) / var(--mui-palette-action-hoverOpacity))", + selected: + "rgba(var(--mui-palette-success-mainChannel) / var(--mui-palette-action-selectedOpacity))", }, text: { - primary: 'var(--mui-palette-neutral-100)', - primaryChannel: '240 244 248', - secondary: 'var(--mui-palette-neutral-400)', - secondaryChannel: '159 166 173', - disabled: 'var(--mui-palette-neutral-600)', + primary: "var(--mui-palette-neutral-100)", + primaryChannel: "240 244 248", + secondary: "var(--mui-palette-neutral-400)", + secondaryChannel: "159 166 173", + disabled: "var(--mui-palette-neutral-600)", }, warning: { ...california, light: california[300], main: california[400], dark: california[500], - contrastText: 'var(--mui-palette-common-black)', - activated: 'rgba(var(--mui-palette-warning-mainChannel) / var(--mui-palette-action-activatedOpacity))', - hovered: 'rgba(var(--mui-palette-warning-mainChannel) / var(--mui-palette-action-hoverOpacity))', - selected: 'rgba(var(--mui-palette-warning-mainChannel) / var(--mui-palette-action-selectedOpacity))', + contrastText: "var(--mui-palette-common-black)", + activated: + "rgba(var(--mui-palette-warning-mainChannel) / var(--mui-palette-action-activatedOpacity))", + hovered: + "rgba(var(--mui-palette-warning-mainChannel) / var(--mui-palette-action-hoverOpacity))", + selected: + "rgba(var(--mui-palette-warning-mainChannel) / var(--mui-palette-action-selectedOpacity))", }, - Avatar: { defaultBg: 'var(--mui-palette-neutral-200)' }, - Backdrop: { bg: 'rgba(0, 0, 0, 0.5)' }, - OutlinedInput: { border: 'var(--mui-palette-neutral-700)' }, - TableCell: { border: 'var(--mui-palette-divider)' }, - Tooltip: { bg: 'rgba(10, 13, 20, 0.75)' }, + Avatar: { defaultBg: "var(--mui-palette-neutral-200)" }, + Backdrop: { bg: "rgba(0, 0, 0, 0.5)" }, + OutlinedInput: { border: "var(--mui-palette-neutral-700)" }, + TableCell: { border: "var(--mui-palette-divider)" }, + Tooltip: { bg: "rgba(10, 13, 20, 0.75)" }, }, }, light: { palette: { - action: { disabledBackground: 'rgba(0, 0, 0, 0.06)' }, + action: { disabledBackground: "rgba(0, 0, 0, 0.06)" }, background: { - default: 'var(--mui-palette-common-white)', - defaultChannel: '255 255 255', - paper: 'var(--mui-palette-common-white)', - paperChannel: '255 255 255', - level1: 'var(--mui-palette-neutral-50)', - level2: 'var(--mui-palette-neutral-100)', - level3: 'var(--mui-palette-neutral-200)', + default: "var(--mui-palette-common-white)", + defaultChannel: "255 255 255", + paper: "var(--mui-palette-common-white)", + paperChannel: "255 255 255", + level1: "var(--mui-palette-neutral-50)", + level2: "var(--mui-palette-neutral-100)", + level3: "var(--mui-palette-neutral-200)", }, - common: { black: '#000000', white: '#ffffff' }, - divider: 'var(--mui-palette-neutral-200)', - dividerChannel: '220 223 228', + common: { black: "#000000", white: "#ffffff" }, + divider: "var(--mui-palette-neutral-200)", + dividerChannel: "220 223 228", error: { ...redOrange, light: redOrange[400], main: redOrange[500], dark: redOrange[600], - contrastText: 'var(--mui-palette-common-white)', - activated: 'rgba(var(--mui-palette-error-mainChannel) / var(--mui-palette-action-activatedOpacity))', - hovered: 'rgba(var(--mui-palette-error-mainChannel) / var(--mui-palette-action-hoverOpacity))', - selected: 'rgba(var(--mui-palette-error-mainChannel) / var(--mui-palette-action-selectedOpacity))', + contrastText: "var(--mui-palette-common-white)", + activated: + "rgba(var(--mui-palette-error-mainChannel) / var(--mui-palette-action-activatedOpacity))", + hovered: + "rgba(var(--mui-palette-error-mainChannel) / var(--mui-palette-action-hoverOpacity))", + selected: + "rgba(var(--mui-palette-error-mainChannel) / var(--mui-palette-action-selectedOpacity))", }, info: { ...shakespeare, light: shakespeare[400], - main: shakespeare[500], - dark: shakespeare[600], - contrastText: 'var(--mui-palette-common-white)', - activated: 'rgba(var(--mui-palette-info-mainChannel) / var(--mui-palette-action-activatedOpacity))', - hovered: 'rgba(var(--mui-palette-info-mainChannel) / var(--mui-palette-action-hoverOpacity))', - selected: 'rgba(var(--mui-palette-info-mainChannel) / var(--mui-palette-action-selectedOpacity))', + main: shakespeare[900], + dark: shakespeare[950], + contrastText: "var(--mui-palette-common-white)", + activated: + "rgba(var(--mui-palette-info-mainChannel) / var(--mui-palette-action-activatedOpacity))", + hovered: + "rgba(var(--mui-palette-info-mainChannel) / var(--mui-palette-action-hoverOpacity))", + selected: + "rgba(var(--mui-palette-info-mainChannel) / var(--mui-palette-action-selectedOpacity))", }, neutral: { ...stormGrey }, primary: primary.light, @@ -236,43 +283,52 @@ export function colorSchemes(config) { light: nevada[600], main: nevada[700], dark: nevada[800], - contrastText: 'var(--mui-palette-common-white)', - activated: 'rgba(var(--mui-palette-secondary-mainChannel) / var(--mui-palette-action-activatedOpacity))', - hovered: 'rgba(var(--mui-palette-secondary-mainChannel) / var(--mui-palette-action-hoverOpacity))', - selected: 'rgba(var(--mui-palette-secondary-mainChannel) / var(--mui-palette-action-selectedOpacity))', + contrastText: "var(--mui-palette-common-white)", + activated: + "rgba(var(--mui-palette-secondary-mainChannel) / var(--mui-palette-action-activatedOpacity))", + hovered: + "rgba(var(--mui-palette-secondary-mainChannel) / var(--mui-palette-action-hoverOpacity))", + selected: + "rgba(var(--mui-palette-secondary-mainChannel) / var(--mui-palette-action-selectedOpacity))", }, success: { ...kepple, light: kepple[400], main: kepple[500], dark: kepple[600], - contrastText: 'var(--mui-palette-common-white)', - activated: 'rgba(var(--mui-palette-success-mainChannel) / var(--mui-palette-action-activatedOpacity))', - hovered: 'rgba(var(--mui-palette-success-mainChannel) / var(--mui-palette-action-hoverOpacity))', - selected: 'rgba(var(--mui-palette-success-mainChannel) / var(--mui-palette-action-selectedOpacity))', + contrastText: "var(--mui-palette-common-white)", + activated: + "rgba(var(--mui-palette-success-mainChannel) / var(--mui-palette-action-activatedOpacity))", + hovered: + "rgba(var(--mui-palette-success-mainChannel) / var(--mui-palette-action-hoverOpacity))", + selected: + "rgba(var(--mui-palette-success-mainChannel) / var(--mui-palette-action-selectedOpacity))", }, text: { - primary: 'var(--mui-palette-neutral-900)', - primaryChannel: '33 38 54', - secondary: 'var(--mui-palette-neutral-500)', - secondaryChannel: '102 112 133', - disabled: 'var(--mui-palette-neutral-400)', + primary: "var(--mui-palette-neutral-900)", + primaryChannel: "33 38 54", + secondary: "var(--mui-palette-neutral-500)", + secondaryChannel: "102 112 133", + disabled: "var(--mui-palette-neutral-400)", }, warning: { ...california, light: california[400], main: california[500], dark: california[600], - contrastText: 'var(--mui-palette-common-white)', - activated: 'rgba(var(--mui-palette-warning-mainChannel) / var(--mui-palette-action-activatedOpacity))', - hovered: 'rgba(var(--mui-palette-warning-mainChannel) / var(--mui-palette-action-hoverOpacity))', - selected: 'rgba(var(--mui-palette-warning-mainChannel) / var(--mui-palette-action-selectedOpacity))', + contrastText: "var(--mui-palette-common-white)", + activated: + "rgba(var(--mui-palette-warning-mainChannel) / var(--mui-palette-action-activatedOpacity))", + hovered: + "rgba(var(--mui-palette-warning-mainChannel) / var(--mui-palette-action-hoverOpacity))", + selected: + "rgba(var(--mui-palette-warning-mainChannel) / var(--mui-palette-action-selectedOpacity))", }, - Avatar: { defaultBg: 'var(--mui-palette-neutral-600)' }, - Backdrop: { bg: 'rgb(18, 22, 33, 0.8)' }, - OutlinedInput: { border: 'var(--mui-palette-neutral-200)' }, - TableCell: { border: 'var(--mui-palette-divider)' }, - Tooltip: { bg: 'rgba(10, 13, 20, 0.75)' }, + Avatar: { defaultBg: "var(--mui-palette-neutral-600)" }, + Backdrop: { bg: "rgb(18, 22, 33, 0.8)" }, + OutlinedInput: { border: "var(--mui-palette-neutral-200)" }, + TableCell: { border: "var(--mui-palette-divider)" }, + Tooltip: { bg: "rgba(10, 13, 20, 0.75)" }, }, }, }; diff --git a/src/styles/theme/colors.js b/src/styles/theme/colors.js index 64910c7..b9f0e9b 100644 --- a/src/styles/theme/colors.js +++ b/src/styles/theme/colors.js @@ -1,139 +1,139 @@ export const california = { - 50: '#fffaea', - 100: '#fff3c6', - 200: '#ffe587', - 300: '#ffd049', - 400: '#ffbb1f', - 500: '#fb9c0c', - 600: '#de7101', - 700: '#b84d05', - 800: '#953b0b', - 900: '#7b310c', - 950: '#471701', + 50: "#fffaea", + 100: "#fff3c6", + 200: "#ffe587", + 300: "#ffd049", + 400: "#ffbb1f", + 500: "#fb9c0c", + 600: "#de7101", + 700: "#b84d05", + 800: "#953b0b", + 900: "#7b310c", + 950: "#471701", }; export const chateauGreen = { - 50: '#edfcf2', - 100: '#d2f9de', - 200: '#aaf0c4', - 300: '#72e3a3', - 400: '#3acd7e', - 500: '#16b364', - 600: '#0a9150', - 700: '#087442', - 800: '#095c37', - 900: '#094b2f', - 950: '#032b1a', + 50: "#edfcf2", + 100: "#d2f9de", + 200: "#aaf0c4", + 300: "#72e3a3", + 400: "#3acd7e", + 500: "#16b364", + 600: "#0a9150", + 700: "#087442", + 800: "#095c37", + 900: "#094b2f", + 950: "#032b1a", }; export const kepple = { - 50: '#f0fdfa', - 100: '#ccfbef', - 200: '#9af5e1', - 300: '#5fe9ce', - 400: '#2ed3b8', - 500: '#15b79f', - 600: '#0e9382', - 700: '#107569', - 800: '#115e56', - 900: '#134e48', - 950: '#042f2c', + 50: "#f0fdfa", + 100: "#ccfbef", + 200: "#9af5e1", + 300: "#5fe9ce", + 400: "#2ed3b8", + 500: "#15b79f", + 600: "#0e9382", + 700: "#107569", + 800: "#115e56", + 900: "#134e48", + 950: "#042f2c", }; export const neonBlue = { - 50: '#ecf0ff', - 100: '#dde3ff', - 200: '#c2cbff', - 300: '#9ca7ff', - 400: '#7578ff', - 500: '#635bff', - 600: '#4e36f5', - 700: '#432ad8', - 800: '#3725ae', - 900: '#302689', - 950: '#1e1650', + 50: "#ecf3ff", + 100: "#dce8ff", + 200: "#c0d4ff", + 300: "#9bb6ff", + 400: "#738dff", + 500: "#5265ff", + 600: "#3339f8", + 700: "#3739de", + 800: "#2225b1", + 900: "#24298b", + 950: "#151651", }; export const nevada = { - 50: '#fbfcfe', - 100: '#f0f4f8', - 200: '#dde7ee', - 300: '#cdd7e1', - 400: '#9fa6ad', - 500: '#636b74', - 600: '#555e68', - 700: '#32383e', - 800: '#202427', - 900: '#121517', - 950: '#090a0b', + 50: "#fbfcfe", + 100: "#f0f4f8", + 200: "#dde7ee", + 300: "#cdd7e1", + 400: "#9fa6ad", + 500: "#636b74", + 600: "#555e68", + 700: "#32383e", + 800: "#202427", + 900: "#121517", + 950: "#090a0b", }; export const redOrange = { - 50: '#fef3f2', - 100: '#fee4e2', - 200: '#ffcdc9', - 300: '#fdaaa4', - 400: '#f97970', - 500: '#f04438', - 600: '#de3024', - 700: '#bb241a', - 800: '#9a221a', - 900: '#80231c', - 950: '#460d09', + 50: "#fef3f2", + 100: "#fee4e2", + 200: "#ffcdc9", + 300: "#fdaaa4", + 400: "#f97970", + 500: "#f04438", + 600: "#de3024", + 700: "#bb241a", + 800: "#9a221a", + 900: "#80231c", + 950: "#460d09", }; export const royalBlue = { - 50: '#ecf3ff', - 100: '#dce8ff', - 200: '#c0d4ff', - 300: '#9bb6ff', - 400: '#738dff', - 500: '#5265ff', - 600: '#3339f8', - 700: '#3739de', - 800: '#2225b1', - 900: '#24298b', - 950: '#151651', + 50: "#ecf0ff", + 100: "#dde3ff", + 200: "#c2cbff", + 300: "#9ca7ff", + 400: "#7578ff", + 500: "#635bff", + 600: "#4e36f5", + 700: "#432ad8", + 800: "#3725ae", + 900: "#302689", + 950: "#1e1650", }; export const shakespeare = { - 50: '#ecfdff', - 100: '#cff7fe', - 200: '#a4eefd', - 300: '#66e0fa', - 400: '#10bee8', - 500: '#04aad6', - 600: '#0787b3', - 700: '#0d6d91', - 800: '#145876', - 900: '#154964', - 950: '#082f44', + 50: "#f2f6fa", + 100: "#dce5ef", + 200: "#b8c9dc", + 300: "#94aac8", + 400: "#6e8db2", + 500: "#4e709c", + 600: "#3b5b85", + 700: "#2f486d", + 800: "#243755", + 900: "#18263e", + 950: "#0e1829", }; export const stormGrey = { - 50: '#f9fafb', - 100: '#f1f1f4', - 200: '#dcdfe4', - 300: '#b3b9c6', - 400: '#8a94a6', - 500: '#667085', - 600: '#565e73', - 700: '#434a60', - 800: '#313749', - 900: '#212636', - 950: '#121621', + 50: "#f9fafb", + 100: "#f1f1f4", + 200: "#dcdfe4", + 300: "#b3b9c6", + 400: "#8a94a6", + 500: "#667085", + 600: "#565e73", + 700: "#434a60", + 800: "#313749", + 900: "#212636", + 950: "#121621", }; export const tomatoOrange = { - 50: '#fff3ed', - 100: '#ffe2d4', - 200: '#ffc1a8', - 300: '#ffa280', - 400: '#ff9771', - 500: '#ff6c47', - 600: '#fe4011', - 700: '#ed3507', - 800: '#9f2c0f', - 900: '#7e1110', - 950: '#440608', + 50: "#fff3ed", + 100: "#ffe2d4", + 200: "#ffc1a8", + 300: "#ffa280", + 400: "#ff9771", + 500: "#ff6c47", + 600: "#fe4011", + 700: "#ed3507", + 800: "#9f2c0f", + 900: "#7e1110", + 950: "#440608", }; diff --git a/src/styles/theme/components/button.js b/src/styles/theme/components/button.js index 960b082..efbe9d3 100644 --- a/src/styles/theme/components/button.js +++ b/src/styles/theme/components/button.js @@ -38,7 +38,7 @@ export const MuiButton = { defaultProps: { disableRipple: true }, styleOverrides: { root: { - borderRadius: "12px", + borderRadius: "22px", minHeight: "var(--Button-minHeight)", minWidth: "unset", textTransform: "none",