Ye contact

frontend/app/pages/contact/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import TableHeader from '~/components/parts/TableHeader.vue';
 import FixedLayout from '~/components/layouts/FixedLayout.vue';
+import ContactLinks from '~/components/parts/ContactLinks.vue';
 import { useSeo } from '~/composables/seo';
 
 const { get, post } = useApi();
@@ -41,36 +42,34 @@ const { data: markdown } = await useAsyncData(`fixed`, async () =>
 
     <FixedLayout>
         <Container>
-            <h1>Contact Aran Roig</h1>
-            <ContentRenderer v-if="markdown" :value="markdown"></ContentRenderer>
+            <h1>{{ $t('pages.contact_heading') }}</h1>
+            <div v-if="markdown" class="contact-intro">
+                <ContentRenderer :value="markdown"></ContentRenderer>
+            </div>
+            <ContactLinks />
         </Container>
     </FixedLayout>
     <Footer></Footer>
 </template>
 
 <style lang="scss" scoped>
-h2 {
-    padding-left: 20px;
-    margin-left: 0;
+.contact-intro {
+    margin: 12px 0 4px;
+    font-size: 0.92rem;
+    color: var(--color-text);
+    opacity: 0.75;
+    line-height: 1.6;
 }
 
-p {
-    padding-left: 30px;
-    margin-left: 0;
-}
-
-.two-columns {
-    display: flex;
-    width: 100%;
+h1 {
+    position: relative;
+    margin-bottom: 8px;
 }
 
 @media screen and (max-width: 600px) {
-    h2 {
-        padding-left: 12px;
-    }
-
-    p {
-        padding-left: 18px;
+    .contact-intro {
+        font-size: 0.85rem;
+        line-height: 1.5;
     }
 }
 </style>