add: Hero section

apps/nextjs/package.json

@@ -23,6 +23,7 @@
     "@ubus/api": "workspace:*",
     "@ubus/auth": "workspace:*",
     "@ubus/db": "workspace:*",
+    "@ubus/hooks": "workspace:*",
     "@ubus/ui": "workspace:*",
     "@ubus/validators": "workspace:*",
     "geist": "^1.3.1",

apps/nextjs/src/app/(landing)/layout.tsx

@@ -1,12 +1,14 @@
 import React from "react";
 
+import { Footer } from "../_components/footer";
 import { Navbar } from "../_components/navbar";
 
 const LandingPageLayout = (props: { children: React.ReactNode }) => {
   return (
     <>
       <Navbar />
-      <main className="container">{props.children}</main>
+      <main>{props.children}</main>
+      <Footer />
     </>
   );
 };

apps/nextjs/src/app/(landing)/page.tsx

@@ -1,3 +1,9 @@
+import { Hero } from "../_components/hero";
+
 export default function HomePage() {
-  return <div>Hello, World!</div>;
+  return (
+    <>
+      <Hero />
+    </>
+  );
 }

apps/nextjs/src/app/_components/footer.tsx

@@ -0,0 +1,3 @@
+export const Footer = () => {
+  return <div>Footer</div>;
+};

apps/nextjs/src/app/_components/hero.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+
+import { cn } from "@ubus/ui";
+import { Button } from "@ubus/ui/button";
+import { MouseIcon, RightArrowIcon } from "@ubus/ui/icons";
+
+export const Hero = ({ className }: { className?: string }) => {
+  return (
+    <section
+      className={cn(
+        "container grid min-h-[calc(100dvh-6rem)] px-12 lg:h-full",
+        className,
+      )}
+    >
+      <div className="relative flex flex-col items-center justify-between lg:flex-row">
+        <div className="flex h-full max-w-[660px] flex-col justify-center gap-8 md:h-fit md:justify-start md:gap-6 lg:h-full lg:justify-center lg:gap-8">
+          <h1 className="max-w-[180px] text-display-small font-bold sm:text-display-medium md:max-w-full md:text-display-large lg:max-w-fit">
+            Track. Notify. Simplify.
+          </h1>
+          <h3 className="text-body-large lg:text-headline-small xl:text-headline-medium">
+            Welcome to the IUBAT Bus Tracking System. Access live bus locations,
+            schedules, and important updates all in one place.
+          </h3>
+          <Link href={"/Dashboard"}>
+            <Button variant={"withIcon"}>
+              Track now
+              <RightArrowIcon className="h-5 w-5" />
+            </Button>
+          </Link>
+        </div>
+        <div className="absolute right-0 top-[20%] sm:top-[22%] md:static">
+          <Image
+            className="w-48 sm:w-52 md:h-full md:w-full lg:min-w-[509px]"
+            src={"hero-map.svg"}
+            height={377}
+            width={509}
+            alt="map image"
+          />
+        </div>
+      </div>
+      <div className="grid place-items-center">
+        <div className="flex animate-bounce items-center justify-center gap-5">
+          <MouseIcon className={"fill-on-surface"} />
+          <span className="text-headline-small">Scroll Down</span>
+        </div>
+      </div>
+    </section>
+  );
+};

apps/nextjs/src/app/_components/navbar.tsx

@@ -4,8 +4,8 @@ import React from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { useTheme } from "next-themes";
 
+import useThemeBasedValue from "@ubus/hooks/useThemeBasedValue";
 import { cn } from "@ubus/ui";
 import { Button } from "@ubus/ui/button";
 import { MenuIcon } from "@ubus/ui/icons";
@@ -30,16 +30,7 @@ const links: ILink[] = [
 ];
 
 export const Navbar = () => {
-  const { theme, resolvedTheme } = useTheme();
-  const [logoSrc, setLogoSrc] = React.useState("ubus.svg");
-
-  React.useEffect(() => {
-    if (theme === "dark" || resolvedTheme === "dark") {
-      setLogoSrc("ubus.svg");
-    } else {
-      setLogoSrc("ubus-dark.svg");
-    }
-  }, [theme, resolvedTheme]);
+  const logoSrc = useThemeBasedValue("ubus.svg", "ubus-dark.svg");
 
   return (
     <nav className="border-outline">

apps/nextjs/src/app/_components/tailwind-indicator.tsx

@@ -0,0 +1,16 @@
+import { env } from "~/env";
+
+export function TailwindIndicator() {
+  if (env.NODE_ENV === "production") return null;
+
+  return (
+    <div className="fixed bottom-1 left-1 z-50 flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white">
+      <div className="block sm:hidden">xs</div>
+      <div className="hidden sm:block md:hidden">sm</div>
+      <div className="hidden md:block lg:hidden">md</div>
+      <div className="hidden lg:block xl:hidden">lg</div>
+      <div className="hidden xl:block 2xl:hidden">xl</div>
+      <div className="hidden 2xl:block">2xl</div>
+    </div>
+  );
+}

apps/nextjs/src/app/layout.tsx

@@ -11,6 +11,7 @@ import { TRPCReactProvider } from "~/trpc/react";
 import "~/app/globals.css";
 
 import { env } from "~/env";
+import { TailwindIndicator } from "./_components/tailwind-indicator";
 
 export const poppins = Poppins({
   weight: ["300", "400", "500", "600", "700"],
@@ -56,16 +57,15 @@ export default function RootLayout(props: { children: React.ReactNode }) {
           GeistMono.variable,
         )}
       >
-        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+        <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
           <TRPCReactProvider>
-            <div className="container h-dvh !max-w-screen-xl">
-              {props.children}
-            </div>
+            <div className="container min-h-dvh">{props.children}</div>
           </TRPCReactProvider>
           <div className="absolute bottom-4 right-4">
             <ThemeToggle />
           </div>
           <Toaster />
+          <TailwindIndicator />
         </ThemeProvider>
       </body>
     </html>

packages/hooks/package.json

@@ -0,0 +1,3 @@
+{
+  "name": "@ubus/hooks"
+}

packages/hooks/useThemeBasedValue.ts

@@ -0,0 +1,19 @@
+import { useEffect, useState } from "react";
+import { useTheme } from "next-themes";
+
+const useThemeBasedValue = <T>(lightValue: T, darkValue: T): T => {
+  const { theme, resolvedTheme } = useTheme();
+  const [value, setValue] = useState(lightValue);
+
+  useEffect(() => {
+    if (theme === "dark" || resolvedTheme === "dark") {
+      setValue(darkValue);
+    } else {
+      setValue(lightValue);
+    }
+  }, [theme, resolvedTheme, lightValue, darkValue]);
+
+  return value;
+};
+
+export default useThemeBasedValue;

packages/ui/src/button.tsx

@@ -11,7 +11,7 @@ const buttonVariants = cva(
     variants: {
       variant: {
         primary:
-          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+          "bg-primary-container text-on-primary-container shadow hover:bg-primary-container/90 dark:bg-primary dark:text-primary-foreground dark:hover:bg-primary/90",
         destructive:
           "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
         outline:
@@ -20,6 +20,8 @@ const buttonVariants = cva(
           "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground !px-3",
         link: "text-primary underline-offset-4 hover:underline",
+        withIcon:
+          "gap-2 bg-primary-container p-0 !pr-[22px] pl-6 text-on-primary-container shadow *:fill-on-primary-container hover:bg-primary-container/90 dark:bg-primary dark:text-primary-foreground dark:*:fill-on-primary dark:hover:bg-primary/90",
       },
       size: {
         sm: "h-8 px-3 text-xs",

packages/ui/src/icons.tsx

@@ -6,7 +6,7 @@ const MenuIcon = ({
   className,
   ...props
 }: {
-  className?: React.HtmlHTMLAttributes<"svg">;
+  className?: string;
   props?: React.HtmlHTMLAttributes<"svg">;
 }) => (
   <svg
@@ -26,5 +26,49 @@ const MenuIcon = ({
     />
   </svg>
 );
+const MouseIcon = ({
+  className,
+  ...props
+}: {
+  className?: string;
+  props?: React.HtmlHTMLAttributes<"svg">;
+}) => (
+  <svg
+    className={cn("h-[38px] w-[28px]", className)}
+    width="28"
+    height="39"
+    viewBox="0 0 28 39"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M14 4.40437C8.20101 4.40437 3.5 9.04433 3.5 14.768V25.1316C3.5 30.8553 8.20101 35.4953 14 35.4953C19.799 35.4953 24.5 30.8553 24.5 25.1316V14.768C24.5 9.04433 19.799 4.40437 14 4.40437ZM0 14.768C0 7.13644 6.26801 0.949829 14 0.949829C21.732 0.949829 28 7.13644 28 14.768V25.1316C28 32.7632 21.732 38.9498 14 38.9498C6.26801 38.9498 0 32.7632 0 25.1316V14.768Z"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M14 7.85893C14.9665 7.85893 15.75 8.63226 15.75 9.58621V16.4953C15.75 17.4492 14.9665 18.2226 14 18.2226C13.0335 18.2226 12.25 17.4492 12.25 16.4953V9.58621C12.25 8.63226 13.0335 7.85893 14 7.85893Z"
+    />
+  </svg>
+);
+const RightArrowIcon = ({
+  className,
+  ...props
+}: {
+  className?: string;
+  props?: React.HtmlHTMLAttributes<"svg">;
+}) => (
+  <svg
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 448 512"
+    {...props}
+  >
+    <path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z" />
+  </svg>
+);
 
-export { MenuIcon };
+export { MenuIcon, MouseIcon, RightArrowIcon };

tooling/tailwind/base.ts

@@ -6,15 +6,15 @@ export default {
   theme: {
     extend: {
       fontSize: {
-        "heading-large": [
+        "display-large": [
           "3.5625rem",
           { lineHeight: "4rem", fontWeight: "400" },
         ],
-        "heading-medium": [
+        "display-medium": [
           "2.8125rem",
           { lineHeight: "3.25rem", fontWeight: "400" },
         ],
-        "heading-small": [
+        "display-small": [
           "2.5rem",
           { lineHeight: "2.75rem", fontWeight: "400" },
         ],