@pradip1995/segment-beauty-values 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +38 -0
- package/src/index.ts +2 -0
- package/src/manifest.ts +11 -0
- package/src/segment.css +162 -0
- package/src/segment.tsx +96 -0
package/package.json
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@pradip1995/segment-beauty-values",
|
|
3
|
+
"version": "0.1.1",
|
|
4
|
+
"license": "MIT",
|
|
5
|
+
"publishConfig": {
|
|
6
|
+
"access": "public"
|
|
7
|
+
},
|
|
8
|
+
"sideEffects": [
|
|
9
|
+
"src/segment.css"
|
|
10
|
+
],
|
|
11
|
+
"files": [
|
|
12
|
+
"src"
|
|
13
|
+
],
|
|
14
|
+
"exports": {
|
|
15
|
+
".": "./src/index.ts",
|
|
16
|
+
"./manifest": "./src/manifest.ts"
|
|
17
|
+
},
|
|
18
|
+
"peerDependencies": {
|
|
19
|
+
"@pradip1995/plugin-sdk": "^0.2.0",
|
|
20
|
+
"react": ">=19",
|
|
21
|
+
"react-dom": ">=19",
|
|
22
|
+
"next": ">=15"
|
|
23
|
+
},
|
|
24
|
+
"dependencies": {
|
|
25
|
+
"@pradip1995/segment-primitives": "0.3.0",
|
|
26
|
+
"@pradip1995/segment-tokens": "0.3.2"
|
|
27
|
+
},
|
|
28
|
+
"devDependencies": {
|
|
29
|
+
"@pradip1995/plugin-sdk": "^0.2.0",
|
|
30
|
+
"@types/react": "^19",
|
|
31
|
+
"react": "19.0.3",
|
|
32
|
+
"typescript": "^5.7.2"
|
|
33
|
+
},
|
|
34
|
+
"scripts": {
|
|
35
|
+
"typecheck": "tsc --noEmit",
|
|
36
|
+
"lint": "tsc --noEmit"
|
|
37
|
+
}
|
|
38
|
+
}
|
package/src/index.ts
ADDED
package/src/manifest.ts
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { SegmentManifest } from "@pradip1995/plugin-sdk"
|
|
2
|
+
|
|
3
|
+
const manifest: SegmentManifest = {
|
|
4
|
+
id: "beauty-values",
|
|
5
|
+
type: "segment",
|
|
6
|
+
version: "0.1.0",
|
|
7
|
+
compatibleFramework: ["^1.0.0"],
|
|
8
|
+
dataKey: "beautyValues",
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
export default manifest
|
package/src/segment.css
ADDED
|
@@ -0,0 +1,162 @@
|
|
|
1
|
+
.beauty-values {
|
|
2
|
+
width: 100%;
|
|
3
|
+
background: linear-gradient(180deg, #ffffff 0%, #faf7f5 55%, #ffffff 100%);
|
|
4
|
+
padding: 3.5rem 0 4rem;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
@media (min-width: 1024px) {
|
|
8
|
+
.beauty-values {
|
|
9
|
+
padding: 5rem 0 5.5rem;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.beauty-values__inner {
|
|
14
|
+
max-width: var(--container-max);
|
|
15
|
+
margin: 0 auto;
|
|
16
|
+
padding: 0 1rem;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
@media (min-width: 640px) {
|
|
20
|
+
.beauty-values__inner {
|
|
21
|
+
padding: 0 1.5rem;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.beauty-values__layout {
|
|
26
|
+
display: grid;
|
|
27
|
+
grid-template-columns: 1fr;
|
|
28
|
+
gap: 2rem;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
@media (min-width: 1024px) {
|
|
32
|
+
.beauty-values__layout {
|
|
33
|
+
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
|
|
34
|
+
gap: 3rem;
|
|
35
|
+
align-items: center;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.beauty-values__intro {
|
|
40
|
+
display: grid;
|
|
41
|
+
gap: 1.5rem;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.beauty-values__media {
|
|
45
|
+
position: relative;
|
|
46
|
+
width: 100%;
|
|
47
|
+
aspect-ratio: 4 / 3;
|
|
48
|
+
overflow: hidden;
|
|
49
|
+
border-radius: 0.25rem;
|
|
50
|
+
background: #f5ebe3;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
@media (min-width: 1024px) {
|
|
54
|
+
.beauty-values__media {
|
|
55
|
+
aspect-ratio: 5 / 4;
|
|
56
|
+
max-height: 28rem;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.beauty-values__image {
|
|
61
|
+
transition: transform 0.6s ease;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.beauty-values__intro:hover .beauty-values__image {
|
|
65
|
+
transform: scale(1.03);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.beauty-values__media-overlay {
|
|
69
|
+
position: absolute;
|
|
70
|
+
inset: 0;
|
|
71
|
+
background: linear-gradient(180deg, transparent 45%, rgba(42, 16, 32, 0.28) 100%);
|
|
72
|
+
pointer-events: none;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.beauty-values__copy {
|
|
76
|
+
max-width: 34rem;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.beauty-values__eyebrow {
|
|
80
|
+
margin: 0 0 0.75rem;
|
|
81
|
+
font-size: 0.6875rem;
|
|
82
|
+
font-weight: 600;
|
|
83
|
+
letter-spacing: 0.22em;
|
|
84
|
+
text-transform: uppercase;
|
|
85
|
+
color: var(--color-brand-accent);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.beauty-values__title {
|
|
89
|
+
margin: 0 0 1rem;
|
|
90
|
+
font-family: var(--font-heading);
|
|
91
|
+
font-size: clamp(1.875rem, 3.5vw, 3rem);
|
|
92
|
+
font-weight: 500;
|
|
93
|
+
line-height: 1.12;
|
|
94
|
+
letter-spacing: 0.02em;
|
|
95
|
+
color: var(--color-text-heading);
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.beauty-values__description {
|
|
99
|
+
margin: 0;
|
|
100
|
+
font-size: 1rem;
|
|
101
|
+
line-height: 1.75;
|
|
102
|
+
color: var(--color-text-body);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.beauty-values__grid {
|
|
106
|
+
display: grid;
|
|
107
|
+
grid-template-columns: 1fr;
|
|
108
|
+
gap: 1rem;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
@media (min-width: 640px) {
|
|
112
|
+
.beauty-values__grid {
|
|
113
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
114
|
+
gap: 1.125rem;
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.beauty-values__card {
|
|
119
|
+
display: flex;
|
|
120
|
+
flex-direction: column;
|
|
121
|
+
gap: 0.625rem;
|
|
122
|
+
padding: 1.375rem 1.25rem;
|
|
123
|
+
background: #ffffff;
|
|
124
|
+
border: 1px solid rgba(139, 58, 98, 0.1);
|
|
125
|
+
box-shadow: 0 10px 28px rgba(42, 16, 32, 0.05);
|
|
126
|
+
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.beauty-values__card:hover {
|
|
130
|
+
transform: translateY(-0.2rem);
|
|
131
|
+
border-color: rgba(139, 58, 98, 0.22);
|
|
132
|
+
box-shadow: 0 16px 36px rgba(42, 16, 32, 0.08);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.beauty-values__icon {
|
|
136
|
+
display: inline-flex;
|
|
137
|
+
align-items: center;
|
|
138
|
+
justify-content: center;
|
|
139
|
+
width: 2.25rem;
|
|
140
|
+
height: 2.25rem;
|
|
141
|
+
border-radius: 999px;
|
|
142
|
+
border: 1px solid rgba(139, 58, 98, 0.18);
|
|
143
|
+
background: var(--color-brand-accent-muted);
|
|
144
|
+
color: var(--color-brand-accent);
|
|
145
|
+
font-size: 0.875rem;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.beauty-values__card-title {
|
|
149
|
+
margin: 0;
|
|
150
|
+
font-size: 0.8125rem;
|
|
151
|
+
font-weight: 600;
|
|
152
|
+
letter-spacing: 0.12em;
|
|
153
|
+
text-transform: uppercase;
|
|
154
|
+
color: var(--color-text-heading);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.beauty-values__card-desc {
|
|
158
|
+
margin: 0;
|
|
159
|
+
font-size: 0.875rem;
|
|
160
|
+
line-height: 1.6;
|
|
161
|
+
color: var(--color-text-body);
|
|
162
|
+
}
|
package/src/segment.tsx
ADDED
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
import "./segment.css"
|
|
2
|
+
import Image from "next/image"
|
|
3
|
+
|
|
4
|
+
type ValueItem = {
|
|
5
|
+
title: string
|
|
6
|
+
description: string
|
|
7
|
+
icon?: string
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
const DEFAULT_FEATURES: ValueItem[] = [
|
|
11
|
+
{
|
|
12
|
+
title: "Clean formulas",
|
|
13
|
+
description: "Skin-first ingredients chosen for safety, efficacy, and everyday wear.",
|
|
14
|
+
icon: "◇",
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
title: "Expert curation",
|
|
18
|
+
description: "Every product vetted by our in-house beauty team before it reaches you.",
|
|
19
|
+
icon: "✦",
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
title: "Shade inclusive",
|
|
23
|
+
description: "Wide shade ranges plus guidance to help you find your perfect match.",
|
|
24
|
+
icon: "◎",
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
title: "Conscious beauty",
|
|
28
|
+
description: "Cruelty-free formulas and mindful packaging wherever possible.",
|
|
29
|
+
icon: "♡",
|
|
30
|
+
},
|
|
31
|
+
]
|
|
32
|
+
|
|
33
|
+
export default function BeautyValues({
|
|
34
|
+
eyebrow = "Why Lumière",
|
|
35
|
+
title = "Beauty, thoughtfully curated",
|
|
36
|
+
description = "From shade-matched foundations to dermatologist-loved serums — every product is chosen for results you can see and trust.",
|
|
37
|
+
image = "/images/cosmetics/skincare.jpg?v=2",
|
|
38
|
+
features = DEFAULT_FEATURES,
|
|
39
|
+
}: {
|
|
40
|
+
eyebrow?: string
|
|
41
|
+
title?: string
|
|
42
|
+
description?: string
|
|
43
|
+
image?: string
|
|
44
|
+
features?: ValueItem[]
|
|
45
|
+
}) {
|
|
46
|
+
const items = features.filter((item) => item.title?.trim())
|
|
47
|
+
if (items.length === 0) return null
|
|
48
|
+
|
|
49
|
+
const imageSrc = image?.trim()
|
|
50
|
+
|
|
51
|
+
return (
|
|
52
|
+
<section className="beauty-values" aria-labelledby="beauty-values-title">
|
|
53
|
+
<div className="beauty-values__inner">
|
|
54
|
+
<div className="beauty-values__layout">
|
|
55
|
+
<div className="beauty-values__intro">
|
|
56
|
+
{imageSrc ? (
|
|
57
|
+
<div className="beauty-values__media">
|
|
58
|
+
<Image
|
|
59
|
+
src={imageSrc}
|
|
60
|
+
alt=""
|
|
61
|
+
fill
|
|
62
|
+
className="beauty-values__image object-cover"
|
|
63
|
+
sizes="(max-width: 1024px) 100vw, 42vw"
|
|
64
|
+
unoptimized
|
|
65
|
+
/>
|
|
66
|
+
<div className="beauty-values__media-overlay" aria-hidden="true" />
|
|
67
|
+
</div>
|
|
68
|
+
) : null}
|
|
69
|
+
|
|
70
|
+
<div className="beauty-values__copy">
|
|
71
|
+
{eyebrow ? <p className="beauty-values__eyebrow">{eyebrow}</p> : null}
|
|
72
|
+
<h2 id="beauty-values-title" className="beauty-values__title">
|
|
73
|
+
{title}
|
|
74
|
+
</h2>
|
|
75
|
+
{description ? <p className="beauty-values__description">{description}</p> : null}
|
|
76
|
+
</div>
|
|
77
|
+
</div>
|
|
78
|
+
|
|
79
|
+
<div className="beauty-values__grid">
|
|
80
|
+
{items.map((item, index) => (
|
|
81
|
+
<article key={`${item.title}-${index}`} className="beauty-values__card">
|
|
82
|
+
{item.icon ? (
|
|
83
|
+
<span className="beauty-values__icon" aria-hidden="true">
|
|
84
|
+
{item.icon}
|
|
85
|
+
</span>
|
|
86
|
+
) : null}
|
|
87
|
+
<h3 className="beauty-values__card-title">{item.title}</h3>
|
|
88
|
+
<p className="beauty-values__card-desc">{item.description}</p>
|
|
89
|
+
</article>
|
|
90
|
+
))}
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
93
|
+
</div>
|
|
94
|
+
</section>
|
|
95
|
+
)
|
|
96
|
+
}
|