Merge pull request #18 from virajchandra51/frontend-problems-section

#16 problems section

src/App.js

@@ -8,7 +8,6 @@ export default class App extends Component {
       <BrowserRouter>
       <Routes>
         <Route path="/"  element={<HomePage/>} />
-
       </Routes>
       </BrowserRouter>
     )

src/assets/data/faqData.js

@@ -0,0 +1,50 @@
+
+const faqs = [
+  {
+    question: "How do I register for the hackathon?",
+    answer:
+      "Click on any Register Now button on the website. Alternatively, you can head over to Devfolio",
+  },
+  {
+    question: "What is the participation fee?",
+    answer:
+      "Just some enthusiasm and an open mind are enough. We don't charge any money!!",
+  },
+  {
+    question: "What if I don't have a team or idea?",
+    answer:
+      "We'll have team formation and ideation events geared towards helping you find a team. Make sure you join the discord server.",
+  },
+  {
+    question: "Who can participate?",
+    answer:
+      "Everyone is welcome to apply, any student or working professionals. If you can innovate or just want to have a fun weekend, you are most welcome.",
+  },
+  {
+    question: "What is the participation fee?",
+    answer:
+      "Just some enthusiasm and an open mind are enough. We don't charge any money!!",
+  },
+  {
+    question: "What could be the size of the team?",
+    answer:
+      "You can make teams of up to 5 members. Lone wolfs are also welcome.",
+  },
+  {
+    question: "Why should I participate in CodeUtsava 6.0?",
+    answer:
+      "You will get cash prizes if you win; otherwise, you will always get an excellent opportunity to network with like-minded people, learn many things and get cool schwag.😉",
+  },
+  {
+    question: "How will the teams be judged?",
+    answer:
+      "The teams will be judged based on Viability, Technical Complexity, Presentation Skills and most importantly, Creativity.",
+  },
+  {
+    question: "What is the Code of Conduct?",
+    answer:
+      "To ensure a positive experience among all the participants, we follow the MLH Code of Conduct. It is advised that you go through it once.",
+  },
+];
+
+export default faqs;

src/assets/data/problemsData.js

@@ -0,0 +1,36 @@
+import problem1 from '../images/file11.png'
+
+const problems = [
+  {
+    title: "Problem Statement 1",
+    statement: "Coming Soon",
+    img: problem1,
+  },
+  {
+    title: "Problem Statement 2",
+    statement: "Coming Soon",
+    img: problem1,
+  },
+  {
+    title: "Problem Statement 3",
+    statement: "Coming Soon",
+    img: problem1,
+  },
+  {
+    title: "Problem Statement 4",
+    statement: "Coming Soon",
+    img: problem1,
+  },
+  {
+    title: "Problem Statement 5",
+    statement: "Coming Soon",
+    img: problem1,
+  },
+  {
+    title: "Problem Statement 6",
+    statement: "Coming Soon",
+    img: problem1,
+  }, //repeated to show load more section
+];
+
+export default problems;

src/components/eventCard/EventCard.js

@@ -5,7 +5,7 @@ import './EventCard.css'
 const EventCard = ({img,title,date}) => {
   return (
     <div className="codeutsava__section3-card">
-        <img class='codeutsava__section3-image' src={img}></img>
+        <img className='codeutsava__section3-image' src={img}></img>
         <div className="codeutsava__section3-cardtitle">
             {title}
         </div>

src/sections/section7/Section7-AccordianItem.js → src/components/faq/AnswerAccordian.js

@@ -9,7 +9,7 @@ const AccordionItem = ({ faq , onToggle, isActive}) => {
     <li className={`section7-accordion_item ${isActive ? "active" : ""}`}>
       <button className="section7-button" onClick={onToggle}>
         <div className="section7-question"> {faq.question} </div> 
-        <span className="section7-control">{isActive ? "—" : "+"} </span>
+        <span className="section7-control">{isActive ? "-" : "+"} </span>
       </button>
       <div
         ref={contentEl}

src/sections/section7/Section7-Accordian.js → src/components/faq/QuestionAccordian.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { useState } from "react";
-import { faqs } from "./faqs";
-import AccordionItem from "./Section7-AccordianItem"
+import faqs from "../../assets/data/faqData";
+import AccordionItem from "./AnswerAccordian"
 const Accordion = () => {
     const [activeAccordian, setActiveAccordian] = useState(null);
 
@@ -16,6 +16,7 @@ const Accordion = () => {
      <ul className="section7-accordion">
       {faqs.map((faq, index) => (
        <AccordionItem
+        key={index}
         onToggle={() => handleToggle(index)}
         faq = {faq}
         isActive = {index===activeAccordian}

src/components/navbar/Navbar.js

@@ -25,9 +25,9 @@ export default class Navbar extends Component {
             <a href='#sponsers'><div className='codeutsava__navbar-menu-heading'>
                     Sponsors
                 </div></a>
-                <div className='codeutsava__navbar-menu-heading'>
-                    Team
-                </div>
+            <a href='#faq'><div className='codeutsava__navbar-menu-heading'>
+                FAQ
+                </div></a>
                 <div className='codeutsava__navbar-menu-heading'>
                     Contact Us
                 </div>

src/components/problemCard/ProblemCard.css

@@ -0,0 +1,68 @@
+.codeutsava__section8-problems-container1 {
+  display: grid;
+  grid-template-columns: repeat(2 ,1fr);
+  gap: 4rem;
+  width: 80%;
+}
+
+.codeutsava__section8-problems-container2 {
+  display: grid;
+  grid-template-columns: repeat(2 ,1fr);
+  gap: 4rem;
+  width: 80%;
+  transition: display 3s ease-in-out;
+  margin-top: 4rem;
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }  
+  100% {
+    opacity: 0;
+  }
+}
+
+
+.codeutsava__section8-cardtitle {
+  font-weight: 600;
+  margin: 0.5rem 0;
+  min-height: 3rem;
+  display: flex;
+  align-items: center;
+  line-height: 24px;
+}
+
+.codeutsava__section8-line {
+  border: 0.1px solid rgb(230, 230, 230);
+  margin: 0.5rem 0;
+  font-weight: lighter;
+}
+
+.codeutsava__section8-carddetails {
+  margin: 1rem 0;
+  color: rgb(220, 220, 220);
+}
+
+.codeutsava__section8-image {
+  transition: all 0.2s ease-in-out;
+  width: 100%;
+  height: 20rem;
+  object-fit: cover;
+  border-radius: 16px;
+}
+
+.codeutsava__section8-image:hover {
+  transform: scale(0.98);
+  transition: all 0.2s ease-in-out;
+  cursor: pointer;
+}

src/components/problemCard/ProblemCard.js

@@ -0,0 +1,40 @@
+import React from 'react'
+import { useState } from 'react'
+
+import './ProblemCard.css'
+import ProblemModal from '../problemModal/ProblemModal'
+
+const ProblemCard = ({img,title,statement}) => {
+
+  const [modal, setModal] = useState(false);
+  const [problem, setProblem] = useState([]);
+
+  const getProblem = (img, title, statement) => {
+    let temp = [img, title, statement]
+    setProblem(item => [1, ...temp])
+    return setModal(true)
+  }
+
+  document.body.style.overflowY = !modal ? 'scroll' : 'hidden';
+
+  return (
+    <div className="codeutsava__section8-card-body">
+      <div className="codeutsava__section8-card">
+          <img className='codeutsava__section8-image' src={img} onClick={() => getProblem(img, title, statement)}></img>
+          <div className="codeutsava__section8-cardtitle">
+              {title}
+          </div>
+          <div className="codeutsava__section8-line">
+          </div>
+          <div className="codeutsava__section8-carddetails">
+              {statement}
+          </div>
+      </div>
+      {
+        modal === true ? <ProblemModal img={img} title={title} statement={statement} hide={() => setModal(false)}/> : ''
+      }
+    </div>
+  )
+}
+
+export default ProblemCard

src/components/problemModal/ProblemModal.css

@@ -0,0 +1,60 @@
+.codeutsava__section8-problemModal-body {
+  position: fixed;
+  width: 80%;
+  height: 80%;
+  top: 10%;
+  left: 10%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 100000;
+  background: white;
+  color: black;
+  border-radius: 20px;
+}
+
+.problemModal-close {
+  width: 1.5rem;
+  position: fixed;
+  top: 1.5rem;
+  right: 1.5rem;
+  cursor: pointer;
+}
+
+.line-animation {
+  transform: scaleY(0.01) scaleX(0);
+  animation: unfoldIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
+}
+
+/* .line-animation-close {
+  transform: scale(1);
+  animation: unfoldOut 1s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
+} */
+
+@keyframes unfoldIn {
+  0% {
+    transform: scaleY(0.005) scaleX(0);
+    box-shadow: none;
+  }
+  50% {
+    transform: scaleY(0.005) scaleX(1);
+    box-shadow: none;
+  }
+  100% {
+    transform: scaleY(1) scaleX(1);
+    box-shadow: 0 0 0 999em rgba(0, 0, 0, 0.8);
+  }
+}
+
+/* @keyframes unfoldOut {
+  0% {
+    transform: scaleY(1) scaleX(1);
+  }
+  50% {
+    transform: scaleY(0.005) scaleX(1);
+  }
+  100% {
+    transform: scaleY(0.005) scaleX(0);
+  }
+} */

src/components/problemModal/ProblemModal.js

@@ -0,0 +1,18 @@
+import React from "react";
+
+import "./ProblemModal.css";
+import cross from '../../assets/images/cross.png'
+
+const ProblemModal = ({img, title, statement, hide}) => {
+
+  return (
+    <div className="codeutsava__section8-problemModal-body line-animation">
+            <img className="problemModal-close" onClick={hide} src={cross}/>
+            <h1>{title}</h1>
+            <p>{statement}</p>
+            <img src={img} />
+    </div>
+  );
+};
+
+export default ProblemModal;

src/pages/home/HomePage.js

@@ -8,6 +8,7 @@ import Section3 from '../../sections/section3/Section3';
 import Section4 from '../../sections/section4/Section4';
 import Section6 from '../../sections/section6/Section6';
 import Section7 from '../../sections/section7/Section7';
+import Section8 from '../../sections/section8/Section8';
 export default class HomePage extends Component {
   render() {
     return (
@@ -19,6 +20,7 @@ export default class HomePage extends Component {
         <Section4/>
         <Section6/>
         <Section7/>
+        <Section8/>
       </div>
     )
   }

src/sections/section3/Section3.js

@@ -28,7 +28,7 @@ const Section3 = () => {
                 <div className="codeutsava__section3-events">
                     <div className="codeutsava__section3-events-container" ref={scrollRef}>
                     {events.map((event,index) => (
-                        <EventCard img={event.img} title={event.title} date={event.date}/>
+                        <EventCard key={index} img={event.img} title={event.title} date={event.date}/>
                     ))}    
                     </div>
                 </div>

src/sections/section4/Section4.js

@@ -13,7 +13,7 @@ const Section4 = () => {
         <div className="codeutsava__section4-title">Speakers</div>
         <div className="codeutsava__section4-speakers">
           {speakers.map((speaker, index) => (
-            <SpeakerCard img={speaker.img} name={speaker.name} position={speaker.position} description={speaker.description}
+            <SpeakerCard key={index} img={speaker.img} name={speaker.name} position={speaker.position} description={speaker.description}
             facebook={speaker.facebook} twitter={speaker.twitter} linkedin={speaker.linkedin} github={speaker.github} />
           ))}
         </div>