Skip to content

Commit bd0aa11

Browse files
harrisj4harrisj4
committed
Updated frontend with new homepage, signup, signin and userdashboard
1 parent 3ea0ff4 commit bd0aa11

File tree

7 files changed

+569
-315
lines changed

7 files changed

+569
-315
lines changed

‎app/auth/signin/page.tsx‎

Lines changed: 68 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,9 @@
33
import { useState } from 'react';
44
import { useRouter } from 'next/navigation';
55
import { useAuth } from '@/contexts';
6-
import { Button, Input, Card, CardHeader, CardContent, CardTitle } from '@/components/ui';
7-
import { Alert } from '@/components/ui/Alert';
86
import Link from 'next/link';
97

8+
109
export default function SignIn() {
1110
const [email, setEmail] = useState('');
1211
const [password, setPassword] = useState('');
@@ -31,93 +30,79 @@ export default function SignIn() {
3130
};
3231

3332
return (
34-
<div className="min-h-screen bg-[#0b1016] flex items-center justify-center px-4">
35-
<div className="w-full max-w-md">
36-
<Card className="bg-[#111827]/90 border border-[#1f2937] text-slate-100 shadow-xl backdrop-blur">
37-
<CardHeader className="pb-3">
38-
<CardTitle className="text-lg font-semibold tracking-tight text-slate-100 text-center">
39-
Sign In
40-
</CardTitle>
41-
<p className="text-xs text-slate-400 tracking-wide uppercase text-center">
42-
Welcome back to FlowBuildr
33+
<div className="min-h-screen bg-[#030712] text-white selection:bg-blue-500/30 font-sans">
34+
35+
36+
<div className="min-h-screen flex items-center justify-center relative overflow-hidden">
37+
38+
39+
<div className="absolute top-0 left-1/2 w-full -translate-x-1/2 h-full z-0 pointer-events-none">
40+
<div className="absolute top-1/4 left-10 w-[500px] h-[500px] bg-blue-600/10 rounded-full blur-[120px] opacity-50"></div>
41+
<div className="absolute bottom-1/4 right-10 w-[600px] h-[600px] bg-indigo-600/10 rounded-full blur-[120px] opacity-50"></div>
42+
</div>
43+
44+
<div className="w-full max-w-md p-8 bg-[#0b1120]/80 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl relative z-10 mx-4">
45+
<div className="text-center mb-8">
46+
<h2 className="text-3xl font-bold text-white mb-2 tracking-tight">Welcome Back</h2>
47+
<p className="text-gray-400 text-sm">
48+
Enter your credentials to access your workspace.
4349
</p>
44-
</CardHeader>
50+
</div>
4551

46-
<CardContent className="pt-2">
47-
{localError && (
48-
<div className="mb-4">
49-
<Alert variant="error" message={localError} />
50-
</div>
51-
)}
52+
{localError && (
53+
<div className="mb-6 p-4 rounded-lg bg-red-500/10 border border-red-500/20 text-red-400 text-sm text-center">
54+
{localError}
55+
</div>
56+
)}
5257

53-
<form onSubmit={handleSignIn} className="space-y-4 text-white">
54-
{/* Email */}
55-
<div className="space-y-1">
56-
<label
57-
htmlFor="email"
58-
className="block text-sm font-medium text-slate-100"
59-
>
60-
Email
61-
</label>
62-
<Input
63-
id="email"
64-
type="email"
65-
value={email}
66-
onChange={(e) => setEmail(e.target.value)}
67-
placeholder="[email protected]"
68-
required
69-
/>
70-
</div>
58+
<form onSubmit={handleSignIn} className="space-y-5">
59+
<div>
60+
<label className="block text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">Email Address</label>
61+
<input
62+
type="email"
63+
value={email}
64+
onChange={(e) => setEmail(e.target.value)}
65+
placeholder="[email protected]"
66+
className="w-full bg-[#030712] border border-gray-800 focus:border-blue-500 rounded-lg px-4 py-3 text-white placeholder-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500 transition-all"
67+
required
68+
/>
69+
</div>
7170

72-
{/* Password */}
73-
<div className="space-y-1">
74-
<label
75-
htmlFor="password"
76-
className="block text-sm font-medium text-slate-100"
77-
>
78-
Password
79-
</label>
80-
<Input
81-
id="password"
82-
type="password"
83-
value={password}
84-
onChange={(e) => setPassword(e.target.value)}
85-
placeholder="••••••••"
86-
required
87-
/>
88-
</div>
71+
<div>
72+
<label className="block text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">Password</label>
73+
<input
74+
type="password"
75+
value={password}
76+
onChange={(e) => setPassword(e.target.value)}
77+
placeholder="••••••••"
78+
className="w-full bg-[#030712] border border-gray-800 focus:border-blue-500 rounded-lg px-4 py-3 text-white placeholder-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500 transition-all"
79+
required
80+
/>
81+
</div>
8982

90-
<Button
91-
type="submit"
92-
variant="primary"
93-
className="w-full !bg-[#297fd7] !hover:bg-[#2f8af0] !border-0"
94-
isLoading={isLoading}
95-
>
96-
Sign In
97-
</Button>
98-
</form>
83+
<button
84+
type="submit"
85+
disabled={isLoading}
86+
className="w-full px-6 py-3.5 rounded-lg font-bold text-white bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 transition-all shadow-lg shadow-blue-500/20 mt-2 disabled:opacity-50 disabled:cursor-not-allowed"
87+
>
88+
{isLoading ? 'Signing In...' : 'Sign In'}
89+
</button>
90+
</form>
9991

100-
<p className="mt-6 text-center text-sm text-slate-400">
101-
Don&apos;t have an account?{' '}
102-
<Link
103-
href="/auth/signup"
104-
className="text-[#4fa2ff] hover:text-[#76b7ff] font-medium"
105-
>
106-
Sign Up
107-
</Link>
108-
</p>
109-
110-
<p className="mt-3 text-center">
111-
<Link
112-
href="/"
113-
className="text-xs text-slate-500 hover:text-slate-300"
114-
>
115-
← Back to home
116-
</Link>
117-
</p>
118-
</CardContent>
119-
</Card>
92+
<div className="mt-8 text-center text-sm text-gray-400">
93+
Don't have an account?{' '}
94+
<Link href="/auth/signup" className="text-blue-400 hover:text-blue-300 font-medium transition-colors">
95+
Sign Up
96+
</Link>
97+
</div>
98+
99+
<div className="mt-4 text-center">
100+
<Link href="/" className="text-xs text-gray-500 hover:text-white transition-colors">
101+
← Back to home
102+
</Link>
103+
</div>
104+
</div>
120105
</div>
121106
</div>
122107
);
123-
}
108+
}

‎app/auth/signup/page.tsx‎

Lines changed: 80 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,7 @@
33
import { useState } from 'react';
44
import { useRouter } from 'next/navigation';
55
import { useAuth } from '@/contexts';
6-
import { Button, Input, Card, CardHeader, CardContent, CardTitle } from '@/components/ui';
7-
import { Alert } from '@/components/ui/Alert';
86
import Link from 'next/link';
9-
import Image from 'next/image';
107

118
export default function SignUp() {
129
const [email, setEmail] = useState('');
@@ -50,120 +47,95 @@ export default function SignUp() {
5047
};
5148

5249
return (
53-
<div className="min-h-screen bg-[#0b1016] flex items-center justify-center px-4">
54-
<div className="w-full max-w-md">
55-
<Card className="bg-[#111827]/90 border border-[#1f2937] text-slate-100 shadow-xl backdrop-blur">
56-
<CardHeader className="pb-3">
57-
<CardTitle className="text-lg font-semibold tracking-tight text-slate-100 text-center">
58-
Create your FlowBuildr account
59-
</CardTitle>
60-
<p className="text-xs text-slate-400 tracking-wide uppercase text-center">
50+
<div className="min-h-screen bg-[#030712] text-white selection:bg-blue-500/30 font-sans">
51+
<div className="min-h-screen flex items-center justify-center relative overflow-hidden">
52+
53+
{/* Background Gradients */}
54+
<div className="absolute top-0 left-1/2 w-full -translate-x-1/2 h-full z-0 pointer-events-none">
55+
<div className="absolute top-1/4 right-10 w-[500px] h-[500px] bg-blue-600/10 rounded-full blur-[120px] opacity-50"></div>
56+
<div className="absolute bottom-1/4 left-10 w-[600px] h-[600px] bg-indigo-600/10 rounded-full blur-[120px] opacity-50"></div>
57+
</div>
58+
59+
<div className="w-full max-w-md p-8 bg-[#0b1120]/80 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl relative z-10 mx-4">
60+
<div className="text-center mb-8">
61+
<h2 className="text-3xl font-bold text-white mb-2 tracking-tight">Create Your FlowBuildr Account</h2>
62+
<p className="text-gray-400 text-sm">
6163
Takeoffs powered by FlowBuildr
6264
</p>
63-
</CardHeader>
64-
65-
<CardContent className="pt-2">
66-
{localError && (
67-
<div className="mb-4">
68-
<Alert variant="error" message={localError} />
69-
</div>
70-
)}
65+
</div>
7166

72-
{success && (
73-
<div className="mb-4">
74-
<Alert
75-
variant="success"
76-
message="Account created successfully! Redirecting..."
77-
/>
78-
</div>
79-
)}
67+
{localError && (
68+
<div className="mb-6 p-4 rounded-lg bg-red-500/10 border border-red-500/20 text-red-400 text-sm text-center">
69+
{localError}
70+
</div>
71+
)}
8072

81-
<form onSubmit={handleSignUp} className="space-y-4 text-white">
82-
{/* Email */}
83-
<div className="space-y-1">
84-
<label
85-
htmlFor="email"
86-
className="block text-sm font-medium text-slate-100"
87-
>
88-
Email
89-
</label>
90-
<Input
91-
id="email"
92-
type="email"
93-
value={email}
94-
onChange={(e) => setEmail(e.target.value)}
95-
placeholder="[email protected]"
96-
required
97-
/>
98-
</div>
73+
{success && (
74+
<div className="mb-6 p-4 rounded-lg bg-green-500/10 border border-green-500/20 text-green-400 text-sm text-center">
75+
Account created successfully! Redirecting...
76+
</div>
77+
)}
9978

100-
{/* Password */}
101-
<div className="space-y-1">
102-
<label
103-
htmlFor="password"
104-
className="block text-sm font-medium text-slate-100"
105-
>
106-
Password
107-
</label>
108-
<Input
109-
id="password"
110-
type="password"
111-
value={password}
112-
onChange={(e) => setPassword(e.target.value)}
113-
placeholder="••••••••"
114-
required
115-
/>
116-
</div>
79+
<form onSubmit={handleSignUp} className="space-y-5">
80+
<div>
81+
<label className="block text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">Email Address</label>
82+
<input
83+
type="email"
84+
value={email}
85+
onChange={(e) => setEmail(e.target.value)}
86+
placeholder="[email protected]"
87+
className="w-full bg-[#030712] border border-gray-800 focus:border-blue-500 rounded-lg px-4 py-3 text-white placeholder-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500 transition-all"
88+
required
89+
/>
90+
</div>
11791

118-
{/* Confirm Password */}
119-
<div className="space-y-1">
120-
<label
121-
htmlFor="confirmPassword"
122-
className="block text-sm font-medium text-slate-100"
123-
>
124-
Confirm Password
125-
</label>
126-
<Input
127-
id="confirmPassword"
128-
type="password"
129-
value={confirmPassword}
130-
onChange={(e) => setConfirmPassword(e.target.value)}
131-
placeholder="••••••••"
132-
required
133-
/>
134-
</div>
92+
<div>
93+
<label className="block text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">Password</label>
94+
<input
95+
type="password"
96+
value={password}
97+
onChange={(e) => setPassword(e.target.value)}
98+
placeholder="••••••••"
99+
className="w-full bg-[#030712] border border-gray-800 focus:border-blue-500 rounded-lg px-4 py-3 text-white placeholder-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500 transition-all"
100+
required
101+
/>
102+
</div>
135103

136-
<Button
137-
type="submit"
138-
variant="primary"
139-
className="w-full !bg-[#297fd7] !hover:bg-[#2f8af0] !border-0"
140-
isLoading={isLoading}
141-
>
142-
Sign Up
143-
</Button>
144-
</form>
104+
<div>
105+
<label className="block text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">Confirm Password</label>
106+
<input
107+
type="password"
108+
value={confirmPassword}
109+
onChange={(e) => setConfirmPassword(e.target.value)}
110+
placeholder="••••••••"
111+
className="w-full bg-[#030712] border border-gray-800 focus:border-blue-500 rounded-lg px-4 py-3 text-white placeholder-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500 transition-all"
112+
required
113+
/>
114+
</div>
145115

146-
<p className="mt-6 text-center text-sm text-slate-400">
147-
Already have an account?{' '}
148-
<Link
149-
href="/auth/signin"
150-
className="text-[#4fa2ff] hover:text-[#76b7ff] font-medium"
151-
>
152-
Sign In
153-
</Link>
154-
</p>
116+
<button
117+
type="submit"
118+
disabled={isLoading}
119+
className="w-full px-6 py-3.5 rounded-lg font-bold text-white bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 transition-all shadow-lg shadow-blue-500/20 mt-2 disabled:opacity-50 disabled:cursor-not-allowed"
120+
>
121+
{isLoading ? 'Creating Account...' : 'Sign Up'}
122+
</button>
123+
</form>
155124

156-
<p className="mt-3 text-center">
157-
<Link
158-
href="/"
159-
className="text-xs text-slate-500 hover:text-slate-300"
160-
>
161-
← Back to home
162-
</Link>
163-
</p>
164-
</CardContent>
165-
</Card>
125+
<div className="mt-8 text-center text-sm text-gray-400">
126+
Already have an account?{' '}
127+
<Link href="/auth/signin" className="text-blue-400 hover:text-blue-300 font-medium transition-colors">
128+
Sign In
129+
</Link>
130+
</div>
131+
132+
<div className="mt-4 text-center">
133+
<Link href="/" className="text-xs text-gray-500 hover:text-white transition-colors">
134+
← Back to home
135+
</Link>
136+
</div>
137+
</div>
166138
</div>
167139
</div>
168140
);
169-
}
141+
}

0 commit comments

Comments
 (0)