Update headers (#32)

* updat meta description

* udpate logo image for og:image

* update headers

src/layouts/BaseLayout.astro

@@ -10,14 +10,14 @@ const isProd = import.meta.env.PROD;
 
 interface Props {
   title: string;
-  description: string;
   featuredImage: string;
   imageWidth: string;
   imageHeight: string;
 }
 
-const { title, description, featuredImage, imageWidth, imageHeight} = Astro.props;
+const { title, featuredImage, imageWidth, imageHeight} = Astro.props;
 const titlePrefix = "defguard enterprise open-source SSO&VPN with 2FA/MFA";
+const description = "defguard - enterprise open-source SSO&VPN - the only open-source solution with real WireGuard MFA/2FA & integrated OpenID Connect SSO";
 
 const mainTitle = title.trim() == "" ? titlePrefix : titlePrefix + ": " + title;
 ---
@@ -28,7 +28,7 @@ const mainTitle = title.trim() == "" ? titlePrefix : titlePrefix + ": " + title;
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width" />
     <meta name="generator" content={Astro.generator} />
-    <title>{mainTitle}</title>
+    <title>defguard</title>
     <meta property="og:title" content={mainTitle} />
     <meta property="og:description" content={description} />
     <meta property="og:image" content={"http://" + featuredImage} />

src/layouts/ProductLayout.astro

@@ -3,18 +3,16 @@ import BaseLayout from "./BaseLayout.astro";
 
 interface Props {
   title: string;
-  description: string;
   featuredImage: string;
   imageWidth: string;
   imageHeight: string;
 }
 
-const { title, description, featuredImage, imageWidth, imageHeight } = Astro.props;
+const { title, featuredImage, imageWidth, imageHeight } = Astro.props;
 ---
 
 <BaseLayout
   title={title}
-  description={description}
   featuredImage={featuredImage}
   imageWidth={imageWidth}
   imageHeight={imageHeight}
@@ -62,6 +60,11 @@ const { title, description, featuredImage, imageWidth, imageHeight } = Astro.pro
       display: flex;
       flex-flow: column;
       row-gap: 20px;
+
+      & > h2 {
+        @include typography(h2);
+        padding-bottom: 20px;
+      }
     }
     #matrix {
       width: 100%;

src/pages/client.astro

@@ -14,15 +14,13 @@ const clientFeatures = (await getCollection("client-features")).sort(
   (f1, f2) => f1.data.order - f2.data.order,
 );
 const title = "Best Desktop WireGuard Client";
-const description = "defguard - enterprise open-source SSO&VPN";
 const featuredImage = "github.com/DefGuard/defguard.github.io/raw/main/public/images/product/client/main-screen.png";
 const imageWidth = "1920";
 const imageHeight = "1080";
 ---
 
 <ProductLayout
   title={title}
-  description={description}
   featuredImage={featuredImage}
   imageWidth={imageWidth}
   imageHeight={imageHeight}
@@ -50,6 +48,7 @@ const imageHeight = "1080";
     </ProductImage>
     <ProductSection padding="large">
       <div class="product-features">
+        <h2>Why defguard provides the best WireGuard® client</h2>
         {
           clientFeatures.map(async (f, index) => {
             const { Content } = await f.render();

src/pages/compare.astro

@@ -7,15 +7,13 @@ import { featuresTableData } from "../data/compare-table";
 import { Button } from "../components/buttons/Button/Button";
 
 const title = "Comparison of WireGuard VPN solutions";
-const description = "defguard - enterprise open-source SSO&VPN";
-const featuredImage = "github.com/DefGuard/defguard/raw/main/docs/header.png";
+const featuredImage = "github.com/DefGuard/defguard.github.io/raw/main/public/images/png/defguard.png";
 const imageWidth = "1080";
-const imageHeight = "256";
+const imageHeight = "540";
 ---
 
 <BaseLayout
   title={title}
-  description={description}
   featuredImage={featuredImage}
   imageWidth={imageWidth}
   imageHeight={imageHeight}
@@ -24,7 +22,7 @@ const imageHeight = "256";
   <main id="compare-page">
     <ProductSection>
       <header id="compare-header">
-        <h1>Compare with competition (on date: 2024.08)</h1>
+        <h1>Compare of WireGuard® Solution<br/>(on date: 2024.08)</h1>
       </header>
       <div id="features-table">
         <FeaturesTable data={featuresTableData} client:only="preact" />

src/pages/download-confirm.astro

@@ -5,15 +5,13 @@ import Navigation from "../components/base/Navigation.astro";
 import BaseLayout from "../layouts/BaseLayout.astro";
 
 const title = "";
-const description = "defguard - enterprise open-source SSO&VPN";
-const featuredImage = "github.com/DefGuard/defguard/raw/main/docs/header.png";
+const featuredImage = "github.com/DefGuard/defguard.github.io/raw/main/public/images/png/defguard.png";
 const imageWidth = "1080";
-const imageHeight = "256";
+const imageHeight = "540";
 ---
 
 <BaseLayout
   title={title}
-  description={description}
   featuredImage={featuredImage}
   imageWidth={imageWidth}
   imageHeight={imageHeight}

src/pages/download.astro

@@ -5,15 +5,13 @@ import { DownloadButtonList } from "../components/download/DownloadButtonList/Do
 import DownloadVersion from "../components/download/DownloadVersion.astro";
 
 const title = "";
-const description = "defguard - enterprise open-source SSO&VPN";
-const featuredImage = "github.com/DefGuard/defguard/raw/main/docs/header.png";
+const featuredImage = "github.com/DefGuard/defguard.github.io/raw/main/public/images/png/defguard.png";
 const imageWidth = "1080";
-const imageHeight = "256";
+const imageHeight = "540";
 ---
 
 <BaseLayout
   title={title}
-  description={description}
   featuredImage={featuredImage}
   imageWidth={imageWidth}
   imageHeight={imageHeight}

src/pages/index.astro

@@ -15,15 +15,13 @@ const coreFeatures = (await getCollection("core-features")).sort(
 );
 
 const title = "";
-const description = "defguard - enterprise open-source SSO&VPN";
 const featuredImage = "github.com/DefGuard/defguard.github.io/raw/main/public/images/product/core/hero-image.png";
 const imageWidth = "1920";
 const imageHeight = "1080";
 ---
 
 <ProductLayout
   title={title}
-  description={description}
   featuredImage={featuredImage}
   imageWidth={imageWidth}
   imageHeight={imageHeight}
@@ -56,6 +54,7 @@ const imageHeight = "1080";
     </ProductImage>
     <ProductSection padding="large">
       <div class="product-features">
+        <h2>What will you get with Open Source WireGuard® MFA/2FA</h2>
         {
           coreFeatures.map(async (f, index) => {
             const { Content } = await f.render();

src/pages/newsletter.astro

@@ -4,15 +4,13 @@ import Navigation from "../components/base/Navigation.astro";
 import BaseLayout from "../layouts/BaseLayout.astro";
 
 const title = "";
-const description = "defguard - enterprise open-source SSO&VPN";
-const featuredImage = "github.com/DefGuard/defguard/raw/main/docs/header.png";
+const featuredImage = "github.com/DefGuard/defguard.github.io/raw/main/public/images/png/defguard.png";
 const imageWidth = "1080";
-const imageHeight = "256";
+const imageHeight = "540";
 ---
 
 <BaseLayout
   title={title}
-  description={description}
   featuredImage={featuredImage}
   imageWidth={imageWidth}
   imageHeight={imageHeight}

src/pages/openvpn.astro

@@ -14,15 +14,13 @@ const openvpnFeatures = (await getCollection("openvpn-features")).sort(
   (f1, f2) => f1.data.order - f2.data.order,
 );
 const title = "Migrate from OpenVPN to WireGuard";
-const description = "defguard - enterprise open-source SSO&VPN";
-const featuredImage = "github.com/DefGuard/defguard/raw/main/docs/header.png";
+const featuredImage = "github.com/DefGuard/defguard.github.io/raw/main/public/images/png/defguard.png";
 const imageWidth = "1080";
-const imageHeight = "256";
+const imageHeight = "540";
 ---
 
 <ProductLayout
   title={title}
-  description={description}
   featuredImage={featuredImage}
   imageWidth={imageWidth}
   imageHeight={imageHeight}

src/pages/pricing.astro

@@ -9,23 +9,24 @@ const pricing = (await getCollection("pricing")).sort(
   (p1, p2) => p1.data.order - p2.data.order,
 );
 const title = "Pricing & Support";
-const description = "defguard - enterprise open-source SSO&VPN";
-const featuredImage = "github.com/DefGuard/defguard/raw/main/docs/header.png";
+const featuredImage = "github.com/DefGuard/defguard.github.io/raw/main/public/images/png/defguard.png";
 const imageWidth = "1080";
-const imageHeight = "256";
+const imageHeight = "540";
 ---
 
 <BaseLayout
   title={title}
-  description={description}
   featuredImage={featuredImage}
   imageWidth={imageWidth}
   imageHeight={imageHeight}
 >
   <Navigation activeSlug="/pricing" />
   <main id="pricing-page">
     <ProductSection padding="large" id="pricing-tiers">
-      <header><h1>Support & Pricing</h1></header>
+      <header>
+        <h1>Support & Pricing</h1>
+        <h2>Comparison of free and paid packages for Wireguard solution.</h2>
+      </header>
       <div class="tiers">
         {
           pricing.map(async (p) => {
@@ -84,15 +85,18 @@ const imageHeight = "256";
 
     header {
       display: flex;
-      flex-flow: row;
-      align-items: center;
+      flex-flow: column;
       justify-content: flex-start;
       width: 100%;
       padding-bottom: 50px;
 
       h1 {
         text-align: left;
       }
+
+      h2 {
+        @include typography(h2);
+      }
     }
 
     .contact {

src/pages/purchase-confirm.astro

@@ -5,15 +5,13 @@ import BaseLayout from "../layouts/BaseLayout.astro";
 import ProductSection from "../layouts/ProductSection.astro";
 
 const title = "";
-const description = "defguard - enterprise open-source SSO&VPN";
-const featuredImage = "github.com/DefGuard/defguard/raw/main/docs/header.png";
+const featuredImage = "github.com/DefGuard/defguard.github.io/raw/main/public/images/png/defguard.png";
 const imageWidth = "1080";
-const imageHeight = "256";
+const imageHeight = "540";
 ---
 
 <BaseLayout
   title={title}
-  description={description}
   featuredImage={featuredImage}
   imageWidth={imageWidth}
   imageHeight={imageHeight}