k1ngsterr1/landing
1
0
Fork 0
forked from Rosetta/landing
Code Pull Requests Activity

Align content pages with landing grid

Browse Source
This commit is contained in:
rosetta
2026-07-30 17:00:15 -07:00
parent 650d73830f
commit b902298ad6
4 changed files with 64 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/components/LegalPage/LegalPage.module.css
View File

@@ -1,12 +1,10 @@
.page {
min-height: 100vh;
background:
radial-gradient(circle at 50% 0%, light-dark(rgba(34, 139, 230, 0.12), rgba(34, 139, 230, 0.16)), transparent 34rem),
light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-8));
background: light-dark(var(--mantine-color-white), var(--mantine-color-dark-8));
}
.shell {
padding-top: var(--mantine-spacing-lg);
padding-top: var(--mantine-spacing-md);
padding-bottom: calc(var(--mantine-spacing-xl) * 2);
}
@@ -29,13 +27,13 @@
}
.main {
width: min(100%, 820px);
margin: 0 auto;
padding-top: 76px;
width: 100%;
padding-top: 96px;
}
.intro {
padding: 0 var(--mantine-spacing-md) calc(var(--mantine-spacing-xl) * 1.5);
max-width: 900px;
padding-bottom: 64px;
}
.title {
@@ -49,17 +47,15 @@
}
.document {
padding: 44px 48px 52px;
background: light-dark(rgba(255, 255, 255, 0.9), rgba(20, 21, 23, 0.9));
border-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
backdrop-filter: blur(12px);
padding-bottom: 72px;
}
.lead {
max-width: 780px;
margin: 0;
color: light-dark(var(--mantine-color-gray-8), var(--mantine-color-dark-0));
font-size: var(--mantine-font-size-lg);
line-height: 1.65;
font-size: 20px;
line-height: 1.6;
}
.text,
@@ -88,20 +84,27 @@
}
.section {
margin-top: 42px;
padding-top: 36px;
display: grid;
grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr);
gap: 52px;
margin-top: 56px;
padding-top: 48px;
border-top: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
}
.sectionTitle {
margin: 0 0 var(--mantine-spacing-md);
margin: 0;
color: light-dark(var(--mantine-color-dark-9), var(--mantine-color-white));
font-family: Outfit, var(--mantine-font-family);
font-size: clamp(22px, 3vw, 28px);
font-size: clamp(26px, 3vw, 34px);
font-weight: 500;
line-height: 1.25;
}
.sectionContent {
min-width: 0;
}
.document a {
color: light-dark(var(--mantine-color-blue-7), var(--mantine-color-blue-3));
text-underline-offset: 3px;
@@ -122,18 +125,24 @@
}
.footer {
margin-top: 72px;
padding-top: var(--mantine-spacing-lg);
border-top: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-5));
}
@media (max-width: 48em) {
.main {
padding-top: 52px;
padding-top: 72px;
}
.document {
padding: 32px 24px 40px;
.intro {
padding-bottom: 48px;
}
.section {
grid-template-columns: 1fr;
gap: var(--mantine-spacing-md);
margin-top: 44px;
padding-top: 36px;
}
}
@@ -147,15 +156,6 @@
flex-direction: column;
}
.intro {
padding-inline: 0;
}
.document {
margin-inline: calc(var(--mantine-spacing-xs) * -1);
padding-inline: 20px;
}
.footer {
align-items: flex-start;
flex-direction: column;

14
src/components/LegalPage/LegalPage.tsx
View File

@@ -45,7 +45,7 @@ export function LegalPage({
return (
<Box className={classes.page}>
<Container size="lg" className={classes.shell}>
<Container className={classes.shell}>
<Group component="header" justify="space-between" className={classes.header}>
<Anchor
component={Link}
@@ -91,15 +91,9 @@ export function LegalPage({
)}
</Box>
<Paper
component="article"
radius="lg"
withBorder
shadow="sm"
className={classes.document}
>
<Box component="article" className={classes.document}>
{children}
</Paper>
</Box>
</Box>
<Group component="footer" justify="space-between" className={classes.footer}>
@@ -132,7 +126,7 @@ export function LegalSection({ title, children }: LegalSectionProps) {
<Title order={2} className={classes.sectionTitle}>
{title}
</Title>
{children}
<Box className={classes.sectionContent}>{children}</Box>
</Box>
);
}

28
src/pages/SupportPage.module.css
View File

@@ -1,8 +1,13 @@
.lead {
max-width: 680px;
max-width: 780px;
color: light-dark(var(--mantine-color-gray-8), var(--mantine-color-dark-0));
font-size: var(--mantine-font-size-lg);
line-height: 1.65;
font-size: 20px;
line-height: 1.6;
}
.primaryAction {
height: 54px;
padding-inline: 38px;
}
.topic {
@@ -21,8 +26,11 @@
}
.section {
display: grid;
grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr);
gap: 52px;
scroll-margin-top: var(--mantine-spacing-xl);
padding-top: var(--mantine-spacing-xl);
padding-top: 48px;
border-top: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
}
@@ -34,7 +42,7 @@
}
.sectionTitle {
font-size: clamp(24px, 3vw, 30px);
font-size: clamp(26px, 3vw, 34px);
}
.contact {
@@ -51,6 +59,16 @@
}
@media (max-width: 48em) {
.primaryAction {
padding-inline: 18px;
}
.section {
grid-template-columns: 1fr;
gap: var(--mantine-spacing-lg);
padding-top: 36px;
}
.contact :global(.mantine-Group-root) {
align-items: flex-start;
flex-direction: column;

9
src/pages/SupportPage.tsx
View File

@@ -1,6 +1,7 @@
import {
Accordion,
Anchor,
Box,
Button,
Card,
Group,
@@ -125,7 +126,7 @@ interface SupportSectionProps {
function SupportSection({ id, title, description, items }: SupportSectionProps) {
return (
<Stack component="section" id={id} gap="lg" className={classes.section}>
<Box component="section" id={id} className={classes.section}>
<div>
<Title order={2} className={classes.sectionTitle}>
{title}
@@ -146,7 +147,7 @@ function SupportSection({ id, title, description, items }: SupportSectionProps)
</Accordion.Item>
))}
</Accordion>
</Stack>
</Box>
);
}
@@ -174,8 +175,10 @@ export function SupportPage() {
component="a"
href="mailto:admin@rosetta.im?subject=Rosetta%20Support%20Request"
leftSection={<IconMail size={18} />}
variant="default"
mt="xl"
size="md"
size="xl"
className={classes.primaryAction}
>
Email Rosetta Support
</Button>