neodyland/tksm-ndy-mc-proj-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance animations and transitions for announcements and layout components

Browse Source
This commit is contained in:
tuna2134
2026-03-29 05:05:45 +00:00
parent 47876ad3d0
commit 88bfefd09c
4 changed files with 20 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/announcements/[slug]/page.tsx
View File

@@ -43,7 +43,7 @@ export default async function AnnouncementDetailPage({ params }: PageProps) {
return ( return (
<article className="mx-auto flex w-full max-w-4xl flex-1 flex-col gap-6 px-4 py-8 sm:px-8 sm:py-12"> <article className="mx-auto flex w-full max-w-4xl flex-1 flex-col gap-6 px-4 py-8 sm:px-8 sm:py-12">
<header className="rounded-3xl border bg-card/70 p-6 shadow-sm backdrop-blur sm:p-8"> <header className="rounded-3xl border bg-card/70 p-6 shadow-sm backdrop-blur motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-3 motion-safe:duration-700 sm:p-8">
<Badge variant="outline" className="mb-3"> <Badge variant="outline" className="mb-3">
お知らせ詳細 お知らせ詳細
</Badge> </Badge>
@@ -51,14 +51,14 @@ export default async function AnnouncementDetailPage({ params }: PageProps) {
<h1 className="mt-2 text-2xl font-semibold tracking-tight sm:text-4xl">{announcement.title}</h1> <h1 className="mt-2 text-2xl font-semibold tracking-tight sm:text-4xl">{announcement.title}</h1>
</header> </header>
<section className="rounded-3xl border bg-card p-6 shadow-sm sm:p-8"> <section className="rounded-3xl border bg-card p-6 shadow-sm motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-2 motion-safe:duration-700 sm:p-8">
<div <div
className="markdown-body space-y-4 text-sm leading-7 sm:text-base [&_a]:text-primary [&_a]:underline [&_a]:underline-offset-4 [&_blockquote]:border-l-2 [&_blockquote]:pl-3 [&_code]:rounded [&_code]:bg-muted [&_code]:px-1.5 [&_code]:py-0.5 [&_h1]:text-2xl [&_h1]:font-semibold [&_h2]:text-xl [&_h2]:font-semibold [&_h3]:text-lg [&_h3]:font-semibold [&_li]:ml-5 [&_ol]:list-decimal [&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:bg-muted [&_pre]:p-3 [&_ul]:list-disc" className="markdown-body space-y-4 text-sm leading-7 sm:text-base [&_a]:text-primary [&_a]:underline [&_a]:underline-offset-4 [&_blockquote]:border-l-2 [&_blockquote]:pl-3 [&_code]:rounded [&_code]:bg-muted [&_code]:px-1.5 [&_code]:py-0.5 [&_h1]:text-2xl [&_h1]:font-semibold [&_h2]:text-xl [&_h2]:font-semibold [&_h3]:text-lg [&_h3]:font-semibold [&_li]:ml-5 [&_ol]:list-decimal [&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:bg-muted [&_pre]:p-3 [&_ul]:list-disc"
dangerouslySetInnerHTML={{ __html: announcement.contentHtml }} dangerouslySetInnerHTML={{ __html: announcement.contentHtml }}
/> />
</section> </section>
<Link href="/announcements" className="text-sm text-primary underline underline-offset-4"> <Link href="/announcements" className="text-sm text-primary underline underline-offset-4 transition-transform duration-200 hover:-translate-y-0.5">
お知らせ一覧へ戻る お知らせ一覧へ戻る
</Link> </Link>
</article> </article>

6
app/announcements/page.tsx
View File

@@ -13,7 +13,7 @@ export default async function AnnouncementsPage() {
return ( return (
<div className="mx-auto flex w-full max-w-5xl flex-1 flex-col gap-6 px-4 py-8 sm:px-8 sm:py-12"> <div className="mx-auto flex w-full max-w-5xl flex-1 flex-col gap-6 px-4 py-8 sm:px-8 sm:py-12">
<header className="rounded-3xl border bg-card/70 p-6 shadow-sm backdrop-blur sm:p-8"> <header className="rounded-3xl border bg-card/70 p-6 shadow-sm backdrop-blur motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-3 motion-safe:duration-700 sm:p-8">
<Badge variant="outline" className="mb-3"> <Badge variant="outline" className="mb-3">
お知らせ お知らせ
</Badge> </Badge>
@@ -25,13 +25,13 @@ export default async function AnnouncementsPage() {
<section className="grid gap-4"> <section className="grid gap-4">
{announcements.map((item) => ( {announcements.map((item) => (
<article key={item.slug} className="rounded-2xl border border-foreground/10 bg-card p-5 shadow-xs sm:p-6"> <article className="rounded-2xl border border-foreground/10 bg-card p-5 shadow-xs transition-all duration-300 motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-4 hover:-translate-y-1 hover:shadow-md sm:p-6" key={item.slug}>
<header> <header>
<p className="text-xs text-muted-foreground">{item.date}</p> <p className="text-xs text-muted-foreground">{item.date}</p>
<h2 className="mt-1 text-xl font-semibold"> <h2 className="mt-1 text-xl font-semibold">
<Link <Link
href={`/announcements/${item.slug}`} href={`/announcements/${item.slug}`}
className="underline-offset-4 hover:underline" className="underline-offset-4 transition-colors duration-200 hover:text-primary hover:underline"
> >
{item.title} {item.title}
</Link> </Link>

8
app/layout.tsx
View File

@@ -32,16 +32,16 @@ export default function RootLayout({
className={cn("h-full", "antialiased", geistSans.variable, geistMono.variable, "font-sans", inter.variable)} className={cn("h-full", "antialiased", geistSans.variable, geistMono.variable, "font-sans", inter.variable)}
> >
<body className="min-h-full flex flex-col"> <body className="min-h-full flex flex-col">
<header className="sticky top-0 z-40 border-b bg-background/85 backdrop-blur"> <header className="sticky top-0 z-40 border-b bg-background/85 backdrop-blur motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-top-2 motion-safe:duration-500">
<div className="mx-auto flex w-full max-w-6xl items-center justify-between px-4 py-3 sm:px-8"> <div className="mx-auto flex w-full max-w-6xl items-center justify-between px-4 py-3 sm:px-8">
<Link href="/" className="text-sm font-semibold tracking-tight sm:text-base"> <Link href="/" className="text-sm font-semibold tracking-tight transition-colors duration-200 hover:text-primary sm:text-base">
Takasumi-Neodyマイクラサーバプロジェクト Takasumi-Neodyマイクラサーバプロジェクト
</Link> </Link>
<nav className="flex items-center gap-4 text-sm"> <nav className="flex items-center gap-4 text-sm">
<Link href="/" className="underline-offset-4 hover:underline"> <Link href="/" className="underline-offset-4 transition-colors duration-200 hover:text-primary hover:underline">
メインページ メインページ
</Link> </Link>
<Link href="/announcements" className="underline-offset-4 hover:underline"> <Link href="/announcements" className="underline-offset-4 transition-colors duration-200 hover:text-primary hover:underline">
お知らせ お知らせ
</Link> </Link>
</nav> </nav>

14
app/page.tsx
View File

@@ -30,7 +30,7 @@ export default function Home() {
<div className="relative flex min-h-full flex-1 flex-col overflow-x-clip bg-background"> <div className="relative flex min-h-full flex-1 flex-col overflow-x-clip bg-background">
<div className="pointer-events-none absolute inset-x-0 top-0 -z-10 h-[380px] bg-gradient-to-b from-emerald-200/40 via-sky-200/25 to-transparent blur-3xl dark:from-emerald-500/20 dark:via-sky-500/20" /> <div className="pointer-events-none absolute inset-x-0 top-0 -z-10 h-[380px] bg-gradient-to-b from-emerald-200/40 via-sky-200/25 to-transparent blur-3xl dark:from-emerald-500/20 dark:via-sky-500/20" />
<main className="mx-auto flex w-full max-w-6xl flex-1 flex-col gap-8 px-4 py-8 sm:gap-10 sm:px-8 sm:py-14"> <main className="mx-auto flex w-full max-w-6xl flex-1 flex-col gap-8 px-4 py-8 sm:gap-10 sm:px-8 sm:py-14">
<section className="rounded-3xl border bg-card/70 p-6 shadow-sm backdrop-blur sm:p-10"> <section className="rounded-3xl border bg-card/70 p-6 shadow-sm backdrop-blur motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-3 motion-safe:duration-700 sm:p-10">
<Badge variant="outline" className="mb-4 max-w-full text-[11px] sm:text-xs"> <Badge variant="outline" className="mb-4 max-w-full text-[11px] sm:text-xs">
Takasumi-Neodyマイクラサーバプロジェクト接続ガイド Takasumi-Neodyマイクラサーバプロジェクト接続ガイド
</Badge> </Badge>
@@ -42,7 +42,13 @@ export default function Home() {
統合版のどちらにも対応しています。 統合版のどちらにも対応しています。
</p> </p>
<div className="mt-6"> <div className="mt-6">
<Link href="/announcements" className={cn(buttonVariants({ variant: "outline" }))}> <Link
href="/announcements"
className={cn(
buttonVariants({ variant: "outline" }),
"transition-transform duration-200 hover:-translate-y-0.5"
)}
>
お知らせを見る お知らせを見る
</Link> </Link>
</div> </div>
@@ -54,7 +60,7 @@ export default function Home() {
return ( return (
<article <article
key={server.name} key={server.name}
className="rounded-2xl border border-foreground/10 bg-card p-5 shadow-xs sm:p-6" className="rounded-2xl border border-foreground/10 bg-card p-5 shadow-xs transition-all duration-300 motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-4 hover:-translate-y-1 hover:shadow-md sm:p-6"
> >
<header> <header>
<div className="mb-2 flex flex-col items-start gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-3"> <div className="mb-2 flex flex-col items-start gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-3">
@@ -90,7 +96,7 @@ export default function Home() {
})} })}
</section> </section>
<section className="rounded-3xl border bg-card p-6 shadow-sm sm:p-8"> <section className="rounded-3xl border bg-card p-6 shadow-sm motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-2 motion-safe:duration-700 sm:p-8">
<h2 className="text-xl font-semibold">接続手順</h2> <h2 className="text-xl font-semibold">接続手順</h2>
<Separator className="my-4" /> <Separator className="my-4" />
<ol className="space-y-3 text-sm leading-7 sm:text-base"> <ol className="space-y-3 text-sm leading-7 sm:text-base">