feat: about section layout

src/components/about-section-layout.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import CustomLink from "./link";
+import { useDictionary } from "@/contexts/dictionary-provider";
+import { horizontalPadding } from "@/lib/styling";
+
+interface AboutSectionProps {
+  title: string;
+  subtitle: string;
+  href: string;
+  children: React.ReactNode;
+}
+
+const AboutSectionLayout = ({
+  title,
+  subtitle,
+  href,
+  children,
+}: AboutSectionProps) => {
+  const dict = useDictionary();
+
+  return (
+    <div
+      className={`flex flex-col items-stretch py-10 sm:flex-row sm:py-12 ${horizontalPadding}`}
+    >
+      <div className="mb-4 flex w-full items-center sm:mr-6 sm:w-20">
+        <div className="flex h-fit flex-1 items-center justify-start sm:h-full sm:w-full sm:items-start sm:justify-center">
+          <span className="w-fit origin-right font-title text-2xl font-medium sm:translate-x-[-50%] sm:translate-y-[-50%] sm:-rotate-90 sm:pr-1 sm:text-3xl">
+            {title}
+          </span>
+        </div>
+        <span className="pt-1 sm:hidden">
+          <CustomLink
+            title={dict.button.see_more}
+            href={href}
+            arrow="forward"
+          />
+        </span>
+      </div>
+
+      <div>
+        <div className="flex justify-start">{subtitle}</div>
+
+        <div className="mt-4 hidden sm:block">
+          <CustomLink
+            title={dict.button.see_more}
+            href={href}
+            arrow="forward"
+          />
+        </div>
+
+        <div className="mt-7 sm:mt-10">{children}</div>
+      </div>
+    </div>
+  );
+};
+
+export default AboutSectionLayout;

src/internationalization/dictionaries/en.json

@@ -28,6 +28,7 @@
   "button": {
     "see_team": "Go to team",
     "learn_more": "Learn more",
+    "see_more": "See more",
     "back": "Go Back"
   },
   "collaborate_card": {

src/internationalization/dictionaries/pt.json

@@ -28,6 +28,7 @@
   "button": {
     "see_team": "Ver direção",
     "learn_more": "Saber mais",
+    "see_more": "Ver mais",
     "back": "Voltar"
   },
   "collaborate_card": {