Merge pull request 'fix-contact' (#9) from fix-contact into main

Reviewed-on: #9

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

@@ -0,0 +1,230 @@
+@use './variables' as *;
+@use './card.scss' as card;
+
+@include card.card;
+
+/* Card styling */
+.contactCard {
+    position: relative;
+    border-left: 3px solid $accent-fire;
+    padding-left: 1.5rem;
+}
+
+.contactIcon {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background-color: rgba(255, 100, 0, 0.1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: $accent-fire;
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+}
+
+.contactTitle {
+    font-size: 1.3rem;
+    color: $text-light;
+    margin-bottom: 1rem;
+}
+
+.contactContent {
+    color: $text-ash;
+    line-height: 1.6;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.contactLink {
+    color: $accent-fire;
+    text-decoration: none;
+    transition: all 0.3s ease;
+}
+
+.contactLink:hover {
+    text-decoration: underline;
+    color: $accent-ember;
+}
+
+/* Button styling */
+.btnPrimary {
+    background: linear-gradient(45deg, $accent-dragon, $accent-fire);
+    border: none;
+    padding: 0.75rem 2rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    box-shadow: 0 4px 15px rgba(139, 0, 0, 0.3);
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.btnPrimary:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 7px 25px rgba(139, 0, 0, 0.5);
+    background-color: $accent-fire;
+    background-image: none;
+}
+
+.btnPrimary:focus {
+    box-shadow: 0 0 0 0.25rem rgba(255, 100, 0, 0.4);
+}
+
+.btnPrimary::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    transition: 0.6s;
+}
+
+.btnPrimary:hover::before {
+    left: 100%;
+}
+
+.btnPrimary:disabled {
+    background: linear-gradient(45deg, rgba(139, 0, 0, 0.5), rgba(255, 100, 0, 0.5));
+    transform: none;
+}
+
+/* Social links styling */
+.socialGrid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+    gap: 15px;
+    margin-top: 1.5rem;
+}
+
+.socialItem {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: 10px;
+    padding: 15px;
+    border-radius: 8px;
+    background-color: rgba(255, 255, 255, 0.05);
+    transition: all 0.3s ease;
+    text-decoration: none;
+}
+
+.socialItem:hover {
+    background-color: rgba(255, 100, 0, 0.1);
+    transform: translateY(-5px);
+}
+
+.socialIconLg {
+    font-size: 1.8rem;
+    color: $accent-fire;
+}
+
+.socialName {
+    color: $text-ash;
+    font-size: 0.9rem;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+/* Map styling */
+.mapContainer {
+    position: relative;
+    overflow: hidden;
+    border-radius: 8px;
+    border: 1px solid $card-border;
+    margin-bottom: 2rem;
+}
+
+.mapContainer::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 5px;
+    background: linear-gradient(to right, $accent-dragon, $accent-fire);
+    z-index: 1;
+}
+
+.mapFrame {
+    width: 100%;
+    height: 400px;
+    border: none;
+    background-color: $card-bg;
+    filter: grayscale(90%) invert(92%) hue-rotate(180deg);
+}
+
+/* Binary background effect */
+.binaryLine {
+    position: absolute;
+    font-family: 'Fira Code', monospace;
+    color: $accent-fire;
+    font-size: 0.8rem;
+    opacity: 0.15;
+    pointer-events: none;
+}
+
+/* Ember effect */
+.emberParticle {
+    position: absolute;
+    width: 3px;
+    height: 3px;
+    background-color: $accent-fire;
+    border-radius: 50%;
+    opacity: 0.6;
+    pointer-events: none;
+    z-index: 2;
+    box-shadow: 0 0 5px $accent-fire;
+    animation: float 3s linear infinite;
+}
+
+@keyframes float {
+    0% {
+        transform: translateY(0) rotate(0deg);
+        opacity: 0.6;
+    }
+
+    100% {
+        transform: translateY(-100px) rotate(360deg);
+        opacity: 0;
+    }
+}
+
+/* Table styling */
+.table {
+    color: $text-ash;
+    margin-bottom: 0;
+}
+
+.table td {
+    padding: 0.5rem 0.25rem;
+    border-color: rgba(255, 255, 255, 0.05);
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+@media (max-width: 768px) {
+    .schedule-container {
+        overflow-x: auto;
+    }
+
+    .social-grid {
+        grid-template-columns: repeat(3, 1fr);
+    }
+
+    .map-frame {
+        height: 300px;
+    }
+}
+
+@media (max-width: 576px) {
+    .social-grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 10px;
+    }
+
+    .form-floating>label {
+        padding: 0.75rem 0.75rem;
+    }
+}

src/assets/styles/FormControl.scss

@@ -0,0 +1,95 @@
+@use './variables.scss' as *;
+
+/* Form styling */
+.form-control {
+    background-color: rgba(255, 255, 255, 0.05);
+    border: 1px solid var(--card-border);
+    color: var(--text-light);
+    padding: 0.75rem 0.9375rem;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.form-control:focus {
+    background-color: rgba(255, 255, 255, 0.08);
+    border-color: var(--accent-fire);
+    box-shadow: 0 0 0 0.25rem rgba(255, 100, 0, 0.25);
+    color: var(--text-light);
+}
+
+.form-control::placeholder {
+    color: rgba(255, 255, 255, 0.3);
+}
+
+textarea.form-control {
+    min-height: 120px;
+}
+
+.form-label {
+    color: var(--text-ash);
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.form-text {
+    color: rgba(255, 255, 255, 0.5);
+}
+
+.form-select {
+    background-color: rgba(255, 255, 255, 0.05);
+    border: 1px solid var(--card-border);
+    color: var(--text-light);
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ff6400' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.form-select:focus {
+    background-color: rgba(255, 255, 255, 0.08);
+    border-color: var(--accent-fire);
+    box-shadow: 0 0 0 0.25rem rgba(255, 100, 0, 0.25);
+    color: var(--text-light);
+}
+
+.form-select option {
+    background-color: var(--card-bg);
+    color: var(--text-light);
+}
+
+/* Alert styling */
+.alert-success {
+    background-color: rgba(25, 135, 84, 0.1);
+    border-color: rgba(25, 135, 84, 0.3);
+    color: #75b798;
+}
+
+.alert-danger {
+    background-color: rgba(220, 53, 69, 0.1);
+    border-color: rgba(220, 53, 69, 0.3);
+    color: #ea868f;
+}
+
+/* Form validation styling */
+.was-validated .form-control:invalid,
+.form-control.is-invalid {
+    border-color: #dc3545;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    background-position: right calc(0.375em + 0.1875rem) center;
+    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+}
+
+.was-validated .form-control:valid,
+.form-control.is-valid {
+    border-color: #198754;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    background-position: right calc(0.375em + 0.1875rem) center;
+    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+}
+
+.invalid-feedback {
+    color: #dc3545;
+    font-size: 0.875em;
+    margin-top: 0.25rem;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}

src/assets/styles/_variables.scss

@@ -9,6 +9,7 @@ $text-ash: #aaaaaa;
 $card-bg: #141414;
 $card-border: #2a2a2a;
 $code-bg: #1e1e1e;
+$font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
 // Effects
 $glow-effect: 0 0 10px $accent-fire, 0 0 20px rgba(255, 100, 0, 0.4);

src/assets/styles/card.scss

@@ -0,0 +1,35 @@
+@use './variables.scss' as *;
+
+/* Card styling */
+@mixin card {
+    .card {
+        background-color: $card-bg;
+        border: 1px solid $card-border;
+        border-radius: 8px;
+        transition: all 0.3s ease;
+        overflow: hidden;
+    }
+
+    .card:hover {
+        transform: translateY(-7px);
+        border-color: rgba(255, 100, 0, 0.3);
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
+    }
+
+    .card::before {
+        content: "";
+        position: absolute;
+        width: 100%;
+        height: 5px;
+        top: 0;
+        left: 0;
+        background: linear-gradient(to right, $accent-dragon, $accent-fire);
+        z-index: 1;
+    }
+
+    @media (max-width: 576px) {
+        .card-body {
+            padding: 1.25rem;
+        }
+    }
+}

src/components/ContactForm.tsx

@@ -1,4 +1,6 @@
 import { useState, type FormEvent } from 'react';
+import '@styles/FormControl.scss'
+import styles from '@styles/Contact.module.scss'
 
 export const ContactForm = () => {
   const [formData, setFormData] = useState({
@@ -47,11 +49,11 @@ export const ContactForm = () => {
   };
   
   return (
-    <div className="card h-100">
+    <div className={`card h-100 ${styles.card}`}>
-      <div className="card-header bg-transparent">
+      <div className={`card-header bg-transparent ${styles.cardHeader}`}>
         <h2 className="mb-0 py-2">Send a Message to the Forge</h2>
       </div>
-      <div className="card-body p-4">
+      <div className={`card-body p-4 ${styles.cardBody}`}>
         {/* Success message */}
         {showSuccess && (
           <div className="alert alert-success" role="alert">
@@ -176,7 +178,7 @@ export const ContactForm = () => {
           <div className="text-center">
             <button 
               type="submit" 
-              className="btn btn-primary position-relative" 
+              className={`btn btn-primary position-relative ${styles.btnPrimary}`}
               id="submit-button"
               disabled={isSubmitting}
             >

src/components/ProjectModal.tsx

@@ -68,14 +68,15 @@ export const ProjectModal: React.FC<ProjectModalProps> = ({ project }) => {
                                 project.projectDetails?.keyFeatures && project.projectDetails.keyFeatures.length > 0 && (
                                     <>
                                         <h4 className="mt-4 mb-3">Key Features</h4>
+                                        <ul className={style.featuresList}>
                                         {
                                             project.projectDetails?.keyFeatures.map((feature, index) => (
-                                                <p key={index} className="mb-2">
+                                                <li key={index}>
-                                                    <i className="fas fa-check-circle text-success me-2"></i>
                                                     {feature}
-                                                </p>
+                                                </li>
                                             ))
                                         }
+                                        </ul>
                                     </>
                                 )
                             }

src/components/styles.css

@@ -1,127 +1,3 @@
-/* About Page Styles */
-.profile-image {
-  width: 100%;
-  aspect-ratio: 1/1;
-  border-radius: 8px;
-  overflow: hidden;
-  border: 3px solid rgba(255, 100, 0, 0.3);
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
-  position: relative;
-}
-
-.profile-image::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(45deg, rgba(255, 100, 0, 0.2), transparent);
-  z-index: 1;
-}
-
-.profile-image img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  filter: contrast(1.1) brightness(0.9);
-}
-
-.intro-text {
-  font-size: 1.1rem;
-  line-height: 1.8;
-  color: var(--text-ash);
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-}
-
-.intro-text p {
-  margin-bottom: 1.25rem;
-}
-
-.intro-text strong {
-  color: var(--text-light);
-}
-
-.intro-text .accent {
-  color: var(--accent-fire);
-}
-
-.connect-link {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 20px;
-  background-color: rgba(255, 255, 255, 0.05);
-  border-radius: 4px;
-  text-decoration: none;
-  color: var(--text-light);
-  transition: all 0.3s ease;
-  border: 1px solid var(--card-border);
-  margin-right: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-
-.connect-link:hover {
-  background-color: rgba(255, 100, 0, 0.1);
-  transform: translateY(-3px);
-  border-color: var(--accent-fire);
-  color: var(--text-light);
-}
-
-.connect-icon {
-  color: var(--accent-fire);
-}
-
-/* Value cards */
-.value-card {
-  background-color: var(--card-bg);
-  border-radius: 8px;
-  padding: 1.875rem;
-  border: 1px solid var(--card-border);
-  transition: all 0.3s ease;
-  position: relative;
-  overflow: hidden;
-  text-align: center;
-  height: 100%;
-}
-
-.value-card:hover {
-  transform: translateY(-5px);
-  border-color: rgba(255, 100, 0, 0.3);
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
-}
-
-.value-icon {
-  font-size: 2.5rem;
-  color: var(--accent-fire);
-  margin-bottom: 1.25rem;
-}
-
-.value-title {
-  font-size: 1.3rem;
-  margin-bottom: 1rem;
-  position: relative;
-  display: inline-block;
-  color: var(--text-light);
-}
-
-.value-title::after {
-  content: "";
-  position: absolute;
-  width: 40px;
-  height: 2px;
-  background: var(--accent-fire);
-  bottom: -5px;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.value-text {
-  color: var(--text-ash);
-  line-height: 1.6;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-}
-
 /* Skills card */
 .skill-card {
   background-color: var(--card-bg);
@@ -532,17 +408,6 @@
   transform: translateY(-5px);
 }
 
-.social-icon-lg {
-  font-size: 1.8rem;
-  color: var(--accent-fire);
-}
-
-.social-name {
-  color: var(--text-ash);
-  font-size: 0.9rem;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-}
-
 /* 404 page styles */
 .error-container {
   position: relative;

src/data/contactData.ts

@@ -0,0 +1,20 @@
+import type {ContactProps} from '../untils/ContactProps'
+
+export const contactData: ContactProps = {
+    email: 'forge@seccodesmith.pl',
+    businessEmail: 'business@seccodesmith.pl',
+    socialLinks: [
+        { platform: 'LinkedIn', url: 'https://www.linkedin.com/in/jakub-berechowski', icon: 'fab fa-linkedin' },
+        { platform: 'GitHub', url: 'https://github.com/seccodesmith', icon: 'fab fa-github' },
+        { platform: 'Facebook', url: 'https://www.facebook.com/people/Seccodesmith/61575058536717/', icon: 'fab fa-facebook' },
+    ],
+    questionsAndAnswers: [
+        { question: 'What is your typical project timeline?', answer: 'Project timelines vary based on complexity and scope. Small projects typically take 2-4 weeks, medium-sized projects 1-2 months, and larger enterprise solutions 3-6 months. I provide detailed timeline estimates during the initial consultation, and maintain transparent communication about progress throughout the development cycle.' },
+        { question: 'How does your collaboration process work?', answer: 'My collaboration process consists of five phases: initial consultation, requirements gathering, design and planning, implementation, and testing/deployment. I use agile methodologies with regular check-ins to ensure your vision is being realized. Communication is maintained through your preferred channels (email, Slack, etc.), and you\'ll have access to development milestones through shared repositories and project management tools.' },
+        { question: 'What are your payment terms and methods?', answer: 'I typically work with a milestone-based payment structure: 30% upfront to begin work, 30% at the midpoint after key deliverables are approved, and 40% upon project completion. For longer projects, we can establish additional milestones. I accept bank transfers, PayPal, and cryptocurrency payments. All payment terms are clearly outlined in the project contract before work begins.'},
+        { question: 'Who owns the code and deliverables?', answer: 'Upon final payment, you receive full ownership rights to all custom code and deliverables created specifically for your project. I maintain no proprietary claim to custom solutions developed for clients. For projects that incorporate open-source components, those elements remain under their original licenses, and I provide clear documentation of all third-party code used in your project.' },
+        { question: 'Do you offer support and maintenance?', answer: 'Yes, I offer a 30-day warranty period for all projects, during which bug fixes and minor adjustments are covered at no additional cost. For ongoing support, I provide maintenance packages that include regular updates, security patches, and priority response times. These can be tailored to your specific needs and budget, whether you require occasional support or dedicated monthly maintenance.'}
+    ],
+    MapIframeUrl: 'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d82077.2903513271!2d21.9433946!3d50.0411861!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x473cfae3cc14d449%3A0xd2240d31b33eb2ed!2zUnplc3rDs3c!5e0!3m2!1sen!2spl!4v1651813309336!5m2!1sen!2spl',
+    phone: '',
+};

src/pages/Contact.tsx

@@ -1,14 +1,21 @@
 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';
 
 export const Contact = () => {
+  const data: ContactProps = contactData;
+
   return (
     <>
-      <PageHeader 
+      <PageHeader
-        title="Forge Connection" 
+        title="Forge Connection"
         subtitle="Have a project in mind? Send a message to the forge and let's craft something extraordinary together"
       />
-      
+
       <section className="py-5">
         <div className="container">
           <div className="row g-4">
@@ -16,82 +23,70 @@ export const Contact = () => {
             <div className="col-lg-7">
               <ContactForm />
             </div>
-            
+
             {/* Contact Info Column */}
             <div className="col-lg-5">
               {/* Email Info */}
-              <div className="card mb-4">
+              <div className={`card mb-4 ${style.card}`}>
-                <div className="card-body p-4">
+                <div className={`card-body p-4 ${style.cardBody}`}>
-                  <div className="contact-card">
+                  <div className={`${style.contactCard}`}>
-                    <div className="contact-icon">
+                    <div className={`${style.contactIcon}`}>
                       <i className="fas fa-envelope"></i>
                     </div>
-                    <h3 className="contact-title">Email</h3>
+                    <h3 className={style.contactTitle}>Email</h3>
                     <div className="contact-content">
                       <p>For project inquiries or questions:</p>
                       <p>
-                        <a href="mailto:forge@seccodesmtih.com" className="contact-link">
+                        <a href={`mailto:${data.email}`} className={style.contactLink}>
-                          forge@seccodesmtih.com
+                          {data.email}
                         </a>
                       </p>
                       <p>For business collaborations:</p>
                       <p>
-                        <a href="mailto:business@seccodesmtih.com" className="contact-link">
+                        <a href={`mailto:${data.businessEmail}`} className={style.contactLink}>
-                          business@seccodesmtih.com
+                          {data.businessEmail}
                         </a>
                       </p>
                     </div>
                   </div>
                 </div>
               </div>
-              
+
-              {/* Connect Through Socials */}
+              {
-              <div className="card">
+                data.socialLinks.length > 0 && (
-                <div className="card-body p-4">
+                  <div className={`card ${style.card}`}>
-                  <div className="contact-card">
+                    <div className={`card-body p-4 ${style.cardBody}`}>
-                    <div className="contact-icon">
+                      <div className={style.contactCard}>
-                      <i className="fas fa-link"></i>
+                        <div className={style.contactIcon}>
-                    </div>
+                          <i className="fas fa-link"></i>
-                    <h3 className="contact-title">Connect Through the Ether</h3>
+                        </div>
-                    <div className="contact-content">
+                        <h3 className={style.contactTitle}>Connect Through the Ether</h3>
-                      <p>You can also reach me through these digital pathways:</p>
+                        <div className={style.contactContent}>
-                      <div className="social-grid">
+                          <p>You can also reach me through these digital pathways:</p>
-                        <a href="#" className="social-item">
+                          <div className={style.socialGrid}>
-                          <i className="fab fa-github social-icon-lg"></i>
+                          {data.socialLinks.map((link, index) => (
-                          <span className="social-name">GitHub</span>
+
-                        </a>
+                              <a key={index} href={link.url} className={`social-item ${style.socialItem}`}>
-                        <a href="#" className="social-item">
+                                <i className={`${link.icon} social-icon-lg ${style.socialIconLg}`}></i>
-                          <i className="fab fa-linkedin social-icon-lg"></i>
+                                <span className={`social-name ${style.socialName}`}>{link.platform}</span>
-                          <span className="social-name">LinkedIn</span>
+                              </a>
-                        </a>
+                            
-                        <a href="#" className="social-item">
+                          ))}
-                          <i className="fab fa-twitter social-icon-lg"></i>
+                          </div>
-                          <span className="social-name">Twitter</span>
+                        </div>
-                        </a>
-                        <a href="#" className="social-item">
-                          <i className="fab fa-discord social-icon-lg"></i>
-                          <span className="social-name">Discord</span>
-                        </a>
-                        <a href="#" className="social-item">
-                          <i className="fab fa-telegram social-icon-lg"></i>
-                          <span className="social-name">Telegram</span>
-                        </a>
-                        <a href="#" className="social-item">
-                          <i className="fab fa-stack-overflow social-icon-lg"></i>
-                          <span className="social-name">Stack Overflow</span>
-                        </a>
                       </div>
                     </div>
                   </div>
-                </div>
+                )
-              </div>
+              }
+              
             </div>
           </div>
         </div>
-      </section>
+      </section >
-      
+
       {/* FAQ Section */}
-      <section className="py-5 bg-dark">
+      < section className="py-5 bg-dark" >
         <div className="container">
           <div className="row mb-4">
             <div className="col-12 text-center">
@@ -102,91 +97,42 @@ export const Contact = () => {
           <div className="row">
             <div className="col-lg-8 mx-auto">
               <div className="accordion" id="faqAccordion">
-                {/* FAQ Item 1 */}
+                {
-                <div className="accordion-item">
+                  data.questionsAndAnswers.map((item, index) => (
-                  <h2 className="accordion-header" id="headingOne">
+                    <div className={`accordion-item`} key={index}>
-                    <button 
+                      <h2 className={`accordion-header`} id={`heading${index}`}>
-                      className="accordion-button collapsed" 
+                        <button
-                      type="button" 
+                          className={`accordion-button collapsed`}
-                      data-bs-toggle="collapse" 
+                          type="button"
-                      data-bs-target="#collapseOne" 
+                          data-bs-toggle="collapse"
-                      aria-expanded="false" 
+                          data-bs-target={`#collapse${index}`}
-                      aria-controls="collapseOne"
+                          aria-expanded="false"
-                    >
+                          aria-controls={`collapse${index}`}
-                      What is your typical project timeline?
+                        >
-                    </button>
+                          {item.question}
-                  </h2>
+                        </button>
-                  <div 
+                      </h2>
-                    id="collapseOne" 
+                      <div
-                    className="accordion-collapse collapse" 
+                        id={`collapse${index}`}
-                    aria-labelledby="headingOne" 
+                        className="accordion-collapse collapse"
-                    data-bs-parent="#faqAccordion"
+                        aria-labelledby={`heading${index}`}
-                  >
+                        data-bs-parent="#faqAccordion"
-                    <div className="accordion-body">
+                      >
-                      Project timelines vary based on complexity and scope. Small projects typically take 2-4 weeks, medium-sized projects 1-2 months, and larger enterprise solutions 3-6 months. I provide detailed timeline estimates during the initial consultation, and maintain transparent communication about progress throughout the development cycle.
+                        <div className={`accordion-body`}>
+                          {item.answer}
+                        </div>
+                      </div>
                     </div>
-                  </div>
+                  ))
-                </div>
+                }
-                
-                {/* FAQ Item 2 */}
-                <div className="accordion-item">
-                  <h2 className="accordion-header" id="headingTwo">
-                    <button 
-                      className="accordion-button collapsed" 
-                      type="button" 
-                      data-bs-toggle="collapse" 
-                      data-bs-target="#collapseTwo" 
-                      aria-expanded="false" 
-                      aria-controls="collapseTwo"
-                    >
-                      How does your collaboration process work?
-                    </button>
-                  </h2>
-                  <div 
-                    id="collapseTwo" 
-                    className="accordion-collapse collapse" 
-                    aria-labelledby="headingTwo" 
-                    data-bs-parent="#faqAccordion"
-                  >
-                    <div className="accordion-body">
-                      My collaboration process consists of five phases: initial consultation, requirements gathering, design and planning, implementation, and testing/deployment. I use agile methodologies with regular check-ins to ensure your vision is being realized. Communication is maintained through your preferred channels (email, Slack, etc.), and you'll have access to development milestones through shared repositories and project management tools.
-                    </div>
-                  </div>
-                </div>
-                
-                {/* FAQ Item 3 */}
-                <div className="accordion-item">
-                  <h2 className="accordion-header" id="headingThree">
-                    <button 
-                      className="accordion-button collapsed" 
-                      type="button" 
-                      data-bs-toggle="collapse" 
-                      data-bs-target="#collapseThree" 
-                      aria-expanded="false" 
-                      aria-controls="collapseThree"
-                    >
-                      What are your payment terms and methods?
-                    </button>
-                  </h2>
-                  <div 
-                    id="collapseThree" 
-                    className="accordion-collapse collapse" 
-                    aria-labelledby="headingThree" 
-                    data-bs-parent="#faqAccordion"
-                  >
-                    <div className="accordion-body">
-                      I typically work with a milestone-based payment structure: 30% upfront to begin work, 30% at the midpoint after key deliverables are approved, and 40% upon project completion. For longer projects, we can establish additional milestones. I accept bank transfers, PayPal, and cryptocurrency payments. All payment terms are clearly outlined in the project contract before work begins.
-                    </div>
-                  </div>
-                </div>
               </div>
             </div>
           </div>
         </div>
-      </section>
+      </section >
-      
+
       {/* Map Section */}
-      <section className="py-5">
+      < section className="py-5" >
         <div className="container">
           <div className="row mb-4">
             <div className="col-12 text-center">
@@ -196,19 +142,19 @@ export const Contact = () => {
           </div>
           <div className="row">
             <div className="col-12">
-              <div className="map-container">
+              <div className={style.mapContainer}>
-                <iframe 
+                <iframe
-                  className="map-frame" 
+                  className={style.mapFrame}
-                  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d82077.2903513271!2d21.9433946!3d50.0411861!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x473cfae3cc14d449%3A0xd2240d31b33eb2ed!2zUnplc3rDs3c!5e0!3m2!1sen!2spl!4v1651813309336!5m2!1sen!2spl" 
+                  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d82077.2903513271!2d21.9433946!3d50.0411861!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x473cfae3cc14d449%3A0xd2240d31b33eb2ed!2zUnplc3rDs3c!5e0!3m2!1sen!2spl!4v1651813309336!5m2!1sen!2spl"
-                  allowFullScreen 
+                  allowFullScreen
-                  loading="lazy" 
+                  loading="lazy"
                   referrerPolicy="no-referrer-when-downgrade"
                 ></iframe>
               </div>
             </div>
           </div>
         </div>
-      </section>
+      </section >
     </>
   );
 };

src/untils/ContactProps.ts

@@ -0,0 +1,19 @@
+export interface ContactProps {
+    email: string;
+    businessEmail: string;
+    socialLinks: SocialLink[];
+    questionsAndAnswers: QuestionAndAnswer[];
+    MapIframeUrl: string;
+    phone: string;
+}
+
+export interface SocialLink {
+    platform: string;
+    url: string;
+    icon: string;
+}
+
+export interface QuestionAndAnswer {
+    question: string;
+    answer: string;
+}