feat: add Atlas Cloud sponsorship placements

apps/web/src/routes/_home/-sections/sponsors.test.tsx

@@ -0,0 +1,55 @@
+// @vitest-environment happy-dom
+
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { i18n } from "@lingui/core";
+import { I18nProvider } from "@lingui/react";
+import { Sponsors } from "./sponsors";
+
+const sponsorUrl = "https://www.atlascloud.ai/?utm_source=github&utm_medium=link&utm_campaign=reactive-resume";
+
+i18n.loadAndActivate({ locale: "en", messages: {} });
+
+const renderSponsors = (show: boolean) =>
+	render(
+		<I18nProvider i18n={i18n}>
+			<Sponsors show={show} />
+		</I18nProvider>,
+	);
+
+describe("Sponsors", () => {
+	it("renders nothing when sponsors are hidden", () => {
+		const { container } = renderSponsors(false);
+
+		expect(container).toBeEmptyDOMElement();
+	});
+
+	it("renders the Atlas Cloud sponsor link when sponsors are visible", () => {
+		const { getByRole } = renderSponsors(true);
+
+		const link = getByRole("link", { name: "Atlas Cloud" });
+		expect(link).toHaveAttribute("href", sponsorUrl);
+		expect(link).toHaveAttribute("target", "_blank");
+		expect(link).toHaveAttribute("rel", "noopener noreferrer");
+	});
+
+	it("renders the full Atlas Cloud logo", () => {
+		const { getByAltText } = renderSponsors(true);
+
+		const logo = getByAltText("Atlas Cloud");
+		expect(logo).toHaveAttribute("src", "/sponsors/atlas-cloud-logo-black.svg");
+		expect(logo).toHaveClass("h-20");
+	});
+
+	it("thanks sponsors and links sponsorship inquiries to email", () => {
+		const { getByRole, getByText, queryByText } = renderSponsors(true);
+
+		expect(queryByText("Sponsors")).not.toBeInTheDocument();
+		expect(getByRole("heading", { name: "Thank you to our sponsors" })).toBeInTheDocument();
+		expect(getByText(/stays free, open-source, and independent/i)).toBeInTheDocument();
+		expect(getByRole("link", { name: "hello@amruthpillai.com" })).toHaveAttribute(
+			"href",
+			"mailto:hello@amruthpillai.com",
+		);
+	});
+});

apps/web/src/routes/_home/-sections/sponsors.tsx

@@ -0,0 +1,63 @@
+import { Trans } from "@lingui/react/macro";
+
+const atlasCloudUrl = "https://www.atlascloud.ai/?utm_source=github&utm_medium=link&utm_campaign=reactive-resume";
+const sponsorshipEmail = "hello@amruthpillai.com";
+
+type SponsorsProps = {
+	show: boolean;
+};
+
+export const Sponsors = ({ show }: SponsorsProps) => {
+	if (!show) return null;
+
+	return (
+		<section className="px-8 py-20">
+			<div className="mx-auto flex max-w-4xl flex-col items-center text-center">
+				<h2 className="max-w-3xl font-semibold text-2xl tracking-tight md:text-4xl">
+					<Trans>Thank you to our sponsors</Trans>
+				</h2>
+				<p className="mt-5 max-w-2xl text-base text-muted-foreground leading-relaxed">
+					<Trans>
+						Reactive Resume stays free, open-source, and independent because companies choose to support the work behind
+						it. Their sponsorship helps fund hosting, maintenance, and continued development for the community.
+					</Trans>
+				</p>
+
+				<a
+					href={atlasCloudUrl}
+					target="_blank"
+					rel="noopener noreferrer"
+					aria-label="Atlas Cloud"
+					className="mt-12 block"
+				>
+					<img
+						src="/sponsors/atlas-cloud-logo-black.svg"
+						alt="Atlas Cloud"
+						className="h-20 w-auto md:h-24 dark:hidden"
+						loading="lazy"
+					/>
+					<img
+						src="/sponsors/atlas-cloud-logo-white.svg"
+						alt=""
+						className="hidden h-20 w-auto md:h-24 dark:block"
+						loading="lazy"
+					/>
+				</a>
+
+				<p className="mt-8 max-w-2xl text-muted-foreground leading-relaxed">
+					<Trans>
+						Atlas Cloud supports Reactive Resume as a project sponsor. If your company would like to sponsor the
+						project, email{" "}
+						<a
+							href={`mailto:${sponsorshipEmail}`}
+							className="font-medium text-foreground underline-offset-4 hover:underline"
+						>
+							{sponsorshipEmail}
+						</a>
+						.
+					</Trans>
+				</p>
+			</div>
+		</section>
+	);
+};

apps/web/src/routes/_home/index.tsx

@@ -6,6 +6,7 @@ import { Features } from "./-sections/features";
 import { Footer } from "./-sections/footer";
 import { Hero } from "./-sections/hero";
 import { Prefooter } from "./-sections/prefooter";
+import { Sponsors } from "./-sections/sponsors";
 import { Statistics } from "./-sections/statistics";
 import { Templates } from "./-sections/templates";
 import { Testimonials } from "./-sections/testimonials";
@@ -24,6 +25,8 @@ export const Route = createFileRoute("/_home/")({
 });
 
 function RouteComponent() {
+	const { flags } = Route.useRouteContext();
+
 	return (
 		<main id="main-content" className="relative">
 			<Hero />
@@ -31,6 +34,7 @@ function RouteComponent() {
 			<div className="container mx-auto px-4 sm:px-6 lg:px-12">
 				<div className="border-border border-x [&>section:first-child]:border-t-0 [&>section]:border-border [&>section]:border-t">
 					<Statistics />
+					<Sponsors show={flags.showSponsors} />
 					<Features />
 					<Templates />
 					<Testimonials />