Complete homepage overhaul with parallax and auth modal
This commit is contained in:
AI Bot
@@ -1,124 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useSearchParams, useNavigate, useLocation, Link } from 'react-router-dom';
|
||||
import { api } from '../lib/api';
|
||||
import { useAuthStore } from '../store/authStore';
|
||||
import { Box, Mail, Lock, Loader2 } from 'lucide-react';
|
||||
|
||||
export default function Auth() {
|
||||
const [searchParams] = useSearchParams();
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const { setSession } = useAuthStore();
|
||||
|
||||
const isRegister = searchParams.get('mode') === 'register';
|
||||
const from = location.state?.from?.pathname || '/dashboard';
|
||||
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
const [success, setSuccess] = useState('');
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError('');
|
||||
setSuccess('');
|
||||
|
||||
try {
|
||||
if (isRegister) {
|
||||
const res = await api.register(email, password);
|
||||
if (res.status === 'pending') {
|
||||
setSuccess(res.message || 'Account created successfully! Please contact an admin to activate your account.');
|
||||
setEmail('');
|
||||
setPassword('');
|
||||
} else {
|
||||
setSession(res.token, res.profile);
|
||||
navigate(from, { replace: true });
|
||||
}
|
||||
} else {
|
||||
const { token, profile } = await api.login(email, password);
|
||||
setSession(token, profile);
|
||||
navigate(from, { replace: true });
|
||||
}
|
||||
} catch (err: any) {
|
||||
setError(err.message || 'An error occurred during authentication.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-zinc-950 flex items-center justify-center p-4">
|
||||
<div className="w-full max-w-md bg-zinc-900 border border-zinc-800 rounded-2xl p-8 shadow-2xl">
|
||||
<div className="flex justify-center mb-8">
|
||||
<div className="w-12 h-12 rounded-xl bg-primary/20 flex items-center justify-center">
|
||||
<Box size={24} className="text-primary" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 className="text-2xl font-bold text-white text-center mb-2">
|
||||
{isRegister ? 'Create an Account' : 'Welcome Back'}
|
||||
</h2>
|
||||
<p className="text-zinc-400 text-sm text-center mb-8">
|
||||
{isRegister ? 'Sign up to start building 3D scenes.' : 'Sign in to access your projects.'}
|
||||
</p>
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-500/10 border border-red-500/20 text-red-400 p-3 rounded-lg text-sm mb-6 text-center">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{success && (
|
||||
<div className="bg-green-500/10 border border-green-500/20 text-green-400 p-3 rounded-lg text-sm mb-6 text-center">
|
||||
{success}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} className="flex flex-col gap-4">
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-500" size={18} />
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Email address"
|
||||
required
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="w-full bg-zinc-950 border border-zinc-800 rounded-xl py-3 pl-10 pr-4 text-white focus:outline-none focus:border-primary transition-colors"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-500" size={18} />
|
||||
<input
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
required
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="w-full bg-zinc-950 border border-zinc-800 rounded-xl py-3 pl-10 pr-4 text-white focus:outline-none focus:border-primary transition-colors"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="w-full bg-primary hover:bg-primary/90 text-white font-bold py-3 rounded-xl mt-2 transition-all flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{loading && <Loader2 size={18} className="animate-spin" />}
|
||||
{isRegister ? 'Sign Up' : 'Sign In'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="mt-8 text-center text-sm text-zinc-500">
|
||||
{isRegister ? (
|
||||
<p>Already have an account? <Link to="/auth" className="text-primary hover:underline">Sign in</Link></p>
|
||||
) : (
|
||||
<p>Don't have an account? <Link to="/auth?mode=register" className="text-primary hover:underline">Sign up</Link></p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+14
-39
@@ -1,45 +1,20 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useAuthStore } from '../store/authStore';
|
||||
import { Box } from 'lucide-react';
|
||||
import { Canvas } from '@react-three/fiber';
|
||||
import { ScrollControls } from '@react-three/drei';
|
||||
import { Scene } from '../components/home/Scene';
|
||||
import { Overlay } from '../components/home/Overlay';
|
||||
import { Suspense } from 'react';
|
||||
|
||||
export default function Home() {
|
||||
const { user } = useAuthStore();
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-zinc-950 text-white flex flex-col items-center justify-center p-4">
|
||||
<div className="w-16 h-16 rounded-2xl bg-primary/20 flex items-center justify-center mb-8 shadow-[0_0_50px_rgba(var(--primary-rgb),0.3)]">
|
||||
<Box size={32} className="text-primary" />
|
||||
</div>
|
||||
<h1 className="text-5xl font-bold tracking-tight mb-4 text-center">
|
||||
Welcome to Titan<span className="text-primary">3d</span>
|
||||
</h1>
|
||||
<p className="text-zinc-400 text-lg mb-10 max-w-lg text-center">
|
||||
The ultimate cloud-based 3D product configurator. Build, edit, and visualize 3D assets entirely in your browser with the power of AI.
|
||||
</p>
|
||||
|
||||
{user ? (
|
||||
<Link
|
||||
to="/dashboard"
|
||||
className="px-8 py-3 bg-primary hover:bg-primary/90 text-white font-semibold rounded-xl transition-all shadow-lg"
|
||||
>
|
||||
Go to Dashboard
|
||||
</Link>
|
||||
) : (
|
||||
<div className="flex gap-4">
|
||||
<Link
|
||||
to="/auth"
|
||||
className="px-8 py-3 bg-primary hover:bg-primary/90 text-white font-semibold rounded-xl transition-all shadow-lg"
|
||||
>
|
||||
Sign In
|
||||
</Link>
|
||||
<Link
|
||||
to="/auth?mode=register"
|
||||
className="px-8 py-3 bg-zinc-800 hover:bg-zinc-700 text-white font-semibold rounded-xl transition-all border border-zinc-700"
|
||||
>
|
||||
Create Account
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
<div className="w-screen h-screen bg-zinc-950 overflow-hidden">
|
||||
<Canvas shadows camera={{ position: [0, 0, 10], fov: 45 }}>
|
||||
<Suspense fallback={null}>
|
||||
<ScrollControls pages={3} damping={0.2}>
|
||||
<Scene />
|
||||
<Overlay />
|
||||
</ScrollControls>
|
||||
</Suspense>
|
||||
</Canvas>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user