songtianlun/prmbr-image-mksaas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: update pages layout & move container into pages

Browse Source
This commit is contained in:
javayhu 2025-05-04 00:04:14 +08:00
parent 80fe789b9d
commit c1dbad14ec
6 changed files with 176 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
src/app/[locale]/(marketing)/(pages)/about/page.tsx
View File

@ -1,3 +1,4 @@
import Container from '@/components/layout/container';
import { BlurFadeDemo } from '@/components/magicui/example/blur-fade-example';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Button, buttonVariants } from '@/components/ui/button';
@ -33,70 +34,74 @@ export default async function AboutPage() {
const t = await getTranslations('AboutPage');
return (
<div className="max-w-4xl mx-auto space-y-8">
{/* about section */}
<div className="relative max-w-(--breakpoint-md) mx-auto mb-24 mt-8 md:mt-16">
<div className="mx-auto flex flex-col justify-between">
<div className="grid gap-8 sm:grid-cols-2">
{/* avatar and name */}
<div className="flex items-center gap-8">
<Avatar className="size-32 p-0.5">
<AvatarImage
className="rounded-full border-4 border-gray-200"
src="/logo.png"
alt="Avatar"
/>
<AvatarFallback>
<div className="size-32 text-muted-foreground" />
</AvatarFallback>
</Avatar>
<div>
<h1 className="text-4xl text-foreground">{t('authorName')}</h1>
<p className="text-base text-muted-foreground mt-2">
{t('authorBio')}
</p>
<Container className="py-16 px-4">
<div className="max-w-4xl mx-auto space-y-8">
{/* about section */}
<div className="relative max-w-(--breakpoint-md) mx-auto mb-24 mt-8 md:mt-16">
<div className="mx-auto flex flex-col justify-between">
<div className="grid gap-8 sm:grid-cols-2">
{/* avatar and name */}
<div className="flex items-center gap-8">
<Avatar className="size-32 p-0.5">
<AvatarImage
className="rounded-full border-4 border-gray-200"
src="/logo.png"
alt="Avatar"
/>
<AvatarFallback>
<div className="size-32 text-muted-foreground" />
</AvatarFallback>
</Avatar>
<div>
<h1 className="text-4xl text-foreground">
{t('authorName')}
</h1>
<p className="text-base text-muted-foreground mt-2">
{t('authorBio')}
</p>
</div>
</div>
</div>
{/* introduction */}
<div>
<p className="mb-8 text-base text-muted-foreground">
{t('introduction')}
</p>
{/* introduction */}
<div>
<p className="mb-8 text-base text-muted-foreground">
{t('introduction')}
</p>
<div className="flex items-center gap-4">
{websiteConfig.metadata.social?.twitter && (
<a
href={websiteConfig.metadata.social.twitter}
target="_blank"
rel="noopener noreferrer"
className={cn(
buttonVariants({ variant: 'outline' }),
'rounded-lg cursor-pointer'
)}
>
<TwitterIcon className="mr-1 size-4" />
{t('followMe')}
</a>
)}
{websiteConfig.mail.supportEmail && (
<div className="flex items-center gap-4">
<Button className="rounded-lg cursor-pointer">
<MailIcon className="mr-1 size-4" />
<a href={`mailto:${websiteConfig.mail.supportEmail}`}>
{t('talkWithMe')}
</a>
</Button>
</div>
)}
<div className="flex items-center gap-4">
{websiteConfig.metadata.social?.twitter && (
<a
href={websiteConfig.metadata.social.twitter}
target="_blank"
rel="noopener noreferrer"
className={cn(
buttonVariants({ variant: 'outline' }),
'rounded-lg cursor-pointer'
)}
>
<TwitterIcon className="mr-1 size-4" />
{t('followMe')}
</a>
)}
{websiteConfig.mail.supportEmail && (
<div className="flex items-center gap-4">
<Button className="rounded-lg cursor-pointer">
<MailIcon className="mr-1 size-4" />
<a href={`mailto:${websiteConfig.mail.supportEmail}`}>
{t('talkWithMe')}
</a>
</Button>
</div>
)}
</div>
</div>
</div>
</div>
</div>
</div>
{/* image section */}
<BlurFadeDemo />
</div>
{/* image section */}
<BlurFadeDemo />
</div>
</Container>
);
}

49
src/app/[locale]/(marketing)/(pages)/changelog/page.tsx
View File

@ -9,6 +9,7 @@ import { getTranslations } from 'next-intl/server';
import { notFound } from 'next/navigation';
import '@/styles/mdx.css';
import Container from '@/components/layout/container';
export async function generateMetadata({
params,
@ -42,30 +43,32 @@ export default async function ChangelogPage(props: NextPageProps) {
const t = await getTranslations('ChangelogPage');
return (
<div className="max-w-4xl mx-auto space-y-8">
{/* Header */}
<div className="space-y-4">
<h1 className="text-center text-3xl font-bold tracking-tight">
{t('title')}
</h1>
<p className="text-center text-lg text-muted-foreground">
{t('subtitle')}
</p>
</div>
<Container className="py-16 px-4">
<div className="max-w-4xl mx-auto space-y-8">
{/* Header */}
<div className="space-y-4">
<h1 className="text-center text-3xl font-bold tracking-tight">
{t('title')}
</h1>
<p className="text-center text-lg text-muted-foreground">
{t('subtitle')}
</p>
</div>
{/* Releases */}
<div className="mt-8">
{releases.map((release) => (
<ReleaseCard
key={release.slug}
title={release.title}
description={release.description}
date={release.date}
version={release.version}
content={release.body}
/>
))}
{/* Releases */}
<div className="mt-8">
{releases.map((release) => (
<ReleaseCard
key={release.slug}
title={release.title}
description={release.description}
date={release.date}
version={release.version}
content={release.body}
/>
))}
</div>
</div>
</div>
</Container>
);
}

29
src/app/[locale]/(marketing)/(pages)/contact/page.tsx
View File

@ -1,4 +1,5 @@
import { ContactFormCard } from '@/components/contact/contact-form-card';
import Container from '@/components/layout/container';
import { constructMetadata } from '@/lib/metadata';
import { getUrlWithLocale } from '@/lib/urls/urls';
import type { Metadata } from 'next';
@ -28,19 +29,21 @@ export default async function ContactPage() {
const t = await getTranslations('ContactPage');
return (
<div className="mx-auto max-w-4xl space-y-8 pb-16">
{/* Header */}
<div className="space-y-4">
<h1 className="text-center text-3xl font-bold tracking-tight">
{t('title')}
</h1>
<p className="text-center text-lg text-muted-foreground">
{t('subtitle')}
</p>
</div>
<Container className="py-16 px-4">
<div className="mx-auto max-w-4xl space-y-8 pb-16">
{/* Header */}
<div className="space-y-4">
<h1 className="text-center text-3xl font-bold tracking-tight">
{t('title')}
</h1>
<p className="text-center text-lg text-muted-foreground">
{t('subtitle')}
</p>
</div>
{/* Form */}
<ContactFormCard />
</div>
{/* Form */}
<ContactFormCard />
</div>
</Container>
);
}

7
src/app/[locale]/(marketing)/(pages)/layout.tsx
View File

@ -1,10 +1,5 @@
import Container from '@/components/layout/container';
import type { PropsWithChildren } from 'react';
export default function PageLayout({ children }: PropsWithChildren) {
return (
<Container className="py-16 px-4">
<div className="mx-auto">{children}</div>
</Container>
);
return <div className="mx-auto">{children}</div>;
}

107
src/app/[locale]/(marketing)/(pages)/magicui/page.tsx
View File

@ -1,3 +1,4 @@
import Container from '@/components/layout/container';
import { AnimatedGradientTextDemo } from '@/components/magicui/example/animated-gradient-text-example';
import { AnimatedGridPatternDemo } from '@/components/magicui/example/animated-grid-pattern-example';
import { AnimatedListDemo } from '@/components/magicui/example/animated-list-example';
@ -29,58 +30,60 @@ import { WordRotateDemo } from '@/components/magicui/example/word-rotate-example
*/
export default async function MagicuiPage() {
return (
<div className="mx-auto space-y-8">
<RippleDemo />
<div className="grid md:grid-cols-2 gap-4">
<MarqueeDemoVertical />
<AnimatedListDemo />
<Container className="py-16 px-4">
<div className="mx-auto space-y-8">
<RippleDemo />
<div className="grid md:grid-cols-2 gap-4">
<MarqueeDemoVertical />
<AnimatedListDemo />
</div>
<div className="grid md:grid-cols-4 gap-8">
<div className="flex items-center justify-center">
<AvatarCirclesDemo />
</div>
<div className="flex items-center justify-center">
<AnimatedGradientTextDemo />
</div>
<div className="flex items-center justify-center">
<AnimatedShinyTextDemo />
</div>
<div className="flex items-center justify-center">
<AnimatedSubscribeButtonDemo />
</div>
<div className="flex items-center justify-center">
<ShimmerButtonDemo />
</div>
<div className="flex items-center justify-center">
<ShinyButtonDemo />
</div>
<div className="flex items-center justify-center">
<RainbowButtonDemo />
</div>
<div className="flex items-center justify-center">
<PulsatingButtonDemo />
</div>
<div className="flex items-center justify-center">
<NumberTickerDemo />
</div>
<div className="flex items-center justify-center">
<InteractiveHoverButtonDemo />
</div>
<div className="flex items-center justify-center">
<HyperTextDemo />
</div>
<div className="flex items-center justify-center">
<WordRotateDemo />
</div>
</div>
<TweetCardDemo id="1678577280489234432" />
<BlurFadeDemo />
<BentoDemo />
<DotPatternDemo />
<GridPatternDemo />
<AnimatedGridPatternDemo />
<InteractiveGridPatternDemo />
<HeroVideoDialogDemoTopInBottomOut />
</div>
<div className="grid md:grid-cols-4 gap-8">
<div className="flex items-center justify-center">
<AvatarCirclesDemo />
</div>
<div className="flex items-center justify-center">
<AnimatedGradientTextDemo />
</div>
<div className="flex items-center justify-center">
<AnimatedShinyTextDemo />
</div>
<div className="flex items-center justify-center">
<AnimatedSubscribeButtonDemo />
</div>
<div className="flex items-center justify-center">
<ShimmerButtonDemo />
</div>
<div className="flex items-center justify-center">
<ShinyButtonDemo />
</div>
<div className="flex items-center justify-center">
<RainbowButtonDemo />
</div>
<div className="flex items-center justify-center">
<PulsatingButtonDemo />
</div>
<div className="flex items-center justify-center">
<NumberTickerDemo />
</div>
<div className="flex items-center justify-center">
<InteractiveHoverButtonDemo />
</div>
<div className="flex items-center justify-center">
<HyperTextDemo />
</div>
<div className="flex items-center justify-center">
<WordRotateDemo />
</div>
</div>
<TweetCardDemo id="1678577280489234432" />
<BlurFadeDemo />
<BentoDemo />
<DotPatternDemo />
<GridPatternDemo />
<AnimatedGridPatternDemo />
<InteractiveGridPatternDemo />
<HeroVideoDialogDemoTopInBottomOut />
</div>
</Container>
);
}

29
src/app/[locale]/(marketing)/(pages)/waitlist/page.tsx
View File

@ -1,3 +1,4 @@
import Container from '@/components/layout/container';
import { WaitlistFormCard } from '@/components/waitlist/waitlist-form-card';
import { constructMetadata } from '@/lib/metadata';
import { getUrlWithLocale } from '@/lib/urls/urls';
@ -24,19 +25,21 @@ export default async function WaitlistPage() {
const t = await getTranslations('WaitlistPage');
return (
<div className="mx-auto max-w-4xl space-y-8 pb-16">
{/* Header */}
<div className="space-y-4">
<h1 className="text-center text-3xl font-bold tracking-tight">
{t('title')}
</h1>
<h2 className="text-center text-lg text-muted-foreground">
{t('subtitle')}
</h2>
</div>
<Container className="py-16 px-4">
<div className="mx-auto max-w-4xl space-y-8 pb-16">
{/* Header */}
<div className="space-y-4">
<h1 className="text-center text-3xl font-bold tracking-tight">
{t('title')}
</h1>
<h2 className="text-center text-lg text-muted-foreground">
{t('subtitle')}
</h2>
</div>
{/* Form */}
<WaitlistFormCard />
</div>
{/* Form */}
<WaitlistFormCard />
</div>
</Container>
);
}