Website for Early Promotion (#10)

* Nice looking presentation

* typo

* no jekyll

assets/faq.json

@@ -1,50 +1,26 @@
 [
-  {
-    "title": "What is WebJam?",
-    "content": "WebJam is a week-long team competition where teams of students will create fully functional web applications."
-  },
   {
     "title": "Where is WebJam being held?",
     "content": "WebJam is being held in an in-person environment, consisting of events/workshops and ceremonies. Correspondence and announcements will happen primarily through the WebJam Discord; registered participants will receive an invitation to the Discord closer to the start of WebJam."
   },
-  {
-    "title": "When is WebJam? (Update me)",
-    "content": "Week 7"
-  },
-  {
-    "title": "How much does it cost?",
-    "content": "Nothing. Attending WebJam is free."
-  },
-  {
-    "title": "Who can participate?",
-    "content": "All UC Irvine students are welcome to participate."
-  },
   {
     "title": "How many people can be on a team?",
-    "content": "Teams can be up to a maximum of 4 people."
+    "content": "Up to 4 people can be part of a single team."
   },
   {
-    "title": "What if I don’t have a team?",
-    "content": "We will be assisting with team formations during the event by creating a Discord channel for team formations. Also, we plan to have a social after our kickoff ceremony for students to find potential teammates!"
-  },
-  {
-    "title": "How do I register?",
-    "content": "You can register by filling out the following RSVP form above."
-  },
-  {
-    "title": "May I submit pre-existing projects for WebJam?",
-    "content": "All design elements and code for your project must be created during the event. Pre-existing third party tools and frameworks are allowed. Coding in advance is not allowed, but planning and discussing with teammates prior to the event is allowed."
+    "title": "Do I have to have a team to participate?",
+    "content": "No. We will have team matching during the event itself, or you can come with a team or solo. Whatever works for you!"
   },
   {
     "title": "What if I lack web dev experience?",
     "content": "Many ICS clubs will be hosting workshops throughout the week to assist participants get started with web development."
   },
-  {
-    "title": "What if my question isn’t answered here?",
-    "content": "If your question isn’t answered in the FAQ, please leave a question in the WebJam Discord or email us at [email protected]."
-  },
   {
     "title": "What are the rules?",
     "content": "Please refer to the WebJam Rules and Code of Conduct for more information."
+  },
+  {
+    "title": "My question isn't here!",
+    "content": "Unanswered question? Email us at [email protected]."
   }
 ]

src/components/about/about.js

@@ -1,12 +1,17 @@
 export default function AboutSection() {
   return (
     <div className="flex flex-col items-center mx-[10%] md:mx-[20%] gap-4 my-20">
-      <div className="text-7xl md:text-8xl">ABOUT</div>
-      <div className="text-xl sm:text-2xl md:text-3xl md:leading-relaxed text-center font-light">
-        ICS Student Council invites you to WebJam, a week-long competition where
-        teams of students will create fully functional web applications! We'll
-        be providing workshops throughout the week to help you get started, and
-        awarding amazing prizes for the best projects out there!
+      <div className="text-4xl md:text-7xl">About WebJam</div>
+      <div className="text-xl sm:text-2xl md:text-2xl md:leading-relaxed text-start font-light">
+        <p>
+          WebJam is a week-long event where students come together to create fully functional web applications.
+          Whether you've never heard of web applications or built many, WebJam is here to give you a platform to learn, build, and create!
+        </p>
+        <br/>
+        <p>
+          Over the past 3 years, WebJam has focused on encouraging beginners and people who are curious about web technologies — from frontend to backend!
+          Our goal is to provide learning and networking opportunities for our community of developers, especially ones that come from underrepresented backgrounds in the tech space.
+        </p>
       </div>
     </div>
   );

src/components/events/events.js

@@ -34,14 +34,14 @@ export default function EventsSection() {
 
   return (
     <>
-      <div className="flex flex-col mx-8 md:mx-24 lg:mx-36 xl:mx-48 my-10 gap-2 md:gap-4">
+      <div className="flex flex-col mx-8 md:mx-24 xl:mx-[20%] my-10 gap-2 md:gap-4">
         <div className="flex place-content-start text-5xl md:text-6xl">
           Schedule
         </div>
 
         {sortedSchedule.map((date) => (
           <div className="flex flex-col gap-1 mb-2 md:mb-6" key={date[0].date}>
-            <div className="text-3xl lg:text-4xl text-gray-400">
+            <div className="text-3xl lg:text-4xl text-slate-600 border-gray-800 border-b-4 border-none md:border-dashed">
               {getFormattedDate(date[0].date)}
             </div>
 
@@ -55,7 +55,7 @@ export default function EventsSection() {
               })
               .map((event) => (
                 <div
-                  className="flex flex-col lg:flex-row border-gray-400 border-t-4 border-dashed w-[100%] py-4 lg:items-center lg:justify-between gap-6 lg:gap-0"
+                  className="flex flex-col lg:flex-row w-[100%] py-4 lg:items-center lg:justify-between gap-6 lg:gap-0  border-gray-800 border-t-4 border-dashed md:border-none"
                   key={event.title + event.time}
                 >
                   <div className="flex gap-6 lg:h-[100%] align-top items-start">
@@ -69,7 +69,7 @@ export default function EventsSection() {
 
                     <div className="flex flex-col gap-4">
                       <div>
-                        <div className="flex text-3xl md:text-4xl text-white md:w-[28rem] lg:w-[20rem] xl:w-[28rem]">
+                        <div className="flex text-3xl md:text-4xl md:w-[28rem] lg:w-[20rem] xl:w-[28rem]">
                           {event.title}
                         </div>
                         <div className="text-lg md:text-xl">
@@ -80,7 +80,7 @@ export default function EventsSection() {
                       <div className="flex gap-2 md:gap-4">
                         {event.rsvp && (
                           <a href={event.rsvp} target="_blank" className="flex">
-                            <div className="bg-green-600 flex rounded-full drop-shadow-lg place-content-center text-xl px-4 h-10 items-center gap-2">
+                            <div className="bg-green-700 text-slate-100 flex rounded-full drop-shadow-lg place-content-center text-xl px-4 h-10 items-center gap-2">
                               RSVP
                               <span className="md: visible hidden">
                                 <FaExternalLinkAlt />
@@ -95,7 +95,7 @@ export default function EventsSection() {
                             target="_blank"
                             className="flex"
                           >
-                            <div className="bg-gray-500 flex rounded-full drop-shadow-lg place-content-center text-xl px-4 h-10 items-center gap-2">
+                            <div className="bg-gray-600 text-slate-100 flex rounded-full drop-shadow-lg place-content-center text-xl px-4 h-10 items-center gap-2">
                               Recording
                               <span>
                                 <FaExternalLinkAlt />
@@ -106,7 +106,7 @@ export default function EventsSection() {
                       </div>
                     </div>
                   </div>
-                  <div className="lg:w-[40%] lg:min-h-[8rem] overflow-y-auto text-base md:text-xl">
+                  <div className="lg:w-[40%] lg:min-h-[8rem] overflow-y-auto text-base text-xl">
                     {event.desc}
                   </div>
                 </div>

src/components/faq/faq.js

@@ -16,8 +16,11 @@ function FAQTab(props) {
 
 export default function FAQSection() {
   return (
-    <div className={`${styles.accordion} md:max-w-[50%] `}>
+    <div className="flex flex-col items-center gap-4 mt-5">
+    <div className="text-4xl md:text-7xl">FAQ</div>
+    <div className={`${styles.accordion} md:max-w-[60%] `}>
       {faq_data.map((element, index) => <FAQTab key={index} id={index} {...element}/>)}
     </div>
+    </div>
   )
 }

src/components/footer.js

@@ -55,15 +55,15 @@ const ClubElement = (props) => {
 
 export default function Footer() {
   return (
-    <div className="flex flex-col gap-4 sm:gap-10 mt-10">
-      <div className="flex flex-col gap-4">
-        <span className="flex justify-center text-3xl">Our Member Clubs</span>
+    <div id="footer" className="flex flex-col gap-4 sm:gap-10 pt-[10vh]">
+      {/* <div className="flex flex-col gap-4">
+        <span className="flex justify-center text-4xl md:text-7xl">Thank You to Our Partners!</span>
         <div className="flex flex-row mx-auto overflow-x-scroll w-[50%] gap-6">
           {Clubs.map((club) => (
             <ClubElement {...club} key={club.id} />
           ))}
         </div>
-      </div>
+      </div> */}
       <footer className="w-[100%] flex flex-col gap-5 p-6">
         <div className="flex justify-center gap-5 sm:gap-12 text-3xl sm:text-4xl">
           {MEDIA_LINKS.map((link) => (

src/components/hero/hero.js

@@ -19,26 +19,33 @@ export default function HeroSection() {
         </div>
 
         <div className="flex flex-row place-content-center gap-6 text-xl md:text-2xl lg:text-3xl">
-          <span className="flex flex-row items-center gap-2">
+          <span className="flex flex-row items-center gap-4">
             <FaCalendar size={20} />
             <h2>November 13-17</h2>
           </span>
-          <span className="flex flex-row items-center gap-2">
+          <span className="flex flex-row items-center gap-4">
             <FaLocationArrow size={20} />
-            <h2>DBH 3011</h2>
+            <h2>Donald Bren Hall</h2>
           </span>
         </div>
 
         <div className="mx-auto mt-4 flex">
           <p className="text-2xl md:text-3xl lg:text-4xl">
             <a
-              className="rounded-xl border-4 border-solid border-yellow-300 px-3 py-1"
+              className="rounded-xl border-4 border-solid border-yellow-300 px-3 py-1 hover:bg-yellow-300 transition duration-300"
               href="https://studentcouncil.ics.uci.edu/"
               target="_blank"
             >
               Apply
-            </a>{" "}
-            or be a <a className="underline">mentor</a>!
+            </a>
+            {" or be a "}
+            <a 
+            className="underline decoration-black hover:decoration-[#00B929] transition duration-300"
+            href="https://studentcouncil.ics.uci.edu/"
+            target="_blank"
+            >
+              mentor
+            </a>!
           </p>
         </div>
       </div>

src/styles/components/Hero.module.css

@@ -4,31 +4,6 @@
     justify-content: center;
 }
 
-.heroContainer h2 {
-    font-size: 1.5rem;
-}
-
-.heroContainer p {
-    font-size: 1.25rem;
-    margin: 1.3rem 0px;
-}
-
-.heroContainer a:hover {
-    cursor: pointer;
-}
-
-.heroContainer a.button {
-    font-size: 1.5rem;
-    width: fit-content;
-    padding: 0.5rem;
-    border-radius: 12px;
-    margin-right: 2.5px;
-}
-
-.heroContainer a.underline{
-    text-decoration: underline;
-}
-
 /* Graphics */
 .oceanTop {
     background-image: url("/assets/img/graphics/layer1/OceanTopCeiling.svg");

src/styles/globals.css

@@ -25,4 +25,10 @@ main {
 
 #hero {
   background: linear-gradient(180deg, #BDE4FF, #3DB2FF);
+}
+
+#about, #events, #faq, #footer {
+  margin-top: -2px;
+  color: black;
+  background: #F0FC97;
 }