feat: update UI elements and add og image

- Changed the secondary button text in the English JSON file from "Book Demo" to "See Demo" for improved clarity.
- Added a new Open Graph image to enhance social media sharing capabilities.
- Adjusted grid gap properties in Features2Section and FeaturesSection components for better layout consistency.
- Simplified the BlogCard component by removing unnecessary border classes and updating text color for improved readability.
- Modified the Navbar component to change the background color to transparent when scrolled, enhancing visual appeal.

messages/en.json

@@ -267,7 +267,7 @@
       "title": "Start Building",
       "description": "MkSaaS lets you make AI SaaS in days, simply and effortlessly",
       "primaryButton": "Get Started",
-      "secondaryButton": "Book Demo"
+      "secondaryButton": "See Demo"
     }
   },
   "PricingPage": {

src/components/blocks/features/features.tsx

@@ -59,7 +59,7 @@ export default function Features2Section() {
           </p>
         </div>
 
-        <div className="grid gap-12 sm:px-12 md:grid-cols-2 lg:grid-cols-12 lg:gap-8 lg:px-0">
+        <div className="grid gap-12 sm:px-12 md:grid-cols-2 lg:grid-cols-12 md:gap-12 lg:gap-24 lg:px-0">
           <div className="lg:col-span-5 flex flex-col items-center justify-center">
             <Accordion
               type="single"

src/components/blocks/features/features2.tsx

@@ -59,7 +59,7 @@ export default function Features2Section() {
           </p>
         </div>
 
-        <div className="grid gap-12 sm:px-12 md:grid-cols-2 lg:grid-cols-12 lg:gap-8 lg:px-0">
+        <div className="grid gap-12 sm:px-12 md:grid-cols-2 lg:grid-cols-12 md:gap-12 lg:gap-24 lg:px-0">
 
           <div className="bg-background w-full relative flex overflow-hidden rounded-2xl border p-2 md:h-auto lg:col-span-7">
             <div className="aspect-76/59 bg-background relative w-full rounded-2xl">

src/components/blog/blog-card.tsx

@@ -19,7 +19,7 @@ export default function BlogCard({ post }: BlogCardProps) {
 
   return (
     <LocaleLink href={`/blog/${slugParts.join('/')}`} className="block h-full">
-      <div className="group flex flex-col border border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden h-full">
+      <div className="group flex flex-col border rounded-lg overflow-hidden h-full">
         {/* Image container - fixed aspect ratio */}
         <div className="group overflow-hidden relative aspect-16/9 w-full">
           {post.image && (
@@ -73,7 +73,7 @@ export default function BlogCard({ post }: BlogCardProps) {
             {/* Post excerpt */}
             <div className="mt-2">
               {post.description && (
-                <p className="line-clamp-2 text-sm text-gray-500 dark:text-gray-400">
+                <p className="line-clamp-2 text-sm text-muted-foreground">
                   {post.description}
                 </p>
               )}
@@ -81,7 +81,7 @@ export default function BlogCard({ post }: BlogCardProps) {
           </div>
 
           {/* Author and date */}
-          <div className="mt-4 pt-4 border-t border-gray-100 dark:border-gray-800 flex items-center justify-between space-x-4 text-muted-foreground">
+          <div className="mt-4 pt-4 border-t flex items-center justify-between space-x-4 text-muted-foreground">
             <div className="flex items-center gap-2">
               <div className="relative h-8 w-8 shrink-0">
                 {post?.author?.avatar && (

src/components/layout/navbar.tsx

@@ -57,7 +57,7 @@ export function Navbar({ scroll }: NavBarProps) {
         scroll
           ? scrolled
             ? 'bg-background/80 backdrop-blur-md border-b supports-backdrop-filter:bg-background/60'
-            : 'bg-background'
+            : 'bg-transparent'
           : 'border-b bg-background'
       )}
     >