Skip to content

Commit 94298bc

Browse files
MichaelTeidaMichaelTeida
committed
added: Instruction page
1 parent 4c324df commit 94298bc

File tree

5 files changed

+83
-4
lines changed

5 files changed

+83
-4
lines changed

‎src/assets/graphic1.webp

35.5 KB
Binary file not shown.

‎src/components/Header.jsx

+8-3
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,7 @@ const Header = ({setOpenSettings}) => {
8686
sx={{display: {xs: "none", md: "flex"}}}>
8787
<RouterLink to="/NeuraChatAi/"><Typography>Homepage</Typography></RouterLink>
8888
<RouterLink to="/NeuraChatAi/about"><Typography>About</Typography></RouterLink>
89+
<RouterLink to="/NeuraChatAi/instruction"><Typography>Instruction</Typography></RouterLink>
8990
<RouterLink to="/NeuraChatAi/features"><Typography>Features</Typography></RouterLink>
9091
</Stack>
9192
</Stack>
@@ -218,15 +219,19 @@ const Header = ({setOpenSettings}) => {
218219
<List spacing={2}
219220
sx={{display: {xs: "flex", md: "none"}}}>
220221
<RouterLink to="/NeuraChatAi/">
221-
<ListItemButton sx={{justifyContent: "center"}}><Typography>Homepage</Typography>
222+
<ListItemButton sx={{justifyContent: "center", p: 1.5}}><Typography sx={{fontSize: 20}}>Homepage</Typography>
222223
</ListItemButton>
223224
</RouterLink>
224225
<RouterLink to="/NeuraChatAi/about">
225-
<ListItemButton sx={{justifyContent: "center"}}><Typography>About</Typography>
226+
<ListItemButton sx={{justifyContent: "center", p: 1.5}}><Typography sx={{fontSize: 20}}>About</Typography>
227+
</ListItemButton>
228+
</RouterLink>
229+
<RouterLink to="/NeuraChatAi/instruction">
230+
<ListItemButton sx={{justifyContent: "center", p: 1.5}}><Typography sx={{fontSize: 20}}>Instruction</Typography>
226231
</ListItemButton>
227232
</RouterLink>
228233
<RouterLink to="/NeuraChatAi/features">
229-
<ListItemButton sx={{justifyContent: "center"}}><Typography>Features</Typography>
234+
<ListItemButton sx={{justifyContent: "center", p: 1.5}}><Typography sx={{fontSize: 20}}>Features</Typography>
230235
</ListItemButton>
231236
</RouterLink>
232237
</List>

‎src/main.jsx

+5
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {About} from "./pages/About.jsx";
88
import {CssBaseline, CssVarsProvider} from "@mui/joy";
99
import theme from "./theme/theme.jsx";
1010
import Features from "./pages/Features.jsx";
11+
import Instruction from "./pages/Instruction.jsx";
1112

1213

1314
const routes = [
@@ -23,6 +24,10 @@ const routes = [
2324
path: "/NeuraChatAi/about",
2425
element: <About/>,
2526
},
27+
{
28+
path: "/NeuraChatAi/instruction",
29+
element: <Instruction/>,
30+
},
2631
{
2732
path: "/NeuraChatAi/features",
2833
element: <Features/>,

‎src/pages/About.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export function About() {
1818
return (
1919
<>
2020
<Header/>
21-
<Container sx={{display: "flex", justifyContent: "space-between", alignItems: "center", flexDirection: {xs: "column", md: "row"}, minWidth: {md: "1350px"}, p: {xs: 4}, py: {xs: 10}, gap: {xs: 6, md: 0}, minHeight: 'calc(100dvh - var(--Header-height))'}}>
21+
<Container sx={{display: "flex", justifyContent: "space-between", alignItems: "center", flexDirection: {xs: "column", md: "row"}, width: {md: "1350px"}, p: {xs: 4}, py: {xs: 10}, gap: {xs: 6, md: 0}, minHeight: 'calc(100dvh - var(--Header-height))'}}>
2222
<Box sx={{zIndex: "2",flex: 6, display: "flex", flexDirection: {xs: "column", md: "row"}, gap: 2, flexWrap: "wrap"}}>
2323
<Typography component="h1" level="h1" fontSize={{xs: 45, md: 50}}>
2424
Welcome to <Typography color={"primary"}>NeuraChat</Typography>

‎src/pages/Instruction.jsx

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import {Card, Button, Box, Container, Sheet, Stack, Typography, List, ListItem} from '@mui/joy'
2+
import Header from '../components/Header.jsx'
3+
import graphic1 from '../assets/graphic1.webp'
4+
5+
const Instruction = () => {
6+
return (<>
7+
<Header/>
8+
<Container sx={{minWidth: { md: "1000px", lg: "1450px"}, pl: 2, pr: 4}}>
9+
<Stack sx={{flexDirection: {xs: "column", md: "row"}, alignItems: "center", my: 2}}>
10+
<Box sx={{flex: 1}}>
11+
<Box>
12+
<Box component="img" sx={{width: "100%"}}
13+
src={graphic1}
14+
alt="Instruction to NeuraChat"
15+
/>
16+
</Box>
17+
</Box>
18+
<Box sx={{flex: 1}}>
19+
<Typography level="body-md" sx={{fontStyle: "italic"}}>
20+
STEPS
21+
</Typography>
22+
<Typography level="h1" sx={{mb: 2, fontSize: "2.5rem"}}>
23+
Easy to <Typography sx={{color: "primary.400"}}>Get Started.</Typography>
24+
</Typography>
25+
<List marker="decimal"size="lg" >
26+
<ListItem sx={{alignItems: "flex-start", flexDirection: "column", mb: 2}}>
27+
<Typography level="title-lg" sx={{fontSize: "1.5rem", mb: 1}}>
28+
Go to Homepage
29+
</Typography>
30+
<Typography level="body-lg">
31+
To communicate with NeuraChat AI
32+
</Typography>
33+
</ListItem>
34+
<ListItem sx={{alignItems: "flex-start", flexDirection: "column", mb: 2}}>
35+
<Typography level="title-lg" sx={{fontSize: "1.5rem", mb: 1}}>
36+
Type something
37+
</Typography>
38+
<Typography level="body-lg">
39+
and click send - You can ask about everything
40+
</Typography>
41+
</ListItem>
42+
<ListItem sx={{alignItems: "flex-start", flexDirection: "column", mb: 2}}>
43+
<Typography level="title-lg" sx={{fontSize: "1.5rem", mb: 1}}>
44+
Get response
45+
</Typography>
46+
<Typography level="body-lg" >
47+
You can also set NeuraChat settings
48+
</Typography>
49+
</ListItem>
50+
</List>
51+
</Box>
52+
</Stack>
53+
<Stack sx={{flexDirection: {xs: "column", md: "row"}, alignItems: "center", justifyContent: "center"}}>
54+
<Card sx={{flexDirection: {xs: "column", md: "row"}, backgroundColor: "primary.solidBg", p: {xs: 4, md:8}, width: "100%", justifyContent: "space-between"}}>
55+
<Typography level="h3" sx={{color: "primary.solidColor"}}>
56+
People all over the world are happily using NeuraChat.
57+
</Typography>
58+
<Box sx={{ display: "flex", gap: 2, justifyContent: {xs: "space-around"} }}>
59+
<Button color="danger" size="lg">Get Started</Button>
60+
<Button variant="soft" size="lg" color="primary" >Contact us</Button>
61+
</Box>
62+
</Card>
63+
</Stack>
64+
</Container>
65+
</>)
66+
}
67+
68+
69+
export default Instruction;

0 commit comments

Comments
 (0)