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