eny.space Landingpage
feat(app): add components configuration, update global styles, and enhance utility functions
+207
-1
+6
app/actions/lib/utils.ts
+6
app/actions/lib/utils.ts
+119
-1
app/globals.css
+119
-1
app/globals.css
···
1
1
@import "tailwindcss";
2
+
@import "tw-animate-css";
3
+
4
+
@custom-variant dark (&:is(.dark *));
2
5
3
6
/* Variables */
4
7
:root {
···
9
12
--h1-color: #f9fafb;
10
13
--h2-color: #e5e7eb;
11
14
--h3-color: #9ca3af;
12
-
--radius: 6px;
15
+
--radius: 0.625rem;
13
16
--container-width-max: 1280px;
14
17
--page-width-max: 600px;
15
18
--transition-duration: 2s;
19
+
--background: oklch(1 0 0);
20
+
--foreground: oklch(0.141 0.005 285.823);
21
+
--card: oklch(1 0 0);
22
+
--card-foreground: oklch(0.141 0.005 285.823);
23
+
--popover: oklch(1 0 0);
24
+
--popover-foreground: oklch(0.141 0.005 285.823);
25
+
--primary: oklch(0.21 0.006 285.885);
26
+
--primary-foreground: oklch(0.985 0 0);
27
+
--secondary: oklch(0.967 0.001 286.375);
28
+
--secondary-foreground: oklch(0.21 0.006 285.885);
29
+
--muted: oklch(0.967 0.001 286.375);
30
+
--muted-foreground: oklch(0.552 0.016 285.938);
31
+
--accent: oklch(0.967 0.001 286.375);
32
+
--accent-foreground: oklch(0.21 0.006 285.885);
33
+
--destructive: oklch(0.577 0.245 27.325);
34
+
--border: oklch(0.92 0.004 286.32);
35
+
--input: oklch(0.92 0.004 286.32);
36
+
--ring: oklch(0.705 0.015 286.067);
37
+
--chart-1: oklch(0.646 0.222 41.116);
38
+
--chart-2: oklch(0.6 0.118 184.704);
39
+
--chart-3: oklch(0.398 0.07 227.392);
40
+
--chart-4: oklch(0.828 0.189 84.429);
41
+
--chart-5: oklch(0.769 0.188 70.08);
42
+
--sidebar: oklch(0.985 0 0);
43
+
--sidebar-foreground: oklch(0.141 0.005 285.823);
44
+
--sidebar-primary: oklch(0.21 0.006 285.885);
45
+
--sidebar-primary-foreground: oklch(0.985 0 0);
46
+
--sidebar-accent: oklch(0.967 0.001 286.375);
47
+
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
48
+
--sidebar-border: oklch(0.92 0.004 286.32);
49
+
--sidebar-ring: oklch(0.705 0.015 286.067);
16
50
}
17
51
18
52
body {
···
313
347
bottom: 0;
314
348
}
315
349
}
350
+
351
+
@theme inline {
352
+
--radius-sm: calc(var(--radius) - 4px);
353
+
--radius-md: calc(var(--radius) - 2px);
354
+
--radius-lg: var(--radius);
355
+
--radius-xl: calc(var(--radius) + 4px);
356
+
--radius-2xl: calc(var(--radius) + 8px);
357
+
--radius-3xl: calc(var(--radius) + 12px);
358
+
--radius-4xl: calc(var(--radius) + 16px);
359
+
--color-background: var(--background);
360
+
--color-foreground: var(--foreground);
361
+
--color-card: var(--card);
362
+
--color-card-foreground: var(--card-foreground);
363
+
--color-popover: var(--popover);
364
+
--color-popover-foreground: var(--popover-foreground);
365
+
--color-primary: var(--primary);
366
+
--color-primary-foreground: var(--primary-foreground);
367
+
--color-secondary: var(--secondary);
368
+
--color-secondary-foreground: var(--secondary-foreground);
369
+
--color-muted: var(--muted);
370
+
--color-muted-foreground: var(--muted-foreground);
371
+
--color-accent: var(--accent);
372
+
--color-accent-foreground: var(--accent-foreground);
373
+
--color-destructive: var(--destructive);
374
+
--color-border: var(--border);
375
+
--color-input: var(--input);
376
+
--color-ring: var(--ring);
377
+
--color-chart-1: var(--chart-1);
378
+
--color-chart-2: var(--chart-2);
379
+
--color-chart-3: var(--chart-3);
380
+
--color-chart-4: var(--chart-4);
381
+
--color-chart-5: var(--chart-5);
382
+
--color-sidebar: var(--sidebar);
383
+
--color-sidebar-foreground: var(--sidebar-foreground);
384
+
--color-sidebar-primary: var(--sidebar-primary);
385
+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
386
+
--color-sidebar-accent: var(--sidebar-accent);
387
+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
388
+
--color-sidebar-border: var(--sidebar-border);
389
+
--color-sidebar-ring: var(--sidebar-ring);
390
+
}
391
+
392
+
.dark {
393
+
--background: oklch(0.141 0.005 285.823);
394
+
--foreground: oklch(0.985 0 0);
395
+
--card: oklch(0.21 0.006 285.885);
396
+
--card-foreground: oklch(0.985 0 0);
397
+
--popover: oklch(0.21 0.006 285.885);
398
+
--popover-foreground: oklch(0.985 0 0);
399
+
--primary: oklch(0.92 0.004 286.32);
400
+
--primary-foreground: oklch(0.21 0.006 285.885);
401
+
--secondary: oklch(0.274 0.006 286.033);
402
+
--secondary-foreground: oklch(0.985 0 0);
403
+
--muted: oklch(0.274 0.006 286.033);
404
+
--muted-foreground: oklch(0.705 0.015 286.067);
405
+
--accent: oklch(0.274 0.006 286.033);
406
+
--accent-foreground: oklch(0.985 0 0);
407
+
--destructive: oklch(0.704 0.191 22.216);
408
+
--border: oklch(1 0 0 / 10%);
409
+
--input: oklch(1 0 0 / 15%);
410
+
--ring: oklch(0.552 0.016 285.938);
411
+
--chart-1: oklch(0.488 0.243 264.376);
412
+
--chart-2: oklch(0.696 0.17 162.48);
413
+
--chart-3: oklch(0.769 0.188 70.08);
414
+
--chart-4: oklch(0.627 0.265 303.9);
415
+
--chart-5: oklch(0.645 0.246 16.439);
416
+
--sidebar: oklch(0.21 0.006 285.885);
417
+
--sidebar-foreground: oklch(0.985 0 0);
418
+
--sidebar-primary: oklch(0.488 0.243 264.376);
419
+
--sidebar-primary-foreground: oklch(0.985 0 0);
420
+
--sidebar-accent: oklch(0.274 0.006 286.033);
421
+
--sidebar-accent-foreground: oklch(0.985 0 0);
422
+
--sidebar-border: oklch(1 0 0 / 10%);
423
+
--sidebar-ring: oklch(0.552 0.016 285.938);
424
+
}
425
+
426
+
@layer base {
427
+
* {
428
+
@apply border-border outline-ring/50;
429
+
}
430
+
body {
431
+
@apply bg-background text-foreground;
432
+
}
433
+
}
+22
components.json
+22
components.json
···
1
+
{
2
+
"$schema": "https://ui.shadcn.com/schema.json",
3
+
"style": "new-york",
4
+
"rsc": true,
5
+
"tsx": true,
6
+
"tailwind": {
7
+
"config": "",
8
+
"css": "app/globals.css",
9
+
"baseColor": "zinc",
10
+
"cssVariables": true,
11
+
"prefix": ""
12
+
},
13
+
"iconLibrary": "lucide",
14
+
"aliases": {
15
+
"components": "@/actions/components",
16
+
"utils": "@/actions/lib/utils",
17
+
"ui": "@/actions/components/ui",
18
+
"lib": "@/actions/lib",
19
+
"hooks": "@/actions/hooks"
20
+
},
21
+
"registries": {}
22
+
}
+55
package-lock.json
+55
package-lock.json
···
10
10
"@tailwindcss/postcss": "^4.1.18",
11
11
"@vercel/analytics": "^1.6.1",
12
12
"@vercel/speed-insights": "^1.3.1",
13
+
"class-variance-authority": "^0.7.1",
14
+
"clsx": "^2.1.1",
15
+
"lucide-react": "^0.562.0",
13
16
"next": "latest",
14
17
"postcss": "^8.5.6",
15
18
"react": "18.2.0",
16
19
"react-dom": "18.2.0",
17
20
"server-only": "0.0.1",
18
21
"stripe": "14.8.0",
22
+
"tailwind-merge": "^3.4.0",
19
23
"tailwindcss": "^4.1.18"
20
24
},
21
25
"devDependencies": {
22
26
"@types/node": "20.4.6",
23
27
"@types/react": "18.2.8",
28
+
"tw-animate-css": "^1.4.0",
24
29
"typescript": "5.1.6"
25
30
}
26
31
},
···
1129
1134
],
1130
1135
"license": "CC-BY-4.0"
1131
1136
},
1137
+
"node_modules/class-variance-authority": {
1138
+
"version": "0.7.1",
1139
+
"resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
1140
+
"integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
1141
+
"license": "Apache-2.0",
1142
+
"dependencies": {
1143
+
"clsx": "^2.1.1"
1144
+
},
1145
+
"funding": {
1146
+
"url": "https://polar.sh/cva"
1147
+
}
1148
+
},
1132
1149
"node_modules/client-only": {
1133
1150
"version": "0.0.1",
1134
1151
"resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
1135
1152
"integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
1136
1153
"license": "MIT"
1154
+
},
1155
+
"node_modules/clsx": {
1156
+
"version": "2.1.1",
1157
+
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
1158
+
"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
1159
+
"license": "MIT",
1160
+
"engines": {
1161
+
"node": ">=6"
1162
+
}
1137
1163
},
1138
1164
"node_modules/csstype": {
1139
1165
"version": "3.2.3",
···
1572
1598
"loose-envify": "cli.js"
1573
1599
}
1574
1600
},
1601
+
"node_modules/lucide-react": {
1602
+
"version": "0.562.0",
1603
+
"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.562.0.tgz",
1604
+
"integrity": "sha512-82hOAu7y0dbVuFfmO4bYF1XEwYk/mEbM5E+b1jgci/udUBEE/R7LF5Ip0CCEmXe8AybRM8L+04eP+LGZeDvkiw==",
1605
+
"license": "ISC",
1606
+
"peerDependencies": {
1607
+
"react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
1608
+
}
1609
+
},
1575
1610
"node_modules/magic-string": {
1576
1611
"version": "0.30.21",
1577
1612
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
···
1990
2025
}
1991
2026
}
1992
2027
},
2028
+
"node_modules/tailwind-merge": {
2029
+
"version": "3.4.0",
2030
+
"resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.4.0.tgz",
2031
+
"integrity": "sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==",
2032
+
"license": "MIT",
2033
+
"funding": {
2034
+
"type": "github",
2035
+
"url": "https://github.com/sponsors/dcastil"
2036
+
}
2037
+
},
1993
2038
"node_modules/tailwindcss": {
1994
2039
"version": "4.1.18",
1995
2040
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz",
···
2014
2059
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
2015
2060
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
2016
2061
"license": "0BSD"
2062
+
},
2063
+
"node_modules/tw-animate-css": {
2064
+
"version": "1.4.0",
2065
+
"resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.4.0.tgz",
2066
+
"integrity": "sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==",
2067
+
"dev": true,
2068
+
"license": "MIT",
2069
+
"funding": {
2070
+
"url": "https://github.com/sponsors/Wombosvideo"
2071
+
}
2017
2072
},
2018
2073
"node_modules/typescript": {
2019
2074
"version": "5.1.6",
+5
package.json
+5
package.json
···
11
11
"@tailwindcss/postcss": "^4.1.18",
12
12
"@vercel/analytics": "^1.6.1",
13
13
"@vercel/speed-insights": "^1.3.1",
14
+
"class-variance-authority": "^0.7.1",
15
+
"clsx": "^2.1.1",
16
+
"lucide-react": "^0.562.0",
14
17
"next": "latest",
15
18
"postcss": "^8.5.6",
16
19
"react": "18.2.0",
17
20
"react-dom": "18.2.0",
18
21
"server-only": "0.0.1",
19
22
"stripe": "14.8.0",
23
+
"tailwind-merge": "^3.4.0",
20
24
"tailwindcss": "^4.1.18"
21
25
},
22
26
"devDependencies": {
23
27
"@types/node": "20.4.6",
24
28
"@types/react": "18.2.8",
29
+
"tw-animate-css": "^1.4.0",
25
30
"typescript": "5.1.6"
26
31
}
27
32
}