add media kit

templates/partials/media_hero.html

@@ -1,11 +1,11 @@
 <div class="bg-white py-24 sm:py-32">
   <div class="mx-auto max-w-7xl px-6 lg:px-8">
     <div class="mx-auto max-w-3xl lg:mx-0">
-      <h2 class="text-4xl font-semibold tracking-tight text-pretty text-gray-900 lg:text-5xl">Logo and Brand Assets</h2>
+      <h2 class="text-5xl font-semibold tracking-tight text-pretty text-gray-900 lg:text-6xl">Logo and Brand Assets</h2>
-      <p class="mt-4 text-lg lg:text-xl font-normal text-gray-600">All the assets and brand resources you need to share OurWorld with the world.</p>
+      <p class="mt-6 text-xl font-normal text-gray-600">All the assets and brand resources you need to share OurWorld with the world.</p>
     </div>
-    <div class="mx-auto max-w-2xl lg:mx-0 mt-12">
+    <div class="mx-auto max-w-2xl lg:mx-0 mt-16">
-      <h2 class="text-3xl font-semibold tracking-tight text-pretty text-gray-900 lg:text-4xl">Black Versions (PNG & SVG)</h2>
+      <h2 class="text-4xl font-semibold tracking-tight text-pretty text-gray-900 lg:text-5xl">Black Versions (PNG & SVG)</h2>
     </div>
     <ul role="list" class="mx-auto mt-6 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3">
       <li class="flex flex-col">
@@ -13,7 +13,7 @@
           <img class="h-full w-full object-cover" src="/images/ICON.png" alt="">
         </div>
         <h3 class="mt-6 text-lg lg:text-xl font-semibold tracking-tight text-gray-900">OW_ICON_BLACK</h3>
-        <a href="/images/download/ow_icon_black.zip" download class="text-base text-gray-600 hover:underline">
+        <a href="/images/download/ow_icon_black.zip" download class="text-base text-gray-600 font-semibold hover:underline">
           Download Now
         </a>
       </li>
@@ -22,7 +22,7 @@
           <img class="h-full w-full object-cover" src="/images/VERTICAL.png" alt="">
         </div>
         <h3 class="mt-6 text-lg lg:text-xl font-semibold tracking-tight text-gray-900">OW_LOGO_VERTICAL_BLACK</h3>
-        <a href="/images/download/owh_logo_vertical_black.zip" download class="text-base text-gray-600 hover:underline">
+        <a href="/images/download/owh_logo_vertical_black.zip" download class="text-base text-gray-600 font-semibold  hover:underline">
           Download Now
         </a>
       </li>
@@ -31,13 +31,13 @@
           <img class="h-full w-full object-cover" src="/images/HORIZONTAL.png" alt="">
         </div>
         <h3 class="mt-6 text-lg lg:text-xl font-semibold tracking-tight text-gray-900">OW_LOGO_HORIZONTAL_BLACK</h3>
-        <a href="/images/download/owh_logo_horizontal_black.zip" download class="text-base text-gray-600 hover:underline">
+        <a href="/images/download/owh_logo_horizontal_black.zip" download class="text-base text-gray-600 font-semibold hover:underline">
           Download Now
         </a>
       </li>
     </ul>
 
-    <div class="mx-auto max-w-2xl lg:mx-0 mt-12">
+    <div class="mx-auto max-w-2xl lg:mx-0 mt-16">
       <h2 class="text-3xl font-semibold tracking-tight text-pretty text-gray-900 lg:text-4xl">White Versions (PNG & SVG)</h2>
     </div>
     <ul role="list" class="mx-auto mt-6 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3">
@@ -46,7 +46,7 @@
           <img class="h-full w-full object-cover" src="/images/ICON_W.png" alt="">
         </div>
         <h3 class="mt-6 text-lg lg:text-xl font-semibold tracking-tight text-gray-900">OW_ICON_WHITE</h3>
-        <a href="/images/download/ow_icon_white.zip" download class="text-base text-gray-600 hover:underline">
+        <a href="/images/download/ow_icon_white.zip" download class="text-base text-gray-600 font-semibold hover:underline">
           Download Now
         </a>
       </li>
@@ -55,7 +55,7 @@
           <img class="h-full w-full object-cover" src="/images/VERTICAL_W.png" alt="">
         </div>
         <h3 class="mt-6 text-lg lg:text-xl font-semibold tracking-tight text-gray-900">OW_LOGO_VERTICAL_WHITE</h3>
-        <a href="/images/download/owh_logo_vertical_white.zip" download class="text-base text-gray-600 hover:underline">
+        <a href="/images/download/owh_logo_vertical_white.zip" download class="text-base text-gray-600 font-semibold  hover:underline">
           Download Now
         </a>
       </li>
@@ -64,35 +64,211 @@
           <img class="h-full w-full object-cover" src="/images/HORIZONTAL_W.png" alt="">
         </div>
         <h3 class="mt-6 text-lg lg:text-xl font-semibold tracking-tight text-gray-900">OW_LOGO_HORIZONTAL_WHITE</h3>
-        <a href="/images/download/owh_logo_horizontal_white.zip" download class="text-base text-gray-600 hover:underline">
+        <a href="/images/download/owh_logo_horizontal_white.zip" download class="text-base text-gray-600 font-semibold hover:underline">
           Download Now
         </a>
       </li>
     </ul>
     
-    <div class="mx-auto max-w-2xl lg:mx-0 mt-24">
+    <div class="mx-auto max-w-4xl lg:mx-0 mt-24">
       <h2 class="text-4xl font-semibold tracking-tight text-pretty text-gray-900 lg:text-5xl">Typography</h2>
+      
+      <!-- Primary Font -->
+      <div class="mt-12">
+        <h3 class="lg:text-4xl text-3xl font-semibold tracking-tight text-gray-900">Primary Font: Helvetica <a href="/images/download/helvetica.zip" download class="text-base text-gray-600 hover:underline ml-2">Download Font</a></h3>
+        <p class="mt-4 text-xl font-normal text-gray-600">The primary font used in OurWorld branding is Helvetica. It is a clean and modern sans-serif typeface used primarily for titles and subtitles that enhances readability and conveys a sense of professionalism.</p>
+        <div class="bg-gray-100 rounded-lg p-6 mt-6">
+          <p class="lg:text-4xl text-3xl font-bold text-black" style="font-family: Helvetica, sans-serif;">This is Helvetica Bold for Titles</p>
+        </div>
+        <div class="bg-gray-100 rounded-lg p-6 mt-4">
+          <p class="lg:text-3xl text-2xl font-semibold text-black" style="font-family: Helvetica, sans-serif;">This is Helvetica Medium for Subtitles</p>
+        </div>
+      </div>
+
+      <!-- Secondary Font -->
+      <div class="mt-12">
+        <h3 class="lg:text-4xl text-3xl font-semibold tracking-tight text-gray-900">Secondary Font: Cercodemo <a href="/images/download/cero.zip" download class="text-base text-gray-600 hover:underline ml-2">Download Font</a></h3>
+        <p class="mt-4 text-xl font-normal text-gray-600">The secondary font used in OurWorld branding is Cercodemo. It is a unique and stylish typeface used primarily for body texts and paragraphs that adds a touch of creativity to our designs.</p>
+        <div class="bg-gray-100 rounded-lg p-6 mt-6">
+          <p class="text-lg font-normal text-black">This is Cercodemo Regular for Body Text</p>
+        </div>
+        <div class="bg-gray-100 rounded-lg p-6 mt-4">
+          <p class="text-base font-normal text-black">This is Cercodemo Light for Body Text</p>
+        </div>
+        <div class="bg-gray-100 rounded-lg p-6 mt-4">
+          <p class="text-base font-normal text-black">This is Cercodemo Thin for Caption</p>
+        </div>
+      </div>
+    </div>
+    
+    <div class="mx-auto max-w-4xl lg:mx-0 mt-24">
+      <h2 class="text-4xl font-semibold tracking-tight text-pretty text-gray-900 lg:text-5xl">Color Palette</h2>
+      <p class="mt-4 text-xl font-normal text-gray-600">The OurWorld brand uses a clean, modern color palette that conveys professionalism and innovation.</p>
     </div>
     <div class="mx-auto max-w-4xl lg:mx-0 mt-6">
-      <h3 class="lg:text-4xl text-2xl font-semibold tracking-tight text-gray-900 mt-12">Primary Font: Helvetica <a href="/images/download/helvetica.zip" download class="text-base text-gray-600 hover:underline ml-2">Download Font</a></h3>
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
-      <p class="mt-4 text-lg lg:text-xl font-normal text-gray-600">The primary font used in OurWorld branding is Helvetica. It is a clean and modern sans-serif typeface used primarily for titles and subtitles that enhances readability and conveys a sense of professionalism.</p>
+        <!-- Primary Colors -->
-      <div class="bg-gray-100 rounded-lg p-4 mt-6">
+        <div class="flex flex-col">
-        <p class="mt-4 lg:text-4xl text-3xl font-bold text-black" style="font-family: Helvetica, sans-serif;">This is Helvetica Bold for Titles</p>
+          <div class="h-32 bg-black rounded-t-lg"></div>
+          <div class="bg-white p-6 rounded-b-lg border border-gray-200">
+            <h3 class="text-lg font-semibold">Primary Black</h3>
+            <p class="text-sm text-gray-600">HEX: #00000</p>
+            <p class="text-sm text-gray-600">RGB: 17, 24, 39</p>
+            <p class="text-sm text-gray-600">Class: bg-gray-900</p>
+          </div>
+        </div>
+        
+        <div class="flex flex-col">
+          <div class="h-32 bg-white rounded-t-lg border border-gray-200"></div>
+          <div class="bg-white p-6 rounded-b-lg border border-gray-200">
+            <h3 class="text-lg font-semibold">Primary White</h3>
+            <p class="text-sm text-gray-600">HEX: #FFFFFF</p>
+            <p class="text-sm text-gray-600">RGB: 255, 255, 255</p>
+            <p class="text-sm text-gray-600">Class: bg-white</p>
+          </div>
+        </div>
+        
+        <div class="flex flex-col">
+          <div class="h-32 rounded-t-lg" style="background-color: #4B5563;"></div>
+          <div class="bg-white p-6 rounded-b-lg border border-gray-200">
+            <h3 class="text-lg font-semibold">Primary Gray</h3>
+            <p class="text-sm text-gray-600">HEX: #4B5563</p>
+            <p class="text-sm text-gray-600">RGB: 75, 85, 99</p>
+            <p class="text-sm text-gray-600">Class: text-gray-600</p>
+          </div>
+        </div>
+        
+        <!-- Secondary Colors -->
+        <div class="flex flex-col">
+          <div class="h-32 bg-gray-100 rounded-t-lg"></div>
+          <div class="bg-white p-6 rounded-b-lg border border-gray-200">
+            <h3 class="text-lg font-semibold">Light Gray</h3>
+            <p class="text-sm text-gray-600">HEX: #F3F4F6</p>
+            <p class="text-sm text-gray-600">RGB: 243, 244, 246</p>
+            <p class="text-sm text-gray-600">Class: bg-gray-100</p>
+          </div>
+        </div>
+        
+        <div class="flex flex-col">
+          <div class="h-32 bg-gray-300 rounded-t-lg"></div>
+          <div class="bg-white p-6 rounded-b-lg border border-gray-200">
+            <h3 class="text-lg font-semibold">Medium Gray</h3>
+            <p class="text-sm text-gray-600">HEX: #D1D5DB</p>
+            <p class="text-sm text-gray-600">RGB: 209, 213, 219</p>
+            <p class="text-sm text-gray-600">Class: bg-gray-300</p>
+          </div>
+        </div>
+        
+        <div class="flex flex-col">
+          <div class="h-32 rounded-t-lg" style="background-color: #8B5CF6;"></div>
+          <div class="bg-white p-6 rounded-b-lg border border-gray-200">
+            <h3 class="text-lg font-semibold">Purple</h3>
+            <p class="text-sm text-gray-600">HEX: #8B5CF6</p>
+            <p class="text-sm text-gray-600">RGB: 139, 92, 246</p>
+            <p class="text-sm text-gray-600">Class: bg-purple-500</p>
+          </div>
+        </div>
       </div>
-      <div class="bg-gray-100 rounded-lg p-4 mt-6">
+      <!-- Brand Guidelines -->
-        <p class="mt-4 lg:text-3xl text-2xl font-semibold text-black" style="font-family: Helvetica, sans-serif;">This is Helvetica Medium for Subtitles</p>
+      <div class="mx-auto max-w-4xl lg:mx-0 mt-24">
+        <h2 class="text-4xl font-semibold tracking-tight text-pretty text-gray-900 lg:text-5xl">Brand Guidelines</h2>
+        <p class="mt-4 text-xl font-normal text-gray-600">Essential rules to maintain brand consistency across all platforms and materials.</p>
+      </div>
+      <div class="mx-auto max-w-4xl lg:mx-0 mt-6">
+        <!-- Logo Spacing -->
+        <h3 class="lg:text-3xl text-2xl font-semibold tracking-tight text-gray-900 mt-12">Logo Clear Space</h3>
+        <p class="mt-4 text-xl font-normal text-gray-600">Always maintain minimum clear space around the logo to ensure visibility and impact. The clear space should be at least equal to the height of the 'O' in the logo.</p>
+        
+        <!-- Minimum Size -->
+        <h3 class="lg:text-3xl text-2xl font-semibold tracking-tight text-gray-900 mt-12">Minimum Size</h3>
+        <p class="mt-4 text-xl font-normal text-gray-600">To maintain legibility, do not reproduce the logo smaller than:</p>
+        <ul class="mt-3 text-base font-normal text-gray-600 list-disc list-inside">
+          <li>Print: 0.75 inches (19mm) in height</li>
+          <li>Digital: 30 pixels in height</li>
+        </ul>
+
+        <!-- Logo Usage Examples -->
+        <h3 class="lg:text-3xl text-2xl font-semibold tracking-tight text-gray-900 mt-12">Logo Usage Guidelines</h3>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mt-6">
+          <div class="bg-gray-100 p-6 rounded-lg">
+            <h4 class="text-lg font-semibold text-green-600 mb-4">Do's</h4>
+            <ul class="list-disc text-base list-inside text-gray-600">
+              <li>Use approved color variations</li>
+              <li>Maintain aspect ratio when scaling</li>
+              <li>Ensure adequate contrast with backgrounds</li>
+              <li>Use appropriate clear space</li>
+            </ul>
+          </div>
+          <div class="bg-gray-100 p-6 rounded-lg">
+            <h4 class="text-lg font-semibold text-red-600 mb-4">Don'ts</h4>
+            <ul class="list-disc text-base list-inside text-gray-600">
+              <li>Don't alter the logo colors</li>
+              <li>Don't distort or stretch the logo</li>
+              <li>Don't add effects or shadows</li>
+              <li>Don't place on busy backgrounds</li>
+            </ul>
+          </div>
+        </div>
+
+        <!-- File Format Guide -->
+        <h3 class="lg:text-3xl text-2xl font-semibold tracking-tight text-gray-900 mt-12">File Format Guide</h3>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mt-6">
+          <div class="bg-gray-100 p-6 rounded-lg">
+            <h4 class="text-lg font-semibold mb-4">SVG Format</h4>
+            <p class="text-gray-600">Best for:</p>
+            <ul class="list-disc list-inside text-gray-600">
+              <li>Web usage</li>
+              <li>Responsive design</li>
+              <li>Large format printing</li>
+              <li>Digital presentations</li>
+            </ul>
+          </div>
+          <div class="bg-gray-100 p-6 rounded-lg">
+            <h4 class="text-lg font-semibold mb-4">PNG Format</h4>
+            <p class="text-gray-600">Best for:</p>
+            <ul class="list-disc list-inside text-gray-600">
+              <li>Digital applications</li>
+              <li>Social media</li>
+              <li>Email signatures</li>
+              <li>Microsoft Office documents</li>
+            </ul>
+          </div>
+        </div>
+
+        <!-- Writing Guidelines -->
+        <div class="mt-12">
+          <h3 class="lg:text-3xl text-2xl font-semibold tracking-tight text-gray-900">Writing Guidelines</h3>
+          <div class="bg-gray-100 p-6 rounded-lg mt-3">
+            <ul class="list-disc list-inside text-gray-600">
+              <li>Always capitalize the 'W' in OurWorld - never write it as 'Ourworld' or 'ourworld'</li>
+            </ul>
+          </div>
+        </div>
+
+        <!-- Brand Voice -->
+        <div class="mt-12">
+          <h3 class="lg:text-3xl text-2xl font-semibold tracking-tight text-gray-900">Brand Voice</h3>
+          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mt-6">
+            <div class="bg-gray-100 p-6 rounded-lg">
+              <h4 class="text-lg font-semibold mb-2">Innovative</h4>
+              <p class="text-gray-600">Forward-thinking and solution-oriented</p>
+            </div>
+            <div class="bg-gray-100 p-6 rounded-lg">
+              <h4 class="text-lg font-semibold mb-2">Professional</h4>
+              <p class="text-gray-600">Clear, concise, and authoritative</p>
+            </div>
+            <div class="bg-gray-100 p-6 rounded-lg">
+              <h4 class="text-lg font-semibold mb-2">Approachable</h4>
+              <p class="text-gray-600">Friendly and easy to understand</p>
+            </div>
+            <div class="bg-gray-100 p-6 rounded-lg">
+              <h4 class="text-lg font-semibold mb-2">Authentic</h4>
+              <p class="text-gray-600">Genuine and transparent</p>
+            </div>
+          </div>
+        </div>
+
       </div>
-    <div class="mx-auto max-w-4xl lg:mx-0 mt-8">
-      <h3 class="lg:text-4xl text-2xl font-semibold tracking-tight text-gray-900 mt-12">Secondary Font: Cercodemo <a href="/images/download/cero.zip" download class="text-base text-gray-600 hover:underline ml-2">Download Font</a></h3>
-      <p class="mt-4 text-lg lg:text-xl font-normal text-gray-600">The secondary font used in OurWorld branding is Cercodemo. It is a unique and stylish typeface used primarily for body texts and paragraphs that adds a touch of creativity to our designs.</p>
     </div>
-      <div class="bg-gray-100 rounded-lg p-4 mt-6">
-        <p class="mt-4 lg:text-xl text-lg font-normal text-black">This is Cercodemo Regular for Body Text</p>
-      </div>
-      <div class="bg-gray-100 rounded-lg p-4 mt-6">
-        <p class="mt-4 lg:text-lg text-base font-normal text-black">This is Cercodemo Light for Body Text</p>
-      </div>
-      <div class="bg-gray-100 rounded-lg p-4 mt-6">
-        <p class="mt-4 lg:text-lg text-base font-normal text-black">This is Cercodemo Thin for Caption</p>
   </div>
 </div>