From 41e6816db3b7026dfe06358eeca058fb7f5afcc4 Mon Sep 17 00:00:00 2001
From: Melnik George <melnik.goshan2013@gmail.com>
Date: Sun, 1 Dec 2024 18:46:59 +0300
Subject: [PATCH] Added signin/signup pages

---
 .../src/app/components/Input/Input.tsx        |  38 +++++
 landing_page/src/app/components/NavBar.tsx    |   9 +-
 .../src/app/components/Select/Select.tsx      | 159 ++++++++++++++++++
 landing_page/src/app/globals.css              |   3 +-
 landing_page/src/app/lib/utils/index.ts       |   6 +
 landing_page/src/app/signin/page.tsx          |  58 +++++++
 landing_page/src/app/signup/page.tsx          |  84 +++++++++
 7 files changed, 351 insertions(+), 6 deletions(-)
 create mode 100644 landing_page/src/app/components/Input/Input.tsx
 create mode 100644 landing_page/src/app/components/Select/Select.tsx
 create mode 100644 landing_page/src/app/lib/utils/index.ts
 create mode 100644 landing_page/src/app/signin/page.tsx
 create mode 100644 landing_page/src/app/signup/page.tsx

diff --git a/landing_page/src/app/components/Input/Input.tsx b/landing_page/src/app/components/Input/Input.tsx
new file mode 100644
index 00000000..bd743e7b
--- /dev/null
+++ b/landing_page/src/app/components/Input/Input.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+  rightElement?: React.ReactNode;
+}
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ label, error, rightElement, className = '', ...props }, ref) => {
+    return (
+      <div className="w-full">
+        {label && (
+          <label className="block text-sm font-medium  mb-1">
+            {label}
+          </label>
+        )}
+        <div className="relative">
+          <input
+            ref={ref}
+            className={`w-full pl-6 pr-[30px] py-4 rounded-lg border border-[#5D5D5D] placeholder:text-[#797979] placeholder:text-[16px] leading-[21.86px] focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent ${
+              error ? 'border-red-500' : ''
+            } ${className}`}
+            {...props}
+          />
+          {rightElement && (
+            <div className="absolute inset-y-0 right-0 flex items-center pr-3">
+              {rightElement}
+            </div>
+          )}
+        </div>
+        {error && <p className="mt-1 text-sm text-red-500">{error}</p>}
+      </div>
+    );
+  }
+);
+
+Input.displayName = 'Input';
diff --git a/landing_page/src/app/components/NavBar.tsx b/landing_page/src/app/components/NavBar.tsx
index 7a0af43e..dd6ecb07 100644
--- a/landing_page/src/app/components/NavBar.tsx
+++ b/landing_page/src/app/components/NavBar.tsx
@@ -3,7 +3,6 @@ import React, { useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { Menu, X } from "lucide-react";
-import Button from "./Button/Button";
 
 const NavBar = () => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
@@ -33,12 +32,12 @@ const NavBar = () => {
         <div className="hidden md:flex items-center gap-8">
           <div className="flex items-center gap-4 text-sm">
             <Link
-              href="/"
+              href="/signin"
               className="text-[#6364d5] hover:text-[#4e4fb8] transition-colors text-xs"
             >
               Login
             </Link>
-            <Button>Sign Up</Button>
+            <Link className="text-white rounded text-xs py-3 px-6 bg-[#6364d5]" href='/signup'>Sign Up</Link>
           </div>
         </div>
 
@@ -78,14 +77,14 @@ const NavBar = () => {
             </Link>
             <div className="flex flex-col gap-2 pt-2 border-t">
               <Link
-                href="/"
+                href="/signin"
                 className="p-2 text-[#6364d5] hover:bg-gray-50 rounded-lg transition-colors"
                 onClick={() => setIsMenuOpen(false)}
               >
                 Login
               </Link>
               <div className="px-2">
-                <Button classname="w-full justify-center">Sign Up</Button>
+                <Link className="text-white rounded text-xs py-3 px-6 bg-[#6364d5]" href='/signup'>Sign Up</Link>
               </div>
             </div>
           </nav>
diff --git a/landing_page/src/app/components/Select/Select.tsx b/landing_page/src/app/components/Select/Select.tsx
new file mode 100644
index 00000000..850e6ca7
--- /dev/null
+++ b/landing_page/src/app/components/Select/Select.tsx
@@ -0,0 +1,159 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "../../lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex w-full items-center justify-between whitespace-nowrap rounded-lg border border-[#5D5D5D] bg-transparent px-4 py-3 text-base font-[400] focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent [&>span]:line-clamp-1 disabled:cursor-not-allowed disabled:opacity-50 bg-white data-[placeholder]:text-[#797979]",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-white",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-[#F0EFFC] focus:text-[#6E62E5]   transition-none",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}
diff --git a/landing_page/src/app/globals.css b/landing_page/src/app/globals.css
index defeae86..bc31d736 100644
--- a/landing_page/src/app/globals.css
+++ b/landing_page/src/app/globals.css
@@ -27,4 +27,5 @@ body {
 }
 *{
   @apply transition-colors duration-200
-}
\ No newline at end of file
+}
+
diff --git a/landing_page/src/app/lib/utils/index.ts b/landing_page/src/app/lib/utils/index.ts
new file mode 100644
index 00000000..18f72e02
--- /dev/null
+++ b/landing_page/src/app/lib/utils/index.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}
\ No newline at end of file
diff --git a/landing_page/src/app/signin/page.tsx b/landing_page/src/app/signin/page.tsx
new file mode 100644
index 00000000..49694ceb
--- /dev/null
+++ b/landing_page/src/app/signin/page.tsx
@@ -0,0 +1,58 @@
+'use client';
+
+import { useState } from 'react';
+import Button  from '../components/Button/Button';
+import { Input } from '../components/Input/Input';
+
+export default function LoginPage() {
+  const [showPassword, setShowPassword] = useState(false);
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-[#f5f5f5] text-[#1f1f1f] px-4">
+      <div className="max-w-md w-full space-y-8">
+        <div className="text-center">
+          <h1 className="text-[40px] font-bold">Sign in</h1>
+          <p className="mt-2 text-[22px] font-[300] text-gray-600">
+            Hey, Enter your details to login to your account
+          </p>
+        </div>
+
+        <form className="mt-8 space-y-6">
+          <Input
+            type="text"
+            placeholder="Enter Email / Phone No"
+          />
+
+          <Input
+            type={showPassword ? 'text' : 'password'}
+            placeholder="Passcode"
+            rightElement={
+              <button
+                type="button"
+                onClick={() => setShowPassword(!showPassword)}
+                className=""
+              >
+                {showPassword?  'Hide' : 'Show'}
+              </button>
+            }
+          />
+          <Input
+            type="text"
+            placeholder="Enter Email / Phone No"
+          />
+
+          <div className="text-xs font-[500]">
+            <span className="text-[#797979]">Don&apos;t have an account yet? </span>
+            <a href="/signup" className="text-[#000000]">
+              Register now!
+            </a>
+          </div>
+
+          <Button classname='w-full text-lg font-[600]'>
+            Sign in
+          </Button>
+        </form>
+      </div>
+    </div>
+  )
+}
diff --git a/landing_page/src/app/signup/page.tsx b/landing_page/src/app/signup/page.tsx
new file mode 100644
index 00000000..be0b0a36
--- /dev/null
+++ b/landing_page/src/app/signup/page.tsx
@@ -0,0 +1,84 @@
+'use client';
+
+import { useState } from 'react';
+import Button  from '../components/Button/Button';
+import { Input } from '../components/Input/Input';
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '../components/Select/Select';
+
+export default function SignupPage() {
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-[#f5f5f5] text-[#1f1f1f] px-4">
+      <div className="max-w-md w-full space-y-8">
+        <div className="text-center">
+          <h1 className="text-[40px] font-bold">Let&apos;s set up</h1>
+          <p className="mt-2 text-[22px] font-[300] text-gray-600">
+            Hey, Enter your details to login to your account
+          </p>
+        </div>
+
+        <form className="mt-8 space-y-6">
+          <Input
+            type="text"
+            placeholder="Enter Email / Phone No"
+          />
+
+          <Input
+            type={showPassword ? 'text' : 'password'}
+            placeholder="Passcode"
+            rightElement={
+              <button
+                type="button"
+                onClick={() => setShowPassword(!showPassword)}
+                className=""
+              >
+                {showPassword?  'Hide' : 'Show'}
+              </button>
+            }
+          />
+          
+          <Input
+            type={showConfirmPassword ? 'text' : 'password'}
+            placeholder="Confirm passcode"
+            rightElement={
+              <button
+                type="button"
+                onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                className=""
+              >
+                {showConfirmPassword?  'Hide' : 'Show'}
+              </button>
+            }
+          />
+          <Input
+            type="text"
+            placeholder="Wallet address"
+          />
+          <Select>
+            <SelectTrigger className="w-full">
+              <SelectValue placeholder="Land owner"/>
+            </SelectTrigger>
+            <SelectContent>
+              <SelectGroup>
+                <SelectItem value="Inspector">Inspector</SelectItem>
+                <SelectItem value="Land buyer">Land buyer</SelectItem>
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+          <div className="text-xs font-[500]">
+            <span className="text-[#797979]">Already have an account? </span>
+            <a href="/signin" className="text-[#000000]">
+              Sing in!
+            </a>
+          </div>
+
+          <Button classname='w-full text-lg font-[600]'>
+            Sign up
+          </Button>
+        </form>
+      </div>
+    </div>
+  )
+}