Skip to content

Commit bd56e4d

Browse files
Dilusha-RanasinghaDilusha-Ranasingha
committed
feat: enhance Home page layout and add navigation links; update input text color in Login and Register forms for better visibility
update the home page fix the type text colour login & signup
1 parent d909288 commit bd56e4d

3 files changed

Lines changed: 87 additions & 20 deletions

File tree

‎src/pages/Home.jsx‎

Lines changed: 82 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
import React from 'react';
2-
import Header from '../components/Header';
3-
import Footer from '../components/Footer';
4-
import Star from '../components/Star'; // adjust path if needed
1+
"use client"
2+
3+
import Header from "../components/Header"
4+
import Footer from "../components/Footer"
5+
import { Link } from "react-router-dom"
6+
import Star from "../components/Star"
57

68
const Home = () => {
79
return (
@@ -13,19 +15,84 @@ const Home = () => {
1315
<Header showAuthButtons={true} />
1416

1517
<div className="max-w-7xl mx-auto px-4 min-h-screen sm:px-6 lg:px-8 py-16 relative z-10">
16-
<div className="text-center">
17-
<h1 className="text-4xl font-bold text-white mb-4">
18-
Take Control of Your Finances
19-
</h1>
20-
<p className="text-xl text-white mb-8">
21-
Track your income and expenses efficiently with our simple budget tracker.
22-
</p>
23-
</div>
18+
19+
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
20+
<div className="text-center">
21+
<h1 className="text-5xl font-bold text-white mb-6">Take Control of Your Finances</h1>
22+
<p className="text-xl text-white mb-12 max-w-3xl mx-auto">
23+
Track your income and expenses efficiently with our simple budget tracker. Get insights into your spending
24+
habits and make better financial decisions.
25+
</p>
26+
27+
<div className="flex flex-col sm:flex-row gap-4 justify-center">
28+
<Link
29+
to="/register"
30+
className="bg-blue-600 text-white px-8 py-4 rounded-lg text-lg font-medium hover:bg-blue-700 transition duration-200 shadow-lg"
31+
>
32+
Get Started Free
33+
</Link>
34+
<Link
35+
to="/login"
36+
className="bg-white text-blue-600 px-8 py-4 rounded-lg text-lg font-medium hover:bg-gray-50 transition duration-200 shadow-lg border border-blue-200"
37+
>
38+
Sign In
39+
</Link>
40+
</div>
41+
</div>
42+
43+
{/* Features Section */}
44+
<div className="mt-20 grid grid-cols-1 md:grid-cols-3 gap-8">
45+
<div className="backdrop-blur-lg bg-white/20 border border-white/30 shadow-xl p-8 rounded-xl text-center glass-card">
46+
<div className="w-16 h-16 bg-green-100/60 rounded-full flex items-center justify-center mx-auto mb-4">
47+
<svg className="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
48+
<path
49+
strokeLinecap="round"
50+
strokeLinejoin="round"
51+
strokeWidth={2}
52+
d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"
53+
/>
54+
</svg>
55+
</div>
56+
<h3 className="text-xl font-semibold text-white mb-2">Track Income</h3>
57+
<p className="text-gray-200">Monitor all your income sources and see your earning patterns over time.</p>
58+
</div>
59+
60+
<div className="backdrop-blur-lg bg-white/20 border border-white/30 shadow-xl p-8 rounded-xl text-center glass-card">
61+
<div className="w-16 h-16 bg-red-100/60 rounded-full flex items-center justify-center mx-auto mb-4">
62+
<svg className="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
63+
<path
64+
strokeLinecap="round"
65+
strokeLinejoin="round"
66+
strokeWidth={2}
67+
d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"
68+
/>
69+
</svg>
70+
</div>
71+
<h3 className="text-xl font-semibold text-white mb-2">Manage Expenses</h3>
72+
<p className="text-gray-200">Keep track of all your expenses and categorize them for better insights.</p>
73+
</div>
74+
75+
<div className="backdrop-blur-lg bg-white/20 border border-white/30 shadow-xl p-8 rounded-xl text-center glass-card">
76+
<div className="w-16 h-16 bg-blue-100/60 rounded-full flex items-center justify-center mx-auto mb-4">
77+
<svg className="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
78+
<path
79+
strokeLinecap="round"
80+
strokeLinejoin="round"
81+
strokeWidth={2}
82+
d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
83+
/>
84+
</svg>
85+
</div>
86+
<h3 className="text-xl font-semibold text-white mb-2">View Reports</h3>
87+
<p className="text-gray-200">Get detailed reports and analytics about your financial habits.</p>
88+
</div>
89+
</div>
90+
</main>
2491
</div>
2592

2693
<Footer />
2794
</div>
28-
);
29-
};
95+
)
96+
}
3097

31-
export default Home;
98+
export default Home

‎src/pages/Login.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ const Login = () => {
6868
value={formData.email}
6969
onChange={handleChange}
7070
required
71-
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200"
71+
className="w-full text-black px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200"
7272
placeholder="Enter your email"
7373
/>
7474
</div>
@@ -84,7 +84,7 @@ const Login = () => {
8484
value={formData.password}
8585
onChange={handleChange}
8686
required
87-
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200"
87+
className="w-full text-black px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200"
8888
placeholder="Enter your password"
8989
/>
9090
</div>

‎src/pages/Register.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ const Register = () => {
6767
value={formData.name}
6868
onChange={handleChange}
6969
required
70-
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200"
70+
className="w-full text-black px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200"
7171
placeholder="Enter your full name"
7272
/>
7373
</div>
@@ -83,7 +83,7 @@ const Register = () => {
8383
value={formData.email}
8484
onChange={handleChange}
8585
required
86-
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200"
86+
className="w-full text-black px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200"
8787
placeholder="Enter your email"
8888
/>
8989
</div>
@@ -99,7 +99,7 @@ const Register = () => {
9999
value={formData.password}
100100
onChange={handleChange}
101101
required
102-
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200"
102+
className="w-full text-black px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200"
103103
placeholder="Create a password"
104104
/>
105105
</div>

0 commit comments

Comments
 (0)