Skip to content

Commit 31ec438

Browse files
datlechindatlechin
authored
Merge pull request #7 from TableProApp/refactor/landing-consistency
Make the site consistent with itself: one header rhythm, one copy of each component, one value per role
2 parents 4f7e906 + 033ad34 commit 31ec438

25 files changed

Lines changed: 800 additions & 1019 deletions

‎resources/css/app.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,14 @@
8585
* which also meant the dark rule sat ~13% heavier than its light counterpart
8686
* for no reason. Dark is 0.08 here so the two match optically.
8787
*/
88+
/*
89+
* One step off the base ground. Serves both the raised section tone and any
90+
* inset panel — a code block, a segmented-control track — because those are
91+
* the same visual idea seen from opposite sides, and they were previously
92+
* five different raw alpha pairs.
93+
*/
94+
--color-surface-raised: var(--surface-raised);
95+
8896
--color-rule: var(--rule);
8997
--color-rule-strong: var(--rule-strong);
9098

@@ -303,6 +311,18 @@ html {
303311
* its own reduced-motion branch rather than relying on this block.
304312
*/
305313

314+
/*
315+
* The accent tint scale, recorded because it was seven values in two syntaxes.
316+
*
317+
* /5 a surface marked as the featured one — the Starter card, the TablePro
318+
* column in either comparison table
319+
* /10 a filled chip or step marker, and the selected state of a control
320+
*
321+
* `safety.tsx` keeps its own /[0.02] /[0.04] /[0.06] ladder. That is not drift:
322+
* the tint there encodes how far up the six-level ladder a row sits, so the
323+
* steps have to be finer than the scale above and have to be evenly spaced.
324+
*/
325+
306326
/*
307327
* Row selection, borrowed from the product's own grid.
308328
*

‎resources/js/components/landing/agents-mcp.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { useEffect, useRef, useState } from 'react';
22
import { Check, Copy } from 'lucide-react';
33
import { toast } from 'sonner';
4+
import { CodeBlock } from '@/components/ui/code';
45
import Container from '@/components/ui/container';
56
import { FullLine } from '@/components/ui/full-line';
67
import { Ledger, LedgerRow } from '@/components/ui/ledger';
@@ -141,7 +142,8 @@ export default function AgentsMcp() {
141142
<CopyButton />
142143
</div>
143144

144-
<pre className="overflow-x-auto p-4 font-mono text-xs leading-relaxed">
145+
<CodeBlock label="MCP client configuration">
146+
<pre className="p-4 font-mono text-xs leading-relaxed">
145147
<code>
146148
<span className="text-muted-foreground">{'{'}</span>
147149
{'\n'}
@@ -168,7 +170,8 @@ export default function AgentsMcp() {
168170
{'\n'}
169171
<span className="text-muted-foreground">{'}'}</span>
170172
</code>
171-
</pre>
173+
</pre>
174+
</CodeBlock>
172175

173176
<p className="border-t border-rule px-4 py-3 font-mono text-xs text-muted-foreground">
174177
No token in the config. The bridge launches TablePro if it is not already running.

‎resources/js/components/landing/download-rail.tsx‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,8 @@
11
import Button from '@/components/ui/button';
22
import Container from '@/components/ui/container';
33
import { FullLine } from '@/components/ui/full-line';
4+
import { AppleGlyph } from '@/components/ui/glyph';
45

5-
function AppleGlyph() {
6-
return (
7-
<svg className="size-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
8-
<path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" />
9-
</svg>
10-
);
11-
}
126

137
interface Props {
148
/**

‎resources/js/components/landing/faq.tsx‎

Lines changed: 2 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import Container from '@/components/ui/container';
22
import { FullLine } from '@/components/ui/full-line';
3+
import FaqList from '@/components/ui/faq-list';
34
import SectionShell from '@/components/ui/section-shell';
45
import { faqs as defaultFaqs, type FaqItem } from '@/data/faqs';
56

@@ -10,41 +11,19 @@ interface Props {
1011
headlineMuted?: string;
1112
}
1213

13-
function Column({ items, className }: { items: FaqItem[]; className?: string }) {
14-
return (
15-
<div className={className}>
16-
{items.map((faq, i) => (
17-
<div
18-
key={faq.question}
19-
className={`p-6 sm:p-8 ${i < items.length - 1 ? 'border-b border-rule' : ''}`}
20-
>
21-
<h3 className="text-base font-semibold text-foreground">{faq.question}</h3>
22-
<p className="mt-2 text-sm leading-relaxed text-muted-foreground">{faq.answer}</p>
23-
</div>
24-
))}
25-
</div>
26-
);
27-
}
2814

2915
export default function FAQ({
3016
items = defaultFaqs,
3117
headline = 'Questions people actually ask.',
3218
headlineMuted = 'Short answers.',
3319
}: Props) {
34-
const mid = Math.ceil(items.length / 2);
3520

3621
return (
3722
<SectionShell tier="reference"
3823
tone="raised" id="faq" label="FAQ" headline={headline} headlineMuted={headlineMuted}>
3924
<FullLine />
4025
<Container>
41-
<div className="grid grid-cols-1 md:grid-cols-2">
42-
<Column
43-
items={items.slice(0, mid)}
44-
className="border-b border-rule md:border-r md:border-b-0"
45-
/>
46-
<Column items={items.slice(mid)} />
47-
</div>
26+
<FaqList items={items} />
4827
</Container>
4928
<FullLine />
5029
</SectionShell>

‎resources/js/components/landing/footer-cta.tsx‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { FullLine } from '@/components/ui/full-line';
77
import { cellBorders, GridCell, type ColumnMap } from '@/components/ui/grid-cell';
88
import SectionShell from '@/components/ui/section-shell';
99
import Button from '@/components/ui/button';
10+
import { AppleGlyph } from '@/components/ui/glyph';
1011

1112
interface FlashMessage {
1213
type: 'success' | 'warning' | 'error';
@@ -34,13 +35,6 @@ function FlashStatus({ flash }: { flash?: FlashMessage | null }) {
3435
);
3536
}
3637

37-
function AppleGlyph() {
38-
return (
39-
<svg className="size-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
40-
<path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" />
41-
</svg>
42-
);
43-
}
4438

4539
/**
4640
* A minimal stand-in for Inertia's useForm, used by the two anonymous email
@@ -240,7 +234,7 @@ export default function FooterCTA() {
240234
</div>
241235

242236
<div className="mt-4 flex items-center gap-2">
243-
<code className="min-w-0 flex-1 overflow-x-auto rounded-lg border border-rule px-3 py-2 font-mono text-xs whitespace-nowrap text-muted-foreground">
237+
<code tabIndex={0} className="min-w-0 flex-1 overflow-x-auto rounded-lg border border-rule px-3 py-2 font-mono text-xs whitespace-nowrap text-muted-foreground">
244238
{BREW_COMMAND}
245239
</code>
246240
<button

‎resources/js/components/landing/footer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ export default function Footer() {
115115

116116
{/* Copyright */}
117117
<Container>
118-
<p className="py-6 pl-4 text-muted-foreground">
118+
<p className="px-4 py-6 text-muted-foreground">
119119
&copy; {new Date().getFullYear()} TablePro. All rights reserved.
120120
</p>
121121
</Container>

‎resources/js/components/landing/header.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { useState, useEffect, useRef } from 'react';
22
import { buttonClasses } from '@/components/ui/button';
33
import MobileNav from './mobile-nav';
4+
import { AppleGlyph } from '@/components/ui/glyph';
45

56
interface Props {
67
/**
@@ -150,7 +151,7 @@ export default function Header({ githubStars }: Props) {
150151
role="menu"
151152
aria-label="Download options"
152153
onKeyDown={handleMenuKeyDown}
153-
className={`absolute right-0 mt-2 w-56 overflow-hidden rounded-xl border border-rule bg-background shadow-xl transition-all ${downloadOpen ? 'visible opacity-100 translate-y-0' : 'invisible opacity-0 -translate-y-2'}`}
154+
className={`absolute right-0 mt-2 w-56 overflow-hidden rounded-xl border border-rule bg-background shadow-xl transition-[opacity,transform] duration-(--dur-state) ease-(--ease-panel) ${downloadOpen ? 'visible opacity-100 translate-y-0' : 'invisible opacity-0 -translate-y-2'}`}
154155
>
155156
<a
156157
ref={(el) => { itemRefs.current[0] = el; }}
@@ -163,9 +164,7 @@ export default function Header({ githubStars }: Props) {
163164
requestAnimationFrame(() => window.scrollTo({ top: scrollY, behavior: 'instant' }));
164165
}}
165166
>
166-
<svg className="size-5 text-muted-foreground" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
167-
<path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" />
168-
</svg>
167+
<AppleGlyph className="size-5" />
169168
<div>
170169
<div className="font-medium">Download for Mac</div>
171170
<div className="text-xs text-muted-foreground">macOS 14+</div>

‎resources/js/components/landing/hero.tsx‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { AccentLine, FullLine } from '@/components/ui/full-line';
44
import ThemedImage from '@/components/ui/themed-image';
55
import SectionLabel from '@/components/ui/section-label';
66
import Button from '@/components/ui/button';
7+
import { AppleGlyph } from '@/components/ui/glyph';
78

89
interface Props {
910
githubStars?: number | null;
@@ -32,13 +33,6 @@ function formatReleaseDate(iso: string): string {
3233
.toUpperCase();
3334
}
3435

35-
function AppleGlyph() {
36-
return (
37-
<svg className="size-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
38-
<path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" />
39-
</svg>
40-
);
41-
}
4236

4337
export default function Hero({ githubStars, latestRelease }: Props) {
4438
const eyebrow = [

0 commit comments

Comments
 (0)