the home oke

shipsaas · Apr 21, 2024 · f8a3c98 · f8a3c98
1 parent 9569534
commit f8a3c98
Show file tree

Hide file tree

Showing 12 changed files with 178 additions and 43 deletions.
diff --git a/index.html b/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>ShipSaaS</title>
+    <title>ShipSaaS Integration System LLC</title>
     <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
-    <meta property="og:title" content="ShipSaaS">
+    <meta property="og:title" content="ShipSaaS Integration LLC">
     <meta property="og:description" content="ShipSaaS focuses on delivering exceptional helpers and libraries to assist you in building and enhancing your next SaaS products. Specializing in PHP & Laravel">
     <meta property="og:image" content="https://iili.io/HrZ8hdJ.jpg">
     <meta property="og:type" content="website">

diff --git a/src/assets/images/new-repo.png b/src/assets/images/new-repo.png
diff --git a/src/components/Layout/AppFooter.vue b/src/components/Layout/AppFooter.vue
@@ -26,7 +26,7 @@
         </a>
       </div>
       <p class="mt-10 text-center text-xs leading-5 text-gray-500">
-        &copy; 2023 ShipSaaS OSS Organization. All rights reserved.
+        &copy; 2024 ShipSaas Integration System LLC. All rights reserved.
       </p>
     </div>
   </footer>

diff --git a/src/libraries/pageTitle.ts b/src/libraries/pageTitle.ts
@@ -1,4 +1,4 @@
-const SITE_NAME = 'ShipSaaS';
+const SITE_NAME = 'ShipSaaS Integration System LLC';
 
 export const setPageTitle = (title: string | null) => {
   if (!title) {

diff --git a/src/pages/HomePage/IndexPage.vue b/src/pages/HomePage/IndexPage.vue
@@ -1,8 +1,11 @@
 <template>
   <HeroBanner />
+  <TrustedByPeople />
   <OurWorks />
+  <ProjectsEcosystem />
   <FounderSharing />
   <OurTeam />
+  <ContactSection />
 </template>
 
 <script setup>
@@ -11,6 +14,9 @@ import OurWorks from '@/pages/HomePage/components/OurWorks.vue';
 import HeroBanner from '@/pages/HomePage/components/HeroBanner.vue';
 import FounderSharing from '@/pages/HomePage/components/FounderSharing.vue';
 import { setPageTitle } from '@/libraries/pageTitle';
+import TrustedByPeople from "@/pages/HomePage/components/TrustedByPeople.vue";
+import ProjectsEcosystem from "@/pages/HomePage/components/ProjectsEcosystem.vue";
+import ContactSection from "@/pages/HomePage/components/ContactSection.vue";
 
 setPageTitle('Home');
 </script>
diff --git a/src/pages/HomePage/components/ContactSection.vue b/src/pages/HomePage/components/ContactSection.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="bg-gray-100 py-24 sm:py-32">
+    <div class="mx-auto max-w-7xl px-6 lg:px-8">
+      <div class="mx-auto max-w-2xl space-y-16 divide-y divide-gray-100 lg:mx-0 lg:max-w-none">
+        <div class="grid grid-cols-1 gap-x-8 gap-y-10 lg:grid-cols-3">
+          <div>
+            <h2 class="text-3xl font-bold tracking-tight text-gray-900">Get in touch</h2>
+            <p class="mt-4 leading-7 text-gray-600">
+              Ping ShipSaaS anytime via email. Always happy to help.
+            </p>
+          </div>
+          <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:col-span-2 lg:gap-8">
+            <div class="rounded-2xl bg-gray-50 p-10">
+              <h3 class="text-base font-semibold leading-7 text-gray-900">
+                Custom Projects
+              </h3>
+              <dl class="mt-3 space-y-1 text-sm leading-6 text-gray-600">
+                <div>
+                  <dt class="sr-only">Email</dt>
+                  <dd><a class="font-semibold text-emerald-600" href="mailto:[email protected]">[email protected]</a></dd>
+                </div>
+              </dl>
+            </div>
+            <div class="rounded-2xl bg-gray-50 p-10">
+              <h3 class="text-base font-semibold leading-7 text-gray-900">Join our team</h3>
+              <dl class="mt-3 space-y-1 text-sm leading-6 text-gray-600">
+                <div>
+                  <dt class="sr-only">Email</dt>
+                  <dd><a class="font-semibold text-emerald-600" href="mailto:[email protected]">[email protected]</a></dd>
+                </div>
+              </dl>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/pages/HomePage/components/FounderSharing.vue b/src/pages/HomePage/components/FounderSharing.vue
@@ -18,13 +18,16 @@
             <br />
             <br />
             Now, I'm happily contributing some
-            of my honest work from the real life experience & give back to the the OSS community & world.
+            of my honest work crafted based on real life experience & give back to the OSS community & world.
 
             <br />
             <br />
 
-            I hope ShipSaaS can become everyone's helpful and reliable
-            companion. ”
+            I believe ShipSaaS will become everyone's helpful, and reliable
+            companion.
+            <br />
+            <br />
+            Scale up faster with ShipSaaS”
           </p>
         </blockquote>
         <figcaption class="mt-10">
@@ -46,10 +49,12 @@
             >
               <circle cx="1" cy="1" r="1" />
             </svg>
-            <div class="text-gray-600">Founder & Leader of ShipSaaS</div>
+            <div class="text-gray-600">Founder of ShipSaaS</div>
           </div>
         </figcaption>
       </figure>
     </div>
   </section>
 </template>
+<script setup lang="ts">
+</script>
diff --git a/src/pages/HomePage/components/HeroBanner.vue b/src/pages/HomePage/components/HeroBanner.vue
@@ -40,27 +40,40 @@
           Build Products with 100% Confidence
         </h1>
         <p class="mt-6 text-lg leading-8 text-gray-600">
-          <strong>ShipSaaS</strong> focuses on delivering exceptional helpers
-          and libraries to assist you in building and enhancing your next SaaS
+          <strong>ShipSaaS</strong> focuses on delivering exceptional helpers,
+          processes and libraries to assist you in building and enhancing your next SaaS
           products.
+
           <br />
-          Specializing in PHP & Laravel
+          <br />
+          We are specializing in <strong class="text-emerald-500">PHP 8+ & Laravel 10+</strong>
         </p>
+
+        <ul class="list-disc text-lg text-gray-600 leading-8 ml-4 my-4">
+          <li>Deliver faster ✅</li>
+          <li>Scale better ✅</li>
+          <li>Life easier ✅</li>
+        </ul>
+
         <div class="mt-10 flex items-center gap-x-6">
           <router-link
             :to="{
               name: 'project-page',
             }"
-            class="rounded-md bg-emerald-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-emerald-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-600"
+            class="rounded-md flex gap-2 items-center bg-emerald-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-emerald-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-600"
           >
-            Check out our work 🚀
+            Check out our work
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M15.59 14.37a6 6 0 0 1-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 0 0 6.16-12.12A14.98 14.98 0 0 0 9.631 8.41m5.96 5.96a14.926 14.926 0 0 1-5.841 2.58m-.119-8.54a6 6 0 0 0-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 0 0-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 0 1-2.448-2.448 14.9 14.9 0 0 1 .06-.312m-2.24 2.39a4.493 4.493 0 0 0-1.757 4.306 4.493 4.493 0 0 0 4.306-1.758M16.5 9a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z" />
+            </svg>
           </router-link>
           <a
             href="https://github.com/shipsaas"
             target="_blank"
-            class="text-sm font-semibold leading-6 text-gray-900"
+            class="text-sm font-semibold leading-6 text-gray-900 flex gap-2 items-center"
           >
             Our GitHub
+            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33c.85 0 1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"/></svg>
             <span aria-hidden="true">→</span>
           </a>
         </div>
@@ -73,13 +86,17 @@
             class="-m-2 rounded-xl bg-gray-900/5 p-2 ring-1 ring-inset ring-gray-900/10 lg:-m-4 lg:rounded-2xl lg:p-4"
           >
             <img
-              src="@/assets/images/big-screen.png"
+              src="@/assets/images/new-repo.png"
               alt="ShipSaaS's Repositories"
-              class="w-[76rem] rounded-md shadow-2xl ring-1 ring-gray-900/10"
+              class="w-[76rem] rounded-md shadow-2xl ring-1 ring-gray-900/10 h-[800px] object-cover object-top"
+              width="1216px"
+              height="800px"
             />
           </div>
         </div>
       </div>
     </div>
   </div>
 </template>
+<script setup lang="ts">
+</script>
diff --git a/src/pages/HomePage/components/OurTeam.vue b/src/pages/HomePage/components/OurTeam.vue
@@ -1,20 +1,22 @@
 <template>
-  <div class="bg-white py-24 md:py-32">
+  <div class="bg-emerald-50/80 py-24 md:py-32">
     <div
       class="mx-auto grid max-w-7xl grid-cols-1 gap-x-8 gap-y-20 px-6 lg:px-8 xl:grid-cols-5"
     >
       <div class="max-w-2xl xl:col-span-2">
         <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
-          About the team
+          About ShipSaaS
         </h2>
         <p class="mt-6 text-lg leading-8 text-gray-600">
-          We’re a dynamic group of individuals who are passionate about what we
-          do and dedicated to develop AWESOME things and contribute them to the
-          big Open Source Software world.
+          I (hopefully changing to "we" soon) love to build things that make people life easier, helps systems way more scalable, reliable and maintainable.
 
           <br />
           <br />
-          You could be the next one to join us 😉
+          Making engineers & managers sleep peacefully at night too.
+
+          <br />
+          <br />
+          Things are solo at the moment but I believe you could be the next one to join me 😉
         </p>
       </div>
       <ul
@@ -50,7 +52,7 @@
                 >
                   <span class="sr-only">Twitter</span>
                   <svg
-                    class="h-5 w-5"
+                    class="h-6 w-6"
                     aria-hidden="true"
                     fill="currentColor"
                     viewBox="0 0 20 20"
@@ -69,7 +71,7 @@
                 >
                   <span class="sr-only">LinkedIn</span>
                   <svg
-                    class="h-5 w-5"
+                    class="h-6 w-6"
                     aria-hidden="true"
                     fill="currentColor"
                     viewBox="0 0 20 20"
@@ -90,7 +92,7 @@
                 >
                   <span class="sr-only">GitHub</span>
                   <svg
-                    class="h-5 w-5"
+                    class="h-6 w-6"
                     aria-hidden="true"
                     fill="currentColor"
                     viewBox="0 0 24 24"
@@ -125,10 +127,10 @@ type PersonInfo = {
 const people = ref<PersonInfo[]>([
   {
     name: 'Seth Phat',
-    role: 'Founder & Leader of ShipSaaS',
+    role: 'Founder of ShipSaaS',
     imageUrl: 'https://github.com/sethsandaru.png',
     bio: `
-      A Sr. Software Engineer who deeply passionate about Technologies
+      An elevated Sr. Software Engineer & Laravel Core contributor who deeply passionate about Technologies
       and actively contributing to the open-source software community.
       Continually striving to improve and innovate within the ecosystem.
     `,

diff --git a/src/pages/HomePage/components/OurWorks.vue b/src/pages/HomePage/components/OurWorks.vue
@@ -14,16 +14,16 @@
             We've built AWESOME Libraries & Helpers
           </p>
           <p class="mt-6 text-base leading-7 text-gray-600">
-            ShipSaaS is an open-source organization that empowers all types of
+            ShipSaaS proudly empowers all types of
             SaaS products.
             <br />
             <br />
-            We offer packages for PHP & Laravel. Feel free to install them and
+            We ship packages for PHP & Laravel. Feel free to install them and
             enhance your productivity and processes.
             <br />
             <br />
-            Focus on your products and business logic; let us help you
-            concentrate on the Core.
+            Focus on your products and business logic; let us
+            concentrate on the Core for you.
           </p>
         </div>
         <dl
@@ -56,12 +56,12 @@ const features = [
   {
     name: 'PHP & Laravel',
     description:
-      'PHP runs through our veins, with a primary focus on the Laravel framework.',
+      'PHP runs through our veins, with a primary focus on the Laravel framework - biggest framework in the world.',
   },
   {
-    name: 'Fully-tested with high coverage',
+    name: 'Battle-tested with high coverage',
     description:
-      'Unit and Integration testing are essential, aiming for high coverage (90%+).',
+      'Unit and Integration testing are essential in our mindset. We aim for high coverage (90%+).',
   },
   {
     name: 'Highly Reliable',
@@ -76,19 +76,11 @@ const features = [
   {
     name: 'Community-first',
     description:
-      'Our libraries will be used and contributed from the community around the world.',
+      'Our works are being used and contributed from the community around the world.',
   },
   {
     name: 'Actively in Development',
     description: `Our repositories are being checked frequently and ensure it still stays in the "state-of-the-art" state`,
   },
-  {
-    name: 'Everything on GitHub',
-    description: `Yes, that's right. Including this website too. We uploaded everything on the GitHub.`,
-  },
-  {
-    name: 'Free Forever',
-    description: 'Open Source Software - Free forever here in ShipSaaS.',
-  },
 ];
 </script>
diff --git a/src/pages/HomePage/components/ProjectsEcosystem.vue b/src/pages/HomePage/components/ProjectsEcosystem.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="bg-gray-100 py-24 sm:py-32">
+    <div class="mx-auto max-w-7xl px-6 lg:px-8">
+      <div class="mx-auto max-w-2xl lg:max-w-4xl">
+        <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl flex gap-3 items-center">
+          ShipSaaS's Ecosystem
+
+          <svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10" viewBox="0 0 14 14"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M2.63 8.13C.85 10.49.05 12.53.76 13.24c1 1 4.6-1 8-4.44s5.44-7 4.44-8c-.64-.65-2.38 0-4.47 1.41"/><path d="M12.05 4.92A5 5 0 0 1 7.5 12a5.06 5.06 0 0 1-1.95-.39M3.5 10a5 5 0 0 1 7-7"/></g></svg>
+        </h2>
+        <p class="mt-4 text-lg leading-8 text-gray-600">
+          Our in-house services that helps you to develop features faster, scale better and so much more
+
+          <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 inline" viewBox="0 0 36 36"><path fill="#FFCC4D" d="M36 18c0 9.941-8.059 18-18 18c-9.94 0-18-8.059-18-18C0 8.06 8.06 0 18 0c9.941 0 18 8.06 18 18"/><ellipse cx="11.5" cy="16.5" fill="#664500" rx="2.5" ry="3.5"/><path fill="#664500" d="M28.457 17.797c-.06-.135-1.499-3.297-4.457-3.297c-2.957 0-4.397 3.162-4.457 3.297a.503.503 0 0 0 .755.605c.012-.009 1.262-.902 3.702-.902c2.426 0 3.674.881 3.702.901a.498.498 0 0 0 .755-.604M5.999 12.458a1 1 0 0 1-.799-1.6c3.262-4.35 7.616-4.4 7.8-4.4a1 1 0 0 1 .004 2c-.156.002-3.569.086-6.205 3.6a.995.995 0 0 1-.8.4m23.002 2.125a.998.998 0 0 1-.801-.4c-2.592-3.457-6.961-2.627-7.004-2.62a1 1 0 0 1-.393-1.961c.231-.047 5.657-1.072 8.996 3.38a1 1 0 0 1-.798 1.601m-5.747 8.994a.513.513 0 0 0-.597.06c-.01.008-1.013.863-4.657.863c-3.641 0-4.646-.854-4.646-.854a.5.5 0 0 0-.838.475c.01.044 1.144 4.379 5.484 4.379s5.474-4.335 5.485-4.379a.497.497 0 0 0-.231-.544"/></svg>
+        </p>
+        <div class="mt-16 space-y-20 lg:mt-20 lg:space-y-20">
+          <article v-for="post in posts" :key="post.id" class="relative isolate flex flex-col gap-8 lg:flex-row">
+            <div class="relative aspect-[16/9] sm:aspect-[2/1] lg:aspect-square lg:w-64 lg:shrink-0">
+              <img :src="post.imageUrl" :alt="post.imageAlt" class="absolute inset-0 h-full w-full rounded-2xl bg-gray-50 object-cover" />
+              <div class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10" />
+            </div>
+            <div>
+              <div class="flex items-center gap-x-4 text-xs">
+                <a class="relative z-10 rounded-full bg-emerald-200 px-3 py-1.5 font-medium text-gray-800 hover:bg-gray-100">{{ post.category.title }}</a>
+              </div>
+              <div class="group relative max-w-xl">
+                <h3 class="mt-3 text-xl font-semibold leading-6 text-gray-900 group-hover:text-gray-600">
+                  <a :href="post.href" target="_blank">
+                    <span class="absolute inset-0" />
+                    {{ post.title }}
+                  </a>
+                </h3>
+                <p class="mt-5 text-sm leading-6 text-gray-600">{{ post.description }}</p>
+              </div>
+            </div>
+          </article>
+        </div>
+      </div>
+
+      <div class="mt-10 sm:mt-20 flex justify-center gap-2 items-center">
+        <p class="text-base font-medium italic">and more to come, stays tuned!</p>
+        <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8" viewBox="0 0 128 128"><path fill="#FFCA28" d="M105.06 68.86c-7.62 1.78-14.3 6.26-15.32 7.78c-.25.37-.85.05-1.69-.74c.15-17.88.22-46.04-.57-59.9c-.55-9.65-4.14-11.72-7.33-11.96c-5.05-.39-6.93 2.52-7.65 11.57c-1.13 14.27-1.06 29.37-1.68 32.4c0 0-2.15-7.78-10.02-8.93c-8.52-1.24-9.96 9.96-9.96 9.96s-5.11-7.75-13.13-4.69c-6.68 2.55-6.75 11.71-6.75 11.71c-2.94 1.3-6.42-14.55-9.39-30.78c-1.67-9.16-12.97-6.07-13.06 2.51c-.14 12.92 4.91 50.88 5.48 55.01c2.41 17.29 9.35 41.2 39.23 41.2c15.32 0 22.21-2.79 30.74-12.36c6.67-7.49 9.53-16.6 22.16-25.02c9.18-6.12 15.38-4.96 15.37-10.96c0-4.49-5.09-9.45-16.43-6.8"/><path fill="#FFB300" d="M50.32 66.89c.18-.33 2.8-2.15 3.46-1.08c4.45 7.14 13.1 5.91 15.39-1.39c.27-.86 2 13.51-6.73 17c-2.61 1.04-6.12 1.09-7.99-1.01c-1.57-1.76-3.22-1.47-6.74.66c-2.43 1.47-7.3.39-9.25-1.67c-1.95-2.06-3.3-4.36-4.14-7.08c-.26-.83-.33-2.14.62-2.58c.35-.15 9.93 7.26 15.38-2.85"/><path fill="#EDA600" d="M88.09 14.93c-.65-11.8-8.23-10.9-8.23-10.9s4.97 2.4 5.28 11c.3 8.33.76 38.1 1.11 56.56c0 5.26-7.33 5.24-14.74 7.71c-.88.29-1.55-.59-1.19-1.44c1.24-2.92 4.15-8.96 2.21-22.76c-.68-4.86-1.99-8.34-2.96-10.11c-3.43-6.27-10.13-6-10.13-6s4.81 1.17 6.96 6.64c1.46 3.7 5 14.57 1.3 27.54c-.86 3.02-3.03 6.59-8.26 6.14c-1.24-.11-4.44-.88-4.68-3.75c-.17-2.06-.03-4.74-.14-7.19c-.17-3.88-1.54-13.74-2.96-18.31c-.9-2.9-3.98-6.41-10.61-6.5c0 0 2.98.41 5.97 5.88c.66 1.21 1.69 3.88 2.44 7.89c.5 3.68 1.94 14.57.06 18.46c-1.65 3.4-8.57 4.75-11.3 1.45c-4.96-6-6.72-25.22-6.72-25.22s-.62 1.32-.98 3.57c-2.47-2.69-4.83-16.19-8.03-29.92c-.89-3.83-3.33-7.13-8.29-5.72c0 0 4.42.45 5.37 6.26c1.36 8.28 4.1 19.78 5.51 25.81c1.29 5.5 3.12 7.28 5.21 7.82v.08c.18 3.31.62 8.78 1.85 13.02c2.16 7.4 4.06 8.34 5.96 9.49c4.33 2.61 11.86.86 14.21-2.05c1.4 1.69 3.5 2.79 5.92 3.02c.16.02 1.52-.01 2.9-.08c.85-.04 1.27 1 .64 1.57c-2.92 2.67-5.31 6.17-6.92 11.28c-1.21 3.83-1.59 6.8-1.64 8.92c-.02.86 1.18 1.06 1.43.24c.36-1.2.77-2.5 1.18-3.6c1.45-3.9 4.41-15.82 20.61-19.83c3.05-.76 6.85-1.11 9.96-2.67v.07s.23-.14.58-.37c1.03-.59 1.97-1.33 2.76-2.3c.06-.08.11-.18.15-.3c.08-.1.16-.19.24-.29c0 0-1.25-47.13-2.03-61.11m27.51 64.65c-3.35.95-8.37 2.61-12.13 5.12c-8.85 5.9-12.77 11.65-16.25 17.21c-1.73 2.77-3.37 5.38-5.48 7.75c-7.95 8.93-13.84 12.06-28.28 12.42c-3.7.09-8.17 1.29-8.17 1.29c2.44.41 5.08.63 7.92.63c15.32 0 22.21-2.79 30.74-12.36c6.67-7.49 9.53-16.6 22.16-25.02c8.76-5.84 14.79-5.07 15.32-10.2c.02 0-1.08 1.82-5.83 3.16"/></svg>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const posts = [
+  {
+    id: 1,
+    title: 'RenderPDF.io',
+    href: 'https://renderpdf.io',
+    description:
+      'RenderPDF.io is a Render-PDF-as-a-Service that provides developer-friendly APIs to render your HTML content to modern PDFs files in seconds 😎.',
+    imageUrl:
+      'https://renderpdf.io/assets/images/cover.png',
+    imageAlt: 'RenderPDF.io cover',
+    category: { title: 'Handle Documents' },
+  },
+  // More posts...
+]
+</script>