style:Added brandbook

src/content/docs/docs/using-logo.mdx

@@ -15,7 +15,9 @@ import { Image } from 'astro:assets';
 import { Icon } from 'astro-icon/components';
 import Modal from '~/components/Modal.astro';
 import crowdinIconLogo from '~/assets/images/crowdin.svg';
+import { LinkButton } from '@astrojs/starlight/components';
 import badgesImage from '~/assets/images/badges.png';
+import brandBook from '~/assets/images/brand-book.png';
 
 <script>{`
     document.addEventListener('DOMContentLoaded', () => {
@@ -309,7 +311,7 @@ Examples of the incorrect use of the logo, not maintaining proportions, using th
 
 Use the badge when you want to show our partnership or let others know that you use Crowdin to localize your own project.
 
-<div class="logo-preview gray badges mb-4 logos-4">
+<div class="logo-preview gray badges mb-8 logos-4">
     <div class="badge-item !mt-0">
         <img class="no-shadow mb-2" src="/assets/badges/[email protected]" alt="Dark badge" />
     </div>
@@ -324,11 +326,25 @@ Use the badge when you want to show our partnership or let others know that you
     </div>
 </div>
 
-<div>
+<div class={'!mb-20'}>
     <p><small class="text-muted">DOWNLOAD</small></p>
     <a href="/assets/badges/localization-at-crowdin–badges.zip">.zip (all badges)</a>
 </div>
 
+<div class={'border p-8 !mt-8 grid grid-cols-8 mb-8 rounded-lg'}>
+  <div class={'relative col-span-3 md:col-span-2'}>
+    <Image class="no-shadow mb-8 absolute -translate-y-2/4 top-2/4" src={brandBook} alt="Crowdin Brand Book" />
+  </div>
+  <div class={'col-span-5 md:col-span-6'}>
+    <div className="flex flex-col">
+      <h3>Brand Guidelines</h3>
+      <p>Explore our guidelines for properly using and applying our brand's visual elements.</p>
+      <LinkButton class={'self-start'} href="/assets/docs/crowdin_brand_guidlines_4q_2024.pdf" variant="primary" iconPlacement="start" icon="document" target="_blank">Download Brandbook</LinkButton>
+    </div>
+  </div>
+</div>
+
+
 <Modal id="dialog" open="Open modal">
     <span slot="header" class="font-bold">Crowdin icon</span>
     <main slot="main">