Merge pull request #13 from n1ved/main

Redesign FAQ Section
Excel2024Web · Nov 14, 2024 · f69381b · f69381b
2 parents 14e298d + efade9e
commit f69381b
Show file tree

Hide file tree

Showing 8 changed files with 135 additions and 29 deletions.
diff --git a/src/assets/fonts/BaseNeue/BaseNeue-Black.woff b/src/assets/fonts/BaseNeue/BaseNeue-Black.woff
diff --git a/src/assets/fonts/BaseNeue/BaseNeue-Bold.woff b/src/assets/fonts/BaseNeue/BaseNeue-Bold.woff
diff --git a/src/assets/fonts/BaseNeue/BaseNeue-ExpandedBlack.woff b/src/assets/fonts/BaseNeue/BaseNeue-ExpandedBlack.woff
diff --git a/src/assets/fonts/BaseNeue/BaseNeue-SuperExpandedBlack.woff b/src/assets/fonts/BaseNeue/BaseNeue-SuperExpandedBlack.woff
diff --git a/src/components/FAQ/FAQ.jsx b/src/components/FAQ/FAQ.jsx
@@ -30,21 +30,31 @@ const FAQ = () => {
       answer:
         "Ofcourse! We have THE most amazing mentors to help you out at all times!",
     },
-    {
-      question: "I have more questions.",
-      answer:
-        "I have no more answers. JUST KIDDING! Feel free to contact us at support@excelmec.org.",
-    },
   ];
   return (
-    <div className="container max-w-full md:max-w-[70%] mx-auto py-8">
-      <h2 className="text-4xl text-center text-white py-5 tracking-wide">
-        Frequently Asked Questions
-      </h2>
-      <div className="container flex flex-col m-auto p-[20px] sm:p-[50px] justify-evenly items-center">
-        {QA.map((qa, index) => (
-          <FAQCard key={index} question={qa.question} answer={qa.answer} />
-        ))}
+    <div className="faq">
+      <div className="faq-container container mx-auto px-10 py-10 flex flex-col items-start">
+        <h1 className="font-bold text-white text-start faq-heading">
+          FREQUENTLY ASKED
+          <br />
+          QUESTIONS .
+        </h1>
+        <div className="flex flex-col w-full pt-10">
+          {QA.map((qa, index) => (
+            <FAQCard
+              key={index}
+              question={qa.question}
+              answer={qa.answer}
+              index={index}
+            />
+          ))}
+          <div className="pt-5 text-md m-auto">
+            Have more questions? Feel free to contact us at{" "}
+            <a className="text-purple-500" href="mailto:support@excelmec.org">
+              support@excelmec.org
+            </a>
+          </div>
+        </div>
       </div>
     </div>
   );

diff --git a/src/components/FAQ/FAQCard.css b/src/components/FAQ/FAQCard.css
@@ -1,34 +1,73 @@
-.faq-container {
-  border: 2px solid #8a2be2af;
-  border-bottom: none;
-  border-right: none;
-  margin-bottom: 20px;
-  background: #3433335a;
-  cursor: pointer;
-  transition: all 0.2s ease;
-
+@import url("https://fonts.googleapis.com/css2?family=Syne:wght@400..800&display=swap");
+
+.faq {
+  width: 100%;
+  min-height: 100vh;
+  height: 100%;
+  /* background: url("https://w.wallhaven.cc/full/od/wallhaven-od1dp5.jpg"); */
+  /* background: rgb(64, 0, 255); */
+  /* background: linear-gradient(
+    135deg,
+    rgba(64, 0, 255, 0.5) 0%,
+    rgba(150, 59, 255, 0.5) 15%,
+    rgba(212, 102, 255, 0.5) 32%,
+    rgba(183, 0, 255, 0) 74%
+  ); */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-family: "Syne", sans-serif;
+  font-weight: 400;
 }
 
-.faq-container:hover {
-  border-color: #7b68ee;
+.faq-heading {
+  font-family: "Base Neue Bold";
+  font-size: 3em;
+  font-weight: bold;
+}
+.faq-container {
+  border-radius: 30px;
+  /* background: rgba(0, 0, 0, 0.21); */
+  background: rgba(255, 255, 255, 0.1);
+  background: linear-gradient(
+    132deg,
+    rgba(64, 0, 255, 0.5) 0%,
+    rgba(150, 59, 255, 0.5) 10%,
+    rgba(212, 102, 255, 0.5) 32%,
+    rgba(120, 120, 120, 0.2) 64%
+  );
+  border-radius: 16px;
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(10.5px);
+  -webkit-backdrop-filter: blur(10.5px);
 }
+.faq-card-container {
+  padding: 0;
+  margin: 0;
+  border-radius: 30px;
+  background-size: 0;
+}
+
+/* .faq-card-container:hover {
+  background-color: #000;
+} */
 
 .faq-question {
-  font-size: 1.3em;
+  font-size: 1.5em;
   font-weight: bold;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
 }
 .faq-answer {
-  font-size: 1.2em;
+  font-size: 1.3em;
   overflow: hidden;
   transition: all 0.2s ease;
 }
 
 .faq-icon {
-  font-size: 1.5em;
+  font-size: 1em;
   cursor: pointer;
   transition: all 0.2s ease-in-out;
 }
@@ -40,3 +79,13 @@
 .faq-icon-down {
   transform: rotate(0deg);
 }
+
+@media (max-width: 768px) {
+  .faq-container {
+    border-radius: 0;
+  }
+
+  .faq-card-container {
+    width: 100%;
+  }
+}
diff --git a/src/components/FAQ/FAQCard.jsx b/src/components/FAQ/FAQCard.jsx
@@ -4,14 +4,14 @@ import { FaAngleDown } from "react-icons/fa";
 import "./FAQCard.css";
 import { useState } from "react";
 
-const FAQCard = ({ question, answer }) => {
+const FAQCard = ({ question, answer, index }) => {
   const [height, setHeight] = useState(0);
   const handleExpand = () => {
     height == 0 ? setHeight(999) : setHeight(0);
   };
 
   return (
-    <div className="container m-auto p-5 faq-container" onClick={handleExpand}>
+    <div className="container p-5 faq-card-container" onClick={handleExpand}>
       <div className="faq-question">
         <h1>{question}</h1>
         <div
@@ -32,6 +32,16 @@ const FAQCard = ({ question, answer }) => {
       >
         {answer}
       </p>
+      <div
+        className="faq-line"
+        style={{
+          "max-height": height,
+          "margin-top": "10px",
+          opacity: "0.4",
+        }}
+      >
+        <hr />
+      </div>
     </div>
   );
 };

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -9,6 +9,43 @@
   font-style: normal;
 }
 
+@font-face {
+  font-family: "Base Neue Black";
+  font-style: normal;
+  font-weight: normal;
+  src:
+    local("Base Neue Black"),
+    url("../assets/fonts/BaseNeue/BaseNeue-Black.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Base Neue Bold";
+  font-style: normal;
+  font-weight: normal;
+  src:
+    local("Base Neue Bold"),
+    url("../assets/fonts/BaseNeue/BaseNeue-Bold.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Base Neue Expanded Black";
+  font-style: normal;
+  font-weight: normal;
+  src:
+    local("Base Neue Expanded Black"),
+    url("../assets/fonts/BaseNeue/BaseNeue-ExpandedBlack.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Base Neue Super Expanded Black";
+  font-style: normal;
+  font-weight: normal;
+  src:
+    local("Base Neue Super Expanded Black"),
+    url("../assets/fonts/BaseNeue/BaseNeue-SuperExpandedBlack.woff")
+      format("woff");
+}
+
 :root {
   --background: #0a0a0a;
   --foreground: #c4cdd2;