diff --git a/next/public/assets/CSESocEventsCP.png b/next/public/assets/CSESocEventsCP.png deleted file mode 100644 index 91d474f3..00000000 Binary files a/next/public/assets/CSESocEventsCP.png and /dev/null differ diff --git a/next/public/assets/Oweek.png b/next/public/assets/Oweek.png new file mode 100644 index 00000000..74915ffd Binary files /dev/null and b/next/public/assets/Oweek.png differ diff --git a/next/src/components/aboutus/AboutUs-Styled.tsx b/next/src/components/aboutus/AboutUs-Styled.tsx index f7ae7df6..27f139c5 100644 --- a/next/src/components/aboutus/AboutUs-Styled.tsx +++ b/next/src/components/aboutus/AboutUs-Styled.tsx @@ -5,11 +5,11 @@ import { sphereProps } from "./Sphere-Styled"; export const AboutUsPage = styled.div` position: relative; top: -50px; - height: 100vh; + width: 100%; display: flex; justify-content: center; align-items: center; - margin-top: 22vh; + margin-top: 50vmin; ` export const AboutUsContent = styled.div` @@ -24,15 +24,10 @@ export const AboutUsContent = styled.div` export const AboutUsText = styled.div` color: var(--accent-darker-purple); font-family: 'Raleway'; - font-weight: 810; - - font-size: 40px; - @media ${device.tablet} { - font-size: 3.5vw; - line-height: 1.9vw; - text-align: right; - } - + font-weight: 800; + font-size: min(5vmin, 40px); + line-height: min(2vmin, 20px); + text-align: right; ` export const MainText = styled.div` @@ -40,17 +35,12 @@ export const MainText = styled.div` background: #A09FE3; border-radius: 1vw; color: #FFFFFF; - font-weight: 400; - font-size: 18px; - padding: 20px; - line-height: 20px; - @media ${device.tablet} { - font-size: 2vw; - text-align: center; - padding: 1.4vw 2vw; - margin-top: 2.8vw; - line-height: 2.5vw; - } + font-weight: 500; + font-size: min(3vmin, 32px); + line-height: min(3.5vmin, 45px); + text-align: center; + padding: min(2.5vmin, 25px) min(2vmin, 20px); + margin-top: min(2.8vmin, 25px); `; export const BlueText = styled.span` @@ -61,15 +51,12 @@ export const MoreInfoText = styled.div` transform: rotate(${props => props.rotation ? -props.rotation : 0}deg); color: #FFFFFF; font-weight: 700; - line-height: 58px; - font-size: 3.6vw; - + font-size: min(3vmin, 32px); + line-height: min(3.5vmin, 40px); + text-align: center; + &:hover { cursor: pointer; transform: rotate(${props => props.rotation ? -props.rotation : 0}deg) scale(1.1); } - - @media ${device.tablet} { - font-size: 2.3vw; - } `; \ No newline at end of file diff --git a/next/src/components/aboutus/Sphere-Styled.tsx b/next/src/components/aboutus/Sphere-Styled.tsx index 8b8f8d0f..92369698 100644 --- a/next/src/components/aboutus/Sphere-Styled.tsx +++ b/next/src/components/aboutus/Sphere-Styled.tsx @@ -2,7 +2,7 @@ import styled from "styled-components"; import { device } from "../../styles/device"; export type sphereProps = { - left? : number; + left?: number; top?: number; leftMobile?: number; topMobile?: number; @@ -22,8 +22,8 @@ export const StyledSphere = styled.div` z-index: 0; left: ${props => props.leftMobile}%; top: ${props => props.topMobile}%; - width: ${props => props.sizeMobile}vw; - height: ${props => props.sizeMobile}vw; + width: ${props => props.sizeMobile}vmin; + height: ${props => props.sizeMobile}vmin; background: linear-gradient( ${props => props.angle}deg, ${props => props.colourMain} ${props => props.startMainPoint}%, @@ -37,11 +37,13 @@ export const StyledSphere = styled.div` align-items: center; border-radius: 50%; - @media ${device.tablet} { + max-width: 400px; + max-height: 400px; + @media ${device.laptop} { left: ${props => props.left}%; top: ${props => props.top}%; - width: ${props => props.size}vw; - height: ${props => props.size}vw; + width: ${props => props.size}vmin; + height: ${props => props.size}vmin; } `; diff --git a/next/src/components/eventspage/ClearLayeredGlassContainer-Styled.tsx b/next/src/components/eventspage/ClearLayeredGlassContainer-Styled.tsx index 1ee18765..6d3e2cff 100644 --- a/next/src/components/eventspage/ClearLayeredGlassContainer-Styled.tsx +++ b/next/src/components/eventspage/ClearLayeredGlassContainer-Styled.tsx @@ -12,9 +12,9 @@ export type positionProps = { export const GlassContainer = styled.div` position: ${(props) => props.position}; - display: ${(props) => props.center ? "flex": ""}; - justify-content: ${(props) => props.center ? "center": ""}; - align-items: ${(props) => props.center ? "center": ""}; + display: ${(props) => props.center ? "flex" : ""}; + justify-content: ${(props) => props.center ? "center" : ""}; + align-items: ${(props) => props.center ? "center" : ""}; top: ${(props) => props.top}vw; left: ${(props) => props.left}vw; @@ -23,24 +23,14 @@ export const GlassContainer = styled.div` border-width: 0.15vw; border-style: solid; border-color: #FAFCFF; - width: 80vw; - height: 50vw; - @media ${device.laptop} { - width: 36.7vw; - height: 20vw; - } + width: min(70vmin, 700px); + height: min(40vmin, 400px); `; export const ImgContainer = styled.div` position: relative; - width: 77vw; - height: 60vw; - top: -4.15vw; - left: 1.5vw; - @media ${device.laptop} { - width: 36vw; - height: 17.8vw; - top: 2.15vw; - left: 1.5vw; - } + width: 77vmin; + height: 60vmin; + top: -4.15vmin; + left: 1.5vmin; ` \ No newline at end of file diff --git a/next/src/components/eventspage/ClearLayeredGlassContainer.tsx b/next/src/components/eventspage/ClearLayeredGlassContainer.tsx index 0ffea44f..83207dab 100644 --- a/next/src/components/eventspage/ClearLayeredGlassContainer.tsx +++ b/next/src/components/eventspage/ClearLayeredGlassContainer.tsx @@ -6,10 +6,9 @@ export default function ClearLayeredGlass() { return (
- - - - + + { window.open("https://www.facebook.com/events/507207411493903", '_blank') }} alt="Events" src="/assets/Oweek.png" layout="fill" objectFit="contain" /> +
); diff --git a/next/src/components/footer/Footer.tsx b/next/src/components/footer/Footer.tsx index 8f45caec..c5075cc1 100644 --- a/next/src/components/footer/Footer.tsx +++ b/next/src/components/footer/Footer.tsx @@ -19,7 +19,7 @@ export const ImagesContainer = styled.div` display: flex; justify-content: space-between; @media ${device.tablet} { - width: 55%; + width: 75%; float: right; } ` @@ -27,21 +27,27 @@ export const ImagesContainer = styled.div` const FooterComponent = styled.footer` background-color: #A09FE3; + width: 100vw; padding: 2rem; display: flex; flex-direction: column; - + position: static; + bottom: 0; @media ${device.tablet} { flex-direction: row; } `; const Logo = styled.div` - width: 100%; + width: 50%; display: flex; + padding-bottom: 5vmin; @media ${device.tablet} { + padding-bottom: 0vmin; + width: 75%; + padding-left: 10vmin; } `; @@ -49,10 +55,13 @@ const Details = styled.div` width: 100%; text-align: left; color: white; + font-size: min(3vmin, 32px); + line-height: min(3.5vmin, 45px); @media ${device.tablet} { - width: 25%; + width: 40%; text-align: right; + padding-right: 10vmin; } `; @@ -63,11 +72,11 @@ const Footer: React.FC<{}> = () => { CSESoc
-

+

B03 CSE Building K17, UNSW
csesoc@csesoc.org.au -

+

CSESoc Discord @@ -87,7 +96,7 @@ const Footer: React.FC<{}> = () => {

© 2022 — CSESoc UNSW -

+
); diff --git a/next/src/components/navbar/HamburgerMenu.tsx b/next/src/components/navbar/HamburgerMenu.tsx index 906567bb..642b3199 100644 --- a/next/src/components/navbar/HamburgerMenu.tsx +++ b/next/src/components/navbar/HamburgerMenu.tsx @@ -24,12 +24,12 @@ const HamburgerMenu = (props: HamburgerMenuProps) => { ) : <>} - Future Students - About Us - Contact - Events - Resources - Sponsors + Future Students + About Us + History + Events + Resources + Sponsors diff --git a/next/src/components/resources/Carousel.tsx b/next/src/components/resources/Carousel.tsx index e3892036..15ff4296 100644 --- a/next/src/components/resources/Carousel.tsx +++ b/next/src/components/resources/Carousel.tsx @@ -3,6 +3,7 @@ import { useState, useEffect } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { wrap } from "popmotion"; import images from "./image-data"; +import { device } from "../../styles/device"; const variants = { enter: (direction: number) => { @@ -57,7 +58,7 @@ const Example = () => { x: { type: "spring", stiffness: 300, damping: 30 }, opacity: { duration: 0.2 } }} - style={{ width: "30%", position: "absolute", cursor: "pointer"}} + style={{ width: "25%", position: "absolute", cursor: "pointer" }} /> diff --git a/next/src/components/resources/image-data.tsx b/next/src/components/resources/image-data.tsx index b8a147ff..cffc909e 100644 --- a/next/src/components/resources/image-data.tsx +++ b/next/src/components/resources/image-data.tsx @@ -1,21 +1,31 @@ -import degree_planner from "../../svgs/degree_planner.svg" -import jobs_board from "../../svgs/jobs_board.svg" -import notangles from "../../svgs/notangles.svg" +import circles from "../../svgs/Circles.png" +import jobsboard from "../../svgs/Jobsboard.png" +import notangles from "../../svgs/Notangles.png" +import structs from "../../svgs/Structs.png" +import cselectives from "../../svgs/Cselectives.png" + const images = [ { - url: degree_planner.src, - link: "https://circles.csesoc.app/degree-wizard" + url: circles.src, + link: "https://circles.csesoc.app/" }, { - url: jobs_board.src, + url: jobsboard.src, link: "https://jobsboard.csesoc.unsw.edu.au/" }, { url: notangles.src, link: "https://notangles.csesoc.app/" - } - + }, + { + url: structs.src, + link: "https://structs.sh/" + }, + { + url: cselectives.src, + link: "https://cselectives.csesoc.app/" + }, ]; export default images; \ No newline at end of file diff --git a/next/src/pages/MiniAboutUs.tsx b/next/src/pages/MiniAboutUs.tsx index 6674d320..927c9341 100644 --- a/next/src/pages/MiniAboutUs.tsx +++ b/next/src/pages/MiniAboutUs.tsx @@ -1,11 +1,12 @@ import Sphere from '../components/aboutus/ReusableSpheres'; import * as PageStyle from '../components/aboutus/AboutUs-Styled'; import { Fragment } from 'react'; +import { device } from '../styles/device'; const args1 = { - left: 11, - top: 7, - size: 13, + left: 15, + top: -25, + size: 20, colourMain: "#969DC7", colourSecondary: "#DAE9FB", startMainPoint: -12, @@ -18,8 +19,8 @@ const args1 = { const args2 = { left: 45, - top: 23, - size: 9, + top: -15, + size: 15, colourMain: "#D0E0ED", colourSecondary: "#498AC1", startMainPoint: 10.97, @@ -30,11 +31,11 @@ const args2 = { } const args3 = { - left: 14, - top: 62, - leftMobile: 70, - topMobile: 40, - size: 9, + left: 18, + top: 70, + leftMobile: 10, + topMobile: 0, + size: 15, sizeMobile: 40, colourMain: "#9B9BE1", colourSecondary: "#E8CAFF", @@ -46,12 +47,12 @@ const args3 = { } const args4 = { - left: 72, - top: 64, - leftMobile: 0, - topMobile: 58, - sizeMobile: 25, - size: 16, + left: 75, + top: 75, + leftMobile: 70, + topMobile: 70, + sizeMobile: 20, + size: 20, colourMain: "#0069E7", colourSecondary: "#BDDBFF", startMainPoint: -10.14, @@ -65,13 +66,13 @@ const SphereArgs = [args1, args2, args3, args4]; const CreateSpheres = SphereArgs.map((arg, index) => { return ( - - - - {arg.text} - - - + + + + {arg.text} + + + ) }) @@ -83,12 +84,8 @@ const AboutUs = () => ( About Us - We are one of the biggest and most active societies at - UNSW - , catering to over - 3500 CSE students - spanning across degrees in Computer Science, Software Engineering, Bioinformatics and Computer Engineering. - + We are one of the biggest and most active societies at UNSW, catering to over 3500 CSE students spanning across degrees in Computer Science, Software Engineering, Bioinformatics and Computer Engineering. + {CreateSpheres} diff --git a/next/src/pages/MiniEvents.tsx b/next/src/pages/MiniEvents.tsx index ce1b35fb..2af230e4 100644 --- a/next/src/pages/MiniEvents.tsx +++ b/next/src/pages/MiniEvents.tsx @@ -9,12 +9,14 @@ const Container = styled.div` flex-direction: column; justify-content: center; align-items: center; - gap: 100px; + gap: 10vmin; + margin: 40vmin 0vmin; + max-width: 100%; @media ${device.laptop} { flex-direction: row; justify-content: space-evenly; align-items: center; - margin: 30vh 10vw; + margin: 50vmin 15vmin; } z-index: 100; ` @@ -22,7 +24,7 @@ const Container = styled.div` const ColumnContainer = styled.div` display: flex; flex-direction: column; - width: 60vw; + width: 40%; @media ${device.laptop} { padding: 30px; } @@ -32,26 +34,20 @@ const HeadingText = styled.div` color: var(--accent-darker-purple); font-family: 'Raleway'; font-weight: 800; - font-size: 40px; - @media ${device.laptop} { - font-size: 3.5vw; - line-height: 0vw; - text-align: left; - margin-top: 2vw; - } + font-size: min(5vmin, 40px); + line-height: min(2vmin, 20px); + text-align: left; ` const BodyText = styled.div` color: var(--accent-darker-purple); - font-weight: 200; - font-size: 20px; + font-weight: 600; + font-size: min(3vmin, 32px); + line-height: min(3.5vmin, 45px); + text-align: left; + padding: 20px 0; + margin-top: min(2.8vmin, 25px); @media ${device.tablet} { - font-size: 1.9vw; - line-height: 2.5vw; - margin-top: 3vw; - } - - @media ${device.laptop} { color: white; } diff --git a/next/src/pages/MiniHomepage.tsx b/next/src/pages/MiniHomepage.tsx index 35e9fd01..ae81d464 100644 --- a/next/src/pages/MiniHomepage.tsx +++ b/next/src/pages/MiniHomepage.tsx @@ -109,7 +109,7 @@ const Text3 = styled.div` } `; -export default function Homepage({}: Props) { +export default function Homepage({ }: Props) { return ( <> @@ -117,7 +117,7 @@ export default function Homepage({}: Props) { - + @@ -127,7 +127,7 @@ export default function Homepage({}: Props) { Empowering - + future diff --git a/next/src/pages/MiniResources.tsx b/next/src/pages/MiniResources.tsx index 92b2bb7b..f89b83f3 100644 --- a/next/src/pages/MiniResources.tsx +++ b/next/src/pages/MiniResources.tsx @@ -17,21 +17,19 @@ const Container = styled.div` display: flex; flex-direction: column; align-items: center; - margin: 30vh 0; - + margin-bottom: 30vmin; + width: 100%; @media ${device.laptop} { - height: 100vh; + height: min(100vmin, 1000px); } ` const Heading = styled.div` color: var(--accent-darker-purple); font-family: 'Raleway'; font-weight: 800; - font-size: 30px; + font-size: min(5vmin, 40px); + line-height: min(2vmin, 20px); text-align: center; - @media ${device.tablet} { - font-size: 3.5vw; - } ` const HeadingContainer = styled.div` @@ -41,12 +39,12 @@ const HeadingContainer = styled.div` const BodyContainer = styled.div` display:flex; - padding: 10vh 20vw; - + padding: min(10vh, 100px) min(20vw, 100px); + width: 50%; justify-content: center; align-items: center; flex-direction: column; - gap: 20vw; + gap: min(20vmin, 400px); @media ${device.laptop} { flex-direction: row; } @@ -60,7 +58,7 @@ const ColumnContainer = styled.div` justify-content: center; @media ${device.laptop} { flex-direction: column; - gap: 10vh; + gap: min(10vh, 100px); } ` @@ -80,7 +78,7 @@ const ImgContainer = styled.div` const imgs = [YT, FB, DC, SPOT] const urls = ["https://www.youtube.com/c/CSESocUNSW", "https://www.facebook.com/csesoc/", "https://bit.ly/CSESocDiscord", "https://open.spotify.com/show/2h9OxTkeKNznIfNqMMYcxj"] -export default function Resources({}: Props) { +export default function Resources({ }: Props) { return ( @@ -96,12 +94,12 @@ export default function Resources({}: Props) { {imgs.map((src) => ( - - + + - + ))} - + diff --git a/next/src/pages/MiniSupport.tsx b/next/src/pages/MiniSupport.tsx index de79b437..329486df 100644 --- a/next/src/pages/MiniSupport.tsx +++ b/next/src/pages/MiniSupport.tsx @@ -1,128 +1,203 @@ -import React from 'react' +import React, { useState } from "react"; +import Image from "next/image"; +import Footer from "../components/footer/Footer"; +import Navbar from "../components/navbar/Navbar"; +import { NavbarOpenHandler, NavbarType } from "../components/navbar/types"; import styled from 'styled-components' -import Otter from '../svgs/otter.png' -import Image from 'next/image'; import Link from 'next/link' import { device } from '../styles/device' -import { SectionFadeInFromLeft, SectionFadeInFromRight } from "../styles/motion" -type Props = {} +import Otter from '../svgs/otter.png' -const Container = styled.div` - @media ${device.laptop} { - height: 100vh; - } +const Text = styled.p` + color: white; + font-size: min(3vmin, 32px); + line-height: min(3.5vmin, 45px); + text-align: center; ` -const HeadingContainer = styled.div` +const Grid = styled.div` display: flex; justify-content: center; + margin-left: auto; + margin-right: auto; + max-width: 70vw; + max-width: 75vw; + border-radius: 0.5rem; + margin-bottom: 10vh; + background: radial-gradient(50% 50% at 50% 50%, rgba(146, 67, 166, 0.2407) 0%, rgba(119, 158, 237, 0.83) 100%); + ` -const Heading = styled.div` - color: #A09FE3; - font-family: 'Raleway'; - font-weight: 800; - font-size: 30px; - @media ${device.tablet} { - font-size: 3.5vw; - } -`; - -const BodyContainer = styled.div` +const SmallGrid = styled.div` display: flex; + justify-content: center; flex-direction: column; - padding: 10vh 0; + flex: 2; @media ${device.tablet} { + min-height: 100%; + flex-wrap: wrap; flex-direction: row; - padding: 10vh 30vw; + flex: 3; } ` +const OurSponsorsCol = styled.div` + flex: 2; + padding: 0vmin 2.5vmin; + @media ${device.tablet} { + padding: 5vmin 2.5vmin; + } +` + +const SponsorCol = styled.div` + flex: 3; + display: flex; + justify-content: center; + max-height: 100%; + max-width: 100%; + border-radius: 0.5rem; + padding: 1vmin; + @media ${device.tablet} { + flex-basis: calc(50% - 40px); + flex-direction: column; + padding: 4vmin 3vmin; + } + + +` + const TextContainer = styled.div` display:flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; - padding: 0 3vw; +` + +const ButtonContainer = styled.div` + display: flex; ` const H3 = styled.div` - color: #9B9B9B; + color: white; font-family: 'Raleway'; font-weight: 800; - font-size: 20px; - @media ${device.tablet} { - font-size: 2.5vw; - } + font-size: min(4vmin, 36px); + line-height: min(2vmin, 20px); `; -const Text = styled.p` - color: #9B9B9B; -` -const ButtonContainer = styled.div` - display: flex; -` +const Button = styled.button` + background-color: white; + margin: 10px; + padding: 1.5vmin 2.5vmin; + font-size: min(3vmin, 32px); + line-height: min(3.5vmin, 45px); + color: #817fff; + border: none; + border-radius: 6px; + cursor: pointer; -const FlexCenter = styled.div` - display: flex; - justify-content: center; - align-items: center; + &:hover { + transform: scale(1.05); + } + @media ${device.tablet} { + padding: min(2vmin, 20px) min(3vmin, 32px); + } ` + const ImgContainer = styled.div` - width: 50vw; + + display: block; + margin-left: auto; + margin-right: auto; + width: 30vw; @media ${device.laptop} { width: 350px; height: 400px; } -` -const Button = styled.button` - background-color: #9B9B9B; - margin: 10px; - padding: 10px 45px; - font-size: 18px; - color: white; - border: none; - border-radius: 6px; - cursor: pointer; +` - &:hover { - transform: scale(1.05); - } +const HeadingContainer = styled.div` + display: flex; + justify-content: center; ` +const Heading = styled.div` + color: var(--accent-darker-purple); + font-family: 'Raleway'; + font-weight: 800; + font-size: min(5vmin, 40px); + line-height: min(2vmin, 20px); +`; + -export default function Support({ }: Props) { + +export default function Support() { return ( - +
Support CSESoc - - + + + + + + +

Our Sponsors

+ Check out our very cool sponsors - + - Check out our very cool sponsors - - - - - - - - - - - ) + + + + + + + + + + + + + + + + + + +
+ ); + } \ No newline at end of file diff --git a/next/src/pages/Sponsors2.tsx b/next/src/pages/Sponsors2.tsx deleted file mode 100644 index a035f8f1..00000000 --- a/next/src/pages/Sponsors2.tsx +++ /dev/null @@ -1,219 +0,0 @@ -import React, { useState } from "react"; -import Image from "next/image"; -import Footer from "../components/footer/Footer"; -import Navbar from "../components/navbar/Navbar"; -import { NavbarOpenHandler, NavbarType } from "../components/navbar/types"; -import styled from 'styled-components' -import Link from 'next/link' -import { device } from '../styles/device' - - -import Otter from '../svgs/otter.png' - -const Text = styled.p` - color: white; - @media ${device.tablet} { - padding: 3vh 0; - } -` - -const Grid = styled.div` - display: flex; - justify-content: center; - margin-left: auto; - margin-right: auto; - max-width: 70vw; - max-width: 75vw; - border-radius: 0.5rem; - margin-bottom: 10vh; - background: radial-gradient(50% 50% at 50% 50%, rgba(146, 67, 166, 0.2407) 0%, rgba(119, 158, 237, 0.83) 100%); - -` - -const SmallGrid = styled.div` - display: flex; - justify-content: center; - flex-direction: column; - flex: 2; - @media ${device.tablet} { - min-height: 100%; - flex-wrap: wrap; - flex-direction: row; - flex: 3; - } -` - -const OurSponsorsCol = styled.div` - flex: 2; - padding: 1.5rem; - -` - -const SponsorCol = styled.div` - flex: 3; - display: flex; - justify-content: center; - max-height: 100%; - max-width: 100%; - border-radius: 0.5rem; - padding: 1vw; - @media ${device.tablet} { - flex-basis: calc(50% - 40px); - flex-direction: column; - padding: 8vh 0; - } - - -` - -const TextContainer = styled.div` - display:flex; - flex-direction: column; - justify-content: center; - align-items: center; - height: 100%; -` - -const ButtonContainer = styled.div` - display: flex; -` - -const H3 = styled.div` - color: white; - font-family: 'Raleway'; - font-weight: 800; - font-size: 20px; - @media ${device.tablet} { - font-size: 2vw; - } -`; - - -const Button = styled.button` - background-color: white; - margin: 10px; - padding: 1vh 2vw; - font-size: 18px; - color: #817fff; - border: none; - border-radius: 6px; - cursor: pointer; - - &:hover { - transform: scale(1.05); - } - @media ${device.tablet} { - padding: 10px 45px; - } -` - -const ImgContainer = styled.div` - - display: block; - margin-left: auto; - margin-right: auto; - width: 30vw; - - @media ${device.laptop} { - width: 350px; - height: 400px; - } - -` - -const HeadingContainer = styled.div` - display: flex; - justify-content: center; -` - -const Heading = styled.div` - color: #A09FE3; - font-family: 'Raleway'; - font-weight: 800; - font-size: 30px; - padding: 5vh 0; - @media ${device.tablet} { - font-size: 2.8vw; - } -`; - - - -export default function Sponsors2() { - - const [navbarOpen, setNavbarOpen] = useState(false); - - - const handleToggle: NavbarOpenHandler = () => { - setNavbarOpen(!navbarOpen); - }; - - return ( -
- - - - - Support CSESoc - - - - - - - - - -

Our Sponsors

- Check out our very cool sponsors - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- ); - -} \ No newline at end of file diff --git a/next/src/pages/SupportOld.tsx b/next/src/pages/SupportOld.tsx new file mode 100644 index 00000000..de79b437 --- /dev/null +++ b/next/src/pages/SupportOld.tsx @@ -0,0 +1,128 @@ +import React from 'react' +import styled from 'styled-components' +import Otter from '../svgs/otter.png' +import Image from 'next/image'; +import Link from 'next/link' +import { device } from '../styles/device' + +import { SectionFadeInFromLeft, SectionFadeInFromRight } from "../styles/motion" + +type Props = {} + +const Container = styled.div` + @media ${device.laptop} { + height: 100vh; + } +` + +const HeadingContainer = styled.div` + display: flex; + justify-content: center; +` + +const Heading = styled.div` + color: #A09FE3; + font-family: 'Raleway'; + font-weight: 800; + font-size: 30px; + @media ${device.tablet} { + font-size: 3.5vw; + } +`; + +const BodyContainer = styled.div` + display: flex; + flex-direction: column; + padding: 10vh 0; + @media ${device.tablet} { + flex-direction: row; + padding: 10vh 30vw; + } +` + +const TextContainer = styled.div` + display:flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100%; + padding: 0 3vw; +` + +const H3 = styled.div` + color: #9B9B9B; + font-family: 'Raleway'; + font-weight: 800; + font-size: 20px; + @media ${device.tablet} { + font-size: 2.5vw; + } +`; + +const Text = styled.p` + color: #9B9B9B; +` + +const ButtonContainer = styled.div` + display: flex; +` + +const FlexCenter = styled.div` + display: flex; + justify-content: center; + align-items: center; +` +const ImgContainer = styled.div` + width: 50vw; + + @media ${device.laptop} { + width: 350px; + height: 400px; + } +` + +const Button = styled.button` + background-color: #9B9B9B; + margin: 10px; + padding: 10px 45px; + font-size: 18px; + color: white; + border: none; + border-radius: 6px; + cursor: pointer; + + &:hover { + transform: scale(1.05); + } +` + + +export default function Support({ }: Props) { + return ( + + + Support CSESoc + + + + +

Our Sponsors

+ + + + + + Check out our very cool sponsors + + + + + + + + + + + + ) +} \ No newline at end of file diff --git a/next/src/pages/index.tsx b/next/src/pages/index.tsx index 17900eaf..ef7c9f6c 100644 --- a/next/src/pages/index.tsx +++ b/next/src/pages/index.tsx @@ -11,7 +11,6 @@ import HamburgerMenu from "../components/navbar/HamburgerMenu"; import HPCurve from "../svgs/HPCurve" import TopRect from "../svgs/TopRect.svg" import BottomRect from "../svgs/BottomRect.svg" -import Otter from '../svgs/otter.png' // local import Navbar from "../components/navbar/Navbar"; @@ -22,27 +21,32 @@ import Resources from "./MiniResources"; import Support from "./MiniSupport"; import Footer from "../components/footer/Footer"; -import { device } from '../styles/device' -import { SectionFadeInFromLeft, SectionFadeInFromRight, Spin } from "../styles/motion" -import Sponsors from "./Sponsors"; +import { size as deviceSize, device } from '../styles/device' +import { SectionFadeInFromLeft, SectionFadeInFromRight } from "../styles/motion" import ExecDescription from "./ExecDescription"; +import { relative } from "path"; type CurveContainerProps = { offset: number; }; const PageContainer = styled.div` - max-width: 100vw; min-height: 100vh; + width: 100%; display: flex; flex-direction: column; + align-items: center; `; const CurveContainer = styled.div` - position: absolute; - top: ${props => props.offset}px; + position: relative; + display: flex; + flex-direction: column; + align-items: flex-end; + justify-content: flex-start; + top: -${props => props.offset}/2px; right: 0; - z-index: -1; + z-index: -1; `; const NavContainer = styled.div` @@ -51,28 +55,26 @@ const NavContainer = styled.div` const PurpleBlock = styled.div` background: #BEB8EA; - width: 100vw; - height: 135vh; - position: relative; - top: -10px; + width: 100%; + height: 50vmin; + @media ${device.tablet} { + height: min(250vmin, 2560px); + } + @media ${device.laptop} { + height: min(150vmin, 2560px); + } `; const Background = styled.div<{ offset?: number }>` + width: 100%; position: absolute; - top: ${(props) => props.offset}px; right: 0; z-index: -1; + height: auto; `; const RefLink = styled.div`` -const LoaderContainer = styled.div` - display: flex; - justify-content: center; - align-items: center; - height: 100vh; -` - const Index: NextPage = () => { @@ -80,7 +82,6 @@ const Index: NextPage = () => { const [height, setHeight] = useState(); const [loaded, setLoaded] = useState(false); const [navbarOpen, setNavbarOpen] = useState(false); - const [fakeLoading, setFakeLoading] = useState(true); const handleToggle: NavbarOpenHandler = () => { setNavbarOpen(!navbarOpen); @@ -102,72 +103,77 @@ const Index: NextPage = () => { setWidth(window?.innerWidth) }, [width]) - setTimeout(() => { - setFakeLoading(false); - }, 2000) - - if (fakeLoading) { - return ( - - - - - - - - ) - } - return ( - - - CSESoc - - - + <> {!navbarOpen && } {navbarOpen && } - {(loaded && height && width) && ( - <> - - - {/* */} - - - - - -
- +
+ + + CSESoc + + + + {(loaded && height && width) && ( + <> + + + {/* */} + + + +
+ + + + + + {/* */} + + {/* */} + +
+
+ + +
+ purple-top-bg +
+ +
+ purple-bottom-bg +
+ +
- - - - - - - - - - - - - - - - - - - - - -
- - )} - - +
+ + + {/* */} + + {/* */} + + + + + + + +
+ + )} + + +
+
+ ); }; diff --git a/next/src/styles/motion.tsx b/next/src/styles/motion.tsx index c3ca5bd6..44ef4994 100644 --- a/next/src/styles/motion.tsx +++ b/next/src/styles/motion.tsx @@ -8,7 +8,7 @@ type Props = { children?: any } -export const Spin = ({children}: Props) => ( +export const Spin = ({ children }: Props) => ( ( ) -export const FadeIn = ({children}: Props) => ( +export const FadeIn = ({ children }: Props) => ( ( ) -export const SlideInFromLeft = ({children}: Props) => ( +export const SlideInFromLeft = ({ children }: Props) => ( {children} ) -export const SlideInFromRight = ({children}: Props) => ( +export const SlideInFromRight = ({ children }: Props) => ( {children} ) -export const SectionFadeInFromLeft = ({children}: Props) => ( +export const SectionFadeInFromLeft = ({ children }: Props) => ( {children} ) -export const SectionFadeInFromRight = ({children}: Props) => ( +export const SectionFadeInFromRight = ({ children }: Props) => ( {children} @@ -77,10 +77,10 @@ export const TypewriterAnimation = ({ children }: Props) => { const words = children.split('') const params = { - initial : { y: '100%' }, - animate : "visible", - variants : { - visible: (i:any) => ({ + initial: { y: '100%' }, + animate: "visible", + variants: { + visible: (i: any) => ({ y: 0, transition: { delay: i * 0.08 @@ -89,11 +89,11 @@ export const TypewriterAnimation = ({ children }: Props) => { }, } - return words.map((word:any, i:any) => { + return words.map((word: any, i: any) => { return (
- - - - - - - - diff --git a/next/src/svgs/jobs_board.svg b/next/src/svgs/jobs_board.svg deleted file mode 100644 index 47cf845c..00000000 --- a/next/src/svgs/jobs_board.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/next/src/svgs/notangles.svg b/next/src/svgs/notangles.svg deleted file mode 100644 index b5b0a205..00000000 --- a/next/src/svgs/notangles.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - -