From 2b6d01a08b6abce036a7540014cfce95eb64aa85 Mon Sep 17 00:00:00 2001
From: Luis Igreja <lfsigreja@gmail.com>
Date: Mon, 2 Sep 2024 18:36:49 -0300
Subject: [PATCH] fix: Content Section display alignment

---
 .../sections/SectionGetStarted.stories.js     | 86 +++++++++++++++++++
 .../contentsection/ContentSection.vue         | 19 ++--
 2 files changed, 99 insertions(+), 6 deletions(-)
 create mode 100644 src/stories/templates/sections/SectionGetStarted.stories.js

diff --git a/src/stories/templates/sections/SectionGetStarted.stories.js b/src/stories/templates/sections/SectionGetStarted.stories.js
new file mode 100644
index 00000000..f0dce131
--- /dev/null
+++ b/src/stories/templates/sections/SectionGetStarted.stories.js
@@ -0,0 +1,86 @@
+
+import ContentSection from '../../../templates/contentsection'
+import LinkButton from '../../../templates/linkbutton'
+import Tile from '../../../templates/tile'
+
+export default {
+  title: 'Blocks/Sections/Get Started',
+  tags: ['autodocs'],
+}
+
+const MOCK = {
+  overline: 'Get Started',
+  title: "Sign-up and <span class='animate-pretty bg-clip-text text-transparent bg-gradient-to-r from-orange-500 to-orange-400'>get $300,00 </span> to use for 12 months. Ready to deploy?",
+  "buttons": [
+    {
+      "label": "Free Account",
+      "link": "https://console.azion.com/signup"
+    },
+    {
+      "label": "Talk to an Expert",
+      "link": "https://console.azion.com/signup",
+      "outlined": true
+    }
+  ],
+  items: [
+    {
+      icon: "pi pi-tags",
+      text: "Access to all products"
+    },
+    {
+      icon: "pi pi-credit-card",
+      text: "No credit card required"
+    },
+    {
+      icon: "pi pi-dollar",
+      text: "Credit available to use for 12 months"
+    }
+  ]
+}
+
+const template = `
+<div class="surface-ground py-10">
+  <ContentSection :overline="args.overline" titleTag="h2" position="full">
+    <template #title>
+      <h2 v-html="args.title" />
+    </template>
+    <template #content>
+      <div class="flex flex-col md:flex-row gap-3 md:justify-end md:min-w-fit md:items-end">
+        <LinkButton
+          class="md:w-fit w-full"
+          v-for="{ link, label, outlined } in args.buttons"
+          :link="link"
+          :label="label"
+          :outlined="outlined"
+        />
+      </div>
+    </template>
+    <template #main>
+      <div class="flex flex-col md:flex-row gap-3 justify-between">
+        <div v-for="{ icon, text } in args.items" class="flex gap-3">
+          <Tile> <i :class="icon" class="text-sm" /> </Tile>
+          <p class="font-medium">{{ text }}</p>
+        </div>
+      </div>
+    </template>
+  </ContentSection>
+</div>`
+
+const Template = (args) => ({
+  components: { ContentSection, LinkButton, Tile },
+  setup() {
+    return { args }
+  },
+  template: template
+})
+
+export const Default = Template.bind({})
+Default.args = MOCK
+
+Default.parameters = {
+  docs: {
+    description: {
+      story: ''
+    },
+    source: { code: template } },
+};
diff --git a/src/templates/contentsection/ContentSection.vue b/src/templates/contentsection/ContentSection.vue
index 24f09a01..c67fa92b 100644
--- a/src/templates/contentsection/ContentSection.vue
+++ b/src/templates/contentsection/ContentSection.vue
@@ -1,20 +1,22 @@
 <template>
   <section>
     <div
-      class="px-container flex flex-col w-full gap-10 md:gap-20"
+      class="px-container flex-col flex w-full gap-10 md:gap-20"
       :class="[
-        { 'lg:flex-row': position !== 'center' },
+        { 'lg:flex-row': position === 'left' },
         { 'lg:flex-row-reverse': position == 'right' }
       ]"
     >
     <div class="w-full"
         v-if="overline || title || description || $slots.content">
       <div
-        class="w-full flex flex-col gap-8"
+        class="w-full flex gap-8"
         :class="[
+          { 'flex-col': !reverse },
+          { 'md:flex-row': position == 'full'},
           { 'items-center': isContentCentralized },
-          { 'flex-col-reverse	': reverse, 'flex-col': !reverse },
-          { 'md:top-20 md:sticky': isSticky}
+          { 'flex-col-reverse	': reverse},
+          { 'md:top-20 md:sticky': isSticky }
         ]"
       >
         <div
@@ -41,6 +43,11 @@
               <h5 v-if="titleTag === 'h5'" class="text-3xl font-medium text-balance">{{ title }}</h5>
               <h6 v-if="titleTag === 'h6'" class="text-3xl font-medium text-balance">{{ title }}</h6>
             </template>
+            <template v-else-if="$slots.title">
+              <div class="text-3xl lg:text-4xl font-medium text-balance">
+                <slot name="title" />
+              </div>
+            </template>
             <template v-if="description">
               <p class="text-color-secondary text-sm md:text-base leading-relaxed text-balance">
                 {{ description }}
@@ -96,7 +103,7 @@ defineProps({
   },
   position: {
     type: String,
-    options: ['left', 'right', 'center'],
+    options: ['left', 'right', 'center', 'full'],
     required: false,
     default: 'left'
   },