Redesign about page

package.json

@@ -1,6 +1,6 @@
 {
   "name": "astroplate",
-  "version": "5.11.0",
+  "version": "5.12.0",
   "description": "Astro and Tailwindcss boilerplate",
   "author": "zeon.studio",
   "license": "MIT",

src/config/config.json

@@ -35,7 +35,7 @@
 
   "navigation_button": {
     "enable": true,
-    "label": "Get Started",
+    "label": "Github",
     "link": "https://github.com/zeon-studio/astroplate"
   },
 

src/content/about/-index.md

@@ -2,8 +2,18 @@
 title: "Hey, I am John Doe!"
 meta_title: "About"
 description: "this is meta description"
-image: "/images/avatar.png"
+image: "/images/image-placeholder.png"
 draft: false
 ---
 
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis illum nesciunt commodi vel nisi ut alias excepturi ipsum, totam, labore tempora, odit ex iste tempore sed. Fugit voluptatibus perspiciatis assumenda nulla ad nihil, omnis vel, doloremque sit quam autem optio maiores, illum eius facilis et quo consectetur provident dolor similique! Enim voluptatem dicta expedita veritatis repellat dolorum impedit, provident quasi at.
+
+### This is a title
+
+* Lorem ipsum, dolor sit amet
+* Enim voluptatem dicta expedita veritatis
+* Fugit voluptatibus perspiciatis assumenda
+* Enim voluptatem dicta expedita
+* Corporis illum nesciunt commodi vel
+
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis illum nesciunt commodi vel nisi ut alias excepturi ipsum, totam, labore tempora, odit ex iste tempore sed. Fugit voluptatibus perspiciatis assumenda nulla ad nihil, omnis vel, doloremque sit quam autem optio maiores, illum eius facilis et quo consectetur provident dolor similique! Enim voluptatem dicta expedita veritatis repellat dolorum impedit, provident quasi at. Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis illum nesciunt commodi vel nisi ut alias excepturi ipsum, totam, labore tempora, odit ex iste tempore sed. Fugit voluptatibus perspiciatis assumenda nulla ad nihil, omnis vel, doloremque sit quam autem optio maiores, illum eius facilis et quo consectetur provident dolor similique! Enim voluptatem dicta expedita veritatis repellat dolorum impedit, provident quasi at.

src/content/homepage/-index.md

@@ -6,8 +6,8 @@ banner:
   image: "/images/banner.png"
   button:
     enable: true
-    label: "Get Started For Free"
-    link: "https://github.com/zeon-studio/astroplate"
+    label: "Fork Deploy and Edit Online 🚀"
+    link: "https://app.sitepins.com/new/clone?name=Astroplate&repository=https://github.com/zeon-studio/astroplate/"
 
 # Features
 features:

src/content/sections/call-to-action.md

@@ -5,6 +5,6 @@ image: "/images/call-to-action.png"
 description: "Experience the future of web development with Astroplate and Astro. Build lightning-fast static sites with ease and flexibility."
 button:
   enable: true
-  label: "Get Started Now"
-  link: "https://github.com/zeon-studio/astroplate"
+  label: "Fork Deploy and Edit Online 🚀"
+  link: "https://app.sitepins.com/new/clone?name=Astroplate&repository=https://github.com/zeon-studio/astroplate"
 ---

src/layouts/partials/Header.astro

@@ -116,6 +116,10 @@ const { pathname } = Astro.url;
             <a
               class="btn btn-outline-primary btn-sm"
               href={navigation_button.link}
+              target={
+                navigation_button.link.startsWith("http") ? "_blank" : "_self"
+              }
+              rel={navigation_button.link.startsWith("http") ? "noopener" : ""}
             >
               {navigation_button.label}
             </a>
@@ -141,6 +145,10 @@ const { pathname } = Astro.url;
           <a
             class="btn btn-outline-primary btn-sm hidden lg:inline-block"
             href={navigation_button.link}
+            target={
+              navigation_button.link.startsWith("http") ? "_blank" : "_self"
+            }
+            rel={navigation_button.link.startsWith("http") ? "noopener" : ""}
           >
             {navigation_button.label}
           </a>

src/pages/about.astro

@@ -23,14 +23,14 @@ if (aboutIndex.data.draft) {
   <section class="section-sm">
     <div class="container">
       <div class="row justify-center">
-        <div class="text-center md:col-10 lg:col-7">
+        <div class="md:col-10 lg:col-8">
           {
             image && (
               <ImageMod
-                class="mx-auto mb-6 rounded-lg"
+                class="mx-auto mb-6 rounded"
                 src={image}
-                width={200}
-                height={200}
+                width={1200}
+                height={600}
                 alt={title}
                 format="webp"
               />

src/styles/buttons.css

@@ -1,5 +1,5 @@
 .btn {
-  @apply inline-block rounded border border-transparent px-5 py-2 font-semibold capitalize transition;
+  @apply inline-block rounded border border-transparent px-5 py-2 font-semibold transition;
 }
 
 .btn-sm {