Fix tiny rendered imperfections.

Author: obrymec

package.json

@@ -4,7 +4,7 @@
   "author": "Obrymec - https://obrymec.vercel.app",
   "name": "@cacybernetic/landing-page",
   "license": "CC0-1.0",
-  "version": "1.0.0",
+  "version": "0.0.8",
   "type": "module",
   "private": true,
   "bugs": {

src/common/components/footer.tsx

@@ -4,9 +4,9 @@
  * @author Obrymec - https://obrymec.vercel.app
  * @supported DESKTOP, MOBILE
  * @created 2025-07-30
- * @updated 2025-08-18
+ * @updated 2025-08-22
  * @file footer.tsx
- * @version 0.0.3
+ * @version 0.0.4
  */
 
 // React dependencies.
@@ -211,7 +211,7 @@ export default function Footer () {
       </Flex>
       {/** Copyright */}
       <Flex
-        padding = {{base: 2, sm: 3, md: 4}}
+        paddingBlock = {{base: 2, sm: 3, md: 4}}
         borderTopColor = "neutral.6"
         justifyContent = "center"
         alignItems = "center"
@@ -220,7 +220,7 @@ export default function Footer () {
       >
         {/** Signature */}
         <Text
-          fontSize = {{base: 12, sm: 13, md: 14}}
+          fontSize = {{base: 11, sm: 12, md: 13, lg: 14}}
           transition = "all .2s"
           textAlign = "center"
         >

src/common/i18n/english.json

@@ -52,11 +52,11 @@
 	"personalDataDetails": "Our site does not use cookies.<br/>No personal or identifiable data is used, let alone transmitted to anyone.",
 	"requestLaunchError": "An error occurred while trying to contact the remote server. Check your internet connection and try again.",
 	"africanSoldierDescription": "A stunning and empowering creation, blending cultural authenticity with modern military design.",
-	"gmpMotorsDescription": "Société de vente et location d'automobile, d'assurance auto, pneumatique et pièces de rechange.",
 	"technologicalExcellenceTitle": "Cutting-edge technology, essential driving force behind our commitment",
 	"requestTimeoutDesc": "Unable to contact the remote server. Check your internet network then try again.",
 	"sendMailError": "An unexpected and unknown error occurred while sending your email. Please try again.",
 	"projectsBuildingStepsTitle": "Turn your visions into reality with a team passionate about innovation",
+	"gmpMotorsDescription": "Car sales and rental company, car insurance, tires and spare parts.",
 	"destroyedCarsBlenderVol1Title": "Realistic Destroyed Cars 3D Assets Pack For Blender Vol 1",
 	"destroyedCarsGodotVol1Title": "Realistic Destroyed Cars 3D Assets Pack For Godot Vol 1",
 	"solidExpertiseTitle": "Proven expertise, dedicated to the success of your projects",

src/features/home/build_steps.tsx

@@ -5,8 +5,8 @@
  * @supported DESKTOP, MOBILE
  * @file build_steps.tsx
  * @created 2025-07-25
- * @updated 2025-08-12
- * @version 0.0.4
+ * @updated 2025-08-22
+ * @version 0.0.5
  */
 
 // Chakra dependencies.
@@ -19,17 +19,22 @@ import {useTranslation} from "react-i18next";
 import solidExpertiseImage from "/assets/images/solid_expertise.webp";
 import trustRelationImage from "/assets/images/trust_relation.webp";
 import shortResultsImage from "/assets/images/short_results.webp";
-import ProjectCard from "@/common/components/project_card.tsx";
 import listenNeedImage from "/assets/images/listen_need.webp";
 import {GLOBAL_LANG} from "@/common/i18n/localization.ts";
 import Section from "@/common/components/section.tsx";
+import ProjectCard, {
+  ProjectCardProps
+} from "@/common/components/project_card.tsx";
 
 // Displays company projects building steps.
 export default function ProjectsBuildingSteps () {
   // Attributes.
   const {t} = useTranslation<string, undefined>(GLOBAL_LANG);
+  const commonProjectCardStyle: ProjectCardProps = {
+    descriptionStyle: {textAlign: {base: "justify", lg: "left"}}
+  };
   const commonDualBoxesStyle: FlexProps = {
-    direction: {base: "column", sm: "column", md: "column", lg: "row"},
+    direction: {base: "column", lg: "row"},
     gap: {base: 4, sm: 5, md: 6},
     transition: "all .2s",
     width: "100%"
@@ -38,35 +43,32 @@ export default function ProjectsBuildingSteps () {
   // Builds tsx code.
   return <Section
     description = {t("projectsBuildingStepsDescription")}
+    titleStyle = {{width: {base: "auto", lg: "620px"}}}
     containerStyle = {{backgroundColor: "primary.50"}}
     title = {t("projectsBuildingStepsTitle")}
-    titleStyle = {{
-      width: {base: "auto", sm: "auto", md: "auto", lg: "620px"}
-    }}
     descriptionStyle = {{
-      width: {base: "auto", sm: "auto", md: "auto", lg: "620px"},
+      width: {base: "auto", lg: "620px"},
       textAlign: "center",
       color: "neutral.8"
     }}
     children = {<Flex
+      direction = {{base: "column", "2xl": "row"}}
       gap = {{base: 4, sm: 5, md: 6}}
       transition = "all .2s"
       marginTop = {4}
-      direction = {{
-        base: "column", sm: "column", md: "column",
-        lg: "column", xl: "column", "2xl": "row"
-      }}
     >
       {/** Dual boxes */}
       <Flex {...commonDualBoxesStyle}>
         {/** Solid expertise */}
         <ProjectCard
+          {...commonProjectCardStyle}
           description = {t("solidExpertiseDescription")}
           title = {t("solidExpertiseTitle")}
           imageUrl = {solidExpertiseImage}
         />
         {/** Listen your needs */}
         <ProjectCard
+          {...commonProjectCardStyle}
           description = {t("listenNeedDescription")}
           title = {t("listenNeedTitle")}
           imageUrl = {listenNeedImage}
@@ -76,12 +78,14 @@ export default function ProjectsBuildingSteps () {
       <Flex {...commonDualBoxesStyle}>
         {/** Trust relation */}
         <ProjectCard
+          {...commonProjectCardStyle}
           description = {t("trustRelationDescription")}
           title = {t("trustRelationTitle")}
           imageUrl = {trustRelationImage}
         />
         {/** Short exploitable results */}
         <ProjectCard
+          {...commonProjectCardStyle}
           description = {t("shortResultsDescription")}
           title = {t("shortResultsTitle")}
           imageUrl = {shortResultsImage}