Add new website and fix git deploy

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "portfolio",
+  "name": "ieee-website",
   "version": "1.0.0",
   "description": "",
   "main": "build/index.js",
@@ -40,7 +40,6 @@
     "css-loader": "^5.2.7",
     "html-webpack-plugin": "^4.5.2",
     "license-webpack-plugin": "^2.3.21",
-    "npm-watch": "^0.7.0",
     "style-loader": "^2.0.0",
     "ts-loader": "^8.3.0",
     "typescript": "^4.4.4",

src/index.ts

@@ -25,7 +25,7 @@ const websites = [{
 	themecolor: ""
 }] as Website[];
 
-const PORT = 8080;
+const PORT = 9000;
 
 // Make the public directory traversible to people online
 app.use(express.static(path.join(__dirname, "public")));
@@ -62,4 +62,15 @@ function generatePage(name: string): string {
 	return html;
 }
 
-app.listen(PORT, "127.0.0.1");
+function generateFilePages() {
+	for (let site of websites) {
+		let html = generatePage(site.sitename);
+		fs.writeFileSync(require("path").join(__dirname, "public/", `${site.sitename}.html`), html);
+	}
+}
+
+if (process.argv[2] === "generate") {
+	generateFilePages();
+} else {
+	app.listen(PORT, "127.0.0.1");
+}

src/public/Config.ts

@@ -0,0 +1,179 @@
+// The links that are on the top nav bar that link to a lowercase version of their page
+export const ACTIVE_PAGES = [{
+	name: "About Us",
+	url: "/about"
+},{
+	name: "Events",
+	url: "/events"
+},{
+	name: "Projects",
+	url: "/projects"
+},{
+	name: "Committees",
+	url: "/committees"
+},{
+	name: "Sponsors",
+	url: "/sponsors"
+},{
+	name: "Contact Us",
+	url: "/contact"
+}];
+// Urls of team photos that will go in the "About" slideshow
+export const TEAM_PHOTOS: string[] = [];
+export const PROJECT_SPACE: string[] = [];
+export const EVENTS:any[] = [];
+
+
+export const SOCIALS = [{
+	icon: "img/disc.svg",
+	url: "https://discord.gg/XxfjqZSjca",
+	message: "Join our server"
+},{
+	icon: "img/fab.svg",
+	url: "https://www.facebook.com/ieeeucsd",
+	message: "ieeeucsd"
+},{
+	icon: "img/inst.svg",
+	url: "https://www.instagram.com/ieee.ucsd",
+	message: "@ieeeucsd"
+}];
+export const EMAIL = [{
+	icon: "img/email.svg",
+	url: "mailto:ieee@eng.ucsd.edu",
+	message: "ieee@eng.ucsd.edu"
+}];
+export const EMAIL_WHITE = [{
+	icon: "img/email_white.svg",
+	url: "mailto:ieee@eng.ucsd.edu",
+	message: "ieee@eng.ucsd.edu"
+}]
+
+export const SOCIALS_WHITE = [{
+	icon: "img/disc_white.svg",
+	url: "https://discord.gg/XxfjqZSjca",
+	message: "Join our server"
+},{
+	icon: "img/fab_white.svg",
+	url: "https://www.facebook.com/ieeeucsd",
+	message: "ieeeucsd"
+},{
+	icon: "img/inst_white.svg",
+	url: "https://www.instagram.com/ieee.ucsd",
+	message: "@ieeeucsd"
+}];
+export const OFFICERS = [{
+	name: "Sarp User",
+	position: "Chair",
+	photo: "img/officers/sarp.jpg",
+	email: "email@ucsd.edu"
+},{
+	name: "Parth Desai",
+	position: "Vice Chair Finance",
+	photo: "img/officers/parth.jpg",
+	email: "email@ucsd.edu"
+},{
+	name: "Derek Cantor",
+	position: "Vice Chair Internal",
+	photo: "img/officers/derek.jpg",
+	email: "email@ucsd.edu"
+},{
+	name: "Clyde Baron Rapinan",
+	position: "Vice Chair Events",
+	photo: "img/officers/clyde.jpg",
+	email: "email@ucsd.edu"
+},{
+	name: "Danny Vo",
+	position: "Vice Chair Projects",
+	photo: "img/officers/danny.jpg",
+	email: "email@ucsd.edu"
+},{
+	name: "Nick Petrone",
+	position: "Webmaster",
+	photo: "img/officers/nick.jpg",
+	email: "email@ucsd.edu"
+},{
+	name: "Jiawen Yu",
+	position: "Technical Chair",
+	photo: "img/officers/jiawen.jpg",
+	email: "email@ucsd.edu"
+},{
+	name: "Victor Ku",
+	position: "Technical Chair",
+	photo: "img/officers/victor.jpg",
+	email: "email@ucsd.edu"
+},{
+	name: "Sunny Chu",
+	position: "Technical Chair",
+	photo: "img/officers/sunny.jpg",
+	email: "email@ucsd.edu"
+},{
+	name: "Samyak Karnavat",
+	position: "Social Chair",
+	photo: "img/officers/samyak.jpg",
+	email: "email@ucsd.edu"
+},{
+	name: "Tasnia Jamal",
+	position: "Social Chair",
+	photo: "img/officers/tasnia.jpg",
+	email: "email@ucsd.edu"
+},{
+	name: "Hector Montenegro",
+	position: "Robocup Soccer Chair",
+	photo: "img/officers/hector.jpg",
+	email: "email@ucsd.edu"
+},{
+	name: "Zhiqiang Pi",
+	position: "Quarterly Projects Chair",
+	photo: "img/officers/zhiqiang.jpg",
+	email: "email@ucsd.edu"
+},{
+	name: "Kevin Chang",
+	position: "Quarterly Projects Chair",
+	photo: "img/officers/kevin.jpg",
+	email: "email@ucsd.edu"
+},{
+	name: "Benjamin Tang",
+	position: "Project Space Chair",
+	photo: "img/officers/ben.jpg",
+	email: "email@ucsd.edu"
+},{
+	name: "Jason Liang",
+	position: "Professional Chair",
+	photo: "img/officers/jason.jpg",
+	email: "email@ucsd.edu"
+},{
+	name: "Vuong Bui",
+	position: "Professional Chair",
+	photo: "img/officers/vuong.jpg",
+	email: "email@ucsd.edu"
+},{
+	name: "Thanh Tong",
+	position: "PR Chair - Graphics",
+	photo: "img/officers/thanh.jpg",
+	email: "email@ucsd.edu"
+},{
+	name: "Abby Hackbarth",
+	position: "PR Chair - Graphics",
+	photo: "img/officers/abby.jpg",
+	email: "email@ucsd.edu"
+},{
+	name: "Brigette Hacia",
+	position: "PR Chair - Marketing",
+	photo: "img/officers/brigette.jpg",
+	email: "email@ucsd.edu"
+},{
+	name: "Darin Tsui",
+	position: "Outreach Chair",
+	photo: "img/officers/darin.jpg",
+	email: "email@ucsd.edu"
+},{
+	name: "Soyon Kim",
+	position: "Outreach Chair",
+	photo: "img/officers/soyon.jpg",
+	email: "email@ucsd.edu"
+},{
+	name: "Niklas Chang",
+	position: "Events Coordinator",
+	photo: "img/officers/niklas.jpg",
+	email: "email@ucsd.edu"
+}];

src/public/components/Availability.tsx

@@ -1,27 +0,0 @@
-import * as React from "react";
-import {Component} from "react";
-
-interface AvailabilityProps {
-	checkUrl: string;
-}
-interface AvailabilityState {
-	available: boolean;
-}
-
-export default class Availability extends Component<AvailabilityProps, AvailabilityState> {
-	constructor(props: AvailabilityProps) {
-		super(props);
-		this.state = {
-			available: false
-		};
-	}
-	private checkAvailable() {
-		
-	}
-
-	public render() {
-		return <div className="availability">
-			{}
-		</div>;
-	}
-}

src/public/components/ButtonLink.tsx

@@ -1,22 +0,0 @@
-import * as React from "react";
-import {Component} from "react";
-
-interface ButtonLinkProps {
-	url: string;
-}
-interface ButtonLinkState {}
-
-export default class ButtonLink extends Component<ButtonLinkProps, ButtonLinkState> {
-	constructor(props: ButtonLinkProps) {
-		super(props);
-		this.state = {};
-	}
-
-	public render() {
-		return <button className="link-button" onClick={
-				(()=>(window.location as any)=this.props.url).bind(this)
-			}>
-			{this.props.children}
-		</button>;
-	}
-}

src/public/components/Carousel.tsx

@@ -1,38 +1,57 @@
 import * as React from "react";
 import {Component} from "react";
+import { CarouselItemProps } from "./CarouselItem";
+import CarouselPage from "./CarouselPage";
 
-interface CarouselProps {}
+interface CarouselProps {
+	items: CarouselItemProps[];
+	itemsPerPage: number;
+}
 interface CarouselState {
-	innerRef: React.Ref<HTMLDivElement>
+	page: number;
 }
 
 export default class Carousel extends Component<CarouselProps, CarouselState> {
 	constructor(props: CarouselProps) {
 		super(props);
 		this.state = {
-			innerRef: React.createRef()
+			page: 0
 		};
 	}
 
-	private scrollToNext(e: MouseEvent) {
-		let elem = (this.state.innerRef as any).current as HTMLDivElement;
-		elem.scrollBy({left: elem.parentElement.getBoundingClientRect().width, behavior: "smooth"})
+	private prevPage() {
+		this.setState({page: this.state.page - 1 < 0 ? 0 : this.state.page - 1});
+	}
+
+	private nextPage() {
+		this.setState({ page: this.state.page + 1 > Math.ceil(this.props.items.length / this.props.itemsPerPage) - 1 ?
+			Math.ceil(this.props.items.length / this.props.itemsPerPage) - 1 :
+			this.state.page + 1
+		});
 	}
 
 	public render() {
+		let arr = this.chunkArray(this.props.items);
 		return <div className="carousel">
-			<div className="carousel-inner" ref={this.state.innerRef}>
-				{this.props.children}
-			</div>
-			<div className="carousel-next" onClick={this.scrollToNext.bind(this)}>&gt;</div>
+			<img className="carousel-left" src="img/arrow.svg" style={
+				this.state.page === 0 ? {visibility: "hidden"} : {}
+			} onClick={this.prevPage.bind(this)}></img>
+			<div className="carousel-items">{
+				arr.map((items, i)=>(
+					<CarouselPage items={items} visible={i===this.state.page}></CarouselPage>
+				))
+			}</div>
+			<img className="carousel-right" src="img/arrow.svg" style={
+				this.state.page === arr.length - 1 ? {visibility: "hidden"} : {}
+			} onClick={this.nextPage.bind(this)}></img>
 		</div>;
 	}
-	public componentDidMount(): void {
-		let elem = (this.state.innerRef as any).current as HTMLDivElement;
-		if (elem.scrollWidth < elem.parentElement.scrollWidth) {
-			elem.parentElement.querySelector(".carousel-next").setAttribute("style", "display: none;");
-		} else {
-			elem.parentElement.querySelector(".carousel-next").setAttribute("style", "");
+
+	private chunkArray(array: CarouselItemProps[]):CarouselItemProps[][] {
+		let returnArr = [] as CarouselItemProps[][];
+		for(let i = 0; i < array.length; i+=this.props.itemsPerPage) {
+			returnArr.push(array.slice(i, i + this.props.itemsPerPage));
 		}
+		return returnArr;
 	}
 }

src/public/components/CarouselItem.tsx

@@ -1,10 +1,11 @@
 import * as React from "react";
 import {Component} from "react";
 
-interface CarouselItemProps {
-	location: string;
-	workshopName: string;
-	image: string;
+export interface CarouselItemProps {
+	name: string;
+	position: string;
+	email: string;
+	photo: string;
 }
 interface CarouselItemState {}
 
@@ -15,9 +16,11 @@ export default class CarouselItem extends Component<CarouselItemProps, CarouselI
 	}
 
 	public render() {
-		return <a className="carousel-item" href={this.props.location}>
-			<img src={this.props.image}></img>
-			<a href={this.props.location}>{this.props.workshopName}</a>
-		</a>;
+		return <div className="carousel-item">
+			<img src={this.props.photo}></img>
+			<div className="carousel-name">{this.props.name}</div>
+			<div className="carousel-pos">{this.props.position}</div>
+			<div className="carousel-email">{this.props.email}</div>
+		</div>;
 	}
 }

src/public/components/CarouselPage.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import {Component} from "react";
+import CarouselItem, { CarouselItemProps } from "./CarouselItem";
+
+interface CarouselPageProps {
+	items: CarouselItemProps[];
+	visible: boolean;
+}
+interface CarouselPageState {}
+
+export default class CarouselPage extends Component<CarouselPageProps, CarouselPageState> {
+	constructor(props: CarouselPageProps) {
+		super(props);
+		this.state = {};
+	}
+
+	public render() {
+		return <div className="carousel-page" style={this.props.visible ? {} : {display: "none"}}>{
+			this.props.items.map(n=>(
+				<CarouselItem {...n}></CarouselItem>
+			))
+		}</div>;
+	}
+}

src/public/components/DefaultSection.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import {Component} from "react";
+
+interface DefaultSectionProps {
+	title: string;
+	paragraphs?: string[];
+	className?: string;
+}
+interface DefaultSectionState {}
+
+export default class DefaultSection extends Component<DefaultSectionProps, DefaultSectionState> {
+	constructor(props: DefaultSectionProps) {
+		super(props);
+		this.state = {};
+	}
+
+	public render() {
+		return <div className={`default-section ${this.props.className ? this.props.className : ""}`}>
+			<div className="section-title">{this.props.title}</div>
+			{(this.props.paragraphs ? this.props.paragraphs : []).map(n=>(
+				<p>{n}</p>
+			))}
+			{this.props.children}
+		</div>;
+	}
+}

src/public/components/Footer.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import {Component} from "react";
+import SocialCard from "./SocialCard";
+import {EMAIL_WHITE, SOCIALS_WHITE} from "../Config";
+
+interface FooterProps {}
+interface FooterState {}
+
+export default class Footer extends Component<FooterProps, FooterState> {
+	constructor(props: FooterProps) {
+		super(props);
+		this.state = {};
+	}
+
+	public render() {
+		return <div className="footer">
+			<img src="img/logo_white.svg"></img>
+			<div className="footer-scls">{
+				[...EMAIL_WHITE, ...SOCIALS_WHITE].map(n => (
+					<SocialCard url={n.url} image={n.icon} message={n.message}></SocialCard>
+				))
+			}</div>
+		</div>;
+	}
+}

src/public/components/HorizontalSection.tsx

@@ -1,25 +0,0 @@
-import React, {Component} from "react";
-
-interface HorizontalSectionProps {
-	link: string;
-	title: string;
-	row?: boolean;
-	id?: string;
-}
-interface HorizontalSectionState {}
-
-export default class HorizontalSection extends Component<HorizontalSectionProps, HorizontalSectionState> {
-	constructor(props: HorizontalSectionProps) {
-		super(props);
-		this.state = {};
-	}
-
-	public render() {
-		return <div className="horizontal-section" id={this.props.id ? this.props.id : ""}>
-			<a className="section-title" href={this.props.link}>{this.props.title}</a>
-			<div className={this.props.row == undefined ? "" : this.props.row ? "row-group" : "col-group"}>
-				{this.props.children}
-			</div>
-		</div>;
-	}
-}

src/public/components/ImageScrollPanel.tsx

@@ -1,17 +0,0 @@
-import React, {Component} from "react";
-
-interface ImageScrollPanelProps {
-	imageUrls: string[];
-}
-interface ImageScrollPanelState {}
-
-export default class ImageScrollPanel extends Component<ImageScrollPanelProps, ImageScrollPanelState> {
-	constructor(props: ImageScrollPanelProps) {
-		super(props);
-		this.state = {};
-	}
-
-	public render() {
-		return <></>;
-	}
-}

src/public/components/ImageSlideshow.tsx

@@ -1,36 +0,0 @@
-import React, {Component} from "react";
-
-interface ImageSlideshowProps {
-	urls: string[];
-	delay: number;
-	alt: string;
-}
-interface ImageSlideshowState {
-	progress: number;
-}
-
-export default class ImageSlideshow extends Component<ImageSlideshowProps, ImageSlideshowState> {
-	private interval: number;
-
-	constructor(props: ImageSlideshowProps) {
-		super(props);
-		this.state = {
-			progress: 0
-		};
-		this.interval = setInterval(this.changeImage.bind(this), this.props.delay) as any as number;
-	}
-
-	private changeImage(): void {
-		if (this.state.progress < this.props.urls.length - 1) {
-			this.setState({progress: this.state.progress + 1});
-		} else {
-			this.setState({progress: 0});
-		}
-	}
-
-	public render() {
-		return <div className="image-slideshow">
-			<img className="slideshow-image" src={this.props.urls[this.state.progress]} alt={this.props.alt}></img>
-		</div>;
-	}
-}

src/public/components/InvolveBox.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import {Component} from "react";
+
+interface InvolveBoxProps {
+	boxTitle: string;
+	image: string;
+	description: string;
+}
+interface InvolveBoxState {}
+
+export default class InvolveBox extends Component<InvolveBoxProps, InvolveBoxState> {
+	constructor(props: InvolveBoxProps) {
+		super(props);
+		this.state = {};
+	}
+
+	public render() {
+		return <div className="involve-card">
+			<a className="involve-title" href={"/"+this.props.boxTitle.toLowerCase()}>{this.props.boxTitle}</a>
+			<img src={this.props.image}></img>
+			<div className="involve-description">{this.props.description}</div>
+		</div>;
+	}
+}

src/public/components/Officer.tsx

@@ -1,24 +0,0 @@
-import * as React from "react";
-import {Component} from "react";
-
-interface OfficerProps {
-	name: string;
-	position: string;
-	photo: string;
-}
-interface OfficerState {}
-
-export default class Officer extends Component<OfficerProps, OfficerState> {
-	constructor(props: OfficerProps) {
-		super(props);
-		this.state = {};
-	}
-
-	public render() {
-		return <div className="officer">
-			<img className="officer-image" src={this.props.photo}></img>
-			<span className="officer-name">{this.props.name}</span>
-			<span className="officer-position">{this.props.position}</span>
-		</div>;
-	}
-}

src/public/components/SocialCard.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import {Component} from "react";
+
+interface SocialCardProps {
+	url: string;
+	image: string;
+	message: string;
+}
+interface SocialCardState {}
+
+export default class SocialCard extends Component<SocialCardProps, SocialCardState> {
+	constructor(props: SocialCardProps) {
+		super(props);
+		this.state = {};
+	}
+
+	public render() {
+		return <a href={this.props.url} className="social-card">
+			<img src={this.props.image}></img>
+			<div className="social-message">{this.props.message}</div>
+		</a>;
+	}
+}

src/public/components/Splash.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+import {Component} from "react";
+import {SOCIALS_WHITE} from "../Config";
+
+interface SplashProps {
+	cta: string;
+	backgrounds: string[];
+	delay: number;
+}
+interface SplashState {
+	progress: number;
+}
+
+export default class Splash extends Component<SplashProps, SplashState> {
+	private interval: number;
+	constructor(props: SplashProps) {
+		super(props);
+		this.state = {
+			progress: 0
+		};
+		this.interval = setInterval(this.changeImage.bind(this), this.props.delay) as any as number;
+	}
+
+	private changeImage(): void {
+		if (this.state.progress < this.props.backgrounds.length - 1) {
+			this.setState({progress: this.state.progress + 1});
+		} else {
+			this.setState({progress: 0});
+		}
+	}
+
+	public render() {
+		return <div className="splash" style={{
+			backgroundImage: `url("${this.props.backgrounds[this.state.progress]}")`
+		}}>
+			<div className="call-to-action">{this.props.cta}</div>
+			<div className="splash-socials">{
+				SOCIALS_WHITE.map(n=>(
+					<a href={n.url} key={n.icon}>
+						<img src={n.icon}></img>
+					</a>
+				))
+			}</div>
+		</div>;
+	}
+}

src/public/components/TopBar.tsx

@@ -0,0 +1,59 @@
+import * as React from "react";
+import {Component} from "react";
+
+interface TopBarProps {
+	links: {
+		name: string;
+		url: string;
+	}[];
+}
+interface TopBarState {
+	showBurger: boolean;
+	menuVisible: boolean;
+}
+
+export default class TopBar extends Component<TopBarProps, TopBarState> {
+	private static HAMBURGER_POINT = 1290;
+	constructor(props: TopBarProps) {
+		super(props);
+		this.state = {
+			showBurger: this.shouldShowBurger(),
+			menuVisible: false
+		};
+		window.addEventListener("resize", this.checkResize.bind(this));
+	}
+	private toggleMenu() {
+		this.setState({menuVisible: !this.state.menuVisible});
+	}
+	private checkResize() {
+		this.setState({showBurger: this.shouldShowBurger()});
+	}
+	private shouldShowBurger(): boolean {
+		return window.innerWidth < TopBar.HAMBURGER_POINT;
+	}
+
+	public render() {
+		return <div className={`topbar${
+			this.state.showBurger ? " burger-bar" : ""
+		}`}>
+			<div className="img-cont">
+				<a href="/"><img src="img/logo.svg"></img></a>
+				<div className="burger" style={{ 
+					display: this.state.showBurger ? "initial" : "none" 
+				}} onClick={this.toggleMenu.bind(this)} role="menubar">≡</div>
+			</div>
+			<div className="links">
+				
+				<div className={`link-items${
+					this.state.showBurger ? " burger-time" : ""
+				}`} style={{display: this.state.showBurger ? 
+						(this.state.menuVisible ? "flex" : "none") :
+						"initial"}}>{
+					this.props.links.map(l=>{
+						return <a className="navlink" href={l.url}>{l.name}</a>
+					})
+				}</div>	
+			</div>
+		</div>;
+	}
+}

src/public/components/TopNav.tsx

@@ -1,30 +0,0 @@
-import React from "react";
-
-interface TopNavProps {
-	image: string;
-	links: string[];
-	names: string[];
-	alt: string;
-}
-interface TopNavState {}
-
-export default class TopNav extends React.Component<TopNavProps, TopNavState> {
-	constructor(props: TopNavProps) {
-		super(props);
-		this.state = {};
-	}
-
-	public render() {
-		let navLinks = this.props.links.map((url, i)=>{
-			return <a className="nav-link" href={url} key={this.props.names[i]}>{this.props.names[i]}</a>;
-		});
-
-		return <div className="top-nav">
-			<div className="nav-container">
-				<img className="logo" srcSet={`${this.props.image} 2x`} alt={this.props.alt}></img>
-				{navLinks}
-			</div>
-			<div className="bottom-bar"></div>
-		</div>;
-	}
-}

src/public/css/fonts.css

@@ -1,108 +1,58 @@
-/* open-sans-300 - latin */
+/* roboto-regular - latin */
 @font-face {
-	font-family: 'Open Sans';
-	font-style: normal;
-	font-weight: 300;
-	src: local(''),
-		 url('../fonts/open-sans-v27-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-		 url('../fonts/open-sans-v27-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-  }
-  /* open-sans-regular - latin */
-  @font-face {
-	font-family: 'Open Sans';
+	font-family: 'Roboto';
 	font-style: normal;
 	font-weight: 400;
 	src: local(''),
-		 url('../fonts/open-sans-v27-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-		 url('../fonts/open-sans-v27-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-  }
-  /* open-sans-600 - latin */
-  @font-face {
-	font-family: 'Open Sans';
-	font-style: normal;
-	font-weight: 600;
-	src: local(''),
-		 url('../fonts/open-sans-v27-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-		 url('../fonts/open-sans-v27-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-  }
-  /* open-sans-500 - latin */
-  @font-face {
-	font-family: 'Open Sans';
-	font-style: normal;
-	font-weight: 500;
-	src: local(''),
-		 url('../fonts/open-sans-v27-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-		 url('../fonts/open-sans-v27-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-  }
-  /* open-sans-700 - latin */
-  @font-face {
-	font-family: 'Open Sans';
-	font-style: normal;
-	font-weight: 700;
-	src: local(''),
-		 url('../fonts/open-sans-v27-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-		 url('../fonts/open-sans-v27-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-  }
-  /* open-sans-800 - latin */
-  @font-face {
-	font-family: 'Open Sans';
-	font-style: normal;
-	font-weight: 800;
-	src: local(''),
-		 url('../fonts/open-sans-v27-latin-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-		 url('../fonts/open-sans-v27-latin-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-  }
-  /* open-sans-300italic - latin */
-  @font-face {
-	font-family: 'Open Sans';
-	font-style: italic;
-	font-weight: 300;
-	src: local(''),
-		 url('../fonts/open-sans-v27-latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-		 url('../fonts/open-sans-v27-latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-  }
-  /* open-sans-500italic - latin */
-  @font-face {
-	font-family: 'Open Sans';
-	font-style: italic;
-	font-weight: 500;
-	src: local(''),
-		 url('../fonts/open-sans-v27-latin-500italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-		 url('../fonts/open-sans-v27-latin-500italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-  }
-  /* open-sans-italic - latin */
-  @font-face {
-	font-family: 'Open Sans';
+		url('../fonts/roboto-v29-latin-regular.woff2') format('woff2'),
+		/* Chrome 26+, Opera 23+, Firefox 39+ */
+		url('../fonts/roboto-v29-latin-regular.woff') format('woff');
+	/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* roboto-italic - latin */
+@font-face {
+	font-family: 'Roboto';
 	font-style: italic;
 	font-weight: 400;
 	src: local(''),
-		 url('../fonts/open-sans-v27-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-		 url('../fonts/open-sans-v27-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-  }
-  /* open-sans-600italic - latin */
-  @font-face {
-	font-family: 'Open Sans';
-	font-style: italic;
-	font-weight: 600;
-	src: local(''),
-		 url('../fonts/open-sans-v27-latin-600italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-		 url('../fonts/open-sans-v27-latin-600italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-  }
-  /* open-sans-700italic - latin */
-  @font-face {
-	font-family: 'Open Sans';
-	font-style: italic;
+		url('../fonts/roboto-v29-latin-italic.woff2') format('woff2'),
+		/* Chrome 26+, Opera 23+, Firefox 39+ */
+		url('../fonts/roboto-v29-latin-italic.woff') format('woff');
+	/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* roboto-700 - latin */
+@font-face {
+	font-family: 'Roboto';
+	font-style: normal;
 	font-weight: 700;
 	src: local(''),
-		 url('../fonts/open-sans-v27-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-		 url('../fonts/open-sans-v27-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-  }
-  /* open-sans-800italic - latin */
-  @font-face {
-	font-family: 'Open Sans';
-	font-style: italic;
-	font-weight: 800;
+		url('../fonts/roboto-v29-latin-700.woff2') format('woff2'),
+		/* Chrome 26+, Opera 23+, Firefox 39+ */
+		url('../fonts/roboto-v29-latin-700.woff') format('woff');
+	/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* montserrat-regular - latin */
+@font-face {
+	font-family: 'Montserrat';
+	font-style: normal;
+	font-weight: 400;
 	src: local(''),
-		 url('../fonts/open-sans-v27-latin-800italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-		 url('../fonts/open-sans-v27-latin-800italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-  }
+		url('../fonts/montserrat-v23-latin-regular.woff2') format('woff2'),
+		/* Chrome 26+, Opera 23+, Firefox 39+ */
+		url('../fonts/montserrat-v23-latin-regular.woff') format('woff');
+	/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* montserrat-700 - latin */
+@font-face {
+	font-family: 'Montserrat';
+	font-style: normal;
+	font-weight: 700;
+	src: local(''),
+		url('../fonts/montserrat-v23-latin-700.woff2') format('woff2'),
+		/* Chrome 26+, Opera 23+, Firefox 39+ */
+		url('../fonts/montserrat-v23-latin-700.woff') format('woff');
+	/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}

src/public/css/styles.css

@@ -1,251 +1,332 @@
 /* Color vars should go here */
 :root {
-	--dark-blue: #00629b;
-	--med-blue: #4486c4;
-	--sky-blue: #6ab7ff;
-	--grey: #c4d2e3;
-	--black: #1f1f1f;
-	--white: #F2F6FF;
+	--main: #00629B;
 	--accent: #FFCD00;
-}
-
-#root {
-	background-color: var(--white);
+	--secondary: white;
+	--dark: #2A1A4E;
 }
 
 * {
 	scrollbar-width: auto;
-	scrollbar-color: var(--black) transparent;
+	scrollbar-color: var(--main) transparent;
 }
 *::-webkit-scrollbar {
 	width: 0.6em;
 	height: 0.6em;
 }
 *::-webkit-scrollbar-track {
-	background: transparent;
+	background: var(--main);
 }
 *::-webkit-scrollbar-thumb {
-	background-color: var(--black);
-	border-radius: 10px;
+	background-color: var(--secondary);
 }
 html {
-	color: var(--black);
-	font-family: "Open Sans", sans-serif;
+	font-family: "Roboto", sans-serif;
+	font-weight: bold;
 }
 body {
 	margin: 0;
 }
 
-/* Top nav styles */
-.top-nav {
-	width: 100%;
-    display: flex;
-    flex-direction: column;
-	background-color: var(--dark-blue);
-	align-items: center;
-	position: relative;
-}
-.logo {
-	width: 20em;
-	height: auto;
-	padding: 0.5em;
-	margin-left: 1em;
-}
-.nav-link {
-	color: var(--white);
-	font-size: 1.5em;
-	margin-left: 0.75em;
-	margin-right: 0.75em;
+a {
 	text-decoration: none;
-}
-.top-nav .nav-link:nth-of-type(1) {
-	margin-left: auto;
-}
-.bottom-bar {
-	width: 100%;
-	height: 0.25em;
-	background-color: var(--accent);
-}
-.nav-container {
-	width: 100%;
-	display: flex;
-	align-items: center;
+	color: var(--main);
 }
 
-/* */
-.horizontal-section {
-	padding: 2em;
-	width: auto;
-	display: flex;
-	flex-direction: column;
-	padding-left: 15%;
-	padding-right: 15%;
-	font-size: 1.2em;
+a:hover {
+	text-decoration: underline;
 }
-.column-group {
+
+#root {
 	display: flex;
 	flex-direction: column;
 }
-.row-group {
+.topbar {
 	display: flex;
 	flex-direction: row;
-	flex-wrap: wrap;
-	align-items: baseline;
 	justify-content: space-between;
-	column-gap: 2.5em;
+	color: var(--main);
+	background-color: var(--secondary);
+	padding: 0.5em;
+	align-items: center;
 }
-.row-group::after{
-	content: "";
+.topbar.burger-bar {
+	flex-direction: column;
+	position: relative;
+}
+.topbar.burger-bar > .img-cont {
+	align-self: flex-start;
+	display: flex;
+	justify-content: space-between;
+	width: 100%;
+	align-items: center;
+}
+.img-cont img {
+	width: 22em;
+}
+.burger {
+	font-size: 2.8em;
+	font-weight: normal;
+	user-select: none;
+	cursor: pointer;
+	margin-right: 0.3em;
+}
+.link-items.burger-time {
+	flex-direction: column;
+	position: absolute;
+	background-color: var(--secondary);
 	width: 10em;
+	box-shadow: rgba(0,0,0,0.3) 4px 4px 3px 0px;
+	right: 0;
+	margin-top: 0.36em;
+}
+.link-items.burger-time > a {
+	margin: 0;
+	padding: 0.4em 0.75em;
+}
+.link-items.burger-time > a:hover {
+	background-color: rgba(0,0,0,0.1);
+}
+.navlink {
+	font-size: 1.1em;
+	margin: 0.75em;
+}
+.splash {
+	background-color: var(--main);
+	background-blend-mode: overlay;
+	border-radius: 0 0 50% 50% / 4rem;
+	background-position: center;
+	height: 35em;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+	background-repeat: no-repeat;
+	background-size: cover;
+}
+.call-to-action {
+	font-size: 3.2em;
+	width: 11em;
+	color: var(--secondary);
+	text-align: center;
+	font-family: "Montserrat";
+}
+.splash-socials {
+	margin-top: 2em;
+}
+.splash-socials > a {
+	margin-left: 1.5em;
+	margin-right: 1.5em;
+}
+.splash-socials img {
+	width: 4.7em;
+}
+.default-section {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+	color: var(--main);
+	background-color: var(--secondary);
+	padding-top: 2em;
+	padding-bottom: 2em;
 }
 .section-title {
-	color: var(--med-blue);
-	font-size: 2.4em;
-	text-decoration: none;
-	width: fit-content;
-	padding-bottom: 0.15em;
-	font-weight: bold;
+	font-size: 3em;
+	margin-top: 0.8em;
+	margin-bottom: 0.8em;
 }
-.section-title:hover {
-	text-decoration: underline;
+.default-section > p, .project-space > p {
+	font-size: 1.8em;
+	width: 22em;
+	color: var(--dark);
+	text-align: center;
+}
+.project-space > p {
+	color: var(--secondary);
+}
+.default-section > p:first-child {
+	margin-top: 0;
+}
+.project-space {
+	border-radius: 50% 50% 0 0 / 4rem;
+	background-color: var(--main);
+	background-blend-mode: overlay;
+	background-image: url("../img/backgrounds/ps.png");
+	height: 40em;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+	background-repeat: no-repeat;
+	background-size: cover;
+}
+.project-space a {
+	color: var(--accent);
+}
+.ps-title {
+	font-size: 3em;
+	color: white;
+	margin-bottom: 1em;
+}
+.visit-us {
+	font-size: 2em;
+	margin-bottom: 2em;
+}
+.involved {
+	border-radius: 50% 50% 0 0 / 4rem;
+	transform: translateY(-4rem);
+}
+.cards {
+	display: flex;
+	justify-content: space-around;
+	flex-wrap: wrap;
+}
+.involve-card {
+	padding: 1.75em 2.5em;
+	border: var(--main) solid 0.37em;
+	border-radius: 1.5em;
+	color: var(--main);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+	margin: 1em;
+}
+.involve-title {
+	font-size: 3em;
+	color: var(--main);
+	margin-bottom: 0.5em;
+}
+.involve-card > img {
+	width: 20em;
+	margin-bottom: 1em;
+}
+.links {
+	font-size: 1.5em;
+}
+.social-card {
+	display: flex;
+	align-items: center;
+	padding: 1em;
+	width: 25em;
+}
+.social-card > img  {
+	width: 4.7em;
+}
+.social-message {
+	font-size: 2em;
+	padding: 0.5em;
+}
+.join-scls, .footer-scls {
+	display: flex;
+	flex-direction: row;
+	max-width: 55em;
+	justify-content: space-around;
+	flex-wrap: wrap;
+	margin-left: 5em;
 }
 .carousel-item {
 	display: flex;
 	flex-direction: column;
-    background: white;
-    box-shadow: 3px 3px 5px 1px grey;
-	margin: 0 1em;
+	align-items: center;
+	padding: 1.5em;
+	border: 0.35em solid var(--main);
+	border-radius: 1em;
+	margin: 1em;
 }
-.carousel-inner {
+.carousel-item > img {
+	width: 18.7em;
+}
+.carousel-name {
+	font-size: 2em;
+}
+.carousel-pos {
+	font-style: italic;
+	font-weight: normal;
+	font-size: 1.25em;
+}
+.carousel-email {
+	margin-top: 0.5em;
+}
+.carousel-page {
 	display: flex;
-	overflow-x: auto;
-	padding: 1em 0;
+    flex-wrap: wrap;
+	justify-content: center;
 }
 .carousel {
-	position: relative;
-}
-.carousel::after, .carousel::before {
-	content: "";
-	width: 1em;
-	height: calc(100% - 0.6em);
-	position: absolute;
-	top: 0;
-	right: 0;
-	background: linear-gradient(270deg, var(--white), transparent)
-}
-.carousel::before {
-	left: 0;
-	background: linear-gradient(90deg, var(--white), transparent);
-}
-.carousel-next {
-	position: absolute;
-	right: -0.5em;
-	font-weight: 1000;
-	font-size: 2em;
-	border-radius: 1000px;
-	background: var(--med-blue);
-	color: var(--white);
-	width: 1.5em;
-	height: 1.5em;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	opacity: 0.8;
-	top: calc(50% -  0.75em);
-	z-index: 1;
-	user-select: none;
+}
+.carousel-left {
+	margin-left: 2em;
+	transform: scaleX(-1);
+}
+.carousel-right, .carousel-left {
 	cursor: pointer;
+	width: 4em;
 }
-.carousel-inner::-webkit-scrollbar-thumb {
-	background-color: var(--grey);
+.carousel-right {
+	margin-right: 2em;
 }
-.carousel-item a {
-	font-weight: 500;
-	color: var(--med-blue);
-	padding: 0.5em;
-	text-decoration: none;
+.contact {
+	border-radius: 0 0 50% 50% / 4rem;
+	transform: translateY(4rem);
 }
-.carousel-item a:hover {
-	color: var(--sky-blue);
-	text-decoration: underline;
+.footer {
+	background-color: var(--main);
+	padding-top: 7em;
+	display: flex;
+	justify-content: space-between;
+	align-items: start;
+	padding-left: 2em;
+	padding-right: 2em;
 }
-.carousel-item a:active {
-	color: var(--dark-blue)
-}
-.description-text {
-	font-size: 1.2em;
-}
-.carousel-item img {
-	max-width: 20em;
-}
-/* Image slideshow styles */
-.slideshow-image {
-	width: 22em;
-	height: auto;
-}
-.image-slideshow {
-	margin-right: 1em;
-	float: left;
-	height: fit-content;
-	padding: 0 1em 1em 0;
-}
-
-.link-button {
-	padding: 0.5em;
-	background-color: var(--med-blue);
-	border-radius: 1em;
-	border: none;
-	font-size: 1.5em;
+.footer a {
 	color: white;
-	margin-top: 1em;
-	cursor: pointer;
 }
-.link-button:hover {
-	background-color: var(--sky-blue);
+.footer-scls {
+	max-width: 30em;
+	font-size: 0.6em;
+	margin-bottom: 2em;
 }
-.link-button:active {
-	background-color: var(--dark-blue);
+.footer-scls img {
+	width: 4.7em;
 }
-
-.officer {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	flex-direction: column;
-	padding: 1em 0;
-	width: 10em;
-}
-.officer-image {
-	aspect-ratio: 1 / 1;
-	max-width: 10em;
-	max-height: 10em;
-}
-.officer-name {
-	font-weight: bold;
-	font-size: 1.2em;
-	text-align: center;
-	margin-bottom: 0.15em;
-}
-.officer-position {
-	font-style: italic;
-	font-size: 1.1em;
-	text-align: center;
+.footer > img {
+	width: 30em;
 }
 
 /* Responsive queries go here */
-@media screen and (max-width: 617px) {
-	.row-group {
-		justify-content: center;
+@media screen and (max-width: 700px) {
+	html {
+		font-size: 0.85em;
 	}
-	.slideshow-image {
-		width: 18em;
+}
+@media screen and (max-width: 650px) {
+	html {
+		font-size: 0.8em;
 	}
-	.nav-link {
+	.footer > img{
+		width: 15em;
+	}
+}
+@media screen and (max-width: 540px) {
+	html {
+		font-size: 0.6em;
+	}
+	.footer>img {
 		display: none;
 	}
 }
-@media screen and (min-width: 1645px) {
-	.row-group::after {
-		width: 25em;
+@media screen and (max-width: 420px) {
+	html {
+		font-size: 0.5em;
+	}
+}
+@media screen and (max-width: 320px) {
+	html {
+		font-size: 0.45em;
 	}
 }

src/public/img/arrow.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="68" viewBox="0 0 30 68" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M28.9212 36.8513L6.29142 65.6863C4.85191 67.5216 2.518 67.5216 1.07919 65.6863C-0.359731 63.8528 -0.359731 60.8789 1.07919 59.0454L21.1023 33.5306L1.07919 8.01723C-0.359731 6.18291 -0.359731 3.20932 1.07919 1.37574C2.51812 -0.45858 4.85191 -0.45858 6.29142 1.37574L28.9212 30.2107C29.6407 31.128 30 32.3288 30 33.5303C30 34.7323 29.6406 35.9345 28.9212 36.8513Z" fill="#4D4D4D"/>
+</svg>

src/public/img/disc.svg

@@ -0,0 +1,3 @@
+<svg width="75" height="59" viewBox="0 0 75 59" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M63.5321 4.86229C58.6773 2.59081 53.4862 0.93999 48.0591 0C47.3925 1.20503 46.6139 2.82583 46.077 4.11517C40.3078 3.24756 34.5917 3.24756 28.9286 4.11517C28.3919 2.82583 27.5955 1.20503 26.923 0C21.49 0.93999 16.293 2.59687 11.4381 4.87431C1.64576 19.6718 -1.00878 34.1018 0.31849 48.3269C6.81329 53.177 13.1075 56.1234 19.2955 58.0513C20.8234 55.9486 22.186 53.7133 23.3599 51.3575C21.1242 50.508 18.9829 49.4596 16.9596 48.2426C17.4964 47.8449 18.0214 47.4291 18.5287 47.0014C30.8694 52.7734 44.2778 52.7734 56.4711 47.0014C56.9843 47.4291 57.5092 47.8449 58.0401 48.2426C56.0109 49.4656 53.8637 50.514 51.628 51.3636C52.8019 53.7133 54.1587 55.9546 55.6924 58.0573C61.8864 56.1293 68.1864 53.1831 74.6812 48.3269C76.2386 31.8364 72.0208 17.5389 63.5321 4.86229ZM25.0412 39.5786C21.3366 39.5786 18.2986 36.1202 18.2986 31.9087C18.2986 27.6972 21.2718 24.2328 25.0412 24.2328C28.8107 24.2328 31.8486 27.6911 31.7838 31.9087C31.7896 36.1202 28.8107 39.5786 25.0412 39.5786ZM49.9586 39.5786C46.254 39.5786 43.216 36.1202 43.216 31.9087C43.216 27.6972 46.189 24.2328 49.9586 24.2328C53.728 24.2328 56.766 27.6911 56.7011 31.9087C56.7011 36.1202 53.728 39.5786 49.9586 39.5786Z" fill="#00629B"/>
+</svg>

src/public/img/disc_white.svg

@@ -0,0 +1,3 @@
+<svg width="75" height="59" viewBox="0 0 75 59" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M63.5321 4.86229C58.6773 2.59081 53.4862 0.93999 48.0591 0C47.3925 1.20503 46.6139 2.82583 46.077 4.11517C40.3078 3.24756 34.5917 3.24756 28.9286 4.11517C28.3919 2.82583 27.5955 1.20503 26.923 0C21.49 0.93999 16.293 2.59687 11.4381 4.87431C1.64576 19.6718 -1.00878 34.1018 0.31849 48.3269C6.81329 53.177 13.1075 56.1234 19.2955 58.0513C20.8234 55.9486 22.186 53.7133 23.3599 51.3575C21.1242 50.508 18.9829 49.4596 16.9596 48.2426C17.4964 47.8449 18.0214 47.4291 18.5287 47.0014C30.8694 52.7734 44.2778 52.7734 56.4711 47.0014C56.9843 47.4291 57.5092 47.8449 58.0401 48.2426C56.0109 49.4656 53.8637 50.514 51.628 51.3636C52.8019 53.7133 54.1587 55.9546 55.6924 58.0573C61.8864 56.1293 68.1864 53.1831 74.6812 48.3269C76.2386 31.8364 72.0208 17.5389 63.5321 4.86229ZM25.0412 39.5786C21.3366 39.5786 18.2986 36.1202 18.2986 31.9087C18.2986 27.6972 21.2718 24.2328 25.0412 24.2328C28.8107 24.2328 31.8486 27.6911 31.7838 31.9087C31.7896 36.1202 28.8107 39.5786 25.0412 39.5786ZM49.9586 39.5786C46.254 39.5786 43.216 36.1202 43.216 31.9087C43.216 27.6972 46.189 24.2328 49.9586 24.2328C53.728 24.2328 56.766 27.6911 56.7011 31.9087C56.7011 36.1202 53.728 39.5786 49.9586 39.5786Z" fill="white"/>
+</svg>

src/public/img/email.svg

@@ -0,0 +1,3 @@
+<svg width="75" height="57" viewBox="0 0 75 57" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M73.5792 19.1192C74.1504 18.665 75 19.0898 75 19.8076V49.7635C75 53.6455 71.8506 56.7949 67.9686 56.7949H7.03125C3.1494 56.7949 0 53.6455 0 49.7635V19.8223C0 19.0898 0.83496 18.6797 1.4209 19.1338C4.70214 21.6826 9.05274 24.9199 23.9942 35.7745C27.085 38.0302 32.2998 42.7762 37.5 42.7471C42.7296 42.7909 48.0468 37.9423 51.0204 35.7745C65.9619 24.9199 70.2978 21.668 73.5792 19.1192ZM37.5 38.0449C40.8984 38.1034 45.7911 33.7675 48.252 31.9804C67.6905 17.874 69.1698 16.6436 73.6524 13.1279C74.502 12.4688 75 11.4434 75 10.3594V7.57617C75 3.69432 71.8506 0.544922 67.9686 0.544922H7.03125C3.1494 0.544922 0 3.69432 0 7.57617V10.3594C0 11.4434 0.498048 12.4541 1.34766 13.1279C5.83008 16.6289 7.30956 17.874 26.7481 31.9804C29.209 33.7675 34.1016 38.1034 37.5 38.0449Z" fill="#00629B"/>
+</svg>

src/public/img/email_white.svg

@@ -0,0 +1,3 @@
+<svg width="75" height="57" viewBox="0 0 75 57" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M73.5792 19.1192C74.1504 18.665 75 19.0898 75 19.8076V49.7635C75 53.6455 71.8506 56.7949 67.9686 56.7949H7.03125C3.1494 56.7949 0 53.6455 0 49.7635V19.8223C0 19.0898 0.83496 18.6797 1.4209 19.1338C4.70214 21.6826 9.05274 24.9199 23.9942 35.7745C27.085 38.0302 32.2998 42.7762 37.5 42.7471C42.7296 42.7909 48.0468 37.9423 51.0204 35.7745C65.9619 24.9199 70.2978 21.668 73.5792 19.1192ZM37.5 38.0449C40.8984 38.1034 45.7911 33.7675 48.252 31.9804C67.6905 17.874 69.1698 16.6436 73.6524 13.1279C74.502 12.4688 75 11.4434 75 10.3594V7.57617C75 3.69432 71.8506 0.544922 67.9686 0.544922H7.03125C3.1494 0.544922 0 3.69432 0 7.57617V10.3594C0 11.4434 0.498048 12.4541 1.34766 13.1279C5.83008 16.6289 7.30956 17.874 26.7481 31.9804C29.209 33.7675 34.1016 38.1034 37.5 38.0449Z" fill="white"/>
+</svg>

src/public/img/fab.svg

@@ -0,0 +1,3 @@
+<svg width="75" height="75" viewBox="0 0 75 75" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M75 37.5C75 16.7893 58.2107 0 37.5 0C16.7893 0 0 16.7893 0 37.5C0 56.2173 13.7132 71.7312 31.6406 74.5445V48.3399H22.1192V37.5H31.6406V29.2383C31.6406 19.8398 37.2391 14.6485 45.8049 14.6485C49.9078 14.6485 54.1993 15.3809 54.1993 15.3809V24.6094H49.4706C44.8121 24.6094 43.3594 27.5 43.3594 30.4656V37.5H53.7598L52.0972 48.3399H43.3594V74.5445C61.2868 71.7312 75 56.2173 75 37.5Z" fill="#00629B"/>
+</svg>

src/public/img/fab_white.svg

@@ -0,0 +1,3 @@
+<svg width="75" height="75" viewBox="0 0 75 75" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M75 37.5C75 16.7893 58.2107 0 37.5 0C16.7893 0 0 16.7893 0 37.5C0 56.2173 13.7132 71.7312 31.6406 74.5445V48.3399H22.1192V37.5H31.6406V29.2383C31.6406 19.8398 37.2391 14.6485 45.8049 14.6485C49.9078 14.6485 54.1993 15.3809 54.1993 15.3809V24.6094H49.4706C44.8121 24.6094 43.3594 27.5 43.3594 30.4656V37.5H53.7598L52.0972 48.3399H43.3594V74.5445C61.2868 71.7312 75 56.2173 75 37.5Z" fill="white"/>
+</svg>

src/public/img/inst.svg

@@ -0,0 +1,10 @@
+<svg width="75" height="76" viewBox="0 0 75 76" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_105_99)">
+<path d="M37.4999 7.30182C47.5129 7.30182 48.6988 7.33992 52.6531 7.52034C56.3093 7.6872 58.2949 8.29811 59.6164 8.81152C61.3667 9.49179 62.616 10.3045 63.9282 11.6167C65.2404 12.9289 66.0531 14.1782 66.7333 15.9285C67.2468 17.25 67.8577 19.2356 68.0246 22.8917C68.205 26.8461 68.2431 28.032 68.2431 38.045C68.2431 48.058 68.205 49.2439 68.0246 53.1981C67.8577 56.8544 67.2468 58.84 66.7333 60.1615C66.0531 61.9118 65.2404 63.1611 63.9282 64.4733C62.616 65.7854 61.3667 66.5982 59.6164 67.2783C58.2949 67.7919 56.3093 68.4028 52.6531 68.5697C48.6994 68.7501 47.5135 68.7882 37.4999 68.7882C27.4864 68.7882 26.3004 68.7501 22.3468 68.5697C18.6906 68.4028 16.705 67.7919 15.3836 67.2783C13.6332 66.5982 12.3838 65.7854 11.0716 64.4733C9.75948 63.1611 8.94672 61.9118 8.2666 60.1615C7.75304 58.84 7.14213 56.8544 6.97527 53.1983C6.79485 49.2439 6.75674 48.058 6.75674 38.045C6.75674 28.032 6.79485 26.8461 6.97527 22.8919C7.14213 19.2356 7.75304 17.25 8.2666 15.9285C8.94672 14.1782 9.75948 12.9289 11.0716 11.6167C12.3838 10.3045 13.6332 9.49179 15.3836 8.81152C16.705 8.29811 18.6906 7.6872 22.3466 7.52034C26.301 7.33992 27.4869 7.30182 37.4999 7.30182ZM37.4999 0.544922C27.3155 0.544922 26.0386 0.58809 22.0388 0.770588C18.0472 0.952789 15.3214 1.58662 12.9359 2.5137C10.47 3.47204 8.37868 4.75429 6.29395 6.83902C4.20921 8.92376 2.92696 11.015 1.96863 13.481C1.04155 15.8664 0.407718 18.5923 0.225518 22.5839C0.0430195 26.5835 0 27.8605 0 38.045C0 48.2295 0.0430195 49.5065 0.225518 53.5061C0.407718 57.4977 1.04155 60.2236 1.96863 62.609C2.92696 65.0748 4.20921 67.1662 6.29395 69.251C8.37868 71.3357 10.47 72.618 12.9359 73.5763C15.3214 74.5034 18.0472 75.1372 22.0388 75.3194C26.0386 75.5019 27.3155 75.5449 37.4999 75.5449C47.6844 75.5449 48.9614 75.5019 52.9611 75.3194C56.9526 75.1372 59.6785 74.5034 62.0639 73.5763C64.5299 72.618 66.6212 71.3357 68.7059 69.251C70.7906 67.1662 72.0729 65.075 73.0312 62.609C73.9583 60.2236 74.5921 57.4977 74.7743 53.5061C74.9568 49.5065 75 48.2295 75 38.045C75 27.8605 74.9568 26.5835 74.7743 22.5839C74.5921 18.5923 73.9583 15.8664 73.0312 13.481C72.0729 11.015 70.7906 8.92376 68.7059 6.83902C66.6212 4.75429 64.5299 3.47204 62.0639 2.5137C59.6785 1.58662 56.9526 0.952789 52.9611 0.770588C48.9614 0.58809 47.6844 0.544922 37.4999 0.544922ZM37.4999 18.7882C26.8647 18.7882 18.2431 27.4098 18.2431 38.045C18.2431 48.6802 26.8647 57.3018 37.4999 57.3018C48.1351 57.3018 56.7567 48.6802 56.7567 38.045C56.7567 27.4098 48.1351 18.7882 37.4999 18.7882ZM37.4999 50.5451C30.5964 50.5451 24.9999 44.9485 24.9999 38.045C24.9999 31.1415 30.5964 25.5449 37.4999 25.5449C44.4034 25.5449 50 31.1415 50 38.045C50 44.9485 44.4034 50.5451 37.4999 50.5451ZM62.0175 18.0274C62.0175 20.5127 60.0029 22.5275 57.5175 22.5275C55.0322 22.5275 53.0175 20.5127 53.0175 18.0274C53.0175 15.5421 55.0322 13.5274 57.5175 13.5274C60.0029 13.5274 62.0175 15.5421 62.0175 18.0274Z" fill="#00629B"/>
+</g>
+<defs>
+<clipPath id="clip0_105_99">
+<rect width="75" height="75" fill="white" transform="translate(0 0.544922)"/>
+</clipPath>
+</defs>
+</svg>

src/public/img/inst_white.svg

@@ -0,0 +1,10 @@
+<svg width="75" height="76" viewBox="0 0 75 76" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_105_99)">
+<path d="M37.4999 7.30182C47.5129 7.30182 48.6988 7.33992 52.6531 7.52034C56.3093 7.6872 58.2949 8.29811 59.6164 8.81152C61.3667 9.49179 62.616 10.3045 63.9282 11.6167C65.2404 12.9289 66.0531 14.1782 66.7333 15.9285C67.2468 17.25 67.8577 19.2356 68.0246 22.8917C68.205 26.8461 68.2431 28.032 68.2431 38.045C68.2431 48.058 68.205 49.2439 68.0246 53.1981C67.8577 56.8544 67.2468 58.84 66.7333 60.1615C66.0531 61.9118 65.2404 63.1611 63.9282 64.4733C62.616 65.7854 61.3667 66.5982 59.6164 67.2783C58.2949 67.7919 56.3093 68.4028 52.6531 68.5697C48.6994 68.7501 47.5135 68.7882 37.4999 68.7882C27.4864 68.7882 26.3004 68.7501 22.3468 68.5697C18.6906 68.4028 16.705 67.7919 15.3836 67.2783C13.6332 66.5982 12.3838 65.7854 11.0716 64.4733C9.75948 63.1611 8.94672 61.9118 8.2666 60.1615C7.75304 58.84 7.14213 56.8544 6.97527 53.1983C6.79485 49.2439 6.75674 48.058 6.75674 38.045C6.75674 28.032 6.79485 26.8461 6.97527 22.8919C7.14213 19.2356 7.75304 17.25 8.2666 15.9285C8.94672 14.1782 9.75948 12.9289 11.0716 11.6167C12.3838 10.3045 13.6332 9.49179 15.3836 8.81152C16.705 8.29811 18.6906 7.6872 22.3466 7.52034C26.301 7.33992 27.4869 7.30182 37.4999 7.30182ZM37.4999 0.544922C27.3155 0.544922 26.0386 0.58809 22.0388 0.770588C18.0472 0.952789 15.3214 1.58662 12.9359 2.5137C10.47 3.47204 8.37868 4.75429 6.29395 6.83902C4.20921 8.92376 2.92696 11.015 1.96863 13.481C1.04155 15.8664 0.407718 18.5923 0.225518 22.5839C0.0430195 26.5835 0 27.8605 0 38.045C0 48.2295 0.0430195 49.5065 0.225518 53.5061C0.407718 57.4977 1.04155 60.2236 1.96863 62.609C2.92696 65.0748 4.20921 67.1662 6.29395 69.251C8.37868 71.3357 10.47 72.618 12.9359 73.5763C15.3214 74.5034 18.0472 75.1372 22.0388 75.3194C26.0386 75.5019 27.3155 75.5449 37.4999 75.5449C47.6844 75.5449 48.9614 75.5019 52.9611 75.3194C56.9526 75.1372 59.6785 74.5034 62.0639 73.5763C64.5299 72.618 66.6212 71.3357 68.7059 69.251C70.7906 67.1662 72.0729 65.075 73.0312 62.609C73.9583 60.2236 74.5921 57.4977 74.7743 53.5061C74.9568 49.5065 75 48.2295 75 38.045C75 27.8605 74.9568 26.5835 74.7743 22.5839C74.5921 18.5923 73.9583 15.8664 73.0312 13.481C72.0729 11.015 70.7906 8.92376 68.7059 6.83902C66.6212 4.75429 64.5299 3.47204 62.0639 2.5137C59.6785 1.58662 56.9526 0.952789 52.9611 0.770588C48.9614 0.58809 47.6844 0.544922 37.4999 0.544922ZM37.4999 18.7882C26.8647 18.7882 18.2431 27.4098 18.2431 38.045C18.2431 48.6802 26.8647 57.3018 37.4999 57.3018C48.1351 57.3018 56.7567 48.6802 56.7567 38.045C56.7567 27.4098 48.1351 18.7882 37.4999 18.7882ZM37.4999 50.5451C30.5964 50.5451 24.9999 44.9485 24.9999 38.045C24.9999 31.1415 30.5964 25.5449 37.4999 25.5449C44.4034 25.5449 50 31.1415 50 38.045C50 44.9485 44.4034 50.5451 37.4999 50.5451ZM62.0175 18.0274C62.0175 20.5127 60.0029 22.5275 57.5175 22.5275C55.0322 22.5275 53.0175 20.5127 53.0175 18.0274C53.0175 15.5421 55.0322 13.5274 57.5175 13.5274C60.0029 13.5274 62.0175 15.5421 62.0175 18.0274Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_105_99">
+<rect width="75" height="75" fill="white" transform="translate(0 0.544922)"/>
+</clipPath>
+</defs>
+</svg>