Skip to content

Auth layout & UI update #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Dali11 merged 1 commit into from
Apr 27, 2026
Merged

Auth layout & UI update #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 10 additions & 3 deletions app/(auth)/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,24 @@
import Testimonial from "@/components/forms/Testimonial"
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">
<main className=" p-4 lg:p-8 flex flex-col lg:flex-row gap-6 justify-between items-start">
<section className="scrollbar-hide-default">
<Link href="/" className="text-2xl font-bold">
<Image src="/logo.svg" alt="Logo" width={140} height={32} w-auto h-8/>
<Image src="asset/images/logo.svg" alt="Logo" width={140} height={32} className="w-auto h-8"/>

@coderabbitai coderabbitai Bot Apr 27, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Confirm the actual location of logo.svg in the public folder
fd -t f 'logo.svg'
fd -t d 'asset|assets' public 2>/dev/null || fd -t d 'asset|assets'

Repository: Dali11/JournalFX

Length of output: 103

Logo src is missing the leading / — next/image requires a root-relative path for static public assets.

"asset/images/logo.svg" is interpreted as relative to the current route, causing it to resolve to /sign-in/asset/images/logo.svg on the /sign-in page and fail with a 404. The next/image component enforces absolute paths for static public assets.

🐛 Suggested fix 
-                <Image src="asset/images/logo.svg" alt="Logo" width={140} height={32} className="w-auto h-8"/>
+                <Image src="/asset/images/logo.svg" alt="Logo" width={140} height={32} className="w-auto h-8"/>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<Image src="asset/images/logo.svg" alt="Logo" width={140} height={32} className="w-auto h-8"/>
<Image src="/asset/images/logo.svg" alt="Logo" width={140} height={32} className="w-auto h-8"/>
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@app/`(auth)/layout.tsx at line 11, The Image tag in app/(auth)/layout.tsx
uses a relative path ("asset/images/logo.svg") which breaks on nested routes;
update the Image src to a root-relative path (e.g. "/asset/images/logo.svg") in
the JSX where Image is rendered so next/image will load the static public asset
correctly while keeping the existing props (alt, width, height, className).

</Link>

<div className="pb-6 lg:pb-8 flex-1">{children}</div>
</section>

{/* AUTH RIGHT SECTION */}

<section className="hidden lg:block">
<Testimonial />
</section>

</main>
)
Expand Down
63 changes: 56 additions & 7 deletions app/(auth)/sign-in/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,58 @@
import React from 'react'
'use client';

const SignInPage = () => {
return (
<div>SignInPage</div>
)
}
import { useForm } from 'react-hook-form';
import { Button } from '@/components/ui/button';
import InputField from '@/components/forms/InputField';
import FooterLink from '@/components/forms/FooterLink';
import {useRouter} from "next/navigation";

export default SignInPage
const SignIn = () => {
const router = useRouter()
const {
register,
handleSubmit,
formState: { errors, isSubmitting },
} = useForm<SignInFormData>({
defaultValues: {
email: '',
password: '',
},
mode: 'onBlur',
});



return (
<>
<h1 className="mt-12 lg:mt-24 mb-5 lg:mb-10 font-bold text-2xl">Welcome back</h1>

<form onSubmit={handleSubmit(onsubmit)} className="space-y-5">

@coderabbitai coderabbitai Bot Apr 27, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

Critical: onsubmit is undefined — references the global window.onsubmit instead of a real handler.

There is no onSubmit function defined in this file (note the lowercase onsubmit). When the form validates successfully, handleSubmit will invoke window.onsubmit (or undefined), so submitted form data is silently dropped. Define an onSubmit handler (mirroring app/(auth)/sign-up/page.tsx) and pass it here.

🐛 Suggested fix 
+    const onSubmit = async (data: SignInFormData) => {
+        try {
+            console.log(data)
+            // TODO: integrate sign-in (e.g., next-auth)
+        } catch (error) {
+            console.error('Error during sign in:', error)
+        }
+    };
+
     return (
         <>
             <h1 className="mt-12 lg:mt-24 mb-5 lg:mb-10 font-bold text-2xl">Welcome back</h1>

-            <form onSubmit={handleSubmit(onsubmit)} className="space-y-5">
+            <form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<form onSubmit={handleSubmit(onsubmit)} className="space-y-5">
const onSubmit = async (data: SignInFormData) => {
try {
console.log(data)
// TODO: integrate sign-in (e.g., next-auth)
} catch (error) {
console.error('Error during sign in:', error)
}
};
return (
<>
<h1 className="mt-12 lg:mt-24 mb-5 lg:mb-10 font-bold text-2xl">Welcome back</h1>
<form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@app/`(auth)/sign-in/page.tsx at line 29, The form currently passes a
lowercase handler name "onsubmit" which is undefined and falls back to
window.onsubmit; create a proper onSubmit handler (e.g., async function
onSubmit(data) { ... }) in this component and wire it into the form as
handleSubmit(onSubmit) — mirror the implementation pattern used in
app/(auth)/sign-up/page.tsx (define onSubmit, perform validation/submit logic,
call your auth/signIn function and handle errors) and ensure the function name
is exactly "onSubmit" (camelCase) when referenced in the JSX.

<InputField
name="email"
label="Email"
placeholder="contact@jsmastery.com"
register={register}
error={errors.email}
validation={{ required: 'Email is required', pattern: /^\w+@\w+\.\w+$/ }}

@coderabbitai coderabbitai Bot Apr 27, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Validation rules are missing message — error UI will render empty text.

InputField renders error.message, but pattern: /regex/ and minLength: 8 set as bare values produce a FieldError with no message. Use the object form so users see meaningful feedback. Also the email regex /^\w+@\w+\.\w+$/ is overly restrictive (rejects +, -, . in local part and many TLDs); consider aligning with the sign-up page's pattern.

🛠️ Suggested fix 
-                    validation={{ required: 'Email is required', pattern: /^\w+@\w+\.\w+$/ }}
+                    validation={{
+                        required: 'Email is required',
+                        pattern: { value: /^\S+@\S+\.\S+$/i, message: 'Invalid email address' },
+                    }}
...
-                    validation={{ required: 'Password is required', minLength: 8 }}
+                    validation={{
+                        required: 'Password is required',
+                        minLength: { value: 8, message: 'Password must be at least 8 characters' },
+                    }}

Also applies to: 46-46

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@app/`(auth)/sign-in/page.tsx at line 36, The InputField validation is passing
bare pattern and minLength values which produce FieldError objects without
messages, so the error UI shows empty text; update the validation props for the
email and password InputField usages to use the object form (e.g., pattern: {
value: /.../, message: '...' } and minLength: { value: 8, message: '...' }) and
replace the overly-restrictive email regex (/^\w+@\w+\.\w+$/) with the same
regex used on the sign-up page to allow +, -, . in the local part and broader
TLDs; ensure the error messages are clear (e.g., "Enter a valid email" and
"Password must be at least 8 characters") and modify the InputField validation
props accordingly.

/>

<InputField
name="password"
label="Password"
placeholder="Enter your password"
type="password"
register={register}
error={errors.password}
validation={{ required: 'Password is required', minLength: 8 }}
/>

<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="Create an account" href="/sign-up" />
</form>
</>
);
};
export default SignIn;
81 changes: 79 additions & 2 deletions app/(auth)/sign-up/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,85 @@
import React from 'react'
"use client"

import {CountrySelectField} from '@/components/forms/CountrySelectField'
import FooterLink from '@/components/forms/FooterLink'
import InputField from '@/components/forms/InputField'
import { Button } from '@/components/ui/button'
import { useForm } from 'react-hook-form'

const SignUpPage = () => {

const {
register,
handleSubmit,
control,
formState: { errors, isSubmitting },
} = useForm<SignUpFormData>({
defaultValues: {
fullName: '',
email: '',
password: '',
country: 'MW',
},
mode: 'onBlur'

})
Comment on lines +16 to +25

@coderabbitai coderabbitai Bot Apr 27, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

SignUpFormData declares fields the form never collects.

SignUpFormData includes investmentGoals, riskTolerance, and preferredIndustry, but no inputs are rendered for them and they are missing from defaultValues. Submitted data will have these as undefined, which will likely break any downstream consumer that expects a full SignUpFormData. Either narrow the form's type to the fields actually collected, or add the missing inputs.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@app/`(auth)/sign-up/page.tsx around lines 16 - 25, The form type
SignUpFormData currently declares investmentGoals, riskTolerance, and
preferredIndustry but the form (useForm defaultValues in your sign-up page)
neither renders inputs for them nor supplies defaults, causing undefined values
on submit; fix this by either (A) narrowing the form type to only the fields
actually collected (e.g., create a SignUpBasicData type and pass that to
useForm) and update any handlers that expect SignUpFormData, or (B) add the
missing inputs to the sign-up page and include matching keys in useForm
defaultValues (investmentGoals, riskTolerance, preferredIndustry) and ensure the
submit handler (the component using useForm) and any downstream consumers accept
the full SignUpFormData shape.

const onSubmit = async (data: SignUpFormData) => {
try {
console.log(data)
} catch (error) {
console.error('Error during sign up:', error)
}}
Comment on lines +26 to +31

@coderabbitai coderabbitai Bot Apr 27, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Avoid logging the full submitted payload (it contains the user's password).

console.log(data) includes the plaintext password from the form. Even in development this can leak into shared logs/screenshots. At minimum, omit password before logging, and replace this stub with the real auth integration before merging.

🛡️ Suggested fix 
-  const onSubmit = async (data: SignUpFormData) => {
-    try { 
-      console.log(data)
-  } catch (error) {
-    console.error('Error during sign up:', error)
-  }}
+  const onSubmit = async (data: SignUpFormData) => {
+    try {
+      const { password: _pw, ...safe } = data;
+      console.log('sign-up submission', safe);
+      // TODO: integrate sign-up call
+    } catch (error) {
+      console.error('Error during sign up:', error);
+    }
+  };
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const onSubmit = async (data: SignUpFormData) => {
try {
console.log(data)
} catch (error) {
console.error('Error during sign up:', error)
}}
const onSubmit = async (data: SignUpFormData) => {
try {
const { password: _pw, ...safe } = data;
console.log('sign-up submission', safe);
// TODO: integrate sign-up call
} catch (error) {
console.error('Error during sign up:', error);
}
};
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@app/`(auth)/sign-up/page.tsx around lines 26 - 31, The onSubmit handler
currently logs the entire SignUpFormData (console.log(data)) which exposes the
plaintext password; update the onSubmit function to stop logging full
payloads—either remove the console.log entirely or sanitize the object before
logging by omitting or redacting the password field (e.g., create a copy without
data.password) and then log non-sensitive fields only, and replace the stub with
the actual authentication call (invoke your auth/signup method and handle
success/error) in the onSubmit function to ensure no sensitive values are
written to logs.


return (
<div>SignUpPage</div>
<>
<h1 className='font-bold text-xl mb-4 mt-12 lg:mt-18'>Sign Up</h1>

<form onSubmit={handleSubmit(onSubmit)} className='space-y-5'>
{/* INPUT */}
<InputField
name = 'fullName'
label = 'Full Name'
placeholder ="Jon Doe"
register={register}
error={errors.fullName}
validation={{ required: 'Full name is required', minLength: 2 }}
/>

<InputField
name = 'email'
label = 'Email'
placeholder ="contact@dali.com"
register={register}
error={errors.email}
validation={{ required: 'Email is required', pattern: { value: /^\S+@\S+$/i, message: 'Invalid email address' } }}
/>

{/* */}
<CountrySelectField
name="country"
label="Country"
control={control}
error={errors.country}
required
/>

<InputField
name = 'password'
label = 'Password'
placeholder ="Enter a strong password"
register={register}
type='password'
error={errors.password}
validation={{ required: 'Password is required', minLength: 8 }}
/>

<Button type='submit' disabled={isSubmitting} className='yellow-btn w-full lg:mt-5'>
{isSubmitting ? 'Creating Your Account' : 'Start Your Journaling Today'}
</Button>

<FooterLink text='Already have an account?' linkText='Sign In' href='/sign-in' />
</form>
</>
)
}

Expand Down
18 changes: 16 additions & 2 deletions app/(root)/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,26 @@
import About from '@/components/About'
import ContactUs from '@/components/ContactUs'
import Home from '@/components/Home'
import React from 'react'

const HomePage = () => {
return (
<div className='text-white text-center'>
<div className='text-white sm:mx-16 sm:text-start text-center '>

{/* HOMEPAGE */}
<Home />
<section id='home'>
<Home />
</section>

{/* ABOUT PAGE */}
<section id='about'>
<About />
</section>

{/* CONTACT US */}
<section id='contact'>
<ContactUs />
</section>
</div>
)
}
Expand Down
26 changes: 24 additions & 2 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@
}

.dark {
--background: oklch(0.09693 0.00001 271.152);
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.205 0 0);
--card-foreground: oklch(0.985 0 0);
Expand Down Expand Up @@ -145,6 +145,28 @@
@apply bg-background text-foreground;
}
html {
@apply font-sans;
@apply font-sans;
scroll-behavior: smooth;
}
}

@layer components {
.card-hover {
transition: box-shadow 0.3s ease;
}

.card-hover:hover {
box-shadow: 0 0 30px rgba(253, 212, 88, 0.3);
}


}

@layer utilities {
.form-input {
@apply h-12 lg:w-[450px] px-2 py-2 text-white text-base placeholder:text-gray-500 border-gray-600 bg-gray-800 rounded-lg focus:!border-yellow-500 focus:ring-0;
}
Comment on lines +165 to +168

@coderabbitai coderabbitai Bot Apr 27, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

# First, check if the file exists and read the relevant lines
if [ -f "app/globals.css" ]; then
  echo "=== Lines 165-168 of app/globals.css ==="
  sed -n '165,168p' app/globals.css
  echo ""
  echo "=== Context around those lines (160-175) ==="
  sed -n '160,175p' app/globals.css
else
  echo "File app/globals.css not found"
  find . -name "globals.css" -type f
fi

Repository: Dali11/JournalFX

Length of output: 737

🏁 Script executed:

# Check Tailwind version in package.json
if [ -f "package.json" ]; then
  echo "=== Tailwind version from package.json ==="
  grep -A 2 -B 2 "tailwindcss" package.json
fi

Repository: Dali11/JournalFX

Length of output: 329

🏁 Script executed:

# Search for focus:! patterns in CSS files to see if this is a widespread issue
echo "=== Searching for focus:! patterns in CSS ==="
rg 'focus:!' --type css

Repository: Dali11/JournalFX

Length of output: 286

🌐 Web query:

Tailwind CSS v4 important modifier syntax ! placement

💡 Result:

In Tailwind CSS v4, the important modifier (!) is placed at the end of the utility class name, after any variants. For example, use bg-red-500! instead of the v3 prefix syntax !bg-red-500. With variants, it remains at the end: hover:bg-red-500!. The prefix syntax is deprecated but supported for backward compatibility. Tailwind's upgrade guide explicitly states this change, and official GitHub discussions from Tailwind team members (including collaborators) confirm the postfix syntax is the new standard for consistency, especially with variants like hover:!bg-red-500 becoming hover:bg-red-500!.

Citations:

🌐 Web query:

Tailwind CSS v4 backward compatibility deprecated prefix important modifier focus:!

💡 Result:

Tailwind CSS v4 introduces breaking changes to the prefix, important modifier, and related syntax like focus:!. Prefix: No longer a simple string prefix like "tw-" appended to classes (e.g., tw-bg-red-500). Now configured via @import "tailwindcss" prefix(tw); and acts as a required variant at the start of classes: tw:bg-red-500, tw:hover:bg-red-500. Prefix must be lowercase a-z letters only, no dashes or special chars. Order: prefix before other variants/modifiers. Important modifier: Syntax changed from prefix ! (e.g., !bg-red-500 in v3) to postfix ! (e.g., bg-red-500!). Consistent position at class end, even with variants: hover:bg-red-500!. Global !important via @import "tailwindcss" important; adds !important to all utilities. For selector scoping (old important: "#app"), nest manually: @layer utilities { #app { @tailwind utilities; } }. focus:! : Deprecated/changed. The !important modifier now uses postfix syntax, so focus:bg-red-500! instead of focus:!bg-red-500. Prefix + important + variants combine as tw:focus:bg-red-500!. No evidence of separate "focus:!" deprecation beyond modifier syntax shift; works via standard focus: variant with postfix !. Backward compatibility: v4 supports old tailwind.config.js prefix/important for legacy, but new CSS-first preferred. Use npx @tailwindcss/upgrade codemod to migrate classes/config. Not fully drop-in compatible with v3 syntax—requires updates, especially for prefixed/important classes.

Citations:

Tailwind v4 breaking change: ! important modifier must come at the end, not the start.

focus:!border-yellow-500 uses the v3 syntax which is incompatible with Tailwind v4. The important modifier was moved to the end of the utility, so this will not apply important and may fail to parse.

♻️ Proposed fix 
   .form-input {
-    `@apply` h-12 lg:w-[450px] px-2 py-2 text-white text-base placeholder:text-gray-500 border-gray-600 bg-gray-800 rounded-lg focus:!border-yellow-500 focus:ring-0;
+    `@apply` h-12 lg:w-[450px] px-2 py-2 text-white text-base placeholder:text-gray-500 border-gray-600 bg-gray-800 rounded-lg focus:border-yellow-500! focus:ring-0;
   }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
@layer utilities {
.form-input {
@apply h-12 lg:w-[450px] px-2 py-2 text-white text-base placeholder:text-gray-500 border-gray-600 bg-gray-800 rounded-lg focus:!border-yellow-500 focus:ring-0;
}
`@layer` utilities {
.form-input {
`@apply` h-12 lg:w-[450px] px-2 py-2 text-white text-base placeholder:text-gray-500 border-gray-600 bg-gray-800 rounded-lg focus:border-yellow-500! focus:ring-0;
}
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@app/globals.css` around lines 165 - 168, The Tailwind v4 change requires the
important modifier at the end of the utility, so update the .form-input class
string to move the "!" after the utility; replace the current
focus:!border-yellow-500 with focus:border-yellow-500! inside the `@apply` list
(in the .form-input rule) so the focus border utility is applied with importance
under the focus variant.

.yellow-btn {
@apply inline-flex bg-yellow-500 text-gray-900 font-medium px-8 py-5 rounded-lg cursor-pointer hover:bg-yellow-600 transition-colors duration-300 ;
}
}
2 changes: 1 addition & 1 deletion app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export default function RootLayout({
children : React.ReactNode
}) {
return (
<html lang="en" className={cn("font-sans dark", geist.variable)}>
<html lang="en" className={cn("font-sans dark", "font-sans", geist.variable)}>
<body>

{children}
Expand Down
31 changes: 31 additions & 0 deletions components/About.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import { HOME_CARDS } from "@/lib/constants"
import Image from 'next/image'

const About = () => {
return (
<main className="sm:mt-24 mt-12 mx-2 lg:mx-0">
<section className="flex flex-col gap-2">
<h1 className="text-4xl font-bold text-center">Everything You Need to Trade Smarter</h1>
<p className="text-center text-gray-500">Our comprehensive trading journal gives you all the tools to improve your trading results</p>
</section>

{/* CARDS */}

<section className="mt-8">
<ul className="flex flex-col sm:flex-row gap-2 lg:gap-4">
{HOME_CARDS.map(({image, title, text}) => (
<li key={title} className="card-hover flex flex-col gap-3 bg-gray-700 border border-gray-600 text-white p-4 lg:p-6 rounded-xl cursor-poiter shadow-lg shadow-black/50 flex-1">
<div className="bg-yellow-600 p-2 rounded-lg w-fit">
<Image src={image} alt={title} width={28} height={28} />
</div>
<h2 className="font-bold text-lg text-white min-h-[56px]">{title}</h2>
<p className="text-gray-400 text-sm leading-relaxed pb-4">{text}</p>
</li>
))}
</ul>
</section>
</main>
)
}

export default About
27 changes: 27 additions & 0 deletions components/ContactUs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { ArrowRight } from "lucide-react"
import Link from "next/link"


const ContactUs = () => {
return (
<div className=" flex flex-col justify-center items-center gap-10 text-white mx-2 lg:mx-0 mt-8 sm:mt-24 text-center">
<div className="content">
<h1 className="font-bold text-4xl">Start Journaling Your Trade Today</h1>
<p className="text-center mt-3 text-gray-500 sm:w-150">Join thousands of trades who are already improving their results with JournalFX. Create your free account and take controlof your tradiing journey.</p>
</div>

<div className="mb-10">
<Link href="/sign-in" className='group flex justify-center bg-yellow-500 font-bold text-black p-2 px-10 sm:px-10 rounded-md cursor-pointer'>
Create Free Account
<ArrowRight className="ml-1 transition-transform duration-300 group-hover:translate-x-1"/>
</Link>

<p className="text-gray-500 text-sm mt-2">
No credit card required. Free forever for basic features.
</p>
</div>
</div>
)
}

export default ContactUs
30 changes: 13 additions & 17 deletions components/Home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,30 @@
import { ArrowBigRight, ArrowRight } from 'lucide-react'
import { ArrowRight } from 'lucide-react'
import Image from 'next/image'
import Link from 'next/link'
import React from 'react'

const Home = () => {
return (
<main className='mt-8 lg:mt-24'>
<main className='mt-8 lg:mt-16 flex flex-col sm:flex-row sm:gap-14'>
{/* HERO SECTION */}
<section className='flex flex-col justify-between gap-6 box-border'>
<h1 className='text-5xl font-md lg:font-bold'>Track Your Trades. <span className='text-yellow-500'>Master Your Discipline</span></h1>
<p className='text-gray-500'>A Powerful trading journal to analyze performance, eliminate mistakes, and grow consistency</p>
<section className='flex flex-col gap-8 box-border'>
<h1 className='text-5xl font-medium lg:font-bold'>Track Your Trades. <span className='text-yellow-500'>Master Your Discipline</span></h1>
<p className='text-gray-500 text-center'>A powerful trading journal to analyze performance, eliminate mistakes, and build consistency</p>

<div className="sm:mt-7 flex flex-col lg:flex-row sm:flex-row gap-4 justify-center sm:items-center mx-6">
<div className="flex flex-col sm:flex-row gap-2 sm:mt-10 mx-4">

<Link href="/sign-in" className='flex justify-center bg-white font-bold text-black p-2 px-10 sm:px-20 rounded-md cursor-pointer hover:bg-yellow-400'>
<Link href="/sign-in" className='flex justify-center bg-white font-bold text-black p-2 px-10 sm:px-10 rounded-md cursor-pointer hover:bg-yellow-400'>
Get Started
<ArrowRight />
</Link>
<Link href="/about" className='border-3 border-slate-400 hover:border-yellow-400 hover:text-black p-2 py-[6px] px-10 sm:px-20 rounded-md cursor-pointer hover:bg-yellow-400'>Learn More</Link>
</div>

<div className="relative w-full h-[300px] lg:h-[600px] sm:mt-8 z-[-1]">
<Image
src="/asset/icons/home-render.png"
alt='home-image'
fill
className="object-contain"
/>
<Link href="/about" className='border-2 border-slate-400 hover:border-yellow-400 hover:text-black p-2 py-[6px] px-10 sm:px-10 rounded-md cursor-pointer hover:bg-yellow-400'>Learn More</Link>
</div>

</section>

<div className="mt-8 sm:mt-0">
<Image src="/asset/images/home-holder.png" alt='home-image' width={900} height={150}/>
</div>
</main>
)
}
Expand Down
Loading