Skip to content

Commit e77fcd3

Browse files
codexucodexu
committed
fix: 对齐首页自托管演示留白
1 parent a9e18ef commit e77fcd3

1 file changed

Lines changed: 41 additions & 52 deletions

File tree

‎components/self-hosted/markdown-sync-demo.tsx‎

Lines changed: 41 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -76,64 +76,53 @@ export function MarkdownSyncDemo({ lang }: { lang: DemoLanguage }) {
7676
const desktopText = Array.from(copy.sentence).slice(0, desktopCount).join("");
7777

7878
return (
79-
<div className="relative mx-auto w-full max-w-6xl overflow-visible bg-background">
80-
<NoteGenProductShowcase
81-
className="block h-auto w-full object-contain"
82-
priority
83-
/>
79+
<div className="mx-auto w-full max-w-6xl px-6 pb-6 md:px-8 md:pb-8 lg:px-12 lg:pb-12">
80+
<div className="relative w-full overflow-visible bg-background">
81+
<NoteGenProductShowcase
82+
className="block h-auto w-full object-contain"
83+
priority
84+
/>
8485

85-
<div className="absolute bottom-[11%] left-[30.6%] top-[53.5%] w-[31.5%] overflow-hidden bg-background pr-[2%]">
86-
<h4 className="mb-[2.2%] text-[clamp(6px,0.9vw,13px)] font-semibold">{copy.section}</h4>
87-
<p className="min-h-[1.5em] text-[clamp(5px,0.72vw,10px)] leading-relaxed text-muted-foreground">
88-
{desktopText}
89-
{desktopCount > 0 && desktopCount < sentenceLength ? <RemoteCursor label={copy.remoteDevice} /> : null}
90-
</p>
91-
<div className="mt-[6%] flex flex-col gap-[3%] text-[clamp(4px,0.57vw,8px)] leading-relaxed text-muted-foreground">
92-
{copy.mobileSchedule.map(([time, item, description]) => (
93-
<div key={time}>
94-
<p className="font-semibold text-foreground"><span>{time}</span>　{item}</p>
95-
<p className="mt-[1.5%]">{description}</p>
96-
</div>
97-
))}
98-
</div>
99-
<h4 className="mt-[5%] border-t pt-[3%] text-[clamp(5px,0.72vw,10px)] font-semibold">{copy.mobileNextDay}</h4>
100-
</div>
101-
102-
<div className="absolute bottom-[9.7%] left-[77.2%] top-[35.1%] w-[19.7%] overflow-hidden bg-background px-[1.5%] py-[2.4%]">
103-
<div className="flex h-full flex-col">
104-
<h3 className="text-[clamp(7px,1.05vw,15px)] font-bold tracking-tight">{copy.mobileTitle}</h3>
105-
<p className="mt-[6%] text-[clamp(5px,0.65vw,9px)] leading-relaxed text-muted-foreground">{copy.mobileIntro}</p>
106-
<h4 className="mt-[8%] text-[clamp(5px,0.72vw,10px)] font-semibold">{copy.mobileOverview}</h4>
107-
<ul className="mt-[3%] flex list-disc flex-col gap-1 pl-[7%] text-[clamp(5px,0.6vw,8px)] leading-relaxed text-muted-foreground">
108-
{copy.mobilePoints.map((point) => <li key={point}>{point}</li>)}
109-
</ul>
110-
<h4 className="mt-[10%] text-[clamp(5px,0.72vw,10px)] font-semibold">{copy.mobileSection}</h4>
111-
<p className="mt-[4%] min-h-[3em] text-[clamp(5px,0.65vw,9px)] leading-relaxed text-muted-foreground">
112-
{mobileText}
113-
{mobileCount > 0 && mobileCount < sentenceLength ? <LocalCaret /> : null}
86+
<div className="absolute bottom-[11%] left-[30.6%] top-[53.5%] w-[31.5%] overflow-hidden bg-background pr-[2%]">
87+
<h4 className="mb-[2.2%] text-[clamp(6px,0.9vw,13px)] font-semibold">{copy.section}</h4>
88+
<p className="min-h-[1.5em] text-[clamp(5px,0.72vw,10px)] leading-relaxed text-muted-foreground">
89+
{desktopText}
90+
{desktopCount > 0 && desktopCount < sentenceLength ? <RemoteCursor label={copy.remoteDevice} /> : null}
11491
</p>
115-
<h4 className="mt-[8%] text-[clamp(5px,0.72vw,10px)] font-semibold">{copy.mobileDay}</h4>
116-
<div className="mt-[3%] flex flex-col gap-1.5 text-[clamp(4px,0.55vw,8px)] leading-relaxed text-muted-foreground">
117-
{copy.mobileSchedule.map(([time, item]) => (
118-
<p key={time}><span className="font-semibold text-foreground">{time}</span>　{item}</p>
92+
<div className="mt-[6%] flex flex-col gap-[3%] text-[clamp(4px,0.57vw,8px)] leading-relaxed text-muted-foreground">
93+
{copy.mobileSchedule.map(([time, item, description]) => (
94+
<div key={time}>
95+
<p className="font-semibold text-foreground"><span>{time}</span>　{item}</p>
96+
<p className="mt-[1.5%]">{description}</p>
97+
</div>
11998
))}
12099
</div>
121-
<h4 className="mt-[8%] border-t pt-[5%] text-[clamp(5px,0.72vw,10px)] font-semibold">{copy.mobileNextDay}</h4>
100+
<h4 className="mt-[5%] border-t pt-[3%] text-[clamp(5px,0.72vw,10px)] font-semibold">{copy.mobileNextDay}</h4>
122101
</div>
123-
</div>
124102

125-
<div
126-
aria-hidden="true"
127-
className="pointer-events-none absolute inset-x-0 bottom-0 z-20 h-[6%] bg-gradient-to-b from-transparent via-background/65 to-background"
128-
/>
129-
<div
130-
aria-hidden="true"
131-
className="pointer-events-none absolute inset-y-0 left-0 z-20 w-[2.5%] bg-gradient-to-r from-background to-transparent"
132-
/>
133-
<div
134-
aria-hidden="true"
135-
className="pointer-events-none absolute inset-y-0 right-0 z-20 w-[2.5%] bg-gradient-to-l from-background to-transparent"
136-
/>
103+
<div className="absolute bottom-[9.7%] left-[77.2%] top-[35.1%] w-[19.7%] overflow-hidden bg-background px-[1.5%] py-[2.4%]">
104+
<div className="flex h-full flex-col">
105+
<h3 className="text-[clamp(7px,1.05vw,15px)] font-bold tracking-tight">{copy.mobileTitle}</h3>
106+
<p className="mt-[6%] text-[clamp(5px,0.65vw,9px)] leading-relaxed text-muted-foreground">{copy.mobileIntro}</p>
107+
<h4 className="mt-[8%] text-[clamp(5px,0.72vw,10px)] font-semibold">{copy.mobileOverview}</h4>
108+
<ul className="mt-[3%] flex list-disc flex-col gap-1 pl-[7%] text-[clamp(5px,0.6vw,8px)] leading-relaxed text-muted-foreground">
109+
{copy.mobilePoints.map((point) => <li key={point}>{point}</li>)}
110+
</ul>
111+
<h4 className="mt-[10%] text-[clamp(5px,0.72vw,10px)] font-semibold">{copy.mobileSection}</h4>
112+
<p className="mt-[4%] min-h-[3em] text-[clamp(5px,0.65vw,9px)] leading-relaxed text-muted-foreground">
113+
{mobileText}
114+
{mobileCount > 0 && mobileCount < sentenceLength ? <LocalCaret /> : null}
115+
</p>
116+
<h4 className="mt-[8%] text-[clamp(5px,0.72vw,10px)] font-semibold">{copy.mobileDay}</h4>
117+
<div className="mt-[3%] flex flex-col gap-1.5 text-[clamp(4px,0.55vw,8px)] leading-relaxed text-muted-foreground">
118+
{copy.mobileSchedule.map(([time, item]) => (
119+
<p key={time}><span className="font-semibold text-foreground">{time}</span>　{item}</p>
120+
))}
121+
</div>
122+
<h4 className="mt-[8%] border-t pt-[5%] text-[clamp(5px,0.72vw,10px)] font-semibold">{copy.mobileNextDay}</h4>
123+
</div>
124+
</div>
125+
</div>
137126
</div>
138127
);
139128
}

0 commit comments

Comments
 (0)