chore: externalize layout paddings

src/app/[lang]/about/departments/page.tsx

@@ -4,6 +4,7 @@ import DepartmentCard from "@/components/department-card";
 import AppLink from "@/components/link";
 import PromotionalCard from "@/components/promotional-card";
 import { useDictionary } from "@/contexts/dictionary-provider";
+import { horizontalPadding, verticalPadding } from "@/lib/styling";
 import { CardType, type TeamData } from "@/lib/types";
 import { fetchTeamData } from "@/lib/utils";
 import { useState, useEffect } from "react";
@@ -67,7 +68,9 @@ export default function Departments() {
   ];
 
   return (
-    <main className="flex flex-col gap-8 sm:gap-12">
+    <main
+      className={`flex flex-col gap-8 sm:gap-12 ${horizontalPadding + verticalPadding}`}
+    >
       <div className="flex flex-col gap-4 px-2 md:px-5">
         <AppLink arrow="back" title={dict.button.back} href={"/about"} />
         <h1 className="font-title text-3xl font-medium">

src/app/[lang]/about/team/page.tsx

@@ -18,6 +18,7 @@ import Avatar from "@/components/avatar";
 import { useDictionary } from "@/contexts/dictionary-provider";
 import PromotionalCard from "@/components/promotional-card";
 import AppLink from "@/components/link";
+import { horizontalPadding, verticalPadding } from "@/lib/styling";
 
 export default function Team() {
   const [fromDefaultOpen, isFromDefaultOpen] = useState(true);
@@ -59,7 +60,9 @@ export default function Team() {
   };
 
   return (
-    <main className="space-y-8 sm:space-y-12">
+    <main
+      className={`space-y-8 sm:space-y-12 ${horizontalPadding + verticalPadding}`}
+    >
       <div className="flex flex-col gap-4 px-2 md:px-5">
         <AppLink arrow="back" title={dict.button.back} href="/about" />
         <div className="flex items-center justify-between gap-5 sm:justify-normal">

src/app/[lang]/layout.tsx

@@ -35,7 +35,7 @@ export default function RootLayout({
       >
         <DictionaryProvider lang={lang}>
           <Navbar />
-          <div className="h-full px-5 py-5 md:px-7 md:py-12">{children}</div>
+          <div className="h-full">{children}</div>
           <Footer />
         </DictionaryProvider>
       </body>

src/components/footer.tsx

@@ -12,7 +12,12 @@ const Footer = () => {
     <footer className=" flex flex-col place-items-center bg-[#EBEBEB] px-5 pb-16 pt-8 sm:flex-row sm:place-items-end sm:px-7 md:px-20">
       <div className="flex w-full max-w-[500px] flex-col place-items-center justify-center space-y-5 sm:w-1/2 sm:max-w-max sm:flex-col-reverse md:place-items-start">
         <div className="w-full space-y-6 pb-2.5 sm:mt-[50px] sm:w-80 sm:pb-0">
-          <Image src="/logo/cesium.svg" alt="CeSIUM Logo Icon" width={32} height={37} />
+          <Image
+            src="/logo/cesium.svg"
+            alt="CeSIUM Logo Icon"
+            width={32}
+            height={37}
+          />
           <p className="text-sm leading-[17px] text-[#94959C]">{dict.cesium}</p>
           <div className="justify-left flex h-[30px] space-x-5">
             {dict.socials.map((social) => {

src/lib/styling.ts

@@ -0,0 +1,2 @@
+export const horizontalPadding = "px-5 md:px-7";
+export const verticalPadding = "py-5 md:py-12";

tailwind.config.ts

@@ -48,6 +48,10 @@ const config: Config = {
     "to-[#ED7950]/20",
     "from-[#03A300]/10",
     "to-[#82E700]/10",
+    "px-5",
+    "py-5",
+    "md:px-7",
+    "md:py-12",
   ],
 };
 export default config;