add(nextjs): get-started page (duplicate login page)

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}
       />

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">

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

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

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]}

apps/nextjs/src/app/login/_components/logo.tsx → 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 (

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;

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;

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"
+  ]
 }