navbar eklendi
This commit is contained in:
@@ -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>
|
||||
|
||||
85
src/App.jsx
85
src/App.jsx
@@ -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'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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
26
src/main.jsx
26
src/main.jsx
@@ -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,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user