initial commit

resources/js/Components/SectionBanner.vue

@@ -0,0 +1,30 @@
+<script setup>
+import { computed } from 'vue';
+import { gradientBgPurplePink, gradientBgPinkRed, gradientBgGreenBlue } from '@/colors';
+
+const props = defineProps({
+	bg: {
+		type: String,
+		required: true,
+		validator: (value) => ['purplePink', 'pinkRed', 'greenBlue'].includes(value),
+	},
+});
+
+const colorClass = computed(() => {
+	switch (props.bg) {
+		case 'purplePink':
+			return gradientBgPurplePink;
+		case 'pinkRed':
+			return gradientBgPinkRed;
+		case 'greenBlue':
+			return gradientBgGreenBlue;
+	}
+
+	return '';
+});
+</script>
+<template>
+	<div :class="colorClass" class="mt-6 mb-6 rounded-2xl py-12 px-6 text-center">
+		<slot />
+	</div>
+</template>