feat: add Monero investment blog post

- Add new blog post about Monero (XMR) investment
- Add Monero header image
- Optimize image components for better performance
- Fix image aspect ratios and add priority loading

src/app/blog/investing-in-monero/content.mdx

@@ -0,0 +1,55 @@
+import { BlogLayout } from "@/components/BlogLayout";
+
+export const meta = {
+  date: "2024-01-16",
+  title: "Why Consider Investing in Monero (XMR)",
+  description:
+    "An exploration of Monero's unique features and its potential value proposition as a privacy-focused cryptocurrency investment.",
+  image:
+    "/images/blog/monero.png",
+  tags: ["cryptocurrency", "investment", "privacy"],
+};
+
+export default (props) => <BlogLayout meta={meta} {...props} />;
+
+## Introduction
+
+In the evolving landscape of cryptocurrency investments, Monero (XMR) stands out as a unique proposition. While Bitcoin pioneered the concept of digital currency, Monero has established itself as the leading privacy-focused cryptocurrency, offering features that make it particularly interesting for both privacy advocates and investors.
+
+## Privacy by Design
+
+Unlike many other cryptocurrencies, Monero's privacy features aren't optional - they're built into the core protocol. Every transaction on the Monero network automatically obscures:
+- Sender identity
+- Recipient identity
+- Transaction amount
+- Transaction history
+
+This fundamental commitment to privacy isn't just a technical feature; it's a key value proposition that sets Monero apart in the cryptocurrency ecosystem.
+
+## Investment Considerations
+
+### 1. Fungibility
+One of Monero's strongest attributes is its fungibility - each XMR is identical and interchangeable. This quality is essential for any currency and gives Monero an advantage over cryptocurrencies where coins can be traced and potentially "tainted" by their transaction history.
+
+### 2. Market Position
+As the leading privacy coin, Monero has established a strong network effect and community. While other privacy coins exist, none have achieved Monero's level of adoption and trust within the cryptocurrency ecosystem.
+
+### 3. Technical Innovation
+Monero's development team consistently implements cutting-edge cryptographic techniques to enhance privacy and scalability. Regular protocol upgrades demonstrate a commitment to long-term technological advancement.
+
+### 4. Real-World Utility
+Unlike many cryptocurrencies that struggle to find practical applications, Monero serves a clear purpose: private, secure transactions. This utility drives organic demand, independent of speculative interest.
+
+## Potential Risks
+
+While Monero presents compelling investment opportunities, it's important to consider the risks:
+
+1. Regulatory Scrutiny: Privacy coins face increased regulatory attention, which could affect their adoption and trading availability.
+2. Market Volatility: Like all cryptocurrencies, Monero's price can be highly volatile.
+3. Competition: While currently leading in privacy technology, new innovations could challenge Monero's position.
+
+## Conclusion
+
+Monero represents a unique investment opportunity in the cryptocurrency space. Its privacy features, established network effect, and continued technical innovation make it worth considering for those interested in cryptocurrency investments. However, as with any investment, thorough research and careful consideration of risk tolerance are essential.
+
+Remember that this analysis isn't financial advice - cryptocurrency investments carry significant risks, and it's crucial to conduct your own research and possibly consult with financial advisors before making investment decisions.

src/app/blog/investing-in-monero/page.tsx

@@ -0,0 +1,5 @@
+import Content from "./content.mdx";
+
+export default function Page() {
+  return <Content />;
+}

src/components/Badge.tsx

@@ -32,8 +32,8 @@ export const Badge = ({
           <motion.path
             stroke="currentColor"
             strokeLinecap="round"
-            stroke-linejoin="round"
-            stroke-width="1.5"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
             d="M10.75 8.75L14.25 12L10.75 15.25"
             initial={{ pathLength: 0 }}
             animate={{ pathLength: 1 }}

src/components/BlogLayout.tsx

@@ -56,9 +56,10 @@ export function BlogLayout({
             <Image
               src={meta.image}
               alt="thumbnail"
-              height="800"
-              width="800"
-              className={`object-cover object-left-top w-full max-h-96`}
+              height={800}
+              width={800}
+              className="object-cover object-left-top w-full h-auto max-h-96"
+              priority={true}
             />
           </div>
         </header>

src/components/Blogs.tsx

@@ -58,10 +58,10 @@ export const Blogs = ({ blogs }: { blogs: Blog[] }) => {
               <Image
                 src={blog.image}
                 alt="thumbnail"
-                height="200"
-                width="200"
-                objectFit="cover"
+                height={200}
+                width={200}
                 className="rounded-md object-cover h-40 w-60"
+                priority={index === 0}
               />
               <div className="flex flex-col col-span-3">
                 <Heading className="text-lg md:text-lg lg:text-lg">
@@ -73,7 +73,7 @@ export const Blogs = ({ blogs }: { blogs: Blog[] }) => {
                 <div className="flex space-x-2 flex-wrap mt-4">
                   {blog.tags?.map((tag, index) => (
                     <span
-                      key={`tag-${blog.slug}`}
+                      key={`tag-${blog.slug}-${index}`}
                       className="text-xs px-1 py-0.5 text-secondary border border-neutral-200 bg-white rounded-md"
                     >
                       {tag}

src/components/Product.tsx

@@ -86,9 +86,9 @@ export const SingleProduct = ({ product }: { product: Product }) => {
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"
-          stroke-width="2"
+          strokeWidth="2"
           strokeLinecap="round"
-          stroke-linejoin="round"
+          strokeLinejoin="round"
           className="w-3.5 h-3.5 group-hover:translate-x-0.5 transition-transform"
         >
           <path d="M5 12l14 0"></path>

src/components/Products.tsx

@@ -33,9 +33,10 @@ export const Products = () => {
               <Image
                 src={product.thumbnail}
                 alt="thumbnail"
-                height="200"
-                width="200"
-                className="rounded-md"
+                height={200}
+                width={200}
+                className="rounded-md object-cover w-auto h-auto"
+                priority={idx < 2}
               />
               <div className="flex flex-col justify-between">
                 <div>

src/components/Sidebar.tsx

@@ -108,9 +108,9 @@ const SidebarHeader = () => {
       <Image
         src="/images/portrait.jpg"
         alt="Avatar"
-        height="40"
-        width="40"
-        className="object-cover object-top rounded-full flex-shrink-0"
+        height={40}
+        width={40}
+        className="object-cover object-top rounded-full flex-shrink-0 w-auto h-auto"
       />
       <div className="flex text-sm flex-col">
         <p className="font-bold text-primary">Lorenzo Scaturchio</p>