Implement Auth UI & Layout ( Sign In and Sign Up Page )

app/(auth)/layout.tsx

@@ -0,0 +1,38 @@
+import Image from "next/image"
+import Link from "next/link"
+
+const Layout = ({children} : {children:React.ReactNode} ) => {
+    return (
+        <main className="auth-layout">
+            <section className="auth-left-section scrollbar-hide-default"> 
+                <Link href='/' className="auth-logo">
+                    <Image src="/assets/icons/logo.svg" alt="App-logo" width={140} height={32} className="h-8 w-auto" />
+                </Link>
+
+                <div className="pb-6 lg:pb-8 flex-1">
+                    {children}
+                </div>
+            </section>
+
+            <section className="auth-right-section">
+                <div className="z-10 relative lg:mt-4 lg:mb-16">
+                    <blockquote className="auth-blockquote">
+                        "Be fearful when others are greedy, and greedy when others are fearful."
+
+                    </blockquote>
+                    <div className="flex items-center justify-between">
+                        <div>
+                            <cite className="auth-testimonial-author">— Warren Buffett</cite>
+                            <p className="max-md:text-xs text-gray-500">Chairman and CEO of Berkshire Hathaway</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="flex-1 relative">
+                    <Image src="/assets/images/dashboard.png" alt="Dashboard" width={1440} height={1150} className="auth-dashboard-preview absolute top-0"/>
+                </div>
+            </section>
+        </main>
+    )
+}
+export default Layout

app/(auth)/sign-in/page.tsx

@@ -0,0 +1,68 @@
+'use client'
+import React from 'react'
+import InputField from '@/components/forms/InputField'
+import FooterLink from '@/components/forms/FooterLink'
+import { Button } from '@/components/ui/button'
+import { SubmitHandler, useForm } from 'react-hook-form'
+
+type SignInFormData = {
+  email: string
+  password: string
+}
+
+const SignIn = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<SignInFormData>({
+    defaultValues: {
+      email: '',
+      password: '',
+    },
+    mode: 'onBlur'
+  })
+
+  const onSubmit: SubmitHandler<SignInFormData> = async (data) => {
+    try {
+      console.log(data)
+    } catch (e) {
+      console.error(e)
+    }
+  }
+
+  return (
+    <>
+      <h1 className='form-title'>Welcome Back</h1>
+
+      <form onSubmit={handleSubmit(onSubmit)} className='space-y-5'>
+        <InputField
+          name="email"
+          label="Email"
+          placeholder="contact@example.com"
+          register={register}
+          error={errors.email}
+          validation={{ required: 'Email is required', pattern: { value: /^\w+@\w+\.\w+$/, message: 'Invalid email format' } }}
+        />
+
+        <InputField
+          name="password"
+          label="Password"
+          placeholder="Enter your password"
+          type="password"
+          register={register}
+          error={errors.password}
+          validation={{ required: 'Password is required' }}
+        />
+
+        <Button type='submit' disabled={isSubmitting} className='yellow-btn w-full mt-5'>
+          {isSubmitting ? 'Signing In...' : 'Sign In'}
+        </Button>
+
+        <FooterLink text="Don't have an account?" linkText='Sign-up' href='/sign-up' />
+      </form>
+    </>
+  )
+}
+
+export default SignIn

app/(auth)/sign-up/page.tsx

@@ -0,0 +1,123 @@
+'use client'
+import { CountrySelectField } from '@/components/forms/CountrySelectField';
+import FooterLink from '@/components/forms/FooterLink';
+import InputField from '@/components/forms/InputField';
+import SelectField from '@/components/forms/SelectField';
+import { Button } from '@/components/ui/button';
+import { INVESTMENT_GOALS, PREFERRED_INDUSTRIES, RISK_TOLERANCE_OPTIONS } from '@/lib/constants';
+import { SubmitHandler, useForm } from 'react-hook-form'
+
+const SignUp = () => {
+  const {
+    register,
+    handleSubmit,
+    watch,
+    control,
+
+    formState: { errors, isSubmitting },
+  } = useForm<SignUpFormData>({
+
+        defaultValues: {
+            fullName: '',
+            email: '',
+            password: '',
+            country: 'INDIA',
+            investmentGoals: 'Growth',
+            riskTolerance: 'Medium',
+            preferredIndustry: 'Technology'
+        },
+        mode: 'onBlur'
+  }, );
+
+  const onSubmit = async(data: SignUpFormData) => {
+    try {
+        console.log(data);
+    }catch (e){
+        console.error(e);
+    }
+  }
+  return (
+    <>
+        <h1 className='form-title'>Sign Up & Personalize</h1>
+
+        <form onSubmit={handleSubmit(onSubmit)} className='space-y-5'>
+          {/* Input */}
+          <InputField 
+            name="fullName"
+            label="Full Name"
+            placeholder="John Doe"
+            register={register}
+            error={errors.fullName}
+            validation={{ required: 'Full name is required', minLength: 2 }}
+          />
+
+          <InputField
+            name="email"
+            label="Email"
+            placeholder="contact@jsmastery.com"
+            register={register}
+            error={errors.email}
+            validation={{ required: 'Email name is required', pattern: /^\w+@\w+\.\w+$/, message: 'Email address is required' }}
+          />
+
+          <InputField
+            name="password"
+            label="Password"
+            placeholder="Enter a strong password"
+            type="password"
+            register={register}
+            error={errors.password}
+            validation={{ required: 'Password is required', minLength: 8 }}
+          />
+
+          <CountrySelectField 
+              name="country"
+              label="Country"
+              control={control}
+              error={errors.country}
+              required
+          />
+          <SelectField
+            name="investmentGoals"
+            label="Investment Goals"
+            placeholder="Select your investment goal"
+            options={INVESTMENT_GOALS}
+            control={control}
+            error={errors.investmentGoals}
+            required
+
+          />
+
+          <SelectField
+            name="riskTolerance"
+            label="Risk Tolerance"
+            placeholder="Select your risk level"
+            options={RISK_TOLERANCE_OPTIONS}
+            control={control}
+            error={errors.riskTolerance}
+            required
+
+          />
+
+          <SelectField
+            name="preferredIndustry"
+            label="Preferred Industry"
+            placeholder="Select your preferred industry"
+            options={PREFERRED_INDUSTRIES}
+            control={control}
+            error={errors.preferredIndustry}
+            required
+
+          />
+
+          <Button type='submit' disabled={isSubmitting} className='yellow-btn w-full mt-5'>
+            {isSubmitting ? 'Creating Account' : 'Start Your Investing Journey'}
+          </Button>
+
+          <FooterLink text='Already Have an Account ?' linkText='Sign-in' href='/sign-in' />
+        </form>
+    </>
+  )
+}
+
+export default SignUp

components/forms/CountrySelectField.tsx

@@ -0,0 +1,146 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client';
+
+import { useState } from 'react';
+import { Control, Controller, FieldError } from 'react-hook-form';
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from '@/components/ui/popover';
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList,
+} from '@/components/ui/command';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Check, ChevronsUpDown } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import countryList from 'react-select-country-list';
+
+type CountrySelectProps = {
+    name: string;
+    label: string;
+    control: Control<any>;
+    error?: FieldError;
+    required?: boolean;
+};
+
+const CountrySelect = ({
+                           value,
+                           onChange,
+                       }: {
+    value: string;
+    onChange: (value: string) => void;
+}) => {
+    const [open, setOpen] = useState(false);
+
+    // Get country options with flags
+    const countries = countryList().getData();
+
+    // Helper function to get flag emoji
+    const getFlagEmoji = (countryCode: string) => {
+        const codePoints = countryCode
+            .toUpperCase()
+            .split('')
+            .map((char) => 127397 + char.charCodeAt(0));
+        return String.fromCodePoint(...codePoints);
+    };
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <Button
+                    variant='outline'
+                    role='combobox'
+                    aria-expanded={open}
+                    className='country-select-trigger'
+                >
+                    {value ? (
+                        <span className='flex items-center gap-2'>
+              <span>{getFlagEmoji(value)}</span>
+              <span>{countries.find((c) => c.value === value)?.label}</span>
+            </span>
+                    ) : (
+                        'Select your country...'
+                    )}
+                    <ChevronsUpDown className='ml-2 h-4 w-4 shrink-0 opacity-50' />
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent
+                className='w-full p-0 bg-gray-800 border-gray-600'
+                align='start'
+            >
+                <Command className='bg-gray-800 border-gray-600'>
+                    <CommandInput
+                        placeholder='Search countries...'
+                        className='country-select-input'
+                    />
+                    <CommandEmpty className='country-select-empty'>
+                        No country found.
+                    </CommandEmpty>
+                    <CommandList className='max-h-60 bg-gray-800 scrollbar-hide-default'>
+                        <CommandGroup className='bg-gray-800'>
+                            {countries.map((country) => (
+                                <CommandItem
+                                    key={country.value}
+                                    value={`${country.label} ${country.value}`}
+                                    onSelect={() => {
+                                        onChange(country.value);
+                                        setOpen(false);
+                                    }}
+                                    className='country-select-item'
+                                >
+                                    <Check
+                                        className={cn(
+                                            'mr-2 h-4 w-4 text-yellow-500',
+                                            value === country.value ? 'opacity-100' : 'opacity-0'
+                                        )}
+                                    />
+                                    <span className='flex items-center gap-2'>
+                    <span>{getFlagEmoji(country.value)}</span>
+                    <span>{country.label}</span>
+                  </span>
+                                </CommandItem>
+                            ))}
+                        </CommandGroup>
+                    </CommandList>
+                </Command>
+            </PopoverContent>
+        </Popover>
+    );
+};
+
+export const CountrySelectField = ({
+                                       name,
+                                       label,
+                                       control,
+                                       error,
+                                       required = false,
+                                   }: CountrySelectProps) => {
+    return (
+        <div className='space-y-2'>
+            <Label htmlFor={name} className='form-label'>
+                {label}
+            </Label>
+            <Controller
+                name={name}
+                control={control}
+                rules={{
+                    required: required ? `Please select ${label.toLowerCase()}` : false,
+                }}
+                render={({ field }) => (
+                    <CountrySelect value={field.value} onChange={field.onChange} />
+                )}
+            />
+            {error && <p className='text-sm text-red-500'>{error.message}</p>}
+            <p className='text-xs text-gray-500'>
+                Helps us show market data and news relevant to you.
+            </p>
+        </div>
+    );
+};

components/forms/FooterLink.tsx

@@ -0,0 +1,16 @@
+
+import Link from 'next/link'
+import React from 'react'
+
+const FooterLink = ({text, linkText , href} : FooterLinkProps) => (
+    <div className='text-center pt-4'>
+        <p className='text-sm text-gray-500'>
+            {text}{` `}
+            <Link href={href} className='footer-link'>
+                {linkText}
+            </Link>
+        </p>
+    </div>
+)
+
+export default FooterLink