Skip to content

Commit a6901ce

Browse files
ahkiet22ahkiet22
committed
feat: improve responsive public route page and update download android action
1 parent 8d3d044 commit a6901ce

File tree

12 files changed

+510
-215
lines changed

12 files changed

+510
-215
lines changed

‎public/images/logo-color 1.png‎

-2.96 KB
Binary file not shown.

‎src/app/(dashboard)/hr/departments/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,7 @@ export default function Index() {
174174
<Can I="get" a="departments/:id">
175175
<IconButton
176176
onClick={() => {
177-
router.push(`/department/${params.id}`);
177+
router.push(`/hr/departments/${params.id}`);
178178
}}
179179
>
180180
<MdVisibility />

‎src/app/(home)/about/AboutContent.tsx‎

Lines changed: 45 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -5,31 +5,31 @@ import { Box, Typography, Container, Grid, Avatar } from "@mui/material";
55

66
export default function AboutContent() {
77
return (
8-
<Box className="bg-white min-h-screen">
8+
<Box sx={{ bgcolor: 'white', minHeight: '100vh' }}>
99
{/* Vision Section */}
10-
<Box className="bg-indigo-600 py-32 text-center text-white">
10+
<Box sx={{ bgcolor: '#4f46e5', py: { xs: 8, md: 16 }, textAlign: 'center', color: 'white', px: 2 }}>
1111
<Container maxWidth="md">
12-
<Typography variant="overline" className="font-bold tracking-[0.2em] mb-4 block opacity-80">
12+
<Typography variant="overline" sx={{ fontWeight: 'bold', letterSpacing: '0.2em', mb: 2, display: 'block', opacity: 0.8, fontSize: { xs: '0.75rem', md: '0.875rem' } }}>
1313
OUR MISSION
1414
</Typography>
15-
<Typography variant="h2" className="font-extrabold mb-8 leading-[1.2]">
15+
<Typography variant="h2" sx={{ fontWeight: 800, mb: { xs: 3, md: 4 }, lineHeight: 1.2, fontSize: { xs: '1.875rem', md: '3rem', lg: '3.75rem' } }}>
1616
Democratizing Workplace Transparency through Blockchain.
1717
</Typography>
18-
<Typography variant="h5" className="opacity-90 leading-relaxed font-light">
18+
<Typography variant="h5" sx={{ opacity: 0.9, lineHeight: 1.6, fontWeight: 300, fontSize: { xs: '1rem', md: '1.25rem' } }}>
1919
Founded in 2024, Core Chain Client was born out of a desire to fix the broken systems of human resource
2020
management, making them more secure, employee-centric, and auditable.
2121
</Typography>
2222
</Container>
2323
</Box>
2424

2525
{/* Story Section */}
26-
<Container maxWidth="lg" className="py-24">
27-
<Grid container spacing={12} alignItems="center">
26+
<Container maxWidth="lg" sx={{ py: { xs: 8, md: 12 } }}>
27+
<Grid container spacing={4} alignItems="center">
2828
<Grid item xs={12} md={6}>
29-
<Typography variant="h3" className="font-bold mb-6 text-slate-900">
29+
<Typography variant="h3" sx={{ fontWeight: 'bold', mb: 3, color: '#0f172a', fontSize: { xs: '1.5rem', md: '2.25rem' } }}>
3030
Our Story
3131
</Typography>
32-
<Box className="space-y-6 text-slate-600 leading-relaxed">
32+
<Box sx={{ '& > p': { mb: 3 }, color: '#475569', lineHeight: 1.6, fontSize: { xs: '0.875rem', md: '1rem' } }}>
3333
<p>
3434
The team behind Core Chain saw a pattern of centralized databases failing companies—not just through
3535
technical vulnerabilities, but through a lack of trust. Employees felt like data points, and managers
@@ -43,37 +43,37 @@ export default function AboutContent() {
4343
</Box>
4444
</Grid>
4545
<Grid item xs={12} md={6}>
46-
<Box className="grid grid-cols-2 gap-4">
47-
<Box className="bg-slate-50 p-8 rounded-3xl text-center">
48-
<Typography variant="h3" className="font-extrabold text-indigo-600 mb-2">
46+
<Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', sm: '1fr 1fr' }, gap: 2 }}>
47+
<Box sx={{ bgcolor: '#f8fafc', p: { xs: 3, md: 4 }, borderRadius: { xs: 4, md: 6 }, textAlign: 'center', boxShadow: 1 }}>
48+
<Typography variant="h3" sx={{ fontWeight: 800, color: '#4f46e5', mb: 1, fontSize: { xs: '1.875rem', md: '2.25rem' } }}>
4949
500+
5050
</Typography>
51-
<Typography className="text-slate-500 font-medium uppercase text-xs">Companies</Typography>
51+
<Typography sx={{ color: '#64748b', fontWeight: 500, textTransform: 'uppercase', fontSize: { xs: '10px', md: '0.75rem' } }}>Companies</Typography>
5252
</Box>
53-
<Box className="bg-slate-900 p-8 rounded-3xl text-center text-white">
54-
<Typography variant="h3" className="font-extrabold text-white mb-2">
53+
<Box sx={{ bgcolor: '#0f172a', p: { xs: 3, md: 4 }, borderRadius: { xs: 4, md: 6 }, textAlign: 'center', color: 'white', boxShadow: 3 }}>
54+
<Typography variant="h3" sx={{ fontWeight: 800, color: 'white', mb: 1, fontSize: { xs: '1.875rem', md: '2.25rem' } }}>
5555
1M+
5656
</Typography>
57-
<Typography className="text-white/50 font-medium uppercase text-xs">Smart Contracts</Typography>
57+
<Typography sx={{ color: 'rgba(255,255,255,0.5)', fontWeight: 500, textTransform: 'uppercase', fontSize: { xs: '10px', md: '0.75rem' } }}>Smart Contracts</Typography>
5858
</Box>
59-
<Box className="bg-indigo-50 p-8 rounded-3xl text-center col-span-2">
60-
<Typography variant="h3" className="font-extrabold text-indigo-900 mb-2">
59+
<Box sx={{ bgcolor: '#eef2ff', p: { xs: 3, md: 4 }, borderRadius: { xs: 4, md: 6 }, textAlign: 'center', gridColumn: { sm: 'span 2' }, boxShadow: 1, border: '1px solid #e0e7ff' }}>
60+
<Typography variant="h3" sx={{ fontWeight: 800, color: '#1e1b4b', mb: 1, fontSize: { xs: '1.875rem', md: '2.25rem' } }}>
6161
99.9%
6262
</Typography>
63-
<Typography className="text-indigo-700 font-medium uppercase text-xs">Uptime</Typography>
63+
<Typography sx={{ color: '#4338ca', fontWeight: 500, textTransform: 'uppercase', fontSize: { xs: '10px', md: '0.75rem' } }}>Uptime</Typography>
6464
</Box>
6565
</Box>
6666
</Grid>
6767
</Grid>
6868
</Container>
6969

7070
{/* Team Section (Mock) */}
71-
<Box className="bg-slate-50 py-24">
71+
<Box sx={{ bgcolor: '#f8fafc', py: { xs: 8, md: 12 } }}>
7272
<Container maxWidth="lg">
73-
<Typography variant="h3" className="text-center font-bold mb-16">
73+
<Typography variant="h3" sx={{ textAlign: 'center', fontWeight: 'bold', mb: { xs: 6, md: 8 }, fontSize: { xs: '1.5rem', md: '2.25rem' } }}>
7474
Meet the Pioneers
7575
</Typography>
76-
<Grid container spacing={6} justifyContent="center">
76+
<Grid container spacing={4} justifyContent="center">
7777
{[
7878
{
7979
name: "Tran Van D",
@@ -91,18 +91,35 @@ export default function AboutContent() {
9191
desc: "Frontend-focused student passionate about building user-friendly interfaces.",
9292
},
9393
].map((member, i) => (
94-
<Grid item xs={12} sm={6} md={3} key={i}>
95-
<Box className="text-center">
96-
<Avatar className="w-32 h-32 mx-auto mb-6 bg-indigo-100 text-indigo-600 text-4xl shadow-lg border-4 border-white">
94+
<Grid item xs={12} sm={6} md={4} key={i}>
95+
<Box sx={{
96+
textAlign: 'center',
97+
p: 3,
98+
bgcolor: { xs: 'white', md: 'transparent' },
99+
borderRadius: 4,
100+
boxShadow: { xs: 1, md: 0 },
101+
border: { xs: '1px solid #f1f5f9', md: 'none' }
102+
}}>
103+
<Avatar sx={{
104+
width: { xs: 96, md: 128 },
105+
height: { xs: 96, md: 128 },
106+
mx: 'auto',
107+
mb: 3,
108+
bgcolor: '#eef2ff',
109+
color: '#4f46e5',
110+
fontSize: '2.25rem',
111+
boxShadow: 3,
112+
border: '4px solid white'
113+
}}>
97114
{member.name[0]}
98115
</Avatar>
99-
<Typography variant="h6" className="font-bold text-slate-900">
116+
<Typography variant="h6" sx={{ fontWeight: 'bold', color: '#0f172a', fontSize: { xs: '1.125rem', md: '1.25rem' } }}>
100117
{member.name}
101118
</Typography>
102-
<Typography variant="body2" className="text-indigo-600 font-semibold mb-4 uppercase tracking-tighter">
119+
<Typography variant="body2" sx={{ color: '#4f46e5', fontWeight: 600, mb: 2, textTransform: 'uppercase', letterSpacing: '-0.025em', fontSize: { xs: '0.75rem', md: '0.875rem' } }}>
103120
{member.role}
104121
</Typography>
105-
<Typography className="text-slate-500 text-sm">{member.desc}</Typography>
122+
<Typography sx={{ color: '#64748b', fontSize: '0.875rem' }}>{member.desc}</Typography>
106123
</Box>
107124
</Grid>
108125
))}

‎src/app/(home)/developers/DevelopersContent.tsx‎

Lines changed: 48 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -5,30 +5,40 @@ import { Box, Typography, Container, Grid, Button, Paper } from "@mui/material";
55
import { FaCode, FaBook, FaTerminal, FaGithub } from "react-icons/fa";
66

77
const CodeSnippet = ({ code }: { code: string }) => (
8-
<Box className="bg-slate-900 rounded-2xl p-6 font-mono text-sm text-indigo-300 overflow-x-auto border border-slate-800 shadow-2xl">
8+
<Box sx={{
9+
bgcolor: '#0f172a',
10+
borderRadius: 4,
11+
p: 3,
12+
fontFamily: 'monospace',
13+
fontSize: '0.875rem',
14+
color: '#a5b4fc',
15+
overflowX: 'auto',
16+
border: '1px solid #1e293b',
17+
boxShadow: 24
18+
}}>
919
<pre><code>{code}</code></pre>
1020
</Box>
1121
);
1222

1323
export default function DevelopersContent() {
1424
return (
15-
<Box className="bg-slate-50 min-h-screen pb-24">
25+
<Box sx={{ bgcolor: '#f8fafc', minHeight: '100vh', pb: { xs: 8, md: 12 } }}>
1626
{/* Header */}
17-
<Box className="bg-slate-950 py-24 text-white">
27+
<Box sx={{ bgcolor: '#020617', py: { xs: 8, md: 12 }, color: 'white', px: 2 }}>
1828
<Container maxWidth="lg">
19-
<Grid container spacing={8} alignItems="center">
29+
<Grid container spacing={6} alignItems="center">
2030
<Grid item xs={12} md={6}>
21-
<Typography variant="h2" className="font-extrabold mb-6">
22-
Built for <span className="text-indigo-400">Engineers</span>.
31+
<Typography variant="h2" sx={{ fontWeight: 800, mb: 3, fontSize: { xs: '1.875rem', md: '3rem', lg: '3.75rem' } }}>
32+
Built for <Box component="span" sx={{ color: '#818cf8' }}>Engineers</Box>.
2333
</Typography>
24-
<Typography variant="h5" className="text-slate-400 mb-8 leading-relaxed">
34+
<Typography variant="h5" sx={{ color: '#94a3b8', mb: 4, lineHeight: 1.6, fontSize: { xs: '1rem', md: '1.25rem' } }}>
2535
Seamlessly integrate blockchain-based identity and payroll into your applications using our robust APIs and SDKs.
2636
</Typography>
27-
<Box className="flex gap-4">
28-
<Button variant="contained" className="bg-indigo-600 px-6 py-2 rounded-lg normal-case font-bold">
37+
<Box sx={{ display: 'flex', flexDirection: { xs: 'column', sm: 'row' }, gap: 2 }}>
38+
<Button variant="contained" sx={{ bgcolor: '#4f46e5', '&:hover': { bgcolor: '#4338ca' }, px: 3, py: 1.5, borderRadius: 2, textTransform: 'none', fontWeight: 'bold', width: { xs: '100%', sm: 'auto' } }}>
2939
Read Documentation
3040
</Button>
31-
<Button variant="outlined" className="border-slate-700 text-white px-6 py-2 rounded-lg normal-case font-bold">
41+
<Button variant="outlined" sx={{ border: '1px solid #334155', color: 'white', '&:hover': { border: '1px solid #475569', bgcolor: 'rgba(255,255,255,0.05)' }, px: 3, py: 1.5, borderRadius: 2, textTransform: 'none', fontWeight: 'bold', width: { xs: '100%', sm: 'auto' } }}>
3242
Get API Key
3343
</Button>
3444
</Box>
@@ -53,43 +63,51 @@ const result = await client.employees.create({
5363
</Box>
5464

5565
{/* SDKs & Tools */}
56-
<Container maxWidth="lg" className="-mt-12">
57-
<Grid container spacing={4}>
66+
<Container maxWidth="lg" sx={{ mt: { xs: -4, md: -6 }, px: 2 }}>
67+
<Grid container spacing={3}>
5868
{[
5969
{ icon: <FaTerminal />, title: "Node.js SDK", desc: "Easily integrate with our first-class JavaScript and TypeScript SDK." },
6070
{ icon: <FaCode />, title: "React Hooks", desc: "Built-in hooks for authentication and data fetching in React apps." },
6171
{ icon: <FaTerminal />, title: "Core CLI", desc: "Manage your blockchain nodes and contracts from the command line." },
6272
{ icon: <FaGithub />, title: "Open Source", desc: "Check out our community-driven examples and star us on GitHub." },
6373
].map((item, idx) => (
6474
<Grid item xs={12} sm={6} md={3} key={idx}>
65-
<Paper className="p-8 h-full rounded-3xl border border-slate-200 shadow-sm hover:translate-y-[-4px] transition-all duration-300">
66-
<Box className="text-3xl text-indigo-600 mb-4">{item.icon}</Box>
67-
<Typography variant="h6" className="font-bold mb-2">{item.title}</Typography>
68-
<Typography className="text-slate-600 text-sm leading-relaxed">{item.desc}</Typography>
75+
<Paper sx={{
76+
p: { xs: 3, md: 4 },
77+
height: '100%',
78+
borderRadius: { xs: 4, md: 6 },
79+
border: '1px solid #e2e8f0',
80+
boxShadow: '0 1px 3px 0 rgb(0 0 0 / 0.1)',
81+
transition: 'all 0.3s',
82+
'&:hover': { transform: 'translateY(-4px)' }
83+
}}>
84+
<Box sx={{ fontSize: { xs: '1.5rem', md: '1.875rem' }, color: '#4f46e5', mb: 2 }}>{item.icon}</Box>
85+
<Typography variant="h6" sx={{ fontWeight: 'bold', mb: 1, fontSize: { xs: '1.125rem', md: '1.25rem' } }}>{item.title}</Typography>
86+
<Typography sx={{ color: '#475569', fontSize: '0.875rem', lineHeight: 1.6 }}>{item.desc}</Typography>
6987
</Paper>
7088
</Grid>
7189
))}
7290
</Grid>
7391
</Container>
7492

7593
{/* API Reference Preview */}
76-
<Container maxWidth="lg" className="mt-24">
77-
<Box className="bg-white p-12 rounded-[40px] border border-slate-200">
78-
<Typography variant="h4" className="font-bold mb-8">API Reference Preview</Typography>
79-
<Grid container spacing={8}>
94+
<Container maxWidth="lg" sx={{ mt: { xs: 8, md: 12 }, px: 2 }}>
95+
<Box sx={{ bgcolor: 'white', p: { xs: 3, md: 6 }, borderRadius: { xs: 4, md: 10 }, border: '1px solid #e2e8f0' }}>
96+
<Typography variant="h4" sx={{ fontWeight: 'bold', mb: 4, fontSize: { xs: '1.5rem', md: '2.25rem' }, textAlign: { xs: 'center', md: 'left' } }}>API Reference Preview</Typography>
97+
<Grid container spacing={4}>
8098
<Grid item xs={12} md={4}>
81-
<Box className="space-y-6">
82-
<Box className="p-4 bg-indigo-50 rounded-xl border-l-4 border-indigo-600">
83-
<Typography className="font-bold text-indigo-900">GET /v1/employees</Typography>
84-
<Typography className="text-xs text-indigo-700">Retrieve a list of employees</Typography>
99+
<Box sx={{ '& > div': { mb: 2 } }}>
100+
<Box sx={{ p: 2, bgcolor: '#eef2ff', borderRadius: 3, borderLeft: '4px solid #4f46e5' }}>
101+
<Typography sx={{ fontWeight: 'bold', color: '#1e1b4b', fontSize: { xs: '0.875rem', md: '1rem' } }}>GET /v1/employees</Typography>
102+
<Typography sx={{ fontSize: { xs: '10px', md: '0.75rem' }, color: '#4338ca' }}>Retrieve a list of employees</Typography>
85103
</Box>
86-
<Box className="p-4 hover:bg-slate-50 rounded-xl cursor-default transition-colors">
87-
<Typography className="font-bold text-slate-900">POST /v1/payroll</Typography>
88-
<Typography className="text-xs text-slate-500">Initiate a smart contract payment</Typography>
104+
<Box sx={{ p: 2, '&:hover': { bgcolor: '#f8fafc' }, borderRadius: 3, transition: 'colors 0.2s' }}>
105+
<Typography sx={{ fontWeight: 'bold', color: '#0f172a', fontSize: { xs: '0.875rem', md: '1rem' } }}>POST /v1/payroll</Typography>
106+
<Typography sx={{ fontSize: { xs: '10px', md: '0.75rem' }, color: '#64748b' }}>Initiate a smart contract payment</Typography>
89107
</Box>
90-
<Box className="p-4 hover:bg-slate-50 rounded-xl cursor-default transition-colors">
91-
<Typography className="font-bold text-slate-900">GET /v1/audit/{`{id}`}</Typography>
92-
<Typography className="text-xs text-slate-500">Get audit logs for a specific tx</Typography>
108+
<Box sx={{ p: 2, '&:hover': { bgcolor: '#f8fafc' }, borderRadius: 3, transition: 'colors 0.2s' }}>
109+
<Typography sx={{ fontWeight: 'bold', color: '#0f172a', fontSize: { xs: '0.875rem', md: '1rem' } }}>GET /v1/audit/{`{id}`}</Typography>
110+
<Typography sx={{ fontSize: { xs: '10px', md: '0.75rem' }, color: '#64748b' }}>Get audit logs for a specific tx</Typography>
93111
</Box>
94112
</Box>
95113
</Grid>

0 commit comments

Comments
 (0)