Skip to content

Commit 4ea5e33

Browse files
ciro-macielciro-maciel
committed
feat: introduce Section component as a standardized content wrapper and refactor existing components to utilize it.
1 parent ae08a05 commit 4ea5e33

File tree

11 files changed

+370
-300
lines changed

11 files changed

+370
-300
lines changed

‎demo/src/Demo.jsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Box, Text } from '@mantine/core'
22
import { IconArrowRight, IconBolt, IconPuzzle, IconAccessible, IconBrush, IconCode, IconRocket, IconStack2, IconBrandGithub, IconPackage, IconShieldCheck, IconDeviceDesktop, IconDeviceMobile } from '@tabler/icons-react'
33

4-
import { Header, Hero, SocialProof, FeatureSplit, FeaturesGrid, Comparison, Testimonials, Pricing, CTABanner, FAQ, Layout, Footer, SECTION_BACKGROUNDS } from '@riligar/components-kit'
4+
import { Layout, Header, Hero, SocialProof, FeatureSplit, FeaturesGrid, Comparison, Testimonials, Pricing, CTABanner, FAQ, Section, Footer, SECTION_BACKGROUNDS } from '@riligar/components-kit'
55

66
// ─── Data ────────────────────────────────────────────────────
77

@@ -252,7 +252,7 @@ const FAQ_QUESTIONS = [
252252

253253
export function Demo() {
254254
return (
255-
<Box style={{ minHeight: '100vh', scrollBehavior: 'smooth' }}>
255+
<Layout>
256256
<Header
257257
logo={{
258258
src: 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg',
@@ -411,7 +411,7 @@ export function Demo() {
411411
background={SECTION_BACKGROUNDS.gray}
412412
/>
413413

414-
<Layout
414+
<Section
415415
id="mission"
416416
subtitle="Sustentabilidade"
417417
title="Open Source por princípio. Profissional por escolha."
@@ -427,7 +427,7 @@ export function Demo() {
427427
O <strong>@riligar/components-kit</strong> é um projeto de código aberto sob licença MIT. Acreditamos que a fundação da web deve ser livre. Nossos planos pagos existem para quem precisa de{' '}
428428
<strong>velocidade máxima, suporte dedicado e licenças comerciais</strong> para grandes projetos de agências, permitindo que continuemos a evoluir a biblioteca para toda a comunidade.
429429
</Text>
430-
</Layout>
430+
</Section>
431431

432432
<Footer
433433
logo={{
@@ -492,6 +492,6 @@ export function Demo() {
492492
</>
493493
}
494494
/>
495-
</Box>
495+
</Layout>
496496
)
497497
}

‎src/components/CTABanner.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Paper, Stack, Text, Box } from '@mantine/core'
2-
import { Layout } from './Layout.jsx'
2+
import { Section } from './Section.jsx'
33
import { resolveBackground } from '../configs/backgrounds.js'
44
import { CTAButton } from '../primitives/CTAButton.jsx'
55

@@ -9,7 +9,7 @@ import { CTAButton } from '../primitives/CTAButton.jsx'
99
*/
1010
export function CTABanner({ id, title, description, cta, background = 'gray' }) {
1111
return (
12-
<Layout
12+
<Section
1313
id={id}
1414
background={background}
1515
ta="center"
@@ -60,7 +60,7 @@ export function CTABanner({ id, title, description, cta, background = 'gray' })
6060
)}
6161
</Stack>
6262
</Paper>
63-
</Layout>
63+
</Section>
6464
)
6565
}
6666

‎src/components/Comparison.jsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
import { Fragment } from 'react'
22
import { SimpleGrid, Stack, Text, Paper, List, ThemeIcon, Group, Divider, Badge, Box } from '@mantine/core'
33
import { IconCheck } from '@tabler/icons-react'
4-
import { Layout } from './Layout.jsx'
4+
import { Section } from './Section.jsx'
5+
import { resolveBackground } from '../configs/backgrounds.js'
56
import { CTAButton } from '../primitives/CTAButton.jsx'
67

78
/**
89
* Comparison - Generic component for comparing a "Traditional Way" vs "Your Way"
910
*/
1011
export function Comparison({ id, subtitle, title, traditionalCol, newCol, background = 'white' }) {
1112
return (
12-
<Layout
13+
<Section
1314
id={id}
1415
subtitle={subtitle}
1516
title={title}
@@ -225,6 +226,6 @@ export function Comparison({ id, subtitle, title, traditionalCol, newCol, backgr
225226
</Box>
226227
</SimpleGrid>
227228
</Paper>
228-
</Layout>
229+
</Section>
229230
)
230231
}

‎src/components/FAQ.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Stack, Accordion, Text, Paper, SimpleGrid, ThemeIcon } from '@mantine/core'
22
import { IconBolt } from '@tabler/icons-react'
3-
import { Layout } from './Layout.jsx'
3+
import { Section } from './Section.jsx'
44
import { resolveBackground } from '../configs/backgrounds.js'
55
import { CTAButton } from '../primitives/CTAButton.jsx'
66

@@ -29,7 +29,7 @@ export function FAQ({ id, subtitle, title, questions = [], contactCard, backgrou
2929
}
3030

3131
return (
32-
<Layout
32+
<Section
3333
id={id}
3434
subtitle={subtitle}
3535
title={title}
@@ -149,6 +149,6 @@ export function FAQ({ id, subtitle, title, questions = [], contactCard, backgrou
149149
</SimpleGrid>
150150
</Paper>
151151
)}
152-
</Layout>
152+
</Section>
153153
)
154154
}

‎src/components/FeatureSplit.jsx‎

Lines changed: 91 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { SimpleGrid, Stack, Text, ThemeIcon, List, Group } from "@mantine/core";
2-
import { IconCheck } from "@tabler/icons-react";
3-
import { Layout } from "./Layout.jsx";
4-
import { MediaBlock } from "../primitives/MediaBlock.jsx";
5-
import { CTAButton } from "../primitives/CTAButton.jsx";
1+
import { SimpleGrid, Stack, Text, ThemeIcon, List, Group } from '@mantine/core'
2+
import { IconCheck } from '@tabler/icons-react'
3+
import { Section } from './Section.jsx'
4+
import { MediaBlock } from '../primitives/MediaBlock.jsx'
5+
import { CTAButton } from '../primitives/CTAButton.jsx'
66

77
/**
88
* FeatureSplit - Config-driven split content/media feature section.
@@ -11,83 +11,95 @@ import { CTAButton } from "../primitives/CTAButton.jsx";
1111
* @param {object} video - { src, width, filter }
1212
* @param {string} image - image src (alternative to video)
1313
*/
14-
export function FeatureSplit({
15-
id,
16-
subtitle,
17-
title,
18-
description,
19-
featuresList,
20-
cta,
21-
video,
22-
image,
23-
reverse = false,
24-
background = "white",
25-
}) {
26-
const listComponent = featuresList && featuresList.length > 0 && (
27-
<List
28-
spacing="md"
29-
size="md"
30-
center
31-
icon={
32-
<ThemeIcon color="gray.2" size={24} radius="0">
33-
<IconCheck size={14} color="var(--mantine-color-gray-9)" />
34-
</ThemeIcon>
35-
}
36-
>
37-
{featuresList.map((item, index) => (
38-
<List.Item key={index}>{item}</List.Item>
39-
))}
40-
</List>
41-
);
14+
export function FeatureSplit({ id, subtitle, title, description, featuresList, cta, video, image, reverse = false, background = 'white' }) {
15+
const listComponent = featuresList && featuresList.length > 0 && (
16+
<List
17+
spacing="md"
18+
size="md"
19+
center
20+
icon={
21+
<ThemeIcon
22+
color="gray.2"
23+
size={24}
24+
radius="0"
25+
>
26+
<IconCheck
27+
size={14}
28+
color="var(--mantine-color-gray-9)"
29+
/>
30+
</ThemeIcon>
31+
}
32+
>
33+
{featuresList.map((item, index) => (
34+
<List.Item key={index}>{item}</List.Item>
35+
))}
36+
</List>
37+
)
4238

43-
const contentCol = (
44-
<Stack justify="center" gap="lg">
45-
{description && (
46-
<Text c="gray.6" size="xl" lh={1.6}>
47-
{description}
48-
</Text>
49-
)}
39+
const contentCol = (
40+
<Stack
41+
justify="center"
42+
gap="lg"
43+
>
44+
{description && (
45+
<Text
46+
c="gray.6"
47+
size="xl"
48+
lh={1.6}
49+
>
50+
{description}
51+
</Text>
52+
)}
5053

51-
{listComponent}
54+
{listComponent}
5255

53-
{cta && (
54-
<Group mt="md">
55-
<CTAButton
56-
label={cta.label}
57-
href={cta.href}
58-
icon={cta.icon}
59-
size={cta.size || "lg"}
60-
variant={cta.variant}
61-
color={cta.color}
62-
/>
63-
</Group>
64-
)}
65-
</Stack>
66-
);
56+
{cta && (
57+
<Group mt="md">
58+
<CTAButton
59+
label={cta.label}
60+
href={cta.href}
61+
icon={cta.icon}
62+
size={cta.size || 'lg'}
63+
variant={cta.variant}
64+
color={cta.color}
65+
/>
66+
</Group>
67+
)}
68+
</Stack>
69+
)
6770

68-
const mediaCol = (video || image) && (
69-
<MediaBlock video={video} image={image} width="80%" />
70-
);
71+
const mediaCol = (video || image) && (
72+
<MediaBlock
73+
video={video}
74+
image={image}
75+
width="80%"
76+
/>
77+
)
7178

72-
return (
73-
<Layout id={id} subtitle={subtitle} title={title} background={background}>
74-
<SimpleGrid
75-
cols={{ base: 1, md: 2 }}
76-
spacing={{ base: 40, md: 80 }}
77-
verticalSpacing={{ base: 40, md: 50 }}
78-
>
79-
{reverse ? (
80-
<>
81-
{mediaCol}
82-
{contentCol}
83-
</>
84-
) : (
85-
<>
86-
{contentCol}
87-
{mediaCol}
88-
</>
89-
)}
90-
</SimpleGrid>
91-
</Layout>
92-
);
79+
return (
80+
<Section
81+
id={id}
82+
subtitle={subtitle}
83+
title={title}
84+
background={background}
85+
>
86+
<SimpleGrid
87+
cols={{ base: 1, md: 2 }}
88+
spacing={{ base: 40, md: 80 }}
89+
verticalSpacing={{ base: 40, md: 50 }}
90+
>
91+
{reverse ? (
92+
<>
93+
{mediaCol}
94+
{contentCol}
95+
</>
96+
) : (
97+
<>
98+
{contentCol}
99+
{mediaCol}
100+
</>
101+
)}
102+
</SimpleGrid>
103+
</Section>
104+
)
93105
}

‎src/components/FeaturesGrid.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Grid, Paper, Stack, Text, ThemeIcon, Group, Box, Badge, Center, RingProgress, Code } from '@mantine/core'
2-
import { Layout } from './Layout.jsx'
2+
import { Section } from './Section.jsx'
33
import { resolveBackground } from '../configs/backgrounds.js'
44

55
/**
@@ -28,7 +28,7 @@ import { resolveBackground } from '../configs/backgrounds.js'
2828
export function FeaturesGrid({ id, subtitle, title, background = 'gray', items = [] }) {
2929
const bg = resolveBackground(background)
3030
return (
31-
<Layout
31+
<Section
3232
id={id}
3333
subtitle={subtitle}
3434
title={title}
@@ -42,7 +42,7 @@ export function FeaturesGrid({ id, subtitle, title, background = 'gray', items =
4242
/>
4343
))}
4444
</Grid>
45-
</Layout>
45+
</Section>
4646
)
4747
}
4848

‎src/components/Layout.jsx‎

Lines changed: 5 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,9 @@
1-
import { Box, Container, Stack } from "@mantine/core";
2-
import { SectionHeader } from "../primitives/SectionHeader.jsx";
3-
import { resolveBackground } from "../configs/backgrounds.js";
1+
import { Box } from '@mantine/core'
42

53
/**
6-
* Layout - The "Stage" for the Zen Design Series
7-
* implements:
8-
* 1. Content over Chrome (high-impact minimalism)
9-
* 2. The Stage (XL containers with generous padding)
10-
* 3. Massive Hierarchy (via SectionHeader primitive)
4+
* Layout - Root-level wrapper for the application.
5+
* Consolidates global styles like minimum height and smooth scrolling.
116
*/
12-
export function Layout({
13-
children,
14-
title,
15-
subtitle,
16-
id,
17-
background = "white",
18-
py = { base: 80, md: 120 },
19-
maw = 800,
20-
ta = "left",
21-
stackGap = "xl",
22-
}) {
23-
const bg = resolveBackground(background);
24-
25-
return (
26-
<Box
27-
component="section"
28-
id={id}
29-
bg={bg}
30-
py={py}
31-
style={{ overflow: "hidden" }}
32-
>
33-
<Container size="lg">
34-
<Stack gap={stackGap}>
35-
<SectionHeader subtitle={subtitle} title={title} ta={ta} maw={maw} />
36-
<Box>{children}</Box>
37-
</Stack>
38-
</Container>
39-
</Box>
40-
);
7+
export function Layout({ children }) {
8+
return <Box style={{ minHeight: '100vh', scrollBehavior: 'smooth' }}>{children}</Box>
419
}

0 commit comments

Comments
 (0)