From 6b9522153f8857952f59ec081c26075c67b4f5c5 Mon Sep 17 00:00:00 2001
From: seccodesmith <admin@seccodesmith.pl>
Date: Tue, 27 May 2025 12:30:22 +0200
Subject: [PATCH] feat: update Contact page to use dynamic email and social
 links

---
 src/assets/styles/_variables.scss |  1 +
 src/pages/Contact.tsx             | 80 +++++++++++++------------------
 2 files changed, 35 insertions(+), 46 deletions(-)

diff --git a/src/assets/styles/_variables.scss b/src/assets/styles/_variables.scss
index b147616..b2d30d2 100644
--- a/src/assets/styles/_variables.scss
+++ b/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);
diff --git a/src/pages/Contact.tsx b/src/pages/Contact.tsx
index b888149..75bcde9 100644
--- a/src/pages/Contact.tsx
+++ b/src/pages/Contact.tsx
@@ -36,14 +36,14 @@ export const Contact = () => {
                     <div className="contact-content">
                       <p>For project inquiries or questions:</p>
                       <p>
-                        <a href="mailto:forge@seccodesmtih.com" className="contact-link">
-                          forge@seccodesmtih.com
+                        <a href={`mailto:${data.email}`} className="contact-link">
+                          {data.email}
                         </a>
                       </p>
                       <p>For business collaborations:</p>
                       <p>
-                        <a href="mailto:business@seccodesmtih.com" className="contact-link">
-                          business@seccodesmtih.com
+                        <a href={`mailto:${data.businessEmail}`} className="contact-link">
+                          {data.businessEmail}
                         </a>
                       </p>
                     </div>
@@ -51,53 +51,41 @@ export const Contact = () => {
                 </div>
               </div>
 
-              {/* Connect Through Socials */}
-              <div className="card">
-                <div className="card-body p-4">
-                  <div className="contact-card">
-                    <div className="contact-icon">
-                      <i className="fas fa-link"></i>
-                    </div>
-                    <h3 className="contact-title">Connect Through the Ether</h3>
-                    <div className="contact-content">
-                      <p>You can also reach me through these digital pathways:</p>
-                      <div className="social-grid">
-                        <a href="#" className="social-item">
-                          <i className="fab fa-github social-icon-lg"></i>
-                          <span className="social-name">GitHub</span>
-                        </a>
-                        <a href="#" className="social-item">
-                          <i className="fab fa-linkedin social-icon-lg"></i>
-                          <span className="social-name">LinkedIn</span>
-                        </a>
-                        <a href="#" className="social-item">
-                          <i className="fab fa-twitter social-icon-lg"></i>
-                          <span className="social-name">Twitter</span>
-                        </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>
+              {
+                data.socialLinks.length > 0 && (
+                  <div className="card">
+                    <div className="card-body p-4">
+                      <div className="contact-card">
+                        <div className="contact-icon">
+                          <i className="fas fa-link"></i>
+                        </div>
+                        <h3 className="contact-title">Connect Through the Ether</h3>
+                        <div className="contact-content">
+                          <p>You can also reach me through these digital pathways:</p>
+                          <div className="social-grid">
+                          {data.socialLinks.map((link, index) => (
+                            
+                              <a key={index} href={link.url} className="social-item">
+                                <i className={`${link.icon} social-icon-lg`}></i>
+                                <span className="social-name">{link.platform}</span>
+                              </a>
+                            
+                          ))}
+                          </div>
+                        </div>
                       </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">
@@ -140,10 +128,10 @@ export const Contact = () => {
             </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">
@@ -165,7 +153,7 @@ export const Contact = () => {
             </div>
           </div>
         </div>
-      </section>
+      </section >
     </>
   );
 };
\ No newline at end of file