Skip to content

Commit 5bd49d2

Browse files
anserwaseemanserwaseem
committed
added content in homepage
1 parent 37e60af commit 5bd49d2

File tree

10 files changed

+457
-153
lines changed

10 files changed

+457
-153
lines changed

‎package-lock.json‎

Lines changed: 174 additions & 105 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
"homepage": "https://automadeasy.com/",
66
"dependencies": {
77
"@mui/icons-material": "^5.10.9",
8-
"@mui/material": "^5.10.12",
8+
"@mui/lab": "^5.0.0-alpha.114",
9+
"@mui/material": "^5.11.2",
910
"@mui/x-data-grid": "^5.17.10",
1011
"@react-hook/resize-observer": "^1.2.6",
1112
"@testing-library/jest-dom": "^5.16.5",

‎public/favicon.ico‎

11.3 KB
Binary file not shown.

‎public/logo192.png‎

16.6 KB
Loading

‎public/logo512.png‎

97.9 KB
Loading

‎src/components/Automadeasy.tsx‎

Lines changed: 219 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,224 @@
1+
import { Button, Container, Divider, Grid, Typography } from "@mui/material";
2+
import {
3+
StyledGridOverlay,
4+
StyledSvg,
5+
} from "../features/components/transitionTable/NoRowsOverlay";
6+
import Timeline from "@mui/lab/Timeline";
7+
import TimelineItem from "@mui/lab/TimelineItem";
8+
import TimelineSeparator from "@mui/lab/TimelineSeparator";
9+
import TimelineConnector from "@mui/lab/TimelineConnector";
10+
import TimelineContent from "@mui/lab/TimelineContent";
11+
import TimelineDot from "@mui/lab/TimelineDot";
12+
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
13+
import { Box } from "@mui/system";
14+
import { homeBackgroundColor } from "../consts/Colors";
15+
16+
let x: { width: number; height: number };
17+
x = { width: 100, height: 200 };
18+
119
export const Automadeasy = () => {
220
console.log("re rendering Automadeasy");
321
return (
4-
<div>
5-
<h1>Buy me a Coffee</h1>
6-
</div>
22+
<>
23+
<Grid
24+
container
25+
direction="row"
26+
justifyContent="space-evenly"
27+
alignItems="center"
28+
padding={"7rem"}
29+
sx={{
30+
backgroundColor: homeBackgroundColor,
31+
clipPath: "polygon(0 0, 100% 0, 100% 100%, 0 80%)",
32+
}}
33+
>
34+
<Grid item sm={3}>
35+
<Box
36+
component="img"
37+
alt="logo"
38+
src="/logo512.png"
39+
maxWidth={"100px"}
40+
/>
41+
</Grid>
42+
43+
<Grid item sm>
44+
<Typography fontSize={"3rem"} fontWeight={"bold"} color={"black"}>
45+
Automata made easy
46+
</Typography>
47+
<Typography variant="h6" color={"black"}>
48+
Learning theory of automata is hard, Automadeasy makes it easy, fun
49+
and interactive.
50+
</Typography>
51+
</Grid>
52+
</Grid>
53+
54+
<Grid
55+
container
56+
direction="row"
57+
justifyContent="space-evenly"
58+
alignItems="center"
59+
p={"7rem"}
60+
sx={{
61+
backgroundColor: homeBackgroundColor,
62+
// make this clipPath reverse of the one above
63+
clipPath: "polygon(0 20%, 100% 0, 100% 100%, 0 100%)",
64+
}}
65+
>
66+
<Grid
67+
item
68+
sm
69+
sx={{
70+
width: "50%",
71+
}}
72+
>
73+
<Typography
74+
variant="h4"
75+
fontWeight={"bold"}
76+
color={"black"}
77+
textAlign={"right"}
78+
>
79+
Start learning
80+
</Typography>
81+
<Typography variant="h6" color={"black"} textAlign={"right"}>
82+
Automadeasy is a platform that allows you to learn and practice the
83+
concepts of automata theory in a fun and interactive way.
84+
</Typography>
85+
<Box
86+
sx={{
87+
display: "flex",
88+
justifyContent: "flex-end",
89+
paddingTop: "2rem",
90+
}}
91+
>
92+
<Button
93+
variant="text"
94+
color="secondary"
95+
endIcon={<ChevronRightIcon />}
96+
href="/editor"
97+
sx={{
98+
paddingRight: "0",
99+
}}
100+
>
101+
Get Started
102+
</Button>
103+
</Box>
104+
</Grid>
105+
106+
<Grid item sm={4}>
107+
<StyledGridOverlay>
108+
<Box sx={{ transform: "scale(1.5)" }}>
109+
<StyledSvg />
110+
</Box>
111+
</StyledGridOverlay>
112+
</Grid>
113+
</Grid>
114+
115+
<Grid container direction="row" justifyContent="space-evenly" py={"7rem"}>
116+
<Grid item xs>
117+
<Typography variant="h6" color={"black"} align={"center"}>
118+
Creating Automaton
119+
</Typography>
120+
<Divider
121+
variant={"inset"}
122+
sx={{
123+
width: "50%",
124+
margin: "0 auto",
125+
height: "2px",
126+
}}
127+
/>
128+
<Timeline position="alternate">
129+
<TimelineItem>
130+
<TimelineSeparator>
131+
<TimelineDot color="secondary" />
132+
<TimelineConnector />
133+
</TimelineSeparator>
134+
<TimelineContent>DFA</TimelineContent>
135+
</TimelineItem>
136+
<TimelineItem>
137+
<TimelineSeparator>
138+
<TimelineDot color="success" />
139+
</TimelineSeparator>
140+
<TimelineContent>NFA</TimelineContent>
141+
</TimelineItem>
142+
</Timeline>
143+
</Grid>
144+
145+
<Grid item xs>
146+
<Typography variant="h6" color={"black"} align={"center"}>
147+
Converting NFA to DFA
148+
</Typography>
149+
<Divider
150+
variant={"inset"}
151+
sx={{
152+
width: "50%",
153+
margin: "0 auto",
154+
height: "2px",
155+
}}
156+
/>
157+
<Timeline position="alternate">
158+
<TimelineItem>
159+
<TimelineSeparator>
160+
<TimelineDot color="warning" />
161+
<TimelineConnector />
162+
</TimelineSeparator>
163+
<TimelineContent>Null Closure</TimelineContent>
164+
</TimelineItem>
165+
<TimelineItem>
166+
<TimelineSeparator>
167+
<TimelineDot color="success" />
168+
<TimelineConnector />
169+
</TimelineSeparator>
170+
<TimelineContent>Modified Table</TimelineContent>
171+
</TimelineItem>
172+
<TimelineItem>
173+
<TimelineSeparator>
174+
<TimelineDot color="secondary" />
175+
</TimelineSeparator>
176+
<TimelineContent>Resultant DFA</TimelineContent>
177+
</TimelineItem>
178+
</Timeline>
179+
</Grid>
180+
181+
<Grid item xs>
182+
<Typography variant="h6" color={"black"} align={"center"}>
183+
Minimizing DFA
184+
</Typography>
185+
<Divider
186+
variant={"inset"}
187+
sx={{
188+
width: "50%",
189+
margin: "0 auto",
190+
height: "2px",
191+
}}
192+
/>
193+
<Timeline position="alternate">
194+
<TimelineItem>
195+
<TimelineSeparator>
196+
<TimelineDot color="secondary" />
197+
<TimelineConnector />
198+
</TimelineSeparator>
199+
<TimelineContent>Equivalence States</TimelineContent>
200+
</TimelineItem>
201+
<TimelineItem>
202+
<TimelineSeparator>
203+
<TimelineDot color="success" />
204+
</TimelineSeparator>
205+
<TimelineContent>Minimized DFA</TimelineContent>
206+
</TimelineItem>
207+
</Timeline>
208+
</Grid>
209+
</Grid>
210+
211+
<Container
212+
maxWidth={false}
213+
sx={{
214+
py: "1rem",
215+
backgroundColor: homeBackgroundColor,
216+
}}
217+
>
218+
<Typography variant="subtitle1" color={"black"} align={"center"}>
219+
Copyright © {new Date().getFullYear()} Automadeasy
220+
</Typography>
221+
</Container>
222+
</>
7223
);
8224
};

‎src/components/Help.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,13 +28,13 @@ export const Help = () => {
2828
<div>
2929
{headers.map((header, index) => (
3030
<Accordion
31+
key={header}
3132
expanded={expanded === header}
3233
onChange={handleChange(header)}
3334
>
3435
<AccordionSummary
3536
expandIcon={<ExpandMoreIcon />}
36-
aria-controls={`${header}-content`}
37-
id={`${header}-header`}
37+
id={header}
3838
sx={{
3939
"& .MuiAccordionSummary-content": {
4040
marginRight: 5,

‎src/components/Navbar.tsx‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,13 @@ export function NavBar() {
3232
<AppBar position="static">
3333
<Container maxWidth={false}>
3434
<Toolbar disableGutters>
35-
<AdbIcon sx={{ display: { xs: "none", md: "flex" }, mr: 1 }} />
35+
<Box
36+
component="img"
37+
alt="logo"
38+
src="/logo192.png"
39+
maxWidth={"30px"}
40+
sx={{ display: { xs: "none", md: "flex" }, mr: 1 }}
41+
/>
3642
<Typography
3743
variant="h6"
3844
noWrap
@@ -105,7 +111,13 @@ export function NavBar() {
105111
</Menu>
106112
</Box>
107113

108-
<AdbIcon sx={{ display: { xs: "flex", md: "none" }, mr: 1 }} />
114+
<Box
115+
component="img"
116+
alt="logo"
117+
src="/logo192.png"
118+
maxWidth={"30px"}
119+
sx={{ display: { xs: "flex", md: "none" }, mr: 1 }}
120+
/>
109121
<Typography
110122
variant="h5"
111123
noWrap

‎src/consts/Colors.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
export const homeBackgroundColor = "#F5F5F5";
2+
13
// link for these color names and codes: https://mui.com/material-ui/customization/palette/
24
export const stateInitialColor = "#ffb74d"; // mui theme.palette.warning.light
35
export const stateFinalColor = "#81c784"; // mui theme.palette.success.light;

‎src/features/components/transitionTable/NoRowsOverlay.tsx‎

Lines changed: 44 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { styled, Box } from "@mui/material";
22

3-
const StyledGridOverlay = styled("div")(({ theme }) => ({
3+
export const StyledGridOverlay = styled("div")(({ theme }) => ({
44
display: "flex",
55
flexDirection: "column",
66
alignItems: "center",
@@ -24,51 +24,55 @@ const StyledGridOverlay = styled("div")(({ theme }) => ({
2424
},
2525
}));
2626

27-
function NoRowsOverlay() {
27+
export const StyledSvg = () => {
2828
return (
29-
<StyledGridOverlay>
30-
<svg
31-
width="120"
32-
height="100"
33-
viewBox="0 0 184 152"
34-
aria-hidden
35-
focusable="false"
36-
>
37-
<g fill="none" fillRule="evenodd">
38-
<g transform="translate(24 31.67)">
39-
<ellipse
40-
className="ant-empty-img-5"
41-
cx="67.797"
42-
cy="106.89"
43-
rx="67.797"
44-
ry="12.668"
45-
/>
46-
<path
47-
className="ant-empty-img-1"
48-
d="M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z"
49-
/>
50-
<path
51-
className="ant-empty-img-2"
52-
d="M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z"
53-
/>
54-
<path
55-
className="ant-empty-img-3"
56-
d="M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z"
57-
/>
58-
</g>
29+
<svg
30+
width={120}
31+
height={100}
32+
viewBox="0 0 184 152"
33+
aria-hidden
34+
focusable="false"
35+
>
36+
<g fill="none" fillRule="evenodd">
37+
<g transform="translate(24 31.67)">
38+
<ellipse
39+
className="ant-empty-img-5"
40+
cx="67.797"
41+
cy="106.89"
42+
rx="67.797"
43+
ry="12.668"
44+
/>
45+
<path
46+
className="ant-empty-img-1"
47+
d="M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z"
48+
/>
49+
<path
50+
className="ant-empty-img-2"
51+
d="M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z"
52+
/>
5953
<path
6054
className="ant-empty-img-3"
61-
d="M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z"
55+
d="M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z"
6256
/>
63-
<g className="ant-empty-img-4" transform="translate(149.65 15.383)">
64-
<ellipse cx="20.654" cy="3.167" rx="2.849" ry="2.815" />
65-
<path d="M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z" />
66-
</g>
6757
</g>
68-
</svg>
58+
<path
59+
className="ant-empty-img-3"
60+
d="M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z"
61+
/>
62+
<g className="ant-empty-img-4" transform="translate(149.65 15.383)">
63+
<ellipse cx="20.654" cy="3.167" rx="2.849" ry="2.815" />
64+
<path d="M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z" />
65+
</g>
66+
</g>
67+
</svg>
68+
);
69+
};
70+
71+
export function NoRowsOverlay() {
72+
return (
73+
<StyledGridOverlay>
74+
<StyledSvg />
6975
<Box sx={{ mt: 1 }}>No Rows</Box>
7076
</StyledGridOverlay>
7177
);
7278
}
73-
74-
export default NoRowsOverlay;

0 commit comments

Comments
 (0)