@dcrackel/meyersquaredui 1.0.36

package/src/stories/Organisms/HeroBanners/HomePage/HeroBanner.vue

@@ -0,0 +1,86 @@
+<template>
+  <section class="relative w-full h-3/4 flex justify-center bg-primary m-0">
+    <!-- Spacer -->
+    <div class="hidden md:block w-36 bg-primary"></div>
+
+    <!-- Image -->
+    <div class="relative w-full border-b border-l border-r border-lineGrey">
+      <img :src="imageSrc" alt="Hero Image" class="w-full h-full object-cover" />
+
+      <!-- Text Overlay for Desktop -->
+      <section class="hidden md:flex absolute inset-0 items-center justify-start px-8">
+        <div class="text-left text-white max-w-lg">
+          <BaseText color="secondary" tag="h1" size="4xl" weight="bold" class="mb-4">{{ title }}</BaseText>
+          <BaseText color="secondary" tag="p" size="lg" weight="normal" class="mb-6">{{ description }}</BaseText>
+          <BaseButton
+              :label="buttonLabel"
+              color="secondary"
+              border="gradient1"
+              @click="onClick"
+          />
+        </div>
+      </section>
+    </div>
+
+    <!-- Spacer -->
+    <div class="hidden md:block w-36 bg-primary"></div>
+  </section>
+
+  <!-- Desktop Footer Border Section -->
+  <section class="hidden md:flex border-t border-lineGrey w-full bg-primary">
+    <div class="hidden md:block w-36 bg-primary"></div>
+    <div class="relative w-full border-b border-l border-r border-lineGrey h-36"></div>
+    <div class="hidden md:block w-36 bg-primary"></div>
+  </section>
+
+  <!-- Mobile Overlay -->
+  <section class="flex justify-center md:hidden text-left bg-primary w-full">
+    <div class="w-full px-6 py-8 text-center">
+      <BaseText color="secondary" tag="h1" size="2xl" weight="bold" class="mb-2">{{ title }}</BaseText>
+      <BaseText color="secondary" tag="p" size="sm" weight="normal" class="mb-6">{{ description }}</BaseText>
+      <BaseButton
+          :label="buttonLabel"
+          color="secondary"
+          border="gradient1"
+          class="w-1/2 m-auto"
+          @click="onClick"
+      />
+    </div>
+  </section>
+</template>
+
+<script>
+import BaseButton from '../../../Atoms/BaseButton/BaseButton.vue';
+import BaseText from '../../../Atoms/BaseText/BaseText.vue';
+
+export default {
+  name: 'HeroBanner',
+  components: {
+    BaseText,
+    BaseButton,
+  },
+  props: {
+    imageSrc: {
+      type: String,
+      required: true,
+    },
+    title: {
+      type: String,
+      required: true,
+    },
+    description: {
+      type: String,
+      required: true,
+    },
+    buttonLabel: {
+      type: String,
+      required: true,
+    },
+  },
+  methods: {
+    onClick() {
+      this.$emit('button-click');
+    },
+  },
+};
+</script>

package/src/stories/Templates/HomePage/TestPage.stories.js

@@ -0,0 +1,22 @@
+import TestLayoutPage from './TestPage.vue';
+
+export default {
+    title: 'Templates/TestLayoutPage',
+    component: TestLayoutPage,
+    argTypes: {
+        'button-click': { action: 'button-click' },
+        title: { control: 'text', description: 'Title for the HeroBanner' },
+        description: { control: 'text', description: 'Description for the HeroBanner' },
+        buttonLabel: { control: 'text', description: 'Button label for the HeroBanner' },
+        imageSrc: { control: 'text', description: 'Image source for the HeroBanner' },
+    },
+};
+
+export const Default = {
+    args: {
+        title: 'Discover, Compete, Connect',
+        description: 'Find tournaments, explore clubs, and track your progress.',
+        buttonLabel: 'Find Out More',
+        imageSrc: 'https://meyersquared.com/images/Banner2.png',
+    }
+};

package/src/stories/Templates/HomePage/TestPage.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="m-0 w-full">
+    <Header />
+    <HeroBanner :title="title" :buttonLabel="buttonLabel" :description="description" :imageSrc="imageSrc" />
+  </div>
+</template>
+
+
+<script>
+import HeroBanner from "../../Organisms/HeroBanners/HomePage/HeroBanner.vue";
+import Header from "../../Organisms/Headers/Header.vue";
+
+export default {
+  name: 'TestLayoutPage',
+  components: {
+    Header,
+    HeroBanner,
+  },
+  props: {
+    title: {
+      type: String,
+      default: 'Hero Banner Title'
+    },
+    description: {
+      type: String,
+      default: 'This is the description that goes under the hero banner.'
+    },
+    buttonLabel: {
+      type: String,
+      default: 'Click Here'
+    },
+    imageSrc: {
+      type: String,
+      default: 'https://meyersquared.com/images/Banner2.png'
+    }
+  }
+}
+
+</script>