add(nextjs): login page

.env.example

@@ -17,5 +17,9 @@ AUTH_SECRET='supersecret'
 AUTH_GITHUB_ID=''
 AUTH_GITHUB_SECRET=''
 
+# Google OAuth provider
+AUTH_GOOGLE_ID=""
+AUTH_GOOGLE_SECRET=""
+
 # In case you're using the Auth Proxy (apps/auth-proxy)
 # AUTH_REDIRECT_PROXY_URL='https://auth.your-server.com/r'

.github/ISSUE_TEMPLATE/config.yml

@@ -1,7 +1,7 @@
 contact_links:
   - name: Ask a question
-    url: https://github.com/t3-oss/create-t3-turbo/discussions
+    url: https://github.com/saeidex/ubus/discussions
     about: Ask questions and discuss with other community members
   - name: Feature request
-    url: https://github.com/t3-oss/create-t3-turbo/discussions/new?category=ideas
+    url: https://github.com/saeidex/ubus/discussions/new?category=ideas
     about: Feature requests should be opened as discussions

apps/auth-proxy/routes/r/[...auth].ts

@@ -1,5 +1,6 @@
 import { Auth } from "@auth/core";
-import Discord from "@auth/core/providers/discord";
+import GitHub from "@auth/core/providers/github";
+import Google from "@auth/core/providers/google";
 import { eventHandler, toWebRequest } from "h3";
 
 export default eventHandler(async (event) =>
@@ -9,10 +10,14 @@ export default eventHandler(async (event) =>
     trustHost: !!process.env.VERCEL,
     redirectProxyUrl: process.env.AUTH_REDIRECT_PROXY_URL,
     providers: [
-      Discord({
+      GitHub({
         clientId: process.env.AUTH_GITHUB_ID,
         clientSecret: process.env.AUTH_GITHUB_SECRET,
       }),
+      Google({
+        clientId: process.env.AUTH_GOOGLE_ID,
+        clientSecret: process.env.AUTH_GOOGLE_SECRET,
+      }),
     ],
   }),
 );

apps/nextjs/src/app/_components/dashboard/index.tsx

@@ -0,0 +1,22 @@
+import { signOut } from "@ubus/auth";
+import { Button } from "@ubus/ui/button";
+
+export const Dashboard = () => {
+  return (
+    <div>
+      Dashboard
+      <div>
+        <form>
+          <Button
+            formAction={async () => {
+              "use server";
+              await signOut();
+            }}
+          >
+            Sign out
+          </Button>
+        </form>
+      </div>
+    </div>
+  );
+};

apps/nextjs/src/app/_components/landing-page/header/index.tsx

@@ -0,0 +1,37 @@
+import Link from "next/link";
+import { IconMenu } from "@tabler/icons-react";
+
+import { Button } from "@ubus/ui/button";
+
+import { Logo } from "./logo";
+import { NavBar } from "./navbar";
+
+export const Header = () => {
+  return (
+    <nav className="container border-outline">
+      <div className="mx-auto flex h-24 flex-wrap items-center justify-between">
+        <Link href="/">
+          <Logo />
+        </Link>
+        <div className="flex gap-1.5 md:order-2">
+          <Link href={{ pathname: "/login" }}>
+            <Button
+              className="hidden text-on-surface hover:text-primary md:block"
+              variant="link"
+            >
+              Login
+            </Button>
+          </Link>
+          <Link href={{ pathname: "/signup" }}>
+            <Button className="hidden md:block">Get started</Button>
+          </Link>
+          <Button className="md:hidden">
+            <span className="sr-only">Open main menu</span>
+            <IconMenu />
+          </Button>
+        </div>
+        <NavBar />
+      </div>
+    </nav>
+  );
+};

apps/nextjs/src/app/_components/landing-page/header/logo.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import Image from "next/image";
+
+import { useThemeBasedValue } from "@ubus/hooks";
+
+export const Logo = () => {
+  const logoSrc = useThemeBasedValue("ubus.svg", "ubus-dark.svg");
+
+  return (
+    <div className="flex items-center space-x-3 rtl:space-x-reverse">
+      <Image
+        src={logoSrc}
+        width={32}
+        height={24}
+        className="h-8 w-6"
+        alt="ubus logo"
+      />
+      <span className="self-center whitespace-nowrap text-2xl font-semibold dark:text-white">
+        UBus
+      </span>
+    </div>
+  );
+};

apps/nextjs/src/app/_components/landing-page/header/navbar.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+import type { INavLink } from "@ubus/configs";
+import { landingNavLinks } from "@ubus/configs";
+import { cn } from "@ubus/ui";
+import { Button } from "@ubus/ui/button";
+
+export const NavBar = () => {
+  return (
+    <div className="hidden w-full items-center justify-between md:order-1 md:flex md:w-auto">
+      <ul className="mt-4 flex flex-col rounded-lg p-4 font-medium md:mt-0 md:flex-row md:gap-8 md:p-0">
+        {landingNavLinks.map((link) => (
+          <li key={link.href}>
+            <NavLink className="px-0" link={link} />
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export const NavLink = ({
+  link,
+  className,
+}: {
+  className?: string;
+  link: INavLink;
+}) => {
+  const pathname = usePathname();
+  return (
+    <>
+      <Link href={{ href: link.href }}>
+        <Button
+          className={cn(
+            "text-on-surface hover:text-primary",
+            pathname === link.href && "text-primary",
+            className,
+          )}
+          variant={"link"}
+        >
+          {link.label}
+        </Button>
+      </Link>
+    </>
+  );
+};

apps/nextjs/src/app/_components/hero.tsx → apps/nextjs/src/app/_components/landing-page/hero.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import Image from "next/image";
 import Link from "next/link";
 import { IconArrowRight, IconMouse } from "@tabler/icons-react";
@@ -24,12 +22,7 @@ export const Hero = ({ className }: { className?: string }) => {
             Welcome to the IUBAT Bus Tracking System. Access live bus locations,
             schedules, and important updates all in one place.
           </h3>
-          <Link href={{ href: "/dashboard" }}>
-            <Button variant={"withIcon"}>
-              Track now
-              <IconArrowRight stroke={2} size={20} />
-            </Button>
-          </Link>
+          <CTA />
         </div>
         <div className="relative before:absolute before:inset-0 before:hidden before:h-full before:w-full before:bg-gradient-to-br before:from-background before:via-background/80 before:to-transparent sm:-z-50 sm:-mt-40 before:sm:block md:z-auto md:mt-0 before:md:hidden">
           <Image
@@ -50,3 +43,14 @@ export const Hero = ({ className }: { className?: string }) => {
     </section>
   );
 };
+
+export const CTA = () => {
+  return (
+    <Link href={{ pathname: "/signup" }}>
+      <Button variant={"withIcon"}>
+        <IconArrowRight stroke={2} size={20} />
+        Track now
+      </Button>
+    </Link>
+  );
+};

apps/nextjs/src/app/_components/landing-page/index.tsx

@@ -0,0 +1,22 @@
+import { Contact } from "./contact";
+import { EssentialFeatures, KeyFeatures } from "./features";
+import { Footer } from "./footer";
+import { Header } from "./header";
+import { Hero } from "./hero";
+import { OurTeam } from "./our-team";
+import { Testimonials } from "./testimonials";
+
+export default function LandingPage() {
+  return (
+    <>
+      <Header />
+      <Hero />
+      <KeyFeatures />
+      <EssentialFeatures />
+      <Testimonials />
+      <OurTeam />
+      <Contact />
+      <Footer />
+    </>
+  );
+}