navbar eklendi

This commit is contained in:
2025-11-11 21:45:25 +03:00
parent 5436bb5890
commit 34c7365ab3
3 changed files with 128 additions and 29 deletions

View File

@@ -4,6 +4,12 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Caudex:wght@700&display=swap"
/>
<title>imgPub - PDF OCR Sihirbazı</title>
</head>
<body>

View File

@@ -2,9 +2,12 @@ import { Outlet, useLocation, useNavigate } from 'react-router-dom';
import {
Alert,
Box,
Button,
Container,
Link,
Paper,
Snackbar,
Stack,
Step,
StepLabel,
Stepper,
@@ -39,13 +42,82 @@ const App = () => {
}, [location.pathname]);
return (
<Container maxWidth="lg" sx={{ py: 4 }}>
<Box mb={4}>
<Typography variant="h4" gutterBottom sx={{ color: '#29615D', fontWeight: 700 }}>
imgPub EPUB Sihirbazı
<>
<Box
component="header"
sx={{
position: 'sticky',
top: 0,
zIndex: 1200,
backgroundColor: '#FFFFFF',
borderBottom: '1px solid #E0DFDC',
boxShadow: '0 6px 12px rgba(0,0,0,0.04)',
}}
>
<Container maxWidth="lg">
<Stack direction="row" alignItems="center" justifyContent="space-between" py={0.5}>
<Typography
variant="h4"
sx={{
fontFamily: '"Caudex", serif',
color: '#1C1815',
fontWeight: 700,
letterSpacing: 1,
}}
>
imgpub
</Typography>
<Typography color="text.secondary">
Görselleri sırayla işle, OCR ile metne dönüştür ve EPUB formatında indir.
<Stack direction="row" spacing={3} alignItems="center">
<Typography
component="button"
type="button"
sx={{
background: 'none',
border: 'none',
color: '#2F2D28',
fontWeight: 600,
fontSize: '0.95rem',
cursor: 'pointer',
textTransform: 'uppercase',
letterSpacing: 0.5,
transition: 'color 0.2s ease',
'&:hover': { color: '#d7b16a' },
}}
>
Login
</Typography>
<Button variant="contained" color="primary" size="small">
Sign Up
</Button>
</Stack>
</Stack>
</Container>
</Box>
<Container maxWidth="lg" sx={{ py: 6 }}>
<Box mb={5} textAlign="center">
<Typography
variant="h3"
sx={{
fontWeight: 700,
color: '#1C1815',
letterSpacing: -0.5,
fontSize: { xs: '1.9rem', md: '2.6rem' },
}}
>
Tek ekranda görselden EPUB&apos;a kadar tüm sihirbaz adımları
</Typography>
<Typography
sx={{
mt: 1.5,
color: '#5A5751',
fontSize: { xs: '1rem', md: '1.2rem' },
lineHeight: 1.6,
maxWidth: 720,
mx: 'auto',
}}
>
Kapak seç, crop alanını belirle, OCR ile Türkçe metinleri koru ve sonucunu tek tıkla EPUB olarak indir.
imgpub tüm işlemleri tek bir akışta toplar, hızlı ve modern bir deneyim sunar.
</Typography>
</Box>
<Paper sx={{ p: { xs: 2, md: 4 }, mb: 4 }} elevation={0}>
@@ -66,6 +138,7 @@ const App = () => {
</Alert>
</Snackbar>
</Container>
</>
);
};

View File

@@ -51,8 +51,10 @@ const theme = createTheme({
borderRadius: 999,
textTransform: 'none',
boxShadow: '0 6px 20px rgba(231, 193, 121, 0.35)',
transition: 'background-color 0.2s ease, box-shadow 0.2s ease',
'&:hover': {
backgroundColor: '#d7b16a',
boxShadow: 'none',
},
},
},
@@ -60,9 +62,10 @@ const theme = createTheme({
MuiPaper: {
styleOverrides: {
root: {
backgroundColor: '#FAF8F6',
boxShadow: '0 20px 45px rgba(0,0,0,0.08)',
borderRadius: 24,
backgroundColor: '#FFFFFF',
border: '1px solid #D2D2D2',
borderRadius: '1.5px',
boxShadow: '0 10px 18px rgba(0,0,0,0.06)',
},
},
},
@@ -99,6 +102,23 @@ const theme = createTheme({
},
},
},
MuiStepLabel: {
styleOverrides: {
label: {
backgroundColor: '#FFFFFF',
border: '1px solid #D2D2D2',
borderRadius: '1.5px',
padding: '4px 10px',
color: '#1C1815',
boxShadow: '0 6px 12px rgba(0,0,0,0.05)',
fontWeight: 600,
'&.Mui-disabled': {
color: '#B5AD9A',
opacity: 0.8,
},
},
},
},
},
});