Spaces:
Running
Running
File size: 2,453 Bytes
3299552 5b953dd 3299552 5b953dd ed459b5 3299552 5b953dd 3299552 5b953dd 3299552 5b953dd 3299552 5b953dd 3299552 5b953dd 3299552 5b953dd 3299552 ed459b5 3299552 5b953dd ed459b5 5b953dd 3299552 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
import { useNavigate } from 'react-router-dom';
import { Button, Box } from '@mui/material';
import { styled } from '@mui/system';
import { fadeIn } from '../styles/animations';
import { useAuth } from '../hooks/useAuth';
const HeroSection = styled('section')(({ theme }) => ({
minHeight: '90vh',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
textAlign: 'center',
padding: theme.spacing(4),
position: 'relative',
backgroundImage: 'url("/assets/hero-background.webp")',
backgroundSize: 'cover',
backgroundPosition: 'center',
color: '#fff',
'&::before': {
content: '""',
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: 'rgba(0, 0, 0, 0.5)',
zIndex: 1,
},
}));
const ContentContainer = styled(Box)(({ theme }) => ({
position: 'relative',
zIndex: 2,
animation: `${fadeIn} 1.2s ease-out`,
maxWidth: '800px',
}));
const Title = styled('h1')(({ theme }) => ({
fontSize: '3.5rem',
marginBottom: theme.spacing(2),
fontWeight: 700,
color: '#fff',
textShadow: '0 2px 4px rgba(0, 0, 0, 0.3)',
}));
const Subtitle = styled('p')(({ theme }) => ({
fontSize: '1.5rem',
marginBottom: theme.spacing(4),
lineHeight: 1.6,
textShadow: '0 1px 2px rgba(0, 0, 0, 0.3)',
}));
const CTAButton = styled(Button)(({ theme }) => ({
padding: theme.spacing(1.5, 4),
fontSize: '1.1rem',
borderRadius: '50px',
fontWeight: 600,
boxShadow: '0 4px 14px rgba(0, 0, 0, 0.25)',
transition: 'all 0.3s ease',
'&:hover': {
transform: 'translateY(-3px)',
boxShadow: '0 6px 20px rgba(0, 0, 0, 0.3)',
}
}));
const Home = () => {
const navigate = useNavigate();
const { isAuthenticated } = useAuth();
// Auto-redirect to dashboard removed to allow returning to homepage
return (
<HeroSection>
<ContentContainer>
<Title>EnlightenQalb</Title>
<Subtitle>
Explore the wisdom of Imam Al-Ghazali through modern semantic search technology.
Discover relevant passages from "The Alchemy of Happiness" for your spiritual queries.
</Subtitle>
<CTAButton
variant="contained"
color="primary"
size="large"
onClick={() => navigate(isAuthenticated ? '/dashboard' : '/login')}
>
Begin Your Journey
</CTAButton>
</ContentContainer>
</HeroSection>
);
};
export default Home; |