Skip to content

Commit f8713ed

Browse files
trana5197trana5197
authored
Subsytem description new design: #132 (#138)
* New Subsytem with added design done * Final Subsytem
1 parent a651dd0 commit f8713ed

File tree

7 files changed

+340
-216
lines changed

7 files changed

+340
-216
lines changed

‎package-lock.json‎

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

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"react-bootstrap-switch": "15.5.3",
1717
"react-datetime": "2.16.3",
1818
"react-dom": "^16.10.0",
19+
"react-icons": "^4.11.0",
1920
"react-multi-carousel": "^2.6.3",
2021
"react-router": "5.0.1",
2122
"react-router-dom": "5.0.1",

‎src/components/UI/Card/CardContainer.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
.containerGrid {
2+
max-width: 1300px;
3+
/* background-color: #bdc8d3; */
4+
margin: 0 auto 60px auto;
5+
padding: 100px;
6+
display: grid;
7+
grid-template-columns: repeat(2, 1fr);
8+
gap: 40px;
9+
border-radius: 9px;
10+
color: #000;
11+
}
12+
13+
@media only screen and (max-width: 800px) {
14+
.containerGrid {
15+
grid-template-columns: 1fr;
16+
}
17+
}

‎src/components/UI/Card/CardContainer.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React from "react";
2+
import "./CardContainer.css";
3+
4+
function Card({ children }) {
5+
return <div className="containerGrid">{children}</div>;
6+
}
7+
8+
export default Card;

‎src/views/TeamPage/TeamPage.js‎

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -37,39 +37,39 @@ import React from "react";
3737
import ExamplesNavbar from "../../components/Navbars/ExamplesNavbar";
3838

3939
// core components
40-
import TeamVideo from './components/TeamVideo/TeamVideo';
40+
import TeamVideo from "./components/TeamVideo/TeamVideo";
4141
import LegacyCarousel from "./components/LegacyCarousel/LegacyCarousel";
4242
import TeamHeads from "./components/TeamHeads/TeamHeads";
4343
import SubS from "./components/Subsystems/Subsystem";
4444

45-
import FadeIn from 'views/Animations/FadeIn';
45+
import FadeIn from "views/Animations/FadeIn";
4646
function LandingPage() {
47-
document.documentElement.classList.remove("nav-open");
48-
React.useEffect(() => {
49-
document.body.classList.add("profile-page");
50-
return function cleanup() {
51-
document.body.classList.remove("profile-page");
52-
};
53-
});
54-
return (
55-
<div>
56-
<ExamplesNavbar activePage="/team" />
57-
<div className="main">
58-
<FadeIn>
59-
<TeamHeads />
60-
</FadeIn>
61-
<FadeIn>
62-
<SubS />
63-
</FadeIn>
64-
<FadeIn>
65-
<LegacyCarousel />
66-
</FadeIn>
67-
<FadeIn>
68-
<TeamVideo />
69-
</FadeIn>
70-
</div>
71-
</div>
72-
);
47+
document.documentElement.classList.remove("nav-open");
48+
React.useEffect(() => {
49+
document.body.classList.add("profile-page");
50+
return function cleanup() {
51+
document.body.classList.remove("profile-page");
52+
};
53+
});
54+
return (
55+
<div>
56+
<ExamplesNavbar activePage="/team" />
57+
<div className="main">
58+
<FadeIn>
59+
<TeamHeads />
60+
</FadeIn>
61+
<FadeIn>
62+
<SubS />
63+
</FadeIn>
64+
<FadeIn>
65+
<LegacyCarousel />
66+
</FadeIn>
67+
<FadeIn>
68+
<TeamVideo />
69+
</FadeIn>
70+
</div>
71+
</div>
72+
);
7373
}
7474

7575
export default LandingPage;

‎src/views/TeamPage/components/Subsystems/Subsystem.js‎

Lines changed: 114 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -1,107 +1,122 @@
11
import React from "react";
22
import { Link } from "react-router-dom";
3-
import { Card, Col, Container, Row } from "react-bootstrap";
43
import "./Subsystems.css";
4+
import CardContainer from "components/UI/Card/CardContainer";
5+
import { FaGears } from "react-icons/fa6";
6+
import { GiElectricalResistance } from "react-icons/gi";
7+
import { HiCode } from "react-icons/hi";
8+
import { BsGraphUp } from "react-icons/bs";
59

610
function SubS() {
7-
return (
8-
<div className="section team-data landing-section">
9-
<Container>
10-
<Row className="d-flex justify-content-center">
11-
<Col className="ml-auto mr-auto" md="12">
12-
<h2 className="text-center heading-main">Subsystems</h2>
13-
</Col>
14-
</Row>
15-
<Row>
16-
<Col className="container text-center">
17-
<Card className="card-plain bg-light card-subsystems">
18-
<div className="row w-100 justify-content-center font-weight-bold h5">
19-
MECHANICAL
20-
{/* <i class="fa fa-cogs fa-md"></i> */}
21-
</div>
22-
<p className="hide" style={{ fontSize: "16px" }}>
23-
The mechanical subsystem is responsible for design and
24-
manufacture of the vehicle. We design the entire vehicle and
25-
accessories - working on Fluid Dynamics, Actuator controls, and
26-
Pneumatics. We plan, simulate and test the physical structure of
27-
the AUV and then manufacture it using state of art manufacturing
28-
techniques. We use latest software such as SolidWorks and ANSYS
29-
to make the design robust, modular, light and strong.
30-
</p>
31-
<Link to="/mechanical">
32-
<p className="redirect">Know More</p>
33-
</Link>
34-
</Card>
35-
</Col>
36-
<Col className="container text-center">
37-
<Card className="card-plain bg-light card-subsystems">
38-
<div className="row w-100 justify-content-center font-weight-bold h5">
39-
ELECTRICAL
40-
{/* <i class="fa fa-bolt fa-md"></i> */}
41-
</div>
42-
<p className="hide">
43-
The Electrical Subsystem builds the framework powering our AUV
44-
consisting of Power Distribution System and the Monitoring
45-
system. Arduino Mega is used to control the actuation and read
46-
data from various sensors which in turn is controlled by an
47-
Intel NUC. We work on the electrical aspects of the AUV,
48-
providing power, driving actuators and interfacing with various
49-
sensors on board. We build custom PCBs and act as an interface
50-
between software and mechanical subsystems.
51-
</p>
52-
<Link to="/electrical">
53-
<p className="redirect">Know More</p>
54-
</Link>
55-
</Card>
56-
</Col>
57-
</Row>
58-
<Row>
59-
<Col className="container text-center">
60-
<Card className="card-plain bg-light card-subsystems">
61-
<div className="row w-100 justify-content-center font-weight-bold h5">
62-
SOFTWARE
63-
{/* <i class="fa fa-code fa-md" /> */}
64-
</div>
65-
<p className="hide">
66-
The software subsystem develops the algorithms controlling the
67-
robot and making it autonomous. We use latest cutting edge
68-
technologies in the world of robotics software. The software
69-
subsytem carries out simulations Gazebo and UWSim to ensure that
70-
things work smoothly before actual testing.The main aim of
71-
software subsystem is to write code, that is generic and error
72-
free, in order efficiently coordinate the vehicles motion and
73-
enable it perform at full potential.
74-
</p>
75-
<Link to="/software">
76-
<p className="redirect">Know More</p>
77-
</Link>
78-
</Card>
79-
</Col>
80-
<Col className="container text-center">
81-
<Card className="card-plain bg-light card-subsystems">
82-
<div className="row w-100 justify-content-center font-weight-bold h5">
83-
BUSINESS &nbsp;
84-
{/* <i class="fa fa-briefcase fa-md"></i> */}
85-
</div>
86-
<p className="hide">
87-
The Business subsystem manages the fundings and outreach
88-
activities of the team. We manage the expenditures and fundings
89-
of the team. We represent the team before our sponsors and try
90-
to procure them. We maintain the team website and pages on the
91-
different social media platforms. The main aim of the business
92-
subsystem is to ensure that the team gets sufficient fundings
93-
and has an excellent outreach to ensure the smooth functioning
94-
of the other three subsystems.
95-
</p>
96-
<Link to="/business">
97-
<p className="redirect">Know More</p>
98-
</Link>
99-
</Card>
100-
</Col>
101-
</Row>
102-
</Container>
103-
</div>
104-
);
11+
return (
12+
<>
13+
<h2 className="heading-secondary">SUBSYSTEMS</h2>
14+
<CardContainer>
15+
<div>
16+
<div className="center">
17+
<p className="subSHeading">MECHANICAL</p>
18+
<span>
19+
<FaGears size={40} style={{ fill: "#7a90a7" }} />
20+
</span>
21+
</div>
22+
<div className="info-link">
23+
<p className="info">
24+
The mechanical subsystem is responsible for design
25+
and manufacture of the vehicle. We design the entire
26+
vehicle and accessories - working on Fluid Dynamics,
27+
Actuator controls, and Pneumatics. We plan, simulate
28+
and test the physical structure of the AUV and then
29+
manufacture it using state of art manufacturing
30+
techniques. We use latest software such as
31+
SolidWorks and ANSYS to make the design robust,
32+
modular, light and strong.
33+
</p>
34+
<Link to="/mechanical">
35+
<p className="link">Know More</p>
36+
</Link>
37+
</div>
38+
</div>
39+
<div>
40+
<div className="center">
41+
<p className="subSHeading">Electrical</p>
42+
<span>
43+
<GiElectricalResistance
44+
size={40}
45+
style={{ fill: "#7a90a7" }}
46+
/>
47+
</span>
48+
</div>
49+
<div className="info-link">
50+
<p className="info">
51+
The Electrical Subsystem builds the framework
52+
powering our AUV consisting of Power Distribution
53+
System and the Monitoring system. Arduino Mega is
54+
used to control the actuation and read data from
55+
various sensors which in turn is controlled by an
56+
Intel NUC. We work on the electrical aspects of the
57+
AUV, providing power, driving actuators and
58+
interfacing with various sensors on board. We build
59+
custom PCBs and act as an interface between software
60+
and mechanical subsystems.
61+
</p>
62+
<Link to="/electrical">
63+
<p className="link">Know More</p>
64+
</Link>
65+
</div>
66+
</div>
67+
<div>
68+
<div className="center">
69+
<p className="subSHeading">Software</p>
70+
<span>
71+
<HiCode size={40} style={{ fill: "#7a90a7" }} />
72+
</span>
73+
</div>
74+
<div className="info-link">
75+
<p className="info">
76+
The software subsystem develops the algorithms
77+
controlling the robot and making it autonomous. We
78+
use latest cutting edge technologies in the world of
79+
robotics software. The software subsytem carries out
80+
simulations Gazebo and UWSim to ensure that things
81+
work smoothly before actual testing.The main aim of
82+
software subsystem is to write code, that is generic
83+
and error free, in order efficiently coordinate the
84+
vehicles motion and enable it perform at full
85+
potential.
86+
</p>
87+
<Link to="/software">
88+
<p className="link">Know More</p>
89+
</Link>
90+
</div>
91+
</div>
92+
<div>
93+
<div className="center">
94+
<p className="subSHeading">BUSINESS</p>{" "}
95+
<span className="icon">
96+
<BsGraphUp size={40} style={{ fill: "#7a90a7" }} />
97+
</span>
98+
</div>
99+
<div className="info-link">
100+
<p className="info">
101+
The Business subsystem manages the fundings and
102+
outreach activities of the team. We manage the
103+
expenditures and fundings of the team. We represent
104+
the team before our sponsors and try to procure
105+
them. We maintain the team website and pages on the
106+
different social media platforms. The main aim of
107+
the business subsystem is to ensure that the team
108+
gets sufficient fundings and has an excellent
109+
outreach to ensure the smooth functioning of the
110+
other three subsystems.
111+
</p>
112+
<Link to="/business">
113+
<p className="link">Know More</p>
114+
</Link>
115+
</div>
116+
</div>
117+
</CardContainer>
118+
</>
119+
);
105120
}
106121

107122
export default SubS;

0 commit comments

Comments
 (0)