Merge pull request #102 from hack4bengal/themes

Themes

src/components/private/faq/FAQ.jsx

@@ -36,6 +36,22 @@ const Faq = () => {
       answer:
         "We encourage you to make a team of minimum 2 and maximum 4 members. If you are a Solo Hacker and do not have a team, you can still register and we will help you find a team on our Discord Server.",
     },
+    {
+      question: "Will hardware toolkits be available on-site?",
+      answer:
+        "No, hardware toolkits will not be available on-site for the Hardware Track. You'll need to bring your own.",
+    },
+    {
+      question:
+        "What are the guidelines for the teams participating in the Hardware track?",
+      answer:
+        "It is important to remember that you need to bring your own toolkits, although power sockets and an internet connection will be readily available on-site.",
+    },
+    {
+      question: "What will be provided for participants at the venue?",
+      answer:
+        "We will be providing the following: separate rest areas for both male and female participants, complimentary meals throughout the duration of the event, and tech support, including a stable internet connection and readily available power sockets on-site. Please note that you need to bring your own laptops and any other electronic devices you may need during the hackathon.",
+    },
     {
       question: "Can I participate remotely?",
       answer:
@@ -85,17 +101,17 @@ const Faq = () => {
             <div className="accordion-item">
               <button
                 id="accordion-button-1"
-                aria-expanded={openFaq === 5 ? "true" : "false"}
+                aria-expanded={openFaq === 8 ? "true" : "false"}
                 onClick={() => {
-                  setOpenFaq(openFaq === 5 ? null : 5);
+                  setOpenFaq(openFaq === 8 ? null : 8);
                 }}
               >
                 <p className="accordion-title">
                   I have more questions, where and how can i reach out ?
                 </p>
 
                 <div className="icon">
-                  {openFaq !== 5 ? <MdAdd /> : <FiMinus />}
+                  {openFaq !== 8 ? <MdAdd /> : <FiMinus />}
                 </div>
               </button>
               <div className="accordion-content">

src/components/private/testimonials/Testimonials.scss

@@ -51,6 +51,10 @@
         }
 
         .testimonials__card_author {
+          display: flex;
+          flex-direction: column;
+          gap: 10px;
+
           h2 {
             font-size: 1.2rem;
             font-weight: 700;

src/components/private/themes/Theme.jsx

@@ -11,7 +11,29 @@ const Theme = () => {
         <Header {...HeaderData.theme} />
 
         <div className="themes_container">
-          {themedata?.map((item, index) => {
+          {themedata?.slice(0, 6)?.map((item, index) => {
+            return (
+              <div className="box-item" key={index}>
+                <div className="flip-box" onClick={() => {}}>
+                  <div
+                    className="flip-box-front text-center"
+                    style={{ backgroundImage: `url(${item.img})` }}
+                  ></div>
+                  <div
+                    className="flip-box-back text-center"
+                    style={{ backgroundImage: `url(${item.img})` }}
+                  >
+                    <div className="inner color-white flipbox_desc">
+                      <p>{item.desc}</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+        <div className=" themes_container2">
+          {themedata?.slice(6)?.map((item, index) => {
             return (
               <div className="box-item" key={index}>
                 <div className="flip-box" onClick={() => {}}>

src/components/private/themes/Theme.scss

@@ -23,7 +23,32 @@
     @media screen and (max-width: 1200px) {
       display: flex;
       flex-wrap: wrap;
+      width: auto;
+      justify-content: center;
+    }
 
+    @media screen and (max-width: 576px) {
+      display: flex;
+      flex-direction: column;
+      margin: 0;
+      width: auto;
+      padding: 10px;
+      gap: 40px;
+      max-width: 100vw;
+      margin-top: 3.5rem;
+    }
+  }
+
+  .themes_container2 {
+    display: flex;
+    justify-content: center;
+    width: 1200px;
+    margin: 0 auto;
+    padding-bottom: 3rem;
+
+    @media screen and (max-width: 1200px) {
+      display: flex;
+      flex-wrap: wrap;
       width: auto;
       justify-content: center;
     }
@@ -69,7 +94,6 @@
   .box-container2 {
     align-items: center;
     display: flex;
-
     flex-direction: column;
     justify-content: space-around;
     width: 100%;
@@ -102,6 +126,7 @@
   .flip-box-front,
   .flip-box-back {
     border-radius: 20px;
+    border: 1px solid #ffffff;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;

src/components/private/themes/themeData.js

@@ -4,6 +4,7 @@ import greentech from "../../../assets/images/themes/greentech.png";
 import health from "../../../assets/images/themes/health.png";
 import open from "../../../assets/images/themes/open.png";
 import edu from "../../../assets/images/themes/edu.png";
+import iot from "../../../assets/images/themes/iot.png";
 
 const themedata = [
   {
@@ -37,6 +38,11 @@ const themedata = [
     name: "Open Innovation",
     desc: "AR-VR, AIML, Bitcoin Blockchain or Maggi Masala? Create what you want and drive groundbreaking solutions and shape the future of technology through open innovation and idea exchange.",
   },
+  {
+    img: iot,
+    name: "Open Innovation",
+    desc: "Get hands-on and bring your concepts to life! Dive into the Hardware Track and transform your inventive ideas into real, functional prototypes.",
+  },
 ];
 
 export default themedata;