Riccardo Giorato
69 lines
2.4 KiB
TypeScript
69 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { TOGETHER_LINK } from "@/lib/utils";
|
|
|
|
export function LandingHero() {
|
|
const [pagesLast24h, setPagesLast24h] = useState<number | null>(null);
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
fetch("/api/stats")
|
|
.then((res) => (res.ok ? res.json() : null))
|
|
.then((data) => {
|
|
if (!cancelled && data && typeof data.pagesLast24h === "number") {
|
|
setPagesLast24h(data.pagesLast24h);
|
|
}
|
|
})
|
|
.catch(() => {});
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, []);
|
|
|
|
const roundedCount =
|
|
pagesLast24h !== null && pagesLast24h >= 10
|
|
? Math.floor(pagesLast24h / 10) * 10
|
|
: null;
|
|
|
|
return (
|
|
<header className="relative py-8 sm:py-12 md:py-16 lg:py-0">
|
|
<div className="relative z-10">
|
|
<div className="lg:text-left text-center">
|
|
<a
|
|
href={TOGETHER_LINK}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex justify-center items-center gap-1 px-2.5 py-1 rounded-full border border-border glass-panel mb-4 sm:mb-6 w-fit"
|
|
>
|
|
<span className="text-[10px] font-medium text-muted-foreground tracking-[-0.015em]">
|
|
Powered by
|
|
</span>
|
|
<img src="/poweredby.png" className="h-[18px]"/>
|
|
</a>
|
|
|
|
<h1 className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl text-foreground uppercase mb-4 sm:mb-5 tracking-wide font-heading font-semibold leading-tight sm:leading-[5.2rem]">
|
|
Create stunning{" "}
|
|
<span className="text-indigo font-semibold">comics</span>
|
|
</h1>
|
|
|
|
<p className="text-muted-foreground leading-relaxed max-w-md mx-auto lg:mx-0 tracking-[-0.02em] px-4 sm:px-0 text-sm">
|
|
Describe your scene, choose a style, and let AI render professional
|
|
comic panels instantly.
|
|
</p>
|
|
|
|
{roundedCount !== null && (
|
|
<p className="text-muted-foreground leading-relaxed max-w-md mx-auto lg:mx-0 tracking-[-0.02em] px-4 sm:px-0 text-sm mt-2">
|
|
More than{" "}
|
|
<span className="text-indigo font-semibold">
|
|
{roundedCount.toLocaleString()}
|
|
</span>{" "}
|
|
comic pages have been generated in the last 24 hours.
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|