feat(docs): adding more examples

example.md

@@ -30,12 +30,54 @@ class: "py-24"
 ---
 
 <h2 class="text-[#111827] text-[30px] font-extrabold dark:text-gray-400">
-  <span class="text-primary dark:text-white">Problem 1:</span> Labor hours are wasted on repetitive design tasks.
+  <span class="text-primary dark:text-white">Problem 1:</span> Labor hours are wasted on repetitive design tasks
 </h2>
 
 <br />
 <br />
 
 - People are better at being creative and machines are better at repetition.
-- **40%** of workers feel they waste 1/4 of their week on repetitive tasks.
+- **40% of workers feel they waste 1/4 of their week on repetitive tasks.**
 - Visual consistency is important and it is costly to adapt to change if you have thousands of products and images.
+
+---
+layout: text-image-right
+image: "/image-example-2.png"
+imageFirst: true
+contentCols: "col-span-7"
+imageCols: "col-span-5"
+---
+
+<h2 class="text-[#111827] text-[30px] font-extrabold dark:text-gray-400">
+  <span class="text-primary dark:text-white">Problem 2:</span> 70.9% of people are hesitant to open the links they receive
+</h2>
+
+<br />
+<br />
+
+- Companies neglect how their links look when they are shared by people on social networks.
+- **The most important factor that determines people's trust and interest in links is the image and the URL.**
+- There is a sea of information and every day it is more difficult to capture people's attention.
+
+---
+layout: text-image-right
+image: "/floating.png"
+class: "py-16"
+contentCols: "col-span-6"
+imageCols: "col-span-6"
+---
+
+<h2 class="text-[#111827] text-[30px] font-extrabold dark:text-gray-400">
+  <span class="text-primary dark:text-white">What we do:</span> Flayyer is an image automation service.
+</h2>
+
+<br />
+<br />
+
+We allow creatives to focus on creating and **not repeating.**.
+
+**We improve your brand perception from the moment they are shared on social media and group chats.
+
+**We add a layer of intelligence:** Know what links people are sharing and where.
+
+**We increase the number of visits to your site.**

layouts/text-image-right.vue

@@ -2,10 +2,10 @@
   <div class="slidev-layout relative grid grid-cols-12">
     <SvgBubles />
 
-    <div :class="[image ? 'col-span-8' : 'col-span-12']">
+    <div :class="[image ? contentCols : 'col-span-12']">
       <slot />
     </div>
-    <div v-if="image" class="col-span-4">
+    <div v-if="image" :class="[imageCols, imageFirst && 'order-first']">
       <img :src="image" alt="" />
     </div>
   </div>
@@ -20,5 +20,20 @@ const props = defineProps({
     type: String,
     required: false,
   },
+  imageFirst: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  contentCols: {
+    type: String,
+    required: false,
+    default: 'col-span-8'
+  },
+  imageCols: {
+    type: String,
+    required: false,
+    default: 'col-span-4'
+  }
 });
 </script>