From 8bee465614a3601f68b6d808828f8a4d5c45c6e0 Mon Sep 17 00:00:00 2001
From: Aman Singh Katal <besoeasy@users.noreply.github.com>
Date: Tue, 5 Dec 2023 13:40:56 +0530
Subject: [PATCH] added blog

---
 components/blog/blogshu1.html |  92 ++++++++++++++++++++++
 components/blog/blogshu2.html |  90 +++++++++++++++++++++
 components/blog/blogshu3.html | 144 ++++++++++++++++++++++++++++++++++
 components/blog/blohshu4.html |  71 +++++++++++++++++
 components/blog/bloshu5.html  | 127 ++++++++++++++++++++++++++++++
 5 files changed, 524 insertions(+)
 create mode 100644 components/blog/blogshu1.html
 create mode 100644 components/blog/blogshu2.html
 create mode 100644 components/blog/blogshu3.html
 create mode 100644 components/blog/blohshu4.html
 create mode 100644 components/blog/bloshu5.html

diff --git a/components/blog/blogshu1.html b/components/blog/blogshu1.html
new file mode 100644
index 0000000..6720ae1
--- /dev/null
+++ b/components/blog/blogshu1.html
@@ -0,0 +1,92 @@
+<section class="py-20">
+    <div class="container mx-auto px-4">
+      <div class="mx-auto mb-12 max-w-lg text-center lg:max-w-2xl">
+        <span class="text-xs font-semibold uppercase text-indigo-500">Lorem ipsum</span>
+        <h2 class="font-heading mb-4 mt-2 text-3xl font-bold leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
+        <p class="text-base leading-relaxed text-gray-500 lg:text-xl lg:leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
+      </div>
+      <div class="-mx-4 -mb-4 flex flex-wrap">
+        <div class="mb-12 w-full px-4 lg:w-2/3">
+          <div class="mb-6 flex h-96">
+            <img class="h-full w-full rounded-lg object-cover" src="https://shuffle.dev/plain-assets/images/indigo-600-horizontal.png" alt="" />
+          </div>
+          <span class="text-xs font-bold text-indigo-500">10 jun 2022 19:40</span>
+          <h2 class="font-heading mb-2 mt-2 text-3xl font-bold">Lorem ipsum dolor sit amet</h2>
+          <p class="mb-4 max-w-2xl text-lg leading-loose text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
+          <a class="flex items-center text-lg font-bold text-indigo-500 hover:text-indigo-700" href="#">
+            <span>Read more</span>
+            <span>
+              <svg class="ml-1 h-4 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+              </svg>
+            </span>
+          </a>
+        </div>
+        <div class="mb-12 w-full px-4 lg:w-1/3">
+          <div class="mb-6 flex h-96">
+            <img class="h-full w-full rounded-lg object-cover" src="https://shuffle.dev/plain-assets/images/indigo-600-horizontal.png" alt="" />
+          </div>
+          <span class="text-xs font-bold text-indigo-500">10 jun 2022 19:40</span>
+          <h2 class="font-heading mb-2 mt-2 text-3xl font-bold">Lorem ipsum dolor</h2>
+          <p class="mb-4 text-lg leading-loose text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+          <a class="flex items-center text-lg font-bold text-indigo-500 hover:text-indigo-700" href="#">
+            <span>Read more</span>
+            <span>
+              <svg class="ml-1 h-4 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+              </svg>
+            </span>
+          </a>
+        </div>
+        <div class="mb-12 w-full px-4 lg:w-1/3">
+          <div class="mb-6 flex h-96">
+            <img class="h-full w-full rounded-lg object-cover" src="https://shuffle.dev/plain-assets/images/indigo-600-horizontal.png" alt="" />
+          </div>
+          <span class="text-xs font-bold text-indigo-500">10 jun 2022 19:40</span>
+          <h2 class="font-heading mb-2 mt-2 text-3xl font-bold">Lorem ipsum dolor</h2>
+          <p class="mb-4 text-lg leading-loose text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+          <a class="flex items-center text-lg font-bold text-indigo-500 hover:text-indigo-700" href="#">
+            <span>Read more</span>
+            <span>
+              <svg class="ml-1 h-4 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+              </svg>
+            </span>
+          </a>
+        </div>
+        <div class="mb-12 w-full px-4 lg:w-1/3">
+          <div class="mb-6 flex h-96">
+            <img class="h-full w-full rounded-lg object-cover" src="https://shuffle.dev/plain-assets/images/indigo-600-horizontal.png" alt="" />
+          </div>
+          <span class="text-xs font-bold text-indigo-500">10 jun 2022 19:40</span>
+          <h2 class="font-heading mb-2 mt-2 text-3xl font-bold">Lorem ipsum dolor</h2>
+          <p class="mb-4 text-lg leading-loose text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+          <a class="flex items-center text-lg font-bold text-indigo-500 hover:text-indigo-700" href="#">
+            <span>Read more</span>
+            <span>
+              <svg class="ml-1 h-4 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+              </svg>
+            </span>
+          </a>
+        </div>
+        <div class="mb-12 w-full px-4 lg:w-1/3">
+          <div class="mb-6 flex h-96">
+            <img class="h-full w-full rounded-lg object-cover" src="https://shuffle.dev/plain-assets/images/indigo-600-horizontal.png" alt="" />
+          </div>
+          <span class="text-xs font-bold text-indigo-500">10 jun 2022 19:40</span>
+          <h2 class="font-heading mb-2 mt-2 text-3xl font-bold">Lorem ipsum dolor</h2>
+          <p class="mb-4 text-lg leading-loose text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+          <a class="flex items-center text-lg font-bold text-indigo-500 hover:text-indigo-700" href="#">
+            <span>Read more</span>
+            <span>
+              <svg class="ml-1 h-4 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+              </svg>
+            </span>
+          </a>
+        </div>
+      </div>
+    </div>
+  </section>
+  
\ No newline at end of file
diff --git a/components/blog/blogshu2.html b/components/blog/blogshu2.html
new file mode 100644
index 0000000..1065b15
--- /dev/null
+++ b/components/blog/blogshu2.html
@@ -0,0 +1,90 @@
+<section class="py-20">
+    <div class="container mx-auto px-4">
+      <div class="mx-auto mb-16 max-w-lg text-center lg:max-w-2xl">
+        <span class="text-xs font-semibold uppercase text-indigo-500">Lorem ipsum</span>
+        <h2 class="font-heading mb-4 mt-2 text-3xl font-bold leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
+        <p class="text-base leading-relaxed text-gray-500 lg:text-xl lg:leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
+      </div>
+      <div class="-mx-4 -mb-12 flex flex-wrap lg:-mb-16">
+        <div class="mb-12 w-full px-4 md:w-1/2 lg:mb-16 lg:w-1/3">
+          <span class="text-xs font-bold text-indigo-500">10 jun 2022 19:40</span>
+          <h2 class="font-heading mb-2 mt-2 text-3xl font-bold">Lorem ipsum dolor sit</h2>
+          <p class="mb-4 text-lg leading-loose text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
+          <a class="flex items-center text-lg font-bold text-indigo-500 hover:text-indigo-700" href="#">
+            <span>Read more</span>
+            <span>
+              <svg class="ml-1 h-4 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+              </svg>
+            </span>
+          </a>
+        </div>
+        <div class="mb-12 w-full px-4 md:w-1/2 lg:mb-16 lg:w-1/3">
+          <span class="text-xs font-bold text-indigo-500">10 jun 2022 19:40</span>
+          <h2 class="font-heading mb-2 mt-2 text-3xl font-bold">Lorem ipsum dolor sit</h2>
+          <p class="mb-4 text-lg leading-loose text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
+          <a class="flex items-center text-lg font-bold text-indigo-500 hover:text-indigo-700" href="#">
+            <span>Read more</span>
+            <span>
+              <svg class="ml-1 h-4 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+              </svg>
+            </span>
+          </a>
+        </div>
+        <div class="mb-12 w-full px-4 md:w-1/2 lg:mb-16 lg:w-1/3">
+          <span class="text-xs font-bold text-indigo-500">10 jun 2022 19:40</span>
+          <h2 class="font-heading mb-2 mt-2 text-3xl font-bold">Lorem ipsum dolor sit</h2>
+          <p class="mb-4 text-lg leading-loose text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
+          <a class="flex items-center text-lg font-bold text-indigo-500 hover:text-indigo-700" href="#">
+            <span>Read more</span>
+            <span>
+              <svg class="ml-1 h-4 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+              </svg>
+            </span>
+          </a>
+        </div>
+        <div class="mb-12 w-full px-4 md:w-1/2 lg:mb-16 lg:w-1/3">
+          <span class="text-xs font-bold text-indigo-500">10 jun 2022 19:40</span>
+          <h2 class="font-heading mb-2 mt-2 text-3xl font-bold">Lorem ipsum dolor sit</h2>
+          <p class="mb-4 text-lg leading-loose text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
+          <a class="flex items-center text-lg font-bold text-indigo-500 hover:text-indigo-700" href="#">
+            <span>Read more</span>
+            <span>
+              <svg class="ml-1 h-4 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+              </svg>
+            </span>
+          </a>
+        </div>
+        <div class="mb-12 w-full px-4 md:w-1/2 lg:mb-16 lg:w-1/3">
+          <span class="text-xs font-bold text-indigo-500">10 jun 2022 19:40</span>
+          <h2 class="font-heading mb-2 mt-2 text-3xl font-bold">Lorem ipsum dolor sit</h2>
+          <p class="mb-4 text-lg leading-loose text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
+          <a class="flex items-center text-lg font-bold text-indigo-500 hover:text-indigo-700" href="#">
+            <span>Read more</span>
+            <span>
+              <svg class="ml-1 h-4 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+              </svg>
+            </span>
+          </a>
+        </div>
+        <div class="mb-12 w-full px-4 md:w-1/2 lg:mb-16 lg:w-1/3">
+          <span class="text-xs font-bold text-indigo-500">10 jun 2022 19:40</span>
+          <h2 class="font-heading mb-2 mt-2 text-3xl font-bold">Lorem ipsum dolor sit</h2>
+          <p class="mb-4 text-lg leading-loose text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
+          <a class="flex items-center text-lg font-bold text-indigo-500 hover:text-indigo-700" href="#">
+            <span>Read more</span>
+            <span>
+              <svg class="ml-1 h-4 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+              </svg>
+            </span>
+          </a>
+        </div>
+      </div>
+    </div>
+  </section>
+  
\ No newline at end of file
diff --git a/components/blog/blogshu3.html b/components/blog/blogshu3.html
new file mode 100644
index 0000000..aedfdf1
--- /dev/null
+++ b/components/blog/blogshu3.html
@@ -0,0 +1,144 @@
+<section class="py-20">
+    <div class="container mx-auto px-4">
+      <div class="mx-auto mb-16 max-w-lg text-center lg:max-w-2xl">
+        <span class="text-xs font-semibold uppercase text-indigo-500">Lorem ipsum</span>
+        <h2 class="font-heading mb-4 mt-2 text-3xl font-bold leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
+        <p class="text-base leading-relaxed text-gray-500 lg:text-xl lg:leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
+      </div>
+      <div class="-mx-4 flex flex-wrap">
+        <div class="mb-12 w-full px-4 md:w-1/2 lg:mb-16">
+          <div class="-mx-4 flex flex-wrap">
+            <div class="mb-6 w-full px-4 lg:mb-0 lg:w-1/3">
+              <div class="h-80 lg:h-40">
+                <img class="h-full w-full rounded-lg object-cover" src="https://shuffle.dev/plain-assets/images/indigo-600-square.png" alt="" />
+              </div>
+            </div>
+            <div class="w-full px-4 lg:w-2/3">
+              <span class="text-xs font-bold text-indigo-500">10 jun 2022 19:40</span>
+              <h2 class="font-heading mb-2 mt-2 text-3xl font-bold">Lorem ipsum dolor sit</h2>
+              <p class="mb-4 text-lg leading-loose text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
+              <a class="flex items-center text-lg font-bold text-indigo-500 hover:text-indigo-700" href="#">
+                <span>Read more</span>
+                <span>
+                  <svg class="ml-1 h-4 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                  </svg>
+                </span>
+              </a>
+            </div>
+          </div>
+        </div>
+        <div class="mb-12 w-full px-4 md:w-1/2 lg:mb-16">
+          <div class="-mx-4 flex flex-wrap">
+            <div class="mb-6 w-full px-4 lg:mb-0 lg:w-1/3">
+              <div class="h-80 lg:h-40">
+                <img class="h-full w-full rounded-lg object-cover" src="https://shuffle.dev/plain-assets/images/indigo-600-square.png" alt="" />
+              </div>
+            </div>
+            <div class="w-full px-4 lg:w-2/3">
+              <span class="text-xs font-bold text-indigo-500">10 jun 2022 19:40</span>
+              <h2 class="font-heading mb-2 mt-2 text-3xl font-bold">Lorem ipsum dolor sit</h2>
+              <p class="mb-4 text-lg leading-loose text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
+              <a class="flex items-center text-lg font-bold text-indigo-500 hover:text-indigo-700" href="#">
+                <span>Read more</span>
+                <span>
+                  <svg class="ml-1 h-4 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                  </svg>
+                </span>
+              </a>
+            </div>
+          </div>
+        </div>
+        <div class="mb-12 w-full px-4 md:w-1/2 lg:mb-16">
+          <div class="-mx-4 flex flex-wrap">
+            <div class="mb-6 w-full px-4 lg:mb-0 lg:w-1/3">
+              <div class="h-80 lg:h-40">
+                <img class="h-full w-full rounded-lg object-cover" src="https://shuffle.dev/plain-assets/images/indigo-600-square.png" alt="" />
+              </div>
+            </div>
+            <div class="w-full px-4 lg:w-2/3">
+              <span class="text-xs font-bold text-indigo-500">10 jun 2022 19:40</span>
+              <h2 class="font-heading mb-2 mt-2 text-3xl font-bold">Lorem ipsum dolor sit</h2>
+              <p class="mb-4 text-lg leading-loose text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
+              <a class="flex items-center text-lg font-bold text-indigo-500 hover:text-indigo-700" href="#">
+                <span>Read more</span>
+                <span>
+                  <svg class="ml-1 h-4 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                  </svg>
+                </span>
+              </a>
+            </div>
+          </div>
+        </div>
+        <div class="mb-12 w-full px-4 md:w-1/2 lg:mb-16">
+          <div class="-mx-4 flex flex-wrap">
+            <div class="mb-6 w-full px-4 lg:mb-0 lg:w-1/3">
+              <div class="h-80 lg:h-40">
+                <img class="h-full w-full rounded-lg object-cover" src="https://shuffle.dev/plain-assets/images/indigo-600-square.png" alt="" />
+              </div>
+            </div>
+            <div class="w-full px-4 lg:w-2/3">
+              <span class="text-xs font-bold text-indigo-500">10 jun 2022 19:40</span>
+              <h2 class="font-heading mb-2 mt-2 text-3xl font-bold">Lorem ipsum dolor sit</h2>
+              <p class="mb-4 text-lg leading-loose text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
+              <a class="flex items-center text-lg font-bold text-indigo-500 hover:text-indigo-700" href="#">
+                <span>Read more</span>
+                <span>
+                  <svg class="ml-1 h-4 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                  </svg>
+                </span>
+              </a>
+            </div>
+          </div>
+        </div>
+        <div class="mb-12 w-full px-4 md:w-1/2 lg:mb-16">
+          <div class="-mx-4 flex flex-wrap">
+            <div class="mb-6 w-full px-4 lg:mb-0 lg:w-1/3">
+              <div class="h-80 lg:h-40">
+                <img class="h-full w-full rounded-lg object-cover" src="https://shuffle.dev/plain-assets/images/indigo-600-square.png" alt="" />
+              </div>
+            </div>
+            <div class="w-full px-4 lg:w-2/3">
+              <span class="text-xs font-bold text-indigo-500">10 jun 2022 19:40</span>
+              <h2 class="font-heading mb-2 mt-2 text-3xl font-bold">Lorem ipsum dolor sit</h2>
+              <p class="mb-4 text-lg leading-loose text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
+              <a class="flex items-center text-lg font-bold text-indigo-500 hover:text-indigo-700" href="#">
+                <span>Read more</span>
+                <span>
+                  <svg class="ml-1 h-4 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                  </svg>
+                </span>
+              </a>
+            </div>
+          </div>
+        </div>
+        <div class="mb-12 w-full px-4 md:w-1/2 lg:mb-16">
+          <div class="-mx-4 flex flex-wrap">
+            <div class="mb-6 w-full px-4 lg:mb-0 lg:w-1/3">
+              <div class="h-80 lg:h-40">
+                <img class="h-full w-full rounded-lg object-cover" src="https://shuffle.dev/plain-assets/images/indigo-600-square.png" alt="" />
+              </div>
+            </div>
+            <div class="w-full px-4 lg:w-2/3">
+              <span class="text-xs font-bold text-indigo-500">10 jun 2022 19:40</span>
+              <h2 class="font-heading mb-2 mt-2 text-3xl font-bold">Lorem ipsum dolor sit</h2>
+              <p class="mb-4 text-lg leading-loose text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
+              <a class="flex items-center text-lg font-bold text-indigo-500 hover:text-indigo-700" href="#">
+                <span>Read more</span>
+                <span>
+                  <svg class="ml-1 h-4 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                  </svg>
+                </span>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  
\ No newline at end of file
diff --git a/components/blog/blohshu4.html b/components/blog/blohshu4.html
new file mode 100644
index 0000000..b9fb45b
--- /dev/null
+++ b/components/blog/blohshu4.html
@@ -0,0 +1,71 @@
+<section class="py-20">
+    <div class="container mx-auto px-4">
+      <div class="mb-16 max-w-lg lg:max-w-3xl">
+        <span class="text-xs font-semibold uppercase text-indigo-500">Lorem ipsum</span>
+        <h2 class="font-heading mb-4 mt-2 text-3xl font-bold leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
+        <p class="text-base leading-relaxed text-gray-500 lg:text-xl lg:leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
+      </div>
+      <div class="-mx-4 mb-12 flex flex-wrap items-center lg:mb-20">
+        <div class="w-full px-4 lg:w-2/5">
+          <div class="text-left lg:max-w-md">
+            <span class="inline-block rounded bg-indigo-50 px-2 py-1 text-xs font-semibold uppercase text-indigo-500">Development</span>
+            <h2 class="font-heading mb-4 mt-2 text-3xl font-bold">Lorem ipsum dolor sit amet consectutar</h2>
+            <span class="mb-4 inline-block text-xs font-bold text-gray-500">10 jun 2022 19:40</span>
+            <p class="text-lg leading-loose text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
+          </div>
+        </div>
+        <div class="order-first mb-8 w-full px-4 lg:order-last lg:mb-0 lg:w-3/5">
+          <div class="h-96">
+            <img class="h-full w-full rounded-lg object-cover" src="https://shuffle.dev/plain-assets/images/indigo-600-horizontal.png" alt="" />
+          </div>
+        </div>
+      </div>
+      <div class="-mx-4 mb-12 flex flex-wrap items-center lg:mb-20">
+        <div class="mb-8 w-full px-4 lg:mb-0 lg:w-3/5">
+          <div class="h-96">
+            <img class="h-full w-full rounded-lg object-cover" src="https://shuffle.dev/plain-assets/images/indigo-600-horizontal.png" alt="" />
+          </div>
+        </div>
+        <div class="w-full px-4 lg:w-2/5">
+          <div class="text-left lg:ml-auto lg:max-w-md">
+            <span class="inline-block rounded bg-indigo-50 px-2 py-1 text-xs font-semibold uppercase text-indigo-500">Development</span>
+            <h2 class="font-heading mb-4 mt-2 text-3xl font-bold">Lorem ipsum dolor sit amet consectutar</h2>
+            <span class="mb-4 inline-block text-xs font-bold text-gray-500">10 jun 2022 19:40</span>
+            <p class="text-lg leading-loose text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
+          </div>
+        </div>
+      </div>
+      <div class="-mx-4 mb-12 flex flex-wrap items-center lg:mb-20">
+        <div class="w-full px-4 lg:w-2/5">
+          <div class="text-left lg:max-w-md">
+            <span class="inline-block rounded bg-indigo-50 px-2 py-1 text-xs font-semibold uppercase text-indigo-500">Development</span>
+            <h2 class="font-heading mb-4 mt-2 text-3xl font-bold">Lorem ipsum dolor sit amet consectutar</h2>
+            <span class="mb-4 inline-block text-xs font-bold text-gray-500">10 jun 2022 19:40</span>
+            <p class="text-lg leading-loose text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
+          </div>
+        </div>
+        <div class="order-first mb-8 w-full px-4 lg:order-last lg:mb-0 lg:w-3/5">
+          <div class="h-96">
+            <img class="h-full w-full rounded-lg object-cover" src="https://shuffle.dev/plain-assets/images/indigo-600-horizontal.png" alt="" />
+          </div>
+        </div>
+      </div>
+      <div class="-mx-4 mb-20 flex flex-wrap items-center">
+        <div class="mb-8 w-full px-4 lg:mb-0 lg:w-3/5">
+          <div class="h-96">
+            <img class="h-full w-full rounded-lg object-cover" src="https://shuffle.dev/plain-assets/images/indigo-600-horizontal.png" alt="" />
+          </div>
+        </div>
+        <div class="w-full px-4 lg:w-2/5">
+          <div class="text-left lg:ml-auto lg:max-w-md">
+            <span class="inline-block rounded bg-indigo-50 px-2 py-1 text-xs font-semibold uppercase text-indigo-500">Development</span>
+            <h2 class="font-heading mb-4 mt-2 text-3xl font-bold">Lorem ipsum dolor sit amet consectutar</h2>
+            <span class="mb-4 inline-block text-xs font-bold text-gray-500">10 jun 2022 19:40</span>
+            <p class="text-lg leading-loose text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
+          </div>
+        </div>
+      </div>
+      <div class="text-center"><a class="rounded border border-indigo-500 bg-indigo-500 px-5 py-3 text-sm font-semibold text-white transition duration-200 hover:border-indigo-600 hover:bg-indigo-600 md:mr-3" href="#">View More Articles</a></div>
+    </div>
+  </section>
+  
\ No newline at end of file
diff --git a/components/blog/bloshu5.html b/components/blog/bloshu5.html
new file mode 100644
index 0000000..cd909f8
--- /dev/null
+++ b/components/blog/bloshu5.html
@@ -0,0 +1,127 @@
+<section class="py-20">
+    <div class="container mx-auto px-4">
+      <div class="mx-auto mb-16 max-w-xl text-center lg:max-w-2xl">
+        <span class="text-xs font-semibold uppercase text-indigo-500">Lorem ipsum</span>
+        <h2 class="font-heading mb-4 mt-2 text-3xl font-bold leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
+        <p class="text-base leading-relaxed text-gray-500 lg:text-xl lg:leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
+      </div>
+      <div class="-mx-4 mb-12 flex flex-wrap">
+        <div class="mb-8 w-full px-4 md:w-1/2 lg:w-1/3">
+          <div class="rounded-lg bg-gray-50 p-6">
+            <div class="relative mb-6 h-40">
+              <span class="absolute right-0 top-0 mr-4 mt-4 inline-block rounded bg-indigo-50 px-2 py-1 text-xs font-semibold uppercase text-indigo-500">Development</span>
+              <img class="h-full w-full rounded-lg object-cover" src="https://shuffle.dev/plain-assets/images/indigo-600-horizontal.png" alt="" />
+            </div>
+            <span class="inline-block text-xs font-bold text-indigo-500">10 jun 2022 19:40</span>
+            <h2 class="font-heading mb-2 text-2xl font-bold">Lorem ipsum dolor sit amet consectutar</h2>
+            <p class="mb-4 text-lg leading-loose text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
+            <a class="flex items-center text-lg font-bold text-indigo-500 hover:text-indigo-700" href="#">
+              <span>Read more</span>
+              <span>
+                <svg class="ml-1 h-4 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                </svg>
+              </span>
+            </a>
+          </div>
+        </div>
+        <div class="mb-8 w-full px-4 md:w-1/2 lg:w-1/3">
+          <div class="rounded-lg bg-gray-50 p-6">
+            <div class="relative mb-6 h-40">
+              <span class="absolute right-0 top-0 mr-4 mt-4 inline-block rounded bg-indigo-50 px-2 py-1 text-xs font-semibold uppercase text-indigo-500">Development</span>
+              <img class="h-full w-full rounded-lg object-cover" src="https://shuffle.dev/plain-assets/images/indigo-600-horizontal.png" alt="" />
+            </div>
+            <span class="inline-block text-xs font-bold text-indigo-500">10 jun 2022 19:40</span>
+            <h2 class="font-heading mb-2 text-2xl font-bold">Lorem ipsum dolor sit amet consectutar</h2>
+            <p class="mb-4 text-lg leading-loose text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
+            <a class="flex items-center text-lg font-bold text-indigo-500 hover:text-indigo-700" href="#">
+              <span>Read more</span>
+              <span>
+                <svg class="ml-1 h-4 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                </svg>
+              </span>
+            </a>
+          </div>
+        </div>
+        <div class="mb-8 w-full px-4 md:w-1/2 lg:w-1/3">
+          <div class="rounded-lg bg-gray-50 p-6">
+            <div class="relative mb-6 h-40">
+              <span class="absolute right-0 top-0 mr-4 mt-4 inline-block rounded bg-indigo-50 px-2 py-1 text-xs font-semibold uppercase text-indigo-500">Development</span>
+              <img class="h-full w-full rounded-lg object-cover" src="https://shuffle.dev/plain-assets/images/indigo-600-horizontal.png" alt="" />
+            </div>
+            <span class="inline-block text-xs font-bold text-indigo-500">10 jun 2022 19:40</span>
+            <h2 class="font-heading mb-2 text-2xl font-bold">Lorem ipsum dolor sit amet consectutar</h2>
+            <p class="mb-4 text-lg leading-loose text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
+            <a class="flex items-center text-lg font-bold text-indigo-500 hover:text-indigo-700" href="#">
+              <span>Read more</span>
+              <span>
+                <svg class="ml-1 h-4 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                </svg>
+              </span>
+            </a>
+          </div>
+        </div>
+        <div class="mb-8 w-full px-4 md:w-1/2 lg:w-1/3">
+          <div class="rounded-lg bg-gray-50 p-6">
+            <div class="relative mb-6 h-40">
+              <span class="absolute right-0 top-0 mr-4 mt-4 inline-block rounded bg-indigo-50 px-2 py-1 text-xs font-semibold uppercase text-indigo-500">Development</span>
+              <img class="h-full w-full rounded-lg object-cover" src="https://shuffle.dev/plain-assets/images/indigo-600-horizontal.png" alt="" />
+            </div>
+            <span class="inline-block text-xs font-bold text-indigo-500">10 jun 2022 19:40</span>
+            <h2 class="font-heading mb-2 text-2xl font-bold">Lorem ipsum dolor sit amet consectutar</h2>
+            <p class="mb-4 text-lg leading-loose text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
+            <a class="flex items-center text-lg font-bold text-indigo-500 hover:text-indigo-700" href="#">
+              <span>Read more</span>
+              <span>
+                <svg class="ml-1 h-4 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                </svg>
+              </span>
+            </a>
+          </div>
+        </div>
+        <div class="mb-8 w-full px-4 md:w-1/2 lg:w-1/3">
+          <div class="rounded-lg bg-gray-50 p-6">
+            <div class="relative mb-6 h-40">
+              <span class="absolute right-0 top-0 mr-4 mt-4 inline-block rounded bg-indigo-50 px-2 py-1 text-xs font-semibold uppercase text-indigo-500">Development</span>
+              <img class="h-full w-full rounded-lg object-cover" src="https://shuffle.dev/plain-assets/images/indigo-600-horizontal.png" alt="" />
+            </div>
+            <span class="inline-block text-xs font-bold text-indigo-500">10 jun 2022 19:40</span>
+            <h2 class="font-heading mb-2 text-2xl font-bold">Lorem ipsum dolor sit amet consectutar</h2>
+            <p class="mb-4 text-lg leading-loose text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
+            <a class="flex items-center text-lg font-bold text-indigo-500 hover:text-indigo-700" href="#">
+              <span>Read more</span>
+              <span>
+                <svg class="ml-1 h-4 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                </svg>
+              </span>
+            </a>
+          </div>
+        </div>
+        <div class="mb-8 w-full px-4 md:w-1/2 lg:w-1/3">
+          <div class="rounded-lg bg-gray-50 p-6">
+            <div class="relative mb-6 h-40">
+              <span class="absolute right-0 top-0 mr-4 mt-4 inline-block rounded bg-indigo-50 px-2 py-1 text-xs font-semibold uppercase text-indigo-500">Development</span>
+              <img class="h-full w-full rounded-lg object-cover" src="https://shuffle.dev/plain-assets/images/indigo-600-horizontal.png" alt="" />
+            </div>
+            <span class="inline-block text-xs font-bold text-indigo-500">10 jun 2022 19:40</span>
+            <h2 class="font-heading mb-2 text-2xl font-bold">Lorem ipsum dolor sit amet consectutar</h2>
+            <p class="mb-4 text-lg leading-loose text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
+            <a class="flex items-center text-lg font-bold text-indigo-500 hover:text-indigo-700" href="#">
+              <span>Read more</span>
+              <span>
+                <svg class="ml-1 h-4 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                </svg>
+              </span>
+            </a>
+          </div>
+        </div>
+      </div>
+      <div class="text-center"><a class="rounded border border-indigo-500 bg-indigo-500 px-5 py-3 text-sm font-semibold text-white transition duration-200 hover:border-indigo-600 hover:bg-indigo-600" href="#">View More Articles</a></div>
+    </div>
+  </section>
+  
\ No newline at end of file