feat(marketing): add social preview and project status

apps/marketing/app/globals.css

@@ -110,6 +110,42 @@ a {
   content: "";
 }
 
+.hero-labels {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 1.2rem;
+}
+
+.hero-labels .eyebrow {
+  margin: 0;
+}
+
+.project-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.3rem 0.65rem;
+  border: 1px solid rgba(233, 120, 85, 0.42);
+  border-radius: 999px;
+  color: #7a321f;
+  background: rgba(233, 120, 85, 0.14);
+  font-size: 0.68rem;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  line-height: 1;
+  text-transform: uppercase;
+}
+
+.project-status::before {
+  width: 0.42rem;
+  height: 0.42rem;
+  border-radius: 50%;
+  background: var(--coral);
+  content: "";
+}
+
 h1,
 h2,
 h3,

apps/marketing/app/layout.tsx

@@ -2,10 +2,45 @@ import type { Metadata } from "next";
 
 import "./globals.css";
 
+const siteUrl = "https://techaaroorian.github.io/slotsyncro/";
+const socialImageUrl =
+  "https://techaaroorian.github.io/slotsyncro/opengraph-image.png";
+const title = "SlotSyncro — Scheduling that finds common ground";
+const description =
+  "A publicly developed scheduling portfolio project for direct bookings, group polls, and timezone-aware decisions.";
+
 export const metadata: Metadata = {
-  title: "SlotSyncro — Scheduling that finds common ground",
-  description:
-    "A publicly developed scheduling portfolio project for direct bookings, group polls, and timezone-aware decisions.",
+  metadataBase: new URL(siteUrl),
+  title,
+  description,
+  applicationName: "SlotSyncro",
+  authors: [{ name: "Janarthanan Soundhararajan" }],
+  creator: "Janarthanan Soundhararajan",
+  alternates: {
+    canonical: siteUrl,
+  },
+  openGraph: {
+    title,
+    description,
+    url: siteUrl,
+    siteName: "SlotSyncro",
+    locale: "en_US",
+    type: "website",
+    images: [
+      {
+        url: socialImageUrl,
+        width: 1200,
+        height: 627,
+        alt: "SlotSyncro scheduling project with a group availability poll preview",
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title,
+    description,
+    images: [socialImageUrl],
+  },
 };
 
 export default function RootLayout({

apps/marketing/app/page.tsx

@@ -42,7 +42,10 @@ export default function MarketingHomePage() {
       <main id="top" className="site-shell">
         <section className="hero" aria-labelledby="hero-title">
           <div>
-            <p className="eyebrow">Public portfolio project</p>
+            <div className="hero-labels">
+              <p className="eyebrow">Public portfolio project</p>
+              <span className="project-status">In progress</span>
+            </div>
             <h1 id="hero-title">Find the time that works.</h1>
             <p className="hero-copy">
               SlotSyncro brings direct bookings and group availability polls into