feat: add contact data and styling for the Contact page

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,20 @@
 import { PageHeader } from '../components/PageHeader';
 import { ContactForm } from '../components/ContactForm';
+import style from '@styles/Contact.module.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,7 +22,7 @@ export const Contact = () => {
             <div className="col-lg-7">
               <ContactForm />
             </div>
-            
+
             {/* Contact Info Column */}
             <div className="col-lg-5">
               {/* Email Info */}
@@ -44,7 +50,7 @@ export const Contact = () => {
                   </div>
                 </div>
               </div>
-              
+
               {/* Connect Through Socials */}
               <div className="card">
                 <div className="card-body p-4">
@@ -89,7 +95,7 @@ export const Contact = () => {
           </div>
         </div>
       </section>
-      
+
       {/* FAQ Section */}
       <section className="py-5 bg-dark">
         <div className="container">
@@ -102,89 +108,40 @@ 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">
-                    <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>
-      
+
       {/* Map Section */}
       <section className="py-5">
         <div className="container">
@@ -197,11 +154,11 @@ export const Contact = () => {
           <div className="row">
             <div className="col-12">
               <div className="map-container">
-                <iframe 
+                <iframe
-                  className="map-frame" 
+                  className="map-frame"
-                  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>

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;
+}