Merge pull request #42 from A1Kumari/master

ask

src/components/ask/Ask.css

@@ -1,100 +1,63 @@
-@import url('https://fonts.googleapis.com/css2?family=Tektur:wght@500&display=swap');
-
-@import url("https://fonts.googleapis.com/css?family=Sacramento&display=swap");
-
-@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&display=swap');
-.RuleHead{
-    font-size: 80px;
-    color: antiquewhite;
-    font-family: 'Tektur', cursive;
-    text-decoration: underline  ;
-    /* box-shadow: 2px 2px 2px 1px rgba(198, 33, 33, 0.441); */
-
-    font-size: calc(20px + 18vh);
-        line-height: calc(20px + 20vh);
-        text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
-            color: #fff6a9;
-            font-family: "Sacramento", cursive;
-            text-align: center;
-            animation: blink 12s infinite;
-            -webkit-animation: blink 12s infinite;
-}
-
-@-webkit-keyframes blink {
-
-    20%,
-    24%,
-    55% {
-        color: #111;
-        text-shadow: none;
-    }
-
-    0%,
-    19%,
-    21%,
-    23%,
-    25%,
-    54%,
-    56%,
-    100% {
-        /*     color: #fccaff;
-    text-shadow: 0 0 5px #f562ff, 0 0 15px #f562ff, 0 0 25px #f562ff,
-      0 0 20px #f562ff, 0 0 30px #890092, 0 0 80px #890092, 0 0 80px #890092; */
-        text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
-        color: #fff6a9;
-    }
-}
-
-@keyframes blink {
-
-    20%,
-    24%,
-    55% {
-        color: #111;
-        text-shadow: none;
-    }
-
-    0%,
-    19%,
-    21%,
-    23%,
-    25%,
-    54%,
-    56%,
-    100% {
-        text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
-        color: #fff6a9;
-    }
-}
-.faltudiv {
-    height: 50px;
-    background-color: rgb(0, 0, 0);
-}
-.RulePoints ,.RulePoints2{
-    font-size: 30px;
-    /* color: rgb(188, 185, 236);
-    font-family: 'Roboto Slab', serif;
-    text-shadow:0 0 5px #6718e7 , 0 0 2px #6a34d7 , 0 0 15px #9595e7; */
-    /* color: rgb(155, 233, 178); */
-    color: rgb(255, 255, 255);
-        /* font-family: 'Roboto Slab', serif; */
-        font-family: 'Playfair Display', serif;
-        text-shadow: 0 0 10px #cf6767;
-        /* text-shadow: 0 0 5px #000000, 0 0 2px #000000, 0 0 18px #25d622; */
-}
-.ruleclass{
-    background-color: black;
-}
-@media screen and (max-width:440px) {
-    .RuleHead{
-        font-size: 40px;
-    }
-    .RulePoints{
-        font-size: 15px;
-    }
-    .RulePoints2{
-        font-size: 15px;
-    }
-
-}
+/* Color Theme */
+:root {
+    --primary-color: #6B5B95; /* Dark Purple */
+    --secondary-color: #222222; /* Dark Gray */
+    --accent-color: #6C63FF; /* Vibrant Blue */
+    --background-color: #000; /* Light Gray */
+  }
+
+  /* FAQ Section */
+  .faq-section {
+    background-color: var(--background-color);
+    padding: 40px;
+  }
+
+  .heading {
+    text-align: center;
+    margin-bottom: 20px;
+    color: var(--primary-color);
+  }
+
+  .faq-container {
+    max-width: 800px;
+    margin: 0 auto;
+  }
+
+  .faq-item {
+    border: 1px solid var(--secondary-color);
+    border-radius: 4px;
+    padding: 20px;
+    margin-bottom: 10px;
+    cursor: pointer;
+    background-color: #222; /* Default background color for items */
+    transition: background-color 0.3s ease; /* Smooth transition on hover */
+  }
+
+  .faq-item.active {
+    background-color: var(--primary-color); /* Active item background color */
+    border-color: var(--primary-color); /* Active item border color */
+  }
+
+  .question {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: #fff;
+  }
+
+  .arrow-icon {
+    font-size: 20px;
+    color: var(--primary-color); /* Arrow icon color */
+  }
+
+  .answer {
+    display: none;
+    margin-top: 10px;
+    color: var(--primary-color); /* Answer text color */
+  }
+
+  .faq-item.active .answer {
+    display: block;
+    color: #fff; /* Answer text color for active item */
+  }
+

src/components/ask/Ask.jsx

@@ -1,11 +1,82 @@
-import React from "react";
-import { Container } from "react-bootstrap";
-import Row from "react-bootstrap/Row";
-import Col from "react-bootstrap/Col";
+import React, { useState } from "react";
 import "./Ask.css";
-export default function Ask() {
+
+const faqData = [
+  {
+    question: "What is a Hackathon",
+    answer: `Hackathons are community events, where you get to interact with students from all around the world as well as forming teams to create future tech.`,
+  },
+  {
+    question: "I have no idea what coding is",
+    answer: "Thats why you must attend our event, we will guide you through everything with awesome workshops,tech talk and many more",
+  },
+  {
+    question: "Do I need to pay any money ",
+    answer: "Absolutely not ! our event is free and open for all , if incase anyone asks for money you can dm any of our moderator.",
+  },
+  {
+    question: "What are the conduct of guidlines ",
+    answer: "We strongly follow the DEVFOLIO code of conduct, Our team members will enforce this code throughout the event.",
+  },
+  {
+    question: "Is it necessary to form the team of 4 students",
+    answer: "No the team can range from 2 to 4 members.",
+  },
+  {
+    question: "How to participate",
+    answer: "All you need is to fill our form above and we will guide you through everything in email.",
+  },
+  {
+    question: "I have more doubts",
+    answer: "Reach us directly at ([email protected]) we would happy to help you.",
+  },
+  {
+    question: "Is the registration open to all colleges",
+    answer: "Yes, it's open to all engineering/ polytechnic/ science colleges.",
+  },
+  {
+    question: "Can the team member be from the different college",
+    answer: "Yes, all members can be from different colleges, departments and years.",
+  },
+
+  // Add more FAQ items here
+];
+
+const Ask = () => {
+  const [activeIndex, setActiveIndex] = useState(null);
+
+  const toggleAccordion = (index) => {
+    if (activeIndex === index) {
+      setActiveIndex(null);
+    } else {
+      setActiveIndex(index);
+    }
+  };
+
   return (
-    <>
-    </>
+    <section className="faq-section">
+       <div className="heading"><h2>Frequently Asked Questions</h2></div>
+
+      <div className="faq-container">
+        {faqData.map((item, index) => (
+          <div
+            key={index}
+            className={`faq-item ${activeIndex === index ? "active" : ""}`}
+          >
+            <div className="question" onClick={() => toggleAccordion(index)}>
+              {item.question}
+              <div className="arrow-icon">
+                <span>&#9660;</span>
+              </div>
+            </div>
+            {activeIndex === index && (
+              <div className="answer">{item.answer}</div>
+            )}
+          </div>
+        ))}
+      </div>
+    </section>
   );
-}
+};
+
+export default Ask;