diff --git a/src/components/ContactInformationContainer.tsx b/src/components/ContactInformationContainer.tsx new file mode 100644 index 0000000..712e898 --- /dev/null +++ b/src/components/ContactInformationContainer.tsx @@ -0,0 +1,33 @@ +import React from 'react' +import '../styles/sponsors.css'; + +interface ContactInformationContainerProps { + href?: string + altTxt?: string + title: string + body: string + img: string +} + + +function ContactInformationContainer(props : ContactInformationContainerProps) { + return ( + +
+
+ {props.altTxt} +
+
+
+ {props.title} +
+
+ {props.body} +
+
+
+ + ) +} + +export default ContactInformationContainer \ No newline at end of file diff --git a/src/components/CurrentSponsorCard.tsx b/src/components/CurrentSponsorCard.tsx new file mode 100644 index 0000000..6f4c506 --- /dev/null +++ b/src/components/CurrentSponsorCard.tsx @@ -0,0 +1,16 @@ +import '../styles/sponsors.css' +import React from 'react'; + +interface CurrentSponsorCardProps { + img: string, + color: string, +} + +function CurrentSponsorCard(props: CurrentSponsorCardProps) { + + return ( + + ) +} + +export default CurrentSponsorCard \ No newline at end of file diff --git a/src/components/CurrentSponsorRow.tsx b/src/components/CurrentSponsorRow.tsx new file mode 100644 index 0000000..885dfa3 --- /dev/null +++ b/src/components/CurrentSponsorRow.tsx @@ -0,0 +1,18 @@ +import React from 'react' +import '../styles/sponsors.css'; +import texelArts from '../static/images/sponsor-images/texelArts.png' +import texasRobotics from '../static/images/sponsor-images/texasRobotics.jpg' +import serviceNow from '../static/images/sponsor-images/serviceNow.png' +import CurrentSponsorCard from './CurrentSponsorCard'; +function CurrentSponsorRow() { + + return ( +
+ + + +
+ ) +} + +export default CurrentSponsorRow \ No newline at end of file diff --git a/src/components/OfficerCards.tsx b/src/components/OfficerCards.tsx index 70a288d..4a35577 100644 --- a/src/components/OfficerCards.tsx +++ b/src/components/OfficerCards.tsx @@ -8,7 +8,7 @@ interface Props { name?: string; position?: string; img?: string; - linkedIn: string; + linkedIn?: string; email: string; bio: string; topAlignImage: boolean; @@ -68,16 +68,29 @@ function OfficerCards(props: Props) {
-
- {props.bio} -
-
- - - - - - +
+
+ {props.bio} +
+
+ {props.linkedIn && ( + + )} + + + +
diff --git a/src/components/SponsorPackage.tsx b/src/components/SponsorPackage.tsx new file mode 100644 index 0000000..318a29b --- /dev/null +++ b/src/components/SponsorPackage.tsx @@ -0,0 +1,33 @@ +import React from 'react' + +interface SponsorPackageProps { + tier: string + perks: string[] +} + +function SponsorPackage(props: SponsorPackageProps) { + return ( +
+
+
+
+
{props.tier}
+
+
+ +
+
+
    + {props.tier !== 'Silver' && (
  • All Prior Perks
    • )} + {props.perks.map((perk, index) => +
  • {perk}
    • + )} +
+
+
+
+
+ ) +} + +export default SponsorPackage \ No newline at end of file diff --git a/src/components/SponsorPackageRow.tsx b/src/components/SponsorPackageRow.tsx new file mode 100644 index 0000000..e1268c5 --- /dev/null +++ b/src/components/SponsorPackageRow.tsx @@ -0,0 +1,42 @@ +import React from 'react'; +import '../styles/sponsors.css'; +import SponsorPackage from './SponsorPackage'; + +interface SponsorPackageRowProps { + isVisible:boolean, +} +function SponsorPackageRow(props : SponsorPackageRowProps) { + const silver = [ + // "", + "Listed as a sponsor on our club T-shirt worn by 30+ members (name only)", + "Featured on a once-per-semester appreciation shoutout on our Instagram with 150+ followers", + "Highlighted as a sponsor on our club website", + "Provide us with your swag and flyers to distribute at our faculty talks and club meetings with a regular attendance of 30+" + ]; + + const gold =[ + // "", + "Listed as a sponsor on our club T-shirt worn by 30+ members (logo)", + "Secure a booth to advertise your company at our twice-semesterly Demo Days, which are attended by professors and 40+ UT Austin CS students", + "Obtain invitations to host workshops & recruiting events for our members up to 2 times a semester and with a potential turnout of 30+ students" + ]; + + const diamond =[ + // "", + "Gain access to our resume book containing the profiles of the 30+ members active on our engineering projects", + "Attain higher priority for invitations to host workshops & recruiting events for our members", + "Showcase your logo on ~50 club flyers posted around campus in areas such as the CS and engineering buildings, garnering ~10,000 views", + "Advertise your campus events and other opportunities on our Discord and mailing list, reaching a network of 500+ UT Austin students and alumni" + ] + + return ( +
+ + + +
+ + ) +} + +export default SponsorPackageRow \ No newline at end of file diff --git a/src/pages/About.tsx b/src/pages/About.tsx index 2b95fa0..b6ede63 100644 --- a/src/pages/About.tsx +++ b/src/pages/About.tsx @@ -20,9 +20,17 @@ import henryImg from '../static/images/officer/henry.jpg' import nikhilImg from '../static/images/officer/nikhil.jpeg' import abbhinavImg from '../static/images/officer/abbhinav.jpeg' import annabelImg from '../static/images/officer/annabel.png' -import HurshImg from '../static/images/officer/hursh.jpeg' -import SavvyImg from '../static/images/officer/savvy.jpg' -import RileyImg from '../static/images/officer/riley.jpg' +import hurshImg from '../static/images/officer/hursh.jpeg' +import savvyImg from '../static/images/officer/savvy.jpg' +import rileyImg from '../static/images/officer/riley.jpg' +import cameronImg from '../static/images/officer/cameron.jpg' +import manasImg from '../static/images/officer/manas.jpg' +import nathanImg from '../static/images/officer/nathan.jpg' +import alexzanderImg from '../static/images/officer/alexzander.jpg' +import arnavImg from '../static/images/officer/arnav.jpg' +import thidaImg from '../static/images/officer/thida.jpg' +import zoeImg from '../static/images/officer/zoe.png' +import placeholderImg from '../static/images/officer/placeholder.png' function About() { const [aBGLoaded, setABGLoaded] = useState(false); @@ -86,8 +94,7 @@ function About() { @@ -103,29 +110,65 @@ function About() { + name='Cameron Cox' + position='Corporate Director' + img={cameronImg} bio="Hey y'all, I'm Cameron. I'm a computer Science Major with a passion for robotics and in my freetime I play D&D, piano and cook a lot." + linkedIn='https://www.linkedin.com/in/cameron-cox-ut/' + email='cameron.cox@utexas.edu' topAlignImage={false}/> + name='Thida Lay-Sok' + position='Outreach Director' + img={thidaImg} bio="Hello, my name is Thida because my actual name is too long. I'm an Aerospace Engineering and Physics double major. But when I'm not struggling, I enjoy reading and drawing. My goal in life is to marry Zoe Vo <3...but too bad she doesn't want me back" + linkedIn='https://www.linkedin.com/in/thidalaysok/' + email='laysok@utexas.edu' topAlignImage={false}/> + + + + + + + + + + + + + + + + + img={alexzanderImg} bio="Wassup, everyone! It's Alexzander! I'm a computer science major who loves playing games and sports (especially baseball). I am an avid note-taker because I have an atrocious memory :D. " + linkedIn='' + email='alexzanderwilburn2424@outlook.com' topAlignImage={true} /> @@ -149,11 +192,11 @@ function About() { }}>
- + @@ -161,7 +204,7 @@ function About() { diff --git a/src/pages/Homepage.tsx b/src/pages/Homepage.tsx index 28fbd84..8eb5eaf 100644 --- a/src/pages/Homepage.tsx +++ b/src/pages/Homepage.tsx @@ -12,7 +12,7 @@ import headerBackground from '../static/vectors/polygon-header.svg'; import headerImage_1 from '../static/images/drone_header.png'; import headerImage_2 from '../static/images/eclair_group.png'; import CalendarEmbed from '../components/CalendarEmbed'; - +import CurrentSponsorRow from '../components/CurrentSponsorRow'; function Homepage() { const [screenSize, setScreenSize] = useState(getCurrentDimension()); @@ -191,6 +191,19 @@ function Homepage() {
+ +
+
Our Sponsors
+
{/*
Projects
    -
  • handleFilterChange([0])}>Current
    • +
  • handleFilterChange([0])}>In-Progress
  • handleFilterChange([1])}>Completed
  • handleFilterChange([0, 1])}>All
diff --git a/src/pages/Sponsors.tsx b/src/pages/Sponsors.tsx index 50dd1b9..7a23117 100644 --- a/src/pages/Sponsors.tsx +++ b/src/pages/Sponsors.tsx @@ -9,56 +9,37 @@ import phone from '../static/images/sponsor-images/phoneIcon1.png'; import email from '../static/images/sponsor-images/emailIcon1.png'; import form from '../static/images/sponsor-images/formIcon.png'; import React, { useEffect, useRef, useState } from 'react'; +//import SponsorPackageRow from '../components/SponsorPackageRow'; +import CurrentSponsorRow from '../components/CurrentSponsorRow'; +import ContactInformationContainer from '../components/ContactInformationContainer'; function Sponsors() { - const [isVisible, setIsVisible] = useState(false); - const elementRef = useRef(null); - - useEffect(() => { - const observer = new IntersectionObserver((entries) => { - const [entry] = entries; - setIsVisible(entry.isIntersecting); - - if (entry.isIntersecting) { - observer.unobserve(entry.target); - } - }); - if (elementRef.current) { - observer.observe(elementRef.current); - } - return () => { - if (elementRef.current) { - observer.unobserve(elementRef.current); - } - }; - }, []); + // const [isVisible, setIsVisible] = useState(false); + // const elementRef = useRef(null); + + // useEffect(() => { + // const observer = new IntersectionObserver((entries) => { + // const [entry] = entries; + // setIsVisible(entry.isIntersecting); + + // if (entry.isIntersecting) { + // observer.unobserve(entry.target); + // } + // }); + // if (elementRef.current) { + // observer.observe(elementRef.current); + // } + // return () => { + // if (elementRef.current) { + // observer.unobserve(elementRef.current); + // } + // }; + // }, []); const [isElementVisible, setElementVisible] = useState(false); const targetElementRef = useRef(null); - const bronze = [ - // "", - "Listed as a sponsor on our club T-shirt worn by 30+ members (name only)", - "Featured on a once-per-semester appreciation shoutout on our Instagram with 150+ followers", - "Highlighted as a sponsor on our club website", - "Provide us with your swag and flyers to distribute at our faculty talks and club meetings with a regular attendance of 30+" - ]; - - const silver =[ - // "", - "Listed as a sponsor on our club T-shirt worn by 30+ members (logo)", - "Secure a booth to advertise your company at our twice-semesterly Demo Days, which are attended by professors and 40+ UT Austin CS students", - "Obtain invitations to host workshops & recruiting events for our members up to 2 times a semester and with a potential turnout of 30+ students" - ]; - - const gold =[ - // "", - "Gain access to our resume book containing the profiles of the 30+ members active on our engineering projects", - "Attain higher priority for invitations to host workshops & recruiting events for our members", - "Showcase your logo on ~50 club flyers posted around campus in areas such as the CS and engineering buildings, garnering ~10,000 views", - "Advertise your campus events and other opportunities on our Discord and mailing list, reaching a network of 500+ UT Austin students and alumni" - ] useEffect(() => { const observer = new IntersectionObserver((entries) => { @@ -110,74 +91,15 @@ function Sponsors() { return (
-
- Sponsors -
+
Current Sponsors
load animation -
-
-
-
-
-
-
Diamond
-
-
- -
-
-
    -
  • All Gold Perks
    • - {gold.map((perk, index) => -
  • {perk}
    • - )} -
-
-
-
-
-
-
-
-
-
Gold
-
-
- -
-
-
    -
  • All Silver Perks
    • - {silver.map((perk, index) => -
  • {perk}
    • - )} -
-
-
-
-
-
-
-
-
-
Silver
-
-
- -
-
-
    - {bronze.map((perk, index) => -
  • {perk}
    • - )} -
-
-
-
-
-
+
+ {/* */} + + +
{/*
*/}
@@ -189,54 +111,31 @@ function Sponsors() {
-
+ + diff --git a/src/static/images/officer/alexzander.jpg b/src/static/images/officer/alexzander.jpg new file mode 100644 index 0000000..d51171e Binary files /dev/null and b/src/static/images/officer/alexzander.jpg differ diff --git a/src/static/images/officer/angelica.jpg b/src/static/images/officer/angelica.jpg index 763a8e2..42fc07b 100644 Binary files a/src/static/images/officer/angelica.jpg and b/src/static/images/officer/angelica.jpg differ diff --git a/src/static/images/officer/arnav.jpg b/src/static/images/officer/arnav.jpg new file mode 100644 index 0000000..93c681e Binary files /dev/null and b/src/static/images/officer/arnav.jpg differ diff --git a/src/static/images/officer/cameron.jpg b/src/static/images/officer/cameron.jpg new file mode 100644 index 0000000..b78db97 Binary files /dev/null and b/src/static/images/officer/cameron.jpg differ diff --git a/src/static/images/officer/manas.jpg b/src/static/images/officer/manas.jpg new file mode 100644 index 0000000..75b1c5c Binary files /dev/null and b/src/static/images/officer/manas.jpg differ diff --git a/src/static/images/officer/nathan.jpg b/src/static/images/officer/nathan.jpg new file mode 100644 index 0000000..580d62b Binary files /dev/null and b/src/static/images/officer/nathan.jpg differ diff --git a/src/static/images/officer/tanay.png b/src/static/images/officer/tanay.png index a2df5f2..b8005d3 100644 Binary files a/src/static/images/officer/tanay.png and b/src/static/images/officer/tanay.png differ diff --git a/src/static/images/officer/thida.jpg b/src/static/images/officer/thida.jpg new file mode 100644 index 0000000..83dfc28 Binary files /dev/null and b/src/static/images/officer/thida.jpg differ diff --git a/src/static/images/officer/vishal.png b/src/static/images/officer/vishal.png index 630a1f3..e289436 100644 Binary files a/src/static/images/officer/vishal.png and b/src/static/images/officer/vishal.png differ diff --git a/src/static/images/officer/zoe.png b/src/static/images/officer/zoe.png new file mode 100644 index 0000000..a22162d Binary files /dev/null and b/src/static/images/officer/zoe.png differ diff --git a/src/static/images/sponsor-images/serviceNow.png b/src/static/images/sponsor-images/serviceNow.png new file mode 100644 index 0000000..be32ba4 Binary files /dev/null and b/src/static/images/sponsor-images/serviceNow.png differ diff --git a/src/static/images/sponsor-images/texasRobotics.jpg b/src/static/images/sponsor-images/texasRobotics.jpg new file mode 100644 index 0000000..8228bfb Binary files /dev/null and b/src/static/images/sponsor-images/texasRobotics.jpg differ diff --git a/src/static/images/sponsor-images/texelArts.png b/src/static/images/sponsor-images/texelArts.png new file mode 100644 index 0000000..b6fe9b0 Binary files /dev/null and b/src/static/images/sponsor-images/texelArts.png differ diff --git a/src/styles/app.css b/src/styles/app.css index 7d1553d..7077554 100644 --- a/src/styles/app.css +++ b/src/styles/app.css @@ -83,6 +83,17 @@ color: white; } +.box1_5-textCenter{ + display: flex; + align-items: center; + justify-content: left; + text-align: center; + font-family: 'Poppins', 'Titilium Web'; + font-style: normal; + font-size: 2rem; + color: white; +} + #infoImageContainer { height: 30em; } @@ -372,4 +383,8 @@ .custom-shape-divider-bottom-1684597940 .shape-fill { fill: #191E28; +} + +.sponsorSectionTitle { + } \ No newline at end of file diff --git a/src/styles/officerCard.css b/src/styles/officerCard.css index 1f93001..c69c96b 100644 --- a/src/styles/officerCard.css +++ b/src/styles/officerCard.css @@ -97,7 +97,7 @@ justify-content: center; align-items: center; text-align: left; - font-size: 0.5em; + font-size: 0.45em; overflow: hidden; height: fit-content; padding-left: 1em; diff --git a/src/styles/sponsors.css b/src/styles/sponsors.css index ed2fcc3..67351e3 100644 --- a/src/styles/sponsors.css +++ b/src/styles/sponsors.css @@ -48,7 +48,7 @@ a { margin: 0.4rem; border-radius: 3px; color: rgb(225, 223, 223); - background-image: linear-gradient(135deg, rgb(198, 117, 255, 0.5), rgb(0, 80, 199, 0.5)); + background-image: linear-gradient(135deg, rgb(198, 117, 255, 1), rgb(0, 80, 199, 1)); font-family:'monserrat'; font-weight: 600; } @@ -85,17 +85,17 @@ a { font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif } -.diamond { +.Diamond { color:#7fd6ff; /* color:#7fd6ff36; */ } -.gold { +.Gold { color: #ffd700; /* color: #ffd90047; */ } -.silver { +.Silver { color: #c7c7c7; /* color: #c7c7c722; */ } @@ -184,3 +184,18 @@ a { z-index: -1; object-fit:cover; } +.currentSponsorRow { + display: flex; + align-items: center; + justify-content: space-around; +} +.currentSponsorCard{ + width: 25%; + aspect-ratio: 1; + height: auto; + object-fit: contain; + border-radius: 1em; + transition: transform 0.3s, box-shadow 0.3s; + box-shadow: 1em 1em rgba(0, 0, 0, 0.1); + overflow: hidden; +} \ No newline at end of file