Rework frontend

resources/js/componentss/shared/contactSection/ContactGroup.vue

@@ -0,0 +1,37 @@
+<template>
+	<div class="space-y-3">
+		<h2 class="font-semibold text-[#1A5AAF] text-lg">{{ title }}</h2>
+		<div v-for="(item, index) in items" :key="index">
+			<h3 class="font-semibold md:mb-2 mb-1">{{ item.header }}</h3>
+			<div class="font-light">
+				<p v-for="(detail, idx) in item.details" :key="idx">
+          <span v-if="detail.url">
+            <a :href="detail.url" class="text-blue-500 hover:underline">{{ detail.content }}</a>
+          </span>
+					<span v-else>
+            {{ detail.content }}
+          </span>
+				</p>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	props: {
+		title: {
+			type: String,
+			required: true,
+		},
+		items: {
+			type: Array,
+			required: true,
+		},
+	},
+};
+</script>
+
+<style scoped>
+/* ваши стили, если необходимо */
+</style>

resources/js/componentss/shared/contactSection/ContactSectionBlock.vue

@@ -0,0 +1,68 @@
+<template>
+	<div v-if="loading" class="flex flex-col space-y-4">
+		<div class="group block rounded-xl overflow-hidden animate-pulse">
+			<div class="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-5">
+				<div class="shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
+					<div class="w-full h-full bg-gray-200"></div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div v-else-if="!loading & contacts">
+		<section class="bg-[#F5F5F5] w-full py-10">
+			<div class="max-w-screen-xl md:flex justify-around w-full mx-auto px-4 md:py-[50px] flex-wrap space-y-7 md:space-y-0">
+							<ContactGroup v-for="contact in contacts.data.content"
+									:title="contact.title"
+									:items="contact.items"
+							/>
+			</div>
+		</section>
+	</div>
+
+</template>
+
+<script>
+import ContactGroup from './ContactGroup.vue';
+import axios from "axios";
+
+export default {
+	components: {
+		ContactGroup,
+	},
+	data() {
+		return {
+			loading: true,
+			contacts: null,
+		};
+	},
+	methods: {
+		getContact(id) {
+			axios.get(route('client.widget.contact.show', id))
+					.then(response => {
+						this.contacts = response.data;
+						this.loading = false; // Установить состояние загрузки в false
+					})
+					.catch(error => {
+						console.error('Ошибка:', error);
+					});
+		},
+	},
+	mounted() {
+		const id = this.block?.data.contact || this.contactId
+		this.getContact(id);
+	},
+	props: {
+		block: {
+			type: Object,
+		},
+		contactId: {
+			type: String,
+			default: null,
+		}
+	},
+};
+</script>
+
+<style scoped>
+/* ваши стили, если необходимо */
+</style>