Skip to content

Commit 5edf895

Browse files
anserwaseemanserwaseem
committed
beautified navbar, home page, and footer
1 parent 4e47969 commit 5edf895

File tree

8 files changed

+165
-100
lines changed

8 files changed

+165
-100
lines changed

‎src/App.css‎

Lines changed: 3 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,4 @@
1-
.App {
2-
text-align: center;
3-
}
4-
5-
.App-logo {
6-
height: 40vmin;
7-
pointer-events: none;
8-
}
9-
10-
@media (prefers-reduced-motion: no-preference) {
11-
.App-logo {
12-
animation: App-logo-spin infinite 20s linear;
13-
}
14-
}
15-
16-
.App-header {
17-
background-color: #282c34;
18-
min-height: 100vh;
19-
display: flex;
20-
flex-direction: column;
21-
align-items: center;
22-
justify-content: center;
23-
font-size: calc(10px + 2vmin);
24-
color: white;
25-
}
26-
27-
.App-link {
28-
color: #61dafb;
29-
}
30-
31-
@keyframes App-logo-spin {
32-
from {
33-
transform: rotate(0deg);
34-
}
35-
to {
36-
transform: rotate(360deg);
37-
}
1+
.allButFooter {
2+
min-height: calc(100vh - 188px);
3+
margin-bottom: 60px;
384
}

‎src/App.tsx‎

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,27 +6,32 @@ import { Editor } from "./pages/Editor";
66
import { Pages } from "./enums/Pages";
77
import { Help } from "./pages/Help";
88
import { Contact } from "./pages/Contact";
9+
import { Footer } from "./pages/components/Footer";
910

1011
function App() {
1112
return (
1213
<Router>
1314
<NavBar />
1415

15-
<Routes>
16-
<Route path={process.env.PUBLIC_URL} element={<Automadeasy />} />
17-
<Route
18-
path={`${process.env.PUBLIC_URL}/${Pages.Editor}`}
19-
element={<Editor />}
20-
/>
21-
<Route
22-
path={`${process.env.PUBLIC_URL}/${Pages.Help}`}
23-
element={<Help />}
24-
/>
25-
<Route
26-
path={`${process.env.PUBLIC_URL}/${Pages.Contact}`}
27-
element={<Contact />}
28-
/>
29-
</Routes>
16+
<div className="allButFooter">
17+
<Routes>
18+
<Route path={process.env.PUBLIC_URL} element={<Automadeasy />} />
19+
<Route
20+
path={`${process.env.PUBLIC_URL}/${Pages.Editor}`}
21+
element={<Editor />}
22+
/>
23+
<Route
24+
path={`${process.env.PUBLIC_URL}/${Pages.Help}`}
25+
element={<Help />}
26+
/>
27+
<Route
28+
path={`${process.env.PUBLIC_URL}/${Pages.Contact}`}
29+
element={<Contact />}
30+
/>
31+
</Routes>
32+
</div>
33+
34+
<Footer />
3035
</Router>
3136
);
3237
}

‎src/index.css‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,8 @@
11
body {
22
margin: 0;
3-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4-
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
3+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
4+
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
55
sans-serif;
66
-webkit-font-smoothing: antialiased;
77
-moz-osx-font-smoothing: grayscale;
88
}
9-
10-
code {
11-
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12-
monospace;
13-
}

‎src/pages/Automadeasy.tsx‎

Lines changed: 23 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Button, Container, Divider, Grid, Typography } from "@mui/material";
1+
import { Box, Button, Divider, Grid, Typography } from "@mui/material";
22
import {
33
StyledGridOverlay,
44
StyledSvg,
@@ -10,25 +10,24 @@ import TimelineConnector from "@mui/lab/TimelineConnector";
1010
import TimelineContent from "@mui/lab/TimelineContent";
1111
import TimelineDot from "@mui/lab/TimelineDot";
1212
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
13-
import { Box } from "@mui/system";
1413
import { homeBackgroundColor } from "../consts/Colors";
15-
16-
let x: { width: number; height: number };
17-
x = { width: 100, height: 200 };
14+
import "./css/Automadeasy.css";
1815

1916
export const Automadeasy = () => {
2017
console.log("re rendering Automadeasy");
18+
2119
return (
2220
<>
2321
<Grid
2422
container
2523
direction="row"
2624
justifyContent="space-evenly"
25+
className="hero-section-1"
26+
columnSpacing={10}
2727
alignItems="center"
28-
padding={"7rem"}
28+
p={"7rem"}
2929
sx={{
3030
backgroundColor: homeBackgroundColor,
31-
clipPath: "polygon(0 0, 100% 0, 100% 100%, 0 80%)",
3231
}}
3332
>
3433
<Grid item sm={3}>
@@ -55,21 +54,19 @@ export const Automadeasy = () => {
5554
container
5655
direction="row"
5756
justifyContent="space-evenly"
57+
className="hero-section-2"
58+
columnSpacing={10}
59+
rowSpacing={{
60+
xs: 5,
61+
sm: 0,
62+
}}
5863
alignItems="center"
59-
p={"7rem"}
64+
p={"8rem"}
6065
sx={{
6166
backgroundColor: homeBackgroundColor,
62-
// make this clipPath reverse of the one above
63-
clipPath: "polygon(0 20%, 100% 0, 100% 100%, 0 100%)",
6467
}}
6568
>
66-
<Grid
67-
item
68-
sm
69-
sx={{
70-
width: "50%",
71-
}}
72-
>
69+
<Grid item sm>
7370
<Typography
7471
variant="h4"
7572
fontWeight={"bold"}
@@ -112,7 +109,15 @@ export const Automadeasy = () => {
112109
</Grid>
113110
</Grid>
114111

115-
<Grid container direction="row" justifyContent="space-evenly" py={"7rem"}>
112+
<Grid
113+
container
114+
direction={{
115+
xs: "column",
116+
md: "row",
117+
}}
118+
justifyContent="space-evenly"
119+
paddingTop={"7rem"}
120+
>
116121
<Grid item xs>
117122
<Typography variant="h6" color={"black"} align={"center"}>
118123
Creating Automaton
@@ -207,19 +212,6 @@ export const Automadeasy = () => {
207212
</Timeline>
208213
</Grid>
209214
</Grid>
210-
211-
<Container
212-
maxWidth={false}
213-
component="footer"
214-
sx={{
215-
py: "1rem",
216-
backgroundColor: homeBackgroundColor,
217-
}}
218-
>
219-
<Typography variant="subtitle1" color={"black"} align={"center"} fontWeight={"bold"}>
220-
Copyright © {new Date().getFullYear()} Automadeasy
221-
</Typography>
222-
</Container>
223215
</>
224216
);
225217
};

‎src/pages/components/Footer.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { Container, Typography } from "@mui/material";
2+
import { homeBackgroundColor } from "../../consts/Colors";
3+
4+
export const Footer = () => {
5+
return (
6+
<Container
7+
maxWidth={false}
8+
component="footer"
9+
sx={{
10+
py: "1rem",
11+
backgroundColor: homeBackgroundColor,
12+
}}
13+
>
14+
<Typography
15+
variant="subtitle1"
16+
color={"black"}
17+
align={"center"}
18+
fontWeight={"bold"}
19+
>
20+
Copyright © {new Date().getFullYear()} Automadeasy
21+
</Typography>
22+
</Container>
23+
);
24+
};

‎src/pages/components/Navbar.tsx‎

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,19 @@
1-
import AppBar from "@mui/material/AppBar";
2-
import Box from "@mui/material/Box";
3-
import Toolbar from "@mui/material/Toolbar";
4-
import IconButton from "@mui/material/IconButton";
5-
import Typography from "@mui/material/Typography";
6-
import Menu from "@mui/material/Menu";
1+
import {
2+
AppBar,
3+
Container,
4+
Toolbar,
5+
Box,
6+
Typography,
7+
IconButton,
8+
Menu,
9+
Button,
10+
Link,
11+
} from "@mui/material";
712
import MenuIcon from "@mui/icons-material/Menu";
8-
import Container from "@mui/material/Container";
9-
import Button from "@mui/material/Button";
1013
import { Pages } from "../../enums/Pages";
1114
import { Link as RouterLink } from "react-router-dom";
12-
import Link from "@mui/material/Link";
1315
import { useState } from "react";
16+
import "./css/Navbar.css";
1417

1518
const pages = Object.values(Pages);
1619

@@ -28,7 +31,13 @@ export function NavBar() {
2831
};
2932

3033
return (
31-
<AppBar position="static">
34+
<AppBar
35+
position="static"
36+
className="navbar"
37+
sx={{
38+
bgcolor: "secondary.main",
39+
}}
40+
>
3241
<Container maxWidth={false}>
3342
<Toolbar disableGutters>
3443
<Box
@@ -115,13 +124,15 @@ export function NavBar() {
115124
alt="logo"
116125
src="/logo192.png"
117126
maxWidth={"30px"}
127+
className="navbar-mobile-logo"
118128
sx={{ display: { xs: "flex", md: "none" }, mr: 1 }}
119129
/>
120130
<Typography
121131
variant="h5"
122132
noWrap
123133
component={RouterLink}
124134
to={process.env.PUBLIC_URL}
135+
className="navbar-mobile-title"
125136
sx={{
126137
mr: 7,
127138
display: { xs: "flex", md: "none" },

‎src/pages/components/css/Navbar.css‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
.navbar {
2+
height: 64px;
3+
clip-path: ellipse(700px 85px at 20% -40%);
4+
-webkit-clip-path: ellipse(700px 85px at 20% -40%);
5+
}
6+
7+
@media (min-width: 1440px) {
8+
.navbar {
9+
clip-path: ellipse(1400px 85px at -10% -20%);
10+
-webkit-clip-path: ellipse(1400px 85px at -10% -20%);
11+
}
12+
}
13+
14+
@media (max-width: 400px) {
15+
.navbar-mobile-title {
16+
font-size: 1.25rem !important;
17+
}
18+
.navbar-mobile-logo {
19+
width: 1.5rem !important;
20+
}
21+
}
22+
23+
@media (max-width: 300px) {
24+
.navbar-mobile-title {
25+
font-size: 1rem !important;
26+
}
27+
.navbar-mobile-logo {
28+
width: 1.25rem !important;
29+
}
30+
}

‎src/pages/css/Automadeasy.css‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
.hero-section-1 {
2+
clip-path: ellipse(1200px 150px at 25% 50%);
3+
-webkit-clip-path: ellipse(1200px 150px at 25% 50%);
4+
}
5+
6+
.hero-section-2 {
7+
clip-path: ellipse(1050px 200px at 60% 50%);
8+
-webkit-clip-path: ellipse(1050px 200px at 60% 50%);
9+
}
10+
11+
@media (max-width: 900px) {
12+
.hero-section-1 {
13+
clip-path: ellipse(750px 200px at 35% 50%);
14+
-webkit-clip-path: ellipse(750px 200px at 35% 50%);
15+
}
16+
.hero-section-2 {
17+
clip-path: ellipse(800px 200px at 75% 50%);
18+
-webkit-clip-path: ellipse(800px 200px at 75% 50%);
19+
}
20+
}
21+
22+
@media (max-width: 600px) {
23+
.hero-section-1 {
24+
clip-path: ellipse(750px 250px at 35% 50%);
25+
-webkit-clip-path: ellipse(750px 250px at 35% 50%);
26+
}
27+
.hero-section-2 {
28+
clip-path: ellipse(1000px 300px at 80% 55%);
29+
-webkit-clip-path: ellipse(1000px 300px at 80% 55%);
30+
}
31+
}
32+
33+
@media (max-width: 450px) {
34+
.hero-section-1 {
35+
clip-path: ellipse(750px 250px at 35% 50%);
36+
-webkit-clip-path: ellipse(750px 250px at 35% 50%);
37+
}
38+
.hero-section-2 {
39+
clip-path: ellipse(800px 350px at 80% 55%);
40+
-webkit-clip-path: ellipse(800px 350px at 80% 55%);
41+
}
42+
}

0 commit comments

Comments
 (0)