Begin on the new landing page

projects/website/package.json

@@ -20,6 +20,7 @@
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-scroll-area": "^1.1.0",
+    "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slider": "^1.2.1",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-toast": "^1.2.1",

projects/website/public/assets/logos/discord.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36">
+    <path fill="#fff"
+          d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/>
+</svg>

projects/website/src/app/(pages)/page.tsx

@@ -1,32 +1,20 @@
-import { Button } from "@/components/ui/button";
-import Link from "next/link";
-import { AppStatistics } from "@ssr/common/types/backend/app-statistics";
-import { kyFetch } from "@ssr/common/utils/utils";
-import { Config } from "@ssr/common/config";
-import { AppStats } from "@/components/app-statistics";
-
-export const dynamic = "force-dynamic"; // Always generate the page on load
+import HeroSection from "@/components/home/hero";
+import DataCollection from "@/components/home/data-collection";
+import Friends from "@/components/home/friends";
+import SiteStats from "@/components/home/site-stats";
+import RealtimeScores from "@/components/home/realtime-scores";
 
 export default async function HomePage() {
-  const statistics = await kyFetch<AppStatistics>(Config.apiUrl + "/statistics");
-
   return (
-    <main className="flex flex-col items-center w-full gap-6 text-center">
-      <div className="flex items-center flex-col">
-        <p className="font-semibold text-2xl">ScoreSaber Reloaded</p>
-        <p className="text-center">Welcome to the ScoreSaber Reloaded website.</p>
-      </div>
-
-      <div className="flex items-center flex-col">
-        <p>ScoreSaber Reloaded is a website that allows you to track your ScoreSaber data over time.</p>
-      </div>
-
-      {statistics && <AppStats initialStatistics={statistics} />}
-
-      <div className="flex gap-2 flex-wrap">
-        <Link href="/search">
-          <Button className="w-fit">Get started</Button>
-        </Link>
+    <main className="-mt-3 w-screen min-h-screen bg-[#0f0f0f]">
+      <div className="flex flex-col items-center">
+        <div className="max-w-screen-2xl mt-48 flex flex-col gap-56">
+          <HeroSection />
+          <DataCollection />
+          <Friends />
+          <SiteStats />
+          <RealtimeScores />
+        </div>
       </div>
     </main>
   );

projects/website/src/app/layout.tsx

@@ -79,9 +79,9 @@ export default function RootLayout({
               <ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>
                 <QueryProvider>
                   <ApiHealth />
-                  <main className="flex flex-col min-h-screen gap-2 text-white w-full">
+                  <main className="flex flex-col min-h-screen text-white w-full">
                     <NavBar />
-                    <div className="z-[1] m-auto flex flex-col flex-grow items-center w-full md:max-w-[1600px]">
+                    <div className="mt-3 z-[1] m-auto flex flex-col flex-grow items-center w-full md:max-w-[1600px]">
                       {children}
                     </div>
                     <Footer />

projects/website/src/components/app-statistics.tsx

@@ -6,6 +6,7 @@ import { useQuery } from "@tanstack/react-query";
 import { kyFetch } from "@ssr/common/utils/utils";
 import { Config } from "@ssr/common/config";
 import { useEffect, useState } from "react";
+import { User } from "lucide-react";
 
 type AppStatisticsProps = {
   /**
@@ -29,13 +30,24 @@ export function AppStats({ initialStatistics }: AppStatisticsProps) {
   }, [data]);
 
   return (
-    <div className="flex items-center flex-col">
-      <p className="font-semibold">Site Statistics</p>
-      <Statistic title="Tracked Players" value={statistics.trackedPlayers} />
-      <Statistic title="Tracked Scores" value={statistics.trackedScores} />
-      <Statistic title="Additional Scores Data" value={statistics.additionalScoresData} />
-      <Statistic title="Cached BeatSaver Maps" value={statistics.cachedBeatSaverMaps} />
-      <Statistic title="Cached ScoreSaber Leaderboards" value={statistics.cachedScoreSaberLeaderboards} />
+    <div className="grid grid-cols-2 gap-5 sm:grid-cols-3 sm:gap-7 md:grid-cols-4 md:gap-12 lg:grid-cols-5">
+      <Statistic icon={<User className="size-10" />} title="Tracked Players" value={statistics.trackedPlayers} />
+      <Statistic icon={<User className="size-10" />} title="Tracked Scores" value={statistics.trackedScores} />
+      <Statistic
+        icon={<User className="size-10" />}
+        title="Additional Scores Data"
+        value={statistics.additionalScoresData}
+      />
+      <Statistic
+        icon={<User className="size-10" />}
+        title="Cached BeatSaver Maps"
+        value={statistics.cachedBeatSaverMaps}
+      />
+      <Statistic
+        icon={<User className="size-10" />}
+        title="Cached ScoreSaber Leaderboards"
+        value={statistics.cachedScoreSaberLeaderboards}
+      />
     </div>
   );
 }

projects/website/src/components/home/data-collection.tsx

@@ -0,0 +1,26 @@
+import { Database } from "lucide-react";
+
+export default function DataCollection() {
+  return (
+    <div className="px-5 -mt-32 flex flex-col gap-10 select-none">
+      {/* Header */}
+      <div className="flex flex-col gap-2.5">
+        <div className="flex gap-3.5 items-center">
+          <Database className="size-7 text-pp" />
+          <h1 className="text-4xl font-bold text-ssr">Data Collection</h1>
+        </div>
+        <p className="opacity-85">posidonium novum ancillae ius conclusionemque splendide vel.</p>
+      </div>
+
+      {/* Content */}
+      <div className="max-w-[900px]">
+        <img
+          className="w-full h-full rounded-xl border border-ssr/20"
+          src="/assets/home/data-collection.png"
+          alt="Data Collection"
+          draggable={false}
+        />
+      </div>
+    </div>
+  );
+}

projects/website/src/components/home/friends.tsx

@@ -0,0 +1,26 @@
+import { Database } from "lucide-react";
+
+export default function Friends() {
+  return (
+    <div className="px-5 -mt-20 flex flex-col gap-10 items-end select-none">
+      {/* Header */}
+      <div className="flex flex-col gap-2.5 items-end">
+        <div className="flex gap-3.5 items-center">
+          <Database className="size-7 text-pp" />
+          <h1 className="text-4xl font-bold text-ssr">Friends</h1>
+        </div>
+        <p className="opacity-85">posidonium novum ancillae ius conclusionemque splendide vel.</p>
+      </div>
+
+      {/* Content */}
+      <div className="max-w-[900px]">
+        <img
+          className="w-full h-full rounded-xl border border-ssr/20"
+          src="/assets/home/friends.png"
+          alt="Friends"
+          draggable={false}
+        />
+      </div>
+    </div>
+  );
+}

projects/website/src/components/home/hero.tsx

@@ -0,0 +1,82 @@
+import AnimatedShinyText from "@/components/ui/animated-shiny-text";
+import { ArrowRight, UserSearch } from "lucide-react";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { SiGithub } from "react-icons/si";
+import { BorderBeam } from "@/components/ui/border-beam";
+import { Separator } from "@/components/ui/separator";
+
+export default function HeroSection() {
+  return (
+    <div className="flex flex-col gap-3.5 text-center items-center select-none">
+      <Alert />
+      <Title />
+      <Buttons />
+      <AppPreview />
+      <Separator className="my-14 w-screen" />
+    </div>
+  );
+}
+
+function Alert() {
+  return (
+    <Link
+      className="group mb-1.5 bg-neutral-900 hover:opacity-85 border border-white/5 rounded-full transition-all transform-gpu"
+      href="https://git.fascinated.cc/Fascinated/scoresaber-reloadedv3"
+      target="_blank"
+      draggable={false}
+    >
+      <AnimatedShinyText className="px-3.5 py-1 flex gap-2 items-center justify-center">
+        <SiGithub className="size-5" />
+        <span>Check out our Source Code</span>
+        <ArrowRight className="size-4 group-hover:translate-x-0.5 transition-all transform-gpu" />
+      </AnimatedShinyText>
+    </Link>
+  );
+}
+
+function Title() {
+  return (
+    <>
+      <h1 className="text-4xl sm:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-ssr to-pp/85">
+        ScoreSaber Reloaded
+      </h1>
+      <p className="max-w-sm md:max-w-xl md:text-lg opacity-85">
+        Scoresaber Reloaded is a new way to view your scores and get more stats about your and your plays
+      </p>
+    </>
+  );
+}
+
+function Buttons() {
+  return (
+    <div className="mt-4 flex gap-4">
+      <Link href="https://discord.gg/kmNfWGA4A8" target="_blank">
+        <Button className="max-w-52 flex gap-2.5 bg-pp hover:bg-pp/85 text-white text-base">
+          <UserSearch className="size-6" />
+          <span>Player Search</span>
+        </Button>
+      </Link>
+
+      <Link href="https://discord.gg/kmNfWGA4A8" target="_blank">
+        <Button className="max-w-52 flex gap-2.5 bg-[#5865F2] hover:bg-[#5865F2]/85 text-white text-base">
+          <img className="size-6" src="/assets/logos/discord.svg" />
+          <span>Join our Discord</span>
+        </Button>
+      </Link>
+    </div>
+  );
+}
+
+function AppPreview() {
+  return (
+    <div className="mx-5 my-24 relative max-w-[1280px] shadow-[0_3rem_20rem_-15px_rgba(15,15,15,0.6)] shadow-pp/50 rounded-xl overflow-hidden">
+      <BorderBeam colorFrom="#6773ff" colorTo="#4858ff" />
+      <img
+        className="w-full h-full border-4 border-pp/20 rounded-xl"
+        src="/assets/home/app-preview.png"
+        draggable={false}
+      />
+    </div>
+  );
+}

projects/website/src/components/home/realtime-scores.tsx

@@ -0,0 +1,26 @@
+import { Database } from "lucide-react";
+
+export default function RealtimeScores() {
+  return (
+    <div className="px-5 -mt-20 flex flex-col gap-10 items-end select-none">
+      {/* Header */}
+      <div className="flex flex-col gap-2.5 items-end">
+        <div className="flex gap-3.5 items-center">
+          <Database className="size-7 text-pp" />
+          <h1 className="text-4xl font-bold text-ssr">Realtime Scores</h1>
+        </div>
+        <p className="opacity-85">posidonium novum ancillae ius conclusionemque splendide vel.</p>
+      </div>
+
+      {/* Content */}
+      <div className="max-w-[900px]">
+        <img
+          className="w-full h-full rounded-xl border border-ssr/20"
+          src="/assets/home/realtime-scores.png"
+          alt="Realtime Scores"
+          draggable={false}
+        />
+      </div>
+    </div>
+  );
+}

projects/website/src/components/home/site-stats.tsx

@@ -0,0 +1,24 @@
+import { Database } from "lucide-react";
+import { kyFetch } from "@ssr/common/utils/utils";
+import { AppStatistics } from "@ssr/common/types/backend/app-statistics";
+import { Config } from "@ssr/common/config";
+import { AppStats } from "@/components/app-statistics";
+
+export default async function SiteStats() {
+  const statistics = await kyFetch<AppStatistics>(Config.apiUrl + "/statistics");
+  return (
+    <div className="px-5 -mt-20 flex flex-col gap-10 select-none">
+      {/* Header */}
+      <div className="flex flex-col gap-2.5">
+        <div className="flex gap-3.5 items-center">
+          <Database className="size-7 text-pp" />
+          <h1 className="text-4xl font-bold text-ssr">Site Statistics</h1>
+        </div>
+        <p className="opacity-85">posidonium novum ancillae ius conclusionemque splendide vel.</p>
+      </div>
+
+      {/* Content */}
+      {statistics && <AppStats initialStatistics={statistics} />}
+    </div>
+  );
+}

projects/website/src/components/home/statistic.tsx

@@ -1,16 +1,22 @@
 "use client";
 
 import CountUp from "react-countup";
+import { ReactElement } from "react";
 
 type Statistic = {
+  icon: ReactElement;
   title: string;
   value: number;
 };
 
-export default function Statistic({ title, value }: Statistic) {
+export default function Statistic({ icon, title, value }: Statistic) {
   return (
-    <p className="text-center">
-      {title}: <CountUp end={value} duration={1.2} />
-    </p>
+    <div className="flex flex-col gap-2 text-center items-center text-lg">
+      {icon}
+      <h1 className="font-semibold text-ssr">{title}</h1>
+      <span>
+        <CountUp end={value} duration={1.2} enableScrollSpy scrollSpyOnce />
+      </span>
+    </div>
   );
 }

projects/website/src/components/loaders/fullscreen-loader.tsx

@@ -10,7 +10,7 @@ export default function FullscreenLoader({ reason }: Props) {
     <div className="absolute w-screen h-screen bg-background brightness-[66%] flex flex-col gap-6 items-center justify-center">
       <div className="flex flex-col items-center justify-center">
         <p className="text-white text-xl font-bold">ScoreSaber Reloaded</p>
-        <p className="text-gray-300 text-md text-center">{reason}</p>
+        <div className="text-gray-300 text-md text-center">{reason}</div>
       </div>
       <div className="animate-spin">
         <ScoreSaberLogo />

projects/website/src/components/navbar/navbar.tsx

@@ -6,7 +6,6 @@ import NavbarButton from "./navbar-button";
 import ProfileButton from "./profile-button";
 import { TrendingUpIcon } from "lucide-react";
 import FriendsButton from "@/components/navbar/friends-button";
-import { PiSwordFill } from "react-icons/pi";
 
 type NavbarItem = {
   name: string;

projects/website/src/components/ui/animated-shiny-text.tsx

@@ -0,0 +1,35 @@
+import { CSSProperties, FC, ReactNode } from "react";
+import { cn } from "@/common/utils";
+
+interface AnimatedShinyTextProps {
+  children: ReactNode;
+  className?: string;
+  shimmerWidth?: number;
+}
+
+const AnimatedShinyText: FC<AnimatedShinyTextProps> = ({ children, className, shimmerWidth = 100 }) => {
+  return (
+    <p
+      style={
+        {
+          "--shiny-width": `${shimmerWidth}px`,
+        } as CSSProperties
+      }
+      className={cn(
+        "mx-auto max-w-md text-neutral-600/70 dark:text-neutral-400/70",
+
+        // Shine effect
+        "animate-shiny-text bg-clip-text bg-no-repeat [background-position:0_0] [background-size:var(--shiny-width)_100%] [transition:background-position_1s_cubic-bezier(.6,.6,0,1)_infinite]",
+
+        // Shine gradient
+        "bg-gradient-to-r from-transparent via-black/80 via-50% to-transparent  dark:via-white/80",
+
+        className
+      )}
+    >
+      {children}
+    </p>
+  );
+};
+
+export default AnimatedShinyText;

projects/website/src/components/ui/border-beam.tsx

@@ -0,0 +1,49 @@
+import { cn } from "@/common/utils";
+
+interface BorderBeamProps {
+  className?: string;
+  size?: number;
+  duration?: number;
+  borderWidth?: number;
+  anchor?: number;
+  colorFrom?: string;
+  colorTo?: string;
+  delay?: number;
+}
+
+export const BorderBeam = ({
+  className,
+  size = 200,
+  duration = 15,
+  anchor = 90,
+  borderWidth = 1.5,
+  colorFrom = "#ffaa40",
+  colorTo = "#9c40ff",
+  delay = 0,
+}: BorderBeamProps) => {
+  return (
+    <div
+      style={
+        {
+          "--size": size,
+          "--duration": duration,
+          "--anchor": anchor,
+          "--border-width": borderWidth,
+          "--color-from": colorFrom,
+          "--color-to": colorTo,
+          "--delay": `-${delay}s`,
+        } as React.CSSProperties
+      }
+      className={cn(
+        "pointer-events-none absolute inset-0 rounded-[inherit] [border:calc(var(--border-width)*1px)_solid_transparent]",
+
+        // mask styles
+        "![mask-clip:padding-box,border-box] ![mask-composite:intersect] [mask:linear-gradient(transparent,transparent),linear-gradient(white,white)]",
+
+        // pseudo styles
+        "after:absolute after:aspect-square after:w-[calc(var(--size)*1px)] after:animate-border-beam after:[animation-delay:var(--delay)] after:[background:linear-gradient(to_left,var(--color-from),var(--color-to),transparent)] after:[offset-anchor:calc(var(--anchor)*1%)_50%] after:[offset-path:rect(0_auto_auto_0_round_calc(var(--size)*1px))]",
+        className
+      )}
+    />
+  );
+};

projects/website/src/components/ui/separator.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { cn } from "@/common/utils";
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
+  <SeparatorPrimitive.Root
+    ref={ref}
+    decorative={decorative}
+    orientation={orientation}
+    className={cn("shrink-0 bg-border", orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", className)}
+    {...props}
+  />
+));
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };

projects/website/tailwind.config.ts

@@ -64,6 +64,25 @@ const config: Config = {
         md: "calc(var(--radius) - 2px)",
         sm: "calc(var(--radius) - 4px)",
       },
+      animation: {
+        "shiny-text": "shiny-text 8s infinite",
+        "border-beam": "border-beam calc(var(--duration)*1s) infinite linear",
+      },
+      keyframes: {
+        "shiny-text": {
+          "0%, 90%, 100%": {
+            "background-position": "calc(-100% - var(--shiny-width)) 0",
+          },
+          "30%, 60%": {
+            "background-position": "calc(100% + var(--shiny-width)) 0",
+          },
+        },
+        "border-beam": {
+          "100%": {
+            "offset-distance": "100%",
+          },
+        },
+      },
     },
   },
   plugins: [require("tailwindcss-animate")],