diff --git a/components/Community.tsx b/components/Community.tsx new file mode 100644 index 0000000..e413354 --- /dev/null +++ b/components/Community.tsx @@ -0,0 +1,86 @@ +import styled from "@emotion/styled"; +import { SvgIcon, alpha } from "@mui/material"; +import { StyledButton } from "../global/button"; +import { + GitHub, + Reddit, + Telegram, + Instagram, + Twitter, +} from "@mui/icons-material"; +import { DiscordLogo } from "./Icons"; + +const Card = styled.div` + border-radius: 14px; + max-width: 1250px; + max-height: 420px; + width: 100%; + margin: 0 auto; + padding: 4rem; + text-align: center; + color: ${({ theme }) => theme.palette.text.primary}; + background: ${({ theme }) => theme.palette.primary.light}; + border: 1.5px solid ${({ theme }) => alpha(theme.palette.text.primary, 0.2)}; + + @media (max-width: 1250px) { + flex-direction: column; + max-height: 60rem; + } +`; + +const CommunityButton = styled(StyledButton)` + border-radius: 8px; + background-color: transparent; + color: ${({ theme }) => theme.palette.text.primary}; + flex: auto; + padding: 16px; + margin: 0 8px; + width: 140px; + + &:hover { + background: ${({ theme }) => alpha(theme.palette.text.primary, 0.1)}; + } +`; + +const List = styled.div` + text-align: center; +`; + +const Download = () => { + return ( + <> + +

Join the Community!

+
+ + + + Github + + + + Discord + + + + Reddit + + + + Telegram + + + + Instagram + + + + Twitter + + + + + ); +}; + +export default Download; diff --git a/components/Download.tsx b/components/Download.tsx index b3b236f..4afd497 100644 --- a/components/Download.tsx +++ b/components/Download.tsx @@ -1,5 +1,5 @@ -import ErrorIcon from "@mui/icons-material/Error"; -import { Button, DialogTitle, Skeleton, DialogContent } from "@mui/material"; +import { ErrorRounded as ErrorIcon } from "@mui/icons-material"; +import { DialogTitle, Skeleton, DialogContent } from "@mui/material"; import Dialog from "@mui/material/Dialog"; import DialogActions from "@mui/material/DialogActions"; import Paper from "@mui/material/Paper"; @@ -8,13 +8,15 @@ import { useRouter } from "next/router"; import { useCallback, useState } from "react"; import styled from "@emotion/styled"; import { useGithubReleases } from "../utils/hooks/useGithubReleases"; +import { StyledButton } from "../global/button"; import { - GetApp, - TextSnippet as TextSnippetIcon, - VolunteerActivism as VolunteerActivismIcon, - Close as CloseIcon, + GetAppRounded as GetApp, + TextSnippetRounded as TextSnippetIcon, + VolunteerActivismRounded as VolunteerActivismIcon, + CloseRounded as CloseIcon, } from "@mui/icons-material"; import Link from "next/link"; +import { alpha } from "@mui/material"; const Card = styled.div` display: flex; @@ -25,8 +27,7 @@ const Card = styled.div` width: 100%; margin: 0 auto; background: ${({ theme }) => theme.palette.primary.light}; - box-shadow: 0px 1px 7px 1px rgb(0 0 0 / 14%), 0 3px 3px -2px rgb(0 0 0 / 20%), - 0 1px 8px 0 rgb(0 0 0 / 12%); + border: 1.5px solid ${({ theme }) => alpha(theme.palette.text.primary, 0.2)}; @media (max-width: 1250px) { flex-direction: column; @@ -39,7 +40,7 @@ const Latest = styled.div` flex-direction: column; flex: 1; justify-content: space-between; - gap: 2rem; + gap: 1.2rem; padding: 0 28px; @media (max-width: 980px) { @@ -47,19 +48,35 @@ const Latest = styled.div` } `; -const Older = styled.div` - background: ${({ theme }) => theme.palette.primary.contrastText}; - border-radius: 13px; - padding: 0 16px; +const OlderList = styled.div` flex: 1; overflow: auto; - box-shadow: 0px 1px 7px 1px rgb(0 0 0 / 14%), 0 3px 3px -2px rgb(0 0 0 / 20%), - 0 1px 8px 0 rgb(0 0 0 / 12%); + + @media (max-width: 1250px) { + flex-direction: column; + max-height: 60rem; + } + + max-height: 320px; + margin: 12px 0; + padding-right: 8px; + + ::-webkit-scrollbar-track { + margin: 10px 0; + border-radius: 8px; + } +`; + +const Older = styled.div` + background: ${({ theme }) => theme.palette.primary.light}; + border: 1.5px solid ${({ theme }) => alpha(theme.palette.text.primary, 0.2)}; + border-radius: 12px; + padding: 0 16px; + margin: 8px; `; const TextContainer = styled.div` position: relative; - padding-bottom: 35px; gap: 0.5rem; display: flex; flex-direction: column; @@ -67,29 +84,24 @@ const TextContainer = styled.div` const Header = styled.h1` margin: 17px 0 0; - color: ${({ theme }) => theme.palette.text.light}; + color: ${({ theme }) => theme.palette.text.primary}; `; const OlderHeader = styled.p` - margin: 17px 0 0; - text-align: center; - color: ${({ theme }) => theme.palette.text.light}; + margin: 16px 0 0; + text-align: left; + color: ${({ theme }) => theme.palette.text.primary}; font-size: 1.3rem; + font-weight: 500; `; const VersionInfo = styled.p` color: ${({ theme }) => theme.palette.text.primary}; + font-size: 1.2rem; + font-weight: 500; `; -const DownloadCountOlder = styled.p` - color: ${({ theme }) => theme.palette.text.secondary}; - - @media (max-width: 1250px) { - font-size: 0.9rem; - } -`; - -const Changelogs = styled.p` +const Changelogs = styled.text` color: ${({ theme }) => theme.palette.text.primary}; white-space: pre-line; @@ -101,65 +113,23 @@ const Changelogs = styled.p` `; const UpdateContainer = styled.div` - padding: 20px 0 0; + padding: 8px 0 0; `; const ChangelogContainer = styled.div` - position: absolute; + display: flex; + flex-direction: row; + justify-content: space-between; right: 0; - bottom: -15px; -`; - -const StyledButton = styled(Button)<{ - isSecondary?: boolean; - isOlderRelease?: boolean; - isDialogAction?: boolean; -}>` - padding: 8px 15px; - border-radius: 5px; - gap: 10px; - width: fit-content; - height: fit-content; - transition: 0.2s ease-in-out; - - ${({ isSecondary, theme }) => - isSecondary - ? ` - color: ${theme.palette.text.primary}; - - &:hover { - background: ${theme.palette.primary.contrastText}; - }` - : `color: ${theme.palette.text.extremelyLight}; - background: ${theme.palette.secondary.light}; - - &:hover { - background: ${theme.palette.secondary.main}; - }`}; - - ${({ isOlderRelease, theme }) => - isOlderRelease - ? ` - &:hover { - background: ${theme.palette.primary.light}; - }` - : null}; - - ${({ isDialogAction, theme }) => - isDialogAction - ? `margin-right: 1rem; - &:hover { - background: ${theme.palette.primary.light}; - }` - : null}; + bottom: 0; + padding-top: 16px; `; const OlderUpdate = styled.div` display: flex; align-items: center; - padding: 10px 0; - margin-bottom: 6px; - border-bottom: 1px solid ${({ theme }) => theme.palette.text.secondary}; + padding: 8px 0; + margin-bottom: 8px; &:last-child { margin-bottom: 0; @@ -174,11 +144,11 @@ const OlderUpdateTextWrapper = styled.div` flex-direction: column; `; -const OlderUpdateTitle = styled.p` - font-size: 1.15rem; +const DownloadTitle = styled.p` + font-size: 16px; margin: 0; padding: 0 2rem 0 0; - font-weight: 400; + font-weight: 500; color: ${({ theme }) => theme.palette.text.primary}; &:hover { @@ -190,6 +160,15 @@ const OlderUpdateTitle = styled.p` } `; +const DownloadSubtitle = styled.p` + color: ${({ theme }) => theme.palette.text.light}; + font-size: 15px; + + @media (max-width: 1250px) { + font-size: 0.9rem; + } +`; + const ButtonContainer = styled.div<{ isOlderRelease?: boolean }>` display: flex; flex-direction: row; @@ -211,15 +190,6 @@ const ButtonContainer = styled.div<{ isOlderRelease?: boolean }>` }`}; `; -const OlderUpdateDate = styled.p` - color: ${({ theme }) => theme.palette.text.secondary}; - font-size: 1rem; - - @media (max-width: 1250px) { - font-size: 0.9rem; - } -`; - const ErrorContainer = styled.div` display: flex; align-items: center; @@ -248,7 +218,7 @@ const StyledModal = styled(motion(Dialog))``; const StyledPaper = styled(motion(Paper))` border-radius: 8px; - background: ${({ theme }) => theme.palette.primary.contrastText}; + background: ${({ theme }) => theme.palette.primary.light}; padding: 10px 20px 20px 10px; max-width: 85%; `; @@ -292,10 +262,6 @@ const ModalParagraph = styled(DialogContent)` color: ${({ theme }) => theme.palette.text.primary}; `; -const DownloadCount = styled.p` - color: ${({ theme }) => theme.palette.text.secondary}; -`; - const Download = () => { const { releases, isError, isLoading } = useGithubReleases(); const [modalActive, setModalActive] = useState(false); @@ -348,7 +314,7 @@ const Download = () => { more about donating to dahliaOS! - + Close Router.replace("/donate")} autoFocus> @@ -377,24 +343,28 @@ const Download = () => {
Latest
- - {releases[0].name} ({getDate(releases[0].published_at)}) - - Downloads:{" "} - {releases[0].assets[0].download_count + - releases[0].assets[1].download_count} - - + {releases[0].name} {releases[0].body .substring(releases[0].body.indexOf("+ ")) - .replace(/(?:\r\n|\r|\n)/g, "\n")} + .replace(/(?:\r\n|\r|\n)/g, "\n") + .replace(/.*/, "") + .substring(1)} + + Version {releases[0].tag_name.split("-")[0]} •{" "} + {getDate(releases[0].published_at)} + + + {releases[0].assets[0].download_count + + releases[0].assets[1].download_count}{" "} + Downloads + - Full changelog + Changelog @@ -416,52 +386,49 @@ const Download = () => { - - Older releases - - {releases.map((oldRelease, i) => { - if (i === 0) return; - return ( - - - - - {oldRelease.name} - - - - Downloads:{" "} - {oldRelease.assets[0].name.includes("efi") - ? oldRelease.assets[0].download_count + - oldRelease.assets[1].download_count - : oldRelease.assets[0].download_count} - - - {getDate(oldRelease.published_at)} - - - - {oldRelease.assets.map(asset => ( - Previous releases + + + + {releases.map((oldRelease, i) => { + if (i === 0) return; + return ( + + + - - {asset.name.includes("efi") ? "EFI" : "Legacy"} - - ))} - - - ); - })} - - + {oldRelease.name} + + + {getDate(oldRelease.published_at)} ꞏ{" "} + {oldRelease.assets[0].name.includes("efi") + ? oldRelease.assets[0].download_count + + oldRelease.assets[1].download_count + : oldRelease.assets[0].download_count}{" "} + Downloads + + + + {oldRelease.assets.map(asset => ( + + + {asset.name.includes("efi") ? "EFI" : "Legacy"} + + ))} + + + ); + })} + + + @@ -559,29 +526,29 @@ const Download = () => { - Older releases + Previous releases - {[...Array(5)].map((oldRelease, i) => { + {[...Array(5)].map(i => { if (i === 0) return; return ( - + - - + + - + theme.palette.text.primary}; height: 2.5rem; width: 9rem; + border-radius: 8px; `; const StyledMenuItem = styled(MenuItem)` diff --git a/components/Intro.tsx b/components/Intro.tsx index fb6f6e8..026887a 100644 --- a/components/Intro.tsx +++ b/components/Intro.tsx @@ -3,12 +3,16 @@ import Image from "next/image"; import styled from "@emotion/styled"; import { keyframes } from "@emotion/react"; import { useTheme } from "@emotion/react"; -import { Button, useMediaQuery } from "@mui/material"; -import { GetApp, LibraryBooks as LibraryBooksIcon } from "@mui/icons-material"; +import { useMediaQuery } from "@mui/material"; +import { + GetAppRounded as GetApp, + LibraryBooksRounded as LibraryBooksIcon, +} from "@mui/icons-material"; import darkLogotype from "../public/images/logos/darkLogotype.webp"; import LaptopMockup from "../public/images/animation/macbook.webp"; import darkMockup from "../public/images/mockups/darkmockup.webp"; import lightMockup from "../public/images/mockups/lightmockup.webp"; +import { StyledButton } from "../global/button"; const mockupKeyframes = keyframes` 0% { @@ -137,10 +141,7 @@ const Container = styled.div` justify-content: center; min-height: 100vh; max-width: 100vw; - background: ${({ theme }) => - theme.palette.mode === "dark" - ? 'url("/images/background/darkBackground.svg")' - : 'url("/images/background/lightBackground.svg")'}; + background: url("/images/background/background.svg"); background-repeat: no-repeat; background-position: center; background-size: cover; @@ -189,30 +190,6 @@ const Paragraph = styled.p` } `; -const StyledButton = styled(Button)<{ isSecondary?: boolean }>` - padding: 10px 20px; - border-radius: 5px; - gap: 10px; - width: fit-content; - height: fit-content; - transition: 0.2s ease-in-out; - - ${({ isSecondary, theme }) => - isSecondary - ? ` - color: ${theme.palette.text.primary}; - - &:hover { - background: ${theme.palette.primary.light}; - }` - : `color: ${theme.palette.text.extremelyLight}; - background: ${theme.palette.secondary.light}; - - &:hover { - background: ${theme.palette.secondary.main}; - }`}; -`; - const Wrapper = styled.div` position: relative; max-width: 100vw; diff --git a/components/Navbar.tsx b/components/Navbar.tsx index a6d4d7e..43e47f3 100644 --- a/components/Navbar.tsx +++ b/components/Navbar.tsx @@ -1,33 +1,14 @@ import "@reach/skip-nav/styles.css"; +import { AppBar, Toolbar, useMediaQuery } from "@mui/material"; import { - AppBar, - Divider, - Drawer, - IconButton, - SvgIcon, - Toolbar, - useMediaQuery, -} from "@mui/material"; -import { - Article as ArticleIcon, - Facebook as FacebookIcon, - GetApp, - GitHub as GitHubIcon, - Groups as GroupIcon, - Instagram as InstagramIcon, - Menu as MenuIcon, - Reddit as RedditIcon, + ArticleRounded as ArticleIcon, + GetAppRounded as GetApp, Science as ScienceIcon, - Telegram as TelegramIcon, - Twitter as TwitterIcon, - VolunteerActivism as VolunteerActivismIcon, + VolunteerActivismRounded as VolunteerActivismIcon, } from "@mui/icons-material"; import { SkipNavContent, SkipNavLink } from "@reach/skip-nav"; import { css, keyframes } from "@emotion/react"; -import { useCallback, useState } from "react"; - -import { DiscordLogo } from "./Icons"; import Image from "next/image"; import Link from "next/link"; import darkLogotype from "../public/images/logos/darkLogotype.webp"; @@ -50,51 +31,6 @@ const WrapperKeyframes = keyframes` const Wrapper = styled.div``; -const Container = styled.div` - background: ${({ theme }) => theme.palette.primary.light}; - width: 15rem; - height: 999%; - font-family: "Inter", sans-serif; -`; - -const DrawerLogoContainer = styled.div` - position: relative; - padding-top: 160px; - background: ${({ theme }) => theme.palette.primary.main}; -`; - -const DrawerLogo = styled(Image)` - position: absolute; - bottom: 16px; - padding-left: 20px; - height: auto; - width: 200px; - object-fit: contain; -`; -const StyledLink = styled(Link)` - display: flex; - align-items: center; - justify-content: flex-start; - gap: 10px; - font-size: 0.93em; - padding: 18px 20px; - color: ${({ theme }) => theme.palette.text.primary}; - transition: color ease-in-out 0.2s; - text-decoration: none; - - &:hover { - color: ${({ theme }) => theme.palette.text.light}; - } -`; - -const Category = styled.span` - display: block; - font-size: 0.93em; - padding: 16px 20px; - font-weight: 500; - color: ${({ theme }) => theme.palette.text.light}; -`; - const AppBarLink = styled(Link)` display: flex; justify-content: flex-end; @@ -118,7 +54,7 @@ const StyledAppBar = styled(AppBar)<{ }>` ${({ meetsScrollPos, theme }) => ` backdrop-filter: ${meetsScrollPos ? "blur(20px)" : "unset"}; - background: ${meetsScrollPos ? theme.palette.primary.light + 90 : "unset"}; + background: ${meetsScrollPos ? theme.palette.primary.light + 99 : "unset"}; `} transition: background ease-in-out 0.15s; @@ -136,10 +72,6 @@ const StyledAppBar = styled(AppBar)<{ `} `; -const StyledToolbar = styled(Toolbar)<{ meetsScrollPos: boolean }>` - box-shadow: ${({ meetsScrollPos }) => (meetsScrollPos ? "initial" : "unset")}; -`; - const AppBarLogoLinkContainer = styled(Link)` margin-left: 1rem; @media (max-width: 1025px) { @@ -149,8 +81,9 @@ const AppBarLogoLinkContainer = styled(Link)` `; const AppBarLogo = styled(Image)` + display: block; height: auto; - width: 150px; + width: 160px; object-fit: contain; `; @@ -165,21 +98,14 @@ const DesktopNav = styled.div` } `; -const StyledDrawer = styled(Drawer)``; - const Navbar = ({ rootPageHasAnimation, }: { rootPageHasAnimation?: boolean; }) => { - const [drawerState, setDrawerState] = useState(false); const windowIsSmall = useMediaQuery("(max-width: 1075px)"); const theme = useTheme(); const meetsScrollPos = useMeetsScrollPos(10); - const toggleDrawer = useCallback( - (open: boolean = false) => setDrawerState(open ?? !drawerState), - [drawerState], - ); return ( @@ -194,77 +120,6 @@ const Navbar = ({ zIndex: 9999999, }} /> - toggleDrawer(false)} - > - - - - - - - Download - - - - Donate - - - - Demo - - - - Documentation - - - Find us on - - - Discord - - - - GitHub - - - - Reddit - - - - Telegram - - - - Facebook - - - - Instagram - - - - Twitter - - - Team - - - Developers - - - - - toggleDrawer(true)} - > - - + Documentation - + diff --git a/global/button.tsx b/global/button.tsx new file mode 100644 index 0000000..1f01757 --- /dev/null +++ b/global/button.tsx @@ -0,0 +1,51 @@ +import { styled, Button, alpha } from "@mui/material"; + +export const StyledButton = styled(Button)<{ + isSecondary?: boolean; + isOlderRelease?: boolean; + isDownloadTag?: boolean; +}>` + padding: 10px 18px 10px 16px; + border-radius: 24px; + gap: 8px; + width: fit-content; + height: fit-content; + transition: 0.2s ease-in-out; + + ${({ isSecondary, theme }) => + isSecondary + ? ` + color: ${theme.palette.text.primary}; + + &:hover { + background: ${alpha(theme.palette.text.primary, 0.1)}; + }` + : `color: ${theme.palette.text.extremelyLight}; + background: ${theme.palette.secondary.light}; + + &:hover { + background: ${theme.palette.secondary.main}; + }`}; + + ${({ isOlderRelease, theme }) => + isOlderRelease + ? ` + &:hover { + background: ${theme.palette.primary.light}; + }` + : null}; + + ${({ isDownloadTag, theme }) => + isDownloadTag + ? ` + background: transparent; + border: 1.5px solid ${alpha(theme.palette.text.primary, 0.2)}; + border-radius: 24px; + color: ${theme.palette.text.secondary}; + font-weight: 500; + &:disabled { + background: transparent; + color: ${theme.palette.text.primary}; + }` + : null}; +`; diff --git a/next.config.js b/next.config.js index 59b7bb7..cd6ad38 100644 --- a/next.config.js +++ b/next.config.js @@ -6,11 +6,6 @@ const nextConfig = { compiler: { emotion: true, }, - experimental: { - fontLoaders: [ - { loader: "@next/font/google", options: { subsets: ["latin"] } }, - ], - }, async redirects() { return [ { diff --git a/package.json b/package.json index 732c486..93e3497 100644 --- a/package.json +++ b/package.json @@ -12,32 +12,33 @@ "prettier": "prettier --write ." }, "dependencies": { - "@emotion/react": "^11.10.5", - "@emotion/server": "^11.10.0", - "@emotion/styled": "^11.10.5", - "@mui/icons-material": "^5.10.15", - "@mui/material": "^5.10.15", - "@mui/styles": "^5.10.15", - "@next/font": "^13.0.5", + "@emotion/react": "^11.11.1", + "@emotion/server": "^11.11.0", + "@emotion/styled": "^11.11.0", + "@mui/icons-material": "^5.14.3", + "@mui/material": "^5.14.3", + "@mui/styles": "^5.14.3", + "@next/font": "^13.4.12", "@reach/skip-nav": "^0.18.0", "@vercel/og": "^0.0.21", - "framer-motion": "^7.6.12", - "next": "13.0.5", + "framer-motion": "^7.10.3", + "next": "13.4.12", "react": "18.2.0", "react-dom": "18.2.0", "swr": "^1.3.0" }, "devDependencies": { "@types/node": "18.11.9", - "@types/react": "18.0.25", - "@typescript-eslint/eslint-plugin": "^5.44.0", - "@typescript-eslint/parser": "^5.44.0", - "eslint": "^8.28.0", - "eslint-config-next": "13.0.5", - "eslint-config-prettier": "^8.5.0", + "@types/react": "18.2.18", + "@types/react-dom": "^18.2.7", + "@typescript-eslint/eslint-plugin": "^5.62.0", + "@typescript-eslint/parser": "^5.62.0", + "eslint": "^8.46.0", + "eslint-config-next": "13.4.12", + "eslint-config-prettier": "^8.10.0", "eslint-plugin-prettier": "^4.2.1", - "eslint-plugin-react": "^7.31.11", - "prettier": "^2.8.0", + "eslint-plugin-react": "^7.33.1", + "prettier": "^2.8.8", "typescript": "4.9.3" } } diff --git a/pages/404.tsx b/pages/404.tsx index a8a52fb..299ce40 100644 --- a/pages/404.tsx +++ b/pages/404.tsx @@ -1,9 +1,9 @@ -import { Button } from "@mui/material"; import styled from "@emotion/styled"; import Footer from "../components/Footer"; import Navbar from "../components/Navbar"; -import { Home as HomeIcon } from "@mui/icons-material"; +import { HomeRounded as HomeIcon } from "@mui/icons-material"; import Head from "next/head"; +import { StyledButton } from "../global/button"; const Wrapper = styled.div` display: flex; @@ -12,14 +12,10 @@ const Wrapper = styled.div` flex-direction: column; min-height: 100vh; padding: 5rem; - background: ${({ theme }) => - theme.palette.mode === "dark" - ? "url('/images/background/darkBackground.svg')" - : "url('/images/background/lightBackground.svg')"}; + background: url("/images/background/background.svg"); background-repeat: no-repeat; background-position: center; background-size: cover; - background-attachment: fixed; @media (max-width: 1250px) { padding: 8rem 3rem; @@ -69,21 +65,6 @@ const Paragraph = styled.p` } `; -const StyledButton = styled(Button)` - padding: 10px 20px; - border-radius: 5px; - gap: 10px; - width: fit-content; - height: fit-content; - transition: 0.2s ease-in-out; - color: ${({ theme }) => theme.palette.text.extremelyLight}; - background: ${({ theme }) => theme.palette.secondary.light}; - - &:hover { - background: ${({ theme }) => theme.palette.secondary.main}; - } -`; - const Error404 = () => { return ( <> diff --git a/pages/_app.tsx b/pages/_app.tsx index ef54d65..0d9ee3d 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -8,9 +8,10 @@ import { ThemeProvider as MUIThemeProvider } from "@mui/material"; import { SWRConfig } from "swr"; import { usePreferredTheme } from "../utils/hooks/usePreferredTheme"; import { Inter } from "@next/font/google"; -import Head from "next/head"; -const inter = Inter(); +const inter = Inter({ + subsets: ["latin"], +}); const GlobalStyles = (theme: Theme) => css` *, @@ -51,14 +52,14 @@ const GlobalStyles = (theme: Theme) => css` } ::-webkit-scrollbar-track { - box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: ${theme.palette.primary.dark}; + border-radius: 8px; } ::-webkit-scrollbar-thumb { - background: gray; + background: ${theme.palette.text.light}; border-radius: 8px; - outline: 1px solid ${theme.palette.primary.dark}; + outline: 2px solid ${theme.palette.text.light}; } `; @@ -79,9 +80,7 @@ $$ $$ |$$ $$ |$$ | $$ |$$ |$$ |$$ $$ |$$ $$/ $$ $$/ return ( <> - - - + - theme.palette.mode === "dark" - ? "url('/images/background/darkBackground.svg')" - : "url('/images/background/lightBackground.svg')"}; + background: url("/images/background/background.svg"); background-repeat: no-repeat; background-position: center; background-size: cover; - background-attachment: fixed; @media (max-width: 1250px) { padding: 8rem 3rem; @@ -77,39 +74,27 @@ const Paragraph = styled.p<{ centerText?: boolean }>` } `; -const StyledButton = styled(Button)` - padding: 10px 20px; - border-radius: 5px; - gap: 10px; - width: fit-content; - height: fit-content; - transition: 0.2s ease-in-out; - color: ${({ theme }) => theme.palette.text.extremelyLight}; - background: ${({ theme }) => theme.palette.secondary.light}; - - &:hover { - background: ${({ theme }) => theme.palette.secondary.main}; - } -`; - const SupportItem = styled.div` display: flex; align-items: center; - justify-content: center; + justify-content: left; border-radius: 13px; - padding: 10px 15px; + padding: 0 24px; height: 45px; min-width: 120px; - text-align: center; - gap: 10px; + width: 390px; + height: 6rem; + text-align: left; + gap: 24px; color: ${({ theme }) => theme.palette.text.light}; background-color: ${({ theme }) => theme.palette.primary.light}; + border: 1.5px solid ${({ theme }) => alpha(theme.palette.text.primary, 0.2)}; `; const ItemParagraph = styled.p` color: ${({ theme }) => theme.palette.text.light}; - font-size: 0.9rem; - font-weight: 400; + font-size: 1rem; + font-weight: 500; `; const ItemsContainer = styled.div` diff --git a/pages/download.tsx b/pages/download.tsx index 6674f81..c88bcec 100644 --- a/pages/download.tsx +++ b/pages/download.tsx @@ -4,7 +4,7 @@ import Navbar from "../components/Navbar"; import DownloadComponent from "../components/Download"; import Head from "next/head"; import { useGithubReleases } from "../utils/hooks/useGithubReleases"; -import { Download as DownloadIcon } from "@mui/icons-material"; +import { DownloadRounded as DownloadIcon } from "@mui/icons-material"; const Wrapper = styled.div` display: flex; @@ -13,14 +13,10 @@ const Wrapper = styled.div` flex-direction: column; min-height: 100vh; padding: 5rem; - background: ${({ theme }) => - theme.palette.mode === "dark" - ? "url('/images/background/darkBackground.svg')" - : "url('/images/background/lightBackground.svg')"}; + background: url("/images/background/background.svg"); background-repeat: no-repeat; background-position: center; background-size: cover; - background-attachment: fixed; @media (max-width: 1250px) { padding: 8rem 3rem; diff --git a/pages/index.tsx b/pages/index.tsx index d3a333c..d024c62 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -5,19 +5,20 @@ import type { NextPage } from "next"; import Intro from "../components/Intro"; import Navbar from "../components/Navbar"; import Footer from "../components/Footer"; -import { Button, useTheme } from "@mui/material"; +import { useTheme } from "@mui/material"; import DownloadComponent from "../components/Download"; +import CommunityComponent from "../components/Community"; import { - Devices as DevicesIcon, + DevicesRounded as DevicesIcon, GitHub as GitHubIcon, - CorporateFare as CorporateFareIcon, - Science as ScienceIcon, - DesktopMac, - Autorenew, - ViewInAr, - ViewCompact, - Apps, - ScreenshotMonitor, + CorporateFareRounded as CorporateFareIcon, + ScienceRounded as ScienceIcon, + DesktopMacRounded as DesktopMac, + AutorenewRounded as Autorenew, + ViewInArRounded as ViewInAr, + ViewCompactRounded as ViewCompact, + AppsRounded as Apps, + ScreenshotMonitorRounded as ScreenshotMonitor, } from "@mui/icons-material"; import { motion, Variants } from "framer-motion"; import Image from "next/image"; @@ -40,6 +41,7 @@ import lightPangolin from "../public/images/landing/lightPangolin.webp"; import darkSupportedDevices from "../public/images/landing/darkSupportedDevices.webp"; import lightSupportedDevices from "../public/images/landing/lightSupportedDevices.webp"; import Link from "next/link"; +import { StyledButton } from "../global/button"; const Wrapper = styled.div``; @@ -134,30 +136,6 @@ const Paragraph = styled.p<{ isCentered?: boolean }>` } `; -const SectionBtn = styled(Button)<{ isSecondary?: boolean }>` - padding: 10px 20px; - border-radius: 5px; - gap: 10px; - width: fit-content; - height: fit-content; - transition: 0.2s ease-in-out; - - ${({ isSecondary, theme }) => - isSecondary - ? ` - color: ${theme.palette.text.primary}; - - &:hover { - background: ${theme.palette.primary.light}; - }` - : `color: ${theme.palette.text.extremelyLight}; - background: ${theme.palette.secondary.light}; - - &:hover { - background: ${theme.palette.secondary.main}; - }`}; -`; - const SectionDivContainer = styled.div<{ showOnRight?: boolean }>` position: relative; background: ${({ theme }) => theme.palette.primary.light}; @@ -765,10 +743,10 @@ const Home: NextPage = () => { href="https://docs.dahliaos.io/hardware/supported-hardware" target="_blank" > - + SUPPORTED HARDWARE - + @@ -801,19 +779,19 @@ const Home: NextPage = () => { - + GITHUB - + - + OPEN INVENTION NETWORK - + @@ -860,10 +838,10 @@ const Home: NextPage = () => { functional on the actual system itself. - + Try it out - + @@ -885,6 +863,8 @@ const Home: NextPage = () => { + {/* Community */} +