From 8013c1eb340a69a453b052a92a6978c856e7578a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Loureiro?= <admin@joaoloureiro.dev.br>
Date: Mon, 15 Sep 2025 22:12:18 -0300
Subject: [PATCH] fix: adjust padding of about and contact for mobile

---
 .../src/app/components/sections/About.tsx     | 56 ++++++++++---------
 .../src/app/components/sections/Contact.tsx   | 54 +++++++++---------
 2 files changed, 57 insertions(+), 53 deletions(-)

diff --git a/frontend/src/app/components/sections/About.tsx b/frontend/src/app/components/sections/About.tsx
index 6be69cd..3b646fa 100644
--- a/frontend/src/app/components/sections/About.tsx
+++ b/frontend/src/app/components/sections/About.tsx
@@ -28,38 +28,40 @@ export default function AboutAndSkills() {
       viewport={{ once: true }}
       transition={{ duration: 0.6, ease: "easeOut" }}
     >
-      <h2 className="text-3xl md:text-4xl font-bold text-center text-[var(--color-text-primary)] heading-underline">{tAbout('title')}</h2>
+      <div className="container mx-auto px-4">
+        <h2 className="text-3xl md:text-4xl font-bold text-center text-[var(--color-text-primary)] heading-underline">{tAbout('title')}</h2>
       
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-start">
-        <div className="space-y-4 text-lg text-left text-[var(--color-text-secondary)]">
-          <p>{tAbout('paragraph1')}</p>
-          <p>{tAbout('paragraph2')}</p>
-          <p>{tAbout('paragraph3')}</p>
-        </div>
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-start">
+          <div className="space-y-4 text-lg text-justify text-[var(--color-text-secondary)]">
+            <p>{tAbout('paragraph1')}</p>
+            <p>{tAbout('paragraph2')}</p>
+            <p>{tAbout('paragraph3')}</p>
+          </div>
 
-        <div className="space-y-6">
-          <div>
-            <h3 className="text-xl font-semibold text-[var(--color-text-primary)] mb-3">{tSkills('backend')}</h3>
-            <div className="flex flex-wrap gap-3">
-              {skillsData.backend.map(skill => <SkillPill key={skill} skill={skill} />)}
+          <div className="space-y-6">
+            <div>
+              <h3 className="text-xl font-semibold text-[var(--color-text-primary)] mb-3">{tSkills('backend')}</h3>
+              <div className="flex flex-wrap gap-3">
+                {skillsData.backend.map(skill => <SkillPill key={skill} skill={skill} />)}
+              </div>
             </div>
-          </div>
-          <div>
-            <h3 className="text-xl font-semibold text-[var(--color-text-primary)] mb-3">{tSkills('frontend')}</h3>
-            <div className="flex flex-wrap gap-3">
-              {skillsData.frontend.map(skill => <SkillPill key={skill} skill={skill} />)}
+            <div>
+              <h3 className="text-xl font-semibold text-[var(--color-text-primary)] mb-3">{tSkills('frontend')}</h3>
+              <div className="flex flex-wrap gap-3">
+                {skillsData.frontend.map(skill => <SkillPill key={skill} skill={skill} />)}
+              </div>
             </div>
-          </div>
-          <div>
-            <h3 className="text-xl font-semibold text-[var(--color-text-primary)] mb-3">{tSkills('databases')}</h3>
-            <div className="flex flex-wrap gap-3">
-              {skillsData.databases.map(skill => <SkillPill key={skill} skill={skill} />)}
+            <div>
+              <h3 className="text-xl font-semibold text-[var(--color-text-primary)] mb-3">{tSkills('databases')}</h3>
+              <div className="flex flex-wrap gap-3">
+                {skillsData.databases.map(skill => <SkillPill key={skill} skill={skill} />)}
+              </div>
             </div>
-          </div>
-           <div>
-            <h3 className="text-xl font-semibold text-[var(--color-text-primary)] mb-3">{tSkills('cloud')}</h3>
-            <div className="flex flex-wrap gap-3">
-              {skillsData.cloud.map(skill => <SkillPill key={skill} skill={skill} />)}
+            <div>
+              <h3 className="text-xl font-semibold text-[var(--color-text-primary)] mb-3">{tSkills('cloud')}</h3>
+              <div className="flex flex-wrap gap-3">
+                {skillsData.cloud.map(skill => <SkillPill key={skill} skill={skill} />)}
+              </div>
             </div>
           </div>
         </div>
diff --git a/frontend/src/app/components/sections/Contact.tsx b/frontend/src/app/components/sections/Contact.tsx
index d037756..85ae7ca 100644
--- a/frontend/src/app/components/sections/Contact.tsx
+++ b/frontend/src/app/components/sections/Contact.tsx
@@ -74,38 +74,40 @@ export default function Contact() {
   return (
     <motion.section 
       id="contact" 
-      className="container mx-auto py-12 md:py-20"
+      className="mx-auto py-12 md:py-20"
       initial={{ opacity: 0, y: 20 }}
       whileInView={{ opacity: 1, y: 0 }}
       viewport={{ once: true }}
       transition={{ duration: 0.6, ease: "easeOut" }}
     >
-      <div className="text-center max-w-2xl mx-auto">
-        <h2 className="text-3xl md:text-4xl font-bold text-[var(--color-text-primary)] heading-underline">{t('title')}</h2>
-        <p className="text-[var(--color-text-secondary)] mb-10">{t('subtitle')}</p>
-      </div>
+      <div className="container mx-auto px-4">
+        <div className="text-justify max-w-2xl mx-auto">
+          <h2 className="text-3xl md:text-4xl font-bold text-[var(--color-text-primary)] heading-underline">{t('title')}</h2>
+          <p className="text-[var(--color-text-secondary)] mb-10">{t('subtitle')}</p>
+        </div>
 
-      {/* Centered Form */}
-      <form onSubmit={handleSubmit} className="max-w-xl mx-auto">
-        <div className="mb-4">
-          <label htmlFor="name" className="block mb-2 text-sm font-medium text-[var(--color-text-secondary)]">{t('form_name')}</label>
-          <input type="text" name="name" id="name" value={formData.name} onChange={handleChange} required
-            className="bg-[var(--color-card)] border border-[var(--color-border)] text-[var(--color-text-primary)] text-sm rounded-lg focus:ring-[var(--color-primary)] focus:border-[var(--color-primary)] block w-full p-2.5" />
-        </div>
-        <div className="mb-4">
-          <label htmlFor="email" className="block mb-2 text-sm font-medium text-[var(--color-text-secondary)]">{t('form_email')}</label>
-          <input type="email" name="email" id="email" value={formData.email} onChange={handleChange} required
-            className="bg-[var(--color-card)] border border-[var(--color-border)] text-[var(--color-text-primary)] text-sm rounded-lg focus:ring-[var(--color-primary)] focus:border-[var(--color-primary)] block w-full p-2.5" />
-        </div>
-        <div className="mb-6">
-          <label htmlFor="message" className="block mb-2 text-sm font-medium text-[var(--color-text-secondary)]">{t('form_message')}</label>
-          <textarea name="message" id="message" rows={5} value={formData.message} onChange={handleChange} required
-            className="bg-[var(--color-card)] border border-[var(--color-border)] text-[var(--color-text-primary)] text-sm rounded-lg focus:ring-[var(--color-primary)] focus:border-[var(--color-primary)] block w-full p-2.5"></textarea>
-        </div>
-        <button type="submit" className="bg-[var(--color-primary)] hover:bg-[var(--color-primary)]/90 text-white font-bold py-3 px-8 rounded-full transition-colors w-full" disabled={isSubmitting}>
-          {isSubmitting ? t('status_sending') : t('submit_button')}
-        </button>
-      </form>
+        {/* Centered Form */}
+        <form onSubmit={handleSubmit} className="max-w-xl mx-auto">
+          <div className="mb-4">
+            <label htmlFor="name" className="block mb-2 text-sm font-medium text-[var(--color-text-secondary)]">{t('form_name')}</label>
+            <input type="text" name="name" id="name" value={formData.name} onChange={handleChange} required
+              className="bg-[var(--color-card)] border border-[var(--color-border)] text-[var(--color-text-primary)] text-sm rounded-lg focus:ring-[var(--color-primary)] focus:border-[var(--color-primary)] block w-full p-2.5" />
+          </div>
+          <div className="mb-4">
+            <label htmlFor="email" className="block mb-2 text-sm font-medium text-[var(--color-text-secondary)]">{t('form_email')}</label>
+            <input type="email" name="email" id="email" value={formData.email} onChange={handleChange} required
+              className="bg-[var(--color-card)] border border-[var(--color-border)] text-[var(--color-text-primary)] text-sm rounded-lg focus:ring-[var(--color-primary)] focus:border-[var(--color-primary)] block w-full p-2.5" />
+          </div>
+          <div className="mb-6">
+            <label htmlFor="message" className="block mb-2 text-sm font-medium text-[var(--color-text-secondary)]">{t('form_message')}</label>
+            <textarea name="message" id="message" rows={5} value={formData.message} onChange={handleChange} required
+              className="bg-[var(--color-card)] border border-[var(--color-border)] text-[var(--color-text-primary)] text-sm rounded-lg focus:ring-[var(--color-primary)] focus:border-[var(--color-primary)] block w-full p-2.5"></textarea>
+          </div>
+          <button type="submit" className="bg-[var(--color-primary)] hover:bg-[var(--color-primary)]/90 text-white font-bold py-3 px-8 rounded-full transition-colors w-full" disabled={isSubmitting}>
+            {isSubmitting ? t('status_sending') : t('submit_button')}
+          </button>
+        </form>
+      </div>
     </motion.section>
   );
 }
\ No newline at end of file