Beautifully designed, production-ready.

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

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

export default function HeroSectionDemo() {
  return (
    <HeroSection
      className="h-[600px]"
      fontClass={redHat.className}
      imageSrc="/blocks/hero.png"
      ditherSrc="/blocks/hero-dither.png"
      accentColor="#ff7a00"
      subtitle="Automated Code Review"
      title="Review smarter. Ship faster with AI."
      description="Automate code reviews with AI. Catch bugs early and get instant feedback on pull requests."
      btnLabel="Start Free"
      secondBtnLabel="Watch Demo"
      href="#"
    />
  );
}

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

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

export default function HeroDevopsDemo() {
  return (
    <HeroSection
      className="h-[600px]"
      fontClass={spaceGrotesk.className}
      imageSrc="/blocks/hero-devops.png"
      ditherSrc="/blocks/hero-devops-dither.png"
      accentColor="#446d9d"
      subtitle="DevOps Cloud Control"
      title="Command your infrastructure. Scale dynamically."
      description="Orchestrate workloads, monitor latency, and track server logs using our unified DevOps dashboard."
      btnLabel="Launch Console"
      secondBtnLabel="Read Docs"
      href="#"
    />
  );
}

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

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

export default function HeroAnalyticsDemo() {
  return (
    <HeroSection
      className="h-[600px]"
      fontClass={jakarta.className}
      imageSrc="/blocks/hero-analytics.png"
      ditherSrc="/blocks/hero-analytics-dither.png"
      accentColor="#635a1b"
      subtitle="Eco-Tech Analytics"
      title="Track carbon emissions. Drive sustainable growth."
      description="Measure environmental impact, optimize resource distributions, and generate compliance reports."
      btnLabel="Explore Impact"
      secondBtnLabel="View Dashboard"
      href="#"
    />
  );
}

import { Syne } from "next/font/google";
import { HeroSection } from "@/registry/infinity-ui/hero-section";

const syne = Syne({ subsets: ["latin"] });

export default function HeroStudioDemo() {
  return (
    <HeroSection
      className="h-[600px]"
      fontClass={syne.className}
      imageSrc="/blocks/hero-studio.png"
      ditherSrc="/blocks/hero-studio-dither.png"
      accentColor="#cb7d53"
      subtitle="Creative Brand Studio"
      title="Elevate design aesthetics. Build interfaces."
      description="Draft prototypes, sandbox typography, and collaborate in real-time with responsive UI layout workspaces."
      btnLabel="Start Project"
      secondBtnLabel="Meet Studio"
      href="#"
    />
  );
}

import { Manrope } from "next/font/google";
import { HeroSection } from "@/registry/infinity-ui/hero-section";

const manrope = Manrope({ subsets: ["latin"] });

export default function HeroWellnessDemo() {
  return (
    <HeroSection
      className="h-[600px]"
      fontClass={manrope.className}
      imageSrc="/blocks/hero-wellness.png"
      ditherSrc="/blocks/hero-wellness-dither.png"
      accentColor="#ba6143"
      subtitle="Habit & Mind Alignment"
      title="Calm your mind. Cultivate wellness routines."
      description="Integrate custom mindfulness exercises, habit trackers, and wellness schedules into your daily life."
      btnLabel="Begin Journey"
      secondBtnLabel="Meet Aura"
      href="#"
    />
  );
}

import { Space_Mono } from "next/font/google";
import { HeroSection } from "@/registry/infinity-ui/hero-section";

const spaceMono = Space_Mono({ weight: ["400", "700"], subsets: ["latin"] });

export default function HeroFintechDemo() {
  return (
    <HeroSection
      className="h-[600px]"
      fontClass={spaceMono.className}
      imageSrc="/blocks/hero-fintech.png"
      ditherSrc="/blocks/hero-fintech-dither.png"
      accentColor="#475c6a"
      subtitle="Quantitative Fintech Ledger"
      title="Execute algorithmic trades. Audit ledger sheets."
      description="Monitor currency indices, query transactions, and run high-frequency digital audits with microsecond precision."
      btnLabel="Open Ledger"
      secondBtnLabel="API SDKs"
      href="#"
    />
  );
}

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"
    />
  );
}