Complete homepage overhaul with parallax and auth modal
This commit is contained in:
AI Bot
Binary file not shown.
|
After Width: | Height: | Size: 642 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 773 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 935 KiB |
+2
-2
@@ -6,9 +6,9 @@ import { ProtectedRoute } from './components/ProtectedRoute';
|
||||
// Pages
|
||||
import Editor from './pages/Editor';
|
||||
import Home from './pages/Home';
|
||||
import Auth from './pages/Auth';
|
||||
import Dashboard from './pages/Dashboard';
|
||||
import Admin from './pages/Admin';
|
||||
import { AuthModal } from './components/AuthModal';
|
||||
|
||||
export default function App() {
|
||||
const { initialize, isLoading } = useAuthStore();
|
||||
@@ -27,10 +27,10 @@ export default function App() {
|
||||
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<AuthModal />
|
||||
<Routes>
|
||||
{/* Public Routes */}
|
||||
<Route path="/" element={<Home />} />
|
||||
<Route path="/auth" element={<Auth />} />
|
||||
|
||||
{/* Protected Routes (User) */}
|
||||
<Route element={<ProtectedRoute allowedRoles={['user', 'admin']} />}>
|
||||
|
||||
@@ -0,0 +1,152 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useNavigate, useLocation } from 'react-router-dom';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { api } from '../lib/api';
|
||||
import { useAuthStore } from '../store/authStore';
|
||||
import { Box, Mail, Lock, Loader2, X } from 'lucide-react';
|
||||
|
||||
export function AuthModal() {
|
||||
const { isAuthModalOpen, closeAuthModal, authMode, openAuthModal, setSession } = useAuthStore();
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
|
||||
const isRegister = authMode === '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);
|
||||
closeAuthModal();
|
||||
navigate(from, { replace: true });
|
||||
}
|
||||
} else {
|
||||
const { token, profile } = await api.login(email, password);
|
||||
setSession(token, profile);
|
||||
closeAuthModal();
|
||||
navigate(from, { replace: true });
|
||||
}
|
||||
} catch (err: any) {
|
||||
setError(err.message || 'An error occurred during authentication.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{isAuthModalOpen && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
onClick={closeAuthModal}
|
||||
className="absolute inset-0 bg-black/60 backdrop-blur-sm"
|
||||
/>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95, y: 20 }}
|
||||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||||
exit={{ opacity: 0, scale: 0.95, y: 20 }}
|
||||
className="relative w-full max-w-md bg-zinc-900/90 backdrop-blur-xl border border-zinc-700/50 rounded-3xl p-8 shadow-2xl overflow-hidden"
|
||||
>
|
||||
{/* Glowing orb background effect */}
|
||||
<div className="absolute -top-32 -right-32 w-64 h-64 bg-primary/20 rounded-full blur-3xl pointer-events-none" />
|
||||
|
||||
<button
|
||||
onClick={closeAuthModal}
|
||||
className="absolute top-4 right-4 text-zinc-400 hover:text-white transition-colors"
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
|
||||
<div className="flex justify-center mb-8 relative z-10">
|
||||
<div className="w-12 h-12 rounded-xl bg-primary/20 flex items-center justify-center shadow-[0_0_20px_rgba(var(--primary-rgb),0.3)]">
|
||||
<Box size={24} className="text-primary" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 className="text-2xl font-bold text-white text-center mb-2 relative z-10">
|
||||
{isRegister ? 'Create an Account' : 'Welcome Back'}
|
||||
</h2>
|
||||
<p className="text-zinc-400 text-sm text-center mb-8 relative z-10">
|
||||
{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-xl text-sm mb-6 text-center relative z-10">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{success && (
|
||||
<div className="bg-green-500/10 border border-green-500/20 text-green-400 p-3 rounded-xl text-sm mb-6 text-center relative z-10">
|
||||
{success}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} className="flex flex-col gap-4 relative z-10">
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400" size={18} />
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Email address"
|
||||
required
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="w-full bg-zinc-950/50 border border-zinc-700/50 rounded-xl py-3 pl-10 pr-4 text-white placeholder-zinc-500 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400" size={18} />
|
||||
<input
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
required
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="w-full bg-zinc-950/50 border border-zinc-700/50 rounded-xl py-3 pl-10 pr-4 text-white placeholder-zinc-500 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all"
|
||||
/>
|
||||
</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 shadow-[0_0_20px_rgba(var(--primary-rgb),0.3)] hover:shadow-[0_0_30px_rgba(var(--primary-rgb),0.5)]"
|
||||
>
|
||||
{loading && <Loader2 size={18} className="animate-spin" />}
|
||||
{isRegister ? 'Sign Up' : 'Sign In'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="mt-8 text-center text-sm text-zinc-400 relative z-10">
|
||||
{isRegister ? (
|
||||
<p>Already have an account? <button onClick={() => openAuthModal('login')} className="text-primary hover:underline font-medium">Sign in</button></p>
|
||||
) : (
|
||||
<p>Don't have an account? <button onClick={() => openAuthModal('register')} className="text-primary hover:underline font-medium">Sign up</button></p>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
import { Scroll, Image } from '@react-three/drei';
|
||||
import { useAuthStore } from '../../store/authStore';
|
||||
import { Box, Layers, Zap, Globe, Sparkles } from 'lucide-react';
|
||||
|
||||
export function Overlay() {
|
||||
const { openAuthModal } = useAuthStore();
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* 3D Background Images Parallax Layer */}
|
||||
<Scroll>
|
||||
<Image url="/assets/images/bg_hero.png" scale={[16, 10]} position={[0, 0, -5]} transparent opacity={0.6} />
|
||||
<Image url="/assets/images/bg_features.png" scale={[16, 10]} position={[0, -10, -5]} transparent opacity={0.5} />
|
||||
<Image url="/assets/images/bg_cta.png" scale={[16, 10]} position={[0, -20, -5]} transparent opacity={0.6} />
|
||||
</Scroll>
|
||||
|
||||
{/* HTML UI Layer */}
|
||||
<Scroll html style={{ width: '100%', height: '100%' }}>
|
||||
{/* Navigation */}
|
||||
<nav className="fixed top-0 left-0 w-full p-6 flex justify-between items-center z-50 mix-blend-difference text-white">
|
||||
<div className="flex items-center gap-2 font-bold text-2xl tracking-tighter">
|
||||
<Box className="text-primary" /> Titan<span className="text-primary">3d</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => openAuthModal('login')}
|
||||
className="px-6 py-2 bg-white/10 hover:bg-white/20 backdrop-blur-md rounded-full font-medium transition-all"
|
||||
>
|
||||
Sign In
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
{/* Section 1: Hero */}
|
||||
<section className="w-screen h-screen flex flex-col justify-center items-start px-12 md:px-32 text-white">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 backdrop-blur-md mb-6">
|
||||
<Sparkles size={16} className="text-primary" />
|
||||
<span className="text-sm font-medium">Next-Gen 3D Configurator</span>
|
||||
</div>
|
||||
<h1 className="text-6xl md:text-8xl font-extrabold tracking-tighter leading-tight mb-6 max-w-4xl bg-clip-text text-transparent bg-gradient-to-r from-white via-zinc-200 to-zinc-500">
|
||||
Build The Future in 3D.
|
||||
</h1>
|
||||
<p className="text-xl md:text-2xl text-zinc-400 max-w-2xl mb-10 font-light">
|
||||
An ultra-premium, AI-driven platform to visualize, construct, and deploy stunning 3D assets directly in your browser.
|
||||
</p>
|
||||
<button
|
||||
onClick={() => openAuthModal('register')}
|
||||
className="px-8 py-4 bg-primary hover:bg-primary/90 rounded-full font-bold text-lg shadow-[0_0_40px_rgba(var(--primary-rgb),0.5)] hover:scale-105 transition-all"
|
||||
>
|
||||
Start Building Free
|
||||
</button>
|
||||
</section>
|
||||
|
||||
{/* Section 2: Features */}
|
||||
<section className="w-screen h-screen flex flex-col justify-center items-end px-12 md:px-32 text-white text-right">
|
||||
<h2 className="text-5xl md:text-7xl font-bold tracking-tighter mb-16 max-w-3xl">
|
||||
Unleash Unprecedented <span className="text-blue-400">Power</span>.
|
||||
</h2>
|
||||
|
||||
<div className="flex flex-col gap-8 max-w-xl">
|
||||
<div className="flex items-center justify-end gap-6 p-6 rounded-2xl bg-white/5 border border-white/10 backdrop-blur-md hover:bg-white/10 transition-all">
|
||||
<div className="text-left">
|
||||
<h3 className="text-2xl font-bold mb-2">Real-time Rendering</h3>
|
||||
<p className="text-zinc-400">Experience photorealistic materials and lighting instantly.</p>
|
||||
</div>
|
||||
<div className="w-16 h-16 rounded-full bg-blue-500/20 flex items-center justify-center shrink-0">
|
||||
<Layers className="text-blue-400" size={32} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-end gap-6 p-6 rounded-2xl bg-white/5 border border-white/10 backdrop-blur-md hover:bg-white/10 transition-all">
|
||||
<div className="text-left">
|
||||
<h3 className="text-2xl font-bold mb-2">AI Asset Generation</h3>
|
||||
<p className="text-zinc-400">Turn text prompts into high-fidelity 3D models in seconds.</p>
|
||||
</div>
|
||||
<div className="w-16 h-16 rounded-full bg-purple-500/20 flex items-center justify-center shrink-0">
|
||||
<Zap className="text-purple-400" size={32} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 3: Call to Action */}
|
||||
<section className="w-screen h-screen flex flex-col justify-center items-center text-center px-12 text-white relative">
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-zinc-950 via-transparent to-transparent pointer-events-none" />
|
||||
|
||||
<Globe size={64} className="text-emerald-400 mb-8 animate-pulse" />
|
||||
<h2 className="text-6xl md:text-8xl font-bold tracking-tighter mb-6">
|
||||
Ready to Deploy?
|
||||
</h2>
|
||||
<p className="text-2xl text-zinc-400 max-w-2xl mb-12">
|
||||
Join elite creators building the next generation of spatial computing experiences.
|
||||
</p>
|
||||
<button
|
||||
onClick={() => openAuthModal('register')}
|
||||
className="px-10 py-5 bg-white text-black hover:bg-zinc-200 rounded-full font-bold text-xl transition-all hover:scale-105"
|
||||
>
|
||||
Create Your Workspace
|
||||
</button>
|
||||
</section>
|
||||
</Scroll>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
import { useRef } from 'react';
|
||||
import { useFrame } from '@react-three/fiber';
|
||||
import { Environment, Float, Sparkles } from '@react-three/drei';
|
||||
import { EffectComposer, Bloom, Vignette } from '@react-three/postprocessing';
|
||||
import { Models } from './Models';
|
||||
|
||||
export function Scene() {
|
||||
const group = useRef<THREE.Group>(null);
|
||||
|
||||
useFrame((state) => {
|
||||
if (group.current) {
|
||||
// Gentle floating animation for the entire scene group
|
||||
group.current.rotation.y = Math.sin(state.clock.elapsedTime * 0.1) * 0.2;
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<color attach="background" args={['#09090b']} />
|
||||
|
||||
{/* Lighting */}
|
||||
<ambientLight intensity={0.5} />
|
||||
<directionalLight position={[10, 10, 5]} intensity={1.5} color="#8b5cf6" />
|
||||
<directionalLight position={[-10, -10, -5]} intensity={1} color="#3b82f6" />
|
||||
<pointLight position={[0, 0, 0]} intensity={0.5} color="#ffffff" />
|
||||
|
||||
<Environment preset="city" />
|
||||
|
||||
{/* Main Content */}
|
||||
<group ref={group}>
|
||||
<Float speed={1.5} rotationIntensity={0.5} floatIntensity={0.5}>
|
||||
<Models />
|
||||
</Float>
|
||||
|
||||
{/* Floating Particles */}
|
||||
<Sparkles count={300} scale={15} size={3} speed={0.4} opacity={0.3} color="#a78bfa" />
|
||||
</group>
|
||||
|
||||
{/* Post Processing for Premium Aesthetic */}
|
||||
<EffectComposer disableNormalPass>
|
||||
<Bloom luminanceThreshold={0.2} mipmapBlur intensity={1.5} radius={0.8} />
|
||||
<Vignette eskil={false} offset={0.1} darkness={1.1} />
|
||||
</EffectComposer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -17,12 +17,21 @@ interface AuthState {
|
||||
setSession: (token: string, profile: UserProfile) => void;
|
||||
signOut: () => void;
|
||||
setProfile: (profile: UserProfile) => void;
|
||||
isAuthModalOpen: boolean;
|
||||
openAuthModal: (mode?: 'login' | 'register') => void;
|
||||
closeAuthModal: () => void;
|
||||
authMode: 'login' | 'register';
|
||||
}
|
||||
|
||||
export const useAuthStore = create<AuthState>((set) => ({
|
||||
user: null,
|
||||
profile: null,
|
||||
isLoading: true,
|
||||
isAuthModalOpen: false,
|
||||
authMode: 'login',
|
||||
|
||||
openAuthModal: (mode = 'login') => set({ isAuthModalOpen: true, authMode: mode }),
|
||||
closeAuthModal: () => set({ isAuthModalOpen: false }),
|
||||
|
||||
initialize: async () => {
|
||||
try {
|
||||
|
||||
Reference in New Issue
Block a user