element
-.sub-title{
- .alignCenter();
- font-weight: @regular;
- line-height: @font4;
+.sub-title {
+ font-weight: @bold;
+ line-height: @font5;
}
diff --git a/src/newStyles/variables.less b/src/newStyles/variables.less
index 706672a..b6bbc46 100644
--- a/src/newStyles/variables.less
+++ b/src/newStyles/variables.less
@@ -40,6 +40,7 @@
@mainyellow: #FFA659;
@hotred: #FA5E5E;
@orange: #f5621e;
+@maingreen: #51C0C0;
@b1: rgb(36, 41, 51);
@b2: rgb(61, 69, 89);
diff --git a/src/pages/CompetitionsPage/competitionsData.json b/src/pages/CompetitionsPage/competitionsData.json
new file mode 100644
index 0000000..5f94809
--- /dev/null
+++ b/src/pages/CompetitionsPage/competitionsData.json
@@ -0,0 +1,48 @@
+[
+ {
+ "competitionName": "Element.AI",
+ "icon": "../../../elemental.png",
+ "year": "2023",
+ "stats": {
+ "In Prizes": 5000,
+ "Signups": 200,
+ "Teams": 50
+ },
+ "description": "Long ago, there was Sunny G. Using the four elements, he built and shaped the world, making the story of earth, water, fire, and air an ancient tale that has been told in many different cultures throughout history. Now the guardian of UCSD, Sunny G, tired of students not filling out CAPES, has decided to reward the power of elemental-bending to diligent students who fill out their CAPES. However, unsure on which element is the strongest, he has put together a competition for the elements to demonstrate their strength. We would like to thank our sponsor, Arjay Waran (RJ), for funding this competition to further AI and competitive programming. This competition has concluded. Congratulations to Team Shubham on their win.",
+ "link": "/competitions/Element.AI/leaderboard"
+ },
+ {
+ "competitionName": "Neural Network Modeling",
+ "icon": "../../../nnm.png",
+ "year": "2021",
+ "stats": {
+ "Teams": 10,
+ "Submissions": 500
+ },
+ "description": "Welcome to the Winter 2021 Neural Network Modeling Competition! The objective of this competition is to model an unknown function as accurately as possible! Submissions are scored by lowest MSE. This competition has concluded. Congratulations to programjames on their win.",
+ "link": "/old-competitions/nn"
+ },
+ {
+ "competitionName": "Energium AI",
+ "icon": "../../../energium.png",
+ "year": "2020",
+ "stats": {
+ "Teams": 14,
+ "Matches Played": 2400
+ },
+ "description": "Upon the dawn of the new millennium, energy has become currency, the most precious resource after the majority of Earth's resources have been mined out. You are an energy corporation with the technology of Collectors, robots that can mine an energy-rich resource known as Energium on the asteroid belts of our solar system. Your goal is to build the best AI agent to control these collectors and get more energy than your competitors. This competition has concluded. Congratulations to programjames on their win.",
+ "link": "/old-competitions/energium/ranks"
+ },
+ {
+ "competitionName": "Hide and Seek",
+ "icon": ".../../../hns.png",
+ "year": "2020",
+ "stats": {
+ "Teams": 15,
+ "Matches Played": "120000"
+ },
+ "description": "Welcome to ACM AI's first competition, and the first of its kind at UCSD. You must use your wits and strategies, along with knowledge of programming, to effectively hide and seek. Your AI must be able to play the Seeker and the Hider, and must either find and tag all hiders or hide from all seekers. Are you up for the challenge? The competition has concluded. Congratulations to Joe Cai for winning the Hide and Seek AI Competition and to Matei Gardus for winning the hacker award.",
+ "link": "/old-competitions/hideandseek"
+ }
+ ]
+
\ No newline at end of file
diff --git a/src/pages/CompetitionsPage/index.less b/src/pages/CompetitionsPage/index.less
index 5587260..0346c9b 100644
--- a/src/pages/CompetitionsPage/index.less
+++ b/src/pages/CompetitionsPage/index.less
@@ -1,10 +1,122 @@
@import '../../newStyles/text.less';
@import '../../newStyles/components.less';
@import '../../newStyles/index.less';
+@import '../../newStyles/variables.less';
.CompetitionsPage {
.noContainer();
+ .mobileIcon {
+
+ @media screen and (min-width: @sm) {
+ display: none;
+ }
+
+ width: 60%;
+ display: block;
+ margin: 3rem auto 3rem auto;
+ }
+
+
+ .competitionMain {
+
+ background: url('../../../public/trophy_bg.png') 80% 30% no-repeat;
+ background-size: 20rem 20rem;
+
+
+ display: flex;
+ flex-wrap: wrap;
+
+ @media screen and (min-width: @sm) {
+ height: 90vh;
+ }
+
+ align-items: center;
+ justify-content: center;
+
+ .info{
+
+ position: relative;
+ width: 40%;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+
+ @media screen and (max-width: @sm) {
+ width: 60%;
+ }
+
+
+
+ .colorful{
+ background: linear-gradient(#F66161, #FF8130);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text; /* For Firefox */
+ color: transparent;
+ }
+
+ &::before {
+ content: url('../../../public/trophy_bg.png'); // Add your trophy icon path
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 50px;
+ height: 50px;
+ transform: translate(-50%, -50%) rotate(-45deg); // Center and counter-rotate the icon
+ opacity: 0.1; // Adjust opacity for a subtle background effect
+ z-index: 0; // Ensure it stays behind the text
+ }
+
+ h1 {
+ font-size: @font5;
+ }
+
+ h3{
+ font-size: 1.5rem;
+ font-weight: bold;
+ }
+
+
+ }
+
+
+ .containerForImage{
+
+ margin-top: @margin-base3;
+ margin-bottom: @margin-base3;
+
+
+ img{
+ width: 30vw;
+ }
+
+ @media screen and (max-width: @sm) {
+ display: none;
+ // width: 80vw;
+ // display: flex;
+ // justify-content: center;
+ }
+
+ }
+
+ .buttons{
+ display: flex;
+ gap: 1rem;
+
+ .interestButton {
+ margin-top: @margin-base;
+ .button-colorful();
+ }
+
+ .portalButton {
+ margin-top: @margin-base;
+ .button-red-outline();
+ }
+ }
+
+ }
+
.competitionHeader{
.generic-centered-section();
.constrained-bounds();
@@ -28,7 +140,7 @@
.pastCompetitionsHeader {
background: @orange;
margin-top: 4rem;
- padding: 4rem ;
+ padding: 5rem ;
text-align: center;
h1, h4 {
color: white;
@@ -63,9 +175,16 @@
padding: 4rem;
background: #f7f7f7;
border-radius: @radius-base5;
+ border: 2px solid @stat1;
+ background-color: #fffbfb;
h3 {
font-weight: @bold;
+ font-size: @font5;
+ @media screen and (max-width: @sm) {
+ font-size: @font3;
+ }
+
}
.competitionStats {
display: inline-block;
@@ -73,16 +192,38 @@
border-radius: @radius-base5;
}
.compButtonPrimary {
- border: none;
- background: @black;
- margin-top: 1rem;
+ border-radius: 10vw;
+ margin-top: @margin-base;
+ margin-bottom: @margin-base;
+ .button-red-outline();
}
- .compButtonSecondary {
- border:none;
-
+ .pastCompetitions{
+ display:flex;
+ flex-direction: column;
+ gap: 3rem;
+
+ img {
+ width: 3.5rem;
+ }
+
+ .description{
+ text-align: justify;
+ }
+
+ .year {
+ padding-right: 1rem;
+ }
}
+ .competitionInfo{
+ @media screen and (max-width: @sm) {
+ display: flex;
+ flex-direction: column;
+ }
+ }
+
+
}
}
}
diff --git a/src/pages/CompetitionsPage/index.tsx b/src/pages/CompetitionsPage/index.tsx
index 81971b0..b69dc37 100644
--- a/src/pages/CompetitionsPage/index.tsx
+++ b/src/pages/CompetitionsPage/index.tsx
@@ -3,350 +3,106 @@ import { Link } from 'react-router-dom';
import './index.less';
import DefaultLayout from '../../components/layouts/default';
import Number from '../../components/Statistic';
-import { Layout, Space, Button } from 'antd';
+import { Layout, Button, Row, Col } from 'antd';
import MainFooter from '../../components/MainFooter';
+import competitionsData from './competitionsData.json';
+import tempComp from '../../../public/temp_comp.png'
+import trophy from '../../../public/trophy_bg.png'
const { Content } = Layout;
-// interface CompetitionButtonProps {
-// link1: string | { pathname: string; };
-// link1desc: string;
-// link2: string | { pathname: string; };
-// link2desc: string;
-// link3: string | { pathname: string; };
-// link3desc: string;
-// }
-
-// function CompetitionButtons({
-// link1, link1desc, link2, link2desc, link3, link3desc
-// } : CompetitionButtonProps ) {
-// const buttonSize = 'large';
-
-// return (
-//
-//
-//
-//
-//
-// {link2 && (
-//
-//
-//
-// )}
-// {link3 && (
-//
-//
-//
-// )}
-//
-//
-// );
-// }
-
function CompetitionsPage(props: any) {
useEffect(() => {}, []);
const spaceSize = 10;
+ const color = ['#ff4d4f','#ff8d8b','#fe8019']
return (
-
-
- Competitions
-
- These are fun competitions (with prizes) where you employ some
- aspect (or none at all) of AI to compete. We run standard AI
- programming competitions as well as Reinforcement Learning (RL)
- centric competitions using{' '}
-
- Gymnasium.{' '}
-
- All skill levels are welcome!
-
-
- No upcoming competitions yet!
-
-
-
-
-
- Looking Back
-
- Explore our previous endeavors into AI over the years. Each one
- showcases the hard work and accomplishments of our participants.
-
-
+ 
+
+
+ AI Competitions
+ All skill levels are welcome!
+ These are fun competitions (with prizes) where you employ some aspect (or none at all) of AI to compete.
+
+
+
+
+
+
-
-
- Element.AI - 2023
-
-
- Long ago, there was Sunny G. Using the four elements, he built
- and shaped the world, making the story of earth, water, fire,
- and air an ancient tale that has been told in many different
- cultures throughout history. Now the guardian of UCSD, Sunny G,
- tired of students not filling out CAPES, has decided to reward
- the power of elemental-bending to diligent students who fill out
- their CAPES. However, unsure on which element is the strongest,
- he has put together a competition for the elements to
- demonstrate their strength.
-
-
-
- We would like to thank our sponsor, Arjay Waran (RJ), for
- funding this competition to further AI and competitive
- programming.
-
-
-
- This competition has concluded. Congratulations to Team Shubham
- on their win.
-
-
-
-
-
-
- {/*
-
-
- Neural Network Modeling - 2021
-
-
- Welcome to the Winter 2021 Neural Network Modeling Competition!
- The objective of this competition is to model a unknown function
- as accurately as possible! Submissions are scored by lowest MSE.
-
-
- This competition has concluded. Congratulations to programjames
- on their win.
-
-
-
-
-
- {/*
-
-
- Energium AI - 2020
-
-
- Upon the dawn of the new millennium, energy has become currency,
- the most precious resource after majority of Earth's resources
- have been mined out. You are an energy corporation with the
- technology of Collectors, robots that can mine a energy rich
- resource known as Energium on the asteroid belts of our solar
- system. But time is of the essence, and these robots need an AI
- to help them run effectively and mine as much energium possible
- before time runs out. What makes matters worse is, there's
- always a rival corporation on the same asteroid for some reason,
- trying to mine the resources too! Your goal is to build the best
- AI agent to control these collectors and get more energy than
- your competitors. Also, for some reason in 1000 years,
- Javascript, Python, and Java continue to be prevalent languages
- for AI.
-
-
-
- Welcome to the 2nd ACM AI Competition, completely unique and
- different from any other competition. You must use your wits and
- strategies, along with knowledge of programming, to create an
- intelligent bot that beats all of the other competitors.
-
-
-
- This competition has concluded. Congratulations to programjames
- on their win.
-
-
-
-
-
- {/*
-
-
- Hide and Seek - 2020
-
-
- Welcome to ACM AI's first competition, and the first of its kind
- at UCSD. You must use your wits and strategies, along with
- knowledge of programming, to effectively hide and seek. Your AI
- must be able to play the Seeker and the Hider, and must either
- find and tag all hiders or hide from all seekers. Are you up for
- the challenge?
-
-
- The competition has concluded. Congratulations to Joe Cai for
- winning the Hide and Seek AI Competition and to Matei Gardus for
- winning the hacker award 💻. Be sure to checkout the{' '}
-
- winner interview
- {' '}
- as well!
-
-
-
-
-
- {/*
-
+
+ {competitionsData.map((competition, index) => (
+
+
+
+
+
+ 
+
+ {competition.competitionName}
+
+ {competition.year}
+
+
+
+
+ {competition.description}
+
+
+
+
+
+
+
+ ))}
+
+
+ Element.AI - 2023
+
+
+ Long ago, there was Sunny G. Using the four elements, he built
+ and shaped the world, making the story of earth, water, fire,
+ and air an ancient tale that has been told in many different
+ cultures throughout history. Now the guardian of UCSD, Sunny G,
+ tired of students not filling out CAPES, has decided to reward
+ the power of elemental-bending to diligent students who fill out
+ their CAPES. However, unsure on which element is the strongest,
+ he has put together a competition for the elements to
+ demonstrate their strength.
+
+
+
+ We would like to thank our sponsor, Arjay Waran (RJ), for
+ funding this competition to further AI and competitive
+ programming.
+
+
+
+ This competition has concluded. Congratulations to Team Shubham
+ on their win.
+
+
+
+
+
+
+ {/*
+
+
+ Neural Network Modeling - 2021
+
+
+ Welcome to the Winter 2021 Neural Network Modeling Competition!
+ The objective of this competition is to model a unknown function
+ as accurately as possible! Submissions are scored by lowest MSE.
+
+
+ This competition has concluded. Congratulations to programjames
+ on their win.
+
+
+
+
+
+ {/*
+
+
+ Energium AI - 2020
+
+
+ Upon the dawn of the new millennium, energy has become currency,
+ the most precious resource after majority of Earth's resources
+ have been mined out. You are an energy corporation with the
+ technology of Collectors, robots that can mine a energy rich
+ resource known as Energium on the asteroid belts of our solar
+ system. But time is of the essence, and these robots need an AI
+ to help them run effectively and mine as much energium possible
+ before time runs out. What makes matters worse is, there's
+ always a rival corporation on the same asteroid for some reason,
+ trying to mine the resources too! Your goal is to build the best
+ AI agent to control these collectors and get more energy than
+ your competitors. Also, for some reason in 1000 years,
+ Javascript, Python, and Java continue to be prevalent languages
+ for AI.
+
+
+
+ Welcome to the 2nd ACM AI Competition, completely unique and
+ different from any other competition. You must use your wits and
+ strategies, along with knowledge of programming, to create an
+ intelligent bot that beats all of the other competitors.
+
+
+
+ This competition has concluded. Congratulations to programjames
+ on their win.
+
+
+
+
+
+ {/*
+
+
+ Hide and Seek - 2020
+
+
+ Welcome to ACM AI's first competition, and the first of its kind
+ at UCSD. You must use your wits and strategies, along with
+ knowledge of programming, to effectively hide and seek. Your AI
+ must be able to play the Seeker and the Hider, and must either
+ find and tag all hiders or hide from all seekers. Are you up for
+ the challenge?
+
+
+ The competition has concluded. Congratulations to Joe Cai for
+ winning the Hide and Seek AI Competition and to Matei Gardus for
+ winning the hacker award 💻. Be sure to checkout the{' '}
+
+ winner interview
+ {' '}
+ as well!
+
+
+
+
+
+ {/*
+
+
\ No newline at end of file
diff --git a/src/pages/MainPage/index.less b/src/pages/MainPage/index.less
index dbf37cd..7e7e076 100644
--- a/src/pages/MainPage/index.less
+++ b/src/pages/MainPage/index.less
@@ -2,210 +2,363 @@
@import '../../newStyles/components.less';
@import '../../newStyles/index.less';
-.Main {
- // removes any default white space margins
- .noContainer();
+.homeHeader {
+ padding-top: 20rem;
+ padding-bottom: 16rem;
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ .homeContent {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+
- // Gradient container that holds the main website title and subtitle
- .homeHeader {
- padding-top: 14rem;
- padding-bottom: 16rem;
- min-width: 180px;
- background: @mainred;
- .center-both-ways();
+ .HomeIconMobile{
+ width: 40rem;
+ margin-bottom: @margin-base4;
+
+ @media screen and (min-width: @xs){
+ display: none;
+ }
- @media screen and (max-width: @sm) {
- padding-top: 14rem;
- padding-bottom: 16rem;
}
+ .ai-logo{
+ width: 25vw;
- .homeHeaderContent {
- width: 100%;
- .center-both-ways();
-
- // Main title "acm ai"
- .homeTitle {
- color: @white;
- text-align: center;
- .title1();
+ @media screen and (max-width: @xs){
+ display:none;
}
- h4 {
- width: 60%;
- color: @white;
- max-width: @max-width1;
- color: @white;
- text-align: center;
- }
}
-
}
+ .homeText {
+ width: 50vw;
- // For titles like Events and Sponsor Us
- .homeSubTitle {
- width: 90%;
- text-align: center;
- max-width: @max-width2;
- min-width: 150px;
- color: @b1;
- }
+ @media screen and (max-width: @xs){
+ width: 60vw;
+ }
- .homeBox {
- box-sizing: border-box;
- .generic-section();
- .constrained-bounds();
- margin-top: @content-top-margin;
- .homeInfo {
- padding-top: 1rem;
- padding-bottom: 1rem;
- max-width: @max-width3;
-
- .info {
- padding-bottom: 1.5rem;
-
- h3 {
- font-weight: @bold;
- font-size: @font4;
- line-height: 3rem;
- }
-
- Button {
- margin-top: @margin-base;
- margin-bottom: @margin-base;
- .button-black();
- }
+ margin-right: 2rem;
+
+ .homeTitle{
+ font-size: @font8;
+ margin-bottom: @margin-base3;
+ }
+
+ h3{
+ font-weight: bold;
+ margin-bottom: @margin-base;
+ }
+
+ .homeButtons {
+ margin-top: @margin-base2;
+
+ .getStartedButton {
+ .button-colorful();
+ margin-right: @margin-base;
+ }
+
+ .aboutButton {
+ .button-red-outline();
+ border: 2px solid @mainred;
}
}
+ }
+
- // parent box just above the cardsBox
- .projectCompsBox {
- background-color: @orange;
- border-radius: @radius-base4;
- display: flex;
+ img {
+ justify-self: center;
+ width: 15vw;
+ }
+
+ @media screen and (max-width: @xs) {
+ padding-bottom: 0rem;
+ .homeContent {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .homeButtons {
flex-direction: column;
- margin-top: @content-top-margin;
- margin-bottom: 16px;
- h3 {
- color: white;
- margin: 2rem 0 1rem 2rem;
- font-weight: @semi-bold;
+ margin-bottom: 4rem;
+ }
+
+ .getStartedButton, .aboutButton {
+ font-size: @font3;
+ padding: 0.5rem 0.5rem;
+ }
+ }
+}
+
+@media screen and (max-width: @xs) {
+ .infoButton, .knowledgeButton {
+ font-size: @font3;
+ padding: 0.5rem 0.5rem;
+ }
+}
+
+.floatingShapes {
+ padding-bottom: 300px;
+ .shape {
+ position: absolute;
+ z-index: -1;
+ opacity: 0.9;
+
+ &.shapeTop {
+ width: 20rem;
+ height: 20rem;
+ top: 12%;
+ right: 3vw;
+ background: url('../../../public/diamond_top_right.svg') no-repeat center center;
+ background-size: 70%;
}
- h4 {
- width: 80%;
- margin: 0 0 2rem 2rem;
- color: @white;
+
+ &.shapeBot {
+ width: 400px;
+ height: 400px;
+ top: 55%;
+ left: 10%;
+ background: url('../../../public/diamond_bottom_left.svg') no-repeat center center;
+ background-size: 70%;
}
+
}
- // row that holds the two cards that converts to a column
- // at an xtra small device width for responsiveness
- .projectCompsCardsBox {
- display: flex;
- justify-content: space-between;
- flex-direction: row;
- flex-wrap: wrap;
- width: 100%;
+ @media only screen and (max-width: @md) {
+ padding-bottom: 0px;
+ .shape {
+ display: none;
+ }
+ }
+ }
+
+.wavy {
+ z-index: -1;
+ width: 100%;
+ height:100%;
+ position: absolute;
+ background: url('../../../public/wavy.svg') no-repeat center center;
+ background-size: contain;
+ background-position: bottom;
+ bottom: 0;
+ // @media only screen and (max-width: @md) {
+ // display: none;
+ // }
+}
+
+
+.homeInfo {
+ .generic-section();
+
+ h3 {
+ font-weight: bold;
+ line-height: 3rem;
+ }
+
+ .splitInfoRow {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 4rem;
+ max-width: 80%;
+ .constrained-bounds();
+
+ img {
+ flex: 0 1 50%;
+ max-width: @max-width1;
+ margin-top: 2rem;
+ border-radius: 1rem;
@media screen and (max-width: @xs) {
- flex-direction: column;
- width: 100%;
- justify-content:center;
+ flex: 0 1 100%;
+ max-width: 70%;
+ display: block;
+ margin: 0 auto;
}
-
+ }
+
+ .infoText {
+ flex: 1 1 50%;
+ max-width: 80%;
+ padding: @padding-base2;
+
+ .infoButton {
+ margin-top: @margin-base;
+ margin-bottom: @margin-base;
+ .button-colorful();
+ }
+ }
- // a card that holds basic info
- .previewCard {
- background-color: @black;
- max-height: 350px;
- width: calc(50% - 8px);
- display: flex;
- flex-direction: column;
- justify-content: space-between;
-
- font-size: @font3;
- border-radius: @radius-base4;
- border-width: 0;
-
- @media screen and (max-width: @xs) {
- width: 100%; /* Adjusted width for smaller screens */
- margin-bottom: 16px;
- }
+ }
+}
+
+.knowledgeSection {
+ text-align: center;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ margin-left: 2rem;
+ margin-right: 2rem;
+
+ h3 {
+ font-weight: bold;
+ line-height: 3rem;
+ }
- .previewIcon {
- background: white;
+ p {
+ font-size: @font3;
+ margin-bottom: @font3;
+ }
+
+ .pinkContainer {
+ border: 3px solid @mainred;
+ border-radius: @radius-base5;
+ background-color: #FFF8F8;
+ max-width: 80%;
+ padding: 3rem 5rem;
+ gap: 10rem;
+
+ .items {
+ margin-top: @margin-base2;
display: flex;
- justify-content: center;
- align-items: center;
- border-radius: 8px;
- width: 45px;
- height: 45px;
+ flex-direction: row;
+ text-align: left;
+ gap: 2rem;
+
+ img {
+ justify-self: center;
+ width: 12vw;
+ }
+
+ .knowledgeButton {
+ .button-red-outline();
+ }
}
+ }
+}
-
- h3 {
- color: white;
- font-weight: @semi-bold;
- margin-bottom: 1rem;
- }
+.communitySection {
- h4 {
- color: rgb(213, 213, 213);
- }
- }
- }
+ .generic-section();
+ max-width: 80%;
+ text-align: center;
+ .communityContainer {
+ margin-top: 4rem;
+ }
+
+ h3 {
+ font-weight: bold;
+ line-height: 3rem;
+ margin-top: @margin-base2;
}
+ p{
+ margin-top: @margin-base2;
+ }
+ button {
+ justify-self: center;
+ margin-top: @margin-base2;
+ }
+ .mainWebsiteBtn {
+ .button-colorful();
+ }
- // Container to hold events
- .eventsContainer {
- .generic-centered-section();
+ .splitInfoRow {
+ margin-top: @margin-base2;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ column-gap: 3rem;
+ flex-wrap: true;
+ margin-bottom: 4rem;
.constrained-bounds();
- margin-top: @content-top-margin;
- h4 {
- max-width: @xxs;
+
+ @media screen and (max-width: @sm) {
+ column-gap: 5rem;
}
- }
- // wrapper to hold the collapse component
- .sponsorshipBox {
- .generic-centered-section();
- .constrained-bounds();
- margin-top: @content-top-margin;
-
-
- .sponsorshipCollapse {
- .gradient();
- .generic-centered-section();
- .constrained-bounds();
- padding: 3rem;
- border-radius: @radius-base4;
- margin-top: @margin-base2;
- .ant-collapse-arrow {
- color: white; /* Replace with your desired arrow color */
+ img {
+ flex: 0 1 50%;
+ width: 30%;
+ margin-top: 2rem;
+
+ @media screen and (max-width: @sm) {
+ flex: 0 1 100%;
+ max-width: 30%;
+ display: block;
+ margin: 0 auto;
}
- p {
- color: white;
+
+ }
+
+ .community {
+ display: flex;
+ align-items: center;
+ gap: 3rem;
+
+ }
+
+
+ .infoText {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+ text-align: left;
+ width: 200px;
+
+ p{
+ margin-top: 0;
+ }
+
+ .red {
+ color: @mainred;
+ }
+
+ .yellow {
+ color: @mainyellow;
+ }
+
+ .green {
+ color: @maingreen;
+ }
+
+ .purple {
+ color: #E981A0;
}
}
}
- // the gradient bar just above the main footer
- .homeBottomBar {
- .gradient();
+}
+
+.colorful{
+ background: linear-gradient(#F66161, #FF8130);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text; /* For Firefox */
+ color: transparent;
+}
+
+.homeBottomBar {
box-sizing: border-box;
- text-align: center;
+ background: linear-gradient(to right, #F66161, #FE7C37);
+ border: 0px solid transparent;
+ background-clip: padding-box, border-box;
+ background-origin: padding-box, border-box;
padding: 3rem;
margin-top: 10rem;
- }
-
-}
\ No newline at end of file
+}
+
\ No newline at end of file
diff --git a/src/pages/MainPage/index.tsx b/src/pages/MainPage/index.tsx
index d9ffb57..1793ebb 100644
--- a/src/pages/MainPage/index.tsx
+++ b/src/pages/MainPage/index.tsx
@@ -1,197 +1,198 @@
-import React, { useEffect, useState } from 'react';
import './index.less';
import DefaultLayout from '../../components/layouts/default';
import { Link } from 'react-router-dom';
-import { ACMEvent, fetchFutureEvents } from '../../actions/events';
-import { Layout, Button, Collapse, Card } from 'antd';
-import { FaFireAlt, FaProjectDiagram } from 'react-icons/fa';
-import EventTimeline from '../../components/EventTimeline/index';
+import { Layout, Button, Row, Col } from 'antd';
import MainFooter from '../../components/MainFooter/index';
+import AIMainLogo from '../../../public/logo512.png';
+import AILogo from '../../../public/ai_diamond.svg';
+import CyberLogo from '../../../public/cyber_diamond.svg';
+import DesignLogo from '../../../public/design_diamond.svg';
+import HackLogo from '../../../public/hack_diamond.svg';
+import TeamImg from '../../../public/team.png';
+import AIMLImg from '../../../public/aimlpath.jpg';
+import ProjectIcon from '../../../public/project.png';
+import CompIcon from '../../../public/comp.png';
+import HomeIconMobile from '../../../public/home_icon_mobile.png'
+
const { Content } = Layout;
function MainPage() {
- const [eventData, setEventData] = useState>([]);
- useEffect(() => {
- fetchFutureEvents().then((data) => {
- setEventData(data);
- });
- }, []);
-
return (
- {/* Every page will have a .noContainer() class applied to remove default margins*/}
-
-
- {/* Main header section*/}
-
- {/* NOTE: If you want a constrained box centered on the page, you
- * must apply .constrained-bounds and/or .generic class
- * to a wrapper component. Then place your content inside
- * Otherwise, the content will just fill the entire width :)
- */}
-
-
-
- ACM AI
-
- We aspire to inspire the next generation of AI advocates,
- engineers, and scientists.
-
-
-
-
- {/* Content section for projects and competitions info*/}
-
-
-
- What is ACM AI at UC San Diego?
-
- We are a tight-knit community of students that exists within the
- ACM family at UCSD. Our team consists of bright minds from every
- background and expertise.
-
-
-
-
+
+
+ 
+
+ ACM AI
+ Making AI accessible.
+ We aspire to inspire the next generation of AI advocates, engineers, and scientists.
+
+
+
+
+
+
+
+
+
-
-
- Model Your AI/Ml Path
-
- Our goals are to help build a community of AI enthusiasts at
- UCSD and connect that community to the broader AI network. We
- also strive to keep AI fun and accessible to all as you navigate
- your path around the complex world of AI through workshops,
- competitions, networking events and more!
-
-
+ 
+
+
+
-
-
- Want more ACM at UCSD?
-
- We are part of a larger group of bright innovators and thinkers
- here at UCSD. If you're feeling adventurous in exploring our
- various aspects of computing or just having fun, check out ACM
- at UC San Diego's main website for exciting events!
-
-
+
+
+
+
+
+
+
+
+ 
+
+
+ What is ACM AI at UC San Diego?
+
+ We are a tight-knit community of students that exists within the
+ ACM family at UCSD. Our team consists of bright minds from every
+ background and expertise.
+
+
+
+
+
+
+
+
+
+
+ Model Your AI/ML Path
+
+ We aim to foster a community of AI enthusiasts at UCSD, connecting
+ them to the wider AI network. Our goals include making AI fun and
+ accessible through workshops, competitions, networking events, and more, as you explore the complex AI landscape.
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ Apply Your Knowledge
+
+ Neural Networks don’t always have to be taught in the classroom.
+ Start a project or join a competition!
+
-
-
-
-
- Apply Your Knowledge
-
- Neural Networks don’t always have to be taught in the classroom.
- Start a project or join a competition!
-
+
+
+
+ 
+ Projects
+
+ Explore our club's cutting-edge AI projects, showcasing innovation and expertise in artificial intelligence.
+
+
+
+
+
+
+
+ 
+ Competitions
+
+ Dive into the world of fierce competitions where members demonstrate their skills in various challenges.
+
+
+
+
+
+
+
-
-
-
-
-
- Projects
-
- Explore our club's cutting-edge AI projects, showcasing
- innovation and expertise in artificial intelligence.
-
-
- {`learn more >`}
-
-
-
-
-
- Competitions
-
- Dive into the world of fierce competitions where members
- demonstrate their skills in various challenges.
-
-
-
- {`learn more >`}
-
-
-
-
-
- {/* Content section for events*/}
-
- Events
-
- To make things fun, our team strives to come up with new workshops
- and socials so that everyone has a chance to explore a different
- aspect of AI
-
-
-
-
-
- Sponsor Us
-
- We're always seeking passionate sponsors who care about our mission
- to make AI fun and accessible. Here are some quick resources if
- you're a company interested in working with us!
-
-
-
-
- We will be launching our Sponsorship Packet with information on
- how to sponsor our competitions soon! In the meantime, if you
- would like to contact us about sponsorship, please email us at
- ai@acmucsd.org
-
- {/*
- What do we offer?} key="1">
- hello
-
- Who can I contact?} key="2">
- hello
-
- Is there an official Sponsorship Packet?} key="3">
- hello
-
- */}
-
-
-
-
-
-
-
-
+
+
+
+
+ Want more ACM at UCSD?
+ If you're feeling adventurous in exploring our various aspects of computing
or just having fun, check out ACM at UC San Diego's main website for exciting events!
+
+
+
+
+
+
+
+
+
+ 
+
+ ACM AI
+ Artificial Intelligence
+
+
+
+
+ 
+
+ ACM Cyber
+ Cyber Security
+
+
+
+
+
+
+
+ 
+
+ ACM Hack
+ Software Engineering
+
+
+
+ 
+
+ ACM Design
+ UI/UX
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Competitions
-- These are fun competitions (with prizes) where you employ some - aspect (or none at all) of AI to compete. We run standard AI - programming competitions as well as Reinforcement Learning (RL) - centric competitions using{' '} - - Gymnasium.{' '} - - All skill levels are welcome! -
-No upcoming competitions yet!
-Looking Back
-- Explore our previous endeavors into AI over the years. Each one - showcases the hard work and accomplishments of our participants. -
-AI Competitions
+All skill levels are welcome!
+These are fun competitions (with prizes) where you employ some aspect (or none at all) of AI to compete.
+ +Element.AI - 2023
-- Long ago, there was Sunny G. Using the four elements, he built - and shaped the world, making the story of earth, water, fire, - and air an ancient tale that has been told in many different - cultures throughout history. Now the guardian of UCSD, Sunny G, - tired of students not filling out CAPES, has decided to reward - the power of elemental-bending to diligent students who fill out - their CAPES. However, unsure on which element is the strongest, - he has put together a competition for the elements to - demonstrate their strength. -
- -- We would like to thank our sponsor, Arjay Waran (RJ), for - funding this competition to further AI and competitive - programming. -
- -- This competition has concluded. Congratulations to Team Shubham - on their win. -
- -Neural Network Modeling - 2021
-- Welcome to the Winter 2021 Neural Network Modeling Competition! - The objective of this competition is to model a unknown function - as accurately as possible! Submissions are scored by lowest MSE. -
-- This competition has concluded. Congratulations to programjames - on their win. -
-Energium AI - 2020
-- Upon the dawn of the new millennium, energy has become currency, - the most precious resource after majority of Earth's resources - have been mined out. You are an energy corporation with the - technology of Collectors, robots that can mine a energy rich - resource known as Energium on the asteroid belts of our solar - system. But time is of the essence, and these robots need an AI - to help them run effectively and mine as much energium possible - before time runs out. What makes matters worse is, there's - always a rival corporation on the same asteroid for some reason, - trying to mine the resources too! Your goal is to build the best - AI agent to control these collectors and get more energy than - your competitors. Also, for some reason in 1000 years, - Javascript, Python, and Java continue to be prevalent languages - for AI. -
- -- Welcome to the 2nd ACM AI Competition, completely unique and - different from any other competition. You must use your wits and - strategies, along with knowledge of programming, to create an - intelligent bot that beats all of the other competitors. -
- -- This competition has concluded. Congratulations to programjames - on their win. -
-Hide and Seek - 2020
-- Welcome to ACM AI's first competition, and the first of its kind - at UCSD. You must use your wits and strategies, along with - knowledge of programming, to effectively hide and seek. Your AI - must be able to play the Seeker and the Hider, and must either - find and tag all hiders or hide from all seekers. Are you up for - the challenge? -
-- The competition has concluded. Congratulations to Joe Cai for - winning the Hide and Seek AI Competition and to Matei Gardus for - winning the hacker award 💻. Be sure to checkout the{' '} - - winner interview - {' '} - as well! -
-{competition.competitionName}
+ +{competition.year}
+ +{competition.description}
+Element.AI - 2023
++ Long ago, there was Sunny G. Using the four elements, he built + and shaped the world, making the story of earth, water, fire, + and air an ancient tale that has been told in many different + cultures throughout history. Now the guardian of UCSD, Sunny G, + tired of students not filling out CAPES, has decided to reward + the power of elemental-bending to diligent students who fill out + their CAPES. However, unsure on which element is the strongest, + he has put together a competition for the elements to + demonstrate their strength. +
+ ++ We would like to thank our sponsor, Arjay Waran (RJ), for + funding this competition to further AI and competitive + programming. +
+ ++ This competition has concluded. Congratulations to Team Shubham + on their win. +
+ +Neural Network Modeling - 2021
++ Welcome to the Winter 2021 Neural Network Modeling Competition! + The objective of this competition is to model a unknown function + as accurately as possible! Submissions are scored by lowest MSE. +
++ This competition has concluded. Congratulations to programjames + on their win. +
+Energium AI - 2020
++ Upon the dawn of the new millennium, energy has become currency, + the most precious resource after majority of Earth's resources + have been mined out. You are an energy corporation with the + technology of Collectors, robots that can mine a energy rich + resource known as Energium on the asteroid belts of our solar + system. But time is of the essence, and these robots need an AI + to help them run effectively and mine as much energium possible + before time runs out. What makes matters worse is, there's + always a rival corporation on the same asteroid for some reason, + trying to mine the resources too! Your goal is to build the best + AI agent to control these collectors and get more energy than + your competitors. Also, for some reason in 1000 years, + Javascript, Python, and Java continue to be prevalent languages + for AI. +
+ ++ Welcome to the 2nd ACM AI Competition, completely unique and + different from any other competition. You must use your wits and + strategies, along with knowledge of programming, to create an + intelligent bot that beats all of the other competitors. +
+ ++ This competition has concluded. Congratulations to programjames + on their win. +
+Hide and Seek - 2020
++ Welcome to ACM AI's first competition, and the first of its kind + at UCSD. You must use your wits and strategies, along with + knowledge of programming, to effectively hide and seek. Your AI + must be able to play the Seeker and the Hider, and must either + find and tag all hiders or hide from all seekers. Are you up for + the challenge? +
++ The competition has concluded. Congratulations to Joe Cai for + winning the Hide and Seek AI Competition and to Matei Gardus for + winning the hacker award 💻. Be sure to checkout the{' '} + + winner interview + {' '} + as well! +
+ACM AI
-- We aspire to inspire the next generation of AI advocates, - engineers, and scientists. -
-What is ACM AI at UC San Diego?
-- We are a tight-knit community of students that exists within the - ACM family at UCSD. Our team consists of bright minds from every - background and expertise. -
- - - +ACM AI
+Making AI accessible.
+We aspire to inspire the next generation of AI advocates, engineers, and scientists.
+Model Your AI/Ml Path
-- Our goals are to help build a community of AI enthusiasts at - UCSD and connect that community to the broader AI network. We - also strive to keep AI fun and accessible to all as you navigate - your path around the complex world of AI through workshops, - competitions, networking events and more! -
- +Want more ACM at UCSD?
-- We are part of a larger group of bright innovators and thinkers - here at UCSD. If you're feeling adventurous in exploring our - various aspects of computing or just having fun, check out ACM - at UC San Diego's main website for exciting events! -
- + +What is ACM AI at UC San Diego?
++ We are a tight-knit community of students that exists within the + ACM family at UCSD. Our team consists of bright minds from every + background and expertise. +
+ + + + + +Model Your AI/ML Path
++ We aim to foster a community of AI enthusiasts at UCSD, connecting + them to the wider AI network. Our goals include making AI fun and + accessible through workshops, competitions, networking events, and more, as you explore the complex AI landscape. +
+ + + + + +Apply Your Knowledge
++ Neural Networks don’t always have to be taught in the classroom. + Start a project or join a competition! +
Apply Your Knowledge
-- Neural Networks don’t always have to be taught in the classroom. - Start a project or join a competition! -
+ +Projects
++ Explore our club's cutting-edge AI projects, showcasing innovation and expertise in artificial intelligence. +
+ + + +Competitions
++ Dive into the world of fierce competitions where members demonstrate their skills in various challenges. +
+ + + + +Projects
-- Explore our club's cutting-edge AI projects, showcasing - innovation and expertise in artificial intelligence. -
- -{`learn more >`}
- -Competitions
-- Dive into the world of fierce competitions where members - demonstrate their skills in various challenges. -
- - -{`learn more >`}
- -Events
-- To make things fun, our team strives to come up with new workshops - and socials so that everyone has a chance to explore a different - aspect of AI -
- -Sponsor Us
-- We're always seeking passionate sponsors who care about our mission - to make AI fun and accessible. Here are some quick resources if - you're a company interested in working with us! -
- -- We will be launching our Sponsorship Packet with information on - how to sponsor our competitions soon! In the meantime, if you - would like to contact us about sponsorship, please email us at - ai@acmucsd.org -
- {/*hello
-hello
-hello
-Want more ACM at UCSD?
+If you're feeling adventurous in exploring our various aspects of computing
or just having fun, check out ACM at UC San Diego's main website for exciting events!
ACM AI
+Artificial Intelligence
+ACM Cyber
+Cyber Security
+ACM Hack
+Software Engineering
+ACM Design
+UI/UX
+