Rewrite homepage to align with designs (#19)

* (WIP) Rewrite homepage to align with designs * Delete src/components/images/banners/homepage_text_outline.svg * py * Better alignment of copyright logo * add homepage banner svg * adjust page layout + a bit more mobile friendly * elevate opacity control to container & move text outline to page content start for mobile * pad text outline a bit & make text on homepage selectable * adjust homepage banner clip path * mobile padding + make outline move with padding * remove score carousel stack for now * align statistics properly * add shadows to statistics icons * adjust spacings a bit * align text to the right * align text to center for mobile * scale outline with width * Fix css errors in tsx components * Remove svg clip path * Disable text overlay on homepage * Add navbar outline on homepage * Fix navbar spacing on mobile * Remove unused png --------- Co-authored-by: infernalfire72 <[email protected]>
osuAkatsuki · Jul 23, 2024 · f114d2e · f114d2e
1 parent fabf8d0
commit f114d2e
Show file tree

Hide file tree

Showing 9 changed files with 489 additions and 85 deletions.
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -117,8 +117,10 @@ export default function Footer() {
               pb={4}
               spacing={{ xs: 2, sm: 0 }}
             >
-              <Stack direction="row">
-                <Copyright />
+              <Stack direction="row" alignItems="center">
+                <Box height={28} width={28}>
+                  <Copyright />
+                </Box>
                 <Typography variant="h6" fontWeight="lighter">
                   Akatsuki 2024
                 </Typography>

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -10,7 +10,7 @@ import {
   debounce,
   Box,
 } from "@mui/material"
-import { Link, useNavigate } from "react-router-dom"
+import { Link, useLocation, useNavigate } from "react-router-dom"
 import { FavoriteOutlined } from "@mui/icons-material"
 import {
   removeIdentityFromLocalStorage,
@@ -25,6 +25,11 @@ import {
 } from "../adapters/akatsuki-api/search"
 import { UserPrivileges } from "../privileges"
 
+const PAGES_WITH_VISIBLE_OUTLINE = ["/"]
+
+const shouldUseVisibleOutline = (pagePathName: string) =>
+  PAGES_WITH_VISIBLE_OUTLINE.includes(pagePathName)
+
 export default function Navbar() {
   const navigate = useNavigate()
   const { identity, setIdentity } = useIdentityContext()
@@ -36,6 +41,9 @@ export default function Navbar() {
   const [searchQueryValue, setSearchQueryValue] =
     useState<SingleUserSearchResult | null>(null)
 
+  const location = useLocation()
+  const useVisibleOutline = shouldUseVisibleOutline(location.pathname)
+
   const handleLogout = async () => {
     if (identity !== null) {
       console.warn("User attempted a logout without being logged in")
@@ -80,14 +88,19 @@ export default function Navbar() {
         left={0}
         // In line with https://mui.com/material-ui/customization/z-index/
         zIndex={900}
-        sx={{ bgcolor: "transparent" }}
+        sx={{
+          background: useVisibleOutline
+            ? "linear-gradient(0deg, rgba(17, 14, 27, 0.6) 0%, rgba(17, 14, 27, 0.528) 100%)"
+            : "transparent",
+        }}
       >
         <Container>
           <Stack
             direction={{ xs: "column", sm: "row" }}
             justifyContent="space-between"
             minHeight={5}
-            pt={1.25}
+            py={1.25}
+            spacing={{ xs: 1, sm: 0 }}
           >
             {/* Left Navbar */}
             <Stack

diff --git a/src/components/images/banners/homepage_banner.svg b/src/components/images/banners/homepage_banner.svg
diff --git a/src/components/images/icons/HomepagePPIcon.tsx b/src/components/images/icons/HomepagePPIcon.tsx
@@ -0,0 +1,62 @@
+export const HomepagePPIcon = () => {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 111 111"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g filter="url(#filter0_b_0_1)">
+        <path
+          d="M0 50C0 22.3858 22.3858 0 50 0H61C88.6142 0 111 22.3858 111 50V84C111 98.9117 98.9117 111 84 111H50C22.3858 111 0 88.6142 0 61V50Z"
+          fill="#2C97FB"
+          fillOpacity="0.7"
+        />
+      </g>
+      <path
+        d="M31 66.7843V46.6599M31 46.6599V46.0352C31 40.5146 35.4245 37.1373 40.8824 37.1373C46.3402 37.1373 50.7647 40.5146 50.7647 46.0352C50.7647 51.5558 46.3402 54.9331 40.8824 54.9331H40.2647C35.1479 54.9331 31 51.8355 31 46.6599ZM58.451 66.7843V46.6599M58.451 46.6599V46.0352C58.451 40.5146 62.6297 37.1373 67.7843 37.1373C72.939 37.1373 77.1176 40.5146 77.1176 46.0352C77.1176 51.5558 72.939 54.9331 67.7843 54.9331H67.201C62.3685 54.9331 58.451 51.8355 58.451 46.6599Z"
+        stroke="white"
+        strokeWidth="3.5"
+        strokeLinecap="round"
+      />
+      <path
+        d="M68 70H86"
+        stroke="white"
+        strokeWidth="3.5"
+        strokeLinecap="round"
+      />
+      <path
+        d="M77 61L77 79"
+        stroke="white"
+        strokeWidth="3.5"
+        strokeLinecap="round"
+      />
+      <defs>
+        <filter
+          id="filter0_b_0_1"
+          x="-2"
+          y="-2"
+          width="115"
+          height="115"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feGaussianBlur in="BackgroundImageFix" stdDeviation="1" />
+          <feComposite
+            in2="SourceAlpha"
+            operator="in"
+            result="effect1_backgroundBlur_0_1"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_backgroundBlur_0_1"
+            result="shape"
+          />
+        </filter>
+      </defs>
+    </svg>
+  )
+}
diff --git a/src/components/images/icons/HomepageScoresIcon.tsx b/src/components/images/icons/HomepageScoresIcon.tsx
@@ -0,0 +1,48 @@
+export const HomepageScoresIcon = () => {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 111 111"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g filter="url(#filter0_b_0_1)">
+        <path
+          d="M61 -2.18557e-06C88.6142 -9.78513e-07 111 22.3858 111 50L111 61C111 88.6142 88.6142 111 61 111L27 111C12.0883 111 -4.32357e-06 98.9117 -3.67176e-06 84L-2.18557e-06 50C-9.78513e-07 22.3858 22.3858 -3.87345e-06 50 -2.66639e-06L61 -2.18557e-06Z"
+          fill="#A200FF"
+          fillOpacity="0.7"
+        />
+      </g>
+      <path
+        d="M79.3622 42.3344C79.1881 41.7914 78.8567 41.3123 78.41 40.9579C77.9634 40.6035 77.4215 40.3898 76.8531 40.3438L68.7112 39.6547L65.535 32.25C65.3108 31.7309 64.9396 31.2888 64.4671 30.9782C63.9946 30.6675 63.4415 30.502 62.8761 30.502C62.3106 30.502 61.7576 30.6675 61.2851 30.9782C60.8126 31.2888 60.4414 31.7309 60.2172 32.25L57.0409 39.6569L48.8969 40.3438C48.3314 40.3892 47.792 40.6011 47.3467 40.9527C46.9015 41.3043 46.5704 41.7799 46.3951 42.3195C46.2199 42.859 46.2083 43.4384 46.362 43.9846C46.5156 44.5307 46.8276 45.0191 47.2584 45.3881L53.4184 50.6381L51.5744 58.4541C51.4447 59.0019 51.4793 59.5758 51.6738 60.1041C51.8683 60.6324 52.2142 61.0917 52.6681 61.4247C53.1274 61.762 53.676 61.9564 54.2452 61.9837C54.8144 62.0109 55.379 61.8697 55.8684 61.5778L62.8684 57.4216L69.8684 61.5778C70.3579 61.8697 70.9225 62.0109 71.4917 61.9837C72.0609 61.9564 72.6094 61.762 73.0687 61.4247C73.5229 61.0919 73.8689 60.6326 74.0634 60.1043C74.258 59.5759 74.2924 59.0019 74.1625 58.4541L72.3184 50.6381L78.4762 45.3881C78.9096 45.024 79.2252 44.5394 79.3829 43.9958C79.5406 43.4521 79.5334 42.8739 79.3622 42.3344ZM69.7678 48.2406C69.3647 48.5821 69.0643 49.0287 68.8997 49.5307C68.7352 50.0328 68.7131 50.5706 68.8359 51.0844L70.435 57.8656L64.3581 54.2541C63.9096 53.9867 63.3972 53.8455 62.875 53.8455C62.3528 53.8455 61.8404 53.9867 61.3919 54.2541L55.315 57.8438L56.9141 51.0625C57.0386 50.5489 57.0176 50.0108 56.8534 49.5085C56.6892 49.0062 56.3883 48.5596 55.9844 48.2188L50.6775 43.7081L57.6972 43.1131C58.2182 43.0694 58.7174 42.8847 59.1414 42.5787C59.5653 42.2727 59.8979 41.857 60.1034 41.3763L62.875 34.9275L65.64 41.3763C65.846 41.8567 66.1786 42.2721 66.6025 42.5781C67.0263 42.884 67.5254 43.069 68.0462 43.1131L75.0659 43.7081L69.7678 48.2406ZM45.7381 54.4881L33.4881 66.7381C33.1598 67.0665 32.7144 67.251 32.25 67.251C31.7856 67.251 31.3402 67.0665 31.0119 66.7381C30.6835 66.4098 30.499 65.9644 30.499 65.5C30.499 65.0356 30.6835 64.5903 31.0119 64.2619L43.2619 52.0119C43.5902 51.6835 44.0356 51.499 44.5 51.499C44.9644 51.499 45.4098 51.6835 45.7381 52.0119C46.0665 52.3403 46.251 52.7856 46.251 53.25C46.251 53.7144 46.0665 54.1598 45.7381 54.4881ZM49.2381 66.7381L36.9881 78.9881C36.8255 79.1507 36.6325 79.2797 36.4201 79.3677C36.2076 79.4557 35.9799 79.501 35.75 79.501C35.5201 79.501 35.2924 79.4557 35.0799 79.3677C34.8675 79.2797 34.6745 79.1507 34.5119 78.9881C34.3493 78.8255 34.2203 78.6325 34.1323 78.4201C34.0443 78.2076 33.999 77.9799 33.999 77.75C33.999 77.5201 34.0443 77.2924 34.1323 77.0799C34.2203 76.8675 34.3493 76.6745 34.5119 76.5119L46.7619 64.2619C47.0902 63.9335 47.5356 63.749 48 63.749C48.4644 63.749 48.9098 63.9335 49.2381 64.2619C49.5665 64.5903 49.751 65.0356 49.751 65.5C49.751 65.9644 49.5665 66.4098 49.2381 66.7381ZM64.9881 64.2619C65.1508 64.4244 65.2799 64.6174 65.368 64.8299C65.456 65.0423 65.5014 65.27 65.5014 65.5C65.5014 65.73 65.456 65.9577 65.368 66.1702C65.2799 66.3826 65.1508 66.5756 64.9881 66.7381L52.7381 78.9881C52.5755 79.1507 52.3825 79.2797 52.1701 79.3677C51.9576 79.4557 51.7299 79.501 51.5 79.501C51.2701 79.501 51.0424 79.4557 50.8299 79.3677C50.6175 79.2797 50.4245 79.1507 50.2619 78.9881C50.0993 78.8255 49.9703 78.6325 49.8823 78.4201C49.7943 78.2076 49.749 77.9799 49.749 77.75C49.749 77.5201 49.7943 77.2924 49.8823 77.0799C49.9703 76.8675 50.0993 76.6745 50.2619 76.5119L62.5119 64.2619C62.6744 64.0992 62.8674 63.9701 63.0799 63.882C63.2923 63.794 63.52 63.7486 63.75 63.7486C63.98 63.7486 64.2077 63.794 64.4201 63.882C64.6326 63.9701 64.8256 64.0992 64.9881 64.2619Z"
+        fill="white"
+      />
+      <defs>
+        <filter
+          id="filter0_b_0_1"
+          x="-2"
+          y="-2"
+          width="115"
+          height="115"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feGaussianBlur in="BackgroundImageFix" stdDeviation="1" />
+          <feComposite
+            in2="SourceAlpha"
+            operator="in"
+            result="effect1_backgroundBlur_0_1"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_backgroundBlur_0_1"
+            result="shape"
+          />
+        </filter>
+      </defs>
+    </svg>
+  )
+}
diff --git a/src/components/images/icons/HomepageUsersIcon.tsx b/src/components/images/icons/HomepageUsersIcon.tsx
@@ -0,0 +1,48 @@
+export const HomepageUsersIcon = () => {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 111 111"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g filter="url(#filter0_b_0_1)">
+        <path
+          d="M50 111C22.3858 111 -9.78513e-07 88.6142 -2.18557e-06 61L-2.66639e-06 50C-3.87345e-06 22.3858 22.3858 -9.78513e-07 50 -2.18557e-06L84 -3.67176e-06C98.9117 -4.32357e-06 111 12.0883 111 27L111 61C111 88.6142 88.6142 111 61 111L50 111Z"
+          fill="#EF43FE"
+          fillOpacity="0.7"
+        />
+      </g>
+      <path
+        d="M82.9999 56.75C82.9999 57.2141 82.8155 57.6593 82.4874 57.9875C82.1592 58.3156 81.7141 58.5 81.2499 58.5H77.7499V62C77.7499 62.4641 77.5655 62.9093 77.2374 63.2375C76.9092 63.5656 76.4641 63.75 75.9999 63.75C75.5358 63.75 75.0907 63.5656 74.7625 63.2375C74.4343 62.9093 74.2499 62.4641 74.2499 62V58.5H70.7499C70.2858 58.5 69.8407 58.3156 69.5125 57.9875C69.1843 57.6593 68.9999 57.2141 68.9999 56.75C68.9999 56.2859 69.1843 55.8408 69.5125 55.5126C69.8407 55.1844 70.2858 55 70.7499 55H74.2499V51.5C74.2499 51.0359 74.4343 50.5908 74.7625 50.2626C75.0907 49.9344 75.5358 49.75 75.9999 49.75C76.4641 49.75 76.9092 49.9344 77.2374 50.2626C77.5655 50.5908 77.7499 51.0359 77.7499 51.5V55H81.2499C81.7141 55 82.1592 55.1844 82.4874 55.5126C82.8155 55.8408 82.9999 56.2859 82.9999 56.75ZM70.3409 69.6235C70.6396 69.9791 70.7849 70.4389 70.7447 70.9016C70.7045 71.3643 70.4821 71.7922 70.1265 72.091C69.7708 72.3897 69.3111 72.535 68.8483 72.4948C68.3856 72.4546 67.9578 72.2322 67.659 71.8766C63.2577 66.6353 57.2071 63.75 50.6249 63.75C44.0427 63.75 37.9921 66.6353 33.5909 71.8766C33.2921 72.2319 32.8644 72.454 32.4018 72.494C31.9393 72.534 31.4798 72.3886 31.1245 72.0899C30.7691 71.7911 30.547 71.3634 30.507 70.9008C30.467 70.4383 30.6124 69.9788 30.9112 69.6235C34.1793 65.7341 38.2437 62.9713 42.7609 61.4925C40.0175 59.7839 37.9053 57.2282 36.7438 54.2122C35.5822 51.1963 35.4346 47.884 36.3232 44.7766C37.2117 41.6693 39.0882 38.9358 41.6686 36.9898C44.249 35.0439 47.393 33.9913 50.6249 33.9913C53.8568 33.9913 57.0009 35.0439 59.5813 36.9898C62.1617 38.9358 64.0381 41.6693 64.9267 44.7766C65.8153 47.884 65.6676 51.1963 64.5061 54.2122C63.3445 57.2282 61.2323 59.7839 58.489 61.4925C63.0062 62.9713 67.0705 65.7341 70.3409 69.6235ZM50.6249 60.25C52.8747 60.25 55.0739 59.5829 56.9445 58.333C58.8151 57.0831 60.2731 55.3066 61.1341 53.228C61.995 51.1495 62.2203 48.8624 61.7814 46.6559C61.3424 44.4493 60.2591 42.4225 58.6683 40.8317C57.0774 39.2409 55.0506 38.1575 52.8441 37.7186C50.6375 37.2797 48.3504 37.5049 46.2719 38.3659C44.1934 39.2268 42.4169 40.6848 41.167 42.5554C39.9171 44.426 39.2499 46.6253 39.2499 48.875C39.2534 51.8908 40.4529 54.782 42.5854 56.9145C44.7179 59.047 47.6091 60.2465 50.6249 60.25Z"
+        fill="white"
+      />
+      <defs>
+        <filter
+          id="filter0_b_0_1"
+          x="-2"
+          y="-2"
+          width="115"
+          height="115"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feGaussianBlur in="BackgroundImageFix" stdDeviation="1" />
+          <feComposite
+            in2="SourceAlpha"
+            operator="in"
+            result="effect1_backgroundBlur_0_1"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_backgroundBlur_0_1"
+            result="shape"
+          />
+        </filter>
+      </defs>
+    </svg>
+  )
+}