From e70762440fd56c9c8ca2fc416013cb1c26d9b60e Mon Sep 17 00:00:00 2001
From: akshayhere300 <ifakeone6@gmail.com>
Date: Fri, 7 Jul 2023 21:41:20 +0530
Subject: [PATCH] Responsive & Styling

---
 src/App.js                                    |   2 +-
 .../SubsystemHeads/SubsystemHeads.js          | 174 ++++++++------
 .../components/Subsystems/Subsystem.js        | 221 ++++++++++--------
 .../components/Subsystems/Subsystems.css      | 184 ++++++++-------
 4 files changed, 318 insertions(+), 263 deletions(-)

diff --git a/src/App.js b/src/App.js
index 923236c9..dd0853df 100644
--- a/src/App.js
+++ b/src/App.js
@@ -24,7 +24,7 @@ import Software from "views/MembersPage/Software";
 import Electrical from "views/MembersPage/Electrical";
 import Business from "views/MembersPage/Business";
 
-const App = () => {
+const App = () => {  
   return (
     <div>
       <HashRouter>
diff --git a/src/views/TeamPage/components/SubsystemHeads/SubsystemHeads.js b/src/views/TeamPage/components/SubsystemHeads/SubsystemHeads.js
index 99c82300..1043a616 100644
--- a/src/views/TeamPage/components/SubsystemHeads/SubsystemHeads.js
+++ b/src/views/TeamPage/components/SubsystemHeads/SubsystemHeads.js
@@ -1,84 +1,108 @@
-import React from 'react';
+import React from "react";
 import {
-  Button,
-  Card,
-  CardBody,
-  CardFooter,
-  CardTitle,
-  Col,
-  Container,
-  Row
+	Button,
+	Card,
+	CardBody,
+	CardFooter,
+	CardTitle,
+	Col,
+	Container,
+	Row,
 } from "reactstrap";
 import "./SubsystemHeads.css";
 import team from "../../../../data/TeamMembers.json";
 
 function TalkAbout() {
-    // console.log(String(team.teamData[0].items[0].image));
-    return (
-        <>
-            <div className="section text-center">
-                <Container>
-                    {
-                        team.teamData.map((section) => {
-                            // console.log(section);
-                            return(
-                                <div key={""}>
-                                    <h1 className="title heading-main">{section.heading}</h1>
-                                    <div>
-                                        <Row>
-                                            {section.items.map((teamMember)=>{
-                                                // console.log(teamMember);
-                                                return(
-                                                    <Col lg="3 ml-auto mr-auto" sm="6" key={teamMember.name}>
-                                                        <Card className="card-profile card-plain card-auv">
-                                                            <CardBody>
-                                                                <a href="#pablo" onClick={(e) => e.preventDefault()}>
-                                                                    <div className="author">
-                                                                        <img
-                                                                            alt="..."
-                                                                            src={require("assets/img/"+ teamMember.image)}
-                                                                            className="image-prof"
-                                                                        />
-                                                                        <></>
-                                                                        <CardTitle tag="h4" className="auv-description-primary pt-3">
-                                                                            {teamMember.name}
-                                                                        </CardTitle>
-                                                                        <h6 className="auv-description-primary"> {teamMember.subheading}</h6>
-                                                                    </div>
-                                                                </a>
-                                                            </CardBody>
-                                                            <CardFooter className="text-center margin-neg">
-                                                                <Button
-                                                                    className="btn-just-icon btn-neutral"
-                                                                    color="link"
-                                                                    href="#pablo"
-                                                                    onClick={(e) => e.preventDefault()}
-                                                                >
-                                                                    <i className="fa fa-facebook flip"/>
-                                                                </Button>
-                                                                <Button
-                                                                    className="btn-just-icon btn-neutral ml-1"
-                                                                    color="link"
-                                                                    href="#pablo"
-                                                                    onClick={(e) => e.preventDefault()}
-                                                                >
-                                                                    <i className="fa fa-linkedin flip"/>
-                                                                </Button>
-                                                            </CardFooter>
-                                                        </Card>
-                                                    </Col>
-                                                )
-                                            })}
-                                        </Row>
-                                    </div>
-                                </div>
-                            )
-                        })
-                    }
-                </Container>
-            </div>
-        </>
-    );
+	// console.log(String(team.teamData[0].items[0].image));
+	return (
+		<>
+			<div className="section text-center">
+				<Container>
+					{team.teamData.map((section) => {
+						// console.log(section);
+						return (
+							<div key={""}>
+								<h1 className="title heading-main">
+									{section.heading}
+								</h1>
+								<div>
+									<Row>
+										{section.items.map((teamMember) => {
+											// console.log(teamMember);
+											return (
+												<Col
+													lg="3 ml-auto mr-auto"
+													sm="6"
+													key={teamMember.name}
+												>
+													<Card className="card-profile card-plain card-auv">
+														<CardBody>
+															<a
+																href="#pablo"
+																onClick={(e) =>
+																	e.preventDefault()
+																}
+															>
+																<div className="author">
+																	<img
+																		alt="..."
+																		src={require("assets/img/" +
+																			teamMember.image)}
+																		className="image-prof"
+																	/>
+																	<></>
+																	<CardTitle
+																		tag="h4"
+																		className="auv-description-primary pt-3"
+																	>
+																		{
+																			teamMember.name
+																		}
+																	</CardTitle>
+																	<h6 className="auv-description-primary">
+																		{" "}
+																		{
+																			teamMember.subheading
+																		}
+																	</h6>
+																</div>
+															</a>
+														</CardBody>
+														<CardFooter className="text-center margin-neg">
+															<Button
+																className="btn-just-icon btn-neutral"
+																color="link"
+																href="#pablo"
+																onClick={(e) =>
+																	e.preventDefault()
+																}
+															>
+																<i className="fa fa-facebook flip" />
+															</Button>
+															<Button
+																className="btn-just-icon btn-neutral ml-1"
+																color="link"
+																href="#pablo"
+																onClick={(e) =>
+																	e.preventDefault()
+																}
+															>
+																<i className="fa fa-linkedin flip" />
+															</Button>
+														</CardFooter>
+													</Card>
+												</Col>
+											);
+										})}
+									</Row>
+								</div>
+							</div>
+						);
+					})}
+				</Container>
+			</div>
+		</>
+	);
 }
 
 export default TalkAbout;
diff --git a/src/views/TeamPage/components/Subsystems/Subsystem.js b/src/views/TeamPage/components/Subsystems/Subsystem.js
index f012f31f..4c65dd32 100644
--- a/src/views/TeamPage/components/Subsystems/Subsystem.js
+++ b/src/views/TeamPage/components/Subsystems/Subsystem.js
@@ -4,104 +4,129 @@ import { Card, Col, Container, Row } from "react-bootstrap";
 import "./Subsystems.css";
 
 function SubS() {
-  return (
-    <div className="section team-data landing-section">
-      <Container>
-        <Row className="d-flex justify-content-center">
-          <Col className="ml-auto mr-auto" md="12">
-            <h2 className="text-center heading-main">Subsystems</h2>
-          </Col>
-        </Row>
-        <Row>
-          <Col className="container text-center">
-            <Card className="card-plain bg-light card-subsystems">
-              <div className="row w-100 justify-content-center font-weight-bold h5">
-                MECHANICAL 
-                {/* <i class="fa fa-cogs fa-md"></i> */}
-              </div>
-              <p className="hide" style={{ fontSize: "16px" }}>
-                The mechanical subsystem is responsible for design and
-                manufacture of the vehicle. We design the entire vehicle and
-                accessories - working on Fluid Dynamics, Actuator controls, and
-                Pneumatics. We plan, simulate and test the physical structure of
-                the AUV and then manufacture it using state of art manufacturing
-                techniques. We use latest software such as SolidWorks and ANSYS
-                to make the design robust, modular, light and strong.
-              </p>
-              <Link to="/mechanical">
-                <p className="redirect">Know More</p>
-              </Link>
-            </Card>
-          </Col>
-          <Col className="container text-center">
-            <Card className="card-plain bg-light card-subsystems">
-              <div className="row w-100 justify-content-center font-weight-bold h5">
-                ELECTRICAL 
-                {/* <i class="fa fa-bolt fa-md"></i> */}
-              </div>
-              <p className="hide">
-                The Electrical Subsystem builds the framework powering our AUV
-                consisting of Power Distribution System and the Monitoring
-                system. Arduino Mega is used to control the actuation and read
-                data from various sensors which in turn is controlled by an
-                Intel NUC. We work on the electrical aspects of the AUV,
-                providing power, driving actuators and interfacing with various
-                sensors on board. We build custom PCBs and act as an interface
-                between software and mechanical subsystems.
-              </p>
-              <Link to="/electrical">
-                <p className="redirect">Know More</p>
-              </Link>
-            </Card>
-          </Col>
-        </Row>
-        <Row>
-          <Col className="container text-center">
-            <Card className="card-plain bg-light card-subsystems">
-              <div className="row w-100 justify-content-center font-weight-bold h5">
-                SOFTWARE 
-                {/* <i class="fa fa-code fa-md" /> */}
-              </div>
-              <p className="hide">
-                The software subsystem develops the algorithms controlling the
-                robot and making it autonomous. We use latest cutting edge
-                technologies in the world of robotics software. The software
-                subsytem carries out simulations Gazebo and UWSim to ensure that
-                things work smoothly before actual testing.The main aim of
-                software subsystem is to write code, that is generic and error
-                free, in order efficiently coordinate the vehicles motion and
-                enable it perform at full potential.
-              </p>
-              <Link to="/software">
-                <p className="redirect">Know More</p>
-              </Link>
-            </Card>
-          </Col>
-          <Col className="container text-center">
-            <Card className="card-plain bg-light card-subsystems">
-              <div className="row w-100 justify-content-center font-weight-bold h5">
-                BUSINESS &nbsp; 
-                {/* <i class="fa fa-briefcase fa-md"></i> */}
-              </div>
-              <p className="hide">
-                The Business subsystem manages the fundings and outreach
-                activities of the team. We manage the expenditures and fundings
-                of the team. We represent the team before our sponsors and try
-                to procure them. We maintain the team website and pages on the
-                different social media platforms. The main aim of the business
-                subsystem is to ensure that the team gets sufficient fundings
-                and has an excellent outreach to ensure the smooth functioning
-                of the other three subsystems.
-              </p>
-              <Link to="/business">
-                <p className="redirect">Know More</p>
-              </Link>
-            </Card>
-          </Col>
-        </Row>
-      </Container>
-    </div>
-  );
+	return (
+		<div className="section team-data landing-section">
+			<Container>
+				<Row className="d-flex justify-content-center">
+					<Col className="ml-auto mr-auto" md="12">
+						<h2 className="text-center heading-main">Subsystems</h2>
+					</Col>
+				</Row>
+				<Row>
+					<Col className="container text-center">
+						<Card className="card-plain bg-light card-subsystems">
+							<div className="row w-100 justify-content-center font-weight-bold h5">
+								MECHANICAL
+								{/* <i class="fa fa-cogs fa-md"></i> */}
+							</div>
+							<p className="hide" style={{ fontSize: "16px" }}>
+								The mechanical subsystem is responsible for
+								design and manufacture of the vehicle.{" "}
+								<span className="hide-para-span">
+									We design the entire vehicle and accessories
+									- working on Fluid Dynamics, Actuator
+									controls, and Pneumatics.
+								</span>{" "}
+								We plan, simulate and test the physical
+								structure of the AUV and then manufacture it
+								using state of art manufacturing techniques. We
+								use latest software such as SolidWorks and ANSYS
+								to make the design robust, modular, light and
+								strong.
+							</p>
+							<Link to="/mechanical">
+								<p className="redirect">Know More</p>
+							</Link>
+						</Card>
+					</Col>
+					<Col className="container text-center">
+						<Card className="card-plain bg-light card-subsystems">
+							<div className="row w-100 justify-content-center font-weight-bold h5">
+								ELECTRICAL
+								{/* <i class="fa fa-bolt fa-md"></i> */}
+							</div>
+							<p className="hide">
+								The Electrical Subsystem builds the framework
+								powering our AUV consisting of Power
+								Distribution System and the Monitoring system.
+								Arduino Mega is used to control the actuation
+								and read data from various sensors which in turn
+								is controlled by an Intel NUC.
+								<span className="hide-para-span">
+									{" "}
+									We work on the electrical aspects of the
+									AUV, providing power, driving actuators and
+									interfacing with various sensors on board.
+								</span>{" "}
+								We build custom PCBs and act as an interface
+								between software and mechanical subsystems.
+							</p>
+							<Link to="/electrical">
+								<p className="redirect">Know More</p>
+							</Link>
+						</Card>
+					</Col>
+				</Row>
+				<Row>
+					<Col className="container text-center">
+						<Card className="card-plain bg-light card-subsystems">
+							<div className="row w-100 justify-content-center font-weight-bold h5">
+								SOFTWARE
+								{/* <i class="fa fa-code fa-md" /> */}
+							</div>
+							<p className="hide">
+								The software subsystem develops the algorithms
+								controlling the robot and making it autonomous.
+								<span className="hide-para-span">
+									{" "}
+									We use latest cutting edge technologies in
+									the world of robotics software. The software
+									subsytem carries out simulations Gazebo and
+									UWSim to ensure that things work smoothly
+									before actual testing.
+								</span>{" "}
+								The main aim of software subsystem is to write
+								code, that is generic and error free, in order
+								efficiently coordinate the vehicles motion and
+								enable it perform at full potential.
+							</p>
+							<Link to="/software">
+								<p className="redirect">Know More</p>
+							</Link>
+						</Card>
+					</Col>
+					<Col className="container text-center">
+						<Card className="card-plain bg-light card-subsystems">
+							<div className="row w-100 justify-content-center font-weight-bold h5">
+								BUSINESS &nbsp;
+								{/* <i class="fa fa-briefcase fa-md"></i> */}
+							</div>
+							<p className="hide">
+								The Business subsystem manages the fundings and
+								outreach activities of the team. We manage the
+								expenditures and fundings of the team.{" "}
+								<span className="hide-para-span">
+									{" "}
+									We represent the team before our sponsors
+									and try to procure them. We maintain the
+									team website and pages on the different
+									social media platforms.
+								</span>{" "}
+								The main aim of the business subsystem is to
+								ensure that the team gets sufficient fundings
+								and has an excellent outreach to ensure the
+								smooth functioning of the other three
+								subsystems.
+							</p>
+							<Link to="/business">
+								<p className="redirect">Know More</p>
+							</Link>
+						</Card>
+					</Col>
+				</Row>
+			</Container>
+		</div>
+	);
 }
 
 export default SubS;
diff --git a/src/views/TeamPage/components/Subsystems/Subsystems.css b/src/views/TeamPage/components/Subsystems/Subsystems.css
index da3d2c01..947a9542 100644
--- a/src/views/TeamPage/components/Subsystems/Subsystems.css
+++ b/src/views/TeamPage/components/Subsystems/Subsystems.css
@@ -1,155 +1,161 @@
 .accordian-section {
-  margin-bottom: 20px;
-  width: 100%;
-  box-shadow: 0px 2px 15px rgba(53, 35, 35, 0.2);
+	margin-bottom: 20px;
+	width: 100%;
+	box-shadow: 0px 2px 15px rgba(53, 35, 35, 0.2);
 }
 
 .accordian-toggle {
-  background-color: var(--color-tertiary);
-  /* max-height: 150px; */
-  min-height: 380px;
-  padding: 10px;
-  font-size: 2rem;
-  font-weight: 700;
-  font-family: var(--font-heading);
-  color: var(--color-black);
-  margin: 1.5rem;
-  border-radius: 3%;
+	background-color: var(--color-tertiary);
+	/* max-height: 150px; */
+	min-height: 380px;
+	padding: 10px;
+	font-size: 2rem;
+	font-weight: 700;
+	font-family: var(--font-heading);
+	color: var(--color-black);
+	margin: 1.5rem;
+	border-radius: 3%;
 }
 
 .accordian-toggle:hover {
-  transition: all 0.4s ease-in-out;
-  color: #fff;
+	transition: all 0.4s ease-in-out;
+	color: #fff;
 }
 
-.hide{
-  display: block;
-  text-align: left;
-  margin: 10px;
-  font-family: var(--font-primary);
+.hide {
+	display: block;
+	text-align: left;
+	margin: 10px;
+	font-family: var(--font-primary);
+	font-weight: 600;
+}
+.hide-para-span {
+	font-size: 16px;
+	color: rgb(34, 70, 109);
+	font-weight: bolder;
 }
 
-.redirect{
-  font-family: var(--font-primary);
-  text-decoration: underline;
-  font-weight: 900;
+.redirect {
+	font-family: var(--font-primary);
+	text-decoration: underline;
+	font-weight: 900;
 }
 
 @media only screen and (max-width: 900px) {
-  .hide{
-    display: none;
-  }
-  .accordian-toggle{
-    min-height: auto;
-  }
+	.hide {
+		display: block;
+	}
+	.accordian-toggle {
+		min-height: auto;
+	}
 }
 
 .subsystem-section {
-  padding-top: 40px;
+	padding-top: 40px;
 }
 
 .cardbody {
-  padding: 10px;
+	padding: 10px;
 }
 
 .member-img {
-  width: 100%;
+	width: 100%;
 }
 
 .card-background {
-  border-radius: 1rem;
-  width: 100%;
-  padding: 20px;
-  margin-bottom: 20px;
-  box-shadow: 5px 5px 20px rgba(12, 12, 12, 0.4);
-  background-color: var(--color-white);
+	border-radius: 1rem;
+	width: 100%;
+	padding: 20px;
+	margin-bottom: 20px;
+	box-shadow: 5px 5px 20px rgba(12, 12, 12, 0.4);
+	background-color: var(--color-white);
 }
 
 .subsystem-text {
-  font-size: 16px;
-  font-family: var(--font-primary);
-  font-weight: 600;
-  color: var(--color-primary);
+	font-size: 16px;
+	font-family: var(--font-primary);
+	font-weight: 600;
+	color: var(--color-primary);
 }
 
 .team {
-  background: #fff;
-  padding: 20px 20px 20px 20px;
-  align-items: center;
+	background: #fff;
+	padding: 20px 20px 20px 20px;
+	align-items: center;
 }
 
 .member {
-  align-items: center;
+	align-items: center;
 }
 
 .team .member {
-  border-radius: 0%;
-  margin-bottom: 0px;
-  overflow: hidden;
-  background: #fff;
-  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
+	border-radius: 0%;
+	margin-bottom: 0px;
+	overflow: hidden;
+	background: #fff;
+	box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
 }
 
 .team .member .member-img {
-  position: relative;
-  overflow: hidden;
-  border-radius: 0%;
+	position: relative;
+	overflow: hidden;
+	border-radius: 0%;
 }
 
 .team .member .social {
-  position: absolute;
-  left: 0;
-  bottom: 30px;
-  right: 0;
-  opacity: 0;
-  transition: ease-in-out 0.3s;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+	position: absolute;
+	left: 0;
+	bottom: 30px;
+	right: 0;
+	opacity: 0;
+	transition: ease-in-out 0.3s;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 }
 
 .team .member .social a {
-  transition: color 0.3s;
-  margin: 0 3px;
-  border-radius: 50px;
-  width: 36px;
-  height: 36px;
-  background: var(--color-tertiary);
-  transition: ease-in-out 0.3s;
-  color: #fff;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
+	transition: color 0.3s;
+	margin: 0 3px;
+	border-radius: 50px;
+	width: 36px;
+	height: 36px;
+	background: var(--color-tertiary);
+	transition: ease-in-out 0.3s;
+	color: #fff;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
 }
 
 .team .member .social a:hover {
-  background: var(--color-quartenary);
+	background: var(--color-quartenary);
 }
 
 .team .member .social i {
-  font-size: 18px;
-  line-height: 0;
+	font-size: 18px;
+	line-height: 0;
 }
 
 .team .member .member-info {
-  padding-bottom: 10px;
+	padding-bottom: 10px;
 }
 
 .team .member .member-info h4 {
-  font-weight: 700;
-  margin-bottom: 5px;
-  font-size: 18px;
-  color: var(--color-black);
+	font-weight: 700;
+	margin-bottom: 5px;
+	font-size: 18px;
+	color: var(--color-black);
 }
 
 .team .member .member-info span {
-  display: block;
-  font-size: 15px;
-  font-weight: 500;
-  color: var(--color-black);
+	display: block;
+	font-size: 15px;
+	font-weight: 500;
+	color: var(--color-black);
 }
 
 .team .member:hover .social {
-  opacity: 1;
-  bottom: 15px;
+	opacity: 1;
+	bottom: 15px;
 }