feat(seo): add Open Graph and Twitter metadata

app/(auth)/login/page.tsx

@@ -7,14 +7,58 @@ export const metadata: Metadata = {
   title: "Login - DevPulse",
   description:
     "Log in to your DevPulse account to monitor your coding activity and compete on leaderboards.",
+  keywords: [
+    "DevPulse",
+    "login",
+    "coding activity tracker",
+    "developer leaderboards",
+    "WakaTime integration",
+    "coding stats",
+    "programming habits",
+    "developer competition",
+    "flex your projects",
+    "coding streaks",
+    "productivity insights",
+  ],
+  openGraph: {
+    title: "Login - DevPulse",
+    description:
+      "Log in to your DevPulse account to monitor your coding activity and compete on leaderboards.",
+    url: "https://devpulse-waka.vercel.app/login",
+    siteName: "DevPulse",
+    images: [
+      {
+        url: "https://devpulse-waka.vercel.app/images/devpulse.cover.png",
+        width: 1200,
+        height: 630,
+        alt: "DevPulse Cover Image",
+      },
+    ],
+    locale: "en_US",
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Login - DevPulse",
+    description:
+      "Log in to your DevPulse account to monitor your coding activity and compete on leaderboards.",
+    images: [
+      {
+        url: "https://devpulse-waka.vercel.app/images/devpulse.cover.png",
+        alt: "DevPulse Cover Image",
+      },
+    ],
+  },
 };
 
 export default async function Login(props: {
   searchParams?: Promise<{ redirect?: string }>;
 }) {
   const redirectParam = (await props.searchParams)?.redirect;
   const redirectTo =
-    redirectParam && redirectParam.startsWith("/") && !redirectParam.startsWith("//")
+    redirectParam &&
+    redirectParam.startsWith("/") &&
+    !redirectParam.startsWith("//")
       ? redirectParam
       : undefined;
 
@@ -26,9 +70,14 @@ export default async function Login(props: {
         <div className="absolute inset-0 grid-bg opacity-30" />
 
         <div className="relative z-10">
-          <Link href="/" className="flex items-center gap-3 w-fit hover:opacity-80 transition">
+          <Link
+            href="/"
+            className="flex items-center gap-3 w-fit hover:opacity-80 transition"
+          >
             <Image src="/logo.svg" alt="DevPulse Logo" width={40} height={40} />
-            <span className="text-2xl font-bold tracking-tight text-white">DevPulse</span>
+            <span className="text-2xl font-bold tracking-tight text-white">
+              DevPulse
+            </span>
           </Link>
         </div>
 
@@ -37,26 +86,31 @@ export default async function Login(props: {
             Welcome back to your dashboard.
           </h1>
           <p className="text-gray-400 text-lg leading-relaxed mb-8">
-            Access your personalized coding metrics, compare your stats, and keep your productivity streak alive.
+            Access your personalized coding metrics, compare your stats, and
+            keep your productivity streak alive.
           </p>
-          
+
           <div className="glass-card border border-white/5 rounded-2xl p-5 bg-white/5 backdrop-blur-md shadow-2xl">
             <div className="flex items-center gap-2 mb-4">
               <div className="w-3 h-3 rounded-full bg-red-500/80"></div>
               <div className="w-3 h-3 rounded-full bg-yellow-500/80"></div>
               <div className="w-3 h-3 rounded-full bg-green-500/80"></div>
-              <span className="ml-2 text-xs font-mono text-gray-500">devpulse-auth.ts</span>
+              <span className="ml-2 text-xs font-mono text-gray-500">
+                devpulse-auth.ts
+              </span>
             </div>
             <div className="space-y-1.5 font-mono text-sm">
               <div className="flex">
-                <span className="text-indigo-400 mr-2">import</span> 
-                <span className="text-gray-200">{"{ Metrics }"}</span> 
-                <span className="text-indigo-400 mx-2">from</span> 
-                <span className="text-green-400">&apos;@devpulse/core&apos;</span>
+                <span className="text-indigo-400 mr-2">import</span>
+                <span className="text-gray-200">{"{ Metrics }"}</span>
+                <span className="text-indigo-400 mx-2">from</span>
+                <span className="text-green-400">
+                  &apos;@devpulse/core&apos;
+                </span>
                 <span className="text-gray-400">;</span>
               </div>
               <div className="flex mt-2">
-                <span className="text-purple-400 mr-2">await</span> 
+                <span className="text-purple-400 mr-2">await</span>
                 <span className="text-blue-400">Metrics</span>
                 <span className="text-gray-200">.</span>
                 <span className="text-yellow-200">syncToday</span>
@@ -79,7 +133,7 @@ export default async function Login(props: {
       {/* Right Side - Form */}
       <div className="w-full lg:w-1/2 flex flex-col justify-center items-center p-8 sm:p-12 xl:p-20 relative">
         <div className="absolute inset-0 grid-bg opacity-20 lg:hidden" />
-        
+
         <div className="w-full max-w-sm relative z-10">
           <div className="lg:hidden flex items-center justify-center gap-3 mb-10">
             <Image src="/logo.svg" alt="DevPulse Logo" width={40} height={40} />
@@ -88,15 +142,21 @@ export default async function Login(props: {
 
           <div className="mb-8 text-left">
             <h2 className="text-3xl font-bold text-white mb-2">Log in</h2>
-            <p className="text-gray-400">Enter your credentials to access your account.</p>
+            <p className="text-gray-400">
+              Enter your credentials to access your account.
+            </p>
           </div>
 
           <LoginForm />
 
           <p className="mt-8 text-center text-sm text-gray-400">
             Don&apos;t have an account?{" "}
             <Link
-              href={redirectTo ? `/signup?redirect=${encodeURIComponent(redirectTo)}` : "/signup"}
+              href={
+                redirectTo
+                  ? `/signup?redirect=${encodeURIComponent(redirectTo)}`
+                  : "/signup"
+              }
               className="text-indigo-400 hover:text-indigo-300 font-semibold transition-colors underline-offset-4 hover:underline"
             >
               Sign up

app/(auth)/signup/page.tsx

@@ -7,14 +7,45 @@ export const metadata: Metadata = {
   title: "Sign Up - DevPulse",
   description:
     "Create a DevPulse account to monitor your coding activity and compete on leaderboards.",
+  openGraph: {
+    title: "Sign Up - DevPulse",
+    description:
+      "Create a DevPulse account to monitor your coding activity and compete on leaderboards.",
+    url: "https://devpulse-waka.vercel.app/signup",
+    siteName: "DevPulse",
+    images: [
+      {
+        url: "https://devpulse-waka.vercel.app/images/devpulse.cover.png",
+        width: 1200,
+        height: 630,
+        alt: "DevPulse Cover Image",
+      },
+    ],
+    locale: "en_US",
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Sign Up - DevPulse",
+    description:
+      "Create a DevPulse account to monitor your coding activity and compete on leaderboards.",
+    images: [
+      {
+        url: "https://devpulse-waka.vercel.app/images/devpulse.cover.png",
+        alt: "DevPulse Cover Image",
+      },
+    ],
+  },
 };
 
 export default async function Signup(props: {
   searchParams?: Promise<{ redirect?: string }>;
 }) {
   const redirectParam = (await props.searchParams)?.redirect;
   const redirectTo =
-    redirectParam && redirectParam.startsWith("/") && !redirectParam.startsWith("//")
+    redirectParam &&
+    redirectParam.startsWith("/") &&
+    !redirectParam.startsWith("//")
       ? redirectParam
       : undefined;
 
@@ -26,9 +57,14 @@ export default async function Signup(props: {
         <div className="absolute inset-0 grid-bg opacity-30" />
 
         <div className="relative z-10">
-          <Link href="/" className="flex items-center gap-3 w-fit hover:opacity-80 transition">
+          <Link
+            href="/"
+            className="flex items-center gap-3 w-fit hover:opacity-80 transition"
+          >
             <Image src="/logo.svg" alt="DevPulse Logo" width={40} height={40} />
-            <span className="text-2xl font-bold tracking-tight text-white">DevPulse</span>
+            <span className="text-2xl font-bold tracking-tight text-white">
+              DevPulse
+            </span>
           </Link>
         </div>
 
@@ -37,21 +73,24 @@ export default async function Signup(props: {
             Start measuring your coding pulse.
           </h1>
           <p className="text-gray-400 text-lg leading-relaxed mb-8">
-            Join thousands of developers tracking their progress, competing on leaderboards, and leveling up their skills.
+            Join thousands of developers tracking their progress, competing on
+            leaderboards, and leveling up their skills.
           </p>
-          
+
           <div className="glass-card border border-white/5 rounded-2xl p-5 bg-white/5 backdrop-blur-md shadow-2xl">
             <div className="flex items-center gap-2 mb-4">
               <div className="w-3 h-3 rounded-full bg-red-500/80"></div>
               <div className="w-3 h-3 rounded-full bg-yellow-500/80"></div>
               <div className="w-3 h-3 rounded-full bg-green-500/80"></div>
-              <span className="ml-2 text-xs font-mono text-gray-500">setup.ts</span>
+              <span className="ml-2 text-xs font-mono text-gray-500">
+                setup.ts
+              </span>
             </div>
             <div className="space-y-1.5 font-mono text-sm">
               <div className="flex">
-                <span className="text-purple-400 mr-2">const</span> 
-                <span className="text-blue-400">dev</span> 
-                <span className="text-gray-200 mx-2">=</span> 
+                <span className="text-purple-400 mr-2">const</span>
+                <span className="text-blue-400">dev</span>
+                <span className="text-gray-200 mx-2">=</span>
                 <span className="text-indigo-400 mr-2">new</span>
                 <span className="text-yellow-200">Developer</span>
                 <span className="text-gray-200">();</span>
@@ -81,24 +120,32 @@ export default async function Signup(props: {
       {/* Right Side - Form */}
       <div className="w-full lg:w-1/2 flex flex-col justify-center items-center p-8 sm:p-12 xl:p-20 relative">
         <div className="absolute inset-0 grid-bg opacity-20 lg:hidden" />
-        
+
         <div className="w-full max-w-sm relative z-10">
           <div className="lg:hidden flex items-center justify-center gap-3 mb-10">
             <Image src="/logo.svg" alt="DevPulse Logo" width={40} height={40} />
             <h2 className="text-3xl font-bold text-white">DevPulse</h2>
           </div>
 
           <div className="mb-8 text-left">
-            <h2 className="text-3xl font-bold text-white mb-2">Create an account</h2>
-            <p className="text-gray-400">Start tracking your coding stats today.</p>
+            <h2 className="text-3xl font-bold text-white mb-2">
+              Create an account
+            </h2>
+            <p className="text-gray-400">
+              Start tracking your coding stats today.
+            </p>
           </div>
 
           <SignupForm />
 
           <p className="mt-8 text-center text-sm text-gray-400">
             Already have an account?{" "}
             <Link
-              href={redirectTo ? `/login?redirect=${encodeURIComponent(redirectTo)}` : "/login"}
+              href={
+                redirectTo
+                  ? `/login?redirect=${encodeURIComponent(redirectTo)}`
+                  : "/login"
+              }
               className="text-indigo-400 hover:text-indigo-300 font-semibold transition-colors underline-offset-4 hover:underline"
             >
               Log in

app/(public)/flex/page.tsx

@@ -6,6 +6,52 @@ import Image from "next/image";
 import { timeAgo } from "@/app/utils/time";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faExternalLink } from "@fortawesome/free-solid-svg-icons";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Flexes - DevPulse",
+  description:
+    "Flex your coding projects and share your achievements with the DevPulse community. See what others are working on and get inspired!",
+  keywords: [
+    "DevPulse",
+    "coding flexes",
+    "developer projects",
+    "coding achievements",
+    "programming flexes",
+    "open source projects",
+    "developer community",
+    "coding inspiration",
+  ],
+  openGraph: {
+    title: "Flexes - DevPulse",
+    description:
+      "Flex your coding projects and share your achievements with the DevPulse community. See what others are working on and get inspired!",
+    url: "https://devpulse-waka.vercel.app/flex",
+    siteName: "DevPulse",
+    images: [
+      {
+        url: "https://devpulse-waka.vercel.app/images/devpulse.cover.png",
+        width: 1200,
+        height: 630,
+        alt: "DevPulse Cover Image",
+      },
+    ],
+    locale: "en_US",
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Flexes - DevPulse",
+    description:
+      "Flex your coding projects and share your achievements with the DevPulse community. See what others are working on and get inspired!",
+    images: [
+      {
+        url: "https://devpulse-waka.vercel.app/images/devpulse.cover.png",
+        alt: "DevPulse Cover Image",
+      },
+    ],
+  },
+};
 
 export default async function Flexs() {
   const supabase = await createClient();

app/(public)/join/page.tsx

@@ -63,7 +63,7 @@ export async function generateMetadata({
       description,
       type: "website",
       siteName: "DevPulse",
-      url: `/join?id=${encodeURIComponent(code)}`,
+      url: `https://devpulse-waka.vercel.app/join?id=${encodeURIComponent(code)}`,
     },
     twitter: {
       card: "summary_large_image",

app/(public)/leaderboard/page.tsx

@@ -3,6 +3,53 @@ import { createClient } from "../../lib/supabase/server";
 import Footer from "@/app/components/layout/Footer";
 import CTA from "@/app/components/layout/CTA";
 import Image from "next/image";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Leaderboards - DevPulse",
+  description:
+    "Explore the DevPulse leaderboards and see how you rank against other developers. Check out the top coders and get inspired to climb the ranks!",
+  keywords: [
+    "DevPulse",
+    "developer leaderboards",
+    "coding rankings",
+    "programming competition",
+    "developer stats",
+    "coding achievements",
+    "programming leaderboards",
+    "developer community",
+    "coding inspiration",
+  ],
+  openGraph: {
+    title: "Leaderboards - DevPulse",
+    description:
+      "Explore the DevPulse leaderboards and see how you rank against other developers. Check out the top coders and get inspired to climb the ranks!",
+    url: "https://devpulse-waka.vercel.app/leaderboard",
+    siteName: "DevPulse",
+    images: [
+      {
+        url: "https://devpulse-waka.vercel.app/images/devpulse.cover.png",
+        width: 1200,
+        height: 630,
+        alt: "DevPulse Cover Image",
+      },
+    ],
+    locale: "en_US",
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Leaderboards - DevPulse",
+    description:
+      "Explore the DevPulse leaderboards and see how you rank against other developers. Check out the top coders and get inspired to climb the ranks!",
+    images: [
+      {
+        url: "https://devpulse-waka.vercel.app/images/devpulse.cover.png",
+        alt: "DevPulse Cover Image",
+      },
+    ],
+  },
+};
 
 export default async function Leaderboards() {
   const supabase = await createClient();