techknowledge-blog · leticiadia · Jul 5, 2025 · Jul 4, 2025 · Jul 4, 2025 · Jul 5, 2025
diff --git a/src/App.tsx b/src/App.tsx
@@ -11,7 +11,7 @@ import "./global.css";
 export function App() {
   return (
     <BrowserRouter>
-      <div className="flex flex-col mx-auto px-4 max-w-5xl min-h-screen">
+      <div className="flex flex-col min-h-screen w-full">
         <Header />
 
         <main className="flex-grow flex flex-col items-center">

diff --git a/src/components/cardourpurpose/CardOurPurpose.tsx b/src/components/cardourpurpose/CardOurPurpose.tsx
@@ -13,7 +13,7 @@ export function CardOurPurpose() {
         return (
           <div
             key={index}
-            className={`w-[19rem] sm:max-w-[10rem] md:max-w-[12rem] lg:max-w-[19rem] h-auto p-4 flex flex-col gap-4 items-center lg:items-start ${card.style}`}
+            className={` w-[19rem] screen-custom:w-[22rem] sm:max-w-[10rem] md:max-w-[12rem] lg:max-w-[19rem] h-auto p-4 flex flex-col gap-4 items-center lg:items-start ${card.style}`}
           >
             <Icon
               size={32}

diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx
@@ -8,28 +8,30 @@ export function Footer() {
   const { darkMode } = useContext(ThemeContext);
 
   return (
-    <footer className="flex flex-col items-center justify-between gap-6 border-b-4 dark:border-b-[#00C2FF] border-b-blue-500 mt-16 py-4 px-2 sm:flex-row sm:py-6 lg:py-8">
-      <div className="flex flex-col items-center sm:flex-row sm:gap-4">
-        <p className="text-center sm:text-left font-medium">
-          ©2022 - 2025. Todos os direitos reservados ao TechKnowledge.
-        </p>
-      </div>
+    <div className="w-full flex items-center justify-center mx-auto">
+      <footer className="flex flex-col items-center justify-center gap-6 lg:gap-[200px] border-b-4 dark:border-b-[#00C2FF] border-b-blue-500 mt-16 py-4 px-2 sm:flex-row sm:py-6 lg:py-8">
+        <div className="flex flex-col items-center sm:flex-row sm:gap-4">
+          <p className="text-center sm:text-left font-medium">
+            ©2022 - 2025. Todos os direitos reservados ao TechKnowledge.
+          </p>
+        </div>
 
-      <div>
-        {darkMode ? (
-          <img
-            src={TechknowledgeMiniLogo}
-            className="lg:h-full h-6"
-            alt="TechKnowledge Logo"
-          />
-        ) : (
-          <img
-            src={TechknowledgeMiniLogoLight}
-            className="lg:h-full h-6"
-            alt="TechKnowledge Logo"
-          />
-        )}
-      </div>
-    </footer>
+        <div>
+          {darkMode ? (
+            <img
+              src={TechknowledgeMiniLogo}
+              className="h-9 lg:h-full object-cover"
+              alt="TechKnowledge Logo"
+            />
+          ) : (
+            <img
+              src={TechknowledgeMiniLogoLight}
+              className="h-9 lg:h-full object-cover"
+              alt="TechKnowledge Logo"
+            />
+          )}
+        </div>
+      </footer>
+    </div>
   );
 }
diff --git a/src/components/header/Header.module.css b/src/components/header/Header.module.css
@@ -1,6 +1,5 @@
 @media (max-width: 480px) {
   .logo {
     height: 38px;
-    margin-top: 8px;
   }
 }
diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
@@ -13,7 +13,7 @@ export function Header() {
   const { darkMode, toggleDarkMode } = useContext(ThemeContext);
 
   return (
-    <header className="md:flex items-center justify-between pt-6">
+    <header className="w-full md:flex items-center justify-center pt-8 px-4 gap-12 lg:gap-[174px] lg:px-0">
       <Link to="/">
         {darkMode ? (
           <img

diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx
@@ -24,7 +24,7 @@ export function Navbar() {
     <div className="pl-3 md:pl-0">
       <div
         onClick={() => setOpen(!open)}
-        className="absolute right-8 top-7 cursor-pointer md:hidden"
+        className="absolute right-4 top-7 cursor-pointer md:hidden"
       >
         {darkMode ? (
           <img src={open ? CloseDark : MenuHamburgerDark} alt="Menu" />

diff --git a/src/components/posts/postpreview/PostPreview.tsx b/src/components/posts/postpreview/PostPreview.tsx
@@ -45,7 +45,7 @@ export function PostPreview() {
     .slice(0, 3);
 
   return (
-    <div className="flex flex-wrap items-start gap-12 mt-2 justify-center lg:justify-start">
+    <div className="flex flex-wrap items-start gap-8 lg:gap-12 justify-center lg:justify-start">
       {sortedPosts.map((post) => {
         const mock = mockPost.find((mock) => mock.id === post.id);
 
@@ -68,12 +68,12 @@ export function PostPreview() {
             <div className="text-center lg:text-left mt-4">
               <Link
                 to={`/posts/${post.slug}`}
-                className="font-semibold dark:text-[#EDE9FE] text-blue-500 text-base hover:underline w-[16rem] sm:w-[14rem] md:w-[16rem] lg:w-[18rem] block md:min-h-[2rem] md-custom:min-h-[3rem] lg-custom:min-h-[3rem] lg:min-h-[3rem]"
+                className="font-semibold dark:text-[#EDE9FE] text-blue-500 text-base hover:underline w-[20rem] sm:w-[14rem] md:w-[16rem] lg:w-[18rem] block md:min-h-[2rem] md-custom:min-h-[3rem] lg-custom:min-h-[3rem] lg:min-h-[3rem]"
               >
                 {post.title}
               </Link>
 
-              <p className="dark:text-[#C6D1F2] text-[#62748E] text-sm leading-relaxed w-[16rem] sm:w-[14rem] lg:w-[16rem] mx-auto mb-4 lg:mx-0 mt-4 sm:mb-6 md:min-h-[14vh] lg:min-h-[16vh] xl:min-h-[32vh] 2xl:min-h-[16vh]">
+              <p className="dark:text-[#C6D1F2] text-[#62748E] text-sm leading-relaxed w-[20rem] sm:w-[14rem] lg:w-[16rem] mx-auto mb-4 lg:mx-0 mt-4 sm:mb-6 md:min-h-[14vh] lg:min-h-[16vh] xl:min-h-[32vh] 2xl:min-h-[16vh]">
                 {post.previewContent}
               </p>
 

diff --git a/src/markdown-styles.module.css b/src/markdown-styles.module.css
diff --git a/src/sections/SectionEvents.tsx b/src/sections/SectionEvents.tsx
@@ -6,31 +6,31 @@ import rocketImage from "../assets/images/rocket.svg";
 
 export function SectionEvents() {
   return (
-    <section className="flex flex-col gap-8 mt-16 md:flex-col lg:flex-row lg:gap-16 lg:items-center lg:justify-center">
+    <section className="flex flex-col gap-8 mt-8 md:flex-col lg:flex-row lg:gap-16 lg:items-center lg:justify-center">
       <div className="w-full flex flex-col items-center gap-4 text-center">
         <img src={rocketImage} alt="" />
 
-        <h2 className="text-2xl font-bold leading-9 lg:leading-normal dark:bg-gradient-to-r dark:from-white dark:to-blue-400 dark:bg-clip-text dark:text-transparent text-blue-500 w-full md:text-4xl lg:w-[24rem]">
+        <h2 className="text-center text-2xl font-bold leading-9 lg:leading-normal dark:bg-gradient-to-r dark:from-white dark:to-blue-400 dark:bg-clip-text dark:text-transparent text-blue-500 w-[15rem] md:w-[22rem] md:text-4xl lg:w-[24rem]">
           Nos convide para o seu evento!
         </h2>
 
         <div>
           <div className="mt-4">
-            <p className="leading-relaxed w-[18rem] md:w-[70%] mx-auto lg:w-[38.5rem] dark:text-white text-[#62748E]">
+            <p className="leading-relaxed w-[19rem] screen-custom:w-[22rem] md:w-[38rem] mx-auto lg:w-[40rem] dark:text-white text-[#62748E]">
               Tem um evento de tecnologia chegando? Estamos prontos para
               compartilhar conhecimento, inspirar pessoas e discutir nossas
               experiências no mercado! Adoramos contribuir com conteúdos
               relevantes e experiências práticas.
             </p>
 
-            <p className="leading-relaxed w-[18rem] md:w-[70%] mx-auto mt-4 lg:w-[38.5rem] dark:text-white text-[#62748E]">
+            <p className="leading-relaxed w-[19rem] screen-custom:w-[22rem] md:w-[70%] mx-auto mt-4 lg:w-[38.5rem] dark:text-white text-[#62748E]">
               Convide-nos para palestrar no seu evento e fazer parte dessa troca
               de ideias. Será um prazer colaborar com a sua comunidade!
             </p>
           </div>
         </div>
 
-        <div className="w-1/2 md:w-1/3 lg:ml-[-32px]">
+        <div className="w-[15rem] sm:w-1/3 md:w-60 lg:ml-[-32px]">
           <Button label="Saiba Mais" href="/contact" />
         </div>
       </div>

diff --git a/src/sections/SectionFounders.tsx b/src/sections/SectionFounders.tsx
@@ -16,7 +16,7 @@ export function SectionFounders() {
           Fundadores
         </h2>
 
-        <div className="flex flex-col gap-6 w-[16rem] md:w-[26rem] lg:w-[26rem]">
+        <div className="flex flex-col gap-6 w-[19rem] screen-custom:w-[22rem] xs-custom:w-[22rem] md:w-[39rem] lg:w-[26rem]">
           <p className="font-medium leading-relaxed text-center lg:text-left dark:text-white text-[#62748E]">
             Fala galera! Somos o Mikael e a Leticia, os criadores do blog
             TechKnowledge. Gostariamos de compartilhar com vocês um pouco da
@@ -29,7 +29,7 @@ export function SectionFounders() {
           </p>
         </div>
 
-        <div className="w-full sm:w-1/3 md:w-60 mx-auto lg:mx-0">
+        <div className="w-[15rem] sm:w-1/3 md:w-60 mx-auto lg:mx-0">
           <Button label="Conhecer fundadores" href="/about" />
         </div>
       </div>

diff --git a/src/sections/SectionKnowledgers.tsx b/src/sections/SectionKnowledgers.tsx
@@ -5,13 +5,13 @@ import knowledgersImage from "../assets/images/knowledgers.png";
 
 export function SectionKnowledgers() {
   return (
-    <section className="mt-16 flex flex-col items-start justify-center gap-6 lg:flex-row">
+    <section className="mt-16 flex flex-col items-center justify-center gap-6 lg:flex-row lg:items-start">
       <div>
         <h2 className="text-2xl font-bold leading-9 lg:leading-normal mb-4 dark:bg-gradient-to-r dark:from-white dark:to-blue-400 dark:bg-clip-text dark:text-transparent w-full text-center text-blue-500 md:text-4xl lg:text-left lg:w-[24rem]">
           Knowledgers
         </h2>
 
-        <div className="w-[21rem] lg:w-[32rem] lg:mb-20">
+        <div className="w-[19rem] screen-custom:w-[22rem] md:w-[38rem] lg:w-[32rem] lg:mb-20">
           <p className="text-center mb-4 lg:text-left">
             Os Knowledgers são criadores de conteúdo sobre tecnologia, que
             compartilham conhecimento com propósito e autenticidade.
@@ -23,15 +23,15 @@ export function SectionKnowledgers() {
           </p>
         </div>
 
-        <div className="w-2/3 sm:w-1/3 md:w-60 mx-auto lg:mx-0">
+        <div className="w-[15rem] sm:w-1/3 md:w-60 mx-auto lg:mx-0">
           <Button label="Vem nos conhecer" href="/knowledgers" />
         </div>
       </div>
 
       <div>
         <img
           src={knowledgersImage}
-          className="h-80 lg:h-96"
+          className="h-[18rem] screen-custom:h-80 lg:h-96"
           alt="knowledgers"
         />
       </div>

diff --git a/src/sections/SectionLatestPosts.tsx b/src/sections/SectionLatestPosts.tsx
@@ -5,14 +5,14 @@ import { Button } from "../components/button/Button";
 
 export function SectionLatestPosts() {
   return (
-    <section className="mt-16">
-      <h2 className="text-2xl font-bold leading-9 lg:leading-normal mb-4 dark:bg-gradient-to-r dark:from-white dark:to-blue-400 dark:bg-clip-text dark:text-transparent w-full text-center text-blue-500 md:text-4xl lg:text-left lg:w-[24rem]">
+    <section className="mt-16 flex flex-col items-center justify-center lg:items-start">
+      <h2 className="text-2xl font-bold leading-9 lg:leading-normal mb-8 dark:bg-gradient-to-r dark:from-white dark:to-blue-400 dark:bg-clip-text dark:text-transparent w-full text-center text-blue-500 md:text-4xl lg:text-left lg:w-[24rem]">
         Artigos Recentes
       </h2>
 
       <PostPreview />
 
-      <div className="w-2/3 sm:w-1/3 mx-auto lg:mx-0">
+      <div className="w-[15rem] sm:w-1/3 md:w-60 mx-auto lg:mx-0">
         <Button label="Ver todos os artigos" href="/posts" />
       </div>
     </section>

diff --git a/src/sections/SectionMain.tsx b/src/sections/SectionMain.tsx
@@ -8,7 +8,7 @@ import NewLogo from "../assets/images/techknowledge-logo.svg";
 export function SectionMain() {
   return (
     <section className="flex flex-col items-center gap-8 mt-8 lg:flex-row lg:justify-between">
-      <div className="w-full md:w-3/4 lg:w-[34rem]">
+      <div className="w-full sm-medium:w-[23rem] md:w-[38rem] lg:w-[34rem]">
         <p className="text-2xl leading-9 lg:leading-normal text-center font-semibold md:text-4xl md:leading-[3rem] lg:text-5xl lg:text-left dark:text-white text-[#62748E]">
           Um blog para compartilharmos conhecimento da área da{" "}
           <span className="text-blue-400">tecnologia</span>.

diff --git a/src/sections/SectionTechLab.tsx b/src/sections/SectionTechLab.tsx
@@ -5,12 +5,8 @@ import TechLabImage from "../assets/images/techknowledge-techlab.png";
 
 export function SectionTechLab() {
   return (
-    <div
-      className="w-full bg-blue-400 flex flex-col items-center gap-6 mt-10 pt-8 px-4
-                    lg:flex-row lg:items-start lg:justify-center lg:w-[84.4rem] lg:h-[22.5rem] lg:pt-10
-                    xl:px-0 2xl:w-[159rem]"
-    >
-      <div className="max-w-[24rem] text-center lg:max-w-[28rem] lg:text-left">
+    <div className="bg-blue-400 w-full flex flex-col items-center gap-6 mt-10 pt-8 lg:flex-row lg:items-start lg:justify-center">
+      <div className="max-w-[20rem] text-center lg:max-w-[28rem] lg:text-left">
         <h2 className="text-3xl sm:text-4xl font-bold text-black">
           Vem conferir nosso <span>catálogo</span> de conteúdos no TechLab.
         </h2>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -28,6 +28,8 @@ export default {
         "md-custom": "853px",
         "xs-custom": "412px",
         "sm-extended": "540px",
+        "sm-medium": "390px",
+        "screen-custom": "375px",
         "sm-custom": "344px",
       },
       keyframes: {