diff --git a/src/Home/Home.css b/src/Home/Home.css new file mode 100644 index 0000000..95cd0bc --- /dev/null +++ b/src/Home/Home.css @@ -0,0 +1,45 @@ +#HomeTop { + display: flex; + position: relative; + + justify-content: end; + align-items: center; +} + +#HomeTop img { + height: 76svh; + width: 100%; + background-image: url(https://picsum.photos/200); + background-size: cover; + background-position: center; + + position: absolute; + z-index: 0; +} + +#HomeTop div { + display: flex; + flex-direction: column; + + position: absolute; + z-index: 1; + + margin-right: 25svw; + margin-bottom: 25svh; +} + +#HomeTop div h1 { + margin: 0px; +} + +#HomeTop div h2 { +} + +#HomePageLayout div { + display: flex; +} + +#HomePageLayout div div { + display: flex; + flex-direction: column; +} diff --git a/src/Home/Home.jsx b/src/Home/Home.jsx new file mode 100644 index 0000000..a64fe56 --- /dev/null +++ b/src/Home/Home.jsx @@ -0,0 +1,119 @@ +import { Link } from "react-router-dom"; +import "./Home.css"; +import { useEffect } from "react"; + +/** + * @param {null} nothing - This takes in nothing + * @returns {JSX.Element} Page - This returns the page + * @description The Home page + * @author Brock + */ +export default function Home() { + useEffect(() => { + HeaderBannerHeight(); + }); + + /** + * @param {null} nothing - This takes in nothing + * @returns {null} nothing - This returns nothing + * @description This makes it so that the banner will always be 100% of the page at the top + * @author Brock + */ + const HeaderBannerHeight = () => { + const headerTop = document.getElementsByTagName("header")[0]; + const headerTopStyle = getComputedStyle(headerTop); + const headerTopInnerHeight = headerTop.offsetHeight; + // const headerTopMarginTop = parseFloat(headerTop.marginTop); + const headerTopMarginHeight = parseFloat(headerTopStyle.marginBottom); + + const headerTopTotalHeight = headerTopInnerHeight + headerTopMarginHeight; + + const HomeBannerTop = document.getElementById("HomeBannerTop"); + + HomeBannerTop.style.height = `calc(100svh - ${headerTopTotalHeight}px)`; + }; + return ( + <> +
+ +
+

UCalgary Baja

+

Catchphase goes here

+
+
+
+
+ +
+

Who We Are

+

+ UCalgary Baja is a student organization which designs, builds, and + racing an off-road vehicle in the Baja SAE intercollegiate + competition organized by the Society of Automotive Engineers (SAE) + every year. Schulich Off-Road's cars are tough, dependable, + competitive, and extremely fun to drive. +

+

+ UCalgary Baja is a team consisting of talented and determined + competitive individuals in engineering who strive to expand their + horizons, earn experience, and network with leading companies in + their respective fields. Our members achieve this by being a part + of one of our 6 sub-teams: Drivetrain, Logistics and Software, + Suspension, Chassis and Ergonomics, Steering, and Electrical and + Testing. +

+ Learn More +
+
+
+
+

Join the Team

+

+ Students involved in UCalgary Baja gain practical experience in + design and manufacturing by constructing various car components. + They learn to balance cost, manufacturing limitations, and + performance to develop optimal parts, budgets, and processes. This + involves using CAD technology like SolidWorks and FEA simulations. +

+

+ Additionally, members acquire hands-on skills such as welding and + operating metal cutting machines. Each team member handles a + specific component, collaborating, researching, and + troubleshooting throughout the design and execution process. After + building the vehicle, students can attend competitions worldwide, + where they must address issues promptly and work as a team to + replace broken parts to stay competitive. +

+ Learn More + {/* Replace with Join later*/} +
+ +
+
+ Sponsor Section +
+ See All + Support Us +
+
+
+ +
+

Sponsor Us

+

+ UCalgary Baja is a student organization responsible for designing, + building, and racing an off-road vehicle in the Baja SAE + intercollegiate competition organized by the Society of Automotive + Engineers (SAE) every year. Schulich Off-Road's cars are tough, + dependable, competitive, and extremely fun to drive. +

+ Learn More +
+
+
+ +
+
+ + ); +} diff --git a/src/index.js b/src/index.js index 0865c43..f5c9ec4 100644 --- a/src/index.js +++ b/src/index.js @@ -11,6 +11,7 @@ import UpcomingEvents from "./Club Membership & Upcoming Events/UpcominEvents/Up import Gallery from "./Gallery/Gallery"; import "./index.css"; import MockPage from "./MockDB/MockPage"; +import Home from "./Home/Home"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( @@ -20,6 +21,10 @@ root.render( }> } + /> + }>