From 0e88b84499725867a6a9199ced8c3274101f1f59 Mon Sep 17 00:00:00 2001
From: saeidex <ebrahim.khalil.nayeem@gmail.com>
Date: Fri, 4 Oct 2024 01:36:50 +0600
Subject: [PATCH] add(nextjs): get-started page (duplicate login page)

---
 .../app/_components/landing-page/contact.tsx  | 47 ++++++-------------
 .../_components/landing-page/header/index.tsx |  2 +-
 .../src/app/_components/landing-page/hero.tsx |  2 +-
 .../app/_components/landing-page/our-team.tsx |  4 +-
 .../_components/landing-page/testimonials.tsx |  2 +-
 .../logo.tsx => _components/logo-icon.tsx}    |  2 +-
 .../_components/signin-with-buttons.tsx       |  0
 apps/nextjs/src/app/get-started/page.tsx      | 41 ++++++++++++++++
 apps/nextjs/src/app/login/page.tsx            | 10 ++--
 apps/nextjs/tsconfig.json                     |  7 ++-
 pnpm-lock.yaml                                | 37 ++++++++++-----
 11 files changed, 97 insertions(+), 57 deletions(-)
 rename apps/nextjs/src/app/{login/_components/logo.tsx => _components/logo-icon.tsx} (91%)
 rename apps/nextjs/src/app/{login => }/_components/signin-with-buttons.tsx (100%)
 create mode 100644 apps/nextjs/src/app/get-started/page.tsx

diff --git a/apps/nextjs/src/app/_components/landing-page/contact.tsx b/apps/nextjs/src/app/_components/landing-page/contact.tsx
index a329491..dc197c7 100644
--- a/apps/nextjs/src/app/_components/landing-page/contact.tsx
+++ b/apps/nextjs/src/app/_components/landing-page/contact.tsx
@@ -1,5 +1,3 @@
-import Image from "next/image";
-
 import { cn } from "@ubus/ui";
 import { Button } from "@ubus/ui/button";
 import { Input } from "@ubus/ui/input";
@@ -37,7 +35,7 @@ const formItems: IFromItem[] = [
 
 export const Contact = () => {
   return (
-    <div className="container my-16 flex flex-col gap-8 lg:my-32 lg:gap-24">
+    <div className="container my-16 flex max-w-2xl flex-col gap-8 lg:my-32 lg:gap-16">
       <div className="flex flex-col gap-3">
         <h2 className="text-center text-headline-large font-bold md:text-display-large">
           Contact our team
@@ -46,35 +44,20 @@ export const Contact = () => {
           Got any questions about the product or scaling on our platform?
         </p>
       </div>
-      <div className="lg:grid lg:grid-cols-2 lg:gap-20">
-        <div className="grid grid-cols-1 gap-5 lg:grid-cols-2 lg:gap-8">
-          {formItems.map((item) => (
-            <FormInput key={item.name} formItem={item} />
-          ))}
-          <div className="flex flex-col gap-3 lg:col-span-2">
-            <Label className="text-xl" htmlFor="message">
-              Message
-            </Label>
-            <Textarea
-              className="col-span-2 border-outline bg-surface-container-low text-xl text-outline placeholder:text-xl placeholder:text-outline/30"
-              rows={10}
-              name="message"
-              placeholder="Leave us a message..."
-            />
-          </div>
-          <Button className="h-[52px] text-xl font-medium lg:col-span-2">
-            Send Message
-          </Button>
-        </div>
-        <div className="hidden rounded-3xl lg:block">
-          <Image
-            alt="contact form banner image"
-            src={"hey.svg"}
-            width={1024}
-            height={2048}
-            className="h-full w-full"
+      <div className="grid gap-4 lg:grid-cols-2 lg:gap-4 lg:gap-y-7">
+        {formItems.map((item) => (
+          <FormInput key={item.name} formItem={item} />
+        ))}
+        <div className="flex flex-col gap-3 lg:col-span-2">
+          <Label htmlFor="message">Message</Label>
+          <Textarea
+            className="col-span-2 border-outline bg-surface-container-low text-outline placeholder:text-outline/30"
+            rows={10}
+            name="message"
+            placeholder="Leave us a message..."
           />
         </div>
+        <Button className="font-bold lg:col-span-2">Send Message</Button>
       </div>
     </div>
   );
@@ -88,11 +71,11 @@ const FormInput = ({ formItem }: { formItem: IFromItem }) => {
         formItem.name.includes("name") && "lg:col-span-1",
       )}
     >
-      <Label className="text-xl" htmlFor={formItem.name}>
+      <Label className="text-body-large" htmlFor={formItem.name}>
         {formItem.label}
       </Label>
       <Input
-        className="h-[52px] border-outline bg-surface-container-low text-xl text-outline placeholder:text-xl placeholder:text-outline/30"
+        className="border-outline bg-surface-container-low text-outline placeholder:text-outline/60"
         name={formItem.name}
         placeholder={formItem.placholder}
       />
diff --git a/apps/nextjs/src/app/_components/landing-page/header/index.tsx b/apps/nextjs/src/app/_components/landing-page/header/index.tsx
index 9afd715..de936ee 100644
--- a/apps/nextjs/src/app/_components/landing-page/header/index.tsx
+++ b/apps/nextjs/src/app/_components/landing-page/header/index.tsx
@@ -22,7 +22,7 @@ export const Header = () => {
               Login
             </Button>
           </Link>
-          <Link href={{ pathname: "/signup" }}>
+          <Link href={{ pathname: "/get-started" }}>
             <Button className="hidden md:block">Get started</Button>
           </Link>
           <Button className="md:hidden">
diff --git a/apps/nextjs/src/app/_components/landing-page/hero.tsx b/apps/nextjs/src/app/_components/landing-page/hero.tsx
index 33dc824..699341b 100644
--- a/apps/nextjs/src/app/_components/landing-page/hero.tsx
+++ b/apps/nextjs/src/app/_components/landing-page/hero.tsx
@@ -46,7 +46,7 @@ export const Hero = ({ className }: { className?: string }) => {
 
 export const CTA = () => {
   return (
-    <Link href={{ pathname: "/signup" }}>
+    <Link href={{ pathname: "/get-started" }}>
       <Button variant={"withIcon"}>
         <IconArrowRight stroke={2} size={20} />
         Track now
diff --git a/apps/nextjs/src/app/_components/landing-page/our-team.tsx b/apps/nextjs/src/app/_components/landing-page/our-team.tsx
index 8d9eb29..0c223e7 100644
--- a/apps/nextjs/src/app/_components/landing-page/our-team.tsx
+++ b/apps/nextjs/src/app/_components/landing-page/our-team.tsx
@@ -11,7 +11,7 @@ import { teamMembers } from "@ubus/configs";
 
 export const OurTeam = () => {
   return (
-    <div className="bg-primary-container py-20 *:text-on-primary-container lg:py-32">
+    <div>
       <div className="container flex flex-col gap-10 sm:gap-16">
         <div className="flex flex-col items-center justify-center gap-2 *:text-center sm:gap-4">
           <span className="text-body-large sm:text-headline-small">
@@ -38,7 +38,7 @@ const TeamMemberCard = ({ item }: { item: ITeamMember }) => {
   return (
     <div
       key={item.usernames.github}
-      className="flex flex-col gap-3 overflow-hidden rounded-lg bg-surface-variant pb-5 text-on-surface-variant hover:shadow-lg"
+      className="flex flex-col gap-3 overflow-hidden rounded-lg bg-surface-container-highest pb-5 text-on-surface hover:shadow-lg"
     >
       <div className="aspect-square max-h-full overflow-hidden rounded-lg bg-surface-container-high object-cover">
         <Image
diff --git a/apps/nextjs/src/app/_components/landing-page/testimonials.tsx b/apps/nextjs/src/app/_components/landing-page/testimonials.tsx
index e2b2abb..b7165a2 100644
--- a/apps/nextjs/src/app/_components/landing-page/testimonials.tsx
+++ b/apps/nextjs/src/app/_components/landing-page/testimonials.tsx
@@ -43,7 +43,7 @@ export const Testimonials = () => {
     Autoplay({ delay: 5000, stopOnInteraction: true }),
   );
   return (
-    <div className="container mb-10 *:select-none lg:my-32">
+    <div className="container mb-16 *:select-none lg:my-32">
       <Carousel
         className="mx-auto w-full max-w-[240px] sm:max-w-lg md:max-w-xl lg:max-w-4xl xl:max-w-6xl"
         // plugins={[plugin.current]}
diff --git a/apps/nextjs/src/app/login/_components/logo.tsx b/apps/nextjs/src/app/_components/logo-icon.tsx
similarity index 91%
rename from apps/nextjs/src/app/login/_components/logo.tsx
rename to apps/nextjs/src/app/_components/logo-icon.tsx
index 2c5d233..178058f 100644
--- a/apps/nextjs/src/app/login/_components/logo.tsx
+++ b/apps/nextjs/src/app/_components/logo-icon.tsx
@@ -4,7 +4,7 @@ import Image from "next/image";
 
 import { useThemeBasedValue } from "@ubus/hooks";
 
-export const Logo = () => {
+export const LogoIcon = () => {
   const logoSrc = useThemeBasedValue("ubus.svg", "ubus-dark.svg");
 
   return (
diff --git a/apps/nextjs/src/app/login/_components/signin-with-buttons.tsx b/apps/nextjs/src/app/_components/signin-with-buttons.tsx
similarity index 100%
rename from apps/nextjs/src/app/login/_components/signin-with-buttons.tsx
rename to apps/nextjs/src/app/_components/signin-with-buttons.tsx
diff --git a/apps/nextjs/src/app/get-started/page.tsx b/apps/nextjs/src/app/get-started/page.tsx
new file mode 100644
index 0000000..6ea3dfa
--- /dev/null
+++ b/apps/nextjs/src/app/get-started/page.tsx
@@ -0,0 +1,41 @@
+import { Card, CardContent, CardFooter, CardHeader } from "@ubus/ui/card";
+
+import { LogoIcon } from "../_components/logo-icon";
+import {
+  SignInWithGithub,
+  SignInWithGoogle,
+} from "../_components/signin-with-buttons";
+
+const GetStartedPage = () => {
+  return (
+    <div className="fixed inset-0 z-50 flex h-full w-full items-center justify-center px-4 md:px-8">
+      <Card className="relative max-w-lg rounded-xl border-outline-variant bg-surface-container-low px-6 text-on-surface shadow-md *:fill-on-surface">
+        <CardHeader className="space-y-4 text-center">
+          <LogoIcon />
+          <h2 className="mb-6 text-headline-small font-bold">
+            Sign in to access <br /> all the content.
+          </h2>
+        </CardHeader>
+        <CardContent className="mt-8 space-y-4">
+          <SignInWithGoogle />
+          <SignInWithGithub />
+        </CardContent>
+        <CardFooter className="mt-12 text-center">
+          <p className="text-xs">
+            By proceeding, you agree to our
+            <a href="/terms-of-service/" className="underline">
+              Terms of Service
+            </a>
+            and confirm you have read our
+            <a href="/privacy-policy/" className="underline">
+              Privacy Policy
+            </a>
+            .
+          </p>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+};
+
+export default GetStartedPage;
diff --git a/apps/nextjs/src/app/login/page.tsx b/apps/nextjs/src/app/login/page.tsx
index 3860914..af8875c 100644
--- a/apps/nextjs/src/app/login/page.tsx
+++ b/apps/nextjs/src/app/login/page.tsx
@@ -1,17 +1,17 @@
 import { Card, CardContent, CardFooter, CardHeader } from "@ubus/ui/card";
 
-import { Logo } from "./_components/logo";
+import { LogoIcon } from "../_components/logo-icon";
 import {
   SignInWithGithub,
   SignInWithGoogle,
-} from "./_components/signin-with-buttons";
+} from "../_components/signin-with-buttons";
 
-const SignInPage = () => {
+const LoginPage = () => {
   return (
     <div className="fixed inset-0 z-50 flex h-full w-full items-center justify-center px-4 md:px-8">
       <Card className="relative max-w-lg rounded-xl border-outline-variant bg-surface-container-low px-6 text-on-surface shadow-md *:fill-on-surface">
         <CardHeader className="space-y-4 text-center">
-          <Logo />
+          <LogoIcon />
           <h2 className="mb-6 text-headline-small font-bold">
             Sign in to access <br /> all the content.
           </h2>
@@ -38,4 +38,4 @@ const SignInPage = () => {
   );
 };
 
-export default SignInPage;
+export default LoginPage;
diff --git a/apps/nextjs/tsconfig.json b/apps/nextjs/tsconfig.json
index 60680b1..9d828d4 100644
--- a/apps/nextjs/tsconfig.json
+++ b/apps/nextjs/tsconfig.json
@@ -15,5 +15,10 @@
   },
   "exclude": ["node_modules"],
   "extends": "@ubus/tsconfig/base.json",
-  "include": [".", ".next/types/**/*.ts"]
+  "include": [
+    ".",
+    ".next/types/**/*.ts",
+    "src/app/_components/signin-with-buttons.tsx",
+    "src/app/_components/logo-icon.tsx"
+  ]
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 70302a1..d44c46d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -71,7 +71,7 @@ importers:
     dependencies:
       '@auth/core':
         specifier: 0.34.2
-        version: 0.34.2
+        version: 0.34.2(nodemailer@6.9.15)
     devDependencies:
       '@types/node':
         specifier: ^20.14.15
@@ -381,10 +381,10 @@ importers:
     dependencies:
       '@auth/core':
         specifier: 0.34.2
-        version: 0.34.2
+        version: 0.34.2(nodemailer@6.9.15)
       '@auth/drizzle-adapter':
         specifier: ^1.4.2
-        version: 1.4.2
+        version: 1.4.2(nodemailer@6.9.15)
       '@t3-oss/env-nextjs':
         specifier: ^0.11.0
         version: 0.11.0(typescript@5.5.4)(zod@3.23.8)
@@ -396,7 +396,7 @@ importers:
         version: 14.2.5(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       next-auth:
         specifier: 5.0.0-beta.20
-        version: 5.0.0-beta.20(next@14.2.5(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
+        version: 5.0.0-beta.20(next@14.2.5(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(nodemailer@6.9.15)(react@18.3.1)
       react:
         specifier: catalog:react18
         version: 18.3.1
@@ -646,7 +646,7 @@ importers:
         version: 7.35.0(eslint@9.9.0(jiti@1.21.6))
       eslint-plugin-react-hooks:
         specifier: rc
-        version: 5.1.0-rc-3edc000d-20240926(eslint@9.9.0(jiti@1.21.6))
+        version: 5.1.0-rc-0751fac7-20241002(eslint@9.9.0(jiti@1.21.6))
       eslint-plugin-turbo:
         specifier: ^2.1.1
         version: 2.1.1(eslint@9.9.0(jiti@1.21.6))
@@ -4554,8 +4554,8 @@ packages:
     peerDependencies:
       eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
 
-  eslint-plugin-react-hooks@5.1.0-rc-3edc000d-20240926:
-    resolution: {integrity: sha512-9E3TnhvxK6OWwG8EQyGlb2V9n0NQ+e1euW3Jj+t3M+6CkoBAKX25OPOn6QLK9Ylxib3xd4houOOUmrvwCSa8Jw==}
+  eslint-plugin-react-hooks@5.1.0-rc-0751fac7-20241002:
+    resolution: {integrity: sha512-9CEhaksLMmjRIpLdm5xazaCvDYsLZ0OKgCBQTyuiP4LvtB1wiQVBVGgQVWF1iC2FZmilFsefdmxUJb0nQl80Yg==}
     engines: {node: '>=10'}
     peerDependencies:
       eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0
@@ -6267,6 +6267,10 @@ packages:
     resolution: {integrity: sha512-LN4fydt9TqhZhThkZIVQnF9cwjU3qmUH9h78Mx/K7d3VvfRqqwthLwJEUOEL0QPZ0XQmNN7be5Ggit5+4dq3Bw==}
     engines: {node: '>=0.12.0'}
 
+  nodemailer@6.9.15:
+    resolution: {integrity: sha512-AHf04ySLC6CIfuRtRiEYtGEXgRfa6INgWGluDhnxTZhHSKvrBu7lc1VVchQ0d8nPc4cFaZoPq8vkyNoZr0TpGQ==}
+    engines: {node: '>=6.0.0'}
+
   nopt@5.0.0:
     resolution: {integrity: sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==}
     engines: {node: '>=6'}
@@ -8297,7 +8301,7 @@ snapshots:
       '@jridgewell/gen-mapping': 0.3.5
       '@jridgewell/trace-mapping': 0.3.25
 
-  '@auth/core@0.34.2':
+  '@auth/core@0.34.2(nodemailer@6.9.15)':
     dependencies:
       '@panva/hkdf': 1.2.1
       '@types/cookie': 0.6.0
@@ -8306,10 +8310,12 @@ snapshots:
       oauth4webapi: 2.11.1
       preact: 10.11.3
       preact-render-to-string: 5.2.3(preact@10.11.3)
+    optionalDependencies:
+      nodemailer: 6.9.15
 
-  '@auth/drizzle-adapter@1.4.2':
+  '@auth/drizzle-adapter@1.4.2(nodemailer@6.9.15)':
     dependencies:
-      '@auth/core': 0.34.2
+      '@auth/core': 0.34.2(nodemailer@6.9.15)
     transitivePeerDependencies:
       - '@simplewebauthn/browser'
       - '@simplewebauthn/server'
@@ -12699,7 +12705,7 @@ snapshots:
       safe-regex-test: 1.0.3
       string.prototype.includes: 2.0.0
 
-  eslint-plugin-react-hooks@5.1.0-rc-3edc000d-20240926(eslint@9.9.0(jiti@1.21.6)):
+  eslint-plugin-react-hooks@5.1.0-rc-0751fac7-20241002(eslint@9.9.0(jiti@1.21.6)):
     dependencies:
       eslint: 9.9.0(jiti@1.21.6)
 
@@ -14612,11 +14618,13 @@ snapshots:
 
   netmask@2.0.2: {}
 
-  next-auth@5.0.0-beta.20(next@14.2.5(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1):
+  next-auth@5.0.0-beta.20(next@14.2.5(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(nodemailer@6.9.15)(react@18.3.1):
     dependencies:
-      '@auth/core': 0.34.2
+      '@auth/core': 0.34.2(nodemailer@6.9.15)
       next: 14.2.5(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
+    optionalDependencies:
+      nodemailer: 6.9.15
 
   next-themes@0.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
@@ -14784,6 +14792,9 @@ snapshots:
 
   node-stream-zip@1.15.0: {}
 
+  nodemailer@6.9.15:
+    optional: true
+
   nopt@5.0.0:
     dependencies:
       abbrev: 1.1.1