From d57afe93a37cf4cbb2867a04b7c8b57010532612 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Loureiro?= <admin@joaoloureiro.dev.br>
Date: Mon, 9 Jun 2025 12:21:20 -0300
Subject: [PATCH] feat: update social media links in Footer component to use
 environment variables and refactor Contact component to utilize backend URL
 from environment variable

---
 frontend/src/app/components/Footer.tsx           | 10 +++++++---
 frontend/src/app/components/sections/Contact.tsx |  4 ++--
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/components/Footer.tsx b/frontend/src/app/components/Footer.tsx
index 12205d7..24e30f7 100644
--- a/frontend/src/app/components/Footer.tsx
+++ b/frontend/src/app/components/Footer.tsx
@@ -5,18 +5,22 @@ import { FaGithub, FaLinkedin, FaTwitter } from 'react-icons/fa';
 export default function Footer() {
   const t = useTranslations('footer');
 
+  const githubUrl = process.env.NEXT_PUBLIC_GITHUB_URL || '#';
+  const linkedinUrl = process.env.NEXT_PUBLIC_LINKEDIN_URL || '#';
+  const twitterUrl = process.env.NEXT_PUBLIC_TWITTER_URL || '#';
+
   return (
     <footer className="border-t border-[var(--color-border)] py-8 text-[var(--color-text-secondary)]">
       <div className="container mx-auto flex flex-col md:flex-row justify-between items-center gap-4 px-4 sm:px-6 lg:px-8">
         <p className="text-sm">&copy; {new Date().getFullYear()} João Loureiro. {t('copyright')}</p>
         <div className="flex items-center space-x-4">
-          <Link href="#" aria-label="GitHub" target="_blank" className="hover:text-[var(--color-primary)] transition-colors">
+          <Link href={githubUrl} aria-label="GitHub" target="_blank" className="hover:text-[var(--color-primary)] transition-colors">
             <FaGithub size={20} />
           </Link>
-          <Link href="#" aria-label="LinkedIn" target="_blank" className="hover:text-[var(--color-primary)] transition-colors">
+          <Link href={linkedinUrl} aria-label="LinkedIn" target="_blank" className="hover:text-[var(--color-primary)] transition-colors">
             <FaLinkedin size={20} />
           </Link>
-          <Link href="#" aria-label="Twitter" target="_blank" className="hover:text-[var(--color-primary)] transition-colors">
+          <Link href={twitterUrl} aria-label="Twitter" target="_blank" className="hover:text-[var(--color-primary)] transition-colors">
             <FaTwitter size={20} />
           </Link>
         </div>
diff --git a/frontend/src/app/components/sections/Contact.tsx b/frontend/src/app/components/sections/Contact.tsx
index d143be6..00a13fa 100644
--- a/frontend/src/app/components/sections/Contact.tsx
+++ b/frontend/src/app/components/sections/Contact.tsx
@@ -8,6 +8,7 @@ export default function Contact() {
   const t = useTranslations('contact');
   const [formData, setFormData] = useState<{ name: string; email: string; message: string }>({ name: '', email: '', message: '' });
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const backendUrl = process.env.NEXT_PUBLIC_BACKEND_URL || 'http://localhost:3001';
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     setFormData({...formData, [e.target.name]: e.target.value });
@@ -29,9 +30,8 @@ export default function Contact() {
     }
 
     const submissionPromise = async () => {
-      //const backendUrl = process.env.NEXT_PUBLIC_BACKEND_URL;
       try {
-        const response = await fetch(`http://localhost:3001/api/email/send`, {
+        const response = await fetch(`${backendUrl}/api/email/send`, {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify(formData),