feat: implement about screen

assets/translations/en.json

@@ -37,6 +37,16 @@
       "description": "We offer a wide range of services for your pet"
     }
   },
+  "about": {
+    "company": {
+      "semantic_label": "Logo text of pet grooming salon Mimos",
+      "description": "We are a company dedicated to the care of pets. We have a team of professionals with extensive experience in the sector. We offer a wide range of services for your pet. We are located in the center of the city of Madrid."
+    },
+    "owner": {
+      "title": "Ana Júlia",
+      "description": "I am a lover of animals, especially dogs. I have been working in the sector for more than 10 years. I have a degree in veterinary medicine and I am a professional dog groomer. I have worked in several pet grooming salons in Madrid. I have also worked in a veterinary clinic. I have a dog named Toby, he is a Yorkshire Terrier. I love my job and I love animals."
+    }
+  },
   "errors": {
     "not_found": "No se ha encontrado el recurso",
     "server": "Error en el servidor",

assets/translations/es.json

@@ -37,6 +37,16 @@
       "description": "Limpieza de oídos."
     }
   },
+  "about": {
+    "company": {
+      "semantic_label": "Logo en texto de la peluquería canina Mimos",
+      "description": "La peluquería canina Mimos es una peluquería canina ubicada en el centro de Barcelona. En ella, cuidamos a tu mascota como si fuera nuestra. Por eso, utilizamos productos de calidad y adaptados a cada tipo de pelo. Además, contamos con un equipo de profesionales que mimarán a tu mascota y la dejarán guapísima."
+    },
+    "owner": {
+      "title": "Ana Júlia",
+      "description": "La dueña de la peluquería canina Mimos es una amante de los animales. Desde pequeña, ha tenido mascotas y siempre ha querido dedicarse a ellas. Por eso, decidió estudiar peluquería canina y abrir su propia peluquería. En ella, cuida a las mascotas como si fueran suyas y las deja guapísimas."
+    }
+  },
   "errors": {
     "not_found": "No se ha encontrado el recurso",
     "server": "Error en el servidor",

assets/translations/pt.json

@@ -37,6 +37,17 @@
       "description": "Limpeza de dentes para todas as raças e tamanhos. Nossos profissionais são especialistas em cuidar de seu peludet."
     }
   },
+  "about": {
+    "company": {
+      "semantic_label": "Logo em texto da peluquería canina Mimos",
+      "description": "Somos uma empresa familiar com mais de 10 anos de experiência no setor. Nossa missão é cuidar de seu peludet como se fosse nosso. Nossos profissionais são especialistas em cuidar de seu peludet."
+
+    },
+    "owner": {
+      "title": "Ana Júlia",
+      "description": "Somos uma empresa familiar com mais de 10 anos de experiência no setor. Nossa missão é cuidar de seu peludet como se fosse nosso. Nossos profissionais são especialistas em cuidar de seu peludet."
+    }
+  },
   "errors": {
     "not_found": "No se ha encontrado el recurso",
     "server": "Error en el servidor",

lib/ui/widgets/components/cards/outlined_card.dart

@@ -9,12 +9,17 @@ import 'package:flutter/material.dart';
 class OutlinedCard extends StatelessWidget {
   final String title;
   final String description;
+  final Widget? titleWidget;
 
   const OutlinedCard({
     super.key,
-    required this.title,
+    this.title = '',
     required this.description,
-  });
+    this.titleWidget,
+  }) : assert(
+          titleWidget == null || title.length == 0,
+          'title and titleWidget cannot be used at the same time',
+        );
 
   @override
   Widget build(BuildContext context) {
@@ -29,7 +34,7 @@ class OutlinedCard extends StatelessWidget {
           mainAxisSize: MainAxisSize.min,
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
-            TitleLText(title),
+            titleWidget ?? TitleLText(title),
             BoxSpacer.v8(),
             Expanded(child: BodyMText(description)),
           ],

lib/ui/widgets/screens/about/about_screen.dart

@@ -1,11 +1,63 @@
+import 'package:dog_gromming_website/ui/styles/insets.dart';
+import 'package:dog_gromming_website/ui/styles/sizes.dart';
+import 'package:dog_gromming_website/ui/styles/spacing.dart';
+import 'package:dog_gromming_website/ui/widgets/components/box_spacer.dart';
+import 'package:dog_gromming_website/ui/widgets/components/cards/outlined_card.dart';
+import 'package:dog_gromming_website/ui/widgets/components/logo.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
 
 class AboutScreen extends StatelessWidget {
   const AboutScreen({super.key});
 
   @override
   Widget build(BuildContext context) {
-    return Text('menu.about'.tr());
+    final cards = <Widget>[
+      OutlinedCard(
+        description: 'about.company.description'.tr(),
+        titleWidget: Logo.text(
+          semanticLabel: 'about.company.semantic_label'.tr(),
+          height: 24,
+        ),
+      ),
+      OutlinedCard(
+        title: 'about.owner.title'.tr(),
+        description: 'about.owner.description'.tr(),
+      ),
+    ];
+    return Padding(
+      padding: Insets.a16,
+      child: LayoutBuilder(
+        builder: (context, constraints) {
+          return Sizes.s.width > constraints.maxWidth
+              ? GridView.extent(
+                  maxCrossAxisExtent: 550,
+                  crossAxisSpacing: Spacing.sp16,
+                  mainAxisSpacing: Spacing.sp16,
+                  children: cards,
+                )
+              : Row(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Flexible(
+                      child: FractionallySizedBox(
+                        heightFactor:
+                            Sizes.xs.width < constraints.maxHeight ? 0.5 : 1,
+                        child: cards.first,
+                      ),
+                    ),
+                    BoxSpacer.h24(),
+                    Flexible(
+                      child: FractionallySizedBox(
+                        heightFactor:
+                            Sizes.xs.width < constraints.maxHeight ? 0.5 : 1,
+                        child: cards.last,
+                      ),
+                    ),
+                  ],
+                );
+        },
+      ),
+    );
   }
 }