feat: add Accordion styling and integrate into Contact page

src/assets/styles/Accordion.scss

@@ -0,0 +1,41 @@
+@use './variables.scss' as *;
+
+/* Accordion styling */
+.accordion-button {
+    background-color: $card-bg !important;
+    color: $text-light !important;
+    border-color: $card-border !important;
+    box-shadow: none !important;
+    padding: 1rem 1.25rem;
+    font-family: 'Cinzel', serif;
+}
+
+.accordion-button:not(.collapsed) {
+    color: $accent-fire !important;
+}
+
+.accordion-button:focus {
+    border-color: $accent-fire !important;
+    box-shadow: 0 0 0 0.25rem rgba(255, 100, 0, 0.25) !important;
+}
+
+.accordion-button::after {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ff6400'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
+}
+
+.accordion-item {
+    background-color: transparent;
+    border: none;
+    margin-bottom: 1rem;
+}
+
+.accordion-body {
+    background-color: $card-bg;
+    border: 1px solid $card-border;
+    border-top: none;
+    color: $text-ash;
+    padding: 1.25rem;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    border-bottom-left-radius: 0.375rem;
+    border-bottom-right-radius: 0.375rem;
+}

src/assets/styles/Contact.module.scss

@@ -156,46 +156,6 @@
     filter: grayscale(90%) invert(92%) hue-rotate(180deg);
 }
 
-/* Accordion styling */
-.accordionButton {
-    background-color: $card-bg !important;
-    color: $text-light !important;
-    border-color: $card-border !important;
-    box-shadow: none !important;
-    padding: 1rem 1.25rem;
-    font-family: 'Cinzel', serif;
-}
-
-.accordionButton:not(.collapsed) {
-    color: $accent-fire !important;
-}
-
-.accordionButton:focus {
-    border-color: $accent-fire !important;
-    box-shadow: 0 0 0 0.25rem rgba(255, 100, 0, 0.25) !important;
-}
-
-.accordionButton::after {
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ff6400'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
-}
-
-.accordionItem {
-    background-color: transparent;
-    border: none;
-    margin-bottom: 1rem;
-}
-
-.accordionBody {
-    background-color: $card-bg;
-    border: 1px solid $card-border;
-    border-top: none;
-    color: $text-ash;
-    padding: 1.25rem;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    border-bottom-left-radius: 0.375rem;
-    border-bottom-right-radius: 0.375rem;
-}
-
 /* Binary background effect */
 .binaryLine {
     position: absolute;

src/pages/Contact.tsx

@@ -1,6 +1,7 @@
 import { PageHeader } from '../components/PageHeader';
 import { ContactForm } from '../components/ContactForm';
 import style from '@styles/Contact.module.scss';
+import '@styles/Accordion.scss';
 
 import { contactData } from '../data/contactData'
 import type { ContactProps } from '../untils/ContactProps';
@@ -98,10 +99,10 @@ export const Contact = () => {
               <div className="accordion" id="faqAccordion">
                 {
                   data.questionsAndAnswers.map((item, index) => (
-                    <div className={`accordion-item ${style.accordionItem}`} key={index}>
+                    <div className={`accordion-item`} key={index}>
-                      <h2 className={`accordion-header ${style.accordionHeader}`} id={`heading${index}`}>
+                      <h2 className={`accordion-header`} id={`heading${index}`}>
                         <button
-                          className={`accordion-button collapsed ${style.accordionButton}`}
+                          className={`accordion-button collapsed`}
                           type="button"
                           data-bs-toggle="collapse"
                           data-bs-target={`#collapse${index}`}
@@ -117,7 +118,7 @@ export const Contact = () => {
                         aria-labelledby={`heading${index}`}
                         data-bs-parent="#faqAccordion"
                       >
-                        <div className={`accordion-body ${style.accordionBody}`}>
+                        <div className={`accordion-body`}>
                           {item.answer}
                         </div>
                       </div>