feat(marketing): real stack logos, GitHub stars, vibe-coder pitch

apps/marketing/src/app/[locale]/page.tsx

@@ -7,6 +7,7 @@ import {
 	SoftwareApplicationJsonLd,
 	WebsiteJsonLd,
 } from "@/components/seo/json-ld";
+import { getRepoStars } from "@/lib/github";
 import { ogMetadata, siteBase } from "@/lib/og";
 
 const HOME_TITLE = "vibestack — The SaaS starter where Claude writes the rest.";
@@ -67,8 +68,9 @@ const StickyCTA = dynamic(() =>
 	})),
 );
 
-export default function HomePage() {
+export default async function HomePage() {
 	const siteUrl = siteBase();
+	const stars = await getRepoStars();
 	return (
 		<div className="marketing grain min-h-dvh">
 			<MarketingHeader />
@@ -79,7 +81,7 @@ export default function HomePage() {
 					description="Opinionated, AI-first SaaS starter. Stack pre-wired, Claude Code skills vendored in the repo. For devs and vibe-coders."
 				/>
 				<SoftwareApplicationJsonLd siteUrl={siteUrl} />
-				<Hero />
+				<Hero stars={stars} />
 				<StackStrip />
 				<Features />
 				<HowItWorks />

apps/marketing/src/components/marketing/footer.tsx

@@ -22,7 +22,7 @@ const columns: { title: string; links: FooterLink[] }[] = [
 			{ label: "Journal", href: "/blog" },
 			{
 				label: "GitHub",
-				href: "https://github.com/f-amine/vibestack",
+				href: "https://github.com/f-amine/vibe-stack",
 				external: true,
 			},
 		],

apps/marketing/src/components/marketing/github-mark.tsx

@@ -0,0 +1,15 @@
+// GitHub mark, currentColor so it inherits text color. Decorative by default.
+export function GithubMark({ className }: { className?: string }) {
+	return (
+		<svg
+			viewBox="0 0 16 16"
+			className={className}
+			fill="currentColor"
+			role="img"
+			aria-hidden="true"
+		>
+			<title>GitHub</title>
+			<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
+		</svg>
+	);
+}

apps/marketing/src/components/marketing/header.tsx

@@ -4,6 +4,8 @@ import { cn } from "@vibestack/ui/lib/utils";
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import { WEB_URLS } from "@/lib/app-urls";
+import { GITHUB_URL } from "@/lib/github";
+import { GithubMark } from "./github-mark";
 
 const links = [
 	{ href: "#features", label: "Features" },
@@ -59,6 +61,15 @@ export function MarketingHeader() {
 				</ul>
 
 				<div className="flex items-center gap-2">
+					<a
+						href={GITHUB_URL}
+						target="_blank"
+						rel="noreferrer"
+						aria-label="vibestack on GitHub"
+						className="inline-flex h-9 w-9 items-center justify-center rounded-full text-[color:var(--marketing-fg)]/70 transition-colors hover:bg-[color:var(--marketing-line)]/40 hover:text-[color:var(--marketing-fg)]"
+					>
+						<GithubMark className="h-5 w-5" />
+					</a>
 					<Link
 						href={WEB_URLS.signIn}
 						className="hidden rounded-full px-4 py-2 text-[color:var(--marketing-fg)]/80 text-sm transition-colors hover:text-[color:var(--marketing-fg)] sm:inline-block"