Beautifully designed, production-ready.

import { Red_Hat_Display } from "next/font/google";
import { LoginSection } from "@/registry/infinity-ui/login-section";

const redHat = Red_Hat_Display({ subsets: ["latin"] });

export default function LoginSectionDemo() {
  return (
    <LoginSection
      fontClass={redHat.className}
      logoText="Open Review"
      logoLetter="R"
      subtitle="Real-time AI reviews for your pull requests"
      badge="Early Access"
      badgeDesc="Be one of the first 100 founding users."
      title={"Your Code Is Ready.\nShip Better Code, Faster."}
      description="Sign in to automate code reviews, catch bugs early, and ship with confidence. Get started now."
      btnLabel="Continue with GitHub"
      imageSrc="/blocks/auth.webp"
      imageTitle={"Automate the Tedious.\nFocus on the Creative."}
      imageDesc="Join the next generation of engineers shipping high-integrity code without the manual overhead."
      accentColor="#f97316"
    />
  );
}

import { Space_Grotesk } from "next/font/google";
import { LoginSection } from "@/registry/infinity-ui/login-section";

const spaceGrotesk = Space_Grotesk({ subsets: ["latin"] });

export default function LoginDevopsDemo() {
  return (
    <LoginSection
      fontClass={spaceGrotesk.className}
      logoText="DevOps Cloud"
      logoLetter="C"
      subtitle="Scale serverless container orchestration"
      badge="Beta Console"
      badgeDesc="99.99% uptime SLA guarantee."
      title={"Command Your Cloud.\nOptimize Workloads."}
      description="Log in to query system resources, deploy microservices, and review telemetry logs in real-time."
      btnLabel="Connect with Google"
      imageSrc="/blocks/login-devops.png"
      imageTitle={"Deploy Globally.\nScale Effortlessly."}
      imageDesc="Unleash developers with high-performance server clusters and zero configuration pipelines."
      accentColor="#556885"
    />
  );
}

import { Plus_Jakarta_Sans } from "next/font/google";
import { LoginSection } from "@/registry/infinity-ui/login-section";

const jakarta = Plus_Jakarta_Sans({ subsets: ["latin"] });

export default function LoginEcoDemo() {
  return (
    <LoginSection
      fontClass={jakarta.className}
      logoText="Eco Track"
      logoLetter="E"
      subtitle="Drive green carbon metrics tracking"
      badge="Co2 Audit"
      badgeDesc="Compliant with ISO 14064."
      title={"Track Emissions.\nSustain Growth."}
      description="Log in to generate audit trails, analyze resource consumption, and build sustainable tech stacks."
      btnLabel="Sign in with Microsoft"
      imageSrc="/blocks/login-eco.png"
      imageTitle={"Green Engineering.\nSustained Integrity."}
      imageDesc="Reduce compliance overhead by tracking green metrics directly inside your CI pipelines."
      accentColor="#a17f71"
    />
  );
}