typesense.org-v3: update favicon, logo and add og image

typesense.org-v3/components/Footer/SectionCTA.vue

@@ -14,8 +14,8 @@ import Dots from "@/assets/images/dots.svg";
       </h1>
 
       <div class="mt-10 flex items-center gap-3 max-md:mt-6">
-        <Button :link="STATIC.link_try_for_free" type="primary">
-          Try For Free
+        <Button :link="STATIC.link_craft_your_search" type="primary">
+          Craft Your Search
           <ArrowRight class="text-text-inverted" />
         </Button>
         <Button :link="STATIC.link_typesense_cloud" type="white">

typesense.org-v3/components/Home/SectionHero.vue

@@ -1,6 +1,3 @@
-<script setup lang="ts">
-import ArrowRight from "@/assets/icons/arrow-right.svg";
-</script>
 <template>
   <section
     class="mt-32 flex w-full flex-col items-center text-center max-md:mt-20"
@@ -19,11 +16,11 @@ import ArrowRight from "@/assets/icons/arrow-right.svg";
           deliver instant, relevant search results.
         </p>
         <div class="flex items-center gap-3">
-          <Button :link="STATIC.link_try_for_free">
-            Try For Free <ArrowRight />
+          <Button :link="STATIC.link_craft_your_search" with-arrow>
+            Craft Your Search
           </Button>
-          <Button :link="STATIC.link_typesense_cloud" type="white">
-            Typesense Cloud <ArrowRight />
+          <Button :link="STATIC.link_typesense_cloud" type="white" with-arrow>
+            Typesense Cloud
           </Button>
         </div>
       </div>

typesense.org-v3/components/Navbar.vue

@@ -41,15 +41,16 @@ const hideNav = () => {
     class="header fixed top-0 z-50 overflow-hidden rounded-b-3xl pt-4 backdrop-blur-md max-md:!left-0 max-md:!right-0 max-md:overflow-visible max-md:rounded-none max-md:p-0"
   >
     <nav
-      class="flex h-14 w-full items-center justify-between rounded-[64px] bg-dark-bg pl-8 pr-[10px] font-light text-text-inverted max-md:rounded-none max-md:bg-bg max-md:px-4"
+      class="group flex h-14 w-full items-center justify-between rounded-[64px] bg-dark-bg pl-8 pr-[10px] font-light text-text-inverted max-md:rounded-none max-md:bg-bg max-md:px-4"
     >
-      <Logo class="md:text-white" />
+      <Logo class="max-md:hidden" dark />
+      <Logo class="show-md" />
       <div
         :class="{ active: isActive }"
-        class="dropdown inset-0 text-sm text-text-inverted max-md:fixed max-md:h-screen max-md:bg-primary max-md:px-4 max-md:text-base max-md:[clip-path:inset(0%_0%_0%_100%)]"
+        class="slide inset-0 text-sm text-text-inverted max-md:fixed max-md:h-screen max-md:bg-primary max-md:px-4 max-md:text-base max-md:[clip-path:inset(0%_0%_0%_100%)]"
       >
         <div class="mb-8 hidden h-14 items-center justify-between max-md:flex">
-          <Logo class="text-white" />
+          <Logo dark />
           <button @click="toggle">
             <CloseSquare />
           </button>
@@ -71,11 +72,11 @@ const hideNav = () => {
         </ul>
         <Illustration class="show-md absolute bottom-0 right-0" />
       </div>
-      <CustomLink :to="STATIC.link_try_for_free">
+      <CustomLink :to="STATIC.link_craft_your_search">
         <button
           class="flex items-center gap-2 rounded-full bg-primary px-4 py-[10px] text-sm font-normal tracking-[-0.32px] text-white shadow-[-4px_2px_0px_0px] shadow-bg max-md:hidden"
         >
-          Try For Free
+          Craft Your Search
         </button>
       </CustomLink>
       <button class="show-md" @click="toggle">
@@ -86,10 +87,10 @@ const hideNav = () => {
 </template>
 
 <style scoped>
-.dropdown {
+.slide {
   transition: clip-path 0.5s cubic-bezier(0.65, 0.72, 0, 1);
 }
-.dropdown.active {
+.slide.active {
   clip-path: inset(0% 0% 0% 0%);
 }
 .header {

typesense.org-v3/nuxt.config.ts

@@ -23,8 +23,40 @@ export default defineNuxtConfig({
           content:
             "typesense, search engine, fuzzy search, typo tolerance, faceting, filtering, app search, site search, search bar, algolia, elasticsearch",
         },
+
+        // Open Graph
+        {
+          property: "og:title",
+          content: "Typesense | Open Source Alternative to Algolia + Pinecone",
+        },
+        {
+          property: "og:description",
+          content:
+            "Typesense is a fast, typo-tolerant search engine optimized for instant search-as-you-type experiences and ease of use.",
+        },
+        { property: "og:type", content: "website" },
+        { property: "og:url", content: "https://typesense.org" },
+
+        {
+          property: "og:image",
+          content: "https://typesense.org/opengraph.png",
+        },
+        { property: "og:image:width", content: "1200" },
+        { property: "og:image:height", content: "630" },
+        {
+          property: "og:image:alt",
+          content:
+            "Typesense is a fast, typo-tolerant search engine optimized for instant search-as-you-type experiences and ease of use.",
+        },
+
+        // Twitter
+        { name: "twitter:card", content: "summary_large_image" },
+        {
+          name: "twitter:image",
+          content: "https://typesense.org/opengraph.png",
+        },
       ],
-      link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.svg" }],
+      link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.png" }],
     },
   },
   css: ["~/assets/css/fonts.css"],

typesense.org-v3/pages/support.vue

@@ -35,8 +35,15 @@
             class="table-head mb-2 grid w-full grid-cols-3 items-center rounded-xl bg-bg text-text-primary max-md:px-0.5 max-md:shadow-[-3px_2px_30px_0px_rgba(0,0,0,0.10)] max-md:[&>div]:!pl-2.5"
           >
             <div>
-              <Logo
-                class="[&_.logo-icon]:h-[29px] max-md:[&_.logo-icon]:hidden max-md:[&_.logo-text]:h-[18px] max-md:[&_.logo-text]:w-[83px]"
+              <img
+                src="/typesense-logo.svg"
+                class="h-[29px] max-md:hidden"
+                alt="Typesense logo"
+              />
+              <img
+                src="/typesense-logo-text.svg"
+                class="show-md h-5"
+                alt="Typesense logo"
               />
             </div>
             <div>Typesense Cloud</div>