export default function BlogLoading() {
    return (
        <div className="page-frame py-20 sm:py-24">
            <div className="mx-auto max-w-[72rem] space-y-10 motion-safe:animate-pulse">
                <div className="space-y-4 border-b border-line pb-10">
                    <div className="h-3 w-20 rounded-full bg-accent-soft" />
                    <div className="h-14 w-2/3 rounded-[1rem] bg-paper-strong" />
                    <div className="h-5 w-1/2 rounded-full bg-paper-strong" />
                </div>
                <div className="space-y-8">
                    {Array.from({ length: 2 }).map((_, i) => (
                        <div key={i} className="grid gap-3 border-b border-line pb-6 md:grid-cols-[8rem_minmax(0,1fr)] md:gap-6">
                            <div className="h-3 w-20 rounded-full bg-accent-soft" />
                            <div className="space-y-3">
                                <div className="h-9 w-3/4 rounded-[0.9rem] bg-paper-strong" />
                                <div className="space-y-2">
                                    <div className="h-4 w-full rounded-full bg-paper-strong" />
                                    <div className="h-4 w-4/5 rounded-full bg-paper-strong" />
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </div>
    );
}
